作者：张江波

出版社：电子工业出版社

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

中文版Dreamweaver/Fireworks/Flash (CS6版) 网页设计(含DVD光盘1张)试读：

前言

网页三剑客（Adobe Dreamweaver、Adobe Fireworks和Adobe Flash）是网页设计、网站开发过程中应用最为广泛的软件。Dreamweaver是一个专业的网页编辑和制作软件，它提供了全方位的网页编辑功能，不但可以进行“所见即所得”的网页编辑，还可以在“代码视图”中编辑网页代码、编写各类Web程序，使得网页制作和开发的过程更加快速、便捷。Fireworks是一个专业的Web图像设计软件，利用Fireworks可以编辑和处理网页图像、设计网页图形以及制作网页动画图像，此外，利用Fireworks还可以非常方便地制作出网页或程序功能的交互原型，在网站开发和程序开发前期工作中也可以发挥强大的作用。Flash是一个专业的平面动画制作软件，可开发出具有跨多种操作系统平台、兼容多种设备、体积小巧、使用简便以及便于网络传播等特点的Web应用和桌面程序，在网络应用、多媒体演示、互动游戏、软件开发中得到较为广泛的应用。

本书定位于网页设计的初、中级用户，不仅适用于网页设计的初学者，对于熟悉网页三剑客以前版本的老用户也极具参考价值。本书从基础入手，以网页设计和制作为中心，使读者通过基础知识的学习掌握软件中相关的功能，提高设计和制作网页的水平，并且能够制作网页动画，最终能综合应用这三个软件，制作出符合W3C标准的、内容丰富的多媒体网页。

本书共23章，从内容上可分为两大部分：第一大部分为基础知识篇，重点讲解网页三剑客三个软件的基础知识及其应用，第1～8章讲解Dreamweaver CS6软件的基础知识及其应用，第9～16章主要讲解Fireworks CS6在网页效果图设计、网页图形制作、网页图像处理和网页动画制作中的应用，第17～20章主要讲解Flash CS6在网页动画制作、交互动画设计中的应用；第二大部分为实战应用篇（第21～23章），通过实际网页内容制作的过程，讲解网页三剑客软件在网页设计中的综合应用及相互配合的方式。具体章节内容如下。

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

第2章　 Dreamweaver CS6软件基础知识

第3章　 添加网页内容元素

第4章　 网页表单元素

第5章　 插入其他网页元素

第6章　 使用CSS布局和修饰网页内容

第7章　 使用框架、模板与库

第8章　 应用行为与特效

第9章　 初识Fireworks

第10章　图形图像处理基础

第11章　矢量图形与文本的编辑

第12章　位图的应用与处理

第13章　使用蒙版与滤镜

第14章　制作GIF动画

第15章　制作交互原型

第16章　图像的优化与导出及效率工具

第17章　初识Flash

第18章　制作动画

第19章　应用多媒体和组件

第20章　应用ActionScript创建交互动画

第21章　设计并制作公司网站

第22章　设计并制作团购网站

第23章　制作动态Flash相册

本书由一线专业设计人员参与编写，他们具有丰富的设计经验，在此表示感谢。本书由张江波、王海荣、余婕主持编写，参与编写工作的还有张欣、张陆忠、罗黄斌、乔婧丽、曾敏宇、刘文敏、宗和长、张亚兰、陈正荣、娄方敏、徐友新、叶飞、许丰华、汪明、张瑞敏等。由于编写时间仓促，书中难免有疏漏与不妥之处，欢迎广大读者来信咨询指正，我们将认真听取您的宝贵意见，推出更多的精品计算机图书。编　者2013年12月第1章　网站建设与网页设计基础知识本章导读

在学习制作网页和建设网站之前，首先需要了解与网络相关的基础知识，了解网页制作与设计的专业术语、工具软件、制作流程及网页的基本元素等，本章将重点介绍与网页设计相关的基础知识。知识要点

了解Internet相关基础知识

了解和掌握网页设计相关的名词术语

了解与网页设计和制作相关的软件工具

了解网站开发流程

了解网页基本元素

了解网页布局规范及标准案例展示1.1　知识讲解——Internet基础知识

Internet即因特网，是由成千上万个网络以及上亿台计算机通过特定的协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台，而网站和网页则是Internet网络中最为常见的一种信息传播载体。本节将介绍与Internet相关的基础知识。1.1.1　关于Internet

关于Internet有着许多的描述，例如以下几种：

Internet是一个基于TCP/IP协议的网络，通过该协议可实现不同品牌、不同性能、不同操作系统的计算机之间的互联。

Internet是一个虚拟的社会或者国家，它有着自己的游戏规则和道德准则。

Internet以相互交流信息资源为目的，基于一些共同的协议，并通过许多路由器和公共互联网而构成，它是一个信息资源和资源共享的集合。

不论如何描述Internet，人们最注重的是它的实用价值，例如，收发电子邮件、上网浏览或冲浪、查询信息、电子商务、网络休闲娱乐、网络办公等，这些应用都充分证明Internet的实用价值。

随着Internet在全球的普及和其在各个领域的广泛应用，工业时代那种以地缘为本的场地分割、垄断方式的国家和企业集团的模式会逐步被打破。现在面对的是一个统一的全球市场，经济将实现全球化。目前最为突出的是网络环境下的经济模式——电子商务。1.1.2　万维网

万维网即环球信息网（World Wide Web），缩写为WWW，是一个基于超级文本（Hypertext）的信息查询工具。WWW存在于Internet中，由自愿加入的各计算机节点上的WWW服务器（网页服务器）和超级文本格式的信息文件组成，Internet网络中的客户计算机发出请求，即可查询和访问WWW服务器中的信息。1.1.3　超文本

超文本即超级文本（Hypertext），它是将各种不同空间的文字信息组织在一起的网状文本，它允许从当前阅读的位置直接到文本链接指向的位置。网页中的链接文本就是最常见的超文本内容。1.1.4　浏览器

要在WWW（万维网）中“阅读”网络中的海量信息，浏览器则是最基本的“阅读”工具。浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件内容交互的一种软件。浏览器的种类非常丰富，不同计算机平台可运行不同的浏览器。目前常见的浏览器有Internet Explorer、Firefox、Safari、Google Chrome、Opera、360安全浏览器、腾讯TT、QQ浏览器、搜狐高速浏览器、傲游浏览器等。

不同内核的浏览器在解析网页内容时，可能会存在一些差异，由于网页访问者所使用的浏览器是未知的，所以，在制作网页时，应尽量保证不同浏览器查看网页的效果相同，故建议安装多种浏览器以测试网页效果，推荐安装Internet Explorer、Firefox、Safari、Google Chrome。

专家提示

目前网络用户中，仍然存在许多使用较老版本浏览器的用户，不同版本的浏览器在解析网页内容时也会存在一定的差异，而差异最大的则是Internet Explorer的6.0版本，故建议网页设计师们安装相关调试工具以测试不同浏览器环境下的网页效果，如IETester等。1.1.5　URL

URL（Uniform / Universal Resource Locator）即统一资源定位符，也被称为网页地址，是因特网上标准的资源地址，以取得网络上的各种服务。

URL由三部分组成：协议类型，主机名和路径及文件名。

协议类型：包括HTTP、FTP、Telnet、Mailto、file等。

主机名：指服务器在网络中的IP地址（如125.64.92.92）或域名（www.baidu.com）。

路径及文件名：表示主机上的一个目录或文件地址，文件夹和文件名之间以“/”符号分隔。

URL的书写格式为：协议类型://主机名/路径及文件名，当访问主机上的根目录或根文件夹时，可省略主机名后的路径及文件名，例如，访问百度网站首页，URL为“http://www.baidu.com”。1.1.6　IP地址

IP地址就像是我们的家庭住址一样，如果你要写信给一个人，你就要知道他（她）的地址，这样邮递员才能把信送到。计算机发送信息就好比是邮递员，它必须知道唯一的“家庭地址”才能不至于把信送错。只不过我们的地址是用文字来表示的，计算机的地址用二进制数字表示。

IP地址就是给每个连接在Internet上的主机分配的一个32位地址，为了方便用户理解和记忆，它采用了十进制标记法，将32位的二进制数分为4个部分，每部分8位，每个部分用一个小于等于255的十进制数表示，中间用“.”隔开，如下图所示。

由此可见最低的IP地址是0.0.0.0，最高的IP地址是255.255.255.255。1.1.7　域名

IP地址为网络提供了一种统一的寻址方式，但若要大家记住百度的IP地址是220.18.111.140、网易的IP地址是118.123.110.50等，所有网站都通过IP地址来访问，那么访问网站则会变成非常困难的事。使用一串用点分隔的名字组成一个主机名称用于替代输入IP地址的方式，使主机地址变得简单易记，而这一串标志主机名称的名字则为域名（Domain Name），目前域名已经成为互联网品牌、网上商标保护的必备产品之一。

域名通常由两部分组成，前面是域名主体，其后为域名后缀，例如“baidu.com”，其中，baidu为域名主体，其后的“.com”为域名后缀，用于表示域名的性质或国家地域等。常见的用于表示性质的域名后缀见下表。

上表中所列举的域名亦可称为国际域名，还有一种域名是国内域名，它是按照国家和地区的不同而分配的后缀，如cn（中国）、hk（中国香港）、mo（中国澳门）、tw（中国台湾）、us（美国）、uk（英国）、jp（日本）、kr（韩国）等。

由域名和域名后缀即可构成顶级域名，如“baidu.com”、“163.com”等，在一个顶级域名下，还可以划分出多个二级域名，即主域名的分支。二级域名的结构是在主域名前再添加一个名称，例如“mail.163.com”，其中“mail”则是“163.com”域名下的二级域名。目前很多大型的网站都会使用多个二级域名对网站中的子栏目进行分类，以方便用户直接访问。

专家提示

通常人们在访问网站时习惯在输入网址时，在主域名前加入“www.”，实际上“www”也是一个二级域名，只是人们习惯把它作为网站的主要入口而已。1.1.8　HTTP

HTTP（Hypertext Transport Protocol）即超文本传输协议，它规定了浏览器和万维网服务器之间互相通信的规则，它允许将超文本标记语言（HTML）文档从Web服务器传送到客户端浏览器上，即实现网站访问和网页浏览的功能。

在访问网站时，浏览器通常都会在域名前自动添加“http://”，即表示通过超文本传输协议访问指定的域名或URL地址。1.1.9　FTP

在网络应用中除了最常用的HTTP协议外，还有一种较常用的，用于计算机之间文件传送的协议——FTP。FTP（File Transfer Protocol）是TCP/IP网络上两台计算机之间传送文件的协议，FTP是在TCP/IP网络和Internet上最早使用的协议之一。

网站的内容存放在网络中的Web服务器上，为了更快捷方便地管理服务器上的文件，通常Web服务器会同时提供FTP服务，可通过FTP方式快速地管理服务器中存放的文件。

要使用FTP方式访问和管理FTP服务器上的目录及文件，通常在Windows的“资源管理器”的“地址栏”中输入协议名称及服务器的URL地址即可，如“ftp://192.168.0.100”。登录后即可像管理本地计算机中的文件一样管理远程计算机中指定目录中的文件。此外，还可以借助专业的FTP软件工具，更快速更方便地管理FTP空间。1.1.10　带宽

带宽（band width）又叫频宽，是指在固定的时间可传输的资料数量或在传输管道中可以传递数据的能力，也可以说是通信线路的速度。带宽越大，网络的效率就越高。带宽的基本单位是bit/s（比特/秒）。1.1.11　网站

网站是因特网上一块固定的面向全世界发布消息的地方，由域名（也就是网站地址）和网站空间构成，通常包括主页和其他具有超链接文件的页面。在因特网的早期，网站只能保存单纯的文本。经过几年的发展，当万维网出现之后，图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站也慢慢地发展成我们现在看到的图文并茂的样子。通过动态网页技术，用户内容及功能目的，大致将网站分为以下一些类型：

个人网站：个人网站的设计比商业网站要自由得多，不同的行业，不同兴趣和爱好的网页制作者，不同的设计目的，所设计出来的网页会有很大不同。

企业型网站：企业类网站作为企业的名片越来越受到人们的重视，成为企业宣传品牌、展示服务与产品乃至进行所有经营活动的平台和窗口。通过网站可以展示企业形象，扩大社会影响，提高企业的知名度，

娱乐休闲网站：娱乐休闲类网站大都是以提供娱乐信息和流行音乐为主的网站。如很多在线游戏网站、电影网站和音乐网站等，它们可以提供丰富多彩的娱乐内容。这类网站的特点也非常显著，通常色彩鲜艳明快，内容综合，多配以大量图片，设计风格或轻松活泼，或时尚另类。

游戏网站：娱乐游戏类网站的设计要求比较高，除了要表现出网页包含的内容外，网页的分类和布局结构也很重要。有漂亮的首页，才能引起爱好者的浏览兴趣。

机构网站：所谓机构类网站通常指政府机关、非营利性机构或相关社团组织建立的网站。这类网站在互联网中应用十分广泛，如学术组织网站、教育网站、机关网站等，都属于这一类型。这类网站的风格通常与其组织所代表的意义相一致，一般采用较常见的布局与配色方式。

电子商务网站：电子商务网站有多种类型，其中最为常见的是在互联网上成立虚拟商场，为人们提供一种新的购物方式。随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚。丰富多彩的网上资源、价格实惠的打折商品、服务优良送货上门的购物方式，已成为人们休闲、购物两不误的首选方式。网上购物也为商家有效地利用资金提供了帮助，而且通过互联网可以宣传自己的产品，因此现实生活中涌现出了越来越多的购物网站。

综合门户类网站：门户类网站将无数信息整合、分类，为上网者打开方便之门，绝大多数网民通过门户类网站来寻找自己感兴趣的信息资源，巨大的访问量给这类网站带来了无限的商机。门户类网站涉及的领域非常广泛，是一种综合性网站。此外这类网站还具有非常强大的服务功能，如搜索、论坛、聊天室、电子邮箱、虚拟社区、短信等。门户类网站的外观通常整洁大方，用户所需的信息在上面基本都能找到。目前国内较有影响力的门户类网站有很多，如新浪（www.sina.com.cn）、搜狐（www.sohu.com）和网易（www.163.com）等。

搜索引擎类网站：搜索引擎（search engine）是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将检索到的相关信息展示给用户的网站系统。搜索引擎是网站建设中针对“用户使用网站的便利性”所提供的必要功能，同时也是“研究网站用户行为的一个有效工具”。高效的站内检索可以让用户快速准确地找到目标信息，从而更有效地促进产品/服务的销售，而且通过对网站访问者搜索行为的深度分析，对于进一步制定更为有效的网络营销策略具有重要价值。目前，流行的搜索引擎有百度（www.baidu.com）、谷歌（www.google.com.hk）和必应（www.bing.com）等。1.2　知识讲解——网页制作基础

用户在访问网站时所看到的实际内容即为网页，一个网站中通常有许多网页，常见的网页文件格式为HTML格式，其文件扩展名为“html”、“htm”、“asp”、“aspx”、“php”和“jsp”等。网页是构成网站的基本元素，而网页则是由一些基本元素构成的，包括文本、图像、超级链接、表格、动画、音乐和交互式表单等。1.2.1　网页的类型

根据网页中的交互功能，可将网页分为静态网页和动态网页两种类型。

静态网页是指没有后台数据库，不含前后台交互程序的网页，通常仅用于一些不会经常更新信息的展示。它是由纯粹的HTML格式制作的网页，其文件后缀通常为“htm”、“html”、“xml”和“shtml”等。

动态网页一般以数据库为基础，可实现如用户注册、登录、在线调查等有着复杂的数据交互的信息存储的功能。动态网页常见的文件后缀有“aspx”、“asp”、“jsp”、“php”、“do”等。

专家提示

网页中存在GIF动画、Flash动画或js前端互动特效等均不能说明该页就是动态网页，动态网页必须存在网站后台交互功能。1.2.2　网页的构成元素

网页是网络中传递各种信息的重要载体，例如传播新闻、音乐、视频等，故网页可以由以下元素构成：

文本：即文字内容，是网页内容的主要元素，能准确地表达信息内容和含义。

图像：用于美化网页、对实物进行更直观的展示以及表达设计思想等。

动画：用于吸引浏览者目光，强调信息和内容，同时起到修饰和美化网页的作用。

声音：是多媒体网页的重要组成部分，可以给网页浏览者造成听觉上的感染或冲击，使网页不再是一个无声世界。

视频：使网页内容更精彩丰富，具有更强的感染力。

表单：用于收集用户信息的网页组件，例如用户注册、登录等。

超级链接：将文字或图像转换为可单击元素，使用户单击后可快速切换至其他页面或运行相关程序，通常用于实现网站内容的导航或交互功能。

表格：用于控制数据信息的布局和排列方式。

由于网页存在于网络中、显示于屏幕上并包含着各种各样的交互功能，它类似于平面设计或平面排版，但又有许多不同之处，经过多年的发展，网页设计和排版形成了一种不约而同的标准，网络中大部分的网页都有着以下几个重要元素。

1．网站标志（Logo）

网站作为一种信息传播媒体，在传递信息的同时，也需要对自身进行宣传，网站的标志如同一个商品的商标，集中体现了网站的特色、内容、文化及个性。通常网站的标志都设计得十分醒目，并设置在网页中最显眼的位置，以便给浏览者留下深刻的印象，故而标志的设计应以简洁易记为目标，使得浏览者能快速地记住网站，下图中列举了一些常见的网站Logo。

2．导航栏

由于网站是由许多网页构成的，浏览者可通过一个页面快速切换至另一个页面，通常网页中需要提供这样一个功能栏目，以便浏览者快速找到自己感兴趣的内容，这就是导航栏。如下图所示列举了多种效果的导航栏。

3．Banner

Banner是网页中的重要元素之一，即旗帜广告、横幅广告，用于体现网页的中心意旨，表达最主要的情感思想或宣传中心，在大部分网站中以广告为主，在企业网站中则多以表达企业的中心文化或主要产品为主。如下图所示为一些网站中的banner部分。

4．页脚（版权区）

页脚则是页面的最底端部分，通常在页脚部分中加入一些辅助用户了解网站的链接、标注网站所属单位的名称、地址、联系方式、网站备案信息、版权声明等信息，使浏览者通过页脚了解到网站所有者的一些情况。如下图所示为一些网站的页脚区域。1.2.3　网页设计工具

在建设网站和设计制作网页时，会用到许多软件工具，以提高网站设计和建设的效率。在网页设计和制作过程中通常需要进行网页效果设计、图像处理与优化、网页布局制作与内容编排、动画设计和制作等工作，常用的软件如下。

1．网页编排软件

网页的编辑和排版是网页制作中的重要工作之一，该类软件的作用是将网页中的各类内容元素进行整合。由于网页文件实质上是由文本格式的HTML代码构成的，凡是能进行文本文档编辑的软件均可完成网页的编排，如Windows系统自带的记事本也能完成网页的编排。但由于普通的文本文档编辑软件无法进行可视化的网页内容编辑，为了更方便更快捷地实现网页编排，常常需要借助专业的网页编排软件。

常用的网页编排软件有Adobe Dreamweaver、Microsoft FrontPage等，最为流行的则是Adobe Dreamweaver，它可以对Web站点、网页和Web应用程序进行设计、编码和开发，并且软件界面简洁、功能强大。它不仅是专业人员制作网站的首选工具，而且广大网页制作爱好者使用率也很高。目前Adobe Dreamweaver已更新至版本CS6，支持最新的HTML和CSS，如下图所示是Adobe Dreamweaver CS6的工作界面。

2．网页设计及图像处理软件

在网络不断发展的今天，光靠简单的内容排版制作的网页已经无法很好地适应浏览者对美观的要求和对艺术的追求，为了使整体的网页效果更美观、布局结构更合理更个性，常常需要应用专业的图形和图像处理软件来设计网页的整体效果、处理网页中各种图形和图像元素。常用的网页效果图设计和网页图像处理的软件有Adobe Photoshop和Adobe Fireworks等。

Adobe Photoshop具有非常强大的图像处理能力，通常在网页图像处理工作中起着非常重要的作用，同时在平面设计、包装设计、建筑设计等工作中均有重要应用；而Adobe Fireworks则为更专业的网页设计软件，应用Fireworks除了能够更高效地设计网页效果图、处理网页中的图形和图像外，还能快速地制作和模拟网页中的动态交互效果，制作网页交互原型、网页图像动画等，在网页制作的前期工作中体现出更为强大的功能和作用。目前Adobe Fireworks也更新至CS6版本，下图为Adobe Fireworks CS6的软件界面。

3．网页动画设计与制作软件

网页中增加动画效果，不但能吸引浏览者的眼球，更为网页整体的效果及品牌形象起到了提升作用，通常网页中的动画可以通过Adobe Fireworks和Adobe Flash进行制作，前者主要用于简单的图像动画制作，而Flash则是用于复杂的多媒体动画及交互动画制作的专业动画制作软件，是目前最流行的网页动画制作软件。

Adobe Flash除了应用于网页动画的制作外，在各行各业也有着广泛的应用，例如Flash游戏、多媒体演示动画、应用软件开发等。

如下图所示为Adobe Flash CS6工作环境。1.2.4　网站开发流程

网站建设是一个系统工程，有一定的工作流程，只有遵循这个步骤，做好网站建设中的每一个步骤，才能设计出完整的规范的网站。网站开发的大致流程如下。

1．网站的整体规划

在创建网站前，首先必须对网站进行整体的规划和设计。网站的整体规划和设计在整个网站创建中起到指导作用。好的网站规划能够令网站质量更佳，使浏览者身心舒畅。通常在建立网站前需要书写网站功能需求和网站项目策划书，在策划书中详细规划网站。大型的网站和功能性较强的网站可制作出网站的交互原型，以分析网站中各部分的功能和存在的问题。

2．设计页面效果图

在确定好网站的风格和搜集完资料后就需要设计网页效果图了，在网页效果图设计中包括Logo、标准色彩、标准字、导航条和首页布局等设计元素。可以使用Photoshop或Fireworks软件来具体设计网站的效果图。

网页效果图设计是网站规划中的一个非常重要的环节。网页的设计包括网站的Logo设计、网页的布局设计、网页的色彩搭配和网站的字体等。互联网上有很多风格迥异的网站，其表现有的大气、有的婉约、有的精致、有的古典、有的沉稳、有的庄严肃穆、有的高雅严谨、有的雄伟壮丽等。

3．静态Web页面制作

完成网页效果图的设计后，需要参照效果图制作出真正的网页文件。通常通过对效果图中的图形和图像进行切片，导出为小图片后，再应用Dreamweaver软件，制作出符合行业标准的静态Web页面。

4．动态功能模块程序开发

在网站中若需要应用动态程序，则需要开发相应的功能程序模块，并将制作好的静态Web页制作为动态网页，并制作后台管理程序，用于管理前端页面中显示的信息内容及网站中的各类功能。

5．注册域名和空间

域名注册的流程与方式比较简单，首先可以通过域名注册商，或者一些公共的域名查询网站查询所希望注册的域名是否已经被注册，如果没有，则需要尽快与一家域名注册服务商取得联系，告诉他们自己希望注册的域名，以及付款的方式。域名属于特殊商品，一旦注册成功是不可退款的，所以通常情况下，域名注册服务商需要先收款。当域名注册服务商完成域名注册后，域名查询系统并不能立即查询到该域名，因为全球的域名WHOIS数据库更新需要1～3天的时间。

网站是建立在网络服务器上的一组电脑文件，它需要占据一定的硬盘空间，这就是一个网站所需的网站空间。在网络中有许多提供免费静态网站空间的网站，若是制作静态网站可以申请静态网站空间，如果要制作动态网站，则通常需要到空间提供商处租用支持动态网站程序的服务器。

一般来说，一个标准中型企业网站的基本网页HTML文件和网页图片需要8 MB左右空间，加上产品照片和各种介绍性页面，一般在15 MB左右。除此之外，企业可能还需要存放反馈信息和备用文件的空间，这样，一个标准的企业网站总共需要30～50 MB的网站空间。当然，如果是从事网络相关服务的用户，可能需要将大量的内容存放在网站空间中，这样就需要申请足够大的空间。

6．网站测试与发布

网站测试实际上是模拟用户访问网站的过程，用以发现问题并对此改进设计。发布是让人知道网站的存在。通常在网站测试时，可将网站文件上传于申请的网站空间，通过访问空间地址测试网站整体运行情况及程序与空间的兼容性，用不同的浏览器访问网站，以确认浏览器的兼容性，可请不同地区的朋友访问网站以确定不同线路是否可以访问网站。

网站测试无误后可将空间地址与域名绑定，并向工业和信息化部提交网站备案信息申请网站备案，网站备案可以通过官方备案网站在线备案或者通过当地电信部门两种方式来进行网站的备案。网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。根据中华人民共和国信息产业部第十二次部务会议审议通过的《非经营性互联网信息服务备案管理办法》精神，在中华人民共和国境内提供非经营性互联网信息服务，应当办理备案！未经备案，不得在中华人民共和国境内从事非经营性互联网信息服务。而对于没有备案的网站将予以罚款或关闭。

7．网站推广及优化

网站的推广对网站的运营有重大的作用，当一个网站发布之后，人们并不会知道这个网站的存在，必须通过各种手段宣传，让大家知道并访问这个网站。常见的推广手段有搜索引擎推广、电子邮件推广、网站资源合作推广、信息发布推广、网站广告推广、传统广告推广等。目前较为流行的推广方式有SEO（Search Engine Optimization），即搜索引擎优化，主要目的是增加特定关键字在搜索引擎的搜索结果中的曝光率，以增加点击率和访问量；其次还有微博推广等新兴的推广方式。

网站的优化则是在网站运营的过程中，根据浏览者反馈的情况及运营过程中收集的数据，通过分析和处理后对网站中的功能及页面内容进行改进，以适应大部分访问者的习惯，使网站能被访问者接受和喜爱。1.2.5　HTML基础知识

HTML（Hypertext Markup Language）即超文本标记语言，用于描述网页文本的一种标记语言。它通过标记符号来标记要显示的网页中的各个部分。使用超文本标记语言制作网页文档并不复杂，但其功能强大，并且具有很强的扩展性和跨平台特性，目前HTML的版本已经发展至4.01版本，而HTML 5的草案也早已提出，但目前仍处于发展阶段，许多移动平台的浏览器和新发布的一些浏览器已经开始适应HTML 5，但由于庞大的网络中仍有大部分用户使用着老版本的浏览器而不能很好适应HTML 5，作为网页设计开发者，暂时不能抛弃这部分用户，并且HTML 5也并未正式发布，所以，目前HTML 4.01仍为主流的超文本标记语言。

HTML实质上也是文本，通过浏览器对文本中的标签进行解释从而表现出不同的效果，在浏览器中打开网页后可查看网页的源文件，即为HTML代码。现以Internet Explorer 9.0为例，查看网页HTML的方法有：

方法一：在网页内容区域中的空白处单击鼠标右键，在弹出的菜单中选择“查看源文件”命令，如左下图所示。

方法二：单击“查看”菜单，选择“源文件”命令，如右下图所示。

在网页的源文件窗口中，即可看到HTML标签及网页内容的组成，如下图所示。

标准的超文本标记语言文件通常以.html作为文件后缀名，其内容中都具备一个基本的整体结构，分别为：表明文件类型的标记“”、表示文件头信息的标记“”、表示网页内容主体的标记“”。如右图所示的内容是基本的网页结构。

大部分的超文本标记都由一个开始标记和一个结构标记构成，即标记一个区域中的内容，其基本格式为“<标签名>…”，如“…”、“…”等。许多标记可层层嵌套来表明一种层次关系，例如在超文本标记语言文件的基本结构中，“head”标记和“body”标记均属于“html”标记的内容，此外还有许多标签可以放置于“head”或“body”标记中。1.2.6　DIV+CSS网页布局概述

DIV+CSS是一种网页布局的方式，即布局网页中各元素及内容，并为各部分内容添加修饰的一种方式。DIV实际上是HTML标记语言中的一个标签，用于表示一个区域；CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义元素的显示形式及显示效果。从表面上可将DIV+CSS理解为在HTML中使用DIV元素作为网页各部分内容的容器，使用CSS样式来控制容器的外观及位置的一种布局方式。1.2.7　W3C标准

由于网页存在于庞大的互联网中，网页可能被展示到各种各样不同的设备和浏览器中，为了使不同浏览器中均能查看到相同的网页内容，万维网联盟（World Wide Web Consortium，W3C）制定了一系列网页开发标准，即W3C标准，大部分浏览器均按照该标准进行开发，故网页也需要在该标准上进行开发，以保证网页内容被浏览器正确识别。

在W3C标准中，将网页分解为三个部分：结构、表现和行为，提出网页中三者分离的要求，并分别针对这三个方面制定了具体的标准。

1．结构标准

网页内容之间的层次关系即为结构，W3C标准中的结构标准主要包括XHTML和XML，即可扩展标识语言。目前在标准网页制作中通常采用XHTML，它是在HTML 4.0基础上使用XML规则对其进行扩展得到的。

2．表现标准

表现可理解为网页中的修饰成分，表现的标准语言为CSS，其主要目的是取代HTML中的表现元素，从而实现分离表现和结构，使站点的访问与维护更加容易。

3．行为标准

行为可以理解为网页中的交互或程序，行为标准中规定了文档对象模型DOM，即与浏览器、平台、语言的接口，使得网页中的程序可以调用网页内容甚至浏览器对象中的标准组件；同时，行为标准中将JavaScript作为标准脚本程序语言。1.3　同步训练——实战应用实例1：使用开发人员工具查看百度首页案例效果制作分析

本例难易度：★★☆☆☆具体步骤

STEP 01：访问百度首页。启动浏览器IE9.0，在地址栏中输入“baidu.com”并按【Enter】键，打开百度首页，如左下图所示。

STEP 02：开启开发人员工具。选择“工具”菜单中的“F12开发人员工具”选项，开启“开发人员工具”窗口，操作过程如右下图所示。

STEP 03：查看HTML代码。在打开的“开发人员工具”左侧窗口中，单击代码段前的“+”按钮展开代码段内容，查看HTML代码，单击选择代码段，在浏览器窗口中将以蓝色边框显示所选代码所表示的具体网页内容，如下图所示。

STEP 04：查看所选元素的CSS样式。单击“开发人员工具”右侧窗口上方的“跟踪样式”按钮，可查看当前所选元素的CSS样式，如左下图所示。

STEP 05：查看老版本IE下页面的显示效果。为检验网页在不同版本的IE浏览器下的显示效果，可单击“开发人员工具”窗口中的“浏览器模式”菜单，选择要使用的浏览器版本，如右下图所示。实例2：使用记事本创建网页文件案例效果制作分析

本例难易度：★★★★☆具体步骤

STEP 01：创建网页文件。打开资源管理器，进入要创建网页的文件夹，执行“文件→新建→文本文档”命令，创建一个文本文件，如左下图所示；将文件名命名为“第1个网页.html”，如右下图所示。

STEP 02：用记事本打开网页。右键单击该文件，选择“打开方式”子菜单中的“选择默认程序”命令，见左下图；在“打开方式”对话框中选择“记事本”图标，取消“始终使用选择的程序打开这种文件”选项，并单击“确定”按钮，见右下图。

STEP 03：输入HTML基本结构标签。在打开的文档内容中输入标志网页基本结构HTML的基本标签：html、head、title和body，具体结构如下图所示。

STEP 04：设置网页标题文字。在“”标记之间输入网页的标题文字内容“这是我的第一个网页”，如下图所示。

STEP 05：输入网页正文内容。在“”和“”之间输入网页中的正文内容，如左下图所示，保存文件并双击文件，用浏览器打开查看网页效果，如右下图所示。

STEP 06：使用标题文字标签。在“”和“”之间的文字内容中“内容区域”四个字前插入文本“

”，在其后插入文本“

专家提示

在将文本文件重命名为网页文件时，应注意文件的扩展名，HTML网页文件的扩展名为html或htm，在更改文件名时无法修改文件扩展名，则需要在Windows系统中的“资源管理器”中，执行“工具→文件夹选项”命令，在“查看”选项卡中取消“隐藏已知文件类型的扩展名”选项，单击“确定”按钮后修改文件扩展名。本章小结

本章主要介绍了与网站建设和网页设计相关的基础知识，包括互联网基础知识、网站和网页相关的基础知识、开发工具和语言、Web标准、浏览器中的开发人员工具的使用以及HTML语言的基本结构等。

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

下载完整电子书