图书

课程

文章

专题

电子书

HTML5与CSS3网页设计项目教程

978-7-115-66899-8

作者: 孙海曼凌杰

译者:

编辑: 谢晓芳

分类: 网页开发交互设计

图书目录:

详情

本书旨在通过模拟实际生产环境中企业网站设计的基本流程，系统介绍HTML5和CSS3及相关框架在网页设计中的应用。本书内容包括企业的线上名片设计、企业网站的首页设计、企业网站的“新闻动态”页设计、企业网站的“产品展示”页设计、企业网站的“申请加盟”页设计5个核心项目，有助于读者在实践中掌握页面布局、色彩搭配、图片处理等方面的网页设计技能。本书适合对Web前端开发感兴趣的初学者、计算机专业的学生和从事网页设计的在职人员阅读。

图书摘要

版权信息

移动开发系列丛书

书名：HTML5与CSS3网页设计项目教程

ISBN：978-7-115-66899-8

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版权

著孙海曼凌杰

责任编辑 谢晓芳

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内容提要

本书适合对Web前端开发感兴趣的初学者、计算机专业的学生和从事网页设计的在职人员阅读。

项目1　企业的线上名片设计

企业的线上名片设计项目在网页设计领域中属于卡片式页面设计项目，此类项目主要用于为企业（或个人）提供联系方式。一方面，它可清楚地展示企业或个人的基本信息和联系方式，方便客户将其快速保存到通信录中；另一方面，它可以方便地展示企业的Logo、简介、主营产品等信息。

【学习目标】

初步了解完成网页设计工作所要执行的基本步骤，以及执行这些步骤所需掌握的基本知识。总而言之，在完成本项目之后，读者应该能够：

● 了解在网页设计工作中需要用到的基础技术；

● 构建进行网页设计工作需要的软件环境；

● 掌握构建网页设计项目所需执行的基本步骤。

【学习场景描述】

现在，假设你是一名刚进入职场的网页设计师，接到的第一个项目是为一家名为凌雪冰熊的新创饮料店设计网页版的线上名片。在这家饮料店创立之初，创业者要做的事非常多，在这个时期虽有宣传的急迫需求，但通常既无时间又无资金来创建一个完整且专业的主页型网站来展示自己的企业。在这种情况下，先花十几分钟设计一个只包含简单信息的网页，然后将它作为企业的线上名片发布在互联网上也不失为一种权宜之计。另外，这样做可以为将来正式的首页准备服务器、URL等资源。

【任务书】

● 项目名：制作凌雪冰熊饮料店的线上名片。

● 委托方：凌雪冰熊饮料店。

● 项目资料如下。

– 地址：上海浦东新区某某路×号。

– 电话号码：123-456-7890。

– 电子邮件：message@snowbear.com。

– 企业Logo：如图1-1所示。

▲图1-1 凌雪冰熊的Logo

● 项目要求：设计一个能用于推广新创工作室的网页，该网页应符合以下要求。

– 该网页包含该饮料店的Logo、地址、电子邮件与电话号码等基本信息。

– 该网页的外观需要有现实世界中名片的基本形态，即它应该有一个矩形边框。

● 时间要求：在1个工作日内完成。

【任务拆解】

整个网页设计项目可以划分为以下3个小任务。

● 创建一个网页设计项目，并根据委托方提供的资料确定项目的目录结构。

● 编写一个HTML文档，以便定义网页的结构及其要呈现的信息元素。

● 设计网页的外观样式，让网页以类似于现实世界中名片的形态呈现给用户。

【知识准备】

HTML和CSS是开发者在网页设计工作中必然会用到的计算机标记语言，前者用于定义网页的内容结构，后者用于定义网页的外观样式。在具体实施本项目之前，读者要初步了解一下这两门语言以及它们各自采用的标准版本，并配置开展网页设计项目的工作环境。当然，如果读者认为自己已经掌握了这部分知识，可自行跳过这些内容，直接进入本项目的【工作实施与交付】环节。

知识点1：HTML基础

超文本标记语言（HyperText Markup Language，HTML）是一门用于描述网页的文档结构及其内容的标记语言，因此网页通常被称作HTML文档。该标记语言的主要作用是将网页描述成一个树状的数据结构，以便网页浏览器将其解析成可被JavaScript、VBScript等语言识别的对象模型，这样人们就可以用编写代码的方式来对网页进行操作了。在本书中，按照HTML5的标准，定义网页的文档结构及其要显示的内容。该标准赋予了HTML在面对富媒体、富应用及富内容时强大的描述能力，这将有助于设计出信息量更丰富的网页。

HTML是一门计算机标记语言，这意味着学习HTML的主要任务就是学会如何使用一系列带尖括号的语法标记。为了使用这些语法标记，这里先介绍一些基本概念。

下面的伪代码用于演示HTML标记的用法。

<tag name="example">
    需要使用tag标记定义的内容
</tag>

在上述伪代码中，定义了一个名为“tag”的元素，<tag>和</tag>是用于创建该元素的标记，<tag>被称为开始标记，</tag>被称为结束标记，而name定义的是该元素的属性，它们之间的关系具体如下。

● 标记：HTML中基本的语法单元，由一系列用尖括号包围的关键字（如前面的tag，这些关键字通常被称为“标记名”）组成，用于定义HTML文档的基本结构及其要显示的内容。

● 元素：HTML文档的基本组成部分，通常情况下由一个开始标记和一个结束标记定义（少数元素也可使用单一标记来定义），这对标记之间的内容通常将作为HTML文档的一部分显示在浏览器上。

● 属性：HTML元素的重要部分，通常出现在被定义元素的开始标记中，并被放置在标记名之后，如果存在多个属性，则以空格分隔，其作用是告诉浏览器如何解析当前标记定义的元素。

在掌握了以上3个基本概念及它们之间的关系之后，开始学习在网页设计工作中常用的HTML标记及其作用。本书将会结合项目讲解这些标记的具体使用方法。以下是本项目将会用到的HTML标记。

● <!DOCTYPE>标记：用于指定文档的类型，通常被放置在被定义文档的第一行。例如，如果要定义的是一个基于HTML标准的网页文档，那么该标记应该是<!DOCTYPE html>。

● <html>标记：用于定义网页文档的总标记。这意味着，所有网页的定义代码都必须从一个<html>标记开始，并以一个</html>标记结束，其他所有的HTML标记必须放在这两个标记之间。

● <head>标记：用于定义网页头部信息的总标记。网页文档中所有与头部信息相关的定义代码都必须从一个<head>标记开始，并以一个</head>标记结束，其他用于描述具体头部信息的HTML标记必须放在这两个标记之间。在HTML的语义中，头部信息主要提供了网页文档的元数据、外链文件、内嵌代码等信息。虽然这些信息通常不会在网页中直接显示，但是因为它们可被Google之类的搜索引擎以及与网页浏览器相关的应用程序读取并进行相关的解析和渲染，所以经常会通过定义头部提高网页的可访问性、可读性及可发现性。

● <body>标记：用于定义网页主体内容的总标记。网页中所有与可显示内容相关的定义代码都必须从一个<body>标记开始，并以一个</body>标记结束，其他需要用于表示文字、图片、用户界面元素及具体内容信息的HTML标记都必须放在这两个标记之间。

● <meta>标记：用于定义网页的具体元数据，例如，通过该标记将当前网页使用的字符集定义为UTF-8。

● <title>标记：用于定义网页文档的标题。该信息通常会显示在浏览器的标题栏中。

● <link>标记：用于定义网页文档所要链接的外部信息，例如，通过该标记将要使用的外部CSS文件链接到该网页文档中。

● <div>标记：用于在网页中定义一个块状显示元素，这是网页设计中会用到的基本布局工具。例如，在本项目的代码中，读者将会看到一个id="card"的块状元素，它的作用是在网页中显示一张名片应有的卡片形态。

● <h1>标记：用于在网页中定义一级标题元素。例如，在本项目的代码中，读者将会看到用该标记在网页中显示“凌雪冰熊饮料店”的字样。

● <p>标记：用于在网页中定义一个文本段落元素。例如，在本项目的代码中，读者将会看到用该标记在网页中对“凌雪冰熊饮料店”进行介绍。

● <ul>与<li>标记：用于在网页中定义一个无序列表元素。例如，在本项目的代码中，读者将会看到用该标记在网页中显示凌雪冰熊饮料店的地址、电话号码和电子邮件信息。

知识点2：CSS基础

层叠样式表（Cascading Style Sheet，CSS）是一门专用于定义网页外观样式的计算机标记语言。人们可以使用这门语言对网页中出现的图片、文本、按钮等元素进行像素级别的精确控制。在本书中，按照CSS3标准，定义网页的外观样式。该标准新增了圆角效果、渐变效果、图形化边界、文字阴影、透明度设置、多背景图设置、可定制字体、媒体查询、多列布局及弹性盒模型布局等样式及特性，这将有助于用户设计更丰富多彩的网页。

CSS及其相关技术对网页设计工作的最大贡献之一，就是让设计师可以将网页中的内容与它要呈现的方式分开。毕竟，在CSS出现前，设计师在使用HTML定义网页的结构和内容时必须指定它们的呈现方式，如今很少用到的<font>、<b>、<i>等HTML标记就是那时候的产物。这些标记主要用于设置字体的颜色、背景色、大小、字形及排列方式等。例如，在HTML中，<h2>标记用于定义二级标题，它在级别上比一级标题低，比三级标题高，这些都属于文档结构上的定义。但假如设计师要更改二级标题的颜色、字形、大小，在没有CSS的时代，就要使用<font>这样的标记了，只靠<h2>标记是不够的，因为后者只是一个用于表示文档结构的标记。例如，如果读者想让二级标题使用白底红字的斜体字，则需要像下面这样写。

<h2><font color="red" bgcolor="white"><i>二级标题</i></font></h2>

上面这种样式设置方式最大的问题是，它只对当前设置的页面元素有效，因此相同的样式可能需要在同一网页中的每个二级标题元素上反复设置。考虑同一网页中通常会有多个二级标题，这样做会大大增加HTML代码的冗余度，从而导致整个网页文档变得非常臃肿和混乱，难以维护，因为如果以后想更改二级标题的样式，就必须在网页文档中找到所有用到<h2>+<font>标记的地方，然后逐一对其进行修改。

在CSS出现后，这些问题就迎刃而解了，因为这门标记语言及其相关技术主张将文档的结构内容与外观样式“分而治之”，从而让设计师在使用HTML时专注于文档结构的定义，而外观样式使用CSS来定义。对于前面这个例子来说，设计师如今只需要使用HTML的<h2>标记定义网页的二级标题元素，而该元素的外观样式使用CSS来定义。上述HTML代码就可以被简化为下面这样。

<h2>二级标题</h2>

此后，设计师只需要在对应的CSS文件中将二级标题的样式设置为白底红字的斜体字，具体代码如下。

h2 {
    color: red; 
    background: white; 
    font-style: italic;
}

对于上述代码中使用的具体语法，本项目稍后会做具体介绍。这里，读者暂时只需要理解：由于CSS的出现，我们实现了HTML/XML文档的内容结构与其外观样式的解耦合。从此之后，HTML只负责定义网页的结构与内容，CSS则负责定义网页的外观样式，包括颜色、字形、大小，以及对不同显示设备的自适应能力等。

CSS的“层叠”特性赋予了它非常灵活的使用方式。CSS代码既可以被保存为一个独立的文件，又可以被内嵌在特定的HTML文档内，网页浏览器会自行根据CSS提供的一套优先级判定方法来决定网页最终的外观样式。另外，设计师可以选择先针对同一个HTML/XML文档定义多份CSS代码，再让网页浏览器根据动态脚本确定网页要使用的样式。这样，设计师就可以为不同的显示设备设计不同的CSS代码了，例如，可以让HTML文档在计算机屏幕上的显示效果与其在打印机中的输出效果略有不同，以便使其在不同的设备中能有更好的显示方式。总而言之，CSS赋予了设计师更强大的设计能力。

当然，在计算机世界中，没有任何一种技术是完美的。CSS虽然在网页设计工作中起着至关重要的作用，但是它也存在一些缺点。CSS的主要缺点如下。

● 语法烦琐且极易出错：CSS的语法相对复杂，需要开发人员熟悉各种选择器、样式属性和值的组合使用方式。在编写CSS代码时，一个小错误可能导致整个样式表无法正常工作。这就需要网页设计师具备丰富的CSS知识和经验，以确保代码的正确性。

● 浏览器兼容性存在差异：不同的网页浏览器对CSS的解析和渲染存在差异，这可能导致网页在各种浏览器上的显示效果不一致。为了提高代码的兼容性，网页设计师通常需要编写特定的CSS代码，这大大增加了网页设计工作的复杂性。

● 文件加载速度较慢：当浏览器加载一个网页时，会同时加载该网页所使用的所有CSS文件。如果网页中使用的CSS文件过多或文件体积较大，则会导致网页加载速度变慢，影响用户体验。这就需要开发人员优化CSS代码，减少文件占用的空间和文件数量，以提高网页加载速度。

● 全局作用域：CSS中的样式规则是全局生效的，这意味着一个样式规则可以影响网页中的所有元素。这种全局作用域可能导致出现样式冲突和难以维护的问题。为了避免这些问题，网页设计师需要使用命名约定和选择器的层级关系来管理样式。

尽管CSS存在上述缺点，但是它是网页设计工作中不可或缺的工具。通过学习CSS，读者可以创建美观且可维护的网页，并提供良好的用户体验。下面介绍CSS的基本语法。

根据CSS3标准指定的语言规范，一段完整的样式表代码通常由一系列样式规则组成，而每个样式规则通常由选择器、属性名称和属性值3个语法单元，以及在必要时才会添加的代码注释组成。其形式大致如下。

 [选择器1] {
    [属性名称1]: [属性值1];
    [属性名称2]: [属性值2];
    [属性名称3]: [属性值3];
    /* 同一样式规则语句中可设置多个样式属性 */    .
    …
    [属性名称n]: [属性值n];
}
[选择器2] {
    [属性名称1]: [属性值1];
    [属性名称2]: [属性值2];
    [属性名称3]: [属性值3];
    …
    [属性名称n]: [属性值n];
}
/* 同一CSS文件中可包含多条样式规则语句 */
[选择器n] {
    [属性名称1]: [属性值1];
    [属性名称2]: [属性值2];
    [属性名称3]: [属性值3];
    …
    [属性名称n]: [属性值n];
}

下面详细介绍一下上述基本语法中用到的语法单元及其编写方式。

首先，作为样式规则语句的第一部分，选择器的主要作用是在HTML元素与CSS样式规则之间建立匹配关系，以便对指定的HTML元素应用该选择器后面所定义的外观样式。而根据选择HTML元素的方式，CSS的选择器可划分成几种不同的类型。只有了解了这些不同种类的选择器，读者才能更容易地使用它们。接下来介绍在本项目中会用到的选择器。

基于标记名的选择器通常被称为元素选择器，主要用于匹配其关联的HTML文档中所有指定名称的标记。它的语法是很简单的，只需要直接指定要匹配的标记名称即可。下面是关于元素选择器的简单示例。　　　

h1 { /* 匹配文档中的所有一级标题元素 */
    color: blue;
}
div { /* 匹配文档中的所有块状元素 */
    color: blue;
}
p { /* 匹配文档中的所有段落元素 */
    color: blue;
}

基于id属性值的选择器通常被称为ID选择器，主要用于匹配其关联的HTML文档中所有具有特定id属性值的标记，语法格式为“#ID属性值”。以下是使用ID选择器的简单示例。

#card { /* 匹配文档中所有id="card"的元素 */
    color: blue;
}
#user { /* 匹配文档中所有id="user"的元素 */
    color: blue;
}

基于class属性的选择器通常被称为类选择器，主要用于匹配其关联的HTML文档中所有具有特定class属性值的标记，语法格式为“.类名”。以下是关于类选择器的简单示例。

.box { /* 匹配文档中所有class="box"的元素 */
    color: blue;
}
.video { /* 匹配文档中所有class="video"的元素 */
    color: blue;
}

需要特别说明的是，基于类选择器建立的CSS样式规则通常被称为样式类。由于目前市面上主流的第三方网页设计工具（例如，Font Awesome图标库和Bootstrap框架等）基本上是基于样式类来实现的，因此类选择器无疑将是读者在网页设计工作中最常用到的CSS选择器之一。

选择器以外的部分都可被称为“样式属性”，这部分通常由一对大括号包裹住的一系列格式为“[属性名称]:[属性值]”的语句构成。其中，属性名称的作用是指定想要设置的样式属性。在CSS代码中，一段样式规则可设置的样式属性取决于其选择器所匹配的HTML元素。例如，对于本项目中会使用到的<div>、<p>这一类HTML元素来说，设计师可以设置的常见样式属性主要包括以下几种。

● height：设置页面元素的垂直高度。

● width：设置页面元素的水平宽度。

● margin：设置页面元素的外边距。

● padding：设置页面元素的内边距。

● font-size：设置页面元素中文本的字体大小。

● border：设置页面元素的边框。

● color：设置页面元素中文本的字体颜色。

● background-color：设置页面元素的背景颜色。

而属性值的作用是为属性名称所指定的样式项目设置具体的值，它的取值类型和范围取决于要设置的属性名称。

对于height、margin这类与尺寸问题相关的属性名称，它的值是以px、em或%为单位的数字。

对于background-color这种与颜色相关的属性名称，它的值是Hex、RGB之类的颜色编码，或者CSS预定义的颜色名称。

对于background-image这种与多媒体文件相关的属性名称，它的值是用于表示该文件所在位置的字符串。

在CSS代码中，用于进行代码注释的语法单元通常以/*开始，以*/结束。它主要用于对某段CSS代码的作用进行文字说明，以便增强代码的可读性，并不会被网页浏览器渲染。例如，在下面这段作用于<div>元素的CSS代码中，就以注释的方式对其所设置的样式属性做了相应的说明。

div {
     /* 设置被匹配标记所在元素的高度 */
     height: 600px;
     /* 设置被匹配标记所在元素的背景色 */
     background-color: rgb(164, 205, 223);
     /* 设置被匹配标记所在元素的内边距 */
     padding: 10px 15vw;
     /* 设置被匹配标记所在元素的字体大小 */
     font-size: 18px;
}

以上就是CSS的基本语法，读者可以利用这套语法来创建一系列样式规则，以便完成对HTML元素的外观设计。当然，关于特定HTML元素的样式属性，本书将会在后续项目中介绍，读者在这里暂时只需要了解它们在CSS语法中的基本位置即可。

知识点3：配置工作环境

1．安装网页浏览器

网页浏览器是开发者用来调试网页并确认其设计效果的必要工具，因此选择一款能根据最新的技术标准对网页进行准确渲染的浏览器是非常重要的。根据目前市场上各种浏览器对上述几门计算机语言的支持情况，开发者通常会选择将Google的Chrome或Mozilla的Firefox设置为自己的常用网页浏览器，因为它们不仅配备了为HTML5、CSS3和ECMAScript6提供良好支持的网页解析引擎，还自带了功能非常齐全的网页调试环境。例如，对于Chrome浏览器，根据自己所用的操作系统下载并安装它之后，打开该浏览器并在右上角单击“…”按钮，从弹出的菜单中选择“更多工具”→“开发者工具”选项，打开网页的调试环境。Chrome的开发者工具如图1-2所示。

▲图1-2　Chrome的开发者工具

另外，Firefox也是一款对开发者非常友好的网页浏览器，它在Windows、macOS及各种Linux发行版上都有相应的版本。读者只需要根据自身所用的操作系统从Firefox官方网站下载并安装它即可。在安装完成之后，在该浏览器右上角单击带三条横线的按钮，从弹出的菜单中选择“Web开发者”→“查看器”选项打开网页的调试环境。Firefox的开发者工具如图1-3所示。

▲图1-3　Firefox的开发者工具

当然，如果读者打算在Windows系统或macOS中使用它们自带的网页浏览器，也可以找到类似的工具。例如，在Windows 10/11系统中，用于取代Internet Explorer的Edge是一款基于Chromium开源项目开发的网页浏览器，它的使用方式与Chrome浏览器大同小异，在浏览器的右上角单击“…”按钮，从弹出的菜单中选择“更多工具”→“开发人员工具”选项，就可以打开网页的调试环境了。Edge的开发人员工具如图1-4所示。

▲图1-4　Edge的开发人员工具

关于如何在浏览器中使用这些网页调试环境，本书将会在后续的项目中具体介绍，这里，读者暂时只需要知道如何搭建并启动自己将来需要使用的调试环境即可。

2．配置项目管理工具

从纯理论的角度来说，如果想开展网页设计类项目的开发工作，通常只需要使用与Windows操作系统中“记事本”相似的纯文本编辑器就够了。然而，在实践中，为了获得更好的编码体验，并能方便地使用各种调试工具和源代码管理工具，通常会选择使用一款专用的管理工具来完成项目的开发工作。下面介绍配置项目管理工具的两种常见方案。

1）代码编辑器方案

在本书中，用Visual Studio Code编辑器来管理所有的项目，这是微软公司推出的一款代码编辑器。下面简单介绍如何安装这款编辑器，以及如何将其打造成可用于网页设计类项目的工作环境。

这款编辑器的安装步骤非常简单，读者可以通过搜索引擎找到其官方网站。其官方下载页面如图1-5所示。

▲图1-5　Visual Studio Code编辑器的官方下载页面

因为这款编辑器在Windows、macOS以及各种Linux发行版上均可使用，所以读者需要根据自己所用的操作系统下载相应的安装包。待下载完成之后，就可以打开安装包来启动它的图形化安装向导了。在安装的开始阶段，安装向导会要求用户设置一些选项，如选择程序的安装目录，是否添加相应的环境变量（如果读者想从命令行终端启动Visual Studio Code编辑器，则需要选择这个选项）等，大多数时候只需要保持默认选项，一直单击“Next”按钮就可以完成安装。

Visual Studio Code编辑器的强大之处在于它有一个非常完善的插件生态系统，可以通过安装插件的方式将其打造成面向不同计算机语言与开发框架的集成开发环境。在Visual Studio Code编辑器中安装插件的方式非常简单，只需要打开该编辑器的主界面，在其左侧纵向排列的图标中找到并单击方块形状的扩展图标，或直接按Ctrl + Shift + X快捷键，就会打开图1-6所示的插件安装界面。

▲图1-6　Visual Studio Code编辑器的插件安装界面

根据网页设计项目的需要，推荐读者安装以下插件。

● Emmet插件：用于提供一套简单的缩写语法来辅助编写HTML代码。

● HTML Boilerplate插件：用于根据编写的HTML代码自动生成一些常见代码片段。

● Auto Rename Tag插件：用于在修改某个HTML元素的开始标记时自动重命名对应的结束标记。

● HTML CSS Support插件：用于在编写CSS代码时提供代码的自动补全、远程样式验证、选择器跳转等功能。

● JavaScript Snippet Pack插件：用于在编写JavaScript代码时提供代码的自动补全功能。

● JavaScript (ES6) Code Snippet插件：用于在编写符合ECMAScript6标准的代码时提供常用的代码片段。

● ESlint插件：用于自动检测JavaScript代码中存在的语法问题与格式问题。

● Path Intellisense插件：用于在编写文件路径时提供路径的自动补全功能。

● View In Browser插件：用于快速启动系统默认的网页浏览器，以便即时查看当前正在编写的HTML文档。

● Live Server插件：用于在当前计算机上快速构建一台简单的网页服务器，并自动将当前项目部署到该服务器上。

● vscode-icons插件：用于为不同类型的文件加上不同的图标，以方便文件管理。

● GitLens插件：用于查看Git对项目源代码的提交记录。当然，如果读者对Git不熟悉，则建议通过查看Git的官方文档，或者阅读本书附录初步了解Git的安装方法与基本使用技巧。

需要特别强调的是，Visual Studio Code编辑器的插件很多并且会不断更新，读者可以根据自己的喜好来安装其他类似功能的插件，只要这些插件符合项目实践需求即可。除此之外，Atom与Sublime Text这两款代码编辑器也有类似的插件生态系统和使用方式，读者也可以选择基于它们来打造属于自己的项目开发环境。

2）集成开发环境方案

如果读者更习惯使用传统的集成开发环境（Integrated Development Environment，IDE），那么JetBrains公司旗下的WebStorm无疑是一个不错的选择。它在Windows、macOS以及各种Linux发行版上均可做到所有的功能都开箱即用，无须进行多余的配置。WebStorm的安装方法非常简单，在浏览器中打开其官方下载页面之后，就会看到图1-7所示的内容。

▲图1-7　WebStorm的官方下载页面

同样地，在这里需要根据自己所用的操作系统下载相应的安装包。下载完成之后，就可以打开安装包来启动其图形化安装向导了。在安装的开始阶段，安装向导会要求用户设置一些选项，如选择程序的安装目录，是否添加相应的环境变量、关联的文件类型等。大多数时候，只需要保持默认选项，一直单击“Next”按钮即可完成安装。当然，WebStorm并非一款免费的软件，考虑业界当前的形势，建议选择使用免费的开源软件。

当然，类似的集成开发环境还有微软公司旗下的Visual Studio，它的Community版本是一款完全免费的IDE软件。如果读者确定自己只在Windows操作系统中进行项目开发，则安装Visual Studio Community也是一个很好的选择，至少用它来开发本书中的所有项目都是可以的。其官方下载页面如图1-8所示。

▲图1-8　Visual Studio Community的官方下载页面

【工作实施和交付】

在完成上述知识准备之后，读者现在就可以根据【任务书】着手设计凌雪冰熊饮料店的线上名片了。该项目的实施可以分为以下步骤。

第1步：创建一个网页设计项目

在本书中，我们会将所有项目的源代码存放在一个名为Examples的目录中（读者可自行在计算机中的任意位置创建这一目录），并使用Git来进行源代码管理。使用Git管理项目源代码的操作非常简单，具体步骤如下。

（1）使用Powershell或Bash Shell这类命令行终端环境打开Examples目录，并通过执行mkdir 01_BusinessCard命令创建本项目的根目录。

（2）在命令行终端环境中，执行cd 01_BusinessCard命令。进入本项目的根目录，并分别通过执行mkdir img和mkdir styles这两条命令创建img和styles两个子目录，img和styles子目录分别用于存放图片素材和CSS文件。

（3）使用Visual Studio Code编辑器打开刚刚创建的01_BusinessCard项目，并执行以下文件操作。

① 在项目的根目录下创建一个名为index.htm的空文件。

② 在项目的styles子目录下创建一个名为main.css的空文件。

③ 将项目委托方提供的图标文件复制到项目的img子目录下，并将该图标文件重命名为logo.png。

整个项目的目录结构如下。

01_BusinessCard
├── index.htm
├── img
│   └── logo.png
└── styles
    └── main.css

（4）回到之前的命令行终端环境中，并在项目的根目录下通过执行以下命令完成本项目的第一次版本控制操作。

git init
git add .
git commit -m "项目1：创建线上名片项目"

第2步：定义网页的文档结构

在这一步中，为使用HTML标记将网页的文档结构及其要显示的内容描述出来，需要执行以下操作。

（1）使用Visual Studio Code编辑器打开01_BusinessCard项目，在项目的根目录下找到之前创建的index.htm文件，并在其中输入以下代码。

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>凌雪冰熊</title>
    </head>
    <body>
        <div id="card">
            <h1>凌雪冰熊饮料店</h1> 
            <p>让我们一起感受来自凌雪世界的熊抱！</p>
            <ul>
                <li>电话：123-456-7890</li>
                <li>电邮：message@snowbear.com</li>
                <li>地址：上海市浦东新区某某路×号</li>
            </ul>
        </div>
    </body>
</html>

（2）保存上述代码，使用网页浏览器打开index.htm文件，查看当前网页设计的结果。网页的文档结构及其在Chrome浏览器中的效果如图1-9所示。

▲图1-9　网页的文档结构及其在Chrome浏览器中的效果

（3）回到之前的命令行终端环境中，并在项目的根目录下通过执行以下命令完成本项目的第二次版本控制操作。

git add .
git commit -m "项目1：定义网页的文档结构"

第3步：定义网页的外观样式

图1-9所示的网页看上去不像一张名片，它只显示了名片中的基本信息。因此，要通过编写CSS代码并导入第三方库/框架为该网页设置一些外观样式。为此，要继续进行以下操作。

（1）使用Visual Studio Code编辑器打开01_BusinessCard项目，在项目的styles目录下找到之前创建的名为main.css的空文件，并在其中输入以下代码。

#card {
    width: 540px;
    height: 324px;
    background-color: rgb(164, 205, 223);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    padding: 15px;
    text-align: center;
}
　
#card img {
    width: 30%;
}
　
#card h1 {
    color:  white;
    font-size: 22px;
    padding: 0px;
    margin: 0px;
}
　
#card p {
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
}
　
#card ul {
    text-align: left;
    list-style: none;
    padding: 0 25%;
    margin: 0;
}
　
#card ul li {
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
}
　
#card ul li i {
    margin-right: 10px;
}

（2）在Visual Studio Code编辑器中重新打开之前的index.htm文件，并将其代码修改为如下。

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>凌雪冰熊</title>
        <!-- 引用本地定义的main.css样式文件 -->
        <link rel="stylesheet" href="./styles/main.css">
        <-- 从网络引用Font Awesome这个第三方图标库 -->
        <link rel="stylesheet"
           href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    </head>
    <body>
        <div id="card">
            <!-- 使用<img>标记插入工作室的图标文件 -->
            <img src="./img/logo.png" alt="凌雪冰熊的标志">
            <h1>凌雪冰熊饮料店</h1> 
            <p>让我们一起感受来自凌雪世界的熊抱！</p>
            <ul>
                <!-- 使用<i>标记的class属性插入来自Font Awesome库的图标 -->
                <li><i class="fa fa-phone"></i> 123-456-7890</li>
                <li><i class="fa fa-envelope"></i> message@snowbear.com </li>
                <li><i class="fa fa-map-marker"></i> 上海市浦东新区某某路×号 </li>
            </ul>
        </div>
    </body>
</html>

（3）保存上述代码，使用网页浏览器打开index.htm文件，查看当前网页设计的结果，该网页的外观在Chrome浏览器中的效果如图1-10所示。

▲图1-10　网页的外观样式

（4）回到之前的命令行终端环境中，并在本项目的根目录下完成第三次的版本控制操作。

git add .
git commit -m "项目1：定义网页的外观样式"

在上述操作中，首先在main.css文件中通过#card选择器设置之前在index.htm文件中定义的<div id="card">元素本身，以及其中的图片、标题、段落、列表等信息元素的外观样式；然后回到index.htm文件中，并使用<link>标记指定当前网页要加载的CSS文件。注意，除了自己定义的样式文件之外，该网页中还加载了一个名叫Font Awesome的第三方图标库，这是一个基于CSS实现的字体图标库，它提供了超过1000个可免费使用的图标。该图标库的使用方式非常简单，读者可以自行在搜索引擎中搜索“Font Awesome”关键字来找到其官方网站，并按照其官网入门教程中的说明使用该图标库，这里不对其进行介绍。

除此之外，为了让读者了解index.htm文件相较于之前发生的变化，在该文件中使用标记做了相应的说明。在HTML的语义中，注释标记的作用是说明网页设计者的意图，其内容并不会显示在网页中。

【拓展知识】

本项目主要涉及一些基本的HTML标记与CSS选择器的应用，同类型的项目中可能会使用到更多的HTML标记与CSS选择器。下面将对这部分知识进行一些拓展。

知识点1：更多HTML标记

前面已经介绍了用于在网页中显示标题、图片、文本段落、无序列表及超链接等元素的HTML标记。而在同类型的项目中，当网页中要显示的信息更多时，网页设计师可能会用到与显示表格和有序列表相关的页面元素。下面将介绍用于显示这些元素的标记。

<table>标记用于在网页中定义一个表格元素。换言之，网页中关于表格元素的所有定义代码都必须从一个<table>标记开始，并以一个</table>标记结束，其他用于描述表格行、单元格的HTML标记必须放在这两个标记之间。

<tr>标记用于定义表格的“行”元素，它必须放在<table>和</table>这两个标记之间才能有效发挥作用。换言之，表格中每一行的定义代码都必须从一个<tr>标记开始，并以一个</tr>标记结束，其中用于描述单元格的HTML标记都必须放在这两个标记之间。

<th>标记用于定义表格标题行中的“单元格”元素，它必须放在<tr>和</tr>这两个标记之间才能有效发挥作用。换言之，表格标题行中每个单元格元素的定义代码都必须从一个<th>标记开始，并以一个</th>标记结束，其中用于显示具体信息的HTML标记都必须放在这两个标记之间。

<td>标记用于定义表格中除标题行之外的“单元格”元素，它必须放在<tr>和</tr>这两个标记之间才能有效发挥作用。换言之，表格中除标题行之外的每个单元格元素的定义代码都必须从一个<td>标记开始，并以一个</td>标记结束，其中用于显示具体信息的HTML标记都必须放在这两个标记之间。

<ol>与<li>标记用于在网页中定义一个无序列表元素。

用于显示表格元素的HTML标记的使用方式如下。

<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>第1行单元格1</td>
        <td>第1行单元格2</td>
        <td>第1行单元格3</td>
    </tr>
    <tr>
        <td>第2行单元格1</td>
        <td>第2行单元格2</td>
        <td>第2行单元格3</td>
    </tr>
</table>

上述HTML标记在网页浏览器中显示的表格元素如图1-11所示。

▲图1-11　显示的表格元素

接下来介绍用于显示有序列表元素的HTML标记。例如，可以把本项目的实施步骤定义成如下有序列表元素。

<ol>
    <li>建立源代码管理机制</li>
    <li>定义网页的文档结构</li>
    <li>定义网页的外观样式</li>
</ol>

上述HTML标记在网页浏览器中显示的有序列表元素如图1-12所示。

▲图1-12　显示的有序列表元素

需要特别提醒的是，读者在本项目中的主要任务是初步熟悉一个网页文档的基本结构，并初步掌握<!DOCTYPE>、<html>、<head>、<meta>、<title>、<link>、<body>标记的使用方法。至于其他与网页中具体内容相关的HTML标记，读者暂时只需要知道它们在网页中所对应的元素，并能在本项目的【作业】中定义这些元素即可，本书将会在后续项目中演示这些标记的具体使用方法。

知识点2：更多CSS选择器

在本项目中，读者已经知道了基于标记名称、标记id属性、标记class属性的基本选择器。除此之外，CSS还提供了一些复合型的选择器，它们能帮助网页设计师以更灵活的方式来匹配指定的HTML元素。为了帮助读者编写CSS代码，下面介绍与这几种选择器相关的知识。

基于标记与属性的CSS选择器通常被称为属性选择器。属性选择器主要用于匹配其关联的HTML文档中包含指定属性的标记。其语法格式为“标记名[属性名{=属性值}]”。其中，{=属性值}的部分可以省略。下面是关于属性选择器的简单示例。

/* 匹配<a title="属性值">标记，这里的“属性值”可以是任意字符串 */
a[title] { 
    color: blue;
}
/* 匹配<a href="https://www.epubit.com">标记 */
a[href="https://www.epubit.com"] {
    color: blue;
}

基于标记与伪类的CSS选择器通常被称为伪类选择器。这主要是因为其用法与之前介绍的类选择器非常类似，只不过它匹配的不是明确指定class属性的HTML标记，而用于指定标记的某个特定状态或子结构。其语法格式为“标记名:伪类名”。其中，伪类名代表的就是被指定标记的某个状态或子结构。下面是关于伪类选择器的简单示例。

a:hover { /* 匹配鼠标指针悬浮到超链接元素上时的状态 */
    color: blue;
}
a:active { /* 匹配超链接元素被激活时的状态 */
    color: blue;
}
a:visited { /* 匹配超链接元素被访问之后的状态 */
    color: blue;
}
p:first-child { /* 匹配段落元素中的第一个子标记 */
    color: blue;
}
p:last-child { /* 匹配段落元素中的最后一个子标记 */
    color: blue;
}
p:nth-child(2) { /* 匹配段落元素中的第二个子标记 */
    color: blue;
}
p:nth-last-child(2) { /* 匹配段落元素中的倒数第二个子标记 */
    color: blue;
}

基于特定标记与伪元素的CSS选择器通常被称为伪元素选择器。伪元素选择器主要用于匹配某个指定标记的某个部分，而不是全部。其语法格式为“标记名::伪元素名”。其中，伪元素名代表的就是被指定标记的某个特定部分。下面是关于伪元素选择器的简单示例。

p::first-line { /* 匹配段落元素中的第一行 */
    color: blue;
}
p::last-line { /* 匹配段落元素中的最后一行 */
    color: blue;
}
p::selection { /* 匹配用户选中或高亮显示的文本 */
    color: blue;
}
p::before { /* 匹配段落元素之前插入的内容 */
    content: "Hello, ";
}
p::after { /* 匹配段落元素之后插入的内容 */
    content: "!";
}
p::first-letter { /* 匹配段落元素中的第一个字母 */
    color: blue;
}

需要提醒的是，读者在本项目中的任务是初步熟悉为一个网页设置外观样式的基本步骤，即掌握CSS文件的创建方法，以及使用<link>标记在网页中引用外部样式文件的方法。至于CSS语法中的各种选择器，读者暂时只需要知道它们与HTML标记之间的基本匹配方式即可，本书将会在后续项目中具体演示其使用方法。

【作业】

客户林宇一是一名刚刚进入职场的大学生，他希望投递一份简历给凌雪冰熊饮料店，应征该工作室的网页设计师职位。假设你是他的学长，且现在你已经是一位经验丰富的网页设计师，林宇一找到了你，他提供了他希望在简历上体现的信息及设计要求。

● 项目名：制作网页设计师的简历。

● 委托方：林宇一。

● 项目资料如下。

– 毕业院校：浙江大学，计算机科学与技术学院。

– 毕业时间：2023年6月。

– 专业与学位信息：计算机科学与工程系，学士学位。

– 基本介绍：曾经担任浙江大学校内BBS的电脑技术区区长，并兼任该区Web版版主多年，在学期间出版了多部与网页设计技术相关的译作。

– 电话号码：000-000-0000。

– 电子邮件：owlman@owlman.cn。

– 个人照片：放在简历右上角。

● 项目要求：设计一个能用于应届毕业生求职的网页版的线上简历。线上简历属于单一页面设计项目，其设计方法与线上名片项目基本相同。具体要求如下。

– 网页包含个人照片、求学经历、基本介绍、电子邮件与电话号码等信息。

– 网页有现实世界中求职简历的基本外观形态。

● 时间要求：在3个工作日内完成。

【作业评价】

序号	评测内容	评分标准	分值
1	网页信息的呈现	网页中呈现了委托方提供的基本信息	40
2	网页样式的呈现	网页外观样式符合大众对求职简历的认知	40
3	跨浏览器呈现效果	在Chrome和Firefox浏览器中网页的呈现效果一致	20

HTML5与CSS3网页设计项目教程

图书目录:

详情

图书摘要

版权信息

版权

内容提要

项目1　企业的线上名片设计

【学习目标】

【学习场景描述】

【任务书】

【任务拆解】

【知识准备】

知识点1：HTML基础

知识点2：CSS基础

知识点3：配置工作环境

1．安装网页浏览器

2．配置项目管理工具

【工作实施和交付】

第1步：创建一个网页设计项目

第2步：定义网页的文档结构

第3步：定义网页的外观样式

【拓展知识】

知识点1：更多HTML标记

知识点2：更多CSS选择器

【作业】

【作业评价】

相关图书

相关文章

相关课程

HTML5与CSS3网页设计项目教程

图书目录:

详情

图书摘要

版权信息

版 权

内 容 提 要

项目1 企业的线上名片设计

【学习目标】

【学习场景描述】

【任务书】

【任务拆解】

【知识准备】

知识点1：HTML基础

知识点2：CSS基础

知识点3：配置工作环境

1．安装网页浏览器

2．配置项目管理工具

【工作实施和交付】

第1步：创建一个网页设计项目

第2步：定义网页的文档结构

第3步：定义网页的外观样式

【拓展知识】

知识点1：更多HTML标记

知识点2：更多CSS选择器

【作业】

【作业评价】

相关图书

相关文章

相关课程

版权

内容提要

项目1　企业的线上名片设计