网设计与制作基础实验指导书实验VIP专享

下载后可任意编辑实验六 基于 CSS 的网页布局设计实验目的1、CSS 的页面分割技术、 盒模式和定位技术2、 熟悉层( AP Div) 的基本操作并能利用层( AP Div) 来定位页面元素; 3、掌握模板的创立、 编辑和应用。实验环境WindowsXP 操作系统, Dreamweaver 软件, 内部组成局域网, 外连Internet 互联网。实验重点及难点 CSS 盒模式和定位技术 灵活利用层来实现网页元素的精确定位。 利用模板生成多个风格一致的网页。实验内容1、 在你的站点中创立文件夹: sy6。在 sy6 文件夹下创立两个文件: index.html、 和 zzy.html。并将给定的多媒体文件放入相应的文件夹中。2、 结合所学的 CSS 布局知识和实验操作说明中关于 AP Div( 层) 的知识, 利用 Dreamweaver 对 index.htm 进行设计编辑, 效果如下图所示。说明: 1）红色显示的文字”中国四大名园”不是图片的一部分2）左下的各行文字为空超链接下载后可任意编辑3、 编辑网页文件”zzy.html”, 效果如下图所示。说明: 1) ”首页”链接 index.html, ”拙政园”链接 zzy.html, 其它为空链接。4、a)根据网页文件”zzy.html”生成模板文件”zzy.dwt”。文件存放 Templates 文件夹下。b)根据模板文件”zzy.dwt”创立网页文档”yhy.html”、 ”bssz.html”和”ly.html”, 站点中的 my.html 的导航莱单内容”拙政园”、 ”颐和园”、 ”避暑山庄”以及 ” 留 园 ” 分 别 链 接 到 网 页 文 件 ” zzy.html” 、 ”yhy.html”、 ”bssz.html”和”ly.html”。实验操作说明使用 CSS 对页面进行布局关于 Dreamweaver 中的 AP 元素AP 元素( 绝对定位元素, 层) 是分配有绝对位置的 HTML 页面元素, 具体地说, 就是 div 标签或其它任何标签。AP 元素能够包含文本、 图像或其它任何可放置于 HTML 文档正文中的内容。AP 元素用于设计页面的布局。下载后可任意编辑AP 元素一般是绝对定位的 div 标签。( 它们是 Dreamweaver 默认插入的 AP 元素类型。) 可是请记住, 能够将任何 HTML元素( 例如, 一个图像) 作为 AP 元素进行分类, 方法是为其分配一个绝对位置。所有 AP 元素( 不但仅是绝对定位的 div 标签) 都将在”AP 元素” 面板中显示。AP Div 元素的 HTML 代码Dreamweaver 使用 div 标签创立 AP 元素。当使用” 绘制 AP Div” 工具绘制 AP 元素时, Dreamweaver 在文档...