作者：[美]Christopher Schmitt 著

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

响应式Web设计从入门到精通(套装共5册)试读：

前言

网页中的图形设计是在线内容用户体验的关键，尤其是现在的用户会使用多种设备访问网页，如智能手机、平板电脑、笔记本电脑、桌面电脑，甚至是智能电视。本书以创建响应式Web的角度，介绍了基础的HTML和CSS语法，并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。

本书结构整、轻松易懂，能够帮助Web设计新手快速入门，并打下坚实的基础。其他献给Nick、Elisabeth、Matt、Mary、Rose、Michael、Ryan、Megan、Meredith、Gianna前言

曾经，传统设计师在Photoshop中设计网页，并将其导出为一张巨大的图像，并声称这就是网站。

但设计师在意识到可以使用HTML和CSS设计出伟大的网页后，他们开始改变设计方式，但又遇到了新的问题：网页至少要960像素宽或固定宽度。

随着智能手机和平板电脑等移动设备的普及，网页既可以横向，也可以纵向显示。设计不再以桌面浏览器窗口的宽度为标准。为此，我们重新审视最佳实践并且采用新技术。

本书想要告诉初学者或已入门的网页设计师如何创建并强化网页中的图形部分，来满足当前的网站和移动标准。

在一个漂亮的网站中，所有这些工作一个人就能完成。亲爱的读者，你也可以。

本书提供了在开发环境下关于HTML和CSS的基础知识。为了帮助你掌握技术和技巧，我们将逐章深入地介绍更加先进或者独一无二的设计解决方案。

做好准备，出发！

网页设计在不断发生着变化，本书将为你介绍图形和其他基础知识。第1章了解HTML“从网络汲取信息正如从消防栓处饮水一样。”——米切尔·卡普尔（计算机软件界传奇人物）

因特网上充满了丰富多彩的内容，只要能想到，你就能查到，它们都是像你我这样的普通人放在那里的。你也可以扮演创建者，为因特网创建内容。HTML是将想法展现给其他人的关键。

HTML是超文本标记语言的缩写。尽管它听起来像一门深奥的计算机语言，但是它并不会为难使用者。理解HTML最好的方式就是将其想象为围绕文字和图像的一系列描述，并将它们展现在Web浏览器上。1.1 为什么要学习HTML？

作为一种最完善的体系，HTML可以让人们以更快、更有效的方式在全世界范围内交换信息。1.1.1 HTML使得因特网更受欢迎

虽然因特网使得计算机能够通过网络相互连接，但是通过命令行或者基本的程序（如Gopher，见图1.1，或Archie）来上网的体验是不连续的。Web浏览器改变了这一切。图1.1 使用Gopher的文本显示访问因特网，注意这里缺少广告横幅

万维网基于HTML创建的页面和链接，使得Internet用户能够更容易地对内容进行操作。随着图像在浏览器中广泛使用，以及基础文本格式的普及，这种快速、令人沉浸的内容发布与共享，向更多的人敞开了大门。

手工编写完整网站

一些人认为，手工编程的时代已经一去不复返了。多亏了像WordPress、Drupal和ExpressionEngine这样内容管理程序包，你才可以创建一些网站，并在这些网站中自由地制作导航菜单或组织日志。把这些可重用的组件拼成一个网站是很简单的，但是创建一个博客网站并不是简单地装配好各个部分就可以了，因为每个人的需求和目标都是独一无二的。所以理解HTML可以帮助你更好地实现目标。1.1.2 学习HTML，更好地理解网页设计

学习HTML的基础知识可以帮助你成为一个更出色的网页设计师，更快地将设想中的网页实现出来；即便不能，它也能让你知道为什么以及如何使用它。将某些编程语言和HTML结合使用，就能为网站创造更多的亮点。1.1.3 学习HTML很容易

许多设计师通过自学HTML来让自己更加全面和专业。随着行业持续不断的发展，甚至连一些经验丰富的网站设计师也能通过别人了解到HTML更多的潜能。

和查看桌面程序和手机应用程序的代码相比，查看网页的代码非常简单。代码的透明使得学习HTML和网页设计的其他相关细节变得很容易。为了揭示HTML在网页中是如何运用的，你可以在浏览器中选择“查看源代码”之类的命令（通常可以在“文件”或“查看”菜单中找到），这样就能够准确地看到代码是什么样的（见图1.2～图1.5）。通过这种方法，很多初学者和专业人员都可以复制例子中的代码——我不会反对这种做法，反而要鼓励！图1.2 在Chrome浏览器中查看源代码图1.3 在Safari浏览器中查看源代码图1.4 在Firefox浏览器中查看源代码图1.5 在Opera浏览器中查看源代码

程序与标记 程序通过一些信息告诉软件去做一些事情，而HTML则可以被视为一种编程语言。然而，用计算机编程语言（如Java、C++、Python和无数其他编程语言）在处理更复杂的任务时，需要用到比HTML更多的专业技能和软件。因此，虽然HTML被称为一门语言，但是，它并不像别的编程语言那样令人却步。

分享你所学到的

在网页设计和开发行业中，许多方面的成果都是公开的。通过博客帖子、博客评论，以及GitHub、Dribbble或其他一些网站上的代码，可以与其他人一起分享你学到的东西。我们的行业以闪电般的速度前进着，而帮助别人就等于帮助自己。

！从模仿到掌握，不要停止

照搬喜欢的示例代码是一种很好的学习方式。需要注意的是，不要盲目地复制和粘贴代码和图像，并认为其是自己的。你不可以照搬从网站上找到的网页，并把它作为自己的作业交给老师——网页设计也一样（任何行业都是这样）。

网站词典

为了更透彻地理解这本书内容，你需要知道以下术语和关于网页设计的知识。

■ 互联网包含了数以百万计的网站，每个网站都有一个唯一的网站地址，被称为资源定位符或URL（例如，http://www.google.com）。

■ 每个网站都包含许多相关内容的页面。

■ 网站中的每个页面都能通过桌面电脑或移动设备（如智能手机或平板电脑）的Web浏览器来浏览（如Chrome、Internet Explorer、Firefox、Safari和Opera）。

■ 网站访客从一个页面跳转到另一个网站的链接，也被称为超链接。1.2 HTML编程基础

在开始编写HTML代码之前，你还有需要掌握一些基本的术语。1.2.1 文本编辑器

为了编写代码，你需要一个文本编辑器。如果你使用的是Windows系统PC，那么看一下你的电脑桌面上有没有一款如Notepad的基本编辑程序。如果是Mac，那么就是TextEdit。每台电脑中都有文本编辑器，无论它是什么名字，它的功能依旧。

首先，要特别注意的是，HTML必须保存在文本模式下，包括文件扩展名.html或.htm，最好在Unicode模式下。

专业的文本编辑器 我推荐使用专业的文本编辑工具，如PC上的TextPad或Mac上的BBEdit。Sublime Text 2是一个不错的选择，可以在Mac或PC上使用。1.2.2 文字处理软件不是文本编辑器

Microsoft Word和Apple Pages是文字处理软件，而不是文本编辑器。这些软件会为你的文字添加格式，扰乱你的代码。

苹果内置的文字编辑器TextEdit是一个混合体。它可以完成很多文字处理软件的格式化任务，但它又具有纯文本模式，所以你可以使用它来编辑网页（并且，它是免费的！）。

当保存文件时，你需要采取一些步骤来防止TextEdit剥离你的HTML。选择Preferences，在New Document部分中，在Format副标题下勾选“Plain text”（纯文本），然后单击“Open and Save”，勾选“Ignore rich text commands in HTML files”（在HTML中忽略富文本命令）。

Unicode

Mac和Windows操作系统在全世界范围内被人们广泛使用，它们以不同语言和不同字母来呈现文本。计算机用来展现文本的基础数字描述，最开始是在一个限制非常多的环境下编写的，没有考虑到其他语言文字，如西班牙重音和中国的表意文字。

过去，世界其他地方的人访问网页时常常会看到一大堆替代字母。浏览器尝试着渲染字母，但是它无法从用户本地字符库中寻找到合适的字母，如图1.6所示。

这个问题的解决方案就是Unicode标准。它包括了十万多个字符，包括图标和世界上大多数文字系统。将网页保存成Unicode可以提供一个好的平台以接触最广泛的用户。图1.6 转换字母编码时产生的文本显示问题1.2.3 用HTML编写代码

好了，让我们来看看敲入的twain.html文件，这名话引自一位美国作家（见图1.7）:

“Always do right. This will gratify some people and astonish the rest.”

——Mark Twain（马克·吐温）

HTML的p元素（见图1.8）告诉浏览器，引用和作者要放置在两个段落里。图1.7 基本格式的页面图1.8 带有段落格式的页面

"Always do right. This will gratify some people and astonish the rest."

- Mark Twain

p元素是由围绕内容的标签组成的。除了一些少数例外，HTML元素是以成对的打开和闭合标签出现的，如包含内容的

和

没有成对出现的元素会自动闭合。

例如，水平线标签（hr）从未真正包含或环绕任何文本，它仅仅是简单地显示一条水平线，如图1.10所示。

"Always do right. This will gratify some people and astonish the rest."

- Mark Twain

要在每一个开始水平线标签后面加上一个结束标签，这将是一件非常枯燥的事，例如，

通过元素，HTML为网页或文档提供了结构。这个结构是由标题、段落、块引用、超级链接和其他一些主要部分构成的。下面我们通过标记文本文件来创建一个HTML文档。1.3.1 指定DOCTYPE

在你最常用的文本编辑器里，给第一行添加以下标签：

HTML文档里的第一行就是文档类型，或者是文档类型声明。文档类型会告诉浏览器你正在使用HTML的版本，这样就能够决定浏览器如何渲染页面。对于本文档以及本书中的例子，除非另有说明，否则我们都将使用HTML5文档类型。在编写本书时，HTML5是最新的版本，新增了许多特性。

如果你忽略了文档类型或者声明了错误的文档类型，浏览器仍然会显示页面，但是文档验证是错误的，而且页面的样子和行为也许与预期的不同。

XHTML 曾经有一段时间，当 HTML 被嵌套在XML中时，即是可扩展标记语言（XHTML）。就编码规则而言，XHTML更加严格。因此，很少有网站是使用XHTML建立的。如今，我们已经能够接受非程序员在HTML 5中随意的标记风格。

！HTML不是为了设计

HTML并不是通过指定字体、颜色和元素的位置来控制网页的样式。它是关于语义的，并且确保每一块内容都能够正确使用对应的HTML元素。

！HTML校验

在文档的开始位置一定要包含DOCTYPE声明标签，我们稍后会在本书中详细地讨论校验。

执行以下5个步骤，标记head、body和title

1 使用开始和结束html标签封装文档。在DOCTYPE下面放置开始标签，在文档的最后放置结束标签。

2 现在添加标签，将文档分成两部分：标题（head）和内容（body）。页面中的head元素包含了很多关于文档的重要信息，比如标题、作者、关键字（以提高其在搜索引擎中结果的排名）和其他所需的元数据。把head放在顶部，文本开始之前。

3 页面的body元素中包含了文档的主体部分：内容，或者在浏览器窗口中实际显示的部分。将所有的页面内容都封装在标签里。

4 title元素放置在一对head标签之间。虽然页面head部分的大多数元素都是可选的，但是所有的HTML文档必须有一个标题，它将显示在用户的Web浏览器的标题栏中（这是head信息中唯一显示的部分）。输入title元素，如下所示。

5 所有的HTML文档必须有DOCTYPE、head和body，这些元素是一个文档的基本框架。现在，既然我们知道在浏览器中所看见的内容放在body元素中，接下来就让我们把Mark Twain的话引入到当前页面。

"Always do right. This will gratify some people and astonish the rest."

- Mark Twain

现在把文件保存为HTML文档。在文本编辑器的文件菜单里以扩展名.html（如twain.html）保存该文件。

一旦页面被正确地保存为一个HTML文档，这个文件的图标将变成你的默认浏览器的图标。只要双击页面或者在浏览器中单击文件>打开，就能在浏览器中浏览它（见图1.11）。图1.11 浏览器中显示的页面

哇！我们正式地创建了一个HTML网页！

！注意如何保存你的文件

如果你使用的是Mac上的TextEdit，一定要确保从格式菜单中选择“Make Plain Text”（纯文本），并且保存为Unicode（UTF-8）的纯文本编码。如果使用的是PC，要确保“所有文件”和“Unicode”同时被选中。

请注意，如果删除了那些p元素，而只留下文本，浏览器就会在无段落划分的情况下渲染文本，如图1.12所示。图1.12 没有标记时，段落都连在了一起

如果想要添加换行、额外的空白和段落，必须通过添加标记标签来指定文档中的那些元素。所以让我们设置一些布局来使网页变得更漂亮吧。1.4 布置页面内容

现在，网页中已经有了一些内容，让我们添加一些标题并进行排版处理吧。1.4.1 HTML标题

首先，使用h1标签给网页添加一个标题（见图1.13）：图1.13 给页面添加标题

Mark Twain Quote

"Always do right. This will gratify some people and astonish the rest."

- Mark Twain

标题标签可以从h1（顶级标题）一直到h6（最低级别的标题），如图1.14所示。图1.14 从h1到h6的标题示例

通过使用标题组织网页页面，可以将内容划分为更易管理的块，以便让访客更加轻松地浏览页面和查找信息。1.4.2 HTML文本标签

现在我们给文本添加一些语义化的标签。因为在该页面中有一段引用，所以我们使用blockquote（块引用）元素（见图1.15）。图1.15 引用块元素用于引用

Mark Twain Quote

"Always do right. This will gratify some people and astonish the rest."

-Mark Twain

使用正确的方式标记标题

以正确的顺序使用标签是一个正确的实践。如果你在h2标签下使用一个小标题，例如，这个小标题应该嵌套在h3标签（不是h4或h5）中。页面的标题嵌套在h1标签中，而不是h2标签中。总之，不要跳过标题的层次！

以正确的顺序使用标题标签能够保证语义正确，并且有助于优化搜索引擎的搜索结果，因为搜索引擎是根据标题来排列信息的重要性的。不要担心特殊标题的大小或样式——你将在第3章中学习如何使用CSS调节这些属性。

接下来，让我们通过使用strong和em元素，为文档添加粗体和斜体格式（见图1.16）。图1.16 在引言中添加强调效果

h1>

Mark Twain Quote

"Always do right. This will gratify some people and astonish the rest."

-Mark Twain

请注意，strong和em默认的渲染方式分别是粗体和斜体。而且，在浏览器中可以使用b和i元素来实现同样的视觉效果。换句话说，你可以使用任意一对元素来实现这些效果。1.4.3 为网站创建链接

网站最有特色的地方就是链接。如果不能使用超链接来互连我们的网页（见图1.17），那么万维网的特性将会大大减少。图1.17 光标滑过一个链接时的效果

我们使用锚标签来定义超链接。a元素用于标记一些文本或图像作为一个路径（见图1.18），跳转到别的文档或当前文档的不同部分。图1.18 本例中光标滑过一个链接

Mark Twain Quote

"Always do right. This willgratify some people and astonish the rest."

- Mark Twain

开始的锚标签可以通过添加的属性和值进行扩展。属性是包含在开始标签中的附加信息，可以提供关于元素的上下文信息。每一个属性都有一个用引号包裹的引用值。

只需要一个属性就够了

有时候在HTML里面，只需要添加一个属性就可以让浏览器渲染一个元素。1.4.4 添加title属性

title属性用于提供关于链接的额外信息（或其他任何元素）。当访客用鼠标滑过附有title属性的链接（或其他元素）时，浏览器会显示附有标题内容的提示信息。

Mark Twain Quote

"Always do right. This will gratify some people and astonish the rest."

-Mark Twain

结果如图1.19所示。图1.19 页面在浏览器中的显示效果

！标题属性与标题元素

title属性与title元素是不同。title元素放置在head元素中，并且只能命名页面一次。1.4.5 网站的链接

让我们再看一下我们创建的第一个链接：

Mark Twain

以上地址类型被认为是一个绝对链接。因为这个链接是一个完整的URL或网页地址，所以无论用户在网上的什么地方，都可以访问这个网页。

1．使用相对链接

当在网站内或页面中创建链接时，有时你会想使用相对链接。只要你在同一个网站浏览别的页面，相对链接的地址就是有效的。例如，某个网站由4个页面构成：index.html、page1.html、page2.html和page3.html。设想它们都在同一个根文件夹下，该文件夹包括网站的HTML文件、图像和辅助文件（见图1.20）。图1.20 网站的文件夹结构

如果想在网站内创建一个从index页面跳转到另一个页面的链接，那么就需要创建一个有着绝对路径的链接，例如：

Page 1

你也可以使用相对链接，例如：

Page 1

以其他名称命名根文件夹

在整个网站中，根文件夹是必需的，它包含了你的网站运行所需的所有文件和资源。

相对链接既没有完整的http://协议，也没有域名。当浏览器捕捉到一个相对链接时，它就会寻找与用户当前浏览的页面相关的页面进行跳转。尝试添加一个从index.html文档到page1.html的相对链接（见图1.21）。你也可以再添加一个链接返回到index页面！

2．导航文件夹

正如你的电脑中有许多包含文件的文件夹，网站也是由许多文件和文件夹所构成的。在同一个网站中从一个文件夹链接到不同文件夹中的另一个文档时，通常使用相对链接。例如，我们假设有一个名为“subfolder”的文件夹中有一个主页面。下面的代码示例链接到了“subfolder”文件夹里的page1.html。

page1.html

这个文件夹必须与导航之前的页面放在同一个目录下。

接下来的代码示例将链接到page1.html，而当前页面必须与page1.html放在相同的文件夹里。也就是说，浏览器导航到当前页面的外部，然后在这个文件夹上一级的文件夹中寻找这个文件（见图1.22）。两点加一个斜杠告诉浏览器跳转到上一级文件夹。

Page 1

如果你想去上两级目录，需要重复输入两个点和斜杠的组合（见图1.23）。

Page 1

3．使用根相对链接

同一个网站中的文件夹之间使用相对链接进行跳转，对大网站来说可能很复杂。想象一下，在一个巨型的网站中，你不得不通过两点加一个斜杠的方式来建立导航。

另一种链接方法是使用根相对链接，它会告诉浏览器到达文件堆栈的顶部，并且从这个地方根据指定的路径进行寻找。假设page1.html在一个名为products的文件夹里，但是这个页面当前正在被别的文件查看（见图1.24）。我们使用一个斜杠来告诉浏览器到达文件夹堆栈的顶层，然后查看products文件夹从而寻找page1.html。

Products Page 1图1.21 资源和目的地在同一个文件夹图1.22 链接的目的地是文档结构中链接资源的上层文件夹

试读结束[说明：试读内容隐藏了图片]

下载完整电子书