实验六 Dreamweaver网页布局（二）
实验目的
1、 CSS的页面分割技术、盒子模式和定位技术；
2、 熟悉层（AP Div）的基本操作并能利用层来定位页面元素； 3、 掌握模板的创建、编辑和应用。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
? CSS盒模式和定位技术
? 灵活利用层来实现网页元素的精确定位。 ? 利用模板生成多个风格一致的网页。
实验内容
1、 在本地站点“基于CSS的网页布局设计”中创建文件夹sy6。在sy6文件夹下创建两个
文件：my.html和zzy.html。并将给定的多媒体文件放入相应的文件夹中。
2、 结合所学的CSS布局知识和AP Div（层）的知识，利用Dreamweaver对my.html进行
设计编辑，效果如下图所示。
3、 编辑网页文件“zzy.html”，效果如下图所示。
4、 根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。 5、 根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，本地站
点的网页文件my.html中的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。
实验七 行为和时间轴
实验目的
1、 了解行为、事件和动作的含义以及认识行为面板，掌握行为的编辑方法以及具体应用。 2、 了解时间轴、帧和关键帧以及通道的含义，掌握利用时间轴制作动态效果的网页。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
? 利用行为实现网页的交互效果。 ? 利用时间轴实现网页的动态效果。
实验内容
1、 建一个名为“行为和时间轴”的本地站点，包含以下几个文件和文件夹：倡议书.html；
图片文件夹（images），里面有若干图片文件。
2、 在站点“行为和时间轴”中新建一个网页“index.html”，效果如下图所示：
? 当单击文字“行为”时，效果如下图所示：
? 当单击文字“时间轴”时，效果如下图所示：
3、 在站点“行为和时间轴”中新建一个网页“交换图像.html”，在网页中实现交换图像和
恢复交换图片的功能，即当鼠标指针位于图像“海豚.jpg”时，会自动变为“狗.jpg”；而当鼠标指针离开图像“狗.jpg”时，图像会自动变回“海豚.jpg”。效果如下图所示： 4、 当单击网页“交换图像.html”中的文字“请注意！”时，弹出一个浏览器窗口，显示一
则倡议书。
5、 在站点“行为和时间轴”中新建一个网页“弹出信息.html”，可以实现一打开该页面就
弹出一个信息窗口，信息窗口内容为“记得跟妈妈说声“谢谢”哦！”。效果如下图所示。
6、 当鼠标指针移向网页“弹出信息.html”中的生日蛋糕图片时，在状态栏显示“您许愿了
吗？”。效果如下图所示。
7、 在站点“行为和时间轴”中新建一个网页“直线运动.html”，可以实现一打开该页面，
一只蝴蝶就从页面左上角按直线飞到右下角。
8、 在站点“行为和时间轴”中新建一个网页“曲线运动.html”，可以实现一打开该页面，
一只蝴蝶就从页面左上角按曲线飞到右上角，期间进行了俯冲和仰冲的动作。 9、 在站点“行为和时间轴”中新建一个网页“复杂运动.html”，可以实现一打开该页面，
一条鱼儿在蓝色的海洋里欢快地游来游去。效果如下图所示。
10、 把站点“行为和时间轴”的网页index.htm设为主页并在其中设置相应的超链接，
如下图所示。