边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 07.ppt

《边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 07.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章简介：如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页元素。通过设置不同层的显示或隐藏，实现特殊的效果。因此，在掌握层技术之后，就可以给网页制作提供强大的页面控制能力。DreamweaverCS3提供了在网页上制作动态效果的功能，利用时间轴组织和控制层、图像等对象在一定时间内播放，从而产生动态效果。第7章　使用层和时间轴课堂学习目标层的基本操作应用层设计表格时间轴动画制作时间轴动画的技巧7.1绿色植物网页案例分析设计理念

2、操作步骤相关工具7.1.1案例分析绿色植物是生态平衡的支柱，因为植物能净化污水，能消除和减弱噪声，能耐旱固沙，能耐盐碱、耐涝，能监测二氧化硫、氟、氯、氨等的污染。本例是为绿色植物博览会制作的网页，希望在设计上表现出大自然中绿色植物的魅力。7.1.2设计理念在网页设计过程中，采用绿色和植物叶子图案作为背景，使页面体现出生命和生长的寓意。菜单以弧型的样式显示，方便浏览者了解更多的植物信息。右上方的标题点明网页主题，右下方的芦荟图像摆放，感觉更加贴近自然。整个页面设计清新爽朗，颜色明快通透。绿色植物网页

3、效果图7.1.3操作步骤12347.1.4相关工具创建层创建层若想利用层来定位网页元素，先要创建层，再根据需要在层内插入其他表单元素。有时为了布局，还可以显示或隐藏层边框。显示或隐藏层边框若要显示或隐藏层边框，可选择“查看>可视化助理>隐藏所有”命令。2.选择层选择一个层（1）利用层面板选择一个层。（2）在文档窗口中选择一个层。选定多个层选择“窗口>AP元素”命令，弹出“AP元素”控制面板。在“AP元素”控制面板中，按住键并单击两个或更多的层名称。3.设置层的默认属性当层插入后，其属

4、性为默认值，如果想查看或修改层的属性，选择“编辑>首选参数”命令，弹出“首选参数”对话框。在“分类”列表框中选择“AP元素”选项，此时可查看或修改层的默认属性。4.AP元素面板通过“AP元素”控制面板可以管理网页文档中的层。选择“窗口>AP元素”命令，调出“AP元素”控制面板。使用“AP元素”控制面板可以防止层重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。AP元素面板5.更改层的叠加顺序排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果，这可通过修改选定层的Z轴属性

5、值实现。在“AP元素”控制面板中更改层的堆叠顺序在“属性”面板中更改层的堆叠顺序6.更改层的可见性处理文档时，可以使用“AP元素”控制面板手动设置显示或隐藏层，来查看层在不同条件下的显示方式。更改层的可见性有以下两种方法。（1）使用“AP元素”控制面板更改层的可见性（2）使用“属性”面板更改层的可见性7.调整层的大小用户可以调整单个层的大小，也可以同时调整多个层的大小以使它们具有相同的宽度和高度。调整单个层的大小同时调整多个层的大小8.嵌套层嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织在

6、一起。创建嵌套层将现有层嵌套在另一个层中层嵌套的注意事项9.移动层移动层的操作非常简单，可以按照在大多数图形应用程序中移动对象的相同方法在“设计”视图中移动层。移动一个或多个选定层有以下两种方法。拖曳选择柄来移动层移动一个像素来移动层10.对齐层使用层对齐命令，以当前层的边框为基准对齐一个或多个层。当对选定层进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了避免这种情况，不要使用嵌套层。对齐两个或更多个层有以下两种方法。应用菜单命令对齐层应用“属性”面板对齐层11.层靠齐到网格在

7、移动网页元素时可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。应用DreamweaverCS3中的靠齐功能，层与网格之间的关系如铁块与磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。层靠齐到网格更改网格设置7.1.5实战演练-数码科技前线网页使用“绘制APdiv”按钮绘制层，使用“属性”面板改变文字的字体、大小和颜色，使用“编辑”命令制作阴影文字效果。效果图7.2现代家居购物网页案例分析设计理念操作步骤相关工具7.2.1案例分析现代家

8、居购物网页的功能是向客户展示家居产品，发布产品的促销信息，为客户提供线上咨询。设计网页时要注意家居产品的特色，要表现出温馨舒适的家居氛围。7.2.2设计理念在网页设计、制作过程中，左上角的标志和导航栏的设计简洁明快，方便用户浏览和交换信息。在背景处理上挑选了最具现代感的家居图片和文字的结合，营造出优美的空间氛围，从而有效地提高产品销量。在界面的右下方放置了风格独特的家居设计图，有利于用户参考实际家居环境中的家居用品布置情况。现代家居购物网页效果图7.2.3操作步骤12347.2.4