网页设计与制作(代码介绍)和实验报告1-DIV+CSS网页设计|html设计实验报告
时间:2020-07-23 16:34:11 来源:天一资源网 本文已影响 人
网页设计与制作
一、HTML基本语言:
1.HTML基本语法:(如图)
<html>....</html>:表示HTML文档的开始和结束
<head>…</head>:表示HTML文档的头部。最常用的标记是<title>…</title>,<title>标记中的内容对应浏览窗口标题的信息。
<body>…</dody>:<body>标记之内的内容对应的是浏览器中的内容。
2.<body>标记的使用:(如图)
Bgcolor="颜色":设置页面背景色。
Background="图像文件的名字及路径":设置背景文件。
Text="颜色":设置页面文字默认颜色。
标记属性用来对标记之间的内容修饰,标记其属性必须放到“< >”中,各属性间必须用空格隔开。
色彩的表示方法有两各种:1.RGB?模式,用16进制的红(Red)、绿(Green)、蓝(Blue)的值来表示,格式为“#RRGGBB”,字符包括数字0~9和字母A~F,如红色为“#FF0000”2.用英文单词表示彩色,如红色“red”。
二、常用的HTML标记及其属性制作网页①.以下标记都出现在<body>中出现,标记必须以成对出现,如<body>...</dody>.
①.以下标记都出现在<body>中出现,标记必须以成对出现,如<body>...</dody>.
1.页面属性、排版标志
⑴.标题标记:
格式:<h#>...<h#>, 其中“#”的取值范国为1(字体最大)~6(字体最小)。
作用:设置文档的各级标题。
常见属性:align,用于定义标题的对齐方式,默认为左对齐,
标题标记属性:(如表)
值
表示的对方试
示例
left
左对齐
<h1 align="left">文字内容<h1>
right
右对齐
<h1 align="right">文字内容<h1>
center
居中对齐
<h1 align="center">文字内容<h1>
⑵.版面格式标记
①.分段与换行:(如表)
标记名称
格式
作用
段落标记
<p>...</p>或者<p>
使标记后面的内容另起一段。常用属性:align,用于定义段落的对齐方式,与标题标记类似
换行标记
...<br>
使标记后面的文字内容换行显示
②.文本对齐标记
可以在<p>标记中使用align属性指定文本对齐方式。另外,居中对齐可以通过居中对齐方式进行设置。
格式:<center>…<center>
作用:使标记间的内容以居中对齐方式显示。
③.水平线标记
格式:<hr>
作用:在文档中插入水平线。
属性名称
属性含义
示例
align
定义水平线的对齐方式,默认为“center”
右对齐水平线:<hr align="right">
color
定义水平线的颜色
绿色水平线:<hr color="green">
noshade
定义水平线为无阴影
无阴影水平线:<hr noshade color="green">
size
定义水平线的宽度,单位默认为像素
宽度为4像素的水平线:<hr size="4">
width
定义水平线的长度,单位为像素或百分比(相于页面宽度)
占页面宽度80%的水平线:<hr width="80%">
常用水平线标记属性:(如表)
④.字体标记
格式:<font>…</font>
作用:设置标记间文体的字体、大小、颜色等。
常用字体标记属性:(如表)
属性名称
属性含义
示例
face
设置标记间文本的字体
<font face="隶书">文字内容</font>
size
设置标记间文本的大小,取值范围为1~7
<font size="2">文字内容</font>
color
设置标记间文本的颜色
<font color="red">文字内容</font>
title
设置鼠标指向文本时,出现的提示信息
<font title="信息">文字内容</font>
⑤.字体修饰标记
作用:设置标记间文本的样式,如粗体、斜体、下划线等。
字体修饰标记(如表)
功能
格式
粗体
<b>...</b>或者<strong>...</strong>
斜体
<i>...</i>
下划线
<u>...</u>
上标
<sup>...</sup>
下标
<sub>...<sub>
删除线
<s>...</s>或者<strike>...</strike>
大字体
<big>...</big>
小字体
<small>...</small>
⑥.特殊字符
作用:在页面上显示特殊符号。
字符名称
显示结果
空格
<
<(小于号)
>
>(大于号)
"
"(双引号)
©
®
×
×(乘号)
特殊字符(如表)
⑶项目符号标记
作用:在HTML页面中,合理地使用列表标记,可以起提纲和格式排序文作用。列表分为无序列表和有序列表两类
无序列表的主要标记为<ul>和<li>.作用:生成没有编号的列表,每一个列表前使用<li>标签区分。(格式如右)
<ul>标记的主要属性为type(如表)
值
代表
disc
实心加点(默认)
circle
空心圆
square
实心小方块。
注意:项目符号标记在网页中的应用比较广泛,它能清楚地标注文本的层次结构,使用户浏览网页时能对该网页的架构一目了然。其中,项目符号标记使用<ul>…</ul>时,必须是成对出现的,并且其中,项目插入多对<li>…<li>列表项标记组成完整的列表。
例:
结果图为:
2.超链接标记
格式:<a>...</a>
作用:把当前位置的文本或图像连接到其他的页面、文本或图像。
常用超链接标记属性(如表)
属性名称
属性含义
示例
href
指定链接的目标地址,可以是站内的文件,也可以某个网站
<a href="a.html">...</a>
<a href="">...<a>
target
指定链接的目标窗口,其值是一个窗口的名称,也可以是_blank、_parent、_self、_top,默认为_self
<a href="a.html" target="_blank”...</a>
title
鼠标指向链接时,所显示的信息
<a href="a.html" title="信息"...</a>
target属性
target取值
作用
_blank
在新窗口中打开
_parent
在上一级窗口中打开
_self
在当前窗口中打开,此项为默认值
_top
在浏览器的整个窗口中打开,忽略任何框架
绝对路径与相对路径:在网页文档中引用一个文件时,需要给出该文件的路径,这个可以是网络资源,也可以是本地计算机上的文件资源。HTML有两种路径:绝对路径与相对路径。
1.绝对路径:从协议开始的URL地址或从驱动名称开始的本地文件路径都称为绝对路径。如 或d:\1\1.html
2.相对路径:从文件存储位置开始的路径叫相对路径。
在描述相对路径时,需要注意:
⑴.如果源文件和引用的文件在同一级目录里,直接写引用文件名即可。
⑵.“.../”表示源文件所在目录的上一级,“.../.../”表示源文件所在目录的上上级目录,以此类推。
⑶.引用下级的文件,直接写下级目录文件的路径即可。例如,站点文件夹中有主页文件index.html和图像文件夹images,index.html文件中使用了images文件夹中的01.jpg图像文件,那么图像01.jpg相对于index.html的相对路径就是imges\01.jpg
3.图像标记
格式:<img>
作用:在页面中插入图像或视频文件,图像格式可以是:GIF、JPG、PNG。
常用图像标记属性(如表)
属性名称
属性含义
示例
src
指定插入图像名称或路径
<img src="a.gif">或者<img src="images\a.gif">
alt
替换文本,当浏览器不能显示图像时、在鼠标指向图像时、或图像加载时间过长时,所要显示的文本
使标记后面的文字进行换行显示
width
指定图像宽度,单位是像素
<img src= "images\a.gif " width= "100 " height= "200 ">
height
指定图像高度,单位是像素
border
指定图像边框,默认为0
hspace
指定图像左右两侧与其他对象(如文本)之间的距离,单位为对象
<img src= "images\a.gif " hspace= "30 " vspace= "20 "
vspace
指定图像上下两端与其他对象(如文本)之间的距离,单位为像素
align
指定图像与文本的对齐方式,取值有:top、middle、bottom、left、right。当取值为left、right时,可以实现图像文字左右绕排的效果
<img src= "images\a.jpg " align= "left ">
4.表格标记
①表格的几种标记
作用表格是最基本的网页布局的技术
表格的主要标记(如表)
标记
描述
<table>...</table>
表示整个表格的开始、结束
<caption>...</caption>
用来设置整个表格的名称,表格中可不用此标记
<tr>...</tr>
代表表格中一行
<td>...<td>
代表单个普通的单元格,此标记必须放在一对<tr>标记内
<th>...</th>
用于定义表头单元格,单元格中的文字将以粗体显示,此标签必须放在一对<tr>标记内,在表格中也可以不用此标记
格式(如图)
<table>标记的主要属性(如表)
属性名称
属性含义
border
表格边框的宽度(以像素为单位);若不设置此属性,则边框的宽度默认为0,即不显示边框
bordercolor
表格边框颜色
background
设置表格的背景图像
bgcolor
设置表格的背景颜色
width
表格宽度;其值可用像素表示,也可用占窗口的百分比表示
height
表格高度;其值 可用像素表示,也可用占窗口的百分比表示
align
表格在页面的水平位置;取值为:left、right、center;默认为在对齐
cellspacing
单元格之间的间距;其值可用像素来表示
cellpadding
单元格内容与单元格边界之间的距离;其值可用像素来表示
<tr>标记属性
属性名称
属性含义
align
行内容的水平对齐方式;取值为:left、right、center;默认为左对齐
valign
行内容的垂垂直对齐方式;取值为:top、middle、bottom;默认为局中对齐
height
行高;其值可用像素或表格高度百分比表示
title
鼠标指向该行时,显示的指示信息
bgcolor
行的背景颜色
bordercolor
行的边框颜色
nowrap
本行所有单元格内容不能自动换行
<td>和<th>标记主要属性
属性名称
属性含义
align
单元格内容的水平对齐方式;取值为:left、right、center;默认为左对齐(若与<tr>标签的属性冲突时,以单元格自身的设置为主
valign
单元格内容的垂直对齐方式;取值为:top、middle、bottom;默认为垂直居中(若与<tr>标签的属性冲突时,以单元格自身的设置为主)
(续表)
属性名称
属性含义
width
单元格的宽度,可用像素值或表格宽度的百分比来表示
height
单元格的高度,可用像素值或表格高度的百分比来表示
bgcolor
单元格的背景颜色
bordercolor
单元格的边框颜色
nowrap
单元格内容不能自动换行
rowspan
单元格所占的行数
colspan
单元格据占的列数
②合并单元格
若需要建立不规则表格,就要用到<td>标记的rowspan属性和colspan属性来合并单元格。如实现下图①到下图②的转化。
进行单元格合并时,需要遵循如下几条原则:
⑴.整个表格中,每行的列数要相同。
⑵.若某个单元格中,设置了属性colspan="2",表示该单元格在横向占据了两个单元格的位置,所以,在当前行<tr>中,就需要少写一个<tr>标签(如B3单元格).依此类推,若设置了属性colspan="3",当前行<tr>中,就需要少写两个<td>标签(如C2单元格)。
⑶.若某个单元格中,设置了属性rowspan="2",表示该单元格在纵向占据了两个单元格的位置,所以,在下一个<tr>中,该列处就需要少写一个<td>标签(如A2单元格)。若设置了属性rowspan="3"在下两行<tr>中,该列处都需要少一个<td>s标签,依此类推。
合并后的表格代码为:
5.框架标记
框架的主要标记有:<frameset>和<frame>,分别表示整个框架和单个框架。
⑴框架集标记<frameset>的几种常用属性有cols、rows、frameborder.
cols:创建纵向分割框架时,通过该属性指定各框架的列宽,取值可以是“像素”和“%”,分割左右窗口,用“*”表示剩余部分。
rows:创建横向分割框架时,通过该属性指定各框架的行高,取值可以是“像素”和“%”,分割左右窗口,用“*”表示剩余部分。
Frameborder:指定框架周围是否显示边框,取值为“0”或“no”表示不显示边框,取值为“1”或“yes
⑵.框架标记<frame>的几种常用属性有src、name、frameborder、scrolling.
src:设置此框架中要显示的网页的文件名(路径),每个框架对应一个网页。
name:设置该框架的名称,当有超链接指定要打开的页面在此框架中显示时,需要使用到target="框架",此时如果省略了框架名就无法链接了。
frameborder:指定框架周围是否显示边框,“0”是不显示,“1
Scrolling:设置是否显示滚动条,“yes”表示显示,“no”表示不显示,“auto”表示自动调整(默认值)。
在包含框架HTML文档中,要使用框架标记<frameset>取代<body>s标记,然后通过框架标记<frame>定义单个框架。
除了以上所学到的标记之外,HTML中还包含可以让文本移动的标记<marquee>...</marquee>;用于在网页中插入音乐、视频和动画的标记<embed>;背景音乐标记<bgsound>等,如果要实现页面之间的过渡效果,可以通过<meta>标记的属性来实现。
HTML语言拥有许多功能丰富标记,由于时间与能力有限,就不在介绍了。
学生实验报告
学 期: 学年第二学期
班 级: 计算机科学与技术
学 号:
姓 名:
课程编号:
课程名称: 网页设计与制作
填写说明
1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。
2、课程编号和课程名称必须和教务系统中保持一致,实验项目名称填写须完整规范,不能省略或使用简称。
3、每个实验项目应填写一份实验报告。如同一个实验项目分多次进行,可在实验报告中写明。
4、如果实验报告页面不够,可分成两个实验报告填写。
实验目录及成绩登记
序号
实验日期
实验项目名称
实验成绩
备注
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
实验报告最终成绩:
指导教师签名:
说明:实验项目顺序和名称由学生填写,必须前后保持一致;实验成绩以百分制计,由实验指导教师填写并签名,一般不能涂改,确有涂改的,应在备注栏说明原因;实验报告部分最终成绩为所有实验项目成绩的平均值。
实 验 报 告
实验日期: 年 月 日 星期
实验项目名称
DIV+CSS网页设计
实验项目类型
□演示型 □验证型 □基本训练型 □综合型 ?设计型 □提高型
实验指导教师
实验地点
实验楼424
是否分组
否
小组其他成员
一、实验目的及要求
实验目的:
1、理解CSS规则定义;
3、掌握DIV+CSS布局的方法与技巧。
实验要求:
(一)任选一种网页布局结构,并根据布局结构画出首页草图。
(二)对草图中的布局利用DIV+CSS进行布局
1、在代码部分对每一层的内容进行标注
2、注意层的命名要有意义
3、CSS规则放在外部样式表文件中。
4、规划网站目录结构和链接结构
5、主要页面布局设计
6、丰富页面内容,插入文字、图片、超链接
总体要求:页面数量为3个以上,首页使用DIV+CSS进行布局,插入文字、图片、超链接,页面内容丰富、美观。
二、实验使用的主要设备(含软件系统)
设备:计算机;
软件:Dreamweaver CS6。
三、实验操作过程及内容
软件操作类:
1、写出实验主要内容、步骤及注意事项;
2、记录每步实验的数据、结果等;
3、关键步骤及实验结果可截图附于实验报告中。
四、实验结论、问题与建议(含取得的成果)
写出实验结论,讨论实验中输出信息、图形、调试过程中所遇的问题可能的解释及处理方法,对实验仪器的选择和实验方法的改进提出建议,简述自己做实验的心得体会,回答实验思考题等。
思考题:DIV+CSS布局网页有哪些优势?
指导教师评阅意见:
签名: 年 月 日
相关关键词: 网页设计公司创立流程 网页设计构架 网页设计教学备课 动态网页设计思考 上海网页设计制作