我爱电脑技术论坛 » 网站建设 » 从HTML语言到网上家园 第四章 页面风格设计

麦迪 发表于 2008-1-26 00:55

从HTML语言到网上家园 第四章 页面风格设计

HTML语言的另一个重要特点就是能够把文本、图像、动画、音乐等多种媒体相结合，设计出图文并茂、动静结合的页面。这一章我们将介绍如何制作一个完整的丰富多彩的网页。[b]4.1语言字符集[/b]
Xk1VLzX%eT$yVO 　制作网页的时候，首先需要定义网页语言，以便访问者浏览器自动设置语言。一般情况下，我们都是取默认值。语言字符集的定义在网页首部〈head〉〈/head〉部分完成，基本格式是：
2qXK[)dy]&e [align=center]meta http-equiv="Content-Type" c〉[/align]　gb2312代表简体中文，也可以根据需要选取其它语言。td1i^0{
　　也可以在HTML标记中用LANG属性规定当前标记使用的语言，语法分析软件可以使用这个属性对引用、数字等来确定如何显示特定语言选项。
I*` G
g#@5N+_m}l.^-['@ [b]4.2文字颜色及风格[/b]
-q1U)[2?6yM0SfK [b]　　[/b]HTML语言用〈font〉标记定义文本的字体。〈font〉标记有多种属性用于定义字体字面、尺寸和颜色等，常用的〈font〉标记属性有：a%{a6Q
_]
<FACE 设置当前字体的字面，一般为逻辑值，如：隶书、宋体等。si!S^5crl ]'E
　　Color 设置字体所使用的颜色。在html中，颜色通常采用6位16进制数值，格式为#xxxxxx，第一二位表示红色值，三四位为绿色值，五六位代表蓝色值，#000000代表黑色，#FFFFFF是白色。颜色也可以用逻辑值表示，如：black（黑色），olive（橄榄色），teal（呈绿色的蓝色），red（红色），blue（蓝色），maroon（栗色），navy（藏青色），gray（灰色），white（白色），green（绿色），purple（紫色），yellow（黄色），aqua（浅绿色）等。%^;}`;ykyh4@C
<SIZE 设置字体尺寸，值在1到7之间（7最大）。置文本的字号有两种办法，一种是设置绝对字号，〈font size=±n〉。用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。 (X6})N&k-I
h'uh
[table=450,#999999][tr][td]例：网页中有一段文字，要求字体字面为隶书，显示颜色为#008800，字体大小为2号，HTML源代码如下：
jX5Wji)_0ia8k 〈font size="2" color="#008000" face="隶书"〉网页中有一段文字，要求字体字面为隶书，显示颜色为#008000，字体大小为2号〈/font〉~%Oe6Rg b
显示效果：
\~(dc hJ [color=#00800]网页中有一段文字，要求字体字面为隶书，显示颜色为#008000，字体大小为2号[/color][/td][/tr][/table]
1D
J(Q)f2p%l 　　还可设置字体的风格。常用逻辑风格的HTML标记有：sxx;T.@/]"FOz4x{
　　〈b〉〈/b〉 表示粗体
*`(}X*i.T?V"FT
\Q 　　〈i〉〈/i〉 表示斜体&a&n g:cm&M#~+Xv
　　〈u〉〈/u〉 加下划线P/C+TL(ll
　　〈strike〉〈/strike〉 加删除线
HY!m+l_)f(T$]!W c6nG 　　〈blink〉〈/blink〉 文字闪烁
o2JlHR:H.\ 　　〈sup〉〈/sup〉 上标gb!UeU%QW?PJ
　　〈sub〉〈/sub〉 下标
*NOC0L3{\ _G)Y+X 　　〈strong〉〈/strong〉 表示特别强调
o,z"jDr3FVI(U 　　〈em〉〈/em〉 表示强调G*k:Q(mx TNA[W ]
　　〈code〉〈/code〉 源代码1jk:e
v7U
　　〈samp〉〈/samp〉 例子
rK:Y6ar `2q 　　〈kbd〉〈/kbd〉 键盘输入
h5`z[x 　　〈var〉〈/var〉 变量&gEgj)O*f0s
　　〈dfn〉〈/dfn〉 定义
| ~(s)f+?r 　　〈cite〉〈/cite〉 引用
~.V^!h _ vEN#K 　　〈small〉〈/small〉 较小&Oi*vCQ4c4gkh,Wk
　　〈big〉〈/big〉 较大
3xV/h0|C+^F 　　〈blink〉〈/blink〉 使文本闪烁，闪烁频率为１秒钟一次
xK_@:J\|
　　例：各种风格字体的HTML代码及其显示效果。.[7y6["Z6|EV#v
　　〈b〉字体风格〈/b〉 字体风格
'kd
KC_d 　　〈i〉字体风格〈/i〉 字体风格U Jl y,dQ&`1YZ#|:y
　　〈u〉字体风格〈/u〉 字体风格hy1Ue-ZuC
　　〈tt〉字体风格〈/tt〉 字体风格
]W+[zW4I9o-YN 　　〈sup〉字体风格〈/sup〉 字体风格
hI'?
\"i 　　〈sub〉字体风格〈/sub〉 字体风格'W:HgYe8?a'j
　　〈s〉字体风格〈/s〉 字体风格
%b&_6u7z;g;r-n] 　　〈strike〉字体风格〈/strike〉 字体风格
'V%L+Z$^rU_7Pu 　　〈em〉字体风格〈/em〉 字体风格UO/F%v%a,Owa
　　〈strong〉字体风格〈/strong〉 字体风格
z$yy'~3|d }j 　　〈code〉字体风格〈/code〉 字体风格`&gp!A-n2s
　　〈samp〉字体风格〈/samp〉 字体风格
"c-WOP!z"z3^`'] 　　〈kbd〉字体风格〈/kbd〉 字体风格
%I"[n)H)\fe? 　　〈var〉字体风格〈/var〉 字体风格-}H's s7{!Q)E_B*Y o
　　〈dfn〉字体风格〈/dfn〉 字体风格Q5qxy(bU g.k
　　〈cite〉字体风格〈/cite〉 字体风格)whk;]%u*A"E
　　〈small〉字体风格〈/small〉 字体风格
_Wz4?4M\l9s$wd 　　〈big〉字体风格〈/big〉〈/body〉 字体风格
5ADr$^H-}5I*T [b]4.3页面风格设计[/b]
@2E0?%B+~3GxF 　〈body〉元素可以用来设置网页的背景图像、 背景颜色、链接颜色和页面的顶页边空白与左页边空白。基本语法：F}9Y?3{V,@
　　〈BODY
&u!B$o:\+Z$Hxx 　　ALINK= color
3Yd)@!N5{ o(t$a(e 　　BACKGROUND=url
Pb%H_AeLz 　　BGCOLOR= color
h$Y5w y+c;F+]Z 　　BOTTOMMARGIN=pixels
rse+Ew5|;A 　　LEFTMARGIN= pixels6x&O _;l%[
　　LINK= color
.RfD&h0A+\2_n/e 　　RIGHTMARGIN= pixels
m!j4d~LWu2H-q/m 　　TEXT= colort*pY:u
V
　　TOPMARGIN=n6~MA&d:O
?8A6e
　　BLINK= color
6P/K+}D3s@D 　　〉……〈/body〉n-T0J@fy sx
　　其中，
S:A
oJ9Ju,m 　　BACKGROUND=url 规定背景图像，该图铺在页面的文本和图形之后；-l u3z4d P:{:r
　　ALINK= color 设置激活链接的颜色；7YE*n,ms*E
　　GACKGROUND=color 设置页面的背景颜色；,Jz2{Jk)ni
　　LINK= color 尚未被访问的链接颜色；b9TA;x8?G3T6k~ q
　　TEXT= color 规定页面的文本颜色；
6JM AKB(Th 　　VLINK= color 已经被访问的链接颜色；)@b2H8lz)jpz-?
　　BOTTOMMARGIN=pixels 为整个页面规定底页边空白，单位为象素，默认页边为空白。如果设置为“0”或“”，则底边空白就是窗口或者帧的底边空白；
!I E6j$uK)J+t'{ 　　LEFTMARGIN= pixels 规定整个页面的左页边空白；
/i,vX5y%TP 　　RIGHTMARGIN= pixels 设置整个页面的右页边空白；'UXCN(i:] t)D
　　TOPMARGIN= pixels 规定整个页面体的顶边空白。8b(zx"wGBH8k
[table=450,#999999][tr][td]例：设计一个网页，要求有背景图片，背景颜色为，页面文本颜色，链接颜色为，激活链接颜色，已被访问链接颜色，上下左右页边空白为8，相应的HTML代码：\#ab'U9z g-B
〈body topmargin="8" leftmargin="8" background="../images/bg.jpg" bgcolor="#FFFFFF" link="#000080" vlink="#008000" alink="#008080" text="#000080"〉
,]YM:?)Mf 〈p〉〈a href="http://www.sina.com.cn"〉新浪网〈/a〉是一家服务于中国大陆及全球华人社群的大型网站1W$QlsL5i['N
x&O
〈/body〉#zC&@XL
t
页面效果：J ['RNAW8tH's
[img=400,150]http://www.it.com.cn/f/edu/049/6/040906fgsj1.jpg[/img]　2Pk;p;Bt,T$N
[/td][/tr][/table]
TS,e*F5G Q [b]4.4加入图像[/b]　　要想使网页美观漂亮，在页面中插入图片是不可避免的。〈img〉元素的作用就是在文档中嵌套一个图像或一个视像片断，其基本语法格式如下：~a_~+j-\%_U(^
　　〈IMG
y@b"ZXH,|"j_ 　　SRC=url&z(p'ntIc z Z4p
　　ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOPZ$zIM3[ md;g
　　BORDER=n
8@*]Z/? C7{9v6P 　　HEIGHT= n S[@a`T'Z
　　WIDTH= n
G%KLx~dsY h(g9? 　　LOOP= n+g9I1m^f
　　USEMAP=url〉;JZN:o*Bu/sj}l@
其中u7g:p?%w2EZPtt
　　SRC==url 定义了图像的来源；%o3Mvs9t
　　ALIGN 规定图像的对齐方式。对齐方式分水平对齐和垂直对齐，水平对齐指定了图像在页面中的布局，垂直对齐指的是图像与文本的对齐方式。属于水平对齐的有LEFT（左对齐）、MIDDLE（水平居中）和RIGHT（右对齐），属于垂直对齐的有ABSBOTTOM（相对底边对齐）、ABSMIDDLE（相对垂直居中）、BASELINE（与基线对齐）、BOTTOM（与底边对齐）、TOP（与顶边对齐）和TEXTTOP（与文本顶边对齐），默认值为LEFT。
I MX;o3t] 　　BORDER＝n 规定在图像周围要画的边框宽度，以象素为单位；/ox'}-ep6_RW%n
　　HEIGHT＝n 定义图像的高度，和WIDTH一起规定图像的尺寸，可以用象素或百分数设，默认图像尺寸为原始大小；
v/U)hc0Pc 　　WIDTH= n定义图像的宽度，和HEIGHT一起规定图像的尺寸，用法与HEIGHT相同；;J J8b#oMF A
　　LOOP＝ n 规定图像显示要循环的次数，LOOP="infinite" 表示不限制播放次数， n的默认只是1；
[ Q4Wq%t-k 　　USEMAP＝url 指定与图像相关联的图像地图（参见3.5图象地图）

r~Nj#O8Zr f [table=450,#999999][tr][td]例1：在网页中插入一幅图片的HTMLJ'V*S0z}bU-^7t q
〈img border="3" src="../images/wus.jpg" width="318" height="379"〉
k$b2@ E"T@1@Ft [/td][/tr][/table][size=2]d}M{%fF0tY
[/size][table=450,#999999][tr][td]例2：图像的对齐设置。-`2jPvp~
（1）〈img src=" images/sina_logo2.gif" align="right" 〉 [img=400,47]http://www.it.com.cn/f/edu/049/6/040906fgsj3.jpg[/img]"{'^Nw~
[xl*kq Cv`
（2）〈img src=" images/sina_logo2.gif" align="top" 〉
Q8mcW4w Q |7me_+h)S!O [ca,d)J
[img=400,48]http://www.it.com.cn/f/edu/049/6/040906fgsj4.jpg[/img]（3）〈img src=" images/sina_logo2.gif" align="middle" 〉
(ZJXo5\}'X)e-[E r g4PZ eR0LXo
[img=400,44]http://www.it.com.cn/f/edu/049/6/040906fgsj5.jpg[/img]（4）〈img src=" images/sina_logo2.gif" align="bottom" 〉 [img=400,43]http://www.it.com.cn/f/edu/049/6/040906fgsj6.jpg[/img][/td][/tr][/table][b]4.5网页中的多媒体
!?@V A
C@%h 　　4.5.1设置背景音乐[/b]4Ro;J+q%J0}$c
　　〈bgsound〉标记的作用是建立带有背景声音或“声道”（soundtracks）页面。方法如下：
|}:rt ]_/P_ 　　〈BGSOUND

E S3Y&mK 　　BALANCE= n
7N2D@K5k%M~R$E 　　LOOP= n
{DS:^|(A
c3pQ-nk 　　SRC=url
,k`A#zu&U r5{!nJ 　　VOLUME= n〉]
nE/L$J2e
　　BALANCE=n 确定音量如何分配到左右扬声器中。这个属性的有效值范围为-10,000到+10,000，0是平衡的“波形输出”中心。
h4de.|.f 　　LOOP= n 规定声音在激活期间要循环多少次。LOOP="infinite" 表示不限制播放次数。j6U ?6?1d5["s8f
　　SRC=url 指定要播放的声音文件的路径。m1T&Y!U;g6|8[:]t
　　VOLUME=n 确定页面背景声音的音量。n的有效值范围为-10,000到+10,000，0值表示全“波形输出”音量。{AS| m(k
　　[b]说明：[/b]在网页中可播放的音乐文件的格式有[b]　　4.5.2插入视频剪辑[/b]'M._1jD
d/j
　插入视频剪辑的基本方法是：
1Q P?d3X4^ 　　〈img src="url.gif" dynsrc="url.avi"〉
ZweqN 　　其中dynsrc指定了要播放的视频剪辑，src指定了作为视频封面的GIF 图象，在浏览器尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。%Z7z
b,t/lb8w
　　Start属性用于定义视频剪辑的播放起点，start="fileopen" 表示文件打开时即开始播放，是默认值，start="mouseover" 表示当鼠标悬停与播放窗口时开始播放，也可以两者并取start="fileopen,mouseover"。 s9?m.u2F5P&h
　　Controls 规定在浏览器中显示控制条，默认取nocontrols。
/^3^OdG%hG,sV 　　Loopdelay 规定循环延迟时间，单位是毫秒，默认情况下loopdelay=0。,Q S)l~9l5t
　　可播放的视频剪辑格式有*.avi ，*.asf ，*.ram 和*.rm等。Y ^.yl)`3W"f.L
[table=450,#999999][tr][td]例：下边是在网页中播放视频剪辑的html代码:ZW nSQ
〈img border="0" dynsrc="waiting.avi" start="fileopen,mouseover" src="最真的梦/Cd-c05.gif" width="457" height="424" controls loopdelay="5" loop="infinite"〉
dY Hs_8{ [/td][/tr][/table]　[b]4.5.3添加滚动字幕[/b]c V-?L3_L\B
　在很多网页中都有滚动字幕，下面我就看看滚动字幕是如何实现的。8MI'er+M}
　　滚动字幕的基本格式为： Ja-Y:x
V.Rk9^'C2z0X
　　〈marquee〉字符串〈/marquee〉
y^X5d:xy:Ug 　　〈marquee〉标记有多个属性可以用来设置它的特性：Y'O3d`D`
　　BEHAVIOR=ALTERNATE | SCROLL | SLIDE 规定在选取框中文本如何滚动。　　　ALTERNATE表示选取框文本左右交替。SCROLL指定选取框文本按　　　　　　　　DIRECTION=attribute（属性）中规定的方向滚动，文本滚动到终端后又重新开始。SLIDE规定选取框文本按DIRECTION=attribute规定的方向滚动，滚动到末段则停止。O#V/K[7a"H1B
　　BGCOLOR=color 设定选取框的背景颜色。d1}9o
uTE)z|7yd
　　DIRECTION=LEFT | RIGHT | DOWN | UP 确定文本要滚动的方向。
l%L0P.N+O9J#O rm 　　HEIGHT=n 设置选取框的高度，单位是像素或屏幕高度的百分比。
v ~4~g+S6W#o 　　WIDTH=n 设置选取框的宽度，单位是像素或屏幕高度的百分比。
v4U-? UYY#i;| 　　LOOP=n 规定文本滚动循环的次数。
+T)R#gz5mI N2r 　　SCROLLDELAY=n 设定字幕的滚动速度，单位是毫秒。
A2Sb3Fq [table=450,#999999][tr][td]例：制作一个滚动字幕：
}"^rja,hY)mh7w 〈marquee align="middle" behavior="slide" bgcolor="#C0C0C0" direction="right" width="500" height="50"〉滚动字幕〈/marquee〉
rRj]Aa
[/td][/tr][/table][b]　　4.5.4嵌入多媒体文本[/b]
j%B
cu|P ]*b.~m 　网页中允许嵌入各种其它类型的文档。嵌入多媒体文档的基本方法是：5I,c+ki'`;h"A${!b
　　〈embed src=url〉 〈/embed〉
@9j:a
p
gI+i 　　src属性指定了要嵌入的文档。可以嵌入网页的多媒体文档有电影(movie), 声音(sound), 虚拟现实语言(vrml)等。
L1Bx$is&d n 　　[b]说明：[/b]要浏览嵌入多媒体文档的页面，用户需要在计算机上安装一个可以查看数据的插件（plugin）。

查看完整版本: 从HTML语言到网上家园 第四章 页面风格设计