产品特色

编辑推荐

　　通俗易懂，结构清晰，由浅入深阐述网页设计师必知必会的基本技能和概念:

　　 互联网与万维网基础

　　 用HTML5创建网页

　　 用CSS配置颜色和文本

　　 用CSS配置页面布局

　　 配置图像和多媒体

　　 探究CSS3新增属性

　　 运用网页设计*佳实践

　　 网页的无障碍访问和使用性设计

　　 为搜索引擎优化而设计

　　 选择域名

　　 上线，发布到网上

　　本书第1版和第2版深受师生喜爱，第3版根据学习需要提前在第2章介绍了HTML5结构化元素，并在第5章重点介绍了网页颜色的搭配。此外，第3版还增加了以下特色：

　　 更多动手实作练习

　　 案例学习有新增和修订

　　 进一步深入介绍网页布局设计

　　 进一步深入介绍移动网页设计

　　 进一步深入介绍响应式网页设计技术

　　 新增对CSS媒体查询的介绍

内容简介

　　本书针对HTML5和CSS3的*新标准进行及时的更新和修订，包含的主题有：Internet和Web概念；创建HTML5网页；用CSS配置颜色和文本；用CSS配置页面布局；配置图像和多媒体；探索新增的CSS3特性；应用网页设计*佳实践；设计可访问和可用的网页；搜索引擎优化设计；选择域名；发布网站。

　　本书适合所有对网页设计感兴趣的读者阅读，是一本理想的入门参考。

作者简介

　　美国哈珀学院荣休教授。她熟悉各种平台和软件开发语言，有二十多年的信息技术教学经验，讲授的课程有网页开发、计算机信息系统、教学技术和数学，以及信息管理和数据库研究生课程。

　　莫里斯博士富有创新精神，先后荣获2002—2003年度 Glenn A. Reich纪念奖（嘉奖她在教育技术方面做出的努力）和2006年度 Blackboard Greenhouse远程教学模范奖（嘉奖她在课堂教学中率先使用互联网），还作为2008年度远程教育优秀教师入选美国教育技术委员会。

　　莫里斯博士的《 HTML5网页设计入门经典》已经出版发行到第8版，另一本以动手实作和案例学习著称的入门经典《HTML5与CSS3网页设计基础》系列版本也备受广大师生青睐。

　　她一直保持旺盛的学习力，拥有教育学博士学位、信息系统硕士学位和远程教学硕士学位，以及很多从业资格证书：CIW电子商务设计师、CIW设计师、CIW认证讲师，WOW网络管理员和Adobe认证Dreamweaver 8开发人员。

目录

第1章 互联网和万维网基础 1
1.1 互联网和万维网 2
互联网 2
互联网的诞生 2
互联网的发展 2
万维网的诞生 2
第一个图形化浏览器 3
各种技术的聚合 3
1.2 网页标准和无障碍访问 4
W3C推荐标准 4
网页标准和无障碍访问 4
无障碍访问和法律 4
网页通用设计 5
1.3 浏览器和服务器 6
网络概述 6
客户端/服务器模型 6
1.4 Internet协议 8
电子邮件协议 8
超文本传输协议 8
文件传输协议 8
传输控制协议/Internet协议 8
IP地址 9
1.5 统一资源标识符(URI)和域名 10
URI和URL 10
域名 10
顶级域名 11
通用顶级域名 11
国家代码顶级域名 12
域名系统DNS 13
1.6 网上的信息 14
网上的信息可靠吗？ 14
网上的信息是最新的吗？ 15
有没有指向其他资源的外部链接？ 15
1.7 HTML概述 16
什么是HTML？ 16
什么是XML？ 17
什么是XHTML？ 17
HTML的最新版本HTML5 17
1.8 网页幕后揭秘 18
文档类型定义(DTD) 18
网页模板 18
html元素 18
页头区域 19
主体区域 19
1.9 第一个网页 20
动手实作1.1 20
新建文件夹 20
保存文件 21
测试网页 22
复习和练习 23
复习题 23
动手练习 23
网上调研 24
聚焦网页设计 24
第2章 HTML基础 25
2.1 标题元素 26
动手实作2.1 26
无障碍访问和标题 27
HTML5更多的标题选项 27
2.2 段落元素 28
动手实作2.2 28
对齐 29
2.3 换行和水平标尺 30
换行元素 30
动手实作2.3 30
水平标尺元素 31
动手实作2.4 31
2.4 块引用元素 32
动手实作2.5 33
2.5 短语元素 34
2.6 有序列表 36
type属性，start属性和
reversed属性 36
动手实作2.6 37
2.7 无序列表 38
动手实作2.7 39
2.8 描述列表 40
动手实作2.8 41
2.9 特殊字符 42
动手实作2.9 42
2.10 HTML语法校验 44
动手实作2.10 44
2.11 结构元素 46
div元素 46
header元素 46
nav元素 46
main元素 46
footer元素 46
动手实作2.11 47
2.12 练习使用结构元素 48
动手实作2.12 48
2.13 锚元素 50
动手实作2.13 50
链接目标 51
绝对链接 51
相对链接 51
block anchor 51
2.14 练习使用链接 52
站点地图 52
动手实作2.14 52
2.15 电子邮件链接 56
动手实作2.15 57
复习和练习 58
复习题 58
动手练习 59
聚焦网页设计 59
案例分析 59
Pacific Trails Resort案例分析 60
JavaJam Coffee House案例分析 62
第3章 网页设计基础 67
3.1 为目标受众设计 68
浏览器 69
屏幕分辨率 69
3.2 网 站 组 织 70
分级式组织 70
线性组织 71
随机组织 71
3.3 视觉设计原则 72
重复：在整个设计中重复视觉元素 72
对比：添加视觉刺激和吸引注意力 73
近似：分组相关项目 73
对齐：对齐元素实现视觉上的统一 73
3.4 提供无障碍访问 74
通用设计和增强无障碍访问的
受益者 74
无障碍设计有助于提高在搜索
引擎中的排名 74
法律规定 75
无障碍设计的热潮 75
3.5 文本的使用 76
文本设计的注意事项 76
3.6 调色板 78
十六进制颜色值 78
网页安全色 78
无障碍设计和颜色 79
3.7 针对目标受众进行设计 80
面向儿童 80
面向年轻人 80
面向所有人 81
面向老年人 81
3.8 选择颜色方案 83
以一张图片为基础的方案 83
色轮 84
变深、变浅和变灰 84
单色 85
相似色 85
互补色 86
分散互补色 86
三色 86
四色 87
实现颜色方案 87
3.9 使用图片和多媒体 88
文件大小和图片尺寸 88
抗锯齿/锯齿化文本的问题 88
只使用必要的多媒体 89
提供替代文本 89
3.10 更多设计考虑 90
感觉到的加载时间 91
第一屏 91
适当留白 91
水平滚动 91
3.11 导航设计 92
网站要易于导航 92
导航栏 92
图片导航 93
动态导航 93
站点地图 93
站点搜索功能 94
3.12 线框和页面布局 95
3.13 固定和流动布局 98
固定布局 98
流动布局 99
3.14 为移动网络设计 100
三种方式 100
移动设备设计考虑 100
桌面和移动网站的例子 101
移动设计小结 101
3.15 灵活响应的网页设计 102
3.16 网页设计最佳实践 104
复习和练习 106
复习题 106
动手练习 107
聚焦网页设计 107
网页项目案例分析 108
项目里程碑 108
第4章 CSS基础 111
4.1 CSS概述 112
层叠样式表的优点 112
配置CSS的方法 113
层叠样式表的“层叠” 113
4.2 CSS选择符和声明 114
CSS语法基础 114
background-color属性 114
color属性 114
配置背景色和文本色 115
4.3 CSS颜色值语法 116
4.4 配置内联CSS 118
style属性 118
动手实作4.1 118
4.5 配置嵌入CSS 120
style元素 120
动手实作4.2 121
4.6 配置外部CSS 123
link元素 123
动手实作4.3 123
4.7 CSS的class、ID和后代选择符 125
class选择符 125
id选择符 125
后代选择符 125
动手实作4.4 125
4.8 span元素 127
span元素 127
动手实作4.5 127
4.9 练习使用CSS 129
动手实作4.6 129
将嵌入CSS转换为外部CSS 129
将网页与外部CSS文件关联 129
4.10 层叠 132
4.11 练习使用层叠 134
动手实作4.7 134
4.12 CSS语法校验 136
动手实作4.8 136
复习和练习 138
复习题 138
动手练习 139
聚焦网页设计 139
Pacific Trails Resort案例分析 140
JavaJam Coffee House案例分析 143
第5章 图形和文本样式基础 147
5.1 图片 148
GIF图片 148
JPEG图片 148
PNG图片 149
新的WebP图像格式 149
5.2 img元素 150
动手实作5.1 150
5.3 图片链接 152
动手实作5.2 152

精彩书摘

　　第2章HTML基础

　　第1章使用HTML5创建了第一个网页，并在浏览器中进行了测试。用DTD指定了要使用的HTML版本，并使用了，，

　　学习内容：

　　使用标题、段落、div、列表和块引用来配置网页主体

　　配置特殊实体字符、换行符和水平标尺

　　使用短语元素来配置文本

　　校验网页语法

　　使用新的HTML5header，nav和footer元素配置网页

　　使用锚元素链接网页

　　配置绝对链接、相对链接和电子邮件链接

　　2.1标题元素

　　标题(heading)元素从h1到h6共六级。标题元素包含的文本被浏览器渲染为“块”(block)。标题上下自动添加空白(whitespace)。

的字号最大，

最小。取决于所用字体(第6章将进一步讲解字号)，

，

和

标记中的文本看起来可能比默认字号小一点。标题文本全都加粗。

　　为什么不将标题放到页头区域？

　　经常有学生试图将标题(heading)元素或者说h元素放到文档的页头(head)而不是主体(body)区域，造成浏览器显示的网页看起来不理想。虽然head和heading听起来差不多，但heading一定要放到body中。

　　图2.1显示了6级标题的效果。

　　图2.1示例heading.html

　　动手实作2.1

　　为了创建如图2.1所示的网页，启动记事本或其他文本编辑器。打开学生文件chapter1/template.html。修改title元素并在body区域添加标题。如以下加粗的代码所示。

　　

HeadingLevel1

HeadingLevel2

HeadingLevel3

HeadingLevel4

HeadingLevel5

HeadingLevel6

　　将文件另存为heading2.html。打开网页浏览器(如InternetExplorer或Firefox)测试网页。它看起来应该和图2.1显示的页面相似。可将自己的文档与学生文件chapter2/heading.html进行比较。

　　无障碍访问和标题

　　标题使网页更容易访问和使用。一个好的编码规范是使用标题创建网页内容大纲。利用h1，h2和h3等元素来建立内容的层次结构。同时，将网页内容包含在段落和列表等块显示元素中。在图2.2中，

标记在网页顶部显示网站名称，

标记显示网页名称，其他标题元素则用于标识更小的主题。

　　有视力障碍的用户可配置自己的屏幕朗读器显示网页上的标题。制作网页时利用标题对网页进行组织将使所有用户获益，其中包括那些有视力障碍的。

　　图2.2利用标题创建网页大纲

　　HTML5更多的标题选项

　　你或许听说过HTML5新增的header元素。header提供了更多的标题配置选项，而且通常包含一个h1元素。本章稍后会讨论header元素。

　　2.2段落元素

　　段落元素组织句子或文本。

和

　　图2.3使用标题和段落的网页

　　动手实作2.2

　　为了创建图2.3的网页，启动记事本或其他文本编辑器，打开学生文件chapter2/heading.html。修改网页标题(title)，在

和

之间添加一个段落。

　　

HeadingLevel1

Thisisasampleparagraph.Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

HeadingLevel2

HeadingLevel3

HeadingLevel4

HeadingLevel5

HeadingLevel6

　　将文档另存为paragraph2.html。启动浏览器测试网页。它看起来应该和图2.3相似。可将自己的文档与学生文件chapter2/paragraph.html进行比较。注意浏览器窗口大小改变时段落文本将自动换行。

　　对齐

　　测试网页时，会注意到标题和文本都是从左边开始显示的，这称为左对齐，是网页的默认对齐方式。在以前版本的HTML中，想让段落或标题居中或右对齐可以使用align属性。但这个属性已在HTML5中废弃。换言之，已经从W3CHTML5草案规范中删除了。将在第6章、第7章和第8 HTML5与CSS3从入门到精通（第3版） 电子书 下载 mobi epub pdf txt