[推荐]第四章,层与行为的运用

1、网页设计与制作技术第四章层与行为的运用网页设计与制作技术网页设计与制作技术 http:/层与行为的运用 层的基本操作层的基本操作 层和行为的综合运用层和行为的综合运用 应用层布局网页应用层布局网页 Spry构件的运用构件的运用网页设计与制作技术网页设计与制作技术 http:/层 AP Div又称又称“层层”是动态是动态HTML的范畴，的范畴，是是CSS中的定位技术。是指具有相对位置中的定位技术。是指具有相对位置或绝对位置的或绝对位置的DIV标签。标签。 相对于表格来说层更具灵活性，可以弥补相对于表格来说层更具灵活性，可以弥补表格布局中烦琐的定位操作。表格布局中烦琐的定位操作。回菜单网页设计与制

2、作技术网页设计与制作技术 http:/在在Dreamweaver中创建层中创建层 单击【布局】插入栏中的单击【布局】插入栏中的“绘制层绘制层”按钮按钮当鼠标变成十字状后可以自由绘制层当鼠标变成十字状后可以自由绘制层 回菜单网页设计与制作技术网页设计与制作技术 http:/在层中添加内容 创建好的层就相当于创建好的层就相当于是一个空白网页，在是一个空白网页，在层中可放入所文字、层中可放入所文字、图片、表格和层、媒图片、表格和层、媒体对象等体对象等HTML元素。元素。 回菜单网页设计与制作技术网页设计与制作技术 http:/设置层属性 在在CSS-P元素【属性】面板可以指定层的元素【属性】面板可以

3、指定层的名称、大小和位置名称、大小和位置,同时设置层的其它参数同时设置层的其它参数 回菜单网页设计与制作技术网页设计与制作技术 http:/层重叠属性制作阴影字层重叠属性制作阴影字 当网页上有多个层，且相互重叠时当网页上有多个层，且相互重叠时 【属性】【属性】面板中的面板中的“Z轴轴”值决定了层的堆叠顺序值决定了层的堆叠顺序 在两个层中输入不同颜色的文字，将两个层在两个层中输入不同颜色的文字，将两个层重叠后稍做错位移动便可产生阴影文字效果重叠后稍做错位移动便可产生阴影文字效果 回菜单网页设计与制作技术网页设计与制作技术 http:/使用行为 行为是网页上常用的行为是网页上常用的一些小技巧，它能

4、较一些小技巧，它能较好地响应鼠标或键盘好地响应鼠标或键盘的操作，实现页面的的操作，实现页面的特殊效果。使用行为特殊效果。使用行为可以给网页添加动态可以给网页添加动态效果，增强页面的感效果，增强页面的感染力。染力。 回菜单网页设计与制作技术网页设计与制作技术 http:/“显示隐藏层显示隐藏层”行为的应用行为的应用 使用使用“显示隐藏层显示隐藏层”行为行为可以制作很多特效。这个行可以制作很多特效。这个行为动作用于浏览者与网页进为动作用于浏览者与网页进行交互时显示不同的信息。行交互时显示不同的信息。例如，当用户将鼠标指针滑例如，当用户将鼠标指针滑过文字、图片等网页元素时，过文字、图片等网页元素时，

5、可以显示另一个层中的图像、可以显示另一个层中的图像、文字内容。文字内容。 回菜单网页设计与制作技术网页设计与制作技术 http:/下拉菜单的制作下拉菜单的制作 回菜单网页设计与制作技术网页设计与制作技术 http:/浮动广告的制作浮动广告的制作 时间轴动画是建立在时间轴动画是建立在层的基础上的，通过改层的基础上的，通过改变层的位置来创建动画变层的位置来创建动画 要移动图像或文本等要移动图像或文本等对象，首先必须将这些对象，首先必须将这些对象放置在层中。对象放置在层中。回菜单网页设计与制作技术网页设计与制作技术 http:/应用层布局网页应用层布局网页 如同表格一样，层是页如同表格一样，层是页面

6、的布局定位工具，放面的布局定位工具，放置在层内的置在层内的HTML对象对象可以随层被拖拽至页面可以随层被拖拽至页面所需的任意位置，用户所需的任意位置，用户在设计的时候就不必画在设计的时候就不必画表格了表格了 回菜单网页设计与制作技术网页设计与制作技术 http:/Spry框架布局框架布局 Dreamweaver CS3中单击相关按钮就可以轻松中单击相关按钮就可以轻松地创建构件（如折叠构件和菜单栏），以及向各地创建构件（如折叠构件和菜单栏），以及向各种页面元素中添加不同种类的效果种页面元素中添加不同种类的效果 回菜单网页设计与制作技术网页设计与制作技术 http:/Spry选项卡式面板选项卡式面

7、板 选项卡式面板是用来将网页内容存选项卡式面板是用来将网页内容存储到紧凑的空间，浏览者单击要访储到紧凑的空间，浏览者单击要访问的选项卡时，相应的内容面板就问的选项卡时，相应的内容面板就会打开会打开 回菜单网页设计与制作技术网页设计与制作技术 http:/自定义自定义CSS样式的选项卡式面板样式的选项卡式面板 在在CSS面板中重新自定义设置面板中重新自定义设置Spry选项卡选项卡面板的颜色与外观面板的颜色与外观 回菜单网页设计与制作技术网页设计与制作技术 http:/Spry折叠构件 Spry折叠构件是可折叠的面板折叠构件是可折叠的面板,将大量的内将大量的内容存储在一个紧凑的空间中容存储在一个紧凑的空间中,当单击不同的选当单击不同的选项卡时项卡时,折叠构件的面板会展开或收缩折叠构件的面板会展开或收缩,每次每次只能有一个内容面板处于打开且可见状态。只能有一个内容面板处于打开且可见状态。 回菜单网页设计与制作技术网页设计与制作技术 http:/Spry折叠构件的运用 左侧导航栏目是利左侧导航栏目是利用用Spry折叠构件折叠构件安排了友情链接、安排了友情链接、个人信息、推荐博个人信息、推荐博文等栏。文等栏。 回菜单网页设计与制作技术网页设计与制作技术 http:/课后练习课后练习 使用使用