《基于Web标准的网页设计与制作》第6章 网站开发的过程.ppt

中国高等院校计算机基础教育课程体系规划教材 唐四薪 编著 清华大学出版社 2009年11月 第六章 网站开发和网页设计的过程 6.1网站开发的过程 与传统的软件开发过程类似，为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计和制作网站。通过使用制作流程确定制作步骤，以确保每一步顺利完成。 好的制作流程能帮助设计者解决策划网站的繁琐性，减小网站开发项目失败的风险，同时又能保证网站的科学性、严谨性。 网站的开发过程 网站的开发过程大致可分为 策划与定义、 设计、 开发、 测试 发布 5个阶段。 6.1.1 基本任务和角色 在网站开发的每一个阶段，都需要相关各方人员的共同合作，包括客户、设计师和编程开发人员等不同角色 6.1.2 网站开发过程的各环节 1. 明确网站定位 2. 收集信息和素材 3. 策划栏目内容 4. 设计页面方案 5. 制作页面 6. 实现后台功能 6. 整合与测试网站 7. 网站维护和推广 6.2 遵循Web标准的网页设计步骤 网页设计是网站开发中耗时最多，也是最为关键的一个环节，下面介绍的是从零开始遵循Web标准的理念设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤 （1）内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。 （2）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高度可读性。 （3）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。 （4）效果图设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。 （5）布局设计：使用HTML和CSS对页面进行布局。 （6）视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。 （7）交互设计：为网页增添交互效果，如鼠标指针经过和点击时的一些特效等。 完整的开发过程案例 6.2.2 内容分析 设计一个网页的第一步是明确这个网页的内容，如网页需要传递给浏览者的信息，各种信息的重要性，各种信息的组织架构等。以“信息与网络中心”首页为例进行说明。 对于这个页面，首先要有明确的网站名称和标志（logo），此外，要使浏览者能方便地了解这个网站所有者的信息，包括指向自身的介绍（“关于我们”）、联系方式等内容的链接。然后再思考制作这个网站的目的是什么，因为这个网站的根本目的是为了对外宣传网络中心这个部门，给全校师生员工提供更便捷的网络和信息化服务，实现数字化校园，信息化教学。那么这些目的就是该网站的定位。 接下来我们可以根据网站的定位确定该网站具有的栏目结构，并把每个第一级栏目的标题作为导航条的导航项。 6.2.3 HTML结构设计 可以开始构建网站的内容结构。因为我们要实现结构和表现相分离，所以现在完全不要管CSS，而是完全从网页的内容出发，根据上面列出的要点，通过HTML搭建出网页的内容结构。 6.2.4 原型设计 在设计任何一个网页的版面布局之前，都应该有一个构思的过程。对网页的版面布局，内容排列进行全面的分析。如果有条件，应该制作出线框（Wireframe）图，线框图通俗地说就是设计草图，这个过程专业上称为“原型设计”。例如，在上节将首页的内容放置在HTML结构代码之后，就可以先画一个如图6-7所示的网页线框图（草图），以后再按照这个草图绘制具体的网页效果图。 6.2.5 网页效果图设计 1. 导航条的设计 2. 右侧圆角框的设计 3. 页脚部分的设计 精心设计的页脚是有很大作用的，不要将页脚想象成一条多出来的“尾巴”，而应该将它看做是一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的内容一般也比较固定，如链接、联系信息及标志等。 6.2.6 布局设计 在这一步中，任务是把各种元素通过CSS布局放到适当的位置，而暂时不涉及对页面元素美化这样细节的因素 1. 整体样式设计 首先对整个页面的共有属性进行一些设置，例如字体、margin、padding等属性都进行初始设置，以保证这些内容在各个浏览器中有相同的表现 2. 页头部分 #header部分的代码中，将position属性设置为relative，目的是使其包含的子元素使用绝对定位时，以页头而不是浏览器窗口为定位基准，然后设定它的宽度width等于网页的宽。 3. 内容部分 在原型线框图中，内容部分为左右两列，下面首先对HTML代码进行改造，然后设置相应的CSS代码，实现左右分栏的要求 4. 页脚部分 为页脚部分增加一个div，并将其id名称设置为“footer” 6.2.7 视觉设计 页面总体的布局设计完成后，就要开始对细节进行设计了，整