清华大学出版社 网页设计与制作实例教程第2章高等学校计算机应用规划教材 2024/7/30主编 方其桂内容提要第2章 网页规划设计一个专业的网站在上线运营之前必须经过规划、设计、搭建一个专业的网站在上线运营之前必须经过规划、设计、搭建等一系列环节。前期的规划基本上确定了网站的后续发展方向，等一系列环节。前期的规划基本上确定了网站的后续发展方向，所以前期的规划在整个网站生命周期中扮演着所以前期的规划在整个网站生命周期中扮演着“舵手舵手”的角色，的角色，网站后续的所有运营工作、推广方式、人员配置、物资配置都会网站后续的所有运营工作、推广方式、人员配置、物资配置都会围绕网站最初的定位和方向来展开。围绕网站最初的定位和方向来展开。本章通过介绍网页规划设计的相关知识，包括规划网站主题、本章通过介绍网页规划设计的相关知识，包括规划网站主题、网页版面布局及网页颜色设计，可以使读者对网页的规划设计有网页版面布局及网页颜色设计，可以使读者对网页的规划设计有一个整体的、直观的认识，从而规划设计出合理美观的网页，以一个整体的、直观的认识，从而规划设计出合理美观的网页，以便更好地为后面的网页开发建设服务。便更好地为后面的网页开发建设服务。教学目录规划网站主题规划网站主题 网页版面布局网页版面布局网页颜色设计网页颜色设计010203第2章 网页规划设计2.1 规划网站主题教学内容2.1.1 2.1.1 网站需求分析网站需求分析1. 网站需求分析原则网站需求分析原则完整性正确可行性优先级简明性可测试2. 网站需求分析的内容网站需求分析的内容（1）网站背景分析（2）总体需求分析（3）具体需求分析第2章 网页规划设计2.1 规划网站主题教学内容2.1.1 2.1.1 网站需求分析网站需求分析3. 网站需求分析采集方法网站需求分析采集方法问卷调查用户访谈4. 需求分析常用方法需求分析常用方法（1）数据流图是一种分析系统数据流程的图形工具，从数据传递和加工角度，以图形方式来表达系统的逻辑功能、数据在系统内部的逻辑流向和逻辑变换过程。成绩管理系统数据流图第2章 网页规划设计2.1 规划网站主题教学内容2.1.1 2.1.1 网站需求分析网站需求分析4. 需求分析常用方法需求分析常用方法（2）实体关系图简记E-R图，是指以实体、关系、属性三个基本概念概括数据的基本结构，用来描述现实世界的概念模型。实体关系图表示在信息系统中概念模型的数据存储。论坛网站的实体关系图第2章 网页规划设计2.1 规划网站主题教学内容2.1.1 2.1.1 网站需求分析网站需求分析4. 需求分析常用方法需求分析常用方法（3）用例图用例图（Use Case）是指参与者（Actor）、用例（Use Case）以及它们之间的关系构成的用于描述系统功能的动态视图称为用例图。它展示了一个外部用户能够观察到的系统功能模型图。子系统关系类型说明表示符号关联 参与者与用例之间的关系 泛化 参与者之间或用例之间的关系 包含 用例之间的关系 包括 扩展 用例之间的关系 扩展 用例图中的关系第2章 网页规划设计2.1 规划网站主题教学内容2.1.2 2.1.2 网站主题确定网站主题确定谓网站的主题也就是网站的题材。现在网上比较知名的谓网站的主题也就是网站的题材。现在网上比较知名的10类题材有：类题材有：第第1类：网上求职；第类：网上求职；第2类：网上聊天类：网上聊天/即时信息即时信息/ICQ；第；第3类：网上社区类：网上社区/讨讨论论/邮件列表；第邮件列表；第4类：计算机技术；第类：计算机技术；第5类：网页类：网页/网站开发；第网站开发；第6类：娱乐类：娱乐网站；第网站；第7类：旅行；第类：旅行；第8类：参考类：参考/资讯；第资讯；第9类：家庭类：家庭/教育；第教育；第10类：生类：生活活/时尚。在选择网站题材的时候要注意以几点。时尚。在选择网站题材的时候要注意以几点。第2章 网页规划设计1.主题小内容精2.网站题材内容恰当3.题材新目标准2.1 规划网站主题教学内容2.1.3 2.1.3 网站内容设计原则网站内容设计原则网站要方便使用，并遵循一些设计惯例，因为用户在访问一个个网站网站要方便使用，并遵循一些设计惯例，因为用户在访问一个个网站时，难以记住任何特殊的交互诀窍，于是会把更多的时间花在更方便使用时，难以记住任何特殊的交互诀窍，于是会把更多的时间花在更方便使用的网站上。的网站上。第2章 网页规划设计1.日期、时间和数字2.欢迎词3.弹出窗口和引导页面4. 新闻和公告信息5.网址6. 控件7.链接8.主页内容2.1 规划网站主题教学内容2.1.4 2.1.4 网站内容组织网站内容组织网站的内容是网站访客停留时间的决定要素，内容空泛的网站，访客网站的内容是网站访客停留时间的决定要素，内容空泛的网站，访客会匆匆离去；只有内容充实丰富的网站，才能吸引访客细细阅读。一个标会匆匆离去；只有内容充实丰富的网站，才能吸引访客细细阅读。一个标准的网站应该包含以下准的网站应该包含以下10项内容。项内容。第2章 网页规划设计1.站点结构图2.导航栏3. 联系方式页面4.反馈表5.引人入胜的内容6.常见问题解答7.精美的图片8.有效查询9.新闻页面10.相关站点链接2.2 设计版面布局教学内容2.2.1 2.2.1 版面布局的基本概念版面布局的基本概念最开始，一个新的网页它就像一张白纸，它需要设计者任意挥洒设计最开始，一个新的网页它就像一张白纸，它需要设计者任意挥洒设计才思。在开始的时候，需要明白，虽然能随意设计一些东西，但当了解了才思。在开始的时候，需要明白，虽然能随意设计一些东西，但当了解了什么是一种约定俗成的标准或者说大多数访问者的浏览习惯时，那么可以什么是一种约定俗成的标准或者说大多数访问者的浏览习惯时，那么可以在此基础上加上自己的东西。当然也可以创造出自己的设计方案。在此基础上加上自己的东西。当然也可以创造出自己的设计方案。第2章 网页规划设计1.页面尺寸2.整体造型2.2 设计版面布局教学内容2.2.2 2.2.2 网页布局类型网页布局类型网页的布局不可能像平面设计那么简单，除了上文提到过的可操作网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在标准型、偏置型、复式结是有一定规则的，这种规则使得网页布局只能在标准型、偏置型、复式结构型、拐角型、国字型等等几种布局的基本结构中选择。构型、拐角型、国字型等等几种布局的基本结构中选择。第2章 网页规划设计1.标准型2.2 设计版面布局教学内容2.2.2 2.2.2 网页布局类型网页布局类型第2章 网页规划设计2.偏置型2.2 设计版面布局教学内容2.2.2 2.2.2 网页布局类型网页布局类型第2章 网页规划设计3. 复式结构型2.2 设计版面布局教学内容2.2.2 2.2.2 网页布局类型网页布局类型第2章 网页规划设计4.拐角布局2.2 设计版面布局教学内容2.2.2 2.2.2 网页布局类型网页布局类型第2章 网页规划设计5.国字型布局2.2 设计版面布局教学内容2.2.3 2.2.3 网页布局方法网页布局方法网页版式布局的方法有两种，一种为纸上手绘布局，另一种为软件绘网页版式布局的方法有两种，一种为纸上手绘布局，另一种为软件绘图布局。下面分别加以介绍。图布局。下面分别加以介绍。第2章 网页规划设计1.纸上手绘布局2.软件绘图布局 Word软件设计的网站布局图2.3 网页颜色设计教学内容色彩基础知识色彩基础知识网站的色彩是最影响整体风格的因素，也是网站美工设计中最令人头网站的色彩是最影响整体风格的因素，也是网站美工设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基本知识，所以在制作网页疼的问题。许多网页设计者都缺乏色彩搭配的基本知识，所以在制作网页之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想的效果。因此，在介绍色彩搭配之前，先来看看色彩的基本知识。的效果。因此，在介绍色彩搭配之前，先来看看色彩的基本知识。第2章 网页规划设计1.色彩的基本概念2. 网页安全色3.色彩三要素4.色彩的心理效应2.3 网页颜色设计教学内容页面色彩搭配页面色彩搭配色彩本身具有非常微妙的表现力，它们可以产生出一种刺激人们大脑色彩本身具有非常微妙的表现力，它们可以产生出一种刺激人们大脑中对某种形式存在的物体的共鸣，展现出对待生活的新的看法与态度。合中对某种形式存在的物体的共鸣，展现出对待生活的新的看法与态度。合理使用色彩扩大了设计者创作的想像空间，赋予了创作新的不定性。理使用色彩扩大了设计者创作的想像空间，赋予了创作新的不定性。第2章 网页规划设计1.网页色彩搭配原理2.网页色彩搭配方法根据页面风格以及产品本身的诉求确定主色根据主色确定配色3.网页色彩搭配技巧清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材 谢谢使用！联系信箱：