【巩固与拓展】
1.在设计视图中打开“泰职院”网站的主页index.html,运用本章所学的知识和技能对其进行内容排版,所需素材请参考现有网站(http://www.tzpc.edu.cn)进行搜集整理。
2.CSS样式参数中的扩展类
扩展类中的属性用于设置一些特殊效果。包括:
分页:在打印期间在样式所控制的对象之前或者之后强行分页。此选项不受任何 4.0 浏览器的支持。
光标:当指针位于样式所控制的对象上时改变指针图像。
过滤器:对样式所控制的对象应用16种滤镜效果之一。
类似于Photoshop,滤镜能渲染对象元素,创建出艺术效果(如文本或图像的3D、阴影、淡入淡出等)。值得注意的是,有些滤镜在表格和层中才有效果。
(1)Alpha
设置透明度。Opacity: 透明程度(0---100,即完全透明----不透明)。FinishOpacity:渐变透明效果结束时的透明程度。Style: 渐变透明的样式(1~3)。StartX、StartY、FinishX、FinishY: 渐变透明效果的开始和结束位置。
(2)BlendTrans:设置淡入淡出。Duration:淡入淡出持续时间。
(3)Blur
设置3D效果。Add:输入0/非0是否显示3D效果。Direction:阴影方向,每45度一个方向(0:向上,45:右上,90:向右,180:向下)。Strength:阴影宽度。
当然也可用3DS MAX和Cool 3D等三维设计软件进行,但文件大小呢?
(4)Chroma:将某种颜色设置为透明色。
(5)DropShadow:设置文本或图像的阴影效果。Color:设置阴影的颜色。OffX、 OffY:X、Y方向的阴影偏移量(可正可负)。Positive:输入0(阴影与源文字内容重叠的部分用阴影的颜色显示出源文字内容)/非0(正常显示阴影)。
(6)FlipH :将元素水平反转。
(7)FlipV:将元素垂直反转。
(8)Glow:设置发光效果。Color:选择光的颜色。Strength:设置光的强度(1--255)。
(9)Gray:将图像设置成灰度效果。
(10)Invert:将图像设置成底片效果(即用255-原颜色)。
(11)Light:设置物体的投影。
(l2)Mask:设置透明遮罩。Color:表示设置底色,让对象遮住底色的那部分透明。
(13)RevealTrans:设置页面切换时的过渡效果。
(14)Shadow:设置拖影效果(不同于设置阴影,参见DropShadow;Blur是用原先的颜色设置阴影)。
(15)Wave:设置波纹效果。Add:输入布尔值是否显示原对象。Freq:波纹个数。LightStrength:设置波纹效果的光照强度(0--100)。Phase:设置波浪的相角(0—100,25相当于90度,50相当于180度,比如:正弦波:0—从原点开始显示,25:从最高点开始显示)。Strength:波纹起伏的幅度。
(16)Xray:设置X光效果。
3.导出样式表
为了便于样式表的反复利用,可将当前网页中定义的CSS样式保存到外部CSS样式文件(.css)中,这样,在需要使用当前网页中的某些CSS样式时,只需通过“CSS样式”功能面板上的按钮链接即可。
导出方法:执行“文件/导出/CSS样式…”菜单命令,或执行“CSS样式”功能面板右上角快捷菜单中的“导出(X)…”命令。
4.格式化文本
文本格式化包括:对段落的格式化、对字符的格式化。
对段落的格式化操作可以控制段落的整体格式,例如段落的缩进方式、对齐方式、列表方式等;而对字符的格式化操作则只针对字符本身,例如可以将某个段落中的某些文字设置为粗体格式。故在格式化前,需要首先选中被格式化的对象,如果希望设置段落格式,只需要将插入点放置到段落中任意位置即可;如果希望设置文本的字符格式,则需要选中这些文字。
(1)设置段落格式
①设置标题(将段落设置为标题)
常用标题来强调段落要表现的内容。在HTML中,定义了6级标题,每级标题的字符大小并没有一个实际上的固定值,它是由浏览器所决定的,为标题定义的级别只决定了标题之间的相对大小。
设置方法:将插入点放置到要设置标题的段落中(该段落一般是一行文字),使用属性面板上的“格式”(Format)下拉列表进行。
标题代码:<h1>标题</h1>等。
段落代码:<p>内容</p>。
注意:“预先格式化的”指保持文本中的空格、回车等。
技巧:可用组合键“Ctrl+相应的标题级别数”来快速设置标题,例如,Ctrl+2设置为标题2等。
②对齐段落
段落的对齐方式(align),指段落相对文档窗口(或浏览器窗口)在水平位置的对齐方式:左对齐、居中和右对齐。
③缩进段落
有时希望强调一段文字,或引用其他来源的文字,可将段落文字缩进,以示同普通段落的区别。所谓缩进,主要是相对于文档窗口(或浏览器窗口)左端而言的。
(2)设置字符格式
如果说段落格式能够从整体上把握文档的结构,使文档便于阅读理解,那么良好的字符格式则能够为文档带来细致的美感,进一步突出文档要表达的中心思想。在Dreamweaver中,既可通过CSS样式设置字符的字体、字号、颜色、样式等属性,也可直接使用“文本”菜单中相应命令或属性面板进行设置。
在设置字体时,如果字体列表中没有需要的字体,则可以编辑字体列表。但应注意:不要在网页中使用过于特殊的字体,因为用户的浏览器中不一定会安装这些特殊字体,此时只能以普通的默认字体(宋体)来显示。对于中文网页来说,应该尽量对汉字使用宋体或黑体。如果为了美观的原因,非要使用特殊的字体,则可将使用特殊字体的文字制作成图像,插入到网页中。
字号指字体的大小,可以是绝对大小(如12px)标准,也可以是相对大小(如极大xx-large)。
丰富的字符颜色能极大地增强网页的表现力。需要注意的是:若用“文本/颜色”菜单命令选取的是Windows标准色,不推荐采用。因为它不一定符合Web安全色的标准,即不是所有的浏览器都能够正确显示设置的颜色。如果希望利用Web安全色来设置字符颜色,应该使用属性面板上的颜色板。
字符的样式(style)指的是字符的外观显示方式,例如加粗、倾斜和下划线等:
加粗(<b>)、倾斜(<i>)和下划线(<u>):为最常用的三种字符样式,其中加粗、倾斜可利用属性面板快速设置,如果要取消加粗或倾斜格式,可以再次单击该按钮,使按钮弹起(或用快捷键:Ctrl+B、Ctr+I)。
删除线、打字型、强调、加强、代码、变量、范例、键盘、引用、定义、已删除、已插入:有些浏览器显示为等宽度字体(所谓等宽度字体,指的是每个字符或字母的宽度相同。具体设置成什么字体,这是由浏览器本身决定的,对于中文环境的大多数浏览器来说,会以CourierNew字体作为默认的英文等宽度字体,以宋体作为默认的中文等宽度字体),有些显示为加粗,有些显示为斜体等。
5.Flash按钮和文本
Flash矢量动画按钮和文本均是由Macromedia Flash动画制作软件制作,并导出成swf格式的动画文件。它具有文件尺寸小、交互性强、颜色简洁明快等优点,在网页中大量采用。
在Dreamweaver 中集成了一些现成的Flash按钮和文本模式,网页设计人员只要套用这些模式,就可以制作出一流的Flash动画按钮和文本,不需用Flash进行制作了。其中Flash按钮共集成了三类按钮:播放按钮、指示按钮、导航按钮。
Flash文本用于显示重要的文本信息,主要用在一些特殊页面上以突出文字主题,它可以任意缩放而不影响显示效果。
Flash按钮与Flash文本的区别不仅在于外观上,Flash按钮效果更丰富,而Flash文本当鼠标移到其上时仅有颜色改变。
注意:保存的Flash按钮文件扩展名为.swf,且文件和文件夹名必须用非中文命名。
【归纳总结】
本章讲述了常见网页元素的插入,重点介绍了超链接的类型和插入使用方法以及常见网页元素的格式化操作,还介绍了在DIV+CSS布局中常用的选项卡效果的制作方法。这些元素在网页中的使用频率很高,读者应通过经常反复的练习熟练掌握这些知识和技能。
【分析与思考】
1.怎样在文档窗口通过属性面板播放 Flash动画?你认为还有其它方法吗?
2.将WORD中的文本复制后粘贴到网页页面上,发现所有段落都合并在一起了,如何解决这个问题?段落中断行在页面排版中有什么好处?
3.头部元素有何用处?
4.如果网页中有2个区域都需要使用选项卡效果,如何通过代码复用实现?实际做一下。
5.相比Photoshop的滤镜效果,使用CSS创造滤镜效果最大优点是什么?