网页设计实验报告文档格式.docx

网页设计实验报告文档格式.docx

《网页设计实验报告文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计实验报告文档格式.docx（9页珍藏版）》请在冰豆网上搜索。

一、实验目的：

网络在现今生活中的重要地位已经不言而喻。

本实验通过学习使用DreamWeaver8、Flash设计网页，来达到熟知一个网站的网页整个设计过程是怎样进行的，并自行设计一个具有鲜明主题页。

通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshopcs3、Dreamweavercs3等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

学会和团队配合，逐渐培养做一个完整项目的能力。

二、实验环境

WindowsXP、DreamWeaver8、Flash等工具，进行图像的处理、美化，还有一些flash的制作。

三、实验原理及方案

DreamWeaver8是一种所见即所得的设计工具，所以在设计过程中基本上不需要亲自动手设计代码，但要设计一个满意的网页仍要遵循一定的步骤：

1、确定网站主题、风格和布局。

2、搜集相关素材，比如音频、视频、图片等。

3、根据网站主题，在网站中放入相关元素和内容。

4、网站当前以及日后可能出现的功能需求。

5、客户对网站的性能（如访问速度）的要求和可靠性的要求。

6、确定网站维护的要求。

7、网站的实际运行环境。

8、网站页面总体风格以及美工效果。

9、主页面和次级页面数量等。

10、内容管理及录入任务的分配。

11、各种页面特殊效果及其数量（如flash等）。

12、项目完成时间及进度。

四、技术分析

（一）建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。

Dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。

特别是其在布局方面的出色表现，更受青睐。

大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

1.点击“ALT+F6”键，进入布局模式，插入布局表格。

建立一个大概的布局。

2.使用背景图片：

选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。

（二）网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：

一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；

二是能更清楚地表达细节内容。

正是由于这些优点，所以在进行网页设计时图像很受欢迎。

如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。

图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。

（1）在网页中插入图像

利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。

在网页中加入图像的操作非常简单：

1.新建一个空白网页，把光标定位在网页的开始位置。

2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。

4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。

在网页中插入图像后我们就可以对图像的各种属性进行设置了。

（2）图像的各种属性设置

1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.

2.打开“外观”选项卡。

（1）设定图像边框粗细：

在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

（2）设置图像环绕方式：

一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。

比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。

在网页中图像的环绕方式有两种：

①左环绕：

图像在左边，文本在图像的右边进行环绕。

②右环绕：

图像在右边，文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。

（3）编辑图像大小：

在Dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。

调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。

（4）设置图像缩放比例：

网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×

600的窗口，还是1024×

768的窗口，网页都要能正常的显示。

设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。

设置图像缩放比例的步骤如下：

1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.

2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。

外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；

垂直间距指图像与周围元素在垂直方向的间距。

（3）怎样编辑网页中的图像

在Dreamweavercs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：

图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。

另外，为了使图片更符合要求，我们还在photoshopcs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。

（4）使用背景图像

使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。

这样做可以使制作的网页更美观好看。

网页中使用背景图像的具体步骤如下：

1.新建一个空白网页。

2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.

3.开“背景”选项卡。

4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。

5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。

6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。

这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。

（5）插入flash动画

关于Flash视频使用Dreamweaver中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。

该命令可以插入Flash组件；

当您在浏览器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。

（6）设置鼠标经过图片，进行图片交互

再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。

（7）设置链接

选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。

我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。

（8）设置图片滚动

使图片在页面连续滚动出现

四、实验步骤

1、确定网页的主题和风格，收集各种可能需要的设计素材（图片，音乐，动画）

2、规划网站，对网页的整体框架和结构进行设计，确定整个网站的内容，明确自己的每张网页需要满足的功能和内容；

注：

本网站名婉子俱乐部，是一个交友网站，婉子俱乐部主要是为了交朋友。

在这里，你可以找到真心朋友。

在这里你可随心所欲，不用担心别人会把你的心里话泄露出去，这里的每一个成员都会成为你最真心的倾听者！

赶快加入吧！

3、Windows环境下，运行DreamWeaver8。

4、设计每张子页，本网页下设俱乐部介绍、个人主页等子页

5、具体制作每张子页，选择合适的图片、音乐作为子页的内容，在向子页中添加文字，超链接的内容；

6、保存每张子页；

7、完毕

五、[设计步骤及设计效果]

一、创建本地站点

首先在本地机上建立一个文件夹，命名为“0940501034刘小细”，并且将素材文件放在站点中。

单击菜单栏中的【站点】-【站点名称】为“婉子俱乐部”。

二、制作首页

1.新建HTML文档，并将文件保存在本地站点根文件下，命名为“index。

html”。

2.点击

，选择背景图像

3.插入一行一列的表格，【边框粗细】、【单元格边距】、【单元格间距】均设置为0.插入图片

4.插入flash图片二

5.插入导航条

6再插入一个表格，【边框粗细】、【单元格边距】、【单元格间距】均设置为0.背景颜色值设置为#FFFF99，插入相应图片，

7.制作友情链接

8.再插入一个表格，【边框粗细】、【单元格边距】、【单元格间距】均设置为0.背景颜色设置为黄色，插入相应图片如上2

三、制作二级页面

1.制作俱乐部环境页面

点击

，设置背景颜色值为#B1CFDA，插入一行一列的表格，【边框粗细】、【单元格边距】、【单元格间距】均设置为0.。

将单元格居中，并插入图片如上

插入flash，如图

插入导航条

再插入一个表格，【边框粗细】、【单元格边距】、【单元格间距】均设置为0，居中对齐.表格布局如图所示

2、制作俱乐部章程页面，具体步骤和环境页面的步骤差不多，效果图如下

留言本页面的效果图

下面的是个人主页的效果图

六、[改进意见]

由于是初学，所以没能够很好的建立站点，导致站点里的内容比较混乱，没有将图片、文字、Flash、声音等进行分别归类。

网页内容比较单一，没能够进行很好的颜色搭配。

七、[实习心得]

1、做网页，在确定好网站的内容后，关键在于设计网站的风格和给网站布局！

2、网页是计算机技术和美学知识的结合，这不仅要求制作员要熟悉网页制作软件环境，而且还要有一定的美术功底！

3．做什么事情都要投入，只有投入进去了才可以发现美！