网页设计与制作技术 第四章.ppt

第四章层与行为的运用 层与行为的运用 层的基本操作 层和行为的综合运用 应用层布局网页 Spry构件的运用 层 AP Div又称“层”是动态HTML的范畴，是CSS中的定位技术。是指具有相对位置或绝对位置的DIV标签。 相对于表格来说层更具灵活性，可以弥补表格布局中烦琐的定位操作。 在Dreamweaver中创建层 单击【布局】插入栏中的“绘制层”按钮 当鼠标变成十字状后可以自由绘制层 在层中添加内容 创建好的层就相当于是一个空白网页，在层中可放入所文字、图片、表格和层、媒体对象等HTML元素。 设置层属性 在CSS-P元素【属性】面板可以指定层的名称、大小和位置,同时设置层的其它参数 层重叠属性制作阴影字 当网页上有多个层，且相互重叠时 【属性】面板中的“Z轴”值决定了层的堆叠顺序 在两个层中输入不同颜色的文字，将两个层重叠后稍做错位移动便可产生阴影文字效果 使用行为 行为是网页上常用的一些小技巧，它能较好地响应鼠标或键盘的操作，实现页面的特殊效果。使用行为可以给网页添加动态效果，增强页面的感染力。 “显示－隐藏层”行为的应用 使用“显示－隐藏层”行为可以制作很多特效。这个行为动作用于浏览者与网页进行交互时显示不同的信息。例如，当用户将鼠标指针滑过文字、图片等网页元素时，可以显示另一个层中的图像、文字内容。 下拉菜单的制作 浮动广告的制作 时间轴动画是建立在层的基础上的，通过改变层的位置来创建动画 要移动图像或文本等对象，首先必须将这些对象放置在层中。 应用层布局网页 如同表格一样，层是页面的布局定位工具，放置在层内的HTML对象可以随层被拖拽至页面所需的任意位置，用户在设计的时候就不必画表格了 Spry框架布局 Dreamweaver CS3中单击相关按钮就可以轻松地创建构件（如折叠构件和菜单栏），以及向各种页面元素中添加不同种类的效果 Spry选项卡式面板 选项卡式面板是用来将网页内容存储到紧凑的空间，浏览者单击要访问的选项卡时，相应的内容面板就会打开 自定义CSS样式的选项卡式面板 在CSS面板中重新自定义设置Spry选项卡面板的颜色与外观 Spry折叠构件 Spry折叠构件是可折叠的面板,将大量的内容存储在一个紧凑的空间中,当单击不同的选项卡时,折叠构件的面板会展开或收缩,每次只能有一个内容面板处于打开且可见状态。 Spry折叠构件的运用 左侧导航栏目是利用Spry折叠构件安排了友情链接、个人信息、推荐博文等栏。 课后练习 使用Spry构件创建如图所示的选项卡面板。选项卡标签设置了圆角背景图像，并且将选项卡面板的背景颜色与边框线颜色全部都进行了设置 。 网页设计与制作技术 网页设计与制作技术 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 回菜单 网页设计与制作技术