[综合类] 从HTML语言到网上家园第四章页面风格设计

麦迪

超级版主

Rank: 9 Rank: 9 Rank: 9

论坛版主勋章优秀版主勋章热心会员勋章爱心勋章爱国勋章

发短消息
加为好友
当前离线

楼主大中小发表于 2008-1-26 00:55 只看该作者

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

HTML语言的另一个重要特点就是能够把文本、图像、动画、音乐等多种媒体相结合，设计出图文并茂、动静结合的页面。这一章我们将介绍如何制作一个完整的丰富多彩的网页。4.1语言字符集
　制作网页的时候，首先需要定义网页语言，以便访问者浏览器自动设置语言。一般情况下，我们都是取默认值。语言字符集的定义在网页首部〈head〉〈/head〉部分完成，基本格式是：

meta http-equiv="Content-Type" c〉

　gb2312代表简体中文，也可以根据需要选取其它语言。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站- E) f8 S* }5 @
　　也可以在HTML标记中用LANG属性规定当前标记使用的语言，语法分析软件可以使用这个属性对引用、数字等来确定如何显示特定语言选项。www.520diannao.com- N7 m, `8 A/ k0 B/ \1 S
4.2文字颜色及风格
　　HTML语言用〈font〉标记定义文本的字体。〈font〉标记有多种属性用于定义字体字面、尺寸和颜色等，常用的〈font〉标记属性有：
<FACE 设置当前字体的字面，一般为逻辑值，如：隶书、宋体等。www.520diannao.com+ V7 X& f% w& B# n9 K/ Q- z
　　Color 设置字体所使用的颜色。在html中，颜色通常采用6位16进制数值，格式为#xxxxxx，第一二位表示红色值，三四位为绿色值，五六位代表蓝色值，#000000代表黑色，#FFFFFF是白色。颜色也可以用逻辑值表示，如：black（黑色），olive（橄榄色），teal（呈绿色的蓝色），red（红色），blue（蓝色），maroon（栗色），navy（藏青色），gray（灰色），white（白色），green（绿色），purple（紫色），yellow（黄色），aqua（浅绿色）等。www.520diannao.com( {4 n- g) I$ z6 v0 ~. |0 R
<SIZE 设置字体尺寸，值在1到7之间（7最大）。置文本的字号有两种办法，一种是设置绝对字号，〈font size=±n〉。用第二种方法时“＋”号表示字体变大，“－”号表示字体变小。打造最好的电脑自学交流论坛0 U; X$ d* I* ?- p S, g

例：网页中有一段文字，要求字体字面为隶书，显示颜色为#008800，字体大小为2号，HTML源代码如下：www.520diannao.com1 _+ c+ `# s9 I8 J; b( L! [3 B" k# ~
〈font size="2" color="#008000" face="隶书"〉网页中有一段文字，要求字体字面为隶书，显示颜色为#008000，字体大小为2号〈/font〉
显示效果：打造最好的电脑自学交流论坛7 D6 ]9 s1 f Y9 ]: M
网页中有一段文字，要求字体字面为隶书，显示颜色为#008000，字体大小为2号

　　还可设置字体的风格。常用逻辑风格的HTML标记有：
　　〈b〉〈/b〉表示粗体我爱电脑技术论坛4 m# Q' o; B7 L8 u8 J( r
　　〈i〉〈/i〉表示斜体
　　〈u〉〈/u〉加下划线www.520diannao.com; t9 G; }0 a$ D
　　〈strike〉〈/strike〉加删除线
　　〈blink〉〈/blink〉文字闪烁我爱电脑技术论坛8 X2 V  n; X1 b1 S, n
　　〈sup〉〈/sup〉上标电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站) [# n, l1 B  t# P
　　〈sub〉〈/sub〉下标
　　〈strong〉〈/strong〉表示特别强调我爱电脑技术社区--打造最好的电脑技术自学交流平台. _1 @/ y( T& P& N2 L1 T
　　〈em〉〈/em〉表示强调
　　〈code〉〈/code〉源代码打造最好的电脑自学交流论坛  l0 f7 h; F/ m2 b. O/ ]  w
　　〈samp〉〈/samp〉例子www.520diannao.com' ?; z. b3 C8 f
　　〈kbd〉〈/kbd〉键盘输入www.520diannao.com+ p/ t3 g1 L5 v
　　〈var〉〈/var〉变量www.520diannao.com- l' O& {4 d" L% s  l& ]
　　〈dfn〉〈/dfn〉定义
　　〈cite〉〈/cite〉引用www.520diannao.com) H6 z7 I5 |- Y
　　〈small〉〈/small〉较小我爱电脑技术论坛$ z  e6 s& b% U5 X. Z( q3 x
　　〈big〉〈/big〉较大
　　〈blink〉〈/blink〉使文本闪烁，闪烁频率为１秒钟一次
　　例：各种风格字体的HTML代码及其显示效果。我爱电脑技术社区--打造最好的电脑技术自学交流平台0 h. c; ?; B9 ]
　　〈b〉字体风格〈/b〉字体风格我爱电脑技术论坛/ z. Q+ h# C/ k1 T6 j
　　〈i〉字体风格〈/i〉字体风格电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站9 w% m7 e, U5 G
　　〈u〉字体风格〈/u〉字体风格
　　〈tt〉字体风格〈/tt〉字体风格打造最好的电脑自学交流论坛  S* g: O$ a3 X! y1 t& c
　　〈sup〉字体风格〈/sup〉字体风格
　　〈sub〉字体风格〈/sub〉字体风格打造最好的电脑自学交流论坛6 S" ~- ], k8 g+ A% s# }! V& [- [# D
　　〈s〉字体风格〈/s〉字体风格
　　〈strike〉字体风格〈/strike〉字体风格我爱电脑技术社区--打造最好的电脑技术自学交流平台4 }* l+ q- d, h7 U4 }
　　〈em〉字体风格〈/em〉字体风格我爱电脑技术社区--打造最好的电脑技术自学交流平台9 {9 b, w6 G2 I/ {2 c( C
　　〈strong〉字体风格〈/strong〉字体风格 4 D/ c5 {- p5 W
　　〈code〉字体风格〈/code〉字体风格
　　〈samp〉字体风格〈/samp〉字体风格
　　〈kbd〉字体风格〈/kbd〉字体风格# L3 T6 x. z  C
　　〈var〉字体风格〈/var〉字体风格
　　〈dfn〉字体风格〈/dfn〉字体风格
　　〈cite〉字体风格〈/cite〉字体风格我爱电脑技术论坛) q: K( [& |% g, j) S9 I  Y/ C: S
　　〈small〉字体风格〈/small〉字体风格
　　〈big〉字体风格〈/big〉〈/body〉字体风格
4.3页面风格设计
　〈body〉元素可以用来设置网页的背景图像、背景颜色、链接颜色和页面的顶页边空白与左页边空白。基本语法：我爱电脑技术论坛' d8 Z8 E0 g, a4 L3 m3 T
　　〈BODY( Q: R' K! O- a+ x8 z; L, q
　　ALINK= color打造最好的电脑自学交流论坛& K/ o$ B! Q* A9 g/ p/ J
　　BACKGROUND=url
　　BGCOLOR= color打造最好的电脑自学交流论坛( ^2 n( h* y' }# u; |$ ^
　　BOTTOMMARGIN=pixels
　　LEFTMARGIN= pixels我爱电脑技术社区--打造最好的电脑技术自学交流平台6 x0 B: M* U- b/ p8 X! n
　　LINK= color
　　RIGHTMARGIN= pixels
　　TEXT= color电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站0 i' |9 k; n3 @9 }. a
　　TOPMARGIN=n4 E' u5 t" b7 |% |$ B# e
　　BLINK= color我爱电脑技术论坛" q' r7 l4 W1 z/ Q! q3 s9 _  r& K& k( x
　　〉……〈/body〉我爱电脑技术社区--打造最好的电脑技术自学交流平台; n% t) F$ R6 f7 y2 P# M
　　其中，
　　BACKGROUND=url 规定背景图像，该图铺在页面的文本和图形之后；
　　ALINK= color 设置激活链接的颜色；我爱电脑技术论坛/ d$ Z" k) O1 i8 F3 H# F; U5 D5 t
　　GACKGROUND=color 设置页面的背景颜色；
　　LINK= color 尚未被访问的链接颜色；打造最好的电脑自学交流论坛' K+ _6 j- q. L* |
　　TEXT= color 规定页面的文本颜色；1 ^0 P6 c1 Y5 l1 E. w9 \% b) z: L  Q
　　VLINK= color 已经被访问的链接颜色；
　　BOTTOMMARGIN=pixels 为整个页面规定底页边空白，单位为象素，默认页边为空白。如果设置为“0”或“”，则底边空白就是窗口或者帧的底边空白；
　　LEFTMARGIN= pixels 规定整个页面的左页边空白；
　　RIGHTMARGIN= pixels 设置整个页面的右页边空白；我爱电脑技术社区--打造最好的电脑技术自学交流平台" W! K4 G) G( V' @1 X
　　TOPMARGIN= pixels 规定整个页面体的顶边空白。; Y: |( P6 W) f; R

例：设计一个网页，要求有背景图片，背景颜色为，页面文本颜色，链接颜色为，激活链接颜色，已被访问链接颜色，上下左右页边空白为8，相应的HTML代码：电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站) ]; e* g0 c$ g0 H, {1 c% H
〈body topmargin="8" leftmargin="8" background="../images/bg.jpg" bgcolor="#FFFFFF" link="#000080" vlink="#008000" alink="#008080" text="#000080"〉# P& z# V n, X# y2 D* W. U
〈p〉〈a href="http://www.sina.com.cn"〉新浪网〈/a〉是一家服务于中国大陆及全球华人社群的大型网站
〈/body〉打造最好的电脑自学交流论坛* d( n) I3 o7 m+ A) x, [" z
页面效果：

我爱电脑技术论坛$ r- ~# S# C9 n7 I# Q6 s
4.4加入图像　　要想使网页美观漂亮，在页面中插入图片是不可避免的。〈img〉元素的作用就是在文档中嵌套一个图像或一个视像片断，其基本语法格式如下：我爱电脑技术社区--打造最好的电脑技术自学交流平台& L0 \, W' m7 Z# v0 j
　　〈IMGwww.520diannao.com7 J, I3 Y& j! F& O
　　SRC=url电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 L3 |3 t) i# p3 B: l) u0 ?' @8 _) z
　　ALIGN=ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | RIGHT | TEXTTOP | TOP
　　BORDER=n
　　HEIGHT= nwww.520diannao.com' a4 e w6 S# C
　　WIDTH= nwww.520diannao.com4 @! }, y' l' N/ C6 R
　　LOOP= n
　　USEMAP=url〉我爱电脑技术社区--打造最好的电脑技术自学交流平台9 w* n* o/ A& n6 Z" I" A1 U
其中
　　SRC==url 定义了图像的来源；
　　ALIGN 规定图像的对齐方式。对齐方式分水平对齐和垂直对齐，水平对齐指定了图像在页面中的布局，垂直对齐指的是图像与文本的对齐方式。属于水平对齐的有LEFT（左对齐）、MIDDLE（水平居中）和RIGHT（右对齐），属于垂直对齐的有ABSBOTTOM（相对底边对齐）、ABSMIDDLE（相对垂直居中）、BASELINE（与基线对齐）、BOTTOM（与底边对齐）、TOP（与顶边对齐）和TEXTTOP（与文本顶边对齐），默认值为LEFT。3 b% y# S/ [ v' `- e& u, J+ v' g
　　BORDER＝n 规定在图像周围要画的边框宽度，以象素为单位；
　　HEIGHT＝n 定义图像的高度，和WIDTH一起规定图像的尺寸，可以用象素或百分数设，默认图像尺寸为原始大小；
　　WIDTH= n定义图像的宽度，和HEIGHT一起规定图像的尺寸，用法与HEIGHT相同；我爱电脑技术社区--打造最好的电脑技术自学交流平台9 {3 ^* e( k7 w' m, v! A! ~) h
　　LOOP＝ n 规定图像显示要循环的次数，LOOP="infinite" 表示不限制播放次数， n的默认只是1；
　　USEMAP＝url 指定与图像相关联的图像地图（参见3.5图象地图）

例1：在网页中插入一幅图片的HTML我爱电脑技术论坛' M5 ]9 ~* \" F5 r$ C a5 M$ `
〈img border="3" src="../images/wus.jpg" width="318" height="379"〉我爱电脑技术论坛5 h* p9 n8 P' u

例2：图像的对齐设置。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站, \" {( G% ?, n$ }( z, i0 m
（1）〈img src=" images/sina_logo2.gif" align="right" 〉

打造最好的电脑自学交流论坛( C3 { Q! M* Q6 ]1 X* X; F1 N

（2）〈img src=" images/sina_logo2.gif" align="top" 〉

（3）〈img src=" images/sina_logo2.gif" align="middle" 〉

（4）〈img src=" images/sina_logo2.gif" align="bottom" 〉

4.5网页中的多媒体打造最好的电脑自学交流论坛  X- U: s6 H# q) a* `1 a. \
　　4.5.1设置背景音乐电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站) @% U0 ~0 s, `
　　〈bgsound〉标记的作用是建立带有背景声音或“声道”（soundtracks）页面。方法如下：我爱电脑技术社区--打造最好的电脑技术自学交流平台( v' A& D$ K& f8 h+ z0 I
　　〈BGSOUND
　　BALANCE= n
　　LOOP= n我爱电脑技术论坛, T5 M: l2 k9 w$ E  w
　　SRC=url, E, |4 y! ?% _. W9 E8 }
　　VOLUME= n〉
　　BALANCE=n 确定音量如何分配到左右扬声器中。这个属性的有效值范围为-10,000到+10,000，0是平衡的“波形输出”中心。www.520diannao.com9 e# T/ h* K. u( o9 J
　　LOOP= n 规定声音在激活期间要循环多少次。LOOP="infinite" 表示不限制播放次数。打造最好的电脑自学交流论坛1 s$ _4 ?. E; z1 y
　　SRC=url 指定要播放的声音文件的路径。
　　VOLUME=n 确定页面背景声音的音量。n的有效值范围为-10,000到+10,000，0值表示全“波形输出”音量。我爱电脑技术论坛' w: a3 `4 X: N" |6 w  w/ \
　　说明：在网页中可播放的音乐文件的格式有　　4.5.2插入视频剪辑
　插入视频剪辑的基本方法是：
　　〈img src="url.gif" dynsrc="url.avi"〉我爱电脑技术论坛* y, h8 X/ r/ U1 U/ S
　　其中dynsrc指定了要播放的视频剪辑，src指定了作为视频封面的GIF 图象，在浏览器尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。www.520diannao.com8 K3 \6 `7 |2 B- e
　　Start属性用于定义视频剪辑的播放起点，start="fileopen" 表示文件打开时即开始播放，是默认值，start="mouseover" 表示当鼠标悬停与播放窗口时开始播放，也可以两者并取start="fileopen,mouseover"。打造最好的电脑自学交流论坛4 `' W/ ?2 U3 S3 G. A
　　Controls 规定在浏览器中显示控制条，默认取nocontrols。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  Y' ~0 Q- c0 h
　　Loopdelay 规定循环延迟时间，单位是毫秒，默认情况下loopdelay=0。
　　可播放的视频剪辑格式有*.avi ，*.asf ，*.ram 和*.rm等。

例：下边是在网页中播放视频剪辑的html代码
〈img border="0" dynsrc="waiting.avi" start="fileopen,mouseover" src="最真的梦/Cd-c05.gif" width="457" height="424" controls loopdelay="5" loop="infinite"〉

　4.5.3添加滚动字幕www.520diannao.com1 n0 I7 q3 o; {6 W0 `0 B
　在很多网页中都有滚动字幕，下面我就看看滚动字幕是如何实现的。2 |) W6 Y2 A$ b/ F$ K2 _' l
　　滚动字幕的基本格式为：我爱电脑技术社区--打造最好的电脑技术自学交流平台 g9 u' _# U( d S% t" S" ]
　　〈marquee〉字符串〈/marquee〉www.520diannao.com& r& L; i! g, R9 [# l& g0 Z
　　〈marquee〉标记有多个属性可以用来设置它的特性：
　　BEHAVIOR=ALTERNATE | SCROLL | SLIDE 规定在选取框中文本如何滚动。　　　ALTERNATE表示选取框文本左右交替。SCROLL指定选取框文本按　　　　　　　　DIRECTION=attribute（属性）中规定的方向滚动，文本滚动到终端后又重新开始。SLIDE规定选取框文本按DIRECTION=attribute规定的方向滚动，滚动到末段则停止。
　　BGCOLOR=color 设定选取框的背景颜色。
　　DIRECTION=LEFT | RIGHT | DOWN | UP 确定文本要滚动的方向。) x1 E2 _- V/ I e) @9 W
　　HEIGHT=n 设置选取框的高度，单位是像素或屏幕高度的百分比。我爱电脑技术论坛: x4 m6 ]5 S- k. l
　　WIDTH=n 设置选取框的宽度，单位是像素或屏幕高度的百分比。
　　LOOP=n 规定文本滚动循环的次数。
　　SCROLLDELAY=n 设定字幕的滚动速度，单位是毫秒。我爱电脑技术社区--打造最好的电脑技术自学交流平台/ R6 r" S5 ?9 K: A- k- ~4 m" ?0 ^% P

例：制作一个滚动字幕：
〈marquee align="middle" behavior="slide" bgcolor="#C0C0C0" direction="right" width="500" height="50"〉滚动字幕〈/marquee〉我爱电脑技术论坛# R3 a! p! h9 e! c

　　4.5.4嵌入多媒体文本
　网页中允许嵌入各种其它类型的文档。嵌入多媒体文档的基本方法是：
　　〈embed src=url〉〈/embed〉打造最好的电脑自学交流论坛) o% X) v. d9 \
　　src属性指定了要嵌入的文档。可以嵌入网页的多媒体文档有电影(movie), 声音(sound), 虚拟现实语言(vrml)等。www.520diannao.com& f/ L, n2 k: [& {
　　说明：要浏览嵌入多媒体文档的页面，用户需要在计算机上安装一个可以查看数据的插件（plugin）。

TOP

‹‹ 上一主题 | 下一主题 ››

[综合类] 从HTML语言到网上家园 第四章 页面风格设计

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

[综合类] 从HTML语言到网上家园第四章页面风格设计

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