HTML5与CSS3从入门到精通(第3版)

HTML5与CSS3从入门到精通(第3版) pdf epub mobi txt 电子书 下载 2025

[美] Terry,Felke-Morris 著
图书标签:
  • HTML5
  • CSS3
  • 前端开发
  • Web开发
  • 网页设计
  • 入门教程
  • 技术
  • 编程
  • 计算机
  • 精通
想要找书就要到 新城书站
立刻按 ctrl+D收藏本页
你会得到大惊喜!!
出版社: 清华大学出版社
ISBN:9787302473268
版次:3
商品编码:12127863
包装:平装
开本:16开
出版时间:2017-06-01
用纸:胶版纸
页数:434
字数:610000
正文语种:中文

具体描述

产品特色

编辑推荐

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

   互联网与万维网基础

   用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版本,并使用了,,,<meta/>和<body>标记。本章继续学习HTML,要用HTML元素(包括新的HTML5header,nav和footer元素)配置网页结构和文本格式。要学习超链接的知识,它使万维网成为信息互联网络。要配置锚元素,通过超链接使不同的网页链接到一起。阅读本章时,一定要把每个例子过一遍。网页编码是一种技术活儿,而每种技术都需要练习。</body>

  学习内容:

  使用标题、段落、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区域添加标题。如以下加粗的代码所示。

  

  

  

  HeadingExample

  

  

  

  

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.3使用标题和段落的网页

  动手实作2.2

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

之间添加一个段落。

  

  

  

  ParagraphExample

  

  

  

  

HeadingLevel1

  

Thisisasampleparagraph.Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  

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

  对齐

  测试网页时,会注意到标题和文本都是从左边开始显示的,这称为左对齐,是网页的默认对齐方式。在以前版本的HTML中,想让段落或标题居中或右对齐可以使用align属性。但这个属性已在HTML5中废弃。换言之,已经从W3CHTML5草案规范中删除了。将在第6章、第7章和第8章学习如何使用CSS配置对齐。

  发布Web内容时避免使用长段落。人们喜欢快速扫视网页,而非逐字阅读。使用标题概括网页内容,并使用短的段落(三五句话即可)和列表(本章稍后学习)。

  2.3换行和水平标尺

  换行元素

  换行元素造成浏览器跳到下一行显示下一个元素或文本。换行标记单独使用——不成对使用,没有开始和结束标记。我们说它是一种独立或自包容标记。它在HTML5中称为void元素,编码成
。图2.4的网页在段落的第一句话之后使用了换行。

  图2.4注意,第一句话之后发生了换行

  动手实作2.3

  为了创建图2.4的网页,请启动文本编辑器并打开学生文件chapter2/paragraph.html。将标题修改成“LineBreakExample”。将光标移至段落第一句话“Thisisasampleparagraph.”之后。按Enter键,保存网页并在浏览器中查看。注意,虽然源代码中的“Thisisasampleparagraph.”是单独占一行,但浏览器并不那样显示。要看到和源代码一样的换行效果,必须添加换行标记。编辑文件,在第一句话之后添加
标记,如下所示:

  

  

HeadingLevel1

  

Thisisasampleparagraph.
Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  将文件另存为linebreak2.html。启动浏览器进行测试,结果如图2.4所示。可将自己的作品与学生文件Chapter2/linebreak.html进行比较。

  水平标尺元素

  网页设计师经常使用线和边框等视觉元素分隔或定义网页的不同区域。水平标尺元素


在在网页上配置一条水平线。由于水平标尺元素不包含任何文本,所以编码成void元素,不成对使用。水平标尺元素在HTML5中有新的语义——代表内容主题分隔或变化。图2.5展示了段落后添加水平标尺的一个网页(学生文件chapter2/hr.html)。第6章将学习如何使用层叠样式表(CSS)为网页元素配置线和边框。

  至于要不要在网页上使用水平标尺,请三思而行,一般留空就足以分隔内容了。

  动手实作2.4

  为了创建图2.5的网页,请启动文本编辑器并打开学生文件chapter2/linebreak.html。将标题修改成“HorizontalRuleExample”。将光标移至

标记后并按Enter键另起一行。在新行上输入
,如下所示:

  

  

HeadingLevel1

  

Thisisasampleparagraph.
Headingtagscanhelptomakeyourpagesmoreaccessibleandusable.Itisgoodcodingpracticetouseheadingtagstooutlinethestructureofyourwebpagecontent.

  

  


  

HeadingLevel2

  

HeadingLevel3

  

HeadingLevel4

  

HeadingLevel5

  

HeadingLevel6

  

  将文件另存为hr2.html。启动浏览器进行测试,结果如图2.5所示。可将自己的作品与学生文件Chapter2/hr.html进行比较。

  2.4块引用元素

  除了用段落和标题组织文本,有时还需要为网页添加引文。

标记以特殊方式显示引文块——左右两边都缩进。引文块包含在
标记之间。

  图2.6展示了包含标题、段落和块引用的示例网页。

  图2.6块引用元素中的文本被缩进了

  使用

标记可以方便地缩进文本块。你或许会产生疑问,
是适合任意文本,还是仅适合长引文。
标记在语义上正确的用法是缩进网页中的大段引文块。为什么要强调语义?这是为将来的“语义网”准备的。《科学美国人》(ScientificAmerican)将“语义网”描述成“对计算机有意义的一种新形式的网页内容,具有广阔发展前景。”以符合语义的、结构性的方式使用HTML是迈向“语义网”的第一步。所以如果仅仅是缩进文本,就不要使用
。本书以后会讲解如何配置元素的边距和填充。


前言/序言

  《HTML5与CSS3从入门到精通》适用于网页设计或开发初级课程。每个主题都只用两页篇幅进行讲解,在指出关键点的同时,一般还包含动手实作。全书覆盖网页设计师需要掌握的所有基础知识,包括以下主题:

  互联网和万维网的概念

  用HTML5创建网页

  用层叠样式表(CSS)配置文本、颜色和网页布局

  对网页上的图片和多媒体进行配置

  探索新的CSS3属性

  网页设计最佳实践

  对无障碍访问、可用性和搜索引擎优化的考量

  取得域名和主机

  发布到网上

  本书中文版的学生文件可以从配套网站http://pan.baidu.com/s/1yd43W下载,其中包括动手实作的原始文件和解决方案,以及案例分析的原始文件。

  在本书第2版取得极大成功之后,第3版新增了以下特性:

  更丰富的动手实作

  全面更新了范例代码、案例分析和网络资源

  根据HTML5元素和HTML5API进行了更新

  对响应性网页设计技术和CSS媒体查询进行了更全面的介绍

  更新了HTML5和CSS参考资源

  本书特色

  立足当下,展望未来。本书采用独特的教学方式,使学生在学习适合当下的网页设计技能的同时,掌握新的HTML5编码技术,迎接未来的挑战。

  精心挑选主题。本书既传授“硬”技能,比如HTML5和层叠样式表(第1章和第2章,第4章~第11章),也传授“软”技能,比如网页设计(第3章)和发布到网上(第12章)。打下良好基础之后,学生作为网页设计师追寻自己的职业梦想时,会更加得心应手。使用本书的学生和老师会发现,我们这个课程变得更有趣了。学生在创建网页和网站时,可以一起讨论、综合和运用软硬技能。每个主题都用两页的篇幅来讲解,除了快速提供需要掌握的知识点,还通过动手实作来立即巩固所学到的知识。

  每个主题两页篇幅。每个主题都用简洁的、两页篇幅的一个小节进行讲述。许多小节还包含马上就可以开始的动手实作,旨在帮助巩固新学的技能或概念。这种精心设计对学业沉重的学生尤其有用,因为他们需要立即搞清楚关键的概念。

  动手实作。网页开发是一门技能,只有通过动手实作才能更好地掌握。本书十分强调实际动手能力的培养,体现在每章的动手实作练习题、章末练习题以及通过真实的案例分析来完成网站的开发。

  网站案例分析。从第2章开始,案例分析将贯穿全书。它的作用是巩固每章所学的技能。教师资源中心提供了案例的示例解决方案,网址是http://www.pearsonhighered.com/irc。

  聚焦网页设计。大多数章都提供额外的活动来探索与本章有关的网页设计主题。这些活动可以用于巩固、扩展和增强课程主题。

  在我的网页开发课堂中,学生经常会问到一些同样的问题。书中列出了这些问题,并用FAQ标志注明。

  开发无障碍网页的重要性日益增强,所以无障碍网页设计技术将贯穿全书。这个特殊标记可以让您更方便地找到这些信息。

  本书使用特殊的道德规范标记注明与网页开发有关的道德规范话题。

  提供有用的背景资料,或者帮助提高生产力。

  这个特殊标记代表可供深入探索的网络资源,方便学生对当前主题进行深入学习。

  参考资料。附录提供了丰富的参考资料,包括XHTML参考、HTML5参考、CSS参考、WCAG2.0快速参考以及对ARIALandmarkRoles的概述。

  视频讲解(VideoNote)旨在讲解关键编程概念和技术,演示从设计到编码来解决问题的过程。视频讲解使学生可以方便地自学自己感兴趣的主题,支持选择、播放、倒退、快进和暂停。每当看到视频讲解:……,都表明当前主题有对应的视频讲解。视频列表可以从本书中文版配套网站获取,网址是http://pan.baidu.com/s/1yd43W。注意,由于是英文视频,所以为了方便索引,书中保留了这些视频的英文名称。

  补充材料

  学生资源。本书中文版读者请访问http://pan.baidu.com/s/1yd43W获取动手实作的原始文件和解决方案以及案例分析的原始文件。

  教师资源。以下补充资源只供符合条件的教师使用,请发送邮件到coo@netease.com了解更多信息。

  章末练习题答案

  案例分析作业答案

  试题

  PPT演示文稿

  示范教学大纲

  作者网站。除了出版社为本书提供的配套网站,作者另外建了一个网站,网址为http://www.webdevbasics.net。该网站拥有许多额外的资源,包括调色板、Flash学习/复习游戏、AdobeFlash教程、AdobeFireworks教程和AdobePhotoshop教程。还为每一章都单独建一个网页,提供这一章的示例、链接和更新信息。该网站由作者个人维护,不是出版商赞助的。

  致谢

  特别感谢Addison-Wesley的同仁,包括MattGoldstein,KelseyLoanes,CaroleSnyder和CamilleTrentacoste。

  感谢我的家人,尤其是我的“另一半”,感谢他的耐心、关爱、支持和鼓励。最后还要特别纪念我的父亲,我们永远想念他。



用户评价

评分

评分

评分

评分

评分

评分

评分

评分

评分

相关图书

本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度google,bing,sogou

© 2025 book.cndgn.com All Rights Reserved. 新城书站 版权所有