网页设计报告

电子商务2班201341440225杨杰网页设计报告

电子商务2班

姓名：杨杰

2016.06.10

目录

1.设计目的 (1)

2.设计思想 (2)

2.1网站整体结构规划思想 (4)

2.2 主页设计思想 (5)

2.3子页的设计思想 (6)

3.网页详细设计分析 (8)

4.结论 (10)

1.设计目的

阐述该个人网站的设计意图和创意，简单介绍自己的个人网站。

2.设计思想

阐述网站的整体设计思想，包括：

2.1网站整体结构规划思想

要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。

2.2 主页设计思想

要求对主页的布局思路进行阐述和分析。

2.3子页的设计思想

要求对子页的设计以及网页对象的选取思路进行阐述和分析。

3网页详细设计分析

要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。

4结论

对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。

一、设计目的

本课程的设计目的是通过实践使同学们经历Dreamweaver cs5开发的全过程

和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs5可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs6、Dreamweaver cs5等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。

配置虚拟机环境

1.在虚拟机上面模拟一个局域网环境

（1）在虚拟机上面配置安装windows xp sp3 professional(Client )和 windows server 2003 standard Edition (Server)两个操作系统的虚拟主机。

虚拟机硬件配置如下：

Ⅰ.windows xp sp3 professional （在配置过程中可以选择默认配置）

Ⅱ.windows server 2003 standard Edition

由于本机要同时安装DNS和其他服务器，所以要安装两张以上的网卡，这里我们添加三张网卡，第三张作为www、ftp、pop3、smtp服务器的硬件端口，添加方法如下：在默认状态下设置好虚拟机后，在操作系统关闭（此时可以不装操作系统）的情况下添加网卡。下面用箭头标明鼠标的单击流程，除此之外全部点“下一步”

(2) 虚拟机搭建局域网：

在此我们将两个虚拟主机构建成局域网。为了不受实际主机私有网的干扰，将各个虚拟主机的网卡设置如下：

双击每一个，在出现以下的对话框中网络连接方式选择

“桥接”，实际主机网卡必须是连通的。

2．为虚拟主机安装对应的操作系统

注意安装OS前一定要格式化硬盘，并做适当的分区；

特别的对于安装 windows server 2003的虚拟硬盘要格式化为NTFS格式，建议分两个区；

OS安装过程不做赘述。

3．虚拟机局域网环境的测试

分别为各个网卡分配静态的IP。

各个网卡之间ping IP,以验证接通；

6.4 服务器规划与配置（请描述各服务配置过程，附图最佳）

DNS服务器配置

安装好DNS组件

二、设计思想

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

本网站以个人空间为素材，主要讲解了与空间相关的内容。具体结构如图

所示。

三、网页详细设计分析

(一)建立布局

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

1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。

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

（二）网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape 支持的、最常用的图像格式是GIF、JPEG和BMP。

（1）在网页中插入图像

利用Dreamweaver cs5可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：

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

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

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

4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。

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