华东理工大学动态网页设计第1章Word格式.docx
《华东理工大学动态网页设计第1章Word格式.docx》由会员分享，可在线阅读，更多相关《华东理工大学动态网页设计第1章Word格式.docx（32页珍藏版）》请在冰豆网上搜索。
【例1-1】一个简单Web页
<
HTML>
HEAD>
TITLE>
我的第一个WEB页<
/TITLE>
/HEAD>
BODYBGCOLOR="
WHITE"
>
正文内容写在这里......
/BODY>
/HTML>
将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm或html的文件后，在文件夹窗口双击该文件图标，就可看到如图1-1所示的结果。
图1-1一个简单的Web页
从例出可以看出，一个HTML文档的一般结构如下：
1.一般形式
头部
BODY>
主体部分
2.说明：
…<
开始和结束标签
头部信息，可以包含标题（TITLE），媒体环境（META）等说明信息,客户端脚本也可放在这一部分。
网页主体部分。
它也有一些属性，形式为：
BODYBGCOLOR=#rrggbbtext=#rrggbblink=#rrggbbalink=#rrggbbvlink=#rrggbb>
其中：
BGCOLOR背景颜色
text非链接文字的颜色
link链接文字的颜色
alink正被点击的链接文字的颜色
vlink已经点击（访问）过的链接文字的颜色
如果要使用背景图像，语法为：
<
BODYbackground=“图片文件名”>
在HTML文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。
3.调试HTML代码
总有一些时候会忘了输入某些代码或敲错某些代码，这时Web页可能会变得非常滑稽。
通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在的错误，这一过程称为调试。
对于web页的调试没有多少技巧可言。
但要强调的一点是，应该仔细地观察显示的结果或系统给出的错误信息，从中判断出可能错在哪里，再去检查文件的内容，而不是在没有看清出了什么错误前就急着查文件内容，这样往往很难快速找到错误的位置。
常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。
如例1-1第3行中若结束位置的<
/title>
遗忘了或写成<
title>
，则其后的内容将显示在窗口的标题栏。
只要仔细观察显示结果，不难发现其中的错误。
1.2.2文字修饰与布局
1.修饰方法
（1）标题文字（Header）
有时，希望将某些文字显示成像文章中的标题一样，这时，可使用H标签，形式如下：
Hn>
作为标题的文字<
/Hn>
其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。
H1最大，H6最小。
标题文字独立占一行，不受段落标记的影响。
（2）文字大小（FONTSIZE）
形式：
FONTSIZE=n>
需显示成n号大小的文字<
/FONT>
n=1,2,3…7。
SIZE的默认大小为3，在此基础上，可以用-2，-1，0，+1，+2，+3或+4代替n。
另外，可以用<
BASEFONTSIZE=n>
指出缺省字符大小，用<
BIG>
或<
SMALL>
来指出字符相对于周围字符的大小。
（3）文字颜色（FONTCOLOR）
FONTCOLOR=#rrggbb>
需显示成指定颜色的文字<
rrggbb为16进制值，表示组成颜色的RGB三原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb”，对应关系为：
Black（000000）,Olive（008080）,
Red（ff0000）,Blue（0000FF）,Maroon（800000）,Navy（000080）,Gray（808080）,Lime（00ff00）,Fuchsiz（ff00ff）,White（ffffff）,Green（008000）,Purple（800080）,Silver（C0C0C0）,Yellow（ffff00）,Aqua（00ffff）。
（4）定义字体（FONTFACE）：
FONTFACE=“字体”>
需显示成指定字体的文字<
字体为Arial、Times、Msseriers、宋体、楷体等。
值得注意的是，在浏览器上是否能显示所设置的字体取决于浏览器所在的机器中是否安装了相应的字体。
以上三种文字的修饰方法有一个共同点就是都使用相同的标签<
FONT>
把要修饰的文字括起来，再用该标签的SIZE属性设置文字大小，用COLOR属性设置文字的颜色，用FACE属性设置文字的字体。
当需要同时设置文字大小和颜色时，应把它放在同一个标签中，例如，要用6号大小红色显示“动态网页”这几个字时，应使用如下形式：
FONTSIZE=6COLOR=Red>
动态网页<
（5）标记文字：
对于文字还有一些常用的修饰，即加粗、斜体和加下划线。
对此，HTML中设计了独立的标签，使用形式如下：
B>
需要加粗的文字<
/B>
I>
需要显示成斜体的文字<
/I>
U>
需要添加下划线的文字<
/U>
以上三个标签可重叠作用。
如：
动态<
网页<
制作<
，将使“动态”两字加粗显示，“网页”两字加粗并加下划线，“制作”两字显示成斜体并加下划线。
另外还有一些标签如：
STRONG>
、<
EM>
STRIKE>
和<
BLINK>
等，但这些标签不一定被所有浏览器所支持。
【例1-2】文字的修饰
文字的修饰<
H1>
这是标题字体H1<
/H1>
H6>
这是标题字体H6<
/H6>
P>
FONTSIZE=5FACE="
楷体"
这是大小为<
5<
的楷体字<
本教材讨论的是：
FONTCOLOR=#ff0000>
这是红色的文字<
本例中的代码，浏览时显示结果如图1-2所示。
图1-2文字修饰
2.文字布局
（1）段落<
段落是文档的基本单位，在HTML中可以使用<
标签来指定文档中具有独立意义的段落，通过设置段落标签的某些属性可以控制段落的对齐方式。
浏览器在显示时，一个段落的前后将留有较大的空隙，也可以说相当于有一个空行。
（2）换行<
BR>
一个段落中可以包含多个行，可以使用<
标签来强制文字换行。
一般情况行与行之间的间隔比段与段之间的间隔要小。
注意：
如果不使用段落标签指出从哪里开始新的一段或一行，那么显示时文本就会连成一整块，而不管你在文本中输入了多少个回车符。
一般情况根据浏览器窗口的宽度，当一行太长时，会自动换行。
（3）文字对齐
可以以段落为单位设置文字的对齐方式，形式如下：
PALIGN=对齐方式>
需要按照给定方式对齐的文字<
/P>
对齐方式有left、center和right，分别表示左对齐、居中对齐和右对齐。
默认为left表示左对齐。
标题文字也有相应的属性，使用形式为：
HnALIGN=对齐方式>
需要按照给定方式对齐的标题文字<
/H>
如果需要将文字或其它对象居中对齐，也可以使用<
center>
标签，形式如下：
要居中的文字或对象<
/center>
标题不能作为段落的一部分，也不受段落标记的影响。
（4）预格式化文本
当需要按照输入时的格式来控制换行时，可以使用预格式化文本标签<
PRE>
，使用形式如下：
这里是多行文本
/PRE>
用这一标识符标识的文本不能随浏览器窗口的宽度大小而自动换行，这在低分辨率显示器上使用是很不方便的。
1.2.3加入其它网页元素
网页中除了一般的文字外，通常还有一些其它对象，如线条、图片、表格等。
要在HTML中插入各种对象，通常需要指出三个内容：
即标签名称、标签属性及提示信息。
其中标签名称，用于指出插入的是什么对象；
标签属性，用于指出该对象的显示格式及行为特点；
提示信息主要指出屏幕显示的文字内容。
1.插入水平线
有时为了较明显地划分上下各部分的内容，在文档中间加入一些水平线，使用形式如下：
HRWIDTH=“宽度”ALIGN=“对齐方式”SIZE=“高度”>
HR为标签名称，它指出插入的元素为一个线条。
WIDTH、ALIGN和SIZE都是线条的属性，其右侧为该属性对应的值。
式中的宽度可以是百分比，表示占屏幕宽度的百分比，如“90%”,也可以是屏幕的象数点个数，如“222”。
对齐方式可以是左对齐，中间对齐及右对齐。
高度为点数。
请看例1-3。
【例1-3】水平线
水平线<
H2>
这里是标题<
/H2>
HRWIDTH="
90%"
ALIGN="
CENTER"
以下是正文内容
本例代码浏览时显示结果如图1-3所示。
图1-3使用水平线
2.加入超级链接
使用超文本标记语言来编写网页的主要原因是网页的内容中常常需要使用超链接，通过超链接，用户可以简单地用点击某些文字来转向到其它网页或本网页的其它位置。
根据需要转向的位置不同，超级链接的形式有所不同。
1）链接到其它地址
AHREF=“链接地址”>
提示文字<
/A>
2）链接到本页的其它地方
AHREF=“#位置名称”>
位置是命名的一个地方，命名形式为：
ANAME=“位置名称”>
内容<
3）链接到其它地址的某一地方
AHREF=“链接地址#位置名称”>
4）在新窗口打开链接
AHREF=“链接地址”target=“窗口名称”>
【例1-4】超级链接
超级链接<
友情链接：
AHREF="
"
雅虎中文<
TARGET="
Windows_name"
网易<
我家的生活<
--<
#喜"
喜<
#怒"
怒<
#哀"
哀<
#乐"
乐<
全都有
p>
有人说：
生活像一条长长的路，崎岖蜿蜒。
生活像一束鲜花，带来了希望和成功。
生活像一个多彩的梦，是由红、橙、黄、绿编织而成。
可是我说：
生活不是梦，不是画，它有苦也有乐......"
ANAME="
喜"
H3>
/H3>
有一年放暑假前夕，我去学校领《小学生手册》。
我刚拿到手册时，提心吊胆的，担心成绩不理想，就急忙把它翻开来看。
语文九十八分，数学九十七分。
太好了!
我激动得喊了出来。
于是......妈妈看着我点了点头，满意地笑了。
我望着妈妈满意的笑容，心中不由想起几个月之前的一件事来。
怒"
那是一个狂风怒吼的阴天。
任浩数学七十六分!
老师紧皱着眉头，来到我身边，说：
这次你是怎么考数学的?
好好查查原因!
天才知道我是怎样回到家的。
一进门，妈妈便笑眯眯地走出来迎接我，可她看了我的成绩单......妈妈和我谈了两个小时。
我心里才轻松了些。
哀"
今天，我们家接到了老家来的电报，说家里发洪水，要求我们立即支援。
我们得到消息后，充满阳光的生活变得灰蒙蒙的，全家都为这突然发生的事感到哀愁，不愉快。
爸爸妈妈商量后便寄去了几百块钱和姐姐小时候的衣服给叔伯们。
同时爸爸还准备回家去看看。
谁知......全家看完了电报，都十分高兴，家中的一丝阴云，又飞散了。
乐"
/h3>
夫人，请--"
爸爸调皮地向妈妈做了一个邀请动作。
哈哈--"
我们都笑了起来。
妈妈白了爸爸一眼，从容地站了起来。
奇怪，那步子既准确又合拍，把我们都看呆了。
......
欢笑声和歌声交织在一起，随着微风传出窗外......
本例浏览时，首先显示图1-4所示结果，单击“怒”字显示图1-5所示结果。
图1-4插入超级链接例的初始显示图1-5页内的链接
单击“雅虎中文”将转到雅虎中文网站，显示如图1-6所示结果。
图1-6链接到其它网站
3.加入图像
图片是网页的一个重要组成部分，显示在网页上的任何东西都可以用图像来实现，如特殊字体的文字、线条分隔符等。
图片可以使页面更直观、更漂亮。
但由于图片文件有较多的字节，在网络上传送需要较长的时间。
要在网页的某个位置放置一个图像，使用<
IMG>
标签，形式为：
IMG SRC=“文件名”WIDTH=宽度HEIGHT=高度ALT=“提示文字”>
SRC属性指出显示的图片的文件名。
常用的图像文件格式为GIF和JPEG格式。
WIDTH和HEIGHT分别指出图片显示的宽度和高度，以像素点为单位。
ALT属性后面的“提示文字”指出当图片文件不存在时，或当鼠标移动到该图片上方时系统给出的提示内容。
使用BORDER属性可为图像加边框。
【例1-5】加入图片
图片的例子<
IMGSRC=nju.jpgWIDTH=780HEIGHT=80ALT="
欢迎光临南京大学"
本例浏览时显示结果如图1-7所示。
当把例1-5中的代码输入，保存在一个扩展名为htm或html的文件后，可以通过双击该文件图标来观看结果。
这时，你可能看不到任何图片显示，这是因为在同网页文件相同的目录中没有名字为nju.jpg的文件，如果你准备的图片文件已经放在另外一个目录中，应该在SRC属性中写上它的目录路径。
如果你看到的图片严重变形，则应该调整代码中WIDTH属性和HEIGHT属性的值。
使用IMG标签的ALIGN属性，可指出图像的对齐方式。
形式为：
＜IMGALGIN=“对齐方式”>
对齐方式有top、middle、bottom、left和right等几种。
分别表示顶端、中间、底部、左边和右边对齐。
图1-7插入图片
【例1-6】图像和文字的对齐
图像和文字的对齐<
IMGSRC=tu.jpg>
默认对齐方式<
IMGSRC=tu.jpgALIGN="
top"
top对齐方式<
middle"
middle对齐方式<
bottom"
bottom对齐方式<
left"
left对齐方式<
right"
right对齐方式
图1-8图像与文字的对齐
验证本例时，首先要找到一个图片文件，改名为tu.jpg放入网页文件目录，再双击该网页文件，显示结果如图1-8所示。
在超链接的显示文本区放入图像，可让用户通过点击图像实现超链接。
形式如例1-7中所示：
【例1-7】用图像建立链接
用图像建立链接<
IMGSRC="
yahoo.gif"
也许你找不到名为yahoo.gif的图片文件而得不到图1-9的浏览结果，如果能上网的话，你可以通过浏览网站“”，并另存它的标题图片。
图1-9用图像建立链接
4.插入表格
要在网页中插入一个表格，需要用到一组标签，分别表示整个表格的属性、表格中一行的属性和表格中一列的属性。
定义表格的有关标签如下：
＜TABLE>
/TABLE>
：
定义表格
TR>
/TR>
定义表行
TH>
/TH>
定义表头
TD>
/TD>
定义表元（表格的具体数据）
让我们先看一个例子
【例1-8】表格示例
表格示例<
TABLEBORDER=30WIDTH=95%CELLSPACING=10
CELLPADDING=20ALIGN=centerBGCOLOR=RED>
TRBGCOLOR=Green>
THWIDTH=50%>
星期一<
THALIGN=left>
星期二<
星期三<
TRHEIGHT=50%>
TDBACKGROUND="
tu.jpg"
MON<
TDALIGN=center>
TUE<
WED<
由于在表格中，下一行的开始就意味着上一行的结束，所以例中的行结束标签<
都可以省略。
同样<
标签也可以省略。
浏览结果如图1-10所示。
图1-10使用表格
以下对照例子说明表格定义中使用的常用属性。
（1）设定表格边框
标识＜TABLE>
的border属性用于设置表格边框的宽定，范围为1到4，设为0时或无此项时表格没有边框。
在IE浏览器中，这一属性值的大小影响到外边框的阴影宽度，取值不限，如图1-11所示。
（2）设定表格和表项的大小
TABLEWIDTH=宽HEIGHT=高>
宽和高可以是数值，表示像素点个数，也可以用百分比，表示占窗口大小的比例。
对于＜td>
和＜th>
也有WIDTH和HEIGHT两属性，其设置相同，如例中表格占窗口宽度的50%，第1列占表格宽度的50%，第二行占表格高度的50%。
（3）设定表元间隙
＜TABLECELLSPACING=n>
n为像素点个数，在IE浏览器中，反映了实际的表格线宽度，例中设为10点，它的颜色和表格背景颜色相同，即为红色（RED）。
（4）设定表元内部空白
TABLEBORDERCELLPADDING=n>
该属性用于设定单元格中的文字离开表格线的距离，例中设为20点，当单元格宽度不足以容纳文字时，会自动换行，如例中的第2和第3列。
（5）设定表格和表项的对齐方式
＜TABLEALIGN=“对齐方式”>
对齐方式可以是left、center和right。
这
升级会员 