第 1章　初识网页设计
学习引导　1
1.1　网页设计的相关概念　2
1.1.1　网站的概念　2
1.1.2　网页的概念　2
1.1.3　网页设计的概念　3
1.2　网站的相关术语　3
1.2.1　域名　3
1.2.2　网站空间　3
1.2.3　HTTP　4
1.2.4　FTP　4
1.2.5　超链接　4
1.2.6　站点　4
1.3　网页的常见类型　5
1.3.1　功能型网页　5
1.3.2　展示型网页　5
1.3.3　信息型网页　5
1.4　网页设计的特点　6
1.4.1　媒体综合　6
1.4.2　艺术独特　6
1.4.3　技术多元　6
1.4.4　交互丰富　6
1.5　网页设计的必备技能　6
1.5.1　使用软件　6
1.5.2　使用脚本语言　7
1.6　网页设计的流程　7
1.6.1　网站策划　8
1.6.2　素材搜集　8
1.6.3　交互设计　8
1.6.4　界面设计　8
1.6.5　网站制作　8
1.6.6　测试发布　8
第 2章　网页设计基本规范
学习引导　9
2.1　设计单位　10
2.1.1　英寸　10
2.1.2　像素　10
2.1.3　分辨率　10
2.2　设计尺寸　11
2.2.1　页面宽度　11
2.2.2　安全宽度　12
2.2.3　首屏高度　13
2.3　基础布局　13
2.4　栅格系统　14
2.4.1　栅格系统的概念　14
2.4.2　栅格系统的组成　14
2.4.3　栅格系统的搭建　15
2.5　文字规范　16
2.5.1　安全字体　16
2.5.2　字号大小　17
2.5.3　文字字重　18
2.5.4　文字行高　19
2.5.5　文字间距　19
2.5.6　行间距　20
2.5.7　段落间距　20
2.6　图标规范　20
2.6.1　设计尺寸　20
2.6.2　视觉平衡　21
2.6.3　视觉调整　22
2.6.4　使用原则　23
2.7　图片比例　23
2.8　控件管理　24
第3章　网页常用组件设计
学习引导　25
3.1　导航系统设计　26
3.1.1　导航菜单　26
3.1.2　面包屑导航　26
3.1.3　选项卡导航　27
3.1.4　锚点导航　27
3.1.5　分步导航　28
3.1.6　分页导航　28
3.1.7　树形导航　29
3.1.8　课堂案例——设计中式茶叶官方网站导航菜单　30
3.2　广告组件设计　35
3.2.1　轮播广告　35
3.2.2　弹出式广告　36
3.2.3　浮动式广告　37
3.2.4　课堂案例——设计中式家具电商平台网站轮播广告　37
3.3　展示组件设计　51
3.3.1　卡片　51
3.3.2　列表　52
3.3.3　表格　52
3.3.4　折叠面板　53
3.3.5　课堂案例——设计中式茶叶官方网站新闻列表　54
3.4　输入组件设计　58
3.4.1　搜索　59
3.4.2　表单　60
3.4.3　课堂案例——设计职业教育管理系统网站注册表单　61
3.5　课堂练习——设计科技公司官方
　　 网站导航　67
3.6　课后习题——设计有机果蔬电商平台网站轮播广告　68
第4章　官方展示网页设计
学习引导　69
4.1　官方展示网站页面设计　70
4.1.1　官方展示网站的内容规划　70
4.1.2　官方展示网站的设计风格　70
4.1.3　官方展示网站的页面类型　72
4.1.4　课堂案例——设计中式茶叶官方网站首页　73
4.2　课堂练习——设计中式茶叶官方网站其他页面　95
4.3　课后习题——设计科技公司官方网站　97
第5章　电商平台网页设计
学习引导　99
5.1　电商平台网站页面设计　100
5.1.1　电商平台网站的内容规划　100
5.1.2　电商平台网站的设计风格　101
5.1.3　电商平台网站的页面类型　102
5.1.4　课堂案例——设计中式家具电商平台网站首页　104
5.2　课堂练习——设计中式家具电商平台网站其他页面　131
5.3　课后习题——设计有机果蔬电商平台网站　133
第6章　管理系统网页设计
学习引导　135
6.1　管理系统网站页面设计　136
6.1.1　管理系统网站的内容规划　136
6.1.2　管理系统网站的设计风格　136
6.1.3　管理系统网站的页面类型　138
6.1.4　课堂案例——设计职业教育管理系统网站首页　140
6.2　课堂练习——设计职业教育管理系统网站其他页面　174
6.3　课后习题——设计网店内容管理系统网站　176

第7章　移动端网页设计
学习引导　178
7.1　移动端网站页面设计　179
7.1.1　移动端网站的设计方法　179
7.1.2　响应式网页的设计模式　180
7.1.3　网页触摸式设计的优化　182
7.1.4　课堂案例——设计移动端中式茶叶官方网站首页　183
7.2　课堂练习——设计移动端中式茶叶官方网站其他页面　201
7.3　课后习题——设计移动端科技公司官方网站　202
第8章　网页的标注、输出与命名
学习引导　204
8.1　网页页面标注　205
8.1.1　直接导出为HTML文件　205
8.1.2　使用插件自动化标注　206
8.1.3　课堂案例——标注中式茶叶官方网站首页　206
8.2　输出网页元素　209
8.2.1　输出图标元素　209
8.2.2　输出图片元素　211
8.2.3　输出多媒体元素　213
8.2.4　课堂案例——输出中式茶叶官方网站首页元素　213
8.3　网页的命名　216
8.3.1　图片的命名　216
8.3.2　文件的命名　217
8.3.3　课堂案例——命名中式茶叶官方网站首页图片　218
8.4　课堂练习——输出科技公司官方网站首页元素　220
8.5　课后习题——命名科技公司官方网站首页图片　220