网页设计第5章

《网页设计第5章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章第5章添加网页特效153第5章添加网页特效在制作网页时，为了丰富网页内容，可以在网页中添加特殊效果。这样制作出来的网页，不但新颖、有风格，而且也增加了网站的访问量。使用层可以精确定位页面中的元素。不仅可以在层中插入网页元素，而且可以方便地移动层达到移动网页内容的目的，这是其他布局工具所不及的地方。行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。一个行为是由一个事件和一个动作构成。使用行为可以使访问者与网页之间产生一种交互，来改变页面或触发任务。JavaScript语言在实际设计网页的过程中也非常有用，运用它可以设计出一

2、些丰富多彩的网页。JavaScript的出现，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而且也实现了一种实时的、动态的、可交互的表达能力。本章结合层、行为和JavaScript来具体介绍怎样为网页添加特效。本章学习要点：Ø层的基本操作Ø行为的概念Ø预定义行为的运用ØJavaScript特点及其应用范围ØJavaScript具体应用5.1创建并设置层属性第5章第5章添加网页特效153层是在网页设计过程中用来放置页面元素的容器，在一个网页中可以由多个层存在，它最大的魅力在于层可以重叠，并且可以决定每个层是否可见，同时也能够自定义各层之间的层次关

3、系。在设计网页时，应用层对页面元素进行定位，使页面布局整齐、美观。层是一种新的网页元素定位技术，使用层可以自由地控制网页元素的位置。层可以放置在页面中的任意位置，还可以控制某个层显示在前面、还是后面，是显示、还是隐藏。5.1.1创建层5.1.2层面板5.1.3嵌套层5.1.4设置层参数首选参数层子面板中参数名称及功能描述名称功能描述显显显示default不指定可见性属性，但多数浏览器把本项解释为inheritinherit使用父层的可见性设置visible显示层的内容，忽略父层设置hidden隐藏层的内容，忽略父层设置宽和高设置新创建层默认的宽度和高

4、度背景颜色设置默认的背景颜色背景图像指定一个默认的背景图像嵌套选中该复选框，则在其他层中绘制一个新层时，新创建的层成为嵌入层。如果在绘制层的时候按住Ctrl键，可以临时改变这项设置，新创建的层将不能成为嵌入层Netscape4兼容性有一些版本的Netscape浏览器在浏览带有层的页面时，若改变浏览器窗口的大小，层的位置将发生变化。选中该复选框后，Dreamweaver8会在文档的部分自动插入一段JavaScript代码，以解决与Netscape的兼容问题5.1.5设置层属性层属性面板参数名称及功能描述名称功能描述层编号为层指定一个名称来标

5、识层。层的名称只能包含英文字母和数字，不能使用特殊字符，并且不能以数字开头第5章第5章添加网页特效153左指定该层与页面左边的距离，如果是嵌套层中的子层，则指定与父层左边框的距离上指定该层与页面顶端的距离，如果是嵌套层中的子层，则指定与父层上边框的距离宽度和高度指定层的宽度和高度。如果层的内容超过指定的大小，内容将被覆盖Z轴指定层的叠放顺序，值较大的层位于较小的层之上，Z轴值可正可负，也可以为0背景图像指定层的背景图像，单击右侧文本框后的浏览图标，选择一个图像文件，或者在文本框中输入图像文件的路径背景颜色指定层的背景颜色。默认为透明背景类可将CSS规

6、则定义应用于对象溢溢溢溢出可见扩展层的大小，使溢出的部分也可以显示，层将向右下方扩展隐藏保持层的大小，并剪切去与层大小不符的内容，不显示滚动条滚动条给层添加滚动条，不管内容是否超出层的大小。特别是通过提供滚动条来避免在动态环境中显示和不显示滚动条导致的混乱自动在层的内容超过边界时自动显示滚动条剪辑定义层的可视区域，在左、右、上、下文本框中分别输入一个值来指定距层边界的距离5.2层的基本操作层的基本操作主要包括层的激活、选择、调整大小、移动、对齐等。层是网页的一个区域，在一个网页中可以有多个层存在，它最大的魅力在于各个层可以重叠，并且可以决定每个层是否

7、可见，同时也能够自定义各层之间的层次关系。在熟练掌握了层技术之后，就可以给网页提供强大的页面控制能力。5.2.1控制层5.2.2层的叠放5.2.3层与表格的转换5.3课堂练习5-1：利用层制作阴影字第5章第5章添加网页特效153在网站中经常会看到一些阴影字，阴影字从视觉上给访问者一种厚重、立体的感觉。通常在网页中见到的阴影字大部分都是用图片或者用CSS制作的，本课堂练习利用层来实现这一效果。层是可以叠加的，并且叠加在一起的层通过Z轴值来确定位置，Z轴的值可以是正数、负数和零，数值大的层在上面，数值小的层在下面。利用层制作阴影字，方便、快捷，而且灵活性

8、非常大。不像用图片制作出来的阴影字修改起来那样的麻烦，也不像用CSS样式还要了解其各个参数的设置，设置参数时