Dreamweaver之网页制作报告

《多媒体技术及应用》

报告

学生姓名：嘎嘎

学号：

专业班级：自动化103班

网页制作报告(目录)

1.设计目的3

1.1 阐述该主题网站的设计意图和创意 3

1.2简单介绍自己的个人网站 3

2.设计思想3

2.1在设计中主要用的技术 3

2.2 网页基本的框架 3

3.网页详细设计分析4

3.1建立布局 4 3.2网页中的图像 5 5

5

6

3.3插入视频和音乐 6 3.4设置图片循环滚动 7

3.5设置链接 7 3.6做个外网搜索栏 8

3.7常用的显示-时间天气 8

3.8建立子网和友情链接 9

3.9文段的处理 9

4.最终效果图9

5、结论总结11

1、设计目的

1.1 阐述该个人网站的设计意图和创意。

本课程的设计目的是通过实践让我们学会利用Dreamweaver cs6开发制作网站，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs6可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网

页设计作品。熟练掌握Photoshop cs5、Dreamweaver cs6等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。

1.2简单介绍自己的个人网站

我本次主要是设计的以“迈克尔·约瑟夫·杰克逊”为主题的网页，针对他的传奇一生及对世界巨大的贡献与巨大的影响力做了介绍。

2、设计思想

2.1在设计中主要用的技术

利用Dreamweaver CS6制作一个关于“Michael Jackson”的网站，利用表格、行为、层和链接等网页设计技术设计页面。

2.2 网页主要的页面

本网站以迈克尔·杰克逊的人生经历为素材，主要讲解了他人生的各个阶段、他取得的巨大成就、他面临的困境、他的处世态度的内容。主网设计的几大亮点：视频和音乐的点播、滚动图片的浏览、百度的在线检索、实时的时间天气、热点的使用、链接的创建、返回顶点等。主网设有8个栏目，图片含有单多个链接。大致结构如下图所示。

形象图、图片链接长=600 高=180 图片滚动栏、鼠标即停、

链接350

时间天气

（更新、滚动、鼠标即

停、联网350

搜索栏：size(80)

视频栏：

长：500

高：376

（迈克尔宣传片、可控开关、默认不自动播放）简历栏：

长：300

高：440

音乐栏：长：500

高：60（开关按钮、循环、默认自动播放）

阶段1：

长：325

高：400

（分段、字体、链接）阶段2：

长：325

高：400

阶段3：

长：325

高：400

阶段4：

长：325

高：400

经典语录栏：长1300

高：300

（分段、字体、链接、子网）成就栏：长1300

高：300

（分段、字体、链接）

自由评价栏：长1300

高：300

（分段、字体、心情评价窗）

广告分享链接栏：长1300

高：50

另有图片背景，尺寸略有偏差。。

3、网页详细设计分析

3.1建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs6是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.进入布局模式，插入布局表格。建立一个大概的布局，主要方法是利用表格的嵌套方式。

2.定义背景风格：使用图片进行设置，代码如下：