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

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

ID:25920583

大小:286.50 KB

页数:10页

时间:2018-11-23

《网页设计与制作基础》实验指导书(2010-2011-2)-实验6_第1页
《网页设计与制作基础》实验指导书(2010-2011-2)-实验6_第2页
《网页设计与制作基础》实验指导书(2010-2011-2)-实验6_第3页
《网页设计与制作基础》实验指导书(2010-2011-2)-实验6_第4页
《网页设计与制作基础》实验指导书(2010-2011-2)-实验6_第5页
资源描述:

《《网页设计与制作基础》实验指导书(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进行设计编辑,效果如下图所示。3、编辑网页文件“zzy.html”,效果如下图所示。1、a)根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。b)根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”,站点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文

3、件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。实验操作说明使用CSS对页面进行布局关于Dreamweaver中的AP元素AP元素(绝对定位元素,层)是分配有绝对位置的HTML页面元素,具体地说,就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置于HTML文档正文中的内容。AP元素用于设计页面的布局。AP元素通常是绝对定位的div标签。(它们是Dreamweaver默认插入的AP元素类型。)但是请记住,可以将任何HTML元素(例如,一个图像)作为AP元素进行

4、分类,方法是为其分配一个绝对位置。所有AP元素(不仅仅是绝对定位的div标签)都将在“AP元素”面板中显示。APDiv元素的HTML代码Dreamweaver使用div标签创建AP元素。当使用“绘制APDiv”工具绘制AP元素时,Dreamweaver在文档中插入一个div标签,并为该div指定一个ID值(默认情况下为第一个div指定apDiv1,第二个div分配apDiv2,依此类推)。可以使用“AP元素”面板或属性检查器将APDiv重新命名为想要的任何名称。以下是APDiv的示例HTML代码:

5、ttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>SampleAPDivPage

可以

6、更改页面上的APDiv(或任何AP元素)的属性,包括x坐标和y坐标、z轴(也称作堆叠顺序)和可见性等所有CSS布局属性。插入APDiv将插入点放置在“文档”窗口中,然后选择“插入”>“布局对象”>“APDiv”。创建APDiv后,只需将插入点放置于该APDiv中,然后就可以像在页面中添加内容一样,将内容添加到APDiv中。使用嵌套的APDiv嵌套的APDiv是其代码包含在另一个APDiv的标签内的APDiv。例如:

7、Div3">

apDiv4div实际上位于apDiv3div的内部。(可以在“AP元素”面板中更改APDiv堆叠顺序。)嵌套通常用于将APDiv组合在一起。嵌套APDiv随其父APDiv一起移动,并且可以设置为继承其父级的可见性。插入嵌套APDiv1确保已取消选择“防止重叠”。2在“文档”窗口的“设计”视图中,将插入点放置在一个现有APDiv的内部,然后选择“插入”>“布局对象”>“APDiv”。使用AP元素面板将现有AP元素嵌套在另一个AP元素中1选择“窗口”>“A

8、P元素”打开“AP元素”面板。2在“AP元素”面板中选择一个AP元素,然后按住Ctrl拖动(Windows)将此AP元素拖动到“AP元素”面板中的目标AP元素。3当目标AP元素的名称高亮显示时,松开鼠标按钮。注:使用“首选参数”对话框中的“AP元素”类别可指定新建AP元素的默认设置。1选择“编辑”>“首选参数”(Wi

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。