网页制作案例教程课件 清华大学出版社第9章使用CSS布局规划网页.ppt

（2）绘制AP Div的步骤： 1）将光标放在文档插入点，在“布局”面板中单击“绘制AP Div”按钮。 2）在文档窗口中拖动画出AP Div元素，按住Ctrl可画多个AP Div元素。也可以通过复制、粘贴，快速制作出多个类似的AP Div元素。 3）每个AP Div元素中添加相应的文字和图片。 4）为元素命名并调整好各元素的位置，可以通过菜单“修改”|“排列顺序”命名操作。 （3）与时间轴结合的动画效果 1）添加AP Div元素，并加入相应的图片或文字。 2）通过“窗口”菜单，调出时间轴。 3）把刚添加的AP Div元素拖动到时间轴上。 4）右击时间轴，选择“记录AP元素的路径”命令，拖动AP Div元素在屏幕中移动。 5）选中时间轴上的“自动播放”和“循环”按钮，查看效果。 （4）与行为结合的交互效果 AP Div元素属性的一个重要功能就是显示/隐藏功能，与“行为”中显示/隐藏元素结合并利用光标的OnMouseOver和OnMouseOut事件制作出交互效果。 实现的步骤如下： 1）插入四个AP Div元素并命名，在其中加入对应的四张大图片。 2）同时选中新加入的四元素和“kuang”元素，通过修改菜单调整它们的位置相同。 3）在AP元素面板中把“kuang”元素拖到四元素的上面，达到挡板的作用。 4）设置AP Div元素的可见性让四个大图片先隐藏。 5）通过菜单“窗口”—“行为”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“元素单击显示，确定；并把行为的触发条件改为“onMouseOver”；实现效果光标放在中国馆的小图像上，在框内出现中国馆的大图片。 6）通过菜单“窗口”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“单击隐藏，确定；并把行为的触发条件改为“onMouseOut”。 实现光标离开中国馆的小图像上，在框内中国馆的大图片消失的效果。 9.4项目案例 学习目标 案例描述 学习和使用DIV+CSS布局网页。 根据CSS布局方法，使用Dreamweaver CS5制作医药商务系统网站系统网页，如图9-4-1所示。 案例要点 CSS布局规划网页的方法、常用的CSS布局属性的设置。 案例实施 （1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5，新建一站点，将images、Scripts和flash素材文件夹复制到本站点文件夹中。 （2）选择“文件”｜“新建”菜单项，打开“新建文档”对话框，选择“空白页”｜“HTML”｜“无”，单击“创建”按钮，新建一个网页。 （3）在打开的空白文档中，选择“文件”｜“保存”菜单项，将文件保存在根目录下，文件名为index.html。 （4）在页面index.html的文档编辑区的【标题】文本框里，将标题命名为“医药商务网站”。 案例实施 （5）选择“文件”｜“新建”菜单项，打开“新建文档”对话框，选择“空白页”｜“CSS”，单击“创建”按钮，新建CSS文档。 （6）在站点文件夹中新建一个css文件夹，将刚建立的css文档保存到该文件夹中，并命名为style.css。 （7）在style.css文档中，设置网页中每个元素边界属性margin值为0、填充属性padding值为0，其语句为：*{margin:0;padding:0;}，加上这句就可以删除浏览器这些默认值，方便后面的设置。 （8）在style.css文档中，设置网页body的margin、padding、font-size和color的默认属性值，其语句为：body{margin:0;padding:0;font-size:12px;color:#666666;}。 （9）在style.css文档中，设置网页中标题、列表、表单的margin和padding默认属性值，其语句为：h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,input{margin:0;padding:0} 案例实施 （10）点击“css样式”面板中的附加样式表图标 ，则会弹出如图9-4-2所示的“链接外部样式表”对话框，目的是把刚建好的style.css链接到index.html网页中。 案例实施 （11）将index.html分为五个区域，分别为：top、nav、centent、link和footer，分别代表网页的logo部分、导航条部分、中间主体部分、友情链接部分和底部的版权部分。 （12）在style.css文档中，设定top属性的初始值 #top{width:760px;height:110px;margin:0 auto;} .top_z{width:304