《网页设计与制作基础》实验指导书2实验6.docx
《《网页设计与制作基础》实验指导书2实验6.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作基础》实验指导书2实验6.docx(18页珍藏版)》请在冰豆网上搜索。
![《网页设计与制作基础》实验指导书2实验6.docx](https://file1.bdocx.com/fileroot1/2023-2/2/0a024ce1-0c4e-4174-bfb1-97503b0e8347/0a024ce1-0c4e-4174-bfb1-97503b0e83471.gif)
《网页设计与制作基础》实验指导书2实验6
实验六基于CSS的网页布局设计
实验目的
1、CSS的页面分割技术、盒模式和定位技术
2、熟悉层(APDiv)的基本操作并能利用层(APDiv)来定位页面元素;
3、掌握模板的创建、编辑和应用。
实验环境
WindowsXP操作系统,Dreamweaver软件,内部组成局域网,外连Internet互联网。
实验重点及难点
◆CSS盒模式和定位技术
◆灵活利用层来实现网页元素的精确定位。
◆利用模板生成多个风格一致的网页。
实验内容
1、在你的站点中创建文件夹:
sy6。
在sy6文件夹下创建两个文件:
my.html、和zzy.html。
并将给定的多媒体文件放入相应的文件夹中。
2、结合所学的CSS布局知识和实验操作说明中关于APDiv(层)的知识,利用Dreamweaver对my.htm进行设计编辑,效果如下图所示。
要点:
文件操作:
从文件面板中打开my.htm
文档操作:
分析设计要求
1)确定页面分割数量
2)从插入面板中打开“布局”类别,从布局中选择绘制APdiv,然后拖放到大致位置并调整其大小。
3)依次选中各个分割区域,利用属性面板进行编辑;或利用CSS面板对各分割区域进行编辑,尤其是盒模式属性(CSS面板的方框和边框)和定位属性,从而实现对整体布局的精确调整和控制。
4)将元素分别插入到各个区域;选中要编辑的元素,利用属性面板进行编辑;或利用CSS面板对各元素进行编辑,尤其是盒模式属性(CSS面板的方框和边框)和定位属性,从而实现对整体布局的精确调整和控制。
3、编辑网页文件“zzy.html”,效果如下图所示。
注:
要充分利用盒模式属性和定位属性实现局部和整体布局。
4、编辑网页文件“zzy.html”,效果如下图所示。
要点:
文件操作:
从文件面板中打开zzy.htm
文档操作:
分析设计要求
1)确定页面分割数量
2)从插入面板中打开“布局”类别,从布局中选择绘制APdiv,然后拖放到大致位置并调整其大小。
3)依次选中各个分割区域,利用属性面板进行编辑;或利用CSS面板对各分割区域进行编辑,尤其是盒模式属性(CSS面板的方框和边框)和定位属性,从而实现对整体布局的精确调整和控制。
4)将元素分别插入到各个区域;选中要编辑的元素,利用属性面板进行编辑;或利用CSS面板对各元素进行编辑,尤其是盒模式属性(CSS面板的方框和边框)和定位属性,从而实现对整体布局的精确调整和控制。
5、
a)根据网页文件“拙政园.html”生成模板文件“my.dwt”。
文件存放于sy6文件夹下。
b)根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”,站点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。
点:
本例是基于现有文档创建模板
1打开zzy.html。
2执行下列操作之一:
•选择“文件”>“另存为模板”。
•在“插入”面板的“常用”类别中,单击“模板”按钮,然后从弹出菜单中选择“创建模板”。
3从“站点”弹出菜单中选择一个用来保存模板的站点,然后在“另存为”框中为模板输入一个唯一的名称。
4单击“保存”。
Dreamweaver将模板文件以文件扩展名.dwt保存在站点的本地根文件夹中的Templates文件夹中。
如果该Templates文件夹在站点中尚不存在,Dreamweaver将在保存新建模板时自动创建该文件夹。
5.编辑模板并保存。
1)选中准备编辑的元素
2)从插入莱单或插入面板中选择“模板对象”,从弹出的莱单中选择可编辑区域的类型
3)重复上述步骤,直至确定所有可编辑区域
4)保存
6.从文件莱单中选择“新建”,从弹出的对话框中选择“模板中的页”,选中模板后单击“创建”。
7.编辑并保存创建的网页文件为yhy.html
注:
不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。
此外,不要将Templates文件夹移动到本地根文件夹之外。
这样做将在模板中的路径中引起错误。
实验操作说明
使用CSS对页面进行布局
关于Dreamweaver中的AP元素
AP元素(绝对定位元素,层)是分配有绝对位置的HTML页面元素,具体地说,就是div标签或其它任何标签。
AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。
AP元素用于设计页面的布局。
AP元素通常是绝对定位的div标签。
(它们是Dreamweaver默认插入的AP元素类型。
)但是请记住,可以将任何HTML元素(例如,一个图像)作为AP元素进行分类,方法是为其分配一个绝对位置。
所有AP元素(不仅仅是绝对定位的div标
签)都将在“AP元素”面板中显示。
APDiv元素的HTML代码
Dreamweaver使用div标签创建AP元素。
当使用“绘制APDiv”工具绘制AP元素时,Dreamweaver在文档中插入一个div标签,并为该div指定一个ID值(默认情况下为第一个div指定apDiv1,第二个div分配apDiv2,依此类推)。
可以使用“AP元素”面板或属性检查器将APDiv重新命名为想要的任何名称。
以下是APDiv的示例HTML代码:
SampleAPDivPage
--
#apDiv1{
position:
absolute;
left:
62px;
top:
67px;
width:
421px;
height:
188px;
z-index:
1;
}
-->