《网页设计与制作基础》实验指导书(2010-2011-2)-实验6

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

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

2、定的多媒体文件放入相应的文件夹中。2、结合所学的CSS布局知识和实验操作说明中关于APDiv（层）的知识，利用Dreamweaver对my.htm进行设计编辑，效果如下图所示。要点：文件操作：从文件面板中打开my.htm文档操作：分析设计要求1）确定页面分割数量2）从插入面板中打开“布局”类别，从布局中选择绘制APdiv，然后拖放到大致位置并调整其大小。3）依次选中各个分割区域，利用属性面板进行编辑；或利用CSS面板对各分割区域进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确

3、调整和控制。4）将元素分别插入到各个区域；选中要编辑的元素，利用属性面板进行编辑；或利用CSS面板对各元素进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确调整和控制。1、编辑网页文件“zzy.html”，效果如下图所示。注：要充分利用盒模式属性和定位属性实现局部和整体布局。2、编辑网页文件“zzy.html”，效果如下图所示。要点：文件操作：从文件面板中打开zzy.htm文档操作：分析设计要求1）确定页面分割数量2）从插入面板中打开“布局”类别，从布局中选择绘制APdiv，然

4、后拖放到大致位置并调整其大小。3）依次选中各个分割区域，利用属性面板进行编辑；或利用CSS面板对各分割区域进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确调整和控制。4）将元素分别插入到各个区域；选中要编辑的元素，利用属性面板进行编辑；或利用CSS面板对各元素进行编辑，尤其是盒模式属性（CSS面板的方框和边框）和定位属性，从而实现对整体布局的精确调整和控制。1、a)根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。b)根据模板文件“my.

5、dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。点：本例是基于现有文档创建模板1打开zzy.html。2执行下列操作之一：•选择“文件”>“另存为模板”。•在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“创建模板”。3从“站点”弹出菜单中选择一个用来保存模板的站点，然后在

6、“另存为”框中为模板输入一个唯一的名称。4单击“保存”。Dreamweaver将模板文件以文件扩展名.dwt保存在站点的本地根文件夹中的Templates文件夹中。如果该Templates文件夹在站点中尚不存在，Dreamweaver将在保存新建模板时自动创建该文件夹。5．编辑模板并保存。1）选中准备编辑的元素2）从插入莱单或插入面板中选择“模板对象”，从弹出的莱单中选择可编辑区域的类型3）重复上述步骤，直至确定所有可编辑区域4）保存6．从文件莱单中选择“新建”，从弹出的对话框中选择“模板中的页”，选中模板后单击“

7、创建”。7．编辑并保存创建的网页文件为yhy.html注：不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外，不要将Templates文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。实验操作说明使用CSS对页面进行布局关于Dreamweaver中的AP元素AP元素（绝对定位元素，层）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP元素用于设计页面的布

8、局。AP元素通常是绝对定位的div标签。（它们是Dreamweaver默认插入的AP元素类型。）但是请记住，可以将任何HTML元素（例如，一个图像）作为AP元素进行分类，方法是为其分配一个绝对位置。所有AP元素（不仅仅是绝对定位的div标签）都将在“AP元素”面板中显示。APDiv元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘