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

案例1：英语等级考试专题学习网站虽然每个Web站点在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。从国内的大的门户站点如搜狐、新浪到一个微不足道的个人主页，都要以基本相同的步骤来完成。首先是网站前期策划与内容组织（需求分析、风格定位、内容组织），然后效果图设计，网页编辑，动画设计，接下来是技术实现，最后是站点的发布与维护。这几个阶段完整地结合在一起，直到完成整个站点的工作，如图1-1所示。前期策划内容组织包括（需求分析、风格定位、内容组织）效果图设计网页编辑与动画设计动态编程或代码融合发布测试（域名空间）网站维护图1-1网站的制作流程下面我们结合企业网站的开发工作过程对本项目进行阶段分析与演示。1.1 英语等级考试专题学习网站前期策划与内容组织1.1.4 网站需求分析要进行网站的整体设计，用户分析是第一步。众所周知，进行任务和用户分析，以及相关调研的必要性和重要性。用户是计算机资源、软件界面信息的使用者，由于目前计算机系统以及相关的信息技术应用范围很广，其用户范围也遍及各个领域。设计者必须了解各类用户的习惯、技能、知识和经验，以便预测不同类别的用户对网站界面有什么不同的需求与反映，为最终的设计提供依据和参考，使设计出的网站更适合于各类用户的使用。由于用户具有知识、视听能力、智能、记忆能力、可学习性、动机、受训练程度不同，以及又有些用户有易遗忘、易出错等特性，使得对用户的分类、分析和设计变得更加复杂化。另外，为了设计友好而又人性化的界面，也必须考虑各类不同类型用户的人文因素。许多人不愿花费时间来完成这个阶段，因为认为他们没有必要，但是必须把初始计划加入工作过程中，否则到最后当进行到已经无法再做计划的时候，就要遇到巨大的麻烦。在一开始就进行合适的计划和组织是建立一个有效的站点最重要的工作步骤。英语等级考试专题学习网站旨在教学的改革创新、服务教学，利用网络平台构建开放式学习方式：所有教学资源可在网上浏览和下载，任何学生在任何时候、任何地方都能借助网络自主学习。英语等级考试专题学习网站的功能示意图如图1-2所示。公告与通知考试动态考试介绍与动态听力训练考试指南模拟试题经验交流单项训练模块友情链接计数器试题库英语等级考试专题学习网站的功能高分突破精选汇总成绩查询考试咨询考试论坛考试词汇网站辅助模块图1-2英语等级考试专题学习网站的功能示意图1.1.4 风格定位首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不尽相同的，营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。英语等级考试专题学习网站是高校教育类网站，他的主要用户为青年学生，同时也是信息行业的网站，所以主色采用蓝色为主色调，因为蓝色具有清凉、自由的感觉，使人们容易联想到天空、海洋、科技，通过本站传达个使用的用户以轻松、愉快、舒适的感觉。1.1.4 规划草图对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示那些内容。如图1-3所示的是本站的草图。网站Logo标志辅助导航模块公告与通知考试指南模拟试题版权信息课程动画展示考试介绍与动态经验交流阅读训练听力训练完型、改错、翻译、简答写作训练图1-3英语等级考试专题学习网站的草图1.1.4 规划站点结构站点结构将决定如何去引导浏览者在站点中漫游。要结构清晰、易于导航。网站结构就像人的骨骼，构筑起网站的整体框架，虽然表现形式各异，但让人迷失终归不好，尤其是内容丰富的网站更应注意，如何合理地组织自己要发布的信息内容，以便浏览者能够快速、准确地检索到要找的内容，否则它就很难吸引浏览者。而且，这一步骤还将决定将要使用的命名规则。导航图和命名规则都是建立项目的主干。以后所有的工作都要由此展开。网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数设计者都是未经规划、随意创建子目录。目录结构的好坏对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：l 不要将所有文件都存放在根目录下有人为了方便，将所有文件都放在根目录下。这样造成的不利影响在于：首先，文件管理混乱。常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，最终影响工作效率。其次，上传速度慢。服务器一般都会为根目录建立一个文件索引。当所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。l 按栏目内容建立子目录子目录的建立，首先按主菜单栏目建立。例如：本站点可以根据模块类别分别建立相应的目录，如Flash、CSS、Javascript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈联系等建立相应目录。其他的次要栏目，类似导航，友情链接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，例如：关于本站、联系我们、站点导航等可以合并放在一个统一目录下。所有程序一般都存放在特定目录中。为了便于维护管理，所有需要下载的内容也最好放在一个目录下。l 在每个主目录下都建立独立的images目录默认的一个站点根目录下都有一个images目录。这是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。l 目录的层次不要太深目录的层次建议不要超过3层。原因很简单，维护管理方便。如图1-4为本站的站点结构图。网站根目录ImagesFlashStyleAdmin其他网页图1-4网站结构图1.2 网站页面效果图的设计制作1.2.2 网页的创意网页设计是一个具有挑战意味的新设计，在网页时代，也许还应该重复。不要热衷于技术的花样性，而忘记优秀设计和清晰表达的重要性，如图1-5为网站创意图。图1-5网站创意图1.2.2设计效果图效果图制作的原则：先背景，后前景，先上后下，先左后右。本系统最终的效果图如图1-6所示。图1-6本系统效果图制作软件：Photoshop CS各种版本，本实例采用的是Photoshop CS4中文版。针对以上网页的效果图，采用前面谈的效果图制作的先背景，后前景，先上后下，先左后右的设计原则进行设计。本效果图设计中用到的主要知识：n 图像的抠取n 辅助线的应用n 图层样式与图层混合模式的应用n 蒙版的应用下面本图的具体制作步骤如下：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:WINDOWSFonts目录即可），如图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 电话E-mail：”、“ 地址：淮安市枚乘东路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效果图切片导出网页网页效果图完成后，就需要进行网页切片，现在介绍两种切片方式；方法一：选择“切片工具”，在效果图中任意裁切 。任何现有切片自动显示在文档窗口中。注意：n 首先希望大家将预期的切片设计好，然后进行切片；n 为了切片准确，减少误差，在此建议大家尽量放大图片进行切片；n 所有切片都有编号，希望所有的编号能够一目了然。采用方法一对本图进行切图后的效果如图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 COLOR: #333333; FONT-SIZE: 9pt; LINE-HEIGHT: 160%; TEXT-DECORATION: none; WORD-BREAK: break-all.headtitle COLOR: #000000;FONT-SIZE: 10pt;LINE-HEIGHT: 180%;TEXT-DECORATION: none;WORD-BREAK: break-all;font-weight: bold;A:active COLOR: #666666; TEXT-DECORATION: noneA:link COLOR: #000000; TEXT-DECORATION: noneA:visited COLOR: #333333; TEXT-DECORATION: noneA:hover COLOR: #f83800; TEXT-DECORATION: none4) 在“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个导航文字（学院主页、教务在线、联系我们），设置他们三个的超级链接地址分别为（/、/、mailto：）。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行高20像素，设置index_28bg.gif为第1行的背景图片，然后，在第1行中输入“版权所有 淮安信息职业技术学院外语系”、“邮政编码：223003 电话E-mail：”、“ 地址：淮安市枚乘东路3号技术支持：网络中心”3行文字。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 动画的参数设置界面图1-44 插入图片后的效果4) 点击工具栏中的按钮（执行“插入”“文本”命令），然后在文本输入区中输入“改革创新 服务教学”等字，调整文字的位置，如图1-45所示。文本输入区域文本属性设置图1-45 在“文本”属性中设置文本5) 在场景中选中“改革创新”文字对象，执行“添加脚本”“核心效果”“变形”命令，如图1-46所示。 图1-46 执行“添加效果”命令6) 在控制栏中点击“播放”按钮测试一下动画效果，发现文字动画消失时过于突然，所以，点击【停止】按钮停止动画，用鼠标在“时间线”调板上的第50帧上点击右键执行“渐近” “淡出”命令，再次在控制栏中点击【播放】 按钮测试一下动画效果，操作如图1-47所示，采用同样的方法制作添加“服务教学”文字。图1-47 执行“渐进淡出”命令7) 执行“文件”“导出”“swf”命令，即可弹出“导出为swf”对话框，选择路径，输入文件名即可保存。8) 使用flash播放器预览动画，预览效果如图1-48所示。图1-48 动画预览效果方式二：方式二的制作与方式一的不同之处在于，可以不加载背景图片，或者在方式一制作最后删除图片，当然这个动画的大小适中就可以了，例如宽460pix，效果如图1-49所示。图1-49 动画预览效果1.3.5动画的使用根据前一节制作的动画，方式一制作的“dh.swf”使用方式很简单，具体方法就是。1） 打开上一节制作的网页“default.htm”，然后删除图片“index_09.gif”。2） 执行“插入”-“媒体”-“flash”命令，然后选择“flash”文件夹下的“dh.swf”动画，预览动画如图1-50所示。注意：也可以使用“插入”工具栏中的“插入媒体”按钮，选择“flash”文件夹下的“dh.swf”动画即可。图1-50 插入动画效果根据上一节制作的简单的文字动画dh2.swf，在网页中的使用方式为:：1) 启动Dreamweaver软件，打开“default.htm”页，然后删除图片“index_09.gif”，设置图片“index_09.gif”所在的单元格的大小为940pix*153pix，然后将图片“index_09.gif”设置为单元格的背景，这也工作仅仅是将图片由前台放到了背景，在视觉上没有任何变化。2) 鼠标在表格中点击一下，然后执行“插入”“媒体”“Flash”命令，在弹出的“选择文件”对话框中选择“dh2.swf”（方式二制作的动画）动画。3) 选择动画在“属性”面板中点击“参数”按钮，设置“参数”选项为wmode，值为transparent，具体如图1-51所示。图1-51 动画参数设置4) 保存网页，执行“文件”“保存”命令，执行“文件”“在浏览器中预览”“iexplore”命令（快捷键F12）预览网页如图1-52所示。图1-52 添加动画后的效果1.4 代码融合动态网站从功能上简单可以分成前台静态模块和后台动态模块。前面制作的效果图与网页编辑以及动画制作简单可以理解为静态模块，而后台模块主要采用两种方式进行解决：方式一：下载免费的网站管理平台，然后与前台整合，称之为代码融合。方式二：所有功能完全自主开发，根据客户的要求定制，逐一实现功能。以实两种方式各有利弊，方式一使用与初期网页设计的初学者，能够满足大多数通用网站，使用方法简单，但是不能随心所欲的实现通用以外的功能：方式二完全开发，对初学者要求较高，要求能够编写程序，属于网站开发的高级阶段，能够随心所欲实现各种功能。本节在此通过这个项目跟大家探讨一下方式一：代码融合。1.4.1搜索网站管理平台搜索网站管理平台可以打开百度网站，然后搜索“网站管理平台”即可以得到很多能够使用的网站管理平台。在此我们采用“讯时网站管理平台”。下载的具体方法是：1) 在IE浏览器地址栏中输入讯时网的网址：/，在“讯时程序”栏目（如图1-52所示）中点击“讯时网站管理系统”进入子页，子页如图1-54所示。图1-53 “讯时程序”栏目图1-54 “讯时网站管理系统3.5”下载页面在下页面中，讯时网对“讯时网站管理系统3.5”功能介绍与声明如下：1、本新闻系统永久免费，绝不过期！2、本新闻系统采用ASP+ACCESS数据库，对一般服务器空间都支持良好。3、框架(iframe)和JS两种调用新闻和图片新闻，以及图片新闻的自定义横排和竖排。4、强大的后台文章编辑器的功能。可方便地用拖动的方式进行图文混排、图片远程上传、上传图片显示效果处理等操作，以及从word中粘贴功能，能全部清除word排版格式多余代码。5、自由编辑（HTML）栏目模版，可设置多个模版。6、可自由增删修改栏目以及设置此栏目模版7、新闻/图片代码调用在后台生成。8、三级栏目生成和管理。可调用一级栏目下面的所有二级栏目，也可以调用单独的二级栏目。9、可增加多个低权限的录入员。增加新闻时会记录新闻的增加录入员是谁。10、新闻自由设置固顶或推荐，自由更改新闻标题的颜色，可独立设置某条新闻的URL转向。11、新闻评论功能，可在后台自由查看评论、相关新闻、IP信息和删除。12、数据库的压缩、备份和恢复。13、网友可以投稿，由最高管理员在后台审查，可控制是否使用HTML编辑器。14、投票、留言、网站公告功能的支持! 为大家满足整站的融合一体化的管理。15、可进行IP地址阻止设置，防止恶意人员破坏。16、支持RSS读取新闻。17、支持管理网站友情链接和友情链接的申请审核功能。2) 在图1-54中的“讯时网站管理系统3.5”页面中点击“本地下载”（如图1-55所示）下载“讯时网站管理系统3.5”程序。图1-55 “讯时网站管理系统3.5”下载链接1.4.2网站管理平台与静态页面的整合下载后的系统是一个压缩包，不能够直接使用，所以必须进行解压，同时部分图片也需要修改。具体步骤如下：1) 首先创建文件夹“英语等级考试专题学习网站”，然后将前面做好的静态页面default.htm和flash、images、style文件夹拷贝到“英语等级考试专题学习网站”文件夹中，将下载的讯时网站管理系统“3.5News3.5.rar”也拷贝至“英语等级考试专题学习网站”文件夹中，如图1-56所示。图1-56 “讯时网站管理系统3.5”文件合并2) 将“英语等级考试专题学习网站”文件夹中的讯时网站管理系统“News3.5.rar”压缩包进行解压缩至“英语等级考试专题学习网站”，同时删除“News3.5.raa.”文件，如图1-57所示。图1-57 “讯时网站管理系统3.5”解压后与网页的整合1.4.3 IIS的安装与配置要使用讯时网站管理系统创建动态网页，首先要从硬件和软件方面配置好运行环境。在硬件方面，必须安装网卡，必须安装TCP/IP协议、服务器软件以及浏览器软件。软件应当在安装服务器软件IIS，在Windows平台上安装IIS作为服务器软件；在Windows XP平台上安装IIS5.1作为服务器软件。在此首先介绍如何在Windows XP中安装IIS5.0。安装与配置IIS步骤如下：1) 执行“开始” “设置”“控制面板”命令。2) 在“控制面板”窗口中，点击“添加或删除程序”按钮。3) 在如图1-58所示的“添加/删除程序”窗口中，点击“添加/删除Windows组件”按钮。 图1-58 “添加/删除程序”窗口 图1-59 “Windows组件向导”对话框4) 在如图1-59所示的“Windows组件向导”对话框中，选择“Internet信息服务(IIS) ” 组件，然后单击“下一步”按钮，直到安装完成为止。5) 打开“控制面板”中的“管理工具”，双击“Internet 服务管理器”，在“Internet 服务管理器”中右击默认网站，然后从快捷菜单中选择“新建”子菜单，再选择“虚拟目录”选项，如图1-60所示。图1-60 创建新“虚拟目录”6) 单击“下一步”按钮，输入站点说明，如图1-61所示，输入站点别名wyks。图1-61 虚拟目录别名7) 单击“下一步”按钮，输入主目录的路径，如图1-62所示。图1-62 虚拟目录路径8) 单击“下一步”按钮，设置站点的访问权限，如图1-63所示。图1-63 虚拟目录权限9) 单击“下一步”按钮，然后单击“完成”按钮。1.4.4 程序调试现在开始调试程序，具体步骤如下：1) 打开IIS，鼠标选中刚刚创建的虚拟目录“wyks”，如图1-64所示，然后鼠标打开图1-64中右侧的“admin”文件夹，选中“login.asp”文件，然后右键执行“浏览”命令，如图1-65所示，预览效果如图1-66所示。 图1-64 虚拟目录窗口 图1-65 执行浏览命令图1-66 “浏览”命令执行后的效果2) 查找“admin”文件夹中的“软件说明.htm”文件，并打开这个文件，在文件的最后一行是“后台管理用户名和密码默认是 admin”，所以在图1-66中用户名、秘密都输入“admin”，输入验证码后，点击“登录”按钮即可进入系统，后台系统的主界面如图1-67所示。图1-67 后台主界面3) 首先，完成栏目的设置，点击图1-67中左侧菜单中的“栏目”导航，然后看到如图1-68所示的界面。图1-68 栏目添加主界面4) 在图1-68中首先删除原有的 “国内新闻”模块， 依次添加 “公告通知” 、“考试动态”、“ 考试介绍”、“ 听力训练”、“精选汇总”、“听力训练”、“考试指南”、“模拟试题”、“单项训练”、“试题库”、“考试词汇” 、“友情链接”等，添加完成后如图1-69所示。图1-69 添加栏目后的效果5) 图1-69中能够明显的看到再添加的栏目中的“模板管理”有 “模板不正确”的说明，所以在此点击“公告通知”的“操作”栏中的“模板”修改模板，之后会进入模板修改页面，如图1-70所示，点击“请选择模板”下拉框，选择“一般简单模板”即可完成了“公告通知”模块的模板修改，采用同样的方法修改“考试动态”、“ 考试介绍”、“ 听力训练”、“精选汇总”、“听力训练”、“考试指南”、“模拟试题”、“单项训练”、“试题库”、“考试词汇” 、“友情链接”等模块的模板。图1-70 模板修改6) 现在添加一条“公告通知”，具体方法是：点击执行“新闻添加”命令，然后添加新闻信息标题“英语四、六级报名火热进行中”，栏目选择“公告通知”，新闻内容填写：“时间：10月1日10月20日，地点： J1楼外语系422办公室、请同学们互相通知”，如图1-71所示，然后显示保存成功。图1-71 添加新闻内容7) 点击“新闻修改”，然后显示如图1-72所示的新闻内容，因为我们仅添加了一条信息，所以本页仅仅显示了一条信息，鼠标点击新闻标题“(3)英语四、六级报名火(1) ”后显示新闻内容页，如图1-73所示。图1-72新闻内容修改页图1-73新闻内容信息8) 现在新闻内容已经能够添加了，现在大家开始调用新闻信息，鼠标点击“代码调用”，之后页面进入如图1-74所示的页面，鼠标点击“请选择栏目”下拉框，选择“公告通知”选项，然后显示代码调用“公告通知”栏目的文本信息，包括文字说明，以调用“公告通知” 的方法。图1-74 代码调用页本调用分为三种方式：框架：JS调用：头条新闻调用部分代码参数的描述：lm2 或 lm 栏目的ID，一般不用改动它。如果lm2=0，那么显示所有栏目的新闻。hot=0是否按新闻的点击数量排序，热点新闻。0为普通排序，1为按点击次数排序。tj=0 显示推荐新闻，0不显示，1为显示推荐新闻。t=0是否在标题后面显示新闻的添加修改时间,如果等于0不显示，1/2/3/4种模式显示week=0是否在标题后面显示新闻的添加星期.0不显示，1显示。font=9设置标题的字号，默认是9，可以设置为10.5或者12。line=12设置标题的行间距，默认是12，可以自行设置，数字越大，行距越大。lmname=0是否显示栏目名称 0不显示1为显示n=30每个标题显示的字数。默认是30个字符,(1个汉字是2个字符)list=10 显示多少条标题，默认是10条标题more=1是否显示“更多内容”，0不显示1为显示2为在框内显示分页。hit=0是否在标题后显示点击数，0不显示有hit=1和hit=2两种模式open=1是否新开窗口浏览新闻内容，0不新开1为新开icon=1自定义在标题前显示图标，0不显示1显示默认(1) 可自定义图片(如:icon=/./images/123.gif)new=0当天的最新新闻是否显示一个动画图片 如果new=1 就显示。new=0就不显示。bg=ffffff新闻调用窗口的背景颜色，默认是白色(ffffff)，切记不要加#。zz=0新闻标题后面不显示来源作者，zz=1显示。hit=0在新闻标题后面显示此条新闻的阅读数。hit=1时显示。pls=0在新闻标题后面显示此条新闻的评论数。pls=1时显示。titleface头条调用新闻有效，标题的字体，titleface=黑体titlesize头条调用新闻有效，标题的字型大小，titlesize=16，即16pt。titlen头条调用新闻有效，标题显示字数。titlebold 头条调用新闻有效，标题是否加粗，titlebold=700加粗，titlebold=100不加粗。titlecolor头条调用新闻有效，标题的颜色。以上三种方式根据情况不同调用不同的代码即可。9) 使用Dramweaver打开