Dreamweaver实验报告

成绩 计算机技术综合实验 -网页制作与网站建设专 业： 测绘工程 班 级： 测绘工程1402 学 号： 1401060221 姓 名： 叶枫 教师评语：年 月 日信息技术实验教学中心 1 实验目的与要求1. 了解网页制作的基础知识；2. 了解常用的网页开发技术和网页设计软件；3. 掌握网站开发管理的工作流程；4. 了解HTML语言的结构和语法；5. 掌握Dreamweaver CS5编写网页的使用方法；6. 掌握在网页中插入文本、图像、超链接、多媒体、表格、表单等元素的 方法；7. 以介绍青岛为主题，创建一个小型网站。2 实验环境 1.Windows 7条件下（屏幕分辨率1366768）；2.本地网络（未上传至web服务器），Dreamweaver CS6，Photoshop CC；3. 建议使用IE11以获得最佳浏览体验。3 实验过程网站以介绍青岛为主题，旨在向游客介绍青岛的美食美景及风土人情等，同时也能为青岛人提供本地生活服务。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代码如下：（9） 按上述方式插入apDiv2，apDiv6-apDiv29。并设置超链接。效果如图所示（10） 在互联网上下载了搜索框和焦点图片滚动切换插件标题和图片切换滚动JavaScript代码，经过我的努力，成功实现了图片滚动切换。但因水平有限，搜索框的所有功能尚不能完美实现。（11） 在apDiv3中插入行为，使之实现打开网页后apDiv3的渐隐和apDiv4、apDiv29、apDiv31的渐显。Html代码如下：（12） 给主页index添加背景音乐：（13） 将图片“音乐”设置超链接，使之点此图片可以实现背景音乐的下载。（经本人试验，在IE11下效果为背景音乐的下载，在360安全浏览器下效果为播放背景音乐）整体网页效果（IE11）：2. 二级站点的制作由于二级站点的制作过程大致相同，因此以网页“栈桥”和“视频”为例。（1）“栈桥”的制作创建html文件：点击菜单栏的“文件”|“新建”打开新建文档对话框，选择“空白页”|“Html”点“创建”按钮，新建一个html网页。点击保存，选择路径“叶枫1401060221”,文件名“栈桥”。在Dreamweaver CS6设计窗口中将标题改为“栈桥”。插入apDiv1作为网页背景，css属性值：#apDiv1 position: absolute;width: 1352px;height: 659px;z-index: 1;left: 7px;top: 7px;background-color: #BDD7EF;在apDiv1中插入apDiv2，在apDiv2插入用1.（5）方法制作的图片images/栈桥/栈桥.png，并将之链接回主页。按相同的方式插入apDiv3、apDiv4。css属性值：#apDiv2 position: absolute;width: 200px;height: 115px;z-index: 1;left: 183px;#apDiv3 position: absolute;width: 200px;height: 115px;z-index: 2;left: 75px;top: 190px;#apDiv4 position: absolute;width: 200px;height: 115px;z-index: 3;left: 75px;top: 430px;在apDiv中插入apDiv5。插入文字，以插入div的方式分段。css属性值：#apDiv5 position: absolute;width: 800px;height: 400px;z-index: 4;left: 450px;top: 170px;font-family: 微软雅黑;font-size: 14px; 效果如图（2）“视频”的制作创建html文件：点击菜单栏的“文件”|“新建”打开新建文档对话框，选择“空白页”|“Html”点“创建”按钮，新建一个html网页。点击保存，选择路径“叶枫1401060221”,文件名“视频”。在Dreamweaver CS6设计窗口中将标题改为“流动的城市青岛”。插入apDiv1作为网页背景，css属性值：#apDiv1 position: absolute;width: 1352px;height: 659px;z-index: 1;left: 7px;top: 7px;background-color: #BDD7EF;在apDiv1中插入apDiv2，在apDiv2插入用1.（5）方法制作的图片images/视频.png，并将之链接回主页。css属性值： #apDiv2 position: absolute;width: 200px;height: 115px;z-index: 1;left: 176px;在apDiv1中插入apDiv3，在apDiv3插入“媒体”|“插件”，选择源文件为“流动的城市-青岛2014.mp4”，调整大小。Html代码为： 效果如图 4 实验总结通过创建网站的过程，我了解了网站的基本布局与结构，体会到了创建网站的整个流程，熟悉了Dreaweaver基本的功能，对课上学习的创建网站的方法与技巧有所巩固，同时开拓思路，学习了更多的网站建设方法，增强了网页制作与网站建设