第6章网站开发的过程1

1、Web标准网页设计与标准网页设计与ASP第六章 网站开发和网页设计的过程 6.1网站开发的过程网站开发的过程v与传统的软件开发过程类似，为了加快网站建设与传统的软件开发过程类似，为了加快网站建设的速度和减少失误，应该采用一定的制作流程来的速度和减少失误，应该采用一定的制作流程来策划、设计和制作网站。通过使用制作流程确定策划、设计和制作网站。通过使用制作流程确定制作步骤，以确保每一步顺利完成。制作步骤，以确保每一步顺利完成。v好的制作流程能帮助设计者解决策划网站的繁琐好的制作流程能帮助设计者解决策划网站的繁琐性，减小网站开发项目失败的风险，同时又能保性，减小网站开发项目失败的风险，同时又能保证网

2、站的科学性、严谨性。证网站的科学性、严谨性。网站的开发过程v网站的开发过程大致可分为网站的开发过程大致可分为v策划与定义、策划与定义、v设计、设计、v开发、开发、v测试测试v发布发布 5个阶段。个阶段。 明确网站定位收集信息和素材设计页面方案制作各个页面实现后台功能整合与测试网站网站维护和推广策划栏目内容前期中期后期6.1.1 基本任务和角色基本任务和角色v在网站开发的每一个阶段，都需要相关各方人员在网站开发的每一个阶段，都需要相关各方人员的共同合作，包括客户、设计师和编程开发人员的共同合作，包括客户、设计师和编程开发人员等不同角色等不同角色 策划与分析策划与分析 设设 计计开开 发发测测 试

3、试发发 布布客户客户设计师设计师设计师设计师设计师设计师程序开发员程序开发员客户客户设计师设计师程序开发员程序开发员设计师设计师程序开发员程序开发员6.1.2 网站开发过程的各环节网站开发过程的各环节v 1. 明确网站定位明确网站定位v 2. 收集信息和素材收集信息和素材v 3. 策划栏目内容策划栏目内容v 4. 设计页面方案设计页面方案v 5. 制作页面制作页面v 6. 实现后台功能实现后台功能v 6. 整合与测试网站整合与测试网站v 7. 网站维护和推广网站维护和推广6.2 遵循遵循Web标准的网页设计步骤标准的网页设计步骤v 网页设计是网站开发中耗时最多，也是最为关键的一个环网页设计是网

4、站开发中耗时最多，也是最为关键的一个环节，下面介绍的是从零开始遵循节，下面介绍的是从零开始遵循Web标准的理念设计一个标准的理念设计一个页面的过程，我们可以把一个页面的完整设计过程分为页面的过程，我们可以把一个页面的完整设计过程分为7个步骤个步骤v （1）内容分析：仔细研究需要在网页中的展现的内容，）内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。梳理其中的逻辑关系，分清层次，以及重要程度。v （2）结构设计：根据内容分析的成果，搭建出合理的）结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何结构，保证在没有任何CSS样式的情况下，在

5、浏览样式的情况下，在浏览器保持高度可读性。器保持高度可读性。v （3）原型设计：根据网页的结构，绘制出原型线框图，）原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。与客户交流的最佳媒介。v （4）效果图设计：在确定的原型线框图基础上，使用美）效果图设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。工软件，设计出具有良好视觉效果的页面设计方法。v （5）布局设计：使用）布局设计：使用HTML和和CSS对页面进行布局。对页面进行布局。v （6）视觉

6、设计：使用）视觉设计：使用CSS并配合美工设计元素，完成由并配合美工设计元素，完成由设计方法到网页的转化。设计方法到网页的转化。v （7）交互设计：为网页增添交互效果，如鼠标指针经过）交互设计：为网页增添交互效果，如鼠标指针经过和点击时的一些特效等。和点击时的一些特效等。完整的开发过程案例6.2.2 内容分析内容分析v 设计一个网页的第一步是设计一个网页的第一步是明确这个网页的内容明确这个网页的内容，如网页需要传，如网页需要传递给浏览者的信息，各种信息的重要性，各种信息的组织架构递给浏览者的信息，各种信息的重要性，各种信息的组织架构等。以等。以“武汉大学珞珈学院武汉大学珞珈学院”首页为例进行说

7、明。首页为例进行说明。v 对于这个页面，首先要有明确的网站名称和标志（对于这个页面，首先要有明确的网站名称和标志（logo），此），此外，要使浏览者能方便地了解这个网站所有者的信息，包括指外，要使浏览者能方便地了解这个网站所有者的信息，包括指向自身的介绍（向自身的介绍（“学校概况学校概况”）、院系概况等内容的链接。然）、院系概况等内容的链接。然后再思考制作这个网站的目的是什么，这些目的就是该网站的后再思考制作这个网站的目的是什么，这些目的就是该网站的定位。定位。v 接下来我们可以根据网站的定位确定该网站具有的接下来我们可以根据网站的定位确定该网站具有的栏目结构栏目结构，并把每个第一级栏目的标题

8、作为导航条的导航项。并把每个第一级栏目的标题作为导航条的导航项。 6.2.3 HTML结构设计结构设计v可以开始构建网站的内容结构。因为我们要实现可以开始构建网站的内容结构。因为我们要实现结构和表现相分离，所以现在完全不要管结构和表现相分离，所以现在完全不要管CSS，而是完全从网页的内容出发，根据上面列出的要而是完全从网页的内容出发，根据上面列出的要点，通过点，通过HTML搭建出网页的内容结构。搭建出网页的内容结构。 6.2.4 原型设计原型设计v在设计任何一个网页的版面布局之前，都应该有在设计任何一个网页的版面布局之前，都应该有一个构思的过程。对网页的版面布局，内容排列一个构思的过程。对网页

9、的版面布局，内容排列进行全面的分析。如果有条件，应该制作出线框进行全面的分析。如果有条件，应该制作出线框（Wireframe）图，线框图通俗地说就是设计草）图，线框图通俗地说就是设计草图，这个过程专业上称为图，这个过程专业上称为“原型设计原型设计”。例如，。例如，在上节将首页的内容放置在在上节将首页的内容放置在HTML结构代码之后，结构代码之后，就可以先画一个如图就可以先画一个如图6-7所示的网页线框图（草所示的网页线框图（草图），以后再按照这个草图绘制具体的网页效果图），以后再按照这个草图绘制具体的网页效果图。图。 6.2.5 网页效果图设计网页效果图设计v1. 导航条的设计导航条的设计v2

10、. 页脚部分的设计页脚部分的设计v精心设计的页脚是有很大作用的，不要将页脚想精心设计的页脚是有很大作用的，不要将页脚想象成一条多出来的象成一条多出来的“尾巴尾巴”，而应该将它看做是，而应该将它看做是一个支撑点，支撑着上述所有内容的一个区域。一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的内容一般也比较固定，如链接、页脚区域中放置的内容一般也比较固定，如链接、联系信息及标志等。联系信息及标志等。 6.2.6 布局设计布局设计v在这一步中，任务是把各种元素通过在这一步中，任务是把各种元素通过CSS布局放布局放到适当的位置，而暂时不涉及对页面元素美化这到适当的位置，而暂时不涉及对页面元素美

11、化这样细节的因素样细节的因素 v1. 整体样式设计整体样式设计v首先对整个页面的共有属性进行一些设置，例如首先对整个页面的共有属性进行一些设置，例如字体、字体、margin、padding等属性都进行初始设置，等属性都进行初始设置，以保证这些内容在各个浏览器中有相同的表现以保证这些内容在各个浏览器中有相同的表现 v 2. 页头部分页头部分v #header部分的代码中，将部分的代码中，将position属性设置为属性设置为relative，目，目的是使其包含的子元素使用绝对定位时，以页头而不是浏的是使其包含的子元素使用绝对定位时，以页头而不是浏览器窗口为定位基准，然后设定它的宽度览器窗口为定位

12、基准，然后设定它的宽度width等于网页等于网页的宽。的宽。 v 3. 内容部分内容部分v 在原型线框图中，内容部分为左右两列，下面首先对在原型线框图中，内容部分为左右两列，下面首先对HTML代码进行改造，然后设置相应的代码进行改造，然后设置相应的CSS代码，实现左代码，实现左右分栏的要求右分栏的要求 v 4. 页脚部分页脚部分v 为页脚部分增加一个为页脚部分增加一个div，并将其，并将其id名称设置为名称设置为“footer” 6.2.7 视觉设计视觉设计v页面总体的布局设计完成后，就要开始对细节进页面总体的布局设计完成后，就要开始对细节进行设计了，整个设计过程是按照从内容到形式，行设计了，

13、整个设计过程是按照从内容到形式，逐步细化的思想来进行的。视觉设计主要是使用逐步细化的思想来进行的。视觉设计主要是使用Fireworks切图再把切好的图放置到页面元素的背切图再把切好的图放置到页面元素的背景中实现的景中实现的 左侧列和右侧列的视觉设计6.2.8 交互效果设计交互效果设计1. 为为“常用下载常用下载”中项目设置鼠标经过时效果中项目设置鼠标经过时效果#sidebar .downbox li a:hoverbackground: #ffeeee url(images/bullet2.gif) no-repeat 10px center;/* 注意同时改变了背景颜色和注意同时改变了背景颜

14、色和作为小图标的背景图像作为小图标的背景图像*/color:#CC6633;/* 改变文字颜色改变文字颜色*/2. 图像边框动态改变图像边框动态改变v当鼠标经过一张展示图片时，图像的边框颜色由当鼠标经过一张展示图片时，图像的边框颜色由土黄色变为蓝色，背景色也由白色变为蓝色土黄色变为蓝色，背景色也由白色变为蓝色#content a:hover imgpadding: 5px;background: #3d81b4;border: 1px #3d81b4 solid; 6.2.9 总结总结CSS布局的优点布局的优点v 使用使用CSS进行布局的最大进行布局的最大优点是非常灵活，可以方优点是非常灵活，

15、可以方便地扩展和调整。例如，便地扩展和调整。例如，当网站随着业务的发展，当网站随着业务的发展，需要在页面中增加一些内需要在页面中增加一些内容，那么不需要修改容，那么不需要修改CSS样式，只需要简单地在样式，只需要简单地在HTML中增加相应的结构中增加相应的结构模块就可以了。模块就可以了。 v 不但如此，设计得不但如此，设计得足够合理的页面可足够合理的页面可以非常灵活地修改以非常灵活地修改样式。例如，只需样式。例如，只需要将两列布局的浮要将两列布局的浮动方向交换，就可动方向交换，就可以立即得到一个新以立即得到一个新的页面，如图所示。的页面，如图所示。可以看到左右两列可以看到左右两列交换了位置。交

16、换了位置。 v 示例示例网页兼容性测试方法v将网页在各种浏览器中预览将网页在各种浏览器中预览v增大或减小浏览器的宽度进行预览（特别注意在增大或减小浏览器的宽度进行预览（特别注意在宽屏显示器中的效果）宽屏显示器中的效果）v调整浏览器的默认字体大小预览（注意调整浏览器的默认字体大小预览（注意Firefox浏浏览器调整字体大小后会使表单文本框的大小发生览器调整字体大小后会使表单文本框的大小发生变化）变化）6.3 6.3 网站的风格设计网站的风格设计网站的风格设计 v所谓网站风格，就是指某一网站的整体形象给浏所谓网站风格，就是指某一网站的整体形象给浏览者的综合感受，是站点与众不同的特色，它能览者的综合

17、感受，是站点与众不同的特色，它能透露出设计者与企业的文化品位。这个整体形象透露出设计者与企业的文化品位。这个整体形象包括网站的包括网站的CI（Corporate Identity，企业形象，企业形象，包括标志、色彩、字体、标语）、版面布局、浏包括标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素意义、站点荣誉等诸多因素 v 风格是有人性的，通过网站的外表，内容，文字，交流可风格是有人性的，通过网站的外表，内容，文字，交流可以概括出一个站点的个性、情绪。是温文儒雅，是执著热以概括出一个站点的个性、情绪

18、。是温文儒雅，是执著热情，是活泼易变，是放任不羁。象诗词中的情，是活泼易变，是放任不羁。象诗词中的“豪放派豪放派”和和“婉约派婉约派”，你可以用人的性格来比喻站点。，你可以用人的性格来比喻站点。v 风格的形成需要在开发中不断强化、调整和修饰，也需要风格的形成需要在开发中不断强化、调整和修饰，也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站风格。一般情况下，政府部门的网站应体现出不同的网站风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，风格应比较庄重沉稳，文化教育部门的网站应该高雅

19、大方，娱乐行业的网站可以活泼生动一些，商务网站可以贴近民娱乐行业的网站可以活泼生动一些，商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。者的兴趣，充分彰显个性。6.3.1 网站风格设计的基本原则网站风格设计的基本原则v1. 尽可能地将网站标志（尽可能地将网站标志（logo）放在每个页面最）放在每个页面最突出的位置突出的位置 v2. 使用统一的图片处理效果使用统一的图片处理效果 v3. 突出主色调突出主色调 v4. 使用标准字体使用标准字体v风格设计包含的内容很多，其中影响网站风格最风格设计包含的内容很

20、多，其中影响网站风格最重要的两个因素是重要的两个因素是网页色彩的搭配网页色彩的搭配和和网页版式的网页版式的布局设计布局设计 6.3.2 网页色彩的搭配网页色彩的搭配v任何网页创意使用的视觉元素总的归纳起来不外任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接当，编排组合的合理，将对网页的美化起到直接的效果。的效果。v在这三者中，色彩的作用不可小觑。色彩决定印在这三者中，色彩的作用不可小觑。色彩决定印象，当浏览者观看网页时，首先看到的就是网页象，当浏览者观看网页时，首先看到的就是

21、网页的色彩搭配。在这一瞬间，对网页的整体印象就的色彩搭配。在这一瞬间，对网页的整体印象就已经确定下来了，色彩形成的印象非常稳固，不已经确定下来了，色彩形成的印象非常稳固，不知不觉间，就像被牢牢锁定了一样。知不觉间，就像被牢牢锁定了一样。6.3.3 网页版式设计网页版式设计v网页中的文字应采用合理的字体大小和字形。网页中的文字应采用合理的字体大小和字形。v确保在所有的页面中导航条位于相同的位置确保在所有的页面中导航条位于相同的位置v确保页头和页尾部分在所有的页面中都相同。确保页头和页尾部分在所有的页面中都相同。v不要使网页太长，特别是首页。不要使网页太长，特别是首页。v确保浏览器在满屏显示时网页

22、不出现水平滚动条。确保浏览器在满屏显示时网页不出现水平滚动条。v要在网页中适当留出空白要在网页中适当留出空白 网页的版式种类网页的版式种类 v（1）T型布局型布局 v所谓所谓T结构。就是指页面顶部为横条网站标志结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字局，因为菜单条背景教深，整体效果类似英文字母母T,所以我们称之为所以我们称之为T形布局。这是网页设形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。

23、是初学者最容易点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人彩上不注意，很容易让人看之无味看之无味。 （2）“口”型布局 v这是一个象形的说法，就是页面一般上下各有一这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。这种布局的优点是充分利用版中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。有

24、将四边空出，只用中间的窗口型设计。 （3）“三”型布局 v这种布局多用于国外站点。特点是页面上横向两这种布局多用于国外站点。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多条色块，将页面整体分割为四部分，色块中大多放广告条。放广告条。 （4）“二”型布局v采取左右或者上下对称的布局，一半深色，一半采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。强，缺点是将两部分有机的结合比较困难。 （5）“POP”布局 v “POP”布局就像一张宣传海报，以一张精美图片作为页面布局就

25、像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点的设计中心，在适当位置放置主菜单，常用于时尚类站点 6.4 网站的栏目规划和目录结构设计网站的栏目规划和目录结构设计v网站中的内容是根据网站的栏目组织起来的，所网站中的内容是根据网站的栏目组织起来的，所以网站栏目相当于网站的逻辑结构，而通常都要以网站栏目相当于网站的逻辑结构，而通常都要将网站每个栏目中的网页分门别类的放在不同的将网站每个栏目中的网页分门别类的放在不同的网站子目录中，所以网站的目录结构可看成是网网站子目录中，所以网站的目录结构可看成是网站的物理结构站的物理结构 6.4.1 网站的栏目规划网站的

26、栏目规划v 1. 建立层次型结构建立层次型结构v 2. 设计每一个栏目设计每一个栏目信息与网络中心网站中心简介政策法规常用下载技术支持联系我们办公系统部门简介机构设置人员简介校内规章国家法规常用软件表格下载6.4.2 网站的目录结构设计网站的目录结构设计v1. 目录结构设计的原则目录结构设计的原则（1）网站应有一个主目录）网站应有一个主目录（2）不要将所有的文件都直接存放在网站根目录下）不要将所有的文件都直接存放在网站根目录下（3）根据栏目规划来设计目录结构）根据栏目规划来设计目录结构（4）每个目录下都建立独立的）每个目录下都建立独立的images子目录子目录（5）目录的层次不要太深）目录的层

27、次不要太深（6）不要使用中文文件名或中文目录名）不要使用中文文件名或中文目录名2. 站点结构图站点结构图6.5 网站的导航设计 v在访问网站的时候也一样，用户期望在任何一个在访问网站的时候也一样，用户期望在任何一个网页上都能清楚地知道目前所处的位置，并且能网页上都能清楚地知道目前所处的位置，并且能快速地从这个网页切换到想要访问的网页。但访快速地从这个网页切换到想要访问的网页。但访问网站的时候，经常会因为单击过多的网页而迷问网站的时候，经常会因为单击过多的网页而迷失方向。失方向。v因此网站的导航设计对于一个网站来说非常的必因此网站的导航设计对于一个网站来说非常的必要和重要，它是衡量一个网站是否优

28、秀的重要标要和重要，它是衡量一个网站是否优秀的重要标志。志。6.5.1 导航的实现方法导航的实现方法v1. 导航条导航条v2. 路径导航路径导航v3. 其他导航方式其他导航方式v4. 搜索搜索没有导航的导航没有导航的导航6.5.2 导航的设计策略导航的设计策略v首先，任何网站都要有一个主导航条首先，任何网站都要有一个主导航条 v其次，如果网站的层次很深，比如四层以上（主其次，如果网站的层次很深，比如四层以上（主页作为第一层），最好要有路径导航。页作为第一层），最好要有路径导航。 v其他方式的导航只是作为辅助的导航手段，视实其他方式的导航只是作为辅助的导航手段，视实际需要而定际需要而定 6.6

29、网站的环境准备 v网站环境准备是指为网站的运行准备必要的软、网站环境准备是指为网站的运行准备必要的软、硬件环境，主要包括运行空间的准备、网络接入硬件环境，主要包括运行空间的准备、网络接入条件准备、域名及条件准备、域名及IP地址的申请等。对于中小型地址的申请等。对于中小型网站来说，主要是指主机空间准备和域名申请两网站来说，主要是指主机空间准备和域名申请两项。项。6.6.1 架设网站的基本条件架设网站的基本条件v1. 要有主机或主机空间要有主机或主机空间v 所谓主机在这里是指所谓主机在这里是指Web服务器。我们知道用户能浏览网服务器。我们知道用户能浏览网站上的网页实际上是从远程的站上的网页实际上是从远程的Web服务器上读取了一些