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

　　html谈话的另一个要害特性即是不妨把文本、图像、动画、音乐等多种媒介相贯串，安排出文案并茂、动态贯串的页面。这一章咱们将引见怎样创造一个完备的充分多彩的网页。

4.1谈话字符集

　创造网页的功夫，开始须要设置网页谈话，再不考察者欣赏器机动树立谈话。普遍情景下，咱们都是取默许值。谈话字符集的设置在网页首部〈head〉〈/head〉局部实行，基础方法是：

meta http-equiv="content-type" content="text/html; charset=utf8"〉

　gb2312代办简体华文，也不妨按照须要采用其它谈话。　　也不妨在html标志顶用lang属性规则暂时标志运用的谈话，语法领会软硬件不妨运用这个属性对援用、数字等来决定怎样表露一定谈话选项。

4.2笔墨脸色及作风

　　html谈话用〈font〉标志设置文本的字体。〈font〉标志有多种属性用来设置字体字面、尺寸和脸色等，常用的〈font〉标志属性有：

　　color 树立字体所运用的脸色。在html中，脸色常常沿用6位16进制数值，方法为#xxxxxx，第一二位表白赤色值，三四位为绿色值，五六位代办蓝色值，#000000代办玄色，#ffffff是白色。脸色也不妨用论理值表白，如：black（玄色），olive（青果色），teal（呈绿色的蓝色），red（赤色），blue（蓝色），maroon（栗色），navy（海军蓝色），gray（灰色），white（白色），green（绿色），purple（紫色），yellow（黄色），aqua（浅绿色）等。

网上家园 第四章 页面风格设计">

例：网页中有一段笔墨，诉求字体字面为隶字，表露脸色为#008800，字体巨细为2号，html源代码如次：〈font size="2" color="#008000" face="隶字"〉网页中有一段笔墨，诉求字体字面为隶字，表露脸色为#008000，字体巨细为2号〈/font〉表露功效：网页中有一段笔墨，诉求字体字面为隶字，表露脸色为#008000，字体巨细为2号

　　还可树立字体的作风。常用论理作风的html标志有：　　〈b〉〈/b〉 表白粗体　　〈i〉〈/i〉 表白斜体　　〈u〉〈/u〉 加下划线　　〈strike〉〈/strike〉 加简略线　　〈blink〉〈/blink〉 笔墨闪耀　　〈sup〉〈/sup〉 上标　　〈sub〉〈/sub〉 下标　　〈strong〉〈/strong〉 表白更加夸大　　〈em〉〈/em〉 表白夸大　　〈code〉〈/code〉 源代码　　〈samp〉〈/samp〉 例子　　〈kbd〉〈/kbd〉 键盘输出　　〈var〉〈/var〉 变量　　〈dfn〉〈/dfn〉 设置　　〈cite〉〈/cite〉 援用　　〈small〉〈/small〉 较小　　〈big〉〈/big〉 较大　　〈blink〉〈/blink〉 使文本闪耀，闪耀频次为１秒钟一次　　例：百般作风字体的html代码及其表露功效。　　〈b〉字体作风〈/b〉 字体作风　　〈i〉字体作风〈/i〉 字体作风　　〈u〉字体作风〈/u〉 字体作风　　〈tt〉字体作风〈/tt〉 字体作风 　　〈sup〉字体作风〈/sup〉 字体作风　　〈sub〉字体作风〈/sub〉 字体作风　　〈s〉字体作风〈/s〉 字体作风　　〈strike〉字体作风〈/strike〉 字体作风　　〈em〉字体作风〈/em〉 字体作风　　〈strong〉字体作风〈/strong〉 字体作风 　　〈code〉字体作风〈/code〉 字体作风　　〈samp〉字体作风〈/samp〉 字体作风　　〈kbd〉字体作风〈/kbd〉 字体作风　　〈var〉字体作风〈/var〉 字体作风　　〈dfn〉字体作风〈/dfn〉 字体作风　　〈cite〉字体作风〈/cite〉 字体作风　　〈small〉字体作风〈/small〉 字体作风　　〈big〉字体作风〈/big〉〈/body〉 字体作风

　　4.3页面作风安排

　〈body〉元素不妨用来树立网页的后台图像、 后台脸色、链接脸色和页面包车型的士顶页边空缺与左页边空缺。基础语法：　　〈body　　alink= color　　background=url　　bgcolor= color　　bottommargin=pixels　　leftmargin= pixels　　link= color　　rightmargin= pixels　　text= color　　topmargin=n　　blink= color　　〉……〈/body〉　　个中，　　background=url 规则后台图像，该图铺在页面包车型的士文本和图形之后；　　alink= color 树立激活链接的脸色；　　gackground=color 树立页面包车型的士后台脸色；　　link= color 尚未被考察的链接脸色；　　text= color 规则页面包车型的士文本脸色；　　vlink= color 仍旧被考察的链接脸色；　　bottommargin=pixels 为所有页面规则底页边空缺，单元为音素，默许页边为空缺。即使树立为“0”或“”，则底边空缺即是窗口大概帧的底边空缺； 　　leftmargin= pixels 规则所有页面包车型的士左页边空缺；　　rightmargin= pixels 树立所有页面包车型的士右页边空缺；　　topmargin= pixels 规则所有页面体的顶边空缺。

例：安排一个网页，诉求有后台图片，后台脸色为，页面文本脸色，链接脸色为，激活链接脸色，已被考察链接脸色，左右安排页边空缺为8，相映的html代码：〈body topmargin="8" leftmargin="8" background="../images/bg.jpg" bgcolor="#ffffff" link="#000080" vlink="#008000" alink="#008080" text="#000080"〉〈p〉〈a href="http://www.sina.com.cn"〉新浪网〈/a〉是一家效劳于华夏陆地及寰球华人社会群体的巨型网站〈/body〉页面功效：

　　4.4介入图像

　　要想使网页场面美丽，在页面中插入图片是不行制止的。〈img〉元素的效率即是在文书档案中嵌套一个图像或一个视相片断，其基础语法方法如次：　　〈img　　src=url　　align=absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top　　border=n　　height= n　　width= n　　loop= n　　usemap=url〉个中　　src==url 设置了图像的根源；　　align 规则图像的对齐办法。对齐办法分程度对齐和笔直对齐，程度对齐指定了图像在页面中的构造，笔直对齐指的是图像与文本的对齐办法。属于程度对齐的有left（左对齐）、middle（程度居中）和right（右对齐），属于笔直对齐的有absbottom（对立底边对齐）、absmiddle（对立笔直居中）、baseline（与基线对齐）、bottom（与底边对齐）、top（与顶边对齐）和texttop（与文本顶边对齐），默许值为left。　　border＝n 规则在图像范围要画的边框宽窄，以音素为单元；　　height＝n 设置图像的莫大，和width一道规则图像的尺寸，不妨用音素或百分数设，默许图像尺寸为原始巨细；　　width= n设置图像的宽窄，和height一道规则图像的尺寸，用法与height沟通；　　loop＝ n 规则图像表露要轮回的度数，loop="infinite" 表白不控制播放度数， n的默许不过1；　　usemap＝url 指定与图像关系联的图像舆图（拜见3.5图象舆图）

例1：在网页中插入一幅图片的html〈img border="3" src="http://www.okasp.com/images/wus.jpg" width="318" height="379"〉

例2：图像的对齐树立。（1）〈img src=" images/sina_logo2.gif" align="right" 〉

（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网页中的多媒介　　4.5.1树立后台音乐　　〈bgsound〉标志的效率是创造带有后台声响或“声道”（soundtracks）页面。本领如次：　　〈bgsound　　balance= n　　loop= n　　src=url　　volume= n〉　　balance=n 决定响度怎样调配到安排喇叭中。这个属性的灵验值范畴为-10,000到+10,000，0是平稳的“波形输入”重心。　　loop= n 规则声响在激活功夫要轮回几何次。loop="infinite" 表白不控制播放度数。　　src=url 指定要播放的声响文献的路途。　　volume=n 决定页面后台声响的响度。n的灵验值范畴为-10,000到+10,000，0值表白全“波形输入”响度。　　证明：在网页中可播放的音乐文献的方法有

　　4.5.2插入视频剪辑

　插入视频剪辑的基础本领是：　　〈img src="http://www.okasp.com/techinfo/url.gif" dynsrc="url.avi"〉　　个中dynsrc指定了要播放的视频剪辑，src指定了动作视频封皮的gif 图象，在欣赏器尚未实足读入 avi 文献时，先在 avi 播放地区表露该图象。　　start属性用来设置视频剪辑的播放开始，start="fileopen" 表白文献翻开时即发端播放，是默许值，start="mouseover" 表白当鼠标悬停与播放窗口时发端播放，也不妨两者并取start="fileopen,mouseover"。 　　controls 规则在欣赏器中表露遏制条，默许取nocontrols。　　loopdelay 规则轮回推迟功夫，单元是毫秒，默许情景下loopdelay=0。　　可播放的视频剪辑方法有*.avi ，*.asf ，*.ram 和*.rm等。

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

　4.5.3增添震动字幕

　在很多网页中都有震动字幕，底下我就看看震动字幕是怎样实行的。　　震动字幕的基础方法为：　　〈marquee〉字符串〈/marquee〉　　〈marquee〉标志有多个属性不妨用来树立它的个性：　　behavior=alternate | scroll | slide 规则在采用框华文本怎样震动。　　　alternate表白采用框文本安排瓜代。scroll指定采用框文本按　　　　　　　　direction=attribute（属性）中规则的目标震动，文本震动到结尾后又从新发端。slide规则采用框文本按direction=attribute规则的目标震动，震动到末段则遏止。　　bgcolor=color 设定采用框的后台脸色。　　direction=left | right | down | up 决定文本要震动的目标。　　height=n 树立采用框的莫大，单元是像素或屏幕莫大的百分比。　　width=n 树立采用框的宽窄，单元是像素或屏幕莫大的百分比。　　loop=n 规则文本震动轮回的度数。　　scrolldelay=n 设定字幕的震动速率，单元是毫秒。

例：创造一个震动字幕：〈marquee align="middle" behavior="slide" bgcolor="#c0c0c0" direction="right" width="500" height="50"〉震动字幕〈/marquee〉

　　4.5.4嵌入多媒介文本

　网页中承诺嵌入百般其它典型的文书档案。嵌入多媒介文书档案的基础本领是：　　〈embed src=url〉 〈/embed〉　　src属性指定了要嵌入的文书档案。不妨嵌入彀页的多媒介文书档案有影戏(movie), 声响(sound), 假造实际谈话(vrml)等。　　证明：要欣赏嵌入多媒介文书档案的页面，用户须要在计划机上安置一个不妨察看数据的插件（plugin）。