当前位置：文档视界 › 基于网站项目工作过程的设计文档(详细的word教程)

基于网站项目工作过程的设计文档(详细的word教程)

案例1：英语等级考试专题学习网站

虽然每个Web站点在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。从国内的大的门户站点如搜狐、新浪到一个微不足道的个人主页，都要以基本相同的步骤来完成。首先是网站前期策划与内容组织（需求分析、风格定位、内容组织），然后效果图设计，网页编辑，动画设计，接下来是技术实现，最后是站点的发布与维护。这几个阶段完整地结合在一起，直到完成整个站点的工作，如图1-1所示。

图1-1网站的制作流程

下面我们结合企业网站的开发工作过程对本项目进行阶段分析与演示。

1.1 英语等级考试专题学习网站前期策划与内容组织

1.1.4网站需求分析

要进行网站的整体设计，用户分析是第一步。众所周知，进行任务和用户分析，以及相关调研的必要性和重要性。用户是计算机资源、软件界面信息的使用者，由于目前计算机系统以及相关的信息技术应用范围很广，其用户范围也遍及各个领域。设计者必须了解各类用户的习惯、技能、知识和经验，以便预测不同类别的用户对网站界面有什么不同的需求与反映，为最终的设计提供依据和参考，使设计出的网站更适合于各类用户的使用。由于用户具有知识、视听能力、智能、记忆能力、可学习性、动机、受训练程度不同，以及又有些用户有易遗忘、易出错等特性，使得对用户的分类、分析和设计变得更加复杂化。另外，为了设计友好而又人性化的界面，也必须考虑各类不同类型用户的人文因素。许多人不愿花费时间来完成这个阶段，因为认为他们没有必要，但是必须把初始计划加入工作过程中，否则到最后当进行到已经无法再做计划的时候，就要遇到巨大的麻烦。在一开始就进行合适的计划和组织是建立一个有效的站点最重要的工作步骤。

英语等级考试专题学习网站旨在教学的改革创新、服务教学，利用网络平台构建开放式学习方式：所有教学资源可在网上浏览和下载，任何学生在任何时候、任何地方都能借助网

络自主学习。

英语等级考试专题学习网站的功能示意图如图1-2所示。

图1-2英语等级考试专题学习网站的功能示意图

1.1.4风格定位

首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不尽相同的，营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。

英语等级考试专题学习网站是高校教育类网站，他的主要用户为青年学生，同时也是信息行业的网站，所以主色采用蓝色为主色调，因为蓝色具有清凉、自由的感觉，使人们容易联想到天空、海洋、科技，通过本站传达个使用的用户以轻松、愉快、舒适的感觉。

1.1.4 规划草图

对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示那些内容。如图1-3所示的是本站的草图。

图1-3英语等级考试专题学习网站的草图 1.1.4 规划站点结构

站点结构将决定如何去引导浏览者在站点中漫游。要结构清晰、易于导航。网站结构就像人的骨骼，构筑起网站的整体框架，虽然表现形式各异，但让人迷失终归不好，尤其是内容丰富的网站更应注意，如何合理地组织自己要发布的信息内容，以便浏览者能够快速、准确地检索到要找的内容，否则它就很难吸引浏览者。

而且，这一步骤还将决定将要使用的命名规则。导航图和命名规则都是建立项目的主干。以后所有的工作都要由此展开。网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数设计者都是未经规划、随意创建子目录。目录结构的好坏对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：

不要将所有文件都存放在根目录下

有人为了方便，将所有文件都放在根目录下。这样造成的不利影响在于：

首先，文件管理混乱。常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，最终影响工作效率。

其次，上传速度慢。服务器一般都会为根目录建立一个文件索引。当所有文件都放在根网站Logo 标志辅助导航模块公告与通知考试指南模拟试题版权信息

课程动画展示考试介绍与动态经验交流阅读训练听力训练完型、改错、翻译、简答写作训练

目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。

● 按栏目内容建立子目录

子目录的建立，首先按主菜单栏目建立。例如：本站点可以根据模块类别分别建立相应的目录，如Flash 、CSS 、Javascript 等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈联系等建立相应目录。其他的次要栏目，类似导航，友情链接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，例如：关于本站、联系我们、站点导航等可以合并放在一个统一目录下。所有程序一般都存放在特定目录中。为了便于维护管理，所有需要下载的内容也最好放在一个目录下。

● 在每个主目录下都建立独立的images 目录

默认的一个站点根目录下都有一个images 目录。这是最方便管理的。而根目录下的images 目录只是用来放首页和一些次要栏目的图片。

● 目录的层次不要太深

目录的层次建议不要超过3层。原因很简单，维护管理方便。

如图1-4为本站的站点结构图。

图1-4网站结构图

1.2 网站页面效果图的设计制作

1.2.2 网页的创意

网页设计是一个具有挑战意味的新设计，在网页时代，也许还应该重复。不要热衷于技术的花样性，而忘记优秀设计和清晰表达的重要性，如图1-5为网站创意图。

图1-5网站创意图

1.2.2设计效果图

效果图制作的原则：先背景，后前景，先上后下，先左后右。

本系统最终的效果图如图1-6所示。

图1-6本系统效果图

制作软件：Photoshop CS各种版本，本实例采用的是Photoshop CS4中文版。

针对以上网页的效果图，采用前面谈的效果图制作的先背景，后前景，先上后下，先左后右的设计原则进行设计。

本效果图设计中用到的主要知识：

?图像的抠取

?辅助线的应用

?图层样式与图层混合模式的应用

?蒙版的应用

下面本图的具体制作步骤如下：

1)打开Photoshop 软件，新建文件命名为“英语等级考试专题学习网”，大小为：1000

*1000，背景色为“00aae2”，执行“视图”-“新建参考线”命令，添加4条垂直

辅助线（依次为30pix，250 pix，610 pix，970 pix），添加2条水平辅助线（依次为20pix，980 pix），然后使用矩形选框工具选中中间区域，将其填充为白色，如图 1-7所示。

图1-7英语等级考试专题学习网辅助线分布

2)打开“图标.jpg”文件，分别将三个图标拖放到文件的右上角，然后在每个图标的

后面分别输入“学院主页、教务频道、联系我们”，调整位置后，如图1-8所示。

图1-8 放入图标后的效果

3)打开“院标.psd”文件,将院标拖放到文档中去，调整其大小，然后添加“全国大学

英语四、六级等级考试专题”和“江苏省大学生英语应用能力A、B级考试专题网”

两行网站名称，文字大小为24pix，如图1-9所示。

图1-9 添加院标与文字的效果

4)选择刚输入的文字图层，点击“图层”面板下方的“添加涂层样式”按钮，文字

增加效果，分别设置“投影”效果，“斜面与浮雕”效果、“渐变叠加”效果、“描边”效果，设置如图1-10所示，最终效果如图1-11所示。

a) “投影”效果设置 b) “渐变叠加”效果设置

c) “斜面与浮雕”效果设置 d) “描边”效果设置

图1-10 添加文字图层效果

图1-11 添加文字图层效果后的文字

5)在“全国大学英语四、六级等级考试专题”和“江苏省大学生英语应用能力A、B

级考试专题网”右方，添加文字“首页精选汇总高分突破考试咨询试题库”与“考试动态在线听力成绩查询考试指南考试论坛”两行文字，效果如图1-12所示。

图1-12 添加导航文字

6)添加新图层，使用矩形选框工具选择矩形，并填充颜色为“54c2e4”，然后打开素

材“笑美人.jpg”图片，将其拖入到文档中，然后调整其大小，点击“添加蒙版图层”按钮，对笑美人图层添加蒙版调整后的效果，如图 1-13所示。。

a) 笑美人图片 b) 笑美人图层的蒙版

c)添加图层的蒙版后的效果

图1-13 添加笑美人

7)打开素材“教学楼.jpg”，使用多边形套索工具将教学楼扣出，如图1-14 所示。

图1-14 扣出教学楼图片

8)复制教学楼到文档中，命名图层为“教学楼”，使用快捷键[Ctl+T]调整图层的大小，

然后点击“添加蒙版图层”按钮，对教学楼图层添加蒙版，调整后的效果如图1-15所示。

图1-15 填加教学楼图片后的效果

9)用文字工具添加“改革创新服务教学”文字，颜色设置为：ffffff，字体大小为

30像素，字体为“方正大黑简体”（素材文件夹有，复制字体到C:\WINDOWS\Fonts 目录即可），如图1-16所示。

图1-16添加“改革创新服务教学”文字

10)在背景层之上新建一层，命名为“虚线布局”，添加水平辅助线7条，分别为

（296pix,334pix,494pix,532pix,692pix,890pix）,然后按住shift键，用“单行选框工具”沿着刚建立的辅助线建立选区，用“单列选框工具”沿着三条垂直的辅助线选取，然后设置前景色为“d7d7d7”，使用快捷键Alt+Delete进行前景色填充，最后将中间多余的线删除，如图1-17所示。

图1-17添加辅助线并绘制布局线条

11)新建一层，命名为”left1”，使用“矩形选框工具”，属性的样式设置分别为：

，绘制矩形选区，颜色填充

为“74c0dd”，才会用同样的方法绘制高为30pix的矩形选区，颜色填充为“e1e1e1”，

使用“文字工具”添加文字“公告通知”，大小为14pix，字体为“宋体”，效果如图1-18所示。

图1-18“公告通知”模块的制作

12)采用上一步同样的方法，绘制宽358pix，高34pix的矩形，然后设置前景色为

“b7e7f7”的浅蓝色，使用“渐变工具”，使用的线性渐变填充矩形框，效果如图1-19所示。

图1-19填充背景渐变色

13)使用“自定义形状工具”，在属性面板中的属性中，点击按钮，形状

选择面板如图1-20中选择形状，设置前景色为“00aae2”，绘制形状，使用“添加图层样式”按钮，给描边，颜色为白色，设置如图1-21所示，填加文字“考试介绍与动态”，打开素材“more.gif”，将其复制到文档中，调整位置，如图1-22所示。

图1-20选择形状图图1-21给形状描边

图1-22制作“考试介绍与动态”模块

14)采用第12步所示的方法制作“考试指南”与“模拟试题”模块，采用第13步所示

的方法制作“听力训练”、“经验交流”、“完型、改错、翻译、简答”、“阅读训练”、“写作训练”等模块，如图1-23所示。

图1-23制作其他模块

15)使用矩形选框工具制作宽939pix，高87pix的选区，然后设置前景色为“00aae2”

的浅蓝色，使用“渐变工具”，使用的线性渐变自下而上填充矩形框，然后填加文字版权信息文字“版权所有淮安信息职业技术学院外语系”、“邮政编码：223003 电话：0517-******** E-mail：lwh@https://www.docsj.com/doc/e91767205.html,”、“地址：淮安市枚乘东路3号技术支持：网络中心”三行文字，打开素材“背景.jpg”图片，将其粘贴进文档中，命名图层为“版权背景”，通过快捷键Ctl+T自由变换功能调整图象大小使其与背景符合，最后设置其图层的“混合模式”为“亮光”，版权信息栏的效果如图1-24所示。

图1-24版权信息模块制作

16)最后给各个栏目添加测试数据，打开素材“小图标.jpg”图片，将其放入“公告通

知”栏目，然后在其后使用文字工具输入“英语四、六级报名火热… 2008-4-8”，将“英语四、六级报名火热…”设置为：宋体、黑色、12pix，将“2008-4-8”设置为：宋体、浅灰色、12pix，最后添加“更多内容”文字，设置为：：宋体、黑色、12pix，与“2008-4-8”文字右对齐，效果如图1-25所示。

图1-25公告信息添加

17)同样的方式，添加其他的测试信息，最终保存网页，效果图如图1-6所示。

1.2.3效果图切片导出网页

网页效果图完成后，就需要进行网页切片，现在介绍两种切片方式；

方法一：选择“切片工具”，在效果图中任意裁切。任何现有切片自动显示在文档窗口中。

注意：

?首先希望大家将预期的切片设计好，然后进行切片；

?为了切片准确，减少误差，在此建议大家尽量放大图片进行切片；

?所有切片都有编号，希望所有的编号能够一目了然。

采用方法一对本图进行切图后的效果如图1-26所示。

图1-26 对网页进行切片后的效果

切片后自上而下，能够很醒目的看到切片的编号。

方法二：从参考线创建切片，添加参考线，然后选择“切片工具”，在该工具的属性栏中点击按钮即可。

注意：从参考线创建切片时，通常需要配合切片合并使用。

切片创建完成后即可进行最后的网页导出，具体步骤如下：

1）执行“文件”-“存储为Web和设备所用格式”命令，在如图1-27所示的面板中点击“存储”按钮。

图1-27存储为Web和设备所用格式面板

2）然后在弹出的“将优化结果另存为”面板中，设置保存类型为“HTML和图像（*.html）”,slice设置为“所有切片”，将文件名命名为“index”即可，点击“保存”按钮，然后使用IE浏览器打开index.html测试，效果如图1-28所示。

图1-28导出后的网页效果

1.3 网页编辑与动画设计

网页编辑主要是将使用切片导出的网页进行编辑使其规范易用，同时为了增加网页效果，进行简单的动画制作。所以在此解决两个问题：网页编辑与动画设计。

1.3.1后期网页编辑

后期网页编辑中主要采取两种方式：

第一种是直接在切片效果图中进行编辑，进行后期处理，这种方法适用于艺术界面型网页，具体的方法是直接在网页中设置超级链接，添加动画等效果，或者将某些切片删除（或设置为背景），然后添加需要的文字。

第二种是以导出的网页为基础，利用Dreamweaver软件进行合理的布局与优化。这种方法通用性强，很多网页都可采用。

针对以上两种方法，“英语等级考试专题学习网站”适合使用第二种方法，现在就采用低二种方法进行详细的构造。

1.3.2表格布局分析

对于本项目，首先大家探讨一下表格的布局方式，如图1-29所示。

a) 网页表格布局大表格整体布局 b) 网页表格分散布局

图1-29 表格布局对比

二者的最终呈现的网页效果是一样的，但是整体布局（图1-29a）会涉及到较多的表格嵌套，同时在下载网页内容时速度相对较慢，表格的分布布局（图1-29b）浏览的速度相对较快。所以通常大家在进行网页设计时尽量采用表格的分布布局（图1-29b）。

1.3.3后期网页编辑

软件要求：

开发使用Dreamweaver CS3版本，同时Dreamweaver2004，Dreamweaver 8.0均可使用。

总体思路：

利用Dreamweaver对导出的网页进行全新的表格布局，自上而下，自左向右布局。

具体步骤：

1)用Dreamweaver新建一个网页文件并保存到导出的“静态网页”文件夹中，命名为

“default.htm”。

2)点击按钮，设置“页面属性”中“网页标题”为“欢迎英语等级考

试专题学习网站！”，背景色为蓝色（# 00aae2），上、下、左、右边距为0像素，设置如图1-30所示。

图1-30 页面属性设置

3)在“静态网页”文件夹中创建“style”子文件夹，用Dreamweaver创建新CSS文

件，并保存CSS文件到该文件夹中，命名为“style.css”，然后书写通用td的样式，网页栏目标题headtitle，以及通用超级链接的样式，代码如下：

td {

C OLOR: #333333;

F ONT-SIZE: 9pt;

LINE-HEIGHT: 160%;

TEXT-DECORATION: none;

WORD-BREAK: break-all

}

.headtitle {

C OLOR: #000000;

F ONT-SIZE: 10pt;

L INE-HEIGHT: 180%;

T EXT-DECORATION: none;

W ORD-BREAK: break-all;

f ont-weight: bold;

}

A:active {

C OLOR: #666666; TEXT-DECORATION: none

}

A:link {

C OLOR: #000000; TEXT-DECORATION: none

}

A:visited {

C OLOR: #333333; TEXT-DECORATION: none

}

A:hover {

C OLOR: #f83800; TEXT-DECORATION: none

}

4)在“CSS样式表”面板，点击附加样式表按钮，点击“浏览”按钮，选择刚创建

的样式表文件“style.css”，点击“确定”按钮即可，如图1-31所示。

图1-30 页面属性设置

5)在“插入”工具栏，点击“插入表格”按钮，添加表格，具体参数如图1-31所示。，

图1-31 插入表格参数

6)设置插入的表格的属性高为20像素（），表格的对齐方式为居

中对齐（）。

7)采用第5步同样的方法插入表格1行2列，设置比表格的背景色为白色（#ffffff），

对齐方式为居中对齐，设置行高为23像素，设置左侧单元格宽为669像素，有单元格为271像素宽，然后在第二个单元格插入“index_05.gif”图片，这样就恢复了效果图中设计的原貌。

注意：为了达到更好的的效果，大家可以将内容充实，同时将index_05.gif图片转换成3个小图标和3段文字。

具体可以插入1行8列的表格，左侧的两个单元格分别放入“离本次英语等级考试还有100天”和“欢迎访问英语等级考试专题学习网！”，在代码视图中，在“欢迎访问英语等级考试专题学习网！”上加入标签即可以完成他的滚动效果，然后将index_05.gif置换成3格小图片和3个导航文字（学院主页、教务在线、联系我们），设置他们三个的超级链接地址分别为（https://www.docsj.com/doc/e91767205.html,/、https://www.docsj.com/doc/e91767205.html,/、mailto：lwh@https://www.docsj.com/doc/e91767205.html,）。

8)采用第5步同样的方法插入表格1行2列，设置比表格的背景色为白色（#ffffff），

对齐方式为居中对齐，设置行高为99像素，设置左侧单元格宽为632像素，点击插入面板中的插入图片按钮，插入图片“ndex_06.gif”，右侧单元格宽为308像素，将这个单元格拆分为两行，第1行行高69像素，第2行行高30像素，最后在第2个单元格插入“index_08.gif”图片，在第一个表格中嵌套1个2行5列的表格，然后分别将“首页、精选汇总、高分突破、考试咨询、试题库”放入第1行的5格单元各中，将“考试动态、在线听力、成绩查询、考试指南、考试论坛”插入第2行的5格单元各中，点击F12键进行预览，效果如图1-32所示。

图1-32 网站标头的预览

9)继续插入单元格1行1列，宽940像素，高153像素，居中对齐，然后插入图片

“index_09.gif”，点击F12键进行预览，效果如图1-33所示。

图1-33 网站标头的预览

10)网站主题的表格的布局可以分为两种形式，如图1-34所示。

a) 3个水平的表格的布局 b) 1个1行2列中嵌套表格的布局

图1-34 网站主题的布局选择

注意：以上两种布局在开发中都是可以使用的，针对这个项目的情况，采用图1-34中b）图比较合适。

11)插入1行2列的表格，居中对齐，背景色为白色（#ffffff），左侧单元格宽220像素，

右侧单元格为720像素，选中这两个单元格然后在属性面板设置垂直对齐方式为顶端对齐（）。

12)鼠标聚焦在表格的左单元格，然后插入新的表格，6行1列，宽220像素，分别插

入图片index_10.gif、index_16.gif 、index_22.gif到1、3、5行，设置2、4、6行的行高为130像素。

13)采用同样的方法，鼠标聚焦在表格的右单元格，6行2列，宽720像素，子表格的

第1列宽为363像素，第2列宽为257像素。第1列，分别插入图片index_11.gif、index_17.gif 、index_23.gif到1、3、5行，设置2、4、6行的行高为130像素，第2列，分别插入图片index_12.gif、index_18.gif 、index_24.gif到1、3、5行。

注意：插入图片以“公告通知”（index_10.gif）为例，他等同于背景图+“公告通知”，图1-35说明所示，同时背景图也需要优化图1-36中的3副图像是可以等同的，在3者之间选择，当然是图片越小越好了。

a) 导出的图片 b) 表格背景图片 c) 表格文字

图1-35 图片与背景图与文字的置换

a) 背景图1 b)背景图2 c)背景图3

图1-36背景图片的优化

14)选择“公告通知”图片index_10.gif，然后，删除该图片，设置该单元格高位40像

素，利用Photoshop软件利用图1-35中a)所示的图片制作图1-36中c)所示的图片命名为index_10bg.gif，设置index_10bg.gif为该单元格的背景图片，最后在单元格中添加文字“公告通知”，在属性面板中设置“公告通知”的样式为“headtitle”

（），利用同样的方法制作“考试指南”和“模拟试题”。15)中间的6格模块，以“考试介绍与动态”为例，置换关系如图1-37所示。

图1-36背景图片的优化

利用index_11.gif图片，将文字摸去，更多图片抠出，保存为more.gif，使用Photoshop 软件制作图1-36中间的背景图像，命名为index_1bg1.gif，转换关系与第15步一样，这

样完成中间6个模块的制作。

16)利用图片index-14.gif取出如图1-37a)所示的图片为“考试介绍与动态”等栏目内容

的背景图片（midleftbg.gif），利用图片index-15.gif取出如图1-37b)所示的图片为“写作训练”等栏目内容的背景图片（midrightbg.gif），按F12键预览，如图1-38所示。

a) 背景图midleftbg.gif(363pix*10pix)

b) 背景图midleftbg.gif(357pix*10pix)

图1-37实现虚线的背景图

图1-38主题模块的制作

17)利用Photoshop将index_28.gif打开，将左边的文字摸去后可得到图1-39保存为

index_28bg.gif。

图1-39版权信息背景图（index_28bg.gif）

18)在网页最后添加表格2行1列，宽940像素，高110像素，第1行高90像素，第2

19)总体预览，调整局部网页效果，例如可以再版权信息上添加1行放置计数器与友情

链接，如图1-40所示，后期网页编辑完成。

图1-40友情链接

1.3.4动画制作

本项目动画制作阶段主要有两种方式：第一：直接制作动画，然后将动画插入到指定的位置。第二：仅制作文字动画，然后插入动画后，设置为透明动画。具体操作如下：方式一：

1)单击“开始”按钮，在“程序”的下一级菜单中选择“SWiSHmax”，出现如图5-1

所示的窗口，即为SWiSHmax的工作界面

图1-41 SWiSHmax的工作界面

2)点击“开始新建一个空电影”按钮，在场景中创建一个电影，在属性中输入动画的

宽为940像素，高为153像素，具体参数如图1-42所示，在网站文件下创建“flash”

文件夹并保存文件动画文件。

3)执行“插入”→“图像”命令，在“打开”对话框中选择“index_09.gif”后点击“打

开”按钮，图片就插入到场景中了，设置电影的变形属性标签，将锚点设置为“左

上”，具体设置如图1-43所示，图像插入的效果如图1-44所示。

图1-42 动画的参数设置界面图图1-43 动画的参数设置界面