网页设计与制作

互联网已经成为世界上覆盖面广、规模*、信息资源丰富的计算机信息网络，网页设计与制作也已经成为许多高等学校计算机专业甚至是非计算机专业学生必须掌握的基本技能之一。网页设计到底要讲技术、规范还是用户体验？互联网发展迅速，网页技术也瞬息万变，怎样才能让学生明白其中的核心和规律？网页设计和平面设计之间的共同点和不同点在哪里？用户体验到底是什么，如何在设计中体现？ 本书将对这些问题做出解答，并对网页设计的课程教学提出新的理念和方法。其中部分主要解决网页的发展历史，帮助同学理解网页的趋势。设计流程是通过流程、规范将用户体验的融入到设计的过程中。版式、色彩、字体、图片解释网页设计和平面设计的异同点。Html、css、js部分解释网页的编码。后一部分介绍针对移动互联网的设计方法。 本书遵循由浅入深、循序渐进的原则，通过实例结合基础知识讲解的方法介绍了网页设计与制作的基础知识和基本操作技能，内容全面，重点突出，实例丰富，步骤清晰，旨在把理论知识融入到实际操作中，力求易教易学。可作为高等院校本、专科网页设计课程的教材，也可作为高职高专院校相关课程的教材或培训教材。

章 概述

节 互联网的诞生

第二节 网页设计的发展

1. 网页设计：黎明前的黑暗（1989）

2. 表格（table）：网页的兴起（1995）

3. 来自JavaScript的救援（1995）

4. Flash：自由的黄金时代（1996）

5. CSS的诞生 (1998)

6. 栅格与框架：移动端的崛起（2007）

7. 响应式网页设计（2010）

8. 扁平化的时代（2010）

9. 光明的未来（2014）

 

第二章 网页的设计流程

节 网页设计的各类方法、流程

1. 以用户为中心的设计方法

1.1 UCD的要点

1.2 以用户为中心可以理解为以下几点：

1.3 以用户为中心的设计方法包括以下四个基本过程：

1.4 UCD的局限性

2. 以活动为中心的设计方法

2.1. ACD的局限性

第二节 以目标为导向的设计方法

1. 用户目标

2. 设计过程

2.1 调查研究

2.2 建立用户模型

2.3 定义需求

2.4. 设计框架

2.5 设计细化

2.6 设计支持

 

第三章 网页的版式和色彩

节 网页的版式设计

1. 版式设计的造型

1.1. 网页的尺寸

1.2. 导航

2. 版式设计的构成形式

2.1 几何分割

2.2 平衡

3. 网页布局的结构形式

3.1 传统“T”型布局

3.2 上下对照式布局

3.3 “上中下”“三”字布局

3.4 “回”字型布局

3.5 文字型布局

3.6 简约型布局

3.7 瀑布流式布局

4. 网页布局的构建原则

4.1 网站的类型

4.2 网站的内容

4.3 网站的受众

第二节 网页的色彩与搭配

1. 网页中的色彩模式

1.1. RGB色彩模式

1.2. 索引色彩模式

2. 网页颜色的色彩代码

3. 网页的配色方法

3.1 网页的色彩定位

3.2 色彩心理选择法

3.3 图片映衬法

3.4 调查问卷数据分析法

4. 网页色彩搭配原则

5. 辅助色调的选择和搭配

 

第四章 网页设计中的文字及图片

节 字体的规范与选择

1. 字体的分类和格式

1.1. 衬线体和无衬线体

2. 字体的选择

3. 字体的颜色选择

4. 与字体有关的 CSS 属性

5. 使用在线字体

第二节 网页中的图片

1. 网页图片格式

1.1 常用格式

1.2. WebP格式

2. 图片的选择

2.1 对比

2.2 质量

2.3 关联性

3. 优化图片

3.1 声明图像的大小

3.2 渐进的 JPGs

 

第五章 HTML CSS JavaScript

节 HTML

1. HTML基础

1.1什么是HTML

1.2 HTML 标签

1.3 HTML 元素

1.4 HTML 属性

1.5 HTML 中的颜色

1.6 HTML 中的路径

1.7 HTML 的基本结构

2. HTML 主体部分

2.1 HTML 中的文字和段落

2.2 HTML 中的图片

2.3 HTML 中的表格

2.4 HTML 中的表单

2.5 HTML 中的列表

3. HTML 头部

3.1网页的标题

3.2网页的基底网址

3.3网页的元数据

3.4头部信息的其他设置

4. 其他

4.1文档类型

4.2 HTML 注释

4.3 如何查看源代码

第二节 CSS

1. CSS 基础

1.1 什么是CSS

1.2 什么是DIV

1.3 CSS 选择器

1.4 CSS 的基本结构

1.5 如何使用CSS

2. 盒模型

2.1 什么是盒模型

2.2 内边距

2.3 外边距

2.4 边框

3. CSS 基本样式属性

3.1 背景样式

3.2 文本及字体样式

3.3 列表样式

3.4 超链接样式

4. CSS 定位属性

4.1 CSS 定位概述

4.2 浮动

4.3 组件定位属性

第三节 JavaScript

1. JavaScript 基础

1.1 什么是JavaScript

1.2 JavaScript的组成

1.3 JavaScript的基本结构

1.4 JavaScript 交互基本方法

2. JavaScript 基本语法

2.1 JavaScript代码格式

2.2 JavaScript注释

2.3 JavaScript 关键字和保留字

2.4 JavaScript函数

3. JavaScript 数据类型与运算符

3.1 变量

3.2 基本数据类型

3.3 数据类型之间的转换

3.4 运算符

3.4 其他

4. JavaScript 核心语法

4.1 逻辑分支语句

4.2 循环语句

5. DOM

5.1 查找操作

5.2 事件操作

5.3 表单验证

5.4 添加、删除操作

5.5 级联下拉菜单

6. BOM

6.1 navigator 浏览器信息对象

6.2 window 对象

 

第六章 响应式网页设计

节 响应式网页设计简介

1. 响应式网页设计的优点

1.1. 节省开发经费

1.2. 节省时间

1.3. 提升SEO效果

1.4. 提升网站的性能

1.5. 可以让你的用户随时随地的了解新闻或者通知

2. 可能的隐患

2.1. 更慢的加载速度

2.2. 可能会延长开发的时间并增加前端开发的开支

2.3. 网页内容需要针对响应式设计做出优化

3. 你准备好设计响应式的网站了么

3.1. 网站是不是真的需要响应式设计？

3.2. 是否了解具体该怎么实施了？

3.3. 是否能够测试响应式网页？

3.4. 设计上的限制

第二节 响应式网页设计的发展

1. 我们所了解的响应式设计

1.1. 流动布局

1.2. 媒介查询

1.3. 弹性图片

2. 模式

2.1. 基于设备

2.2. 基于内容

3. 展望

3.1. Html5支持的媒体内容

3.2. 用标签管理响应式图片

3.3. 字体图标（Font Icons）

3.4. Flexbox

3.5. 网页元素（Web Components）

4. 总结

第三节 响应式设计的原则

1. 响应式设计vs适应式设计

2. 内容流

3. 相对单位

4. 断点

5. 和小值

6. 嵌套对象

7. 移动优先还是台式桌面优先

8. web字体vs系统字体

9. 位图vs矢量图

第四节 响应式设计的流程

1. 我们首先需要了解这些概念

1.1. 固定宽度（Fixed-width）

1.2. 自适应（Adaptive）

1.3. 流体（Fluid）

1.4. 响应式设计

1.5. 移动优先设计（mobile first）

1.6. 断点（breakpoint）

1.7. 媒体查询

2. 响应式设计的流程