第一章 网页设计基础
规划站点内容
• 明确网页制作的目的和意义。下面列出在 规划站点内容阶段要做的具体事项。
• 描述网页的服务对象 • 确定制作网页的目的 • 具体确定网页的信息内容、浏览界面和信
息设置 • 具体确定网页的制作时间和软硬件环境
•
第一章 网页设计基础
配置站点
• 做好上面几步后,接下来的工作就是根据 上面的规划创建一个完整的站点。
树立网站风格可以分4个步骤：
风格是建立在有价值内容之上的。 需要清楚自己希望站点给人的印象是什么。 在明确自己的站点的印象以后，开始努力建立和 加强这种印象。 风格的形成不是一次定位的，而是在实践中不断 强化、调整和修饰的。
第一章 网页设计基础
4、网站创意 （1）创意是传达信息的一种特别方式
创意思考的过程分5个阶段：准备期、孵化期、 启示期、验证期、形成期。 （2）创意是将现有的要素重新组合
需求分析工作是网站建设中重要的一步，也是决定 性的一步。只有通过需求分析，才能把网站功能的 总体概念描述为具体的网站功能描述书，从而奠定 网站开发的基础。
需求分析的目的是完整、准确地描述用户的需求， 跟踪用户需求的变化，将用户的需求准确地反映到 系统的分析和设计中，并使系统的分析、设计与用 户的需求保持一致。
R: 0 G: 60 B: 12
R: 138 G: 202 B: 136
R: 36 G:124 B: 34
选择适合内容风格的颜色
页面的色彩搭配
第一章 网页设计基础
第一章 网页设计基础
• 8、网站的分类 • 四种分类
门户网站 职能网站 专业网站 个人网站
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
(1)合理选题
主题要小而精。 题材最好是自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。
(2)精选网站名称
名称要正气。 名称要易记。 名称要有特点。
第一章 网页设计基础
2、确定网站CI形象
（1）设计网站的标志
（2）选择网站的标准色彩 （3）选择网站的标准字
第一章 网页设计基础
成是一个单一体，是网站的一个元素。 ➢ 网页中包含的元素有：文本和图像、动画、声
音和视频、超级链接、表格、表单、导航栏以 及其他常见元素。
第一章 网页设计基础
第一章 网页设计基础
网页的分类
按照网页的表现形式不同，可将网页分为静态 网页和动态网页。
按照网页在网站中所处位置不同，可将网页分 为主页和内页。
规模庞大的网站 结构复杂，人员众多，其所涉及到的技术也很复杂， 并且与网站背后的传统业务有着紧密的联系。
规模较小的网站 结构简单，参与建设、维护的设计人员较少，对维 护和更新的要求不高，信息发布的平率和数量并不 大。
第一章 网页设计基础
6-25
第一章 网页设计基础
6-26
第一章 网页设计基础
网站项目的需求分析
第一章 网页设计基础
使用快速原形法进行网站需求分析
在软件开发过程中，最关键的步骤就是确切定义出 需求，明确软件要实现的功能是什么，而这恰恰也是 最困难的过程。因为许多用户在初期只有一个隐约的、 大致的考虑，提不出具体明确的需求。在这种情况下， 使用快速原型法进行反复交流、细化需求，就成为一 种有效的方法。
VI包括：企业名称、企业标志、企业造型、标准字、 标准色、象征图案、宣传口号等。
第一章 网页设计基础
6-32
第一章 网页设计基础
网站内容 网站所有内容由3类信息组成：
文本 多媒体 图像
第一章 网页设计基础
栏目
栏目的实质是一个网站的大纲索引，索引应该将网 站的主体（题）明确显示出来。 一般的网站栏目安排要注意以下几个方面：
网站功能分析
网站基本功能： （1）新的信息展示平台 （2）新的业务和交流平台 （3）新的工作平台
第一章 网页设计基础
6-30
第一章 网页设计基础
网站视觉形象分析
每一个政府部门、公司，甚至是个人都具有自己特 定的形象。这些形象要素构成了一整套的识别体系， 即CI设计体系。对于网站，最直接的设计要素应该 是视觉要素VI。
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
静态网页 是指这个网页不论在何时何地浏览，都将
显示相同的画面和内容，且用户仅能浏览，而无 法提供信息给网站，让网站作出响应。 动态网页
是网页能够按照用户的需求作出动态响应， 如网页上常见的留言板、论坛等。
第一章 网页设计基础
第一章 网页设计基础
5、版面编排 （1）主次要分明，中心要突出 （2）大小要搭配，相互要呼应 （3）图文要并茂，相得要益彰 （4）动静要有度，平衡要对称
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
6、 网页风格
分割
分割
第一章 网是网站
网站是一个存放在网络服务器上的完整信 息的集合体。它包含一个或多个网页，这些 网页以一定的形式链接在一起，成为一个整 体
第一章 网页设计基础
第一章 网页设计基础
网站设计前期工作
网站项目的规模 网站的规模是不同的。有些网站的规模相当庞大， 而有些网站的规模却很小。
主页 一个网站中的首页，一个特殊的单独的页面，
它作为一个组织或个人在WWW上开始点的页面， 整个网站的起点和汇总点。浏览者浏览网站的入 口。 内页
主页中包含指向其它页面的超链接。
第一章 网页设计基础
网页布局
三种布局
国字型布局 拐角型布局 封面型布局
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
网站设计基础
第一章 网页设计基础
课程内容
网站制作 基础知识
CSS 层叠样式表
DREAMWEAVER 网页设计软件
HTML 超文本标记
语言
第一章 网页设计基础
Internet概述
Internet即国际计算机互联网，在中国也称 “因特网”或“国际互联网。它是目前全世界 最大的网络，包含着丰富多彩的信息，并提供 方便快捷的服务。它缩短了人们之间的距离。 通过Internet，用户可以与接入Internet的任 何一台计算机进行交流，如发邮件、聊天、通 话等。
网页制作中色彩的运用技巧：
确定主色 利用相近色 黑白灰运用
R: 210 G: 144 B: 212
R: 117 G: 45 B: 119
R: 255 G: 91 B: 91
R: 158 G: 0 B: 26
R: 211 G: 211 B: 211
R: 122 G: 128 B: 131
R: 101 G: 174 B: 255
第一章 网页设计基础
与软件工程中的螺旋模型类似，一个网站项目从 意向开始，到最后的规范化批量设计过程是螺旋 推进的。
第一章 网页设计基础
网站设计需要的知识
1、确定网站的主题和名称 一般来说定位网站的主题，应该从以下几方面 考虑：网上求职、网上聊天/即时信息、网上社 区/讨论/邮件列表、计算机技术、网页/网站开发 素材、娱乐、旅行、参考/资讯、家庭/教育、生 活/时尚10大类。
• 定义本地站点：就是在自己机器的硬盘上 建立一个目录,然后将所有制作网页相关的文 件都存放在里面,以便进行网页的制作和管理， 因此，站点可以理解成同属于一个web主题 的所有文件的存储地点。
第一章 网页设计基础
创建页面
• 一个页面美不美观，能不能吸引浏览者，创 建页面是关键的一步。
自顶向下的设计方法 自底向上的设计方法
在IP地址的4组数字中，包含了两部分信息，即 网络代号（NetID）和主机代号（HostID）。
第一章 网页设计基础
域名是IP地址的一种英文替代。
域名系统采用层次结构，按地理域或机构域进 行分层。
域名的一般格式为：
➢ 主机名.机构名.类别名.地区名。
第一章 网页设计基础
什么是网页 ➢ 网页是网站的组成部分，是一张页面，可以看
3、确定网站的整体风格和创意设计 风格是抽象的，是指站点的整体形象给浏览者 的感受。 风格是独特的，是站点不同于其他网站的地方， 或色彩，或技术，或交互方式。 风格是有人性的，通过网站的外观、内容、文 字、交流，可以概括出一个站点的个性和情趣， 是温文儒雅，是执着热情、是活泼易变、还是放 任不羁。
第一章 网页设计基础
（1）一定要紧扣主题 （2）设置一个最近更新或网站指南栏目 （3）设定一个可以双向交流的栏目 （4）设一个下载或常见问题回答栏目
第一章 网页设计基础
• 版块
版块比栏目的概念要大一些，每个版块都有自己 的栏目。注意以下几点：
（1）各版块要有相对独立性 （2）各版块要相互关联 （3）版块的内容要围绕站点主题
7-65
第一章 网页设计基础
7-66
第一章 网页设计基础
7-67
第一章 网页设计基础
7-68
第一章 网页设计基础
7-69
第一章 网页设计基础
设计
开发
规 划
网站开发工作流程
发布
维护
第一章 网页设计基础
网站制作步骤
收集整理资源 规划站点内容 配置站点 创建页面 测试站点 发布站点 站点维护更新
第一章 网页设计基础
第一章 网页设计基础
第一章 网页设计基础
•9 网站导航系统设计
（1）导航系统的两个作用： 指向作用 示向作用
7-63
第一章 网页设计基础
• （2）网站中常见的导航模式 集合导航模式 层次导航模式 线形导航模式 上下文导航模式 随机导航模式