书名：网页设计与制作pdf/doc/txt格式电子书下载

推荐语：案例式教学模式，易学易教

作者：王潇,章明珠,王娟,张艳霞校

出版社：机械工业出版社

出版时间：2018-01-01

书籍编号：30511698

ISBN：9787111586739

正文语种：中文

字数：424000

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：网页设计与制作

作者：王潇;章明珠;王娟

出版日期：2019-08-05

出版社：机械工业出版社

ISBN：9787111586739

免责声明：本站所有资源收集整理于网络，版权归原作者所有。
本站所有内容不得用于商业用途。本站发布的内容若侵犯到您的权益，请联系站长删除，我们将及时处理！

前言

随着互联网行业的飞速发展，网络已经成为人们获取信息的重要途径，也成为生活中不可缺少的一部分。因此，学生不仅要学会如何在网上寻找信息，还需要学好如何将信息上传到网络，提高自身的信息素养，以适应更广阔的就业需求。本书根据读者的需求，从实际案例出发，以浅显易懂的讲解方式，介绍网页制作最基本及最需要掌握的内容，包括网页的基础知识、使用Dreamweaver制作网站的方法、使用Photoshop CS6处理图像的方法、使用Flash CS6制作动画的方法及综合案例等。各章配有典型的课堂案例和课后习题，让读者可以在较短的时间内掌握最实用的知识。

本书共11章，分为4个部分，循序渐进地帮助学生掌握网页设计的相关知识以及3个软件协同使用设计网页的操作流程。

第1部分Dreamweaver CS6的使用（第1~6章）：主要介绍创建站点和网站建设的基础知识，详细介绍了网页中的文本、图像和多媒体的插入和编辑方法，以及页面之间的超链接、表格布局、CSS样式表、Div元素、CSS+Div布局页面、行为、模板和库等功能。

第2部分Photoshop CS6的使用（第7~8章）：主要介绍了Photoshop的工作界面和基本操作，网页图像的色彩调整、编辑、绘制与修饰，网页图层的应用、网页文本的制作、网页特效的实现及网页切片的输出等。

第3部分Flash CS6的使用（第9~10章）：主要介绍了Flash中的绘图工具、修图工具和填充工具等的使用方法，文本对象的创建与编辑，元件、实例与库的基本操作，以及网页动画的制作等。

第4部分综合案例（第11章）：通过一个完整的设计方案，介绍了如何使用3个软件协作来制作摄影工作室网站的方法。

本书配有精美、完整的课件和教学素材，便于相关教师根据自己的需求使用。

本书由王潇、章明珠和王娟主编，边国栋教授主审，其他参编人员有康晓梅、张娜、马文宁、杨佩、马永辉、王娟。

由于编者水平有限，虽然在编写本书的过程中倾注了大量心血，但疏漏和不足之处在所难免，恳请广大读者和专家指正。

编者

第1章 网页制作与网站建设基础知识

学习要点：

Internet基础知识

网页和网站的概念

HTML文件的基本结构

网页制作工具

网站制作的基本流程

学习目标：

了解Internet上的常用名词术语

掌握网页和网站的基本概念

掌握HTML文件的基本结构

学会使用HTML的常用标记制作简单网页

了解常见的网页制作工具

了解网页制作的基本流程

导读：

随着网络的蓬勃发展，互联网满足了人们的大部分需求，如信息的查询、娱乐、学习、购物等，网络已成为人们生活中必不可少的一部分，网站、网页作为人们浏览网上资源的载体，也越来越多地得到人们的关注。为了使初学者对网站有一个总体的认识，本章首先介绍网络基础知识，网页、网站的概念，帮助初学者了解网络中的常用名词术语，接着介绍了网页的基本语言——HTML语言，最后简要阐述了常用的网页制作工具和网站开发流程。

1.1 网络基础知识

1.1.1 Internet 基础知识

网页制作与网络有关，在学习网页制作之前，首先介绍Internet的基础知识、网页和网站的基本概念等预备知识。

1. WWW

WWW（World Wide Web）被译为万维网，或者全球信息网。以Internet为基础的计算机网络，它允许用户在一台计算机中通过Internet读取另一台计算机上的信息。从技术角度上说，WWW是一种软件，是Internet上那些支持WWW协议和超文本传输协议 （HyperText Transport Protocol，HTTP）的客户机与服务器的集合。通过它可以读取世界各地的超媒体文件，包括文字、图形、声音、动画、资料库及各式各样的内容。

2.浏览器

浏览器指在用户计算机上安装的、用来显示指定Internet文件的程序或者软件。浏览器是WWW的窗口，用户可以利用浏览器从一个文档跳转到另一个文档，实现对整个网站的浏览，也可利用它下载文本、声音、动画、图像等资料。图1-1所示是IE11浏览器的界面。

图1-1 IE11浏览器界面

IE11浏览器的界面主要由标题栏、菜单栏、工具栏、地址栏、网页浏览区、状态栏、滚动条等部分组成。可以看出，IE11较之前的版本，界面越来越友好，主要的组成部分未发生变化。当然，除了IE浏览器之外，还有很多浏览器，图1-2所示为常见浏览器的图标，分别是谷歌、火狐、360安全、傲游、Netscape、Opera、Safari、世界之窗、腾讯TT、猎豹，不同浏览器的界面略有区别，功能大同小异。

图1-2 常见的浏览器图标

3. IP地址

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

IP地址用于标识网络中的一台计算机。IP地址通常以两种方式表示：二进制数和十进制数。在计算机内部，IP地址用32位二进制数表示，每8位为一段，共4段，如10000011.01101011.00010000.11001000；为了方便使用，通常将每段二进制数转换为十进制数，上述IP地址转换成十进制后为130.107.16.200。

4.域名

域名指互联网上具有自然语言特征、方便记忆的文本字符串，如www.baidu.com。域名系统的结构是层次型的，以若干英文字母和数字组成的，中间由“.”分隔成几个层次，从右到左依次为顶级域、二级域、三级域等。

目前互联网上的域名体系中共有三类顶级域名：类别顶级域名、地理顶级域名和新顶级域名。

第一类是类别顶级域名，共有7个：.com（用于商业公司）；.net（用于网络服务）；.org（用于组织协会等）；.gov（用于政府部门）；.edu（用于教育机构）；.mil（用于军事领域）和.int（用于国际组织）。

第二类是地理顶级域名，共有243个国家和地区的代码，例如.cn代表中国，.uk代表英国等。

第三类顶级域名，也就是所谓的“新顶级域名”，也包含7类：biz（商业）, info（信息行业），name（个人），pro（专业人士），aero（航空业）, coop（合作公司）, museum（博物馆行业）。其中前4个是非限制性域，后3个是限制性域。

5. URL

URL（Universal Resource Locator）被译为统一资源定位器。在Internet上，每个站点及站点上的每个网页都有一个唯一的地址，这个地址称为资源定位地址，向浏览器输入URL，可以访问URL指出的Web网页。

URL的结构如下。

通信协议：//服务器名称【：通信端口编号】/文件夹1/【文件夹2…】/文件名

常见的通信协议如HTTP超文本传送协议（Hypertext Transfer Protocol） ，它详细规定了浏览器和万维网服务器之间互相通信的规则，它作为通过因特网传送万维网文档的数据传送协议，是万维网（World Wide Web）交换信息的基础。

它允许将超文本标记语言 (HTML) 文档从Web服务器传送到Web浏览器。HTML是一种用于创建文档的标记语言，这些文档包含到相关信息的链接。通过单击一个链接来访问其他文档、图像或多媒体对象，并获得关于链接项的附加信息。

1.1.2 网页和网站

网页是用HTML语言编写，通过WWW传播，并被Web浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件，是WWW的基本文档。其中，访问网站时第一个出现的页面称为主页(Home Page)，主页一般被命名为index.html或default.html。图1-3显示的是“清华大学”网站的主页。

根据程序是否在服务器端运行，网页分为静态网页和动态网页两种。

图1-3 “清华大学”主页

1.静态网页

在网站设计中，早期的网站一般都是由静态网页组成的，静态网页指纯HTML格式的文件，扩展名为.htm或.html。静态网页上可以有一些动态效果，如Flash、GIF格式的图片等。一经制成，内容就不会再变化。如果要修改网页，就必须修改源代码，并重新上传到服务器。静态网页的特点如下。

每个网页都是独立的文件，内容相对稳定。

没有数据库的支持，后期维护工作量大。

交互性差，功能方面有较大的限制。

2.动态网页

在网站设计中，采用了动态网站技术生成的网页称为动态网页。动态网页文件不仅含有HTML标记，而且含有程序代码，这种网页的扩展名根据程序设计语言的不同而不同，如ASP文件的扩展名为.asp，JSP文件的扩展名为.jsp。动态网页能够根据不同的时间、不同的来访者而显示不同的内容，根据用户的即时操作和即时请求，内容也会发生相应的变化。动态网页的特点如下。

每个文件并没有独立存在于服务器，只有当用户请求时才返回一个完整的网页。

以数据库技术为基础，大大降低了后期维护的工作量。

交互性增强，实现了更多的功能，如常见的用户注册、登录、留言板、聊天室等。

提示：

静态网页与动态网页的根本区别在于动态网页的程序都是在服务器端运行，最后把运行的结果返回到客户端浏览器上并显示，静态网页是事先做好的，直接通过服务器传递给客户端浏览器。

3.网站

网站就是把一个个网页系统链接起来的集合。根据网站所提供的服务，人们可以把网站分为门户类网站、企业品牌类网站、交易类网站、休闲娱乐类网站、办公及政府机构网站等。

门户类网站：门户类网站是一种综合性网站，涉及的领域非常广泛，包含新闻、文学、音乐、影视、娱乐、体育等内容。绝大多数网民通过门户类网站来寻找自己感兴趣的资源。国内著名的门户类网站有新浪、搜狐、网易等。图1-4所示是网易网站的首页。

图1-4 “网易”门户网站

企业品牌类网站：企业品牌类网站作为企业的名片越来越受到人们的重视，成为企业在互联网上展现公司形象和企业产品、进行经营活动的平台和窗口。通过企业网站，可以有效地扩大社会影响，提高企业知名度。图1-5所示是海尔集团的官方网站。

交易类网站：随着互联网的不断发展，网上购物已经成为一种时尚。丰富多彩的物品资源、实惠的价格、快捷的物流使得“网购”成为人们的首选。目前，国内涌现出了越来越多的交易类网站。图1-6所示是当当网购物网站。

图1-5 “海尔”企业网站

图1-6 “当当”购物网站

休闲娱乐类网站：休闲娱乐类网站大多以提供娱乐信息和流行音乐为主，如在线游戏网站、电影类网站、音乐网站等。图1-7所示是“酷狗音乐”娱乐网站。

办公及政府机构网站：办公及政府机构网站多以机构的形象宣传和政府服务为主，网站内容相对专一、功能明确、受众面较为明确。图1-8所示是“陕西人事考试网”网站。

图1-7 “酷狗音乐”娱乐网站

图1-8 “陕西人事考试网”网站

1.2 HTML概述

1.2.1 什么是HTML

1. HTML定义

HTML（Hypertext Mark-up Language）被译为超文本标记语言，主要用来创建与系统平台无关的网页文档，它不是编程语言，而是一种描述性的标记语言。使用HTML可以创建能在互联网上传输的网页，这种文件以“.htm”或者“.html”为扩展名，是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用Frontpage、Dreamweaver等网页制作软件进行快速创建与编辑。所有网页软件都是以HTML语言为基础。

2. Web工作原理

浏览器（Browser）是一个HTML的“翻译官”，它阅读HTML网页，并解释其含义，然后将解释结果显示在屏幕上。所以说，浏览器其实是一种专用于解读网页文件的软件，从服务器传送至客户端的页面经浏览器解释后，用户才能看到图文并茂的页面信息，如图1-9所示。

图1-9 Web工作原理图

3. HTML的发展史

自从HTML 1.0版本发布以后，浏览器开发商陆续加入了更具有装饰效果的各种属性和标签，使得HTML语言越来越复杂。其中，XHTML（Extensible HyperText Markup Language）译为可扩展的超文本标记语言，是以HTML 4.01为基础而发展出的更为严谨的一种标记语言，是HTML的一种过渡语言。

此外，为了解决HTML复杂化的问题，推出了负责装饰性工作的CSS（层叠样式表）。目前的HTML版本是5.0。图1-10列出了HTML的发展历程。

图1-10 HTML语言发展史

1.2.2 HTML文件的基本结构

1. HTML的语法

标记符，又称标签，是HTML的基本元素，浏览器根据标记符决定网页的实际显示效果。HTML文件使用标记编写文件。所有标记均由尖括号“< >”括起来，标记分单标记和双标记两种。如<hr/>为单标记，只有一个起始标记，表示一条水平线；<b>…</b>为双标记，其中，前一个<b>是起始标记，后一个</b>是结束标记，两个标记之间是执行此指令的内容，其中<b>是加粗的含义。

对标记符作用对象的详细控制，需要在起始标记符中加入相关的属性来实现。属性与标记符之间需用空格分隔，每一属性都有与之相应的属性值，所有的属性值均应该用英文状态下的双引号\"\"括起来，格式如下。

双标记： <标记符 属性1=\"属性值\"属性2=\"属性值\" …> …</标记符>

单标记： <标记符 属性1=\"属性值\"属性2=\"属性值\"…/>

2.基本结构

HTML文件以<html>标记开始，以</html>标记结束，其中<html>表示文档的开始，</html>表示文档的结束。在这两个标记之间，网页被分为头部（head）和主体（body）两部分，如图1-11所示。

（1） <head>标记

<head>…</head>用来描述文档的头部信息，如页面的标题、作者、摘要、关键词、版权、自动刷新等信息。注意，头部信息并不会出现在浏览器的窗口中。<head>标记中经常出现的标记如下。

图1-11 HTML文件的基本结构

<title>…</title>：用来描述网页文档的标题。

<meta/>：用来描述文档的编码方式、摘要、关键字、刷新时间等，这些内容不会显示在网页上。其中，网页的摘要、关键字是为了使搜索引擎能对网页内容的主题进行识别和分类。文档刷新属性可以设置网页经过一段时间后自动刷新或转到其他的URL地址。

例如跳转到其他URL，网页经过10s后转到http://www.sina.com。

（2） <body>标记

正文标记<body>表示文档主体的开始和结束。其不同的属性用于定义页面主体内容的不同表达效果，常见属性如下。

bgcolor：用于定义网页的背景色。

background：用于定义网页背景的图像文件。

text：用于定义正文字符的颜色，默认为黑色。

link：用于定义网页中超级链接字符的颜色，默认为蓝色。

lin：用于定义网页中已被访问过的超链接字符的颜色，默认为紫红色。

alink：用于定义被鼠标选中，但未使用时超链接字符的颜色，默认为红色。

例如，<body bgcolor=\"black\" text=\"white\">或者<body bgcolor=\"#000000\" text=\"#FFFFFF\"> 都将定义网页的背景颜色为黑色，正文字体颜色为白色的网页文档。

提示：

网页中颜色属性值的常用表示方法：①使用颜色的英文名称，如black（黑色）、blue（蓝色）、green（绿色）、red（红色）、yellow（黄色）、white（白色）等；②使用6位十六进制数（0~9，A~F）的RGB代码表示，且在每种颜色代码前加“#”。例如，白色为#FFFFFF，黑色为#000000。

1.2.3 HTML常用标记

1. HTML中的字体标记

（1）字形标记

HTML中的字形标记常用于设置网页中字符的不同显示格式，常见的字形标记如表1-1所示。

表1-1 常见字形标记

（2）标题标记

HTML中使用<h1>…</h1>、<h2>…</h2>…<hn>…</hn>定义段落标题的大小，其中n最大为6，相应的<h1>到<h6>分别表示一级标题到六级标题，一级标题表示的字体最大，六级标题表示的字体最小。

（3）字体标记

<font>…</font>标记用于定义网页中的文字字体的字体、大小、颜色。常用的3个属性有face、size和color。其中size的属性值为1~7；颜色的属性值使用颜色的英文名称或十六进制的RGB代码表示。例如，

2. HTML中的正文布局标记

（1）段落标记<p>

<p>…</p>指出一个新段落的开始，其后内容从新的一行开始，并与上段之间有一个空行，可以使用align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left、center或者right。例如，

（2）换行标记<br/>

<br/>单标记符，用于使文本从新的一行显示，它不像段落标记<p>那样会产生一个空行，但连续多个的<br/>可以产生多个空行的效果。

（3）水平线标记<hr/>

<hr/>单标记符，用于产生一条水平线，以分隔文档的不同部分。常用的属性有size、width、color，分别用于定义水平线粗细、宽度、颜色。

（4）段落对齐标记<center>和<div>

<center>…</center>标记可使在其之间的内容居中显示。<div>…</div>标记用于文档分节，以便为文档的不同部分应用不同的段落格式，<div>标记符要使用属性align来控制段落对齐格式，属性值为left、right、center、justify。

3.图像标记<img/>

<img/>单标记符，实现在网页中插入图片。该标记符的常用属性有src、alt、width、height、border、align等，其含义如下所示。

src：用于定义图像文件的源地址（可使用相对地址或者绝对地址）。

width:用于定义图像在页面上显示的宽度。

height:用于定义图像在页面上显示的高度。

alt:用于定义图像的说明文字。

border:用于定义图像边框像素值，默认为0，即没有边框。

align：当图像与文字混排时，可使用align属性说明文字与图像的对齐方式。其中，top表示顶部对齐，middle表示居中，bottom表示底部对齐（默认值），left表示图像居左，right表示图像居右。

提示：

绝对地址：指提供了链接文档的完整的URL地址，包括协议名称。如http://www.sina.com.cn/news/1.html。

相对地址：以当前目录为参照，表示使用文件相对于当前目录的路径，如：“./”或者不带任何符号表示所引用的文件（或目录）与当前HTML页面处于同一目录；“../”表示上一级目录。

4.滚动文字标记<marquee>

< marquee>…</marquee>可使在其之间的内容实现滚动效果，该标记符的常用属性有direction、behavior、height、width、vspace、hspace、loop、scrollamount、onmouseout、onmouseover等，其含义如下所示。

direction：用于定义对象滚动的方向，属性值有up、down、left、right，分别表示向上滚动、向下滚动、向左滚动、向右滚动。

behavior：用于定义对象滚动的方式，属性值有alternate、scroll、slide，分别表示来回滚动、一端到另一端（重复）、一端到另一端（不重复）。

height：用于定义对象滚动的高度，单位是像素。

width：用于定义对象滚动的宽度，单位是像素。

vspace：用于定义对象所在位置距垂直边的距离。

hspace：用于定义对象所在位置距水平边的距离。

loop：用于定义对象滚动次数。

scrollamount：用于定义对象滚动速度。

onmouseout ：用于定义鼠标指针移出该区域时对象的滚动状态，常见的属性值有this.start()、 this.stop()，分别表示开始滚动、停止滚动。

onmouseover：用于定义鼠标指针移到该区域时对象的滚动状态，常见的属性值见onmouseout。

5. <embed>标记

<embed>可以用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等，Netscape及新版的IE 都支持。该标记符的常用属性有src、loop、volume、autostart等，其含义如下所示。

src:用于定义多媒体文件的源地址（可使用相对地址或者绝对地址）。

loop:用于定义音频或视频文件是否循环及循环次数，属性值为正整数、true、false。正整数值表示音频或视频文件的循环次数；true表示音频或视频文件循环播放；false表示音频或视频文件不循环播放。

volume:用于定义音频或视频文件的音量大小，属性值为0~100之间的整数。

autostart：用于定义音频或视频文件是否在下载完之后就自动播放，属性值为true、false。true表示音乐文件在下载完之后自动播放，false表示音乐文件在下载完之后不自动播放。

1.3 网页制作工具

网页制作工具就是采用更加直观、简单的方式制作网页，通常的网页制作工具有Dreamweaver、Photoshop、Flash等，下面将主要介绍这3种工具的特点及其功能。

1.3.1 Dreamweaver CS6

Dreamweaver CS6是美国Adobe公司于2012年4月24日开发的集网页制作和管理网站于一身的所见即所得的网页编辑工具。它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于网站制作人员，无须编写任何代码就能快速创建Web页面。可以说，其强大的网页编辑功能和完善的站点管理机制，是其成为网页制作的主流工具的一个重要原因。图1-12所示的是使用Dreamweaver CS6设计网页的效果。

图1-12 使用Dreamweaver CS6设计网页的效果

1.3.2 Photoshop CS6

Adobe Photoshop是目前功能最为强大、应用最为广泛的图形图像编辑软件，它具有同类产品所无法比拟的优越性能，已经成为桌面出版、图像处理及网络设计领域中的行业标准。Adobe Photoshop CS6是Adobe Photoshop的第13代，是一款功能强大的版本。Photoshop在前几代加入了GPU OpenGL加速、内容填充等新特性，加强了3D图像编辑，采用新的暗色调用户界面，其他改进还有整合Adobe云服务、改进文件搜索等。图1-13所示的是使用Photoshop CS6设计图像的效果。

图1-13 使用Photoshop CS6设计图像的效果

1.3.3 Flash CS6

Flash CS6亦是Adobe公司推出的目前应用最广泛的一款动画设计与制作软件，具有存储容量小、交互性强、便于网络传播、制作成本低等优点。其在各种商业动画设计领域中具有无可替代的地位。其中，Flash CS6能以Flash Professional CS6的核心动画和绘图功能为基础，利用新的扩展功能创建交互式HTML内容；生成Sprite表单；锁定3D场景，增强渲染效果以及增加了智能形状和设计工具，方便更精确高级绘制。图1-14所示的是使用Flash CS6制作的动画。

图1-14 使用Flash CS6制作的动画

1.4 网页制作的基本流程

网站规划及网页设计是一个复杂的过程，通常包括网站分析、设计与制作、网站测试、发布及维护4个环节，每个环节都涉及了许多内容。

1.网站分析

这一阶段的主要任务是收集、研究用户需求，讨论网页主题、内容、网站的基本功能，了解网站可能服务的对象和他们的需求，为用户提供所需的产品或服务。

2.设计与制作

网页设计环节是网页设计与制作的关键环节，其主要内容包含以下几个方面。

收集素材。通常情况下，网站主题确定下来之后，就要通过各种途径尽可能多地收集相关的图片、声音及文字等多媒体信息。

确定网页版式。精确的布局、规范的版式，会给人难忘的印象。网站的布局灵活多样，常见的版式如“国”字形布局、“匡”字形布局、“川”字形布局等。

进行网页可视化设计。设计人员根据获得的资料信息，通过草图，借助于网页开发工具，进行主页和其他网页的版面

....