《网页设计与制作基础》实验指导书实验6

《《网页设计与制作基础》实验指导书实验6》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒模式和定位技术2、熟悉层（APDiv）的基本操作并能利用层（APDiv）来定位页面元素；3、掌握模板的创建、编辑和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点uCSS盒模式和定位技术u灵活利用层来实现网页元素的精确定位。u利用模板生成多个风格一致的网页。实验内容1、在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：index.html、和zzy

2、.html。并将给定的多媒体文件放入相应的文件夹中。2、结合所学的CSS布局知识和实验操作说明中关于APDiv（层）的知识，利用Dreamweaver对index.htm进行设计编辑，效果如下图所示。说明：1）红色显示的文字“中国四大名园”不是图片的一部分2）左下的各行文字为空超链接3、编辑网页文件“zzy.html”，效果如下图所示。yearsmortgagehousing;4.mortgageregistrationformalitiesarecompleted.(D)pledge1.borrowe

3、r(includingthepledgor)between18-65yearsofage,withfullcivilcapacity;2.collateral说明：1）“首页”链接index.html，“拙政园”链接zzy.html，其它为空链接。1、a)根据网页文件“zzy.html”生成模板文件“zzy.dwt”。文件存放Templates文件夹下。b)根据模板文件“zzy.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站点中的my.html的导航莱单内容“拙

4、政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。实验操作说明使用CSS对页面进行布局关于Dreamweaver中的AP元素AP元素（绝对定位元素，层）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP元素用于设计页面的布局。AP元素通常是绝对定位的div标签。（它们是Dreamweaver默认插入的AP元

5、素类型。）但是请记住，可以将任何HTML元素（例如，一个图像）作为AP元素进行分类，方法是为其分配一个绝对位置。所有AP元素（不仅仅是绝对定位的div标签）都将在“AP元素”面板中显示。APDiv元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘制APDiv”工具绘制AP元素时，Dreamweaver在文档中插入一个div标签，并为该div指定一个ID值（默认情况下为第一个div指定apDiv1，第二个div分配apDiv2，依此类推）。可以使用“AP元素”面板或属性检查器将

6、APDiv重新命名为想要的任何名称。以下是APDiv的示例HTML代码：