HTML5+CSS3网页设计与制作案例教程

随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。

本章学习目标

◎ 了解互联网、因特网、万维网的关系和区别。

◎ 了解网站、网页和HTML的基本概念。

◎ 了解静态网页和动态网页的区别和联系。

◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。

◎ 能够安装并使用浏览器查看网页。

◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。

◎ 了解网页开发所使用的基本技术和工具。

HTML5+CSS3网页设计与制作案例教程

1.1

认识。

网页相关知识简介

在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)

互联网指由若干计算机网络相互连接而成的网络。进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。

因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。

万维网是指环球信息网，英文全称为World Wide Web，简称WWW。万维网是基于TCP/IP协议实现的，是指在因特网上以超文本为基础形成的信息网，它为用户提供了一个可以轻松驾驭的图形化界面，用户通过它可以查阅Internet上的信息资源。TCP/IP协议由很多协议组成，不同类型的协议又被放在不同的层，其中位于应用层的协议就有很多，比如FTP、SMTP和HTTP。只要应用层使用的是HTTP协议，就称为万维网。简而言之，万维网是通过互联网获取信息的一种应用，我们所浏览的网站就是WWW的具体表现形式，但其本身并不就是互联网，只是互联网的组成部分之一。

1.1.2 网站和网页

网站英文为Web Site。简单来说，网站是多个网页的集合，即根据一定的规则，将用于展示特定内容的相关网页，通过超链接构成一个网站整体。通俗地讲，网站就像因特网上的布告栏一样，人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。人们可以通过网页浏览器访问网站，获取自己需要的资讯或者享受网络服务。例如，常见的网站有搜狐、新浪、雅虎等。

网页是Internet的基本信息单位，英文为Web Page。网页就是以HTML语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形式的页面文件。进入网站首先看到的是其首页，一般情况下，首页集成了指向二级分页以及其他网站的超链接。

2

网页设计基础知识图1-1所示是新浪网的首页。

01

图1-1 新浪网首页

1.1.3 网页与HTML

网页呈现在用户面前的是各种文字、图像、动画、音频、视频等丰富的内容，而网页在本质上是文本文件和其相关的资源，网页最根本的语言是HTML(HyperText Markup

Language，超文本标记语言)。HTML是Web编程的基础，是网页设计和开发领域的一个重要组成部分。HTML指定如何在浏览器中显示网页，它是制作网页的一种标准语言。

图1-2是一个网页示例，其最基本的代码就是HTML语言编写的，它对应的源代码如图1-3所示。

图1-2 网页示例

3

HTML5+CSS3网页设计与制作案例教程

图1-3 示例网页所对应的源码

1.1.4 静态网页和动态网页

静态网页和动态网页的区别不体现在视觉效果上，而体现在两者所采用的技术上。

静态网页是指没有后台数据库、不含程序的网页，你编写的是什么，它显示的就是什么，不会有任何改变。静态网页更新起来相对比较麻烦，适用于更新较少的展示型网站。静态网页有一个固定的url，且以.htm、.html、.shtml、.xml等形式为后缀。发布在服务器上的静态网页是事先保存在服务器上的文件，每个网页都是一个独立的文件，内容相对稳定，容易被搜索引擎检索。

图1-4所示是一个以.html为后缀的静态网页，其网址为/

category-5/category-5-1/。

图1-4 静态网页示例

4

网页设计基础知识01动态网页一般使用ASP、PHP、JSP、.NET等网络编程语言编写，是运行于服务器端的代码，浏览时先将服务器端代码执行成HTML代码，然后再显示在客户端浏览器中(访客是无法看到这个文件的源代码的，看到的只是比如ASP代码通过服务器执行过后的HTML代码)。动态网页可以实现的功能较多，如用户注册、登录、在线调查、用户管理、订单管理、站内搜索、即时更新新闻、留言或书写评论等，一般以.asp、.jsp、.php等常见形式为后缀，而且动态网页的网址中通常有一个标志性的？符号。

图1-5所示是一个动态网页，其网址为/?catid=7。

图1-5 动态网页示例

1.1.5 IP地址、域名和URL

IP地址是指互联网协议地址(Internet Protocol Address)。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。

IP地址是一组数字，不方便记忆，因此人们为每台计算机赋予了一个具有代表性的名字，这就是主机名。主机名由英文字母或数字组成，将主机名和IP对应起来，这就是域名。域名和IP地址是可以交替使用的，但一般域名需要通过DNS域名解析服务转换成IP地址才能找到相应的主机。

URL(Uniform Resource Locators，统一资源定位符)是对资源位置的一种表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它，通常称为URL地址。这种地址可以是各种形式的文件，也可以是局域网上的某一台计算机，更多的是Internet上的网址。

5

HTML5+CSS3网页设计与制作案例教程

1.1.6 HTTP和FTP

HTTP(HyperText Transfer Protocol，超文本传输协议)是一种常用的网络通信协议，在Internet上的Web是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。服务器中存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。

FTP(File Transfer Protocol，文件传输协议)用于Internet上的控制文件的双向传输。HTTP协议用于链接到某一网页，而FTP协议则用于上传或下载文件。

1.1.7 浏览器

浏览器是查看网页的一种工具，它可向服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。用户需要在计算机上安装浏览器来“阅读”网页中的信息，这是使用因特网的基本条件之一，就像我们需要通过电视机来收看电视节目一样。

一般来说操作系统中都已经内置了浏览器，例如Windows操作系统内置有微软公司的Internet Explorer(简称IE)浏览器，用户也可以自行安装浏览器，其他浏览器还有Mozilla的Firefox、Apple的Safari、Opera、Google Chrome、Green Browser浏览器、360安全浏览器、搜狗高速浏览器、傲游浏览器、百度浏览器、腾讯QQ浏览器等。

不同浏览器对网页的解析可能存在差异，本书案例主要使用IE 11.0浏览器显示网页效果，特殊情况下(如IE 11.0不支持某页面效果)会使用其他浏览器。

1.2

网页的基本元素

网页作为信息的载体，包含各种各样的元素。从网页的内容或者多媒体元素的角度出发，网页包含文本、图像、动画、音频和视频等；从布局设计的角度看，网页包含页眉、主内容区和页脚等。

1.2.1 网页的基本媒体元素

从网页上包含的内容来看，网页的基本元素包括文本、图像、动画、音频、视频等多种媒体元素。除此以外，我们也可把目光聚焦到网页中使用非常频繁的元素超链接上。图1-6所示是新浪网首页的基本媒体元素。

6

网页设计基础知识01

图1-6 网页的基本媒体元素示例

1. 文本

一般情况下，网页中的信息以文本为主。文本一直是人类最重要的信息载体与交流工具，它能准确地表达信息的内容和含义，所以文本是网页中运用最广泛的元素之一。

为了丰富文本的表现力，网页设计与制作者可以通过设置文本的字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般使用宋体。

2. 图像

图像是美化网页必不可少的元素，适用于网页的图像格式主要有JPEG、GIF和PNG。图像能比文本更直观地表达信息，在网页中通常起到画龙点睛的作用，它能表达网页的形象和风格，恰到好处地使用图像能使网页更加生动和美观。网页中的图像主要有用于点缀标题的小图像、背景图像、介绍性的图像、代表企业形象或栏目内容的标志性图像、用于宣传广告的图像等多种形式。

3. 动画

动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但物极必反，过多的动画容易使人眼花缭乱，进而产生视觉疲劳。

网页中使用较多的动画格式是GIF动画(也可以理解为GIF图像)与Flash动画。GIF动画在浏览器中播放不需要插件，通常用于制作简单的、只需要几帧图片的交替动画。Flash动画制作出的动画质量较好，许多网页中的大型、复杂的动画几乎都用Flash来制作。一般浏览器中都内嵌入插件Adobe Flash Player用来支持Flash动画的播放。

4. 音频

音频的适当使用能极好地吸引读者，烘托良好的艺术氛围。但添加音乐后，网页加载

7

HTML5+CSS3网页设计与制作案例教程

速度会受到影响。另外，不同的浏览器对于音频文件的处理方法是不同的，彼此之间很可能不兼容。因此，在添加音乐时需要考虑声音文件的大小、品质和在不同浏览器中的差异，适时适度地添加。

用于网络的声音文件格式非常多，常用的是MIDI、WAV、MP3、RM和AIF等。很多浏览器不需要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则可能需要专门的浏览器插件播放。

5. 视频

视频文件可以给访问者带来强烈的视觉冲击力，让网页内容更加丰富。网络上的许多插件也使向网页中插入视频文件的操作变得非常简单。随着网络带宽的增加，网页中应用的视频文件格式也越来越多，常见的有RM、WMV、ASF、MPEG、AVI、RMVB和DivX等。

6. 超链接

超链接是Web网页的主要特色，指从一个位置指向另一个目的端的连接关系。一个超链接由链接载体和链接目标两部分组成。最常见的链接载体是文本或图片，链接目标则可以是任意网络资源，它可以是另一个网页，也可以是网页上的一个位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。

1.2.2 网页的基本布局元素

从布局设计的角度讲，网页一般由标题、页眉、主内容区和页脚部分构成，页眉部分通常包括网站Logo和导航栏，如图1-7所示。

图1-7 网页的基本布局元素

8

网页设计基础知识1. 标题

01网页标题是对一个网页内容的高度概括，便于搜索引擎搜索，预览时通常出现在浏览器的标题栏以及状态栏中。

2. 页眉

页眉是指页面上端的部分，通常是网站访问者在网页中看到的第一个元素，是网站设计中非常重要的部分。因其注意力值较高，网页设计者们常常依靠独特的设计手法，搭配上创意优秀的图片，让网页突破很多空间界限，给人深刻的印象。

大多数网站制作者在页眉部分设置站点名字图片或标志、网站宗旨、展示宣传网站的广告条和动画、链接网页的导航栏，以及跳转网页的按钮等，有的则把它设计成广告位出租。当然，页眉也并非所有网页都有，一些特殊的网页就没有明确划分出页眉。

(1) Logo

Logo是徽标或者商标的英文缩写，起到对徽标拥有公司的识别和推广的作用。网络中的徽标主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个板块。一个Logo在网站中的作用主要体现在树立形象、传递信息以及品牌拓展三个方面。

Logo的设计需要从多方面分析，它涉及图形、文字、颜色和排版等各个方面的内容。通常设计Logo时主要从构成(英文名称、网址、标志图形和主题描述)、颜色、形体(企业品牌标识和名称)、文字的字体以及文字的抽象这五个方面考虑。图1-8是几个网站的Logo示例。

图1-8 网站Logo示例

(2)

导航栏

导航栏是网站内多个栏目的超链接组合，在网页中起着很重要的作用，它不仅是整个网站的方向标，而且还能体现整个网站的内容，如同书的目录一样。导航栏是网页设计中不可缺少的部分，利用导航栏，浏览者就可以快速找到他们想要浏览的页面。

导航栏通常位于网页的顶部或左侧。合理地使用导航栏，可以使网页层次分明，但导航栏不宜过多，否则留给内容的空间就可能不够(尤其是那些提供横幅广告的网站)。可用图像、文本或Flash来创建导航栏。文本的加载速度更快、更容易生成，使用CSS样式可为文本导航栏指定“悬停即改变颜色”等效果。图像导航则显得更美观，因为当鼠标指针悬停在上方时，图像更容易更改，从而为最终用户提供视觉线索。

9

HTML5+CSS3网页设计与制作案例教程

3. 主内容区

顾名思义，主内容区放置网页的主体元素，往往由文字、图像、下一级内容的超链接等构成，有一些网页还加入音频、视频等多媒体元素。

在设计主内容区时，可以使用DIV等布局元素合理地把网页分割成不同板块；文字和图片巧妙配合、文字和背景和谐对比；还要符合用户的阅读习惯，将重要的内容排在左上方。

4. 页脚

页脚位于网页的最底部，和页眉相呼应。页脚部分通常用来介绍网站所有者的具体信息，如名称、地址、联系方式、ICP备案、网站版权、制作者信息等，其中一些内容也可能被做成标题式超链接，引导用户进一步了解详细内容。

1.3

网页设计常用技术

在Web标准中，网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分为三方面：结构化标准语言，主要包括HTML、XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括ECMAScript(网页脚本语言规范)等。

本节介绍网页标记语言HTML、网页样式设计所使用的技术CSS、最常用的脚本语言JavaScript，以及动态网页编程技术ASP、JSP和PHP等。

1.3.1 网页标记语言HTML

HTML是用于创建网页和设计其他可在网页浏览器中看到的信息的一种标记语言，它以纯文字格式为基础。可以使用任何文字编辑器或所见即所得的HTML编辑器来编辑HTML文件。HTML被用来结构化信息——例如标题、段落、列表和图像等，主要负责网页的“内容”部分。

如果想要专业地学习网页的设计和编辑，必须具备一定的HTML知识。虽然目前有类似于Dreamweaver这样的网页编辑软件存在，这些软件并不要求使用者掌握HTML，但网页的本质是由HTML构成的，掌握好HTML是精通网页制作的最根本要求。

1.3.2 网页表现技术CSS

CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”，简称“样式表”。W3C(World Wide Web Consortium，万维网联盟)创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，用来定义网页外观样式，特别是进行网页的排版布局。HTML和CSS分别实现了网页内容和样式的设计，实现了结构和外观的分离，使站点的访问及维护更加容易。

10

网页设计基础知识01如今网页排版愈发复杂，布局样式都需要通过CSS来实现。采用CSS技术可以方便有效地对页面布局，更加精确地控制网页的字体、颜色、背景和其他效果。内容相同的网页，只需要对CSS样式进行一些改变，就可以实现不同的页面外观和格式。学好CSS技术是精通网页制作的基本要求。

1.3.3 网页脚本语言JavaScript

脚本语言由ASCII码构成，是一种不必事先编译，只要利用适当的解释器就可以执行的简单程序。在网页中使用脚本语言，可以丰富网页的表现力，是网页设计中很重要的一种技术。目前常用的脚本语言有JavaScript、VBScript和JScript，其中JavaScript是众多网页开发者首选的脚本语言。

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript代码可以直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。

1.3.4 动态网页编程技术、JSP、PHP等

网页的发展绝不满足于仅供用户单纯地浏览，更应该着重于用户的交互操作和对网站内容的便捷管理，这些都需要动态网页编程技术来实现。目前常用的动态网页编程技术有JSP、和PHP等。

JSP是Java Sever Pages的缩写，是基于Java的动态网页技术标准，用于创建可支持跨平台及Web服务器的动态网页。从构成情况上来看，JSP页面代码一般由普通的HTML语句和特殊的基于Java语言的嵌入标记组成，所以它具有Web和Java功能的双重特性。

ASP是Active Server Pages的缩写，是微软公司推出的Web服务器端脚本开发环境。是ASP技术的升级换代版，是建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的Web应用程序。开发的首选语言是C#及，同时也支持多种语言的开发。

PHP原始为Personal Home Page的缩写，现已正式更名为PHP: Hypertext Preprocessor。PHP是一种HTML内嵌式语言，也是一种在服务器端执行的嵌入HTML文档的脚本语言。它的语言比较简单，属于轻量级的高级语言，风格类似于C语言，被广泛地运用于互联网中。

1.4

网页设计常用工具

HTML文件的编写可以使用任何文本编辑器，如记事本、写字板、Word等，不过在保存时都必须保存为.html或者.htm格式。为了使设计网页更加简单、方便，有些公司和人

11

HTML5+CSS3网页设计与制作案例教程

员设计了专业的HTML编辑工具，这些工具绝大多数可以分为两类：第一类是基于文本的HTML编辑器，第二类是所见即所得编辑器。

1.4.1 基于文本的编辑器

基于文本的编辑器要求使用者掌握HTML代码，可以对其进行定制从而提高编码速度，通常复杂的机制用于检查编码中的错误。这样的编辑器非常非常多，建议读者多下载几个免费版本进行简单试用。

1. Windows自带的记事本

基于文本的编辑器，最简单的要数Windows自带的记事本，虽然它在严格意义上并不能被称为HTML编辑器，但它简单易得，可以编辑HTML、CSS、JavaScript等，在学习HTML之初是一个非常好的选择。缺点是记事本只是基本的文字编辑软件，没有代码提示、检查等功能。

2. Notepad++

Notepad++是一套自由软件中的纯文本编辑器，它的功能比Windows中的记事本(Notepad)强大，除了可以用来制作一般的纯文字的帮助文档，也十分适合用作撰写计算机程序的编辑器。Notepad++不仅有语法高亮度显示，也有语法折叠、代码自动补全等功能，并且支持宏以及扩充基本功能的外挂模块。

图1-9是Notepad++编辑网页的示例。

图1-9 基于文本的编辑器Notepad++

3. Phase 5

Phase 5是自从1998年起就被人期待和熟知的网页编辑器，它支持大多数语言的格式，例如HTML、PHP、JavaScript和VBScript等。

12

网页设计基础知识011.4.2 所见即所得编辑器

所见即所得编辑器不要求使用者了解HTML知识，除了HTML编辑功能外，提供图形化的“预览”页面效果，允许用户通过看到的页面预期效果进行简单的拖放布局即可。此类软件中最著名的当属Adobe Dreamweaver(简称DW)，它是美国Macromedia公司(后被Adobe公司收购)开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是一款专业的网页制作工具，它不仅拥有“所见即所得”的可视化编辑环境，还提供了强大的HTML代码编写功能。无论使用HTML语言，还是使用可视化的编辑器，Dreamweaver都为我们提供良好的工具，丰富我们的操作。

图1-10是Dreamweaver CS6编辑网页的示例。

图1-10 所见即所得编辑器Dreamweaver

1.4.3 如何选择工具

根据前面的介绍，读者可能会毫无疑问地爱上所见即所得编辑器，因为它具备预览功能，能进行拖放式编辑，同时也能进行方便快捷的代码编辑，具有更大的灵活性。但一些开发者更喜欢使用基于文本的编辑器来完成工作，原因是所见即所得编辑器占用更大的系统资源，并且容易产生冗余代码，使得一些不必要的代码重复出现多次，更糟糕的是所见即所得编辑器并非所有方式都具有相同的输出效果，往往会“所见非所得”。

综上所述，无论是基于文本的编辑器还是所见即所得编辑器都具有各自的优缺点。本书涉及的HTML和CSS都可以在记事本或Dreamweaver中进行编辑和处理。目前来看

13

HTML5+CSS3网页设计与制作案例教程

Dreamweaver是今后从事网页设计与制作的一个首选工具，但在学习的过程中，为了专注于代码本身，建议在开始时采用Windows自带的记事本作为网页编辑工具。在学习了基础知识以后，可以使用Dreamweaver，但为了更好地掌握代码的使用，仅仅建议使用Dreamweaver的代码编辑功能。

1.5

习题

1.5.1 单选题

1. HTTP的中文含义是( )。

A.

文件传输协议

C.

顶级域名网址

B.

超文本传输协议

D.

以上都不是

C.

网页 D.

文字

C.

动画 D.

脚本

C.

浏览器 D.

超文本传输协议

C.

动画制作 D.

字处理

2.

构成Web站点的最基本的单位是( )。

A.

网站 B.

主页

3.

网页的基本元素不包括(

)。

A.

文本 B.

图像

4. WWW的含义是( )。

A.

网页 B.

万维网

5. Adobe Dreamweaver是( )软件。

A.

图像处理 B.

网页编辑

1.5.2 填空题

1.

网页呈现在用户面前的是各种文字、图像、动画、音频、视频等丰富的内容，而网页在本质上是由文本文件和其相关的资源组成，网页最根本的语言是 。

2.

从浏览者角度讲，网页是多媒体信息的综合。对于任何一个网页，组成它的最基本元素主要是 、 、 、视频和音频等。

3.

从布局角度讲，网页从上到下一般由标题、页眉、 和 组成，页眉部分通常包括网站Logo和 。

4.

上网浏览网页时，应使用 作为客户端程序。

1.5.3 判断题

1.

互联网(internet)、因特网(Internet)和万维网三者的意思完全相同，只是不同的叫法而已。 ( )

( )

( )

2.

每个静态网页都有一个固定的url，且以.htm、.html等为扩展名。

背景和其他效果。

3.

采用CSS技术可以方便有效地对页面布局，更加精确地控制网页的字体、颜色、14

网页设计基础知识011.5.4 简答题

1. Web浏览器是什么？

2.

简述HTML及其在网页设计制作中的作用。

3.

简述静态网页与动态网页的定义和区别。

4.

网页制作常用的技术有哪些，分别有什么作用？

15