Dreamweaver实验报告
成绩
计算机技术综合实验
---网页制作与网站建设
专业：测绘工程班级：测绘工程1402  学号：  1401060221      姓名：叶枫
教师评语：
年月日
信息技术实验教学中心
一．实验目的与要求
1.了解网页制作的基础知识；
2.了解常用的网页开发技术和网页设计软件；
3.掌握网站开发管理的工作流程；
4.了解HTML语言的结构和语法；
5.掌握Dreamweaver CS5编写网页的使用方法；
6.掌握在网页中插入文本、图像、超链接、多媒体、表格、表单等元素的方法；
7.以介绍青岛为主题，创建一个小型网站。
二．实验环境
1.Windows 7条件下（屏幕分辨率1366×768）；
2.本地网络（未上传至web服务器），Dreamweaver CS6，Photoshop CC；
3. 建议使用IE11以获得最佳浏览体验。
三．实验过程
网站以介绍青岛为主题，旨在向游客介绍青岛的美食美景及风土人情等，
同时也能为青岛人提供本地生活服务。
1.制作主页
（1）创建html文件index：点击菜单栏的“文件”|“新建”打开新建文档对话框，选择“空白页”|“Html”点“创建”按钮，新建一个html网页。
点击保存，选择路径“叶枫1401060221”，文件名“index”。
（2）在Dreamweaver CS6设计窗口中将标题改为“青岛”。
（3）插入apDiv1作为网页底，其css属性值为：
#apDiv1 {
background-repeat: no-repeat;
background-position: center center;
height: 637px;
width: 1334px;
}
(4)插入apDiv3作为网页初始界面，调整width: 1334px;height: 659px;top: 7px;left: 7px；使其预览在IE11的效果为恰好充满整个屏幕。css属性值：
#apDiv3 {
position: absolute;
width: 1334px;
height: 659px;
z-index: 2;
background-color: #BDD7EF;
background-image: url(images/1.png);
background-repeat: no-repeat;
background-position: center center;
top: 7px;
left: 7px;
visibility: visible;
}
（5）在互联网上下载康熙体，由于没安装该字体的计算机无法显示该字体，因此我另辟蹊径，利用PowerPoint，新建演示文稿后插入文本框，插入“青島”。通过QQ截图工具获得颜#BDD7EF的RGB值，将文本框背景颜填充为该值。放映该演示文稿，利用PrtSc键打印屏幕，将该图片用PS裁剪保存为
images/1.png插入。
（6）在互联网上下载图片并用PS工具处理每张图片，使其大小形状符合要求。（7）插入apDiv4，作为网页背景界面，其css样式与apDiv1大致相同。（8）在apDiv4中插入apDiv5，在apDiv5插入images/3.png，使adDiv5大小与图片相同。以apDiv5为例，调整left: 710px;top: 371px；使位置合适。并将图片链接到“中国天气网”。html代码如下：
<div id="apDiv5"><a
href="www.weather/weather/101120201.shtml"><img
src="images/3.png" width="248" height="120" /></a></div>
（9）按上述方式插入apDiv2，apDiv6-apDiv29。并设置超链接。
青岛网站制作公司效果如图所示
（10）在互联网上下载了搜索框和焦点图片滚动切换插件标题和图片切换滚动JavaScript代码，经过我的努力，成功实现了图片滚动切换。但因水平有限，搜索框的所有功能尚不能完美实现。
（11）在apDiv3中插入行为，使之实现打开网页后apDiv3的渐隐和apDiv4、apDiv29、apDiv31的渐显。Html代码如下：
<div id="apDiv3" onclick="MM_effectAppearFade('apDiv3', 2000, 100, 0, false);MM_effectAppearFade('apDiv4', 4000, 0, 100,
false);MM_effectAppearFade('apDiv29', 4000, 0, 100,
false);MM_effectAppearFade('apDiv31', 4000, 0, 100, false)"></div>
（12）给主页index添加背景音乐：<bgsound src="1.mp3" loop="-1"> （13）将图片“音乐”设置超链接，使之点此图片可以实现背景音乐的下载。（经本人试验，在IE11下效果为背景音乐的下载，在360安全浏览器下效果为播放背景音乐）
整体网页效果（IE11）：
2.二级站点的制作
由于二级站点的制作过程大致相同，因此以网页“栈桥”和“视频”为例。（1）“栈桥”的制作
①创建html文件：点击菜单栏的“文件”|“新建”打开新建文档对话框，
选择“空白页”|“Html”点“创建”按钮，新建一个html网页。点击保存，选择路径“叶枫1401060221”，文件名“栈桥”。
②在Dreamweaver CS6设计窗口中将标题改为“栈桥”。
③插入apDiv1作为网页背景，css属性值：
#apDiv1 {
position: absolute;
width: 1352px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。