网页设计报告

高等教育自学考试通信与信息系统管理专业专科实验报告

考点名称：课程名称：计算机网络与应用

**考号成绩教员签名

实验名称网页设计与制作

实验目的

了解专业网页设计工具Dreamweaver、Fireworks和Flash；了解网页的核心技术

HTML语言。

使用仪器

实验环境

一台多媒体电脑，组建内部局域网，并且接入国际互联网；安装WindowsXP操作

系统，建立IIS效劳器环境，并支持ASP；安装网页三剑客〔Dreamweaver、Flash、

Fireworks〕等网页设计软件。

实验内容

认识网页设计工具Dreamweaver；新建站点和网页；进展的构造设计、站点风格的

选择、层次规划和页面布局；网页的根本组成要素的添加；网页中多媒体的应用；

站点和网页的保存；站点的发布。

实验步骤：

1、确定主题

我的的主旨在于介绍自己，展示自己，包括我的自我介绍、学习、创作和我的班级等内容。

从各个方面全面的介绍我自己。另外，里还应包括我的相册，建立一个展示自我形象的平台。

同时，里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己

的风格，吸引浏览者的眼球。

2、搜集材料

主要在上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、

报纸、光盘、多媒体等，也可以得来更加有说服力的信息。常言道：“巧妇难为无米之炊〞。要

想让自己的有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作就

越容易。然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

3、规划

我的包括5个页面，首页、自我介绍、我的相册、我的班级和给我留言。每一个页面用统

一的背景图片，以保证统一的风格。用自己的名字命名Loge,搭配适宜的元素用Photoshop设计

出独特的站标，然后再仿制出相似的其他子页面站标，整体色调为白色，然后点缀其他不同的

颜色相配，突出主题，但颜色不宜过多，过杂，给人一种杂乱的感觉。版面设计要灵活，根据

各局部内容的不同适当的自由设计。但是每个页面的主元素和位置不能变，比方loge.信息等。

网页布局主要用层和表格，用层定位内容的大体构造，再用表格具体定位。位子的设计也是重

要的一个局部，根据具体内容决定字体风格，一样的风格屡次调用是，用CSS设计一个样式，

以保证随时、准确的调用。另外，为了网页布局的协调，还可以参加flash动态图片，会到达

更好的效果。

4、选择适宜的制作工具

做网页的首先工具当然为Dreamweaver，另外，为了处理网页中的其他元素，还可以使用

Photoshop、GifAnimator等软件。

5、认识网页设计工具Dreamweaver

〔1〕Dreamweaver的启动

单击任务栏上的“开场〞→“程序〞→“Macromedia〞→“MacromediaDreamweaver〞即可启

动网页设计工具软件。

〔2〕窗口组成的认识

6、新建站点

执行“站点〞菜单中的“新建站点〞命令，在弹出的对话框中选择“根本〞标签，在文本

框中分别输入新建站点名称和站点的HTTP地址；再选择“高级〞标签，在分类列表中选择“本

地信息〞，并在右边各文本框中输入站点名称、本地根文件夹、默认图像文件夹、HTTP地址，

这些设置完成后，单击确定按钮，即可完成站点的创立。

7、站点中首页的创立

“文件〞菜单→“新建〞→选择“常规〞选项卡中的根本页→在右边列表中选择“HTML〞，

再单击“创立〞按钮，完成网页文件的新建，然后再通过“修改〞菜单中的“页面属性〞命令

把网页的上、下、左、右边距都设为“0px〞，最后在网页中通过表格进展页面的布局，然后输

入所需要的网页元素。

8、制作网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作时，首先要做的就是

站点的规划，建立一个本地站点，比方说，〞mysite〞然后再建立各个页面时，都应该建立在

本地站点中，在网页制作时所需的各个元素都要进展统一的管理，建立统一的文件夹放同一类

型的文件，我在制作时建立了“image〞文件夹来存放图片，同时，由于“我的相册〞页面中的

信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css样式文件也应统一管理，

做到有条不紊。

9、根据自己的网页风格，在网上搜集适宜的图片，另外网页的页宽一般不超过900像素，以保

证左右不出现滚动条。在设计窗口中插入一个一行一列的表格，表格的间距为0，颜色为黑色，

居中对齐，然后插入背景图片，就做成了网页的背景，网页的设计布局为，中间局部显示网页

最新动态，用层工具定位元素的大致位置，在层中然后插入表格，准确定位图像、文本的位置，

同时考虑色彩搭配和布局构造，合理的配置每一个元素。首先制作的是的banner，站标是网页

中最显眼的局部，因此，站标既要显示出自己的网页主题还要显示出自己的网页风格，在设计

我自己的站标时，我先使用了两个立体图像重叠在一起，设置为黑白色，既突出的主色调，又

给人以凝重的感觉，站标的另一局部是要介绍的主要内容，而我设计的是我自己的，因此，为

“X瑞的主页〞，最后还有一个不能无视的问题，就是站标要显示的域名信息，让浏览者下次来

的时候，有迹可寻，我没有自己的域名，因此，我设计为.liurui.象征性的代表。其他子页面

的有子站标，其大体内容和风格和主页面的一样。另外，为了到达亮眼的效果，我在每个子页

站标上都参加了透明flash,既与主网页一样，又有新意。在页面的右下角擦入一个友情的菜单

栏，一方面为了布局合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航，这里也使

用从来布局，方便灵活。在我的最新动态局部，为了活波页面气氛，可以插入动态的字母效果，

用marquee标签设计具体内容。另外，为了使浏览者可以关注到更多的动态信息，在每一项上

面可以做一个连接，连接到具体信息的页面。在页面的下方是一个logo，放置一个动态flash

广告，也是用层布局，虽然，一般的网页logo和banner都是出现在网页的顶部，但是在我的

页面中，考虑到网页的形状，如果logo放于上面，那么显得页面太杂乱，放于下面那么可以平

衡页面，而且可以填补下页面的空缺。在广告的下面是信息，尽量用简洁的语言和稳重的色彩，

给人留下清新，简练的感觉。

其他子页面的制作和主页面的大体一样，在‘introduce’页面中，我使用了层动画效果，

使用动画帧控制动画重复播放。在页面的下面是一个滚动字幕，用层进展定位，添加背景后再

加上一个一行一列的表格进展文字定位。再用marquee标签控制文字在固定区域内上下滚动。

在“我的相册〞页面里，我是用了图片交换效果，插入四X照片，可以按下按钮自由翻页，自

由浏览，下局部是一段美丽文字欣赏，用一样的色彩布局，明快而又有紧促感，而且使整个页

面色调平衡。第三个子页面是“我的班级〞页面，也使用一样的背景，一样的布局，但是由于

时间仓促，班级信息没有完全收集到，使用弹出信息框说明“网页信息正在搜集中，请大家继

..

.v.

续关注我的！〞最后一个页面是“给我留言〞页面，同样的用层和表格进展布局，使用表单同

用户进展信息交流，网页的左下面是一个flash动态时钟，显示当前时间，给浏览者提供方便。

这就是我的网页设计过程。

最后还要制作各个页面的，把整个网页可怜起来，形成一个统一的整体，方便浏览者进展

各个页面间的跳转。

10、上传测试

网页制作完毕以后，要进展测试，在浏览器上运行自己的，反复测试，以发现设计中的缺

陷。

实验结果及理论分析：

非常感谢教师给了我这次，独立设计，制作网页的时机，通过这次试验，我的收益颇多。

首先，独立的实践了一个完整的设计的全过程，把设计中零散的注意点和要求在自己大脑中形

成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进展

了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，

扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了根底。最

后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实

践，才能学会、学懂、学通技术。

完成实验时间：年月日