网页设计

第一章 “新媒体，新设计”——网页设计概述

第一节 WWW：Web概述

Web如何工作：客户／服务器（Client／Server）结构

浏览器：进入Web世界的窗口

第二节 Web设计：新媒体，新设计

一、网站与网页

二、用、美、爽：Web设计的三目标

三、Web设计流程

四、分工与合作：Web设计团队

如何成为一名网页设计师？

第三节 “工欲善其事，必先利其器”——网页设计技术概述

一、HTHL和XHTML：网页标记语言

1.HTHL简介

2.HTHL的语法特征

HlHL标签的嵌套

HTHL空白文档结构

3.×HTML

二、CSS：级联样式表

1.CSS的语法特征

CSS语法示例

2.CSS的使用

3.样式的继承与冲突：级联

三、Web标准：XHTL+CSS

四、DHTML：动态HTHL

思考与练习

第二章 “谋定而动”——网站整体设计

第一节 明确站点的目标与需求

设计与需求

一、建站意图：为什么要建立一个网站？

网站项目相关人员

二、为谁而建：用户，用户，用户

UCD：以用户为中心的设计

用户模型

三、“类型片”：定义站点类型

站点类别

四、站点目标：行动的指南

第二节 站点整体规划与设计

一、内容：站点的内涵与价值所在

多媒体综合传播

为站点准备内容

二、功能：不再只是内容

功能驱动与内容驱动

交互设计

功能流程图

三、架构：逻辑与组织

常见站点结构类型

四、界面：规划与设计

网站界面构成

网页界面的构成元素

五、视觉：形象与风格

站点的设计风格

第三节 技术与实现

一、创意与探索：设计草图与原型

1.草图

2.原型

二、页面需求的描述：线框图

三、精彩看得见：页面效果图

四、站点的蓝图：网站计划书

网站计划书的主要内容

思考与练习

第三章 “从纸张到屏幕”——网页空间与布局

第一节 究竟该多大：网页空间探密

一、屏幕尺寸与浏览器窗口

1.显示器屏幕尺寸

2.浏览器窗口尺寸

二、关于滚动

1.避免过多滚屏

2.避免在两个方向上滚动屏幕

第一屏水平设计与垂直设计

三、确定页面尺寸

1.尽可能了解你的用户

2.页面尺寸设计策略

最低显示标准是多少？

3.固定宽度和可变宽度设计

“裁剪”浏览器空间

第二节 化有限为无限：网页布局设计

一、网页布局原理

1.平衡与稳定

2.焦点与主次

网页空间与视觉关注度

3.秩序与统一

“少就是多”

4.对比与变化

二、点、线、面——网页布局设计中的形态要素

1.点

2.线

3.面

造型与风格

三、关于空白

网页中的空白

主动留白与被动空白

四、常用布局方法和类型

1.自由型布局

2.规整型布局

分割

网格布局

第三节 技术与实现

一、表格布局

表格布局的分析与规划

二、DIV+CSS：符合Web标准的布局方法

1.观察与分析

2.切片与输出

3.定位与实现

示例：DIV+CSS布局

三、框架

思考与练习

第四章 “远看色，近看花”——网页色彩设计

第一节 色彩传递印象：网页色彩基础

一、色彩的三要素色调

二、生理、心理和文化：色彩的感觉和联想

1.色彩的感觉和印象

2.色彩的联想和象征

3.色彩的文化与认知

三、色彩的表现

四、对比与调和：网页配色原理

1.色彩的对比

2.色彩的调和

3.网页配色类型

第二节 网页色彩设计

一、网页色彩的选用

1.站点类型和主题

“不破不立”——打破常规使用色彩

2.用户需求

3.企业标准色

二、网页色彩计划

1.支配与强调：

主色、辅助色与强调色

2.整体与局部：栏目色彩的规划

三、网页中的色彩

1.背景色

2.多媒体元素色彩

3.文字色彩

第三节 技术与实现

一、屏幕色彩：加色混合

二、网络安全色

三、网页色彩设置

思考与练习

第五章 “细节决定成败”——网页元素设计

第一节 文字与排版

一、网页文字与排版基础

1.网页字体

屏幕阅读与字体

2.网页排版

网页字号大小的设置

二、网页字体设计

1.网页字体的选用

2.网页中的字体

三、技术与实现

1.用CSS设置字体

2.用图形实现网页字体设计

第二节 图形元素设计

一、图形的作用

1.表现页面内容

2.增添页面美感

图片的选择与页面的主题

二、网页中的图形

1.照片与插图

2.背景与底纹

整体背景与局部背景

3.站点标志

4.网页图标

三、技术与实现

1.网页图形的特点

2.网页图形的格式及优化

3.网页图形制作工具

网页图形的制作与优化

4.在网页中插入图形

第三节 多媒体元素设计

一、声音和视频

下载播放与流式播放

1.声音和视频文件格式

2.在网页中添加声音和视频

二、动画

1.GIF动画

2.Flash动画和交互媒体

Flash动画及交互媒体作品的创作

第四节 导航元素设计

一、三个问题：导航的功能

我在哪儿？

我能去哪儿？

我从哪里来？

二、导航的布局

三、导航媒介与形式

四、个性化导航设计

五、技术与实现：超链接

超链接示意图

URL

超链接的创建

使用Dreameaver创建图像映象

第五节 表单与控件

表单及HTHL实现

常用控件类型

一、表单的可用性设计

二、表单外观：标准与个性

思考与练习

第六章 “他山之石，可以攻玉”——综合案例分析

案例1 http://www.taorestaurant.com

案例2 www.howblue.com

案例3 http://www.bmw.com

案例4 http://www.ninebridges.co.kr

案例5 http://www.ksdb.co.kr

案例6 www.afrc.com

思考与练习

附录一 常用HTML参考

附录二 常用CSS参考

附录三 网络安全色

参考网站

参考书目

后记

《高等教育“十二五”全国规划教材·中国高等院校设计专业系列教材：网页设计》作者凭借娴熟的专业设计经验与大量的第一手案例，系统讲解从客户到沟通、从草图到提案、从签单到完工提交的设计全过程。作者尽心传授设计密招，独家披露许多深入的知识点，而绝对人气的高校教学经验又使深度讲解不浮于表面，让读者有身临其境之感。“大家观点”邀请著名设计师群体评判设计的细节，避免以偏概全的表达，启发学生深入思考。

20％传统教学内容+30％最新教育理念+50％经典案例解析与设计项目实训。
本系列教材均以国内艺术与设计专业的一线教育专家为主力作者，充分契合艺术与设计教育改革的需要，致力于培育能够与设计产业无缝对接的人才，在结构上以教材的学术性、系统性为基础，综合了教辅书的功能性与实用性，以及工具书信息庞大的优势，对传统教材的编写体例与要求进行大幅度改革，将20％的传统教学内容、30％的最新教育理念和50％的经典案例解析与设计项目实训完美融合。
本系列教材的出版系国内艺术与设计院校教改成就的全景呈现，对于国内艺术与设计教育的发展意义深远。