作者：李红,崔连和
出版社：东南大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页设计与制作试读：
前言
Dreamweaver、Fireworks、Flash（网页制作三剑客）分别是网页制作、图像处理、动画制作的专用工具，三者既相互联系，又相互独立，是网页制作人员的必备工具。其中，Dreamweaver是一款功能强大、所见即所得的网页编辑器，用户不需要懂得太多的HTML代码，就能灵活地进行网页制作。因为它融入了方便的代码编辑技术，使可见化的操作与源代码编辑有机地统一起来，使制作高水平的网页变得更加简单，能够制作出许多以前只能通过编程才能达到的效果，所以它是网页制作人员的首选工具。Fireworks是它的兄弟，是一款出色的图像处理软件，它把与网页相关的处理技术体现得淋漓尽致。Flash也是它的一个兄弟，在二维动画的制作上，它使以前只能使用手工制作的动画变得如此轻松容易。本书以Dreamweaver 8、Fireworks 8、Flash 8（网页制作三剑客）为中心，主要介绍了网页的设计与制作方面的基本知识及完整网站的开发上传流程。
本书的特点是从理论出发，将主要知识点落实到实例上。充分考虑到高职高专院校教师和学生的实际需求，本着手把手教学生做网页的理念，清晰讲解了每个实例的制作步骤，这样便于老师教，也便于同学学习。
本书的计划学时是60学时左右，本着教师讲授基本知识分配20学时，然后再给同学配以40学时的上机练习，即可很好地完成教学任务。
本书共10章，前9章的主要内容大致为以下几个部分：（1）知识结构框图和知识要点：它列举出了本章的重点知识及主要的学习内容，目的是让学生在学习本章之初对本章的重点有一个整体认识，学习时有的放矢。（2）基础知识简介：讲解在实例制作过程中用到的基本知识，目的是让学生熟悉基本工具的使用，要知其然还要知其所以然。（3）实例操作：将实例制作的步骤一步一步地做出来，目的是手把手教会学生每一部分知识的运用，实例的制作导航清晰，步骤连贯。（4）练习题：在每章后留有练习题，供教师检验学生的学习效果之用，也可以作为学生的家庭作业。
第10章是综合了1～9章的基本知识，以一个大型的网站制作实例来讲解制作网站整体规划、制作过程、网页的上传与发布整个流程。制作步骤连贯，能逐步引人入胜，有较强的应用性和示范性。
需要说明的是，在使用本书过程中，需要读者自行准备一些素材，如图片、声音、视频等，来协助学习。
本书的第1、2章由王淑芬编写，第3、6章由李红编写，第4、9章由崔连和编写，第5章由徐一编写，第7、8章由张立峰编写，第10章由许宁编写，全书由李红负责统稿。
本书在编写过程中参考了部分图书和资料，在此向相关专家学者表示感谢。
由于本书的编者水平有限，再加上时间仓促，书中难免有不妥与疏漏之处，敬请各位读者的不吝指正，我们的联系邮箱是yalian0101@126.com。作者2011年1月1 网页制作基础本章知识结构框图本章知识要点1.网络的基础知识；2.网站的整体构思；3.网页的特色构思。【学习激励与案例导航】
程序人生之比尔·盖茨如今，全世界大多数个人电脑都装有微软的操作系统。比尔·盖茨使个人计算机成了日常生活用品，并因而改变了每一个现代人的工作、生活乃至交往的方式。比尔·盖茨对软件的贡献，就像爱迪生之于灯泡。盖茨出生于1955年10月，任微软公司主席和首席软件设计师。1973年，比尔·盖茨考进哈佛大学，和微软的首席执行官史蒂夫·鲍尔默结成好朋友。在哈佛的时候，盖茨为第一台微型计算机MITS Altair开发了BASIC编程语言。1999年，盖茨撰写了《未来时速：数字神经系统和商务新思维》（Business@the Speed of Thought：Using a Digital Nervous System）一书，这本书在超过60个国家以25种语言出版。比尔·盖茨13岁开始编程，39岁成为世界首富，连续13年问鼎福布斯财富榜。微软集团是一家为个人计算机和商业计算机提供软件、服务和Internet技术的世界范围内的公司，截止于2008年的财务统计，微软公司的总收入近620亿美元，在60个国家与地区的雇员总数超过了50000人。
凡事欲则立，不欲则废。每做一件事，都要有计划。建设一个成功的网站也需要周全地考虑、详尽地规划。读者都正走在求知大道上，正在迎接美好壮丽的人生，更需要用心规划、用心经营自己的人生。1.1 网页制作基础1.1.1 Internet基础知识
1）Internet简介
国际互联网英文名为Internet，也称为因特网，Internet在字面上讲就是计算机互联网的意思。通俗地说，全世界成千上万台计算机相互连接到一起，这一个全球的计算机网络集合体就是Internet。Internet是国际计算机互联网络，它将全世界不同国家、不同地区、不同部门和机构的不同类型的计算机及国家主干网、广域网、城域网、局域网通过网络互联设备永久性地高速互联，因此是一个“计算机网络的网络”。
Internet将全世界范围内各个国家、地区、部门和各个领域的信息资源联为一体，组成庞大的电子资源数据库系统，供全世界的网上用户共享。
用户如要加入Internet，只需把自己的计算机联入与Internet互联的任何一个网络，或与Internet上的任何一台服务器连接起来即可。在世界上任何地方的任何一台计算机只要联入Internet，就可以跨越时空查阅信息资源，与网络上其他的计算机或用户交换信息，获得该网络提供的各种信息服务，而不受地区、国界和时间的限制。
Internet的发源地在美国，而今天，它已扩展到全球范围，并成为全球信息高速公路的基础，在许多方面获得成功。它对全人类社会的发展和人类文明建设起到巨大的推动作用。
2）Internet的功能
Internet实际上是一个应用平台，在它的上面可以开展很多种应用，下面从7个方面来说明Internet的功能：（1）信息的获取与发布 Internet是一个信息的海洋，通过它你可以得到无穷无尽的信息，其中有各种不同类型的书库和图书馆，杂志和报纸。网络还为你提供了政府、学校和公司企业等机构的详细信息和各种不同的社会信息。这些信息的内容涉及社会的各个方面，包罗万象，几乎无所不有。你可以坐在家里却能了解到全世界正在发生的事情，也可以将自己的信息发布到Internet上。（2）电子邮件（E-mail）平常的邮件一般是通过邮局传递，收信人要等几天（甚至更长时间）才能收到那封信。电子邮件和平常的邮件有很大的不同，电子邮件的写信、收信、发信都在计算机上完成，从发信到收信的时间以秒来计算，而且电子邮件几乎是免费的。同时，你在世界上只要可以上网的地方，都可以收到别人寄给你的邮件，而不像平常的邮件，必须到达收信的地址才能拿到信件。（3）网上交际 网络可以看成是一个虚拟的社会空间，每个人都可以在这个网络社会中充当一个角色。Internet已经渗透到大家的日常生活中，你可以在网上与别人聊天、交朋友、玩网络游戏，“网友”已经成为一个使用频率越来越高的名词，这个网友你可以完全不认识，他（她）可能远在天边，也可能近在眼前。网上交际已经完全突破传统的交朋友方式，全世界不同性别、年龄、身份、职业、国籍、肤色的人，都可以通过Internet成为好朋友，他们不用见面可以进行各种各样的交流。（4）电子商务 在网上进行贸易已经成为现实，而且发展得如火如荼，例如可以开展网上购物、网上商品销售、网上拍卖、网上货币支付等。它已经在海关、外贸、金融、税收、销售、运输等方面得到了应用。电子商务现在正向一个更加纵深的方向发展，随着社会金融基础设施及网络安全设施的进一步健全，电子商务将在世界上引起一轮新的革命。在不久的将来，你将可以坐在电脑前进行各种各样的商业活动。（5）网络电话 IP电话卡已成为一种很流行的电信产品而受到人们的普遍欢迎，因为它的长途话费大约只有传统电话的三分之一。IP电话凭什么能够做到这一点呢?原因就在于它采用了Internet技术，是一种网络电话。现在市场上已经出现了很多种类型的网络电话，还有一种网络电话，它不仅能够听到对方的声音，而且能够看到对方，还可以几个人同时进行对话，这种模式也称为“视频会议”。Internet在电信市场上的应用将越来越广泛。（6）网上事务处理 Internet的出现将改变传统的办公模式，你可以在家里上班，然后通过网络将工作的结果传回单位；你出差的时候，不用带上很多的资料，因为随时都可以通过网络提取到需要的信息，Internet使全世界都可以成为你办公的地点。实际上，网上事务处理的范围还不只包括这些。（7）Internet的其他应用 Internet还有很多其他的应用，例如远程教育、远程医疗、远程主机登录、远程文件传输等。
总之言之，在信息世界里，以前只有在科幻小说中出现的各种现象，现在已经在慢慢地成为现实。Internet还处在不断发展的状态，谁也预料不到，明天的Internet会成为什么样子。
3）Internet的发展
Internet是在美国较早的军用计算机网ARPANET的基础上经过不断发展变化而形成的。
Internet的雏形形成阶段在1969年，美国国防部研究计划管理局（Advanced Research Pro-jects Agency,ARPA）开始建立一个命名为ARPANET的网络，当时建立这个网络的目的只是为了将美国的几个军事及研究用电脑主机连接起来，人们普遍认为这就是Internet的雏形。
发展Internet时沿用了ARPANET的技术和协议，而且在Internet正式形成之前，已经建立了以ARPANET为主的国际网，这种网络之间的连接模式，也是随后Internet所用的模式。
Internet的发展阶段是美国国家科学基金会（NSF）在1985开始建立NSFNET。NSF规划建立了15个超级计算中心及国家教育科研网，用于支持科研和教育的全国性规模的计算机网络NSFNET，并以此作为基础，实现同其他网络的连接。NSFNET成为Internet上主要用于科研和教育的主干部分，代替了ARPANET的骨干地位。
1989年MILNET（由ARPANET分离出来）实现和NSFNET连接后，就开始采用Internet这个名称。自此以后，其他部门的计算机网相继并入Internet,ARPANET就宣告解散。
Internet的商业化阶段90年代初，商业机构开始进入Internet，使Internet开始了商业化的新进程，也成为Internet大发展的强大推动力。
1995年，NSFNET停止运作，Internet已彻底商业化了。
这种把不同网络连接在一起的技术的出现，使计算机网络的发展进入一个新的时期，形成由网络实体相互连接而构成的超级计算机网络，人们把这种网络形态称为Internet（互联网络）。
1994年4月，中科院计算机网络信息中心正式接入Internet网。
4）Internet在我国的发展
1987年至1993年，我国与Internet的连接仅仅是电子函件的转发连接，并只在少数高校和科研机构提供电子邮件服务。
1987年9月，北京计算机应用技术研究所与德国卡尔斯鲁厄大学（Karlsruhe University）合作，建成CANET中国科技网（China Academic Network），它是我国第一个Internet电子邮件服务节点，并于1990年10月正式向Internet信息中心InterNIC注册了我国的顶级域名cn。
1994年3月，Internet管理委员会正式批准中国进入Internet，中国政府也批准Internet与中国联通。
1994年，我国第一条Internet专线在中国科学院高能物理研究所正式接通。该所的IHEPNET网络（Institute of High Energy Physics Network）迈出了与世界数以百万计的计算机共享信息的第一步，同年8月，在北京召开的高能物理大会第一次通过Internet由中国向全世界发布信息。
5）Internet的工作原理
互联网连接了世界上不同国家与地区无数不同硬件、不同操作系统与不同软件的计算机，为了保证这些计算机之间能够畅通无阻地交换信息，必须拥有统一的通信协议，在互联网上就使用TCP/IP作为一个标准的通信协议。
TCP/IP所采用的通信方式是分组交换方式。就是数据在传输时分成若干段，每个数据段称为一个数据包，TCP/IP的基本传输单位是数据包。TCP/IP主要包括两个主要的协议，即TCP和IP，这两个协议可以联合使用，也可以与其他协议联合使用，它们在数据传输过程中主要完成以下功能：
首先由TCP把数据分成若干数据包，给每个数据包写上序号，以便接收端把数据还原成原来的格式。
IP给每个数据包写上发送主机和接收主机的地址，一旦写上源地址和目的地址，数据包就可以在网上传送数据了。
这些数据包可以通过不同的传输途径（路由）进行传输，由于路径不同，加上其他原因，可能出现顺序颠倒、数据丢失、数据失真甚至重复的现象。这些问题都由TCP来处理，它具有检查和处理错误的功能，必要时还可以请求发送端重发。换句话说，IP负责数据的传输，而TCP负责数据的可靠传输。
6）Intranet
Intranet（内联网）是指在一个单位或企业内通过TCP/IP建立的网络。它可以是一个局域网，也可以是一个广域网。
近年来，随着Internet的普及和公司、企业商务应用的需求，Intranet随之产生并发展，且更受网络界关注。Intranet是基于Internet技术、TCP/IP和HTTP等通信协议以及WWW等信息服务的一种区域化的信息系统，它通过上述开放的Internet标准协议，把多种服务平台提供给区域网络中的计算机。它既给一个公司或企业提供了将其自身组织成一个完整系统的网络环境，也可以根据需要通过防火墙技术提供访问Internet的平台，或者接入Internet成为其一部分。它代表了一个公司或企业的组织水平，它的目标是组织每个职工以最少的时间、最低的花费获得更高的生产率，从而使公司企业更具竞争力。
7）TCP/IP
TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/互联网络协议）是Internet最基本的协议。简单地说，就是由底层的IP和TCP组成。
在Internet没有形成之前，各个地方已经建立了很多小型的网络，称为局域网。Internet的中文意义是“网际网”，它实际上就是将全球各地的局域网连接起来而形成的一个“网之间的网（即网际网）”。然而，在连接之前的各式各样的局域网却存在不同的网络结构和数据传输规则，将这些小网连接起来后各网之间要通过什么样的规则来传输数据呢?这就像世界上有很多个国家，各个国家的人说各自的语言，世界上任意两个人要怎样才能互相沟通呢?如果全世界的人都能够说同一种语言（即世界语），这个问题不就解决了吗?TCP/IP正是Internet上的“世界语”。
8）IP地址、域名与URL的关系
Internet是由不同物理网络互联而成，不同网络之间实现计算机的相互通信必须有相应的地址标识，这个地址标识称为IP地址。IP地址提供统一的地址格式，即由32个二进制位（bit）组成。由于二进制使用起来不方便，常用“点分十进制”方式来表示。即将IP地址分为4个字节，每个字节以十进制数来表示，各个数之间以句点来分隔。例如，中国人民大学网站的IP地址是：202.112.112.224。IP地址唯一地标识出主机所在的网络和网络中位置的编号。
与IP地址相比，人们更喜欢使用具有一定含义的字符串来标识Internet网上的计算机，因此，在Internet中，用户可以用各种各样的方式来命名自己的计算机，这样就可能在Internet网上出现重名，如提供WWW服务的主机都命名为WWW，提供E-mail服务的主机都命名为mail等，这样就不能唯一地标识Internet网中的主机位置。为了避免重名，Internet管理机构采取了在主机名后加上后缀名的方法，这个后缀名称为域名（domain），用来标识主机的区域位置，域名是通过申请合法得到的。这样，在Internet上的主机就可以用“主机名.域名”的方式唯一地进行标识。例如：www.ruc.edu.cn中“www”为主机名，由服务器管理员命名，“ruc.edu.cn”为域名，由服务器所属单位向域名管理机构申请使用。域名系统需要通过域名服务器（DNS）的解析服务转换为实际的IP地址，才能实现最终的访问。
URL（Uniform Resource Locator，统一资源定位器）是WWW页的地址，其格式排列为：scheme://host：port/path，下面从左到右分别介绍一下它的各个部分的作用：（1）【Internet资源类型（scheme）】指出WWW客户程序用来操作的工具。如“http://”表示WWW服务器，“ftp://”表示FTP服务器，“gopher://”表示Gopher服务器，而“new：”表示Newsgroup新闻组。（2）【服务器地址（host）】指出WWW页所在的服务器域名。（3）【端口（port）】有时（并非总是这样），对某些资源的访问来说，需给出相应服务器提供的端口号。（4）【路径（path）】指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常由目录/子目录/文件名这样的结构组成）。与端口一样，路径并非总是需要的。【实例】举例说明中国人民大学的IP地址、单位名、域名。
为了帮助大家理解IP地址、域名与URL的关系，我们可以将IP地址类比为单位的门牌号码，下面举例说明。（1）中国人民大学的门牌号码是：中关村大街59号；（2）中国人民大学网站的IP地址是：202.112.112.224。
域名可以类比为单位的名称，下面举例说明。（1）中国人民大学的单位名称是：中国人民大学；（2）中国人民大学网站的域名是：ruc.edu.cn。
URL说明了以何种方式访问哪个网页，就像说“我要坐公共汽车到中国人民大学，然后到校图书馆去”一样，我们可以通过“HTTP协议”来访问中国人民大学的网上图书馆，即http://www.lib.ruc.edu.cn。1.1.2 WWW简介
WWW是Internet的多媒体信息查询工具，是Internet上近年才发展起来的服务，也是发展最快和目前用的最广泛的服务。正是因为有了WWW工具，才使得近年来Internet迅速发展，且用户数量飞速增长。
1）WWW简介
WWW是WorldWideWeb（环球信息网）的缩写，也可以简称为Web，中文名字为“万维网”。它起源于1989年3月，由欧洲粒子物理实验室CERN（European Laboratory for Particle Physics）所发展出来的主从结构分布式超媒体系统。通过万维网，人们只要通过使用简单的方法，就可以很迅速方便地取得丰富的信息资料。
由于用户在通过Web浏览器访问信息资源的过程中，无需再关心一些技术性的细节，而且界面非常友好，因而Web在Internet上一推出就受到了热烈的欢迎，走红全球，并迅速得到了爆炸性的发展。
2）WWW的工作原理
万维网有如此强大的功能，那WWW是如何运作的呢?
WWW中的信息资源主要由一篇篇的Web文档，或称Web页，为基本元素构成。这些Web页采用超文本（Hyper Text）的格式，即可以含有指向其他Web页或其本身内部特定位置的超链接，或简称链接。可以将链接理解为指向其他Web页的“指针”。链接使得Web页交织为网状。这样，如果Internet上的Web页和链接非常多的话，就构成了一个巨大的信息网。
当用户从WWW服务器取到一个文件后，用户需要在自己的屏幕上将它正确无误地显示出来。由于将文件放入WWW服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端，要保证每个人在屏幕上都能读到正确显示的文件，必须以某种各类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了HTML超文本语言。
HTML（Hype Text Markup Language）的正式名称是超文本标记语言。HTML对Web页的内容、格式及Web页中的超链接进行描述，而Web浏览器的作用就在于读取Web网点上的HTML文档，再根据此类文档中的描述组织并显示相应的Web页面。
HTML文档本身是文本格式的，用任何一种文本编辑器都可以对它进行编辑。HTML语言有一套相当复杂的语法，专门提供给专业人员用来创建Web文档，一般用户并不需要掌握它。在Unix系统中，HTML文档的后缀名为“.html”，而在DOS/Windows系统中则为“.htm”。
3）WWW的核心——HTTP
WWW服务器使用的主要协议是HTTP，即超文本传输协议。由于HTTP支持的服务不限于WWW，还可以是其他服务，因而HTTP允许用户在统一的界面下，采用不同的协议访问不同的服务，如FTP、Archie、SMTP、NNTP等。另外，HTTP还可用于名字服务器和分布式对象管理。（1）HTTP简介 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断的完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG（Next Generation of HTTP）的建议已经提出。（2）HTTP的运作方式 基于HTTP的客户机/服务器模式的信息交换过程，如图11所示，它分四个过程，建立连接、发送请求信息、发送响应信息和关闭连接。图11 基于HTTP的客户机/服务器模式的信息交换过程
在WWW中，“客户机”与“服务器”是一个相对的概念，只存在于一个特定的连接期间，即在某个连接中的客户机在另一个连接中可能作为服务器。WWW服务器运行时，一直在TCP 80端口（WWW的缺省端口）监听，等待连接的出现。1.1.3 什么是CGI、ASP与PHP
1）什么是CGI
CGI（Common Gateway Interface，通用网关接口）主要的功能是在WWW环境下，从客户端传递一些信息给WWW Server，再由WWW Server去启动所指定的程序代码来完成特定的工作。所以更明确地说，CGI仅是在WWW Server上可执行的程序代码，而它的工作就是控制信息要求而且产生并传回所需的文件。
CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。对初学者来说，最好选用易于归档和能有效表示大量数据结构的语言。目前比较常见的语言有Perl、C/C++、Java、Visual Basic、Visual Foxpro等，ASP、bat（批处理文件）也可算其中一种，所以它的范围很广。而Perl（Practical Extraction and Reporting Language）正是最适合的语言之一。
2）什么是ASP
ASP（Active Server Page，动态服务器页面）是一种包含了使用VBScript或JavaScript脚本程序代码的网页。当浏览器浏览ASP网页时，Web服务器就会根据请求生成相应的HTML代码然后再返回给浏览器，这样浏览器端看到的就是动态生成的网页。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。在了解了VBScript的基本语法后，只需要清楚各个组件的用途、属性、方法，就可以轻松编写出自己的ASP系统。ASP的网页文件的后缀名是“.ASP”。
3）什么是PHP
PHP是一种服务器端的HTML嵌入式脚本描述语言。其最强大和最重要的特征是其数据库集成层，使用它完成一个含有数据库功能的网页是不可置信的简单。在HTML文件中，PHP脚本程序（语法类似于Perl或者C语言）可以使用特别的PHP标签进行引用，这样网页制作者也不必完全依赖HTML生成网页了。由于PHP是在服务器端执行的，客户端是看不到PHP代码的。PHP可以完成任何CGI脚本可以完成的任务，但它的功能的发挥取决于它和各种数据库的兼容性。PHP除了可以使用HTTP进行通信，也可以使用IMAP、SNMP、NNTP、POP3等协议。1.1.4 VBScript和JavaScript简介
1）VBScript介绍
Microsoft Visual Basic Scripting Edition是程序开发语言Visual Basic家族的成员，它将灵活的Script应用于更广泛的领域，包括Microsoft Internet Explorer中的Web客户机Script和Mi-crosoft Internet Information Server中的Web服务器Script。它的语法规则与VB很类似，但是还是有些限制。它可以在客户端使用，也可以在服务器端使用。
2）JavaScript介绍
JavaScript语言的前身称为LiveScript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的LiveScript重新进行设计，并改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标记语言、Java脚本语言一起实现在一个网页中链接多个对象，与网络客户机交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。1.1.5 什么是HTML
当我们畅游Internet时，通过浏览器所看到的网站，是由HTML所构成。HTML是一种建立网页文件的语言，透过标记式的指令（Tag），将影像、声音、图片、文字等连接显示出来。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Unix、Windows等）。自1990年以来HTML就一直被用作WWW的信息表示语言，用于描述Homepage的格式设计和它与WWW上其他Homepage的连接信息。使用HTML描述的文件，需要通过WWW浏览器显示出效果。
HTML标记是由“＜”和“＞”所括住的指令，主要分为单标记指令和双标记指令（由＜起始标记＞、＜/结束标记＞所构成）。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后（以“.htm”或“.html”为文件后缀名保存）将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
下面介绍一下HTML文件基本架构。
这是＜HTML＞网页文件格式。其中“＜HEAD＞标头区”记录文件基本资料，如作者、编写时间；“＜TITLE＞标题区”说明文件标题须使用在标头区内，可以在浏览器最上面看到标题；“＜BODY＞正文区”这部分是文件资料，即在浏览器上看到的网站内容。
通常一个HTML网页文件包含“＜HEAD＞……＜/HEAD＞标头区”和“＜BODY＞……＜/BODY＞正文区”这两部分，而“＜HTML＞……＜/HTML＞”代表网页文件格式。习惯上一个网站的首页名称通常定为index.htm或index.html，这样只要浏览网站，浏览器便会自动地找出index.htm文件。1.1.6 URL与域名
1）什么是URL
URL，是Universal Resource Locator的缩写，学名叫统一资源定位器，也叫网址。当我们想搜索所需的信息时可在浏览器的地址栏输入有关搜索引擎类的网址：如http://www.baidu.com。注意在输入网址时要使用英文半角输入法。
URL包含三部分内容：协议类型://主机名/资源所在路径和文件名。（1）“http://”表示的是要访问的文件的协议类型。（2）“www.baidu.com”是主机的名字，“com”是顶级域名，各级域名之间用“.”隔开。（3）你要访问的页面的名字在“/”后面显示，如：/search。
2）什么是域名
因特网中文域名结构由TCP/IP协议集的域名系统（Domain Name System,DNS）进行定义。域名是具有一定层次结构的，DNS把因特网划分成多个顶级域，并规定了国际通用域名。顶级域采用组织模式和地理模式两种方法。前7个域对应于组织模式，其余的域对应于地理模式。地理模式的顶级域是按国家划分的，如cn代表中国，uk代表英国、fr代表法国等。常见的顶级域名如表11所示。表11 常见的顶级域名表1.1.7 Internet Explorer浏览器简介
随着计算机技术的快速发展，计算机作为一种了解和掌握信息的常用工具在我们工作和生活中起着重要的作用。计算机网络也成为人们日常不可缺少的一部分，计算机网络技术将全世界互联在一起，称为“国际互联网”。分布在世界各地的、数以万计的、各种规模的计算机，令远隔万里的人们“相会”在计算机屏幕上，如同近在咫尺。计算机网络已深入到很多领域：大到各国国防机构、政府机构、金融机构，小到学校、家庭个人都被计算机网络涵盖其中。使用互联网络可共享丰富的信息资源、得到快捷的通信服务、进行方便的电子商务。因此人们掌握一些网络基础知识是必不可少的。学会使用一种网页制作软件将充分表达自己意愿的网页发布到互联网上与别人共享自己的信息是一件多么有意义和有趣的事。
学习网页制作并不难，因为我们大多数人已经主动或被动地接触过互联网络上的站点和网页。信息时代网络以独特的优势成为信息传递的最佳载体。网络浏览器就是我们常用来在互联网上浏览信息的媒介。在下面的章节中，学会网页制作后也需要通过网络浏览器来浏览发布后的网页内容。因此本节只简单介绍网络浏览器常识，为初学者学习网页设计、网站规划、页面版式设计打下基础。
1）浏览器界面认识
我们首先学习浏览器的使用。微软公司出品的Internet Explorer Web浏览器与操作系统捆绑在一起，是众多计算机用户使用的浏览器（以下简称IE浏览器），用户几乎占全世界的93%。【上机操作】以“微软网站”访问为例来看IE的使用。（a）当你启动计算机，桌面上有Internet Explorer图标。（b）双击IE浏览器图标或单击“开始”→“程序”→“Internet Explorer”打开IE浏览器。（c）在“地址”栏键入一个网址，如：http://www.microsoft.com/，然后单击“链接”或按回车（Enter）键，如图12所示是这个网站的一个网页内容。图12 Internet Explorer 8浏览器界面
2）浏览器的使用
Internet Explorer Web浏览器是用于快速和准确显示Web页面和内容的应用程序。信息资源以页面（也称网页或Web页）形式存储在服务器（也称Web站点）中，这些页面采用超文本方式对信息进行组织，通过它可从一页信息链接到另一页信息，以便于浏览，并且可以链接一段声音、显示一个图形、播放一段动画，将图、文、声并茂的画面呈现给用户。
浏览器可显示多种图像格式如：JPEG（Joint Photographic Experts Group，它是具有最好图像质量的格式）、GIF（Graphics Interchange Format，它是最适用于小图像的格式）等，还能处理各种媒体和数据。在下面的网页制作章节中将详细介绍如何在网页中处理好动画、声音、图像、文字和数据，让网页图文并茂、赏心悦目、更具有吸引力，使之起到更好的传播信息的作用。
浏览器不属于网页设计工具，但是我们可使用浏览器来测试制作完成的网页，使我们精心设计的网页能在大部分浏览者的计算机上正常显示。因此我们要想设计好网页一定要会使用浏览器，你知道浏览器还有什么基本功能吗?
在菜单栏提供给用户的下拉菜单包括文件、编辑、查看、收藏、工具、帮助。我们用下面的实例来了解浏览器菜单的功能与操作方法。【上机操作】浏览器的使用。（a）单击“文件/新建/窗口”命令，在新窗口的“地址”栏输入想浏览的网页地址，就可以浏览到新的网页内容。而已打开的IE网页页面仍可显示，不会被新输入网址所显示的页面关闭，如图13所示。图13 新建窗口打开另一网页（b）单击“文件/打开”命令，通过所弹出的“打开”对话框输入文档和网址，方便、快速地打开网页，如图14所示。图14“打开”对话框操作实例“打开”命令显示的网页地址栏的操作与IE地址栏的功能是相同的。两者都有对以前访问过的站点自动在地址栏下面的下拉列表中显示的功能。可直接单击使用，如图15所示。（c）单击“收藏/添加到收藏夹”命令，或单击标准工具栏上的“收藏夹”按钮，用来收藏自己经常浏览的网址，以备以后迅速查找该网页。使用此命令时，在左侧列表中选择自己需要的网址。使用完毕或不需要时可关闭该窗格，单击收藏夹标题栏上的右上角的“✕”按钮即可。图15 地址栏下拉列表显示实例（d）单击标准工具栏上的“历史”按钮，浏览器左侧出现窗格区，这时显示访问过的站点，用户可单击指定的Web网页浏览，如图16所示。图16“历史”功能操作实例（e）单击标准工具栏上的“搜索”按钮，这时浏览器左侧出现窗格区，在此通过Web搜索引擎输入关键词可快速搜索到相关信息，如图17所示。图17 使用“搜索”引擎实例（f）单击“编辑/查找”命令，会弹出“查找”对话框，此时输入关键词并点击“查找下一个”，会在当前网页内“查找”所指定的信息。找到后光标覆盖在信息上面，反复点击“查找下一个”直到弹出“文档搜索完毕”提示窗口则全部查找完毕。（g）单击“文件/另存为”命令，可以将网页上的内容保存到用户存储器上。当单击“另存为”命令时弹出“另存为”对话窗口，在“文件名”文本框可自定义或使用默认文件名；使用者可以在以下四种保存类型中根据需要选择一种：
∗网页，全部（∗.htm，∗.html）。保存网页上的所有内容。包含一个HTML文档和一个扩展名为“.files”的文件夹，其中网页上的图片等存放在了扩展名为“.files”的文件夹里。
∗Web档案，单一文件（∗.mht）。保存网页上的所有内容。HTML代码和链接图片等保存为一个文件，便于发送和浏览。
∗网页，仅HTML（∗.htm，∗.html）。只保存HTML文档，不保存图片等信息。
∗文本文件（∗.txt）。将网页以文本方式保存，占用空间小，但失去了网页的风格。（h）单击“查看/源文件”命令，可以将网页上的内容以HTML源代码的形式用“记事本”窗口方式显示，如图18所示。通过查看源文件可了解网页设计的内在风格，如果你自己设计一个网页，可通过源文件修改源代码来完善网页。图18 浏览雅虎网页并查看“源文件”实例1.2 网站的特色与色彩1.2.1 网站的整体构思
网站、网页应从整体布局、色彩搭配、信息可信度、信息即时度、信息的专业性和信息的广泛程度方面规划。由此可见，网站不单单只是网页的集合，从专业的角度看更是多学科、多层面知识的整合。
学习网页制作不单单是要学习一种计算机软件的使用，其实它是对学习者艺术素质与软件技能的检验，是技术与艺术的结合，内容与形式的统一。我们要想设计一个网站首先要规划它的主题思想、网页页面版式、网页主题色调等。
我们要在网页中表达的主题是非常重要的，因为主题是网页的灵魂。无论是以表现综合类新闻为主，像“搜狐网”、“新浪网”这样大的门户网站；还是以商务贸易为主，如“当当网”、“阿里巴巴”等商务运作模式的电子商务网站；还有我国政府机构网，如“中华人民共和国国务院网”、“北京市政府网”；以及如雨后春笋般无以计数的个人网站和网页，都明确地展示出网站主题和网页风格。
网站和网页应整体规划合理，主辅菜单清晰，网站建设导向明确，重点突出。栏目不能过多或者过少，各栏目不能缺乏统一规划。点击率高的网站无论是主题还是架构、流程、布局、配色、文字等常包含如下特点：（1）以综合类见长的网站集中社会大量的信息，可谓应有尽有。如门户网站采用应用的框架，它将各种应用系统、数据资源及互联网资源集合在一个管理平台上，并以统一的界面提供给用户，彰显传播信息丰富、便捷的主题。如：
中国雅虎网：http://cn.yahoo.com
新浪网：http://www.sina.com.cn
搜狐网：http://www.sohu.com（2）以新闻、传媒、娱乐宣传方向为主题的网站，所体现的内容都针对主题，其网页就要求具有信息量大、更新快、商业味道少、可信度高、超链接多等特征。如：
人民网：http://www.people.com.cn
新华网：http://www.xinhuanet.com
中央电视台：http://www.cctv.com（3）电子商务类的网站是以销售商品或提供服务为主题，要求具有在线交易的功能。网页只是一个供用户浏览信息的界面，网络是传递介质，实际的商品需要通过物流公司进行配送，货币的结算一般都是通过银行转账的方法完成，提供给浏览者以严谨安全的网站环境。如：
阿里巴巴：http://china.alibaba.com
当当网：http://www.dangdang.com
慧聪网：http://www.hc360.com（4）政府机构类的网站要求网页设计的页面要严谨、严肃，信息准确、可靠、有权威性。如：
中国政府网：http://www.gov.cn
首都之窗：http://www.beijing.gov.cn（5）企业、公司、职能类网站的网页设计的主题则应充分表达该公司的企业文化、特色理念，为一些专门的产品提供服务或说明。如：
金山毒霸公司：http://www.duba.net（6）个人创建网站的网页设计主题表达的意愿首先应遵守法律、法规，主题表现要单一。多用于朋友之间互动娱乐、分享感受，表现个性。如：
老徐博客：http://blog.sina.com.cn/xujinglei
现代社会信息繁多，各行各业的专业信息按内容分类还有众多，在此不一一赘述。其实无论是初学者还是专业设计者，都应多浏览一些大的、有权威性的、运行成熟的网站，从中汲取众人的经验，激发自己的设计灵感，为今后我们设计网页打基础。
网站建设的前期除注重主题策划、网站规划设计和项目组织外，还要深入了解网站内容、定位及页面的组织结构，才可做出网页设计的外观决策——图形设计。网页设计并不是单纯的平面设计那么简单，网页设计者不但要考虑到整个网站的总体美观、视觉效果，更要很好地控制整个网页的大小、网页之间的交互以及不同分辨率的适应等。
一个好的网站，不仅能够给人良好的视觉享受，更是一种理念、信息和功能的传达。1.2.2 构思网页特色
如果由十个设计者来规划设计同一个主题的网页页面，也许会设计出十种不同特色、风格各异的视觉效果。这是由于网页设计是集中展示每个设计者对艺术审美、现代理念及专业设计元素的结果。达到一种专业水平需要提高艺术审美，加强现代理念的学习，并要反复实践提高专业技能。
网页是视觉创作，给浏览者留下的第一印象一定是带有艺术特质的标准版式设计和协调的色彩搭配。把握好比例、协调以及度的关系，这无疑需要加强艺术修养。
当欣赏了达·芬奇画的《蒙娜丽莎的微笑》后，可能无法用美术专业的词汇来表达自己对美的感受，但是对大师呈现给世人艺术的美，总会在心中感觉非常的和谐自然、优雅安宁。知道为什么吗?这就是遵循了1:0.618这个“黄金分割”比例。它是公认的最美的比例。黄金分割律是几何数学中的比例关系，比值为1:0.618……。绘画上，黄金分割律体现为画面的长边短边之和与长边之比等于长边与短边之比。古代绘画大师大都遵循“黄金分割律”作画。黄金分割律在构图中被用来划分画面和安排视觉中心点。画面中理想的分割线需要按下列公式寻找：用0.618乘以画布的宽，就能得到竖向分割线，用0.618乘以画布的高，就能得到横向分割线。用上述方法共能得到四条分割线，同样也得到四个交叉点。这四个交叉点常被画家用来安排画面的主要物像，使之形成视觉中心点。《蒙娜丽莎的微笑》头部、脸部包含了这样的黄金矩形，很多人体的关键部位都处在黄金分割点上，如图19所示。
黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值。《维纳斯》是希腊雕塑的代表作，她被世人公认为希腊女性美的原型。把《维纳斯》雕塑抽象成一条线段AB，肚脐为线段C点，测量肚脐到脚部BC的长度就是身体总长度的0.618。这个数值的作用不仅仅体现在诸如绘画、雕塑、音乐、建筑等艺术领域，而且在管理、工程设计等方面也有着不可忽视的作用。建筑师们对数字1:0.618特别偏爱，无论是古埃及的金字塔，还是巴黎的圣母院，或者是近世纪的法国埃菲尔铁塔，都有与1:0.618有关的数据。人们还发现，一些名画、雕塑、摄影作品的艺术焦点，大多在画面的0.618处。艺术家们认为弦乐器的琴马放在琴弦的0.618处，能使琴声更加柔和甜美。
荷兰画家蒙德里安的抽象画极力追求纯粹的、净化的美，他努力寻找设计中形状长短、面积大小的构成规律，运用黄金分割和等比数列将画面或图形按照一定的比例进行分割、排列，创造富有节奏与韵律的秩序与美感。图110是蒙德里安最著名的抽象主义“构图”作品《红黄蓝构成》。图19 达·芬奇《蒙娜丽莎的微笑》图110 蒙德里安《红黄蓝构成》
人们对美的感受是相通的。专业水平的网站网页会给浏览者以感染力，使他们得到视觉享受，并达到了传播信息的功能。因此只有掌握事物的规律，才有驾驭这一事物的能力，归纳出美的规律，掌握形式美的法则。
1）内容与形式的统一
充分运用视听元素，用流畅的线条、和谐的图片，配以优美的文字，全方位立体展示网页的风貌、理念，品牌形象。互联网络具有文字、图片、色彩、电影、三度空间、虚拟现实等所有广告媒体的功能，通过它，可以让浏览者非常方便地看到设计者对网站的介绍、主题内容、服务方式、联系地址，而且可以加入声音、图片、动画和影像信息，达到真正的内容与形式声情并茂、和谐统一，如图111所示。
2）实用与艺术的统一
网页是提供给浏览者的一种服务，还需要根据大多数浏览者的习惯，遵循一些约定俗成的标准：（1）页面尺寸 页面尺寸和显示器分辨率大小有关。一般分辨率是600像素×480像素，页面的显示尺寸为620像素×311像素；分辨率是800像素×600像素，页面显示尺寸为780像素×428像素；分辨率是1 024像素×768像素，页面显示尺寸为1 007像素×600像素。由此可见，分辨率越高，页面尺寸越大，如图112所示。图111 内容与形式声情并茂、和谐统一的网页实例图112 分辨率是1 024像素×768像素的网页实例（2）艺术的表现内容 网页是展示信息的媒介，应具有交互性、多种媒体的综合性、技术与艺术结合的紧密性。页面结构也要遵循约定俗成的标准。通常网页上都有：Logo标志图、Banner长条广告、导航条、文本信息、多媒体信息、图像信息等，如图113所示。图113 标准网页布局实例练习题
简答题
1.Internet的功能有哪些?
2.什么是URL、WWW、HTML?
3.HTTP的运作方式是什么?
操作题
1.打开你所在学校的网站，分析一下各网页的版式布局设计。
2.打开你所在学校的网站，分析一下网站构思的特色。
3.打开你所在学校的网站，分析一下各页面内容和形式是如何统一的。2 网站规划设计本章知识结构框图本章知识要点1.网站规划的基本理论；2.网站内容及栏目设计方法；3.导航及目录设计方法；4.版式及风格设计。本章学习方法熟读唐诗三百首，不会做诗也会吟。大量观察各类网站，从中悟出规律是本章学习的最佳方法，也是入门的唯一捷径。
凡事欲则立，不欲则废。每做一件事，都要有计划。建设一个成功的网站需要周全地考虑、详尽规划。电子商务专业的学生，走在求知大道上，正在迎接美好壮丽的人生，也需要用心规划、经营自己的人生。让我们看看马云是如何规划他的阿里巴巴，如何缔造人生的神话……【学习激励与案例导航】
马云与他的阿里巴巴马云的人生因网络而辉煌，阿里巴巴网站因马云而风靡全球。一个好的网站规划造就一个成功的人生。从1995年一个普通的英语教师到1999年创办阿里巴巴；从2002年“全年盈利1块钱”的目标到2003年“一天收入一百万”的蓝图，再到2004年“一天盈利一百万的”蓝图，最后是2005年“一天纳税一百万”的惊天之语。马云每走一步都坚若磐石，步步为营，招招大获全胜。马云的成功最关键的一步是定位。比尔·盖茨将事业的目标定位在“微”小的“软”件，在那个年代，足见其智谋。在这互联网如日中天的现代社会，马云敏锐地嗅到了商机，将自己的人生与电子商务网站的发展紧紧相连，从而缔造了财富的神话。
马云成功了，但机遇对每一个人都平等，我们每天都有马云曾经拥有的机会，但我们抓住了吗?有准备的头脑才能牢牢抓住每一个机遇。莺花犹怕春光老，岂可教人枉度春。珍惜每一寸光阴努力学习吧，时刻用知识武装头脑吧，终究有一天，我们都会与马云一样，豪情万丈，行走在成功的大道上。2.1 网站规划的基本理论
盖一座摩天大厦，最重要的是规划；成就一番经天伟业，最重要的是策划。大学生应做职业规划，才能在职场上乘风破浪。人的一生要有一个总体的规划，活着才有意义。网站规划对于网站建设有着极其重要的意义。很多网站爱好者，制作初期激情澎湃，越做越无精打采，多少次不得不从头再来，最后不了了之。网站的流程是否符合实际，是否按照标准流程进行网站建设，关系着一个网站的成功与否，本章以电子商务网站为例充分讲解如何来规划一个成功、内容充实丰富的网站。2.1.1 网站规划的必要性
网站规划是网站建设的第一步。对网站进行详细的市场调研、准确的分析，并在此基础上提出网站制作的框架结构、部署网站的技术队伍、确定网站的建设流程，最后撰写出网站的规划书。网站规划书是网站建设团队建设网站的工作准则。有了网站规划书，网站建设从规划流程转入制作流程。网站规划的意义主要有：
1）指导网站建设过程中的每一个操作步骤
只有对网站建设整体进行详细的规划，网站制作才有章可循，网站的实际制作工作才能开始，才能有序地组织素材、设计界面、编写代码，网站建设的每一个步骤才能清晰明了。
2）网站规划是网站成功的有力保障
网站建设是一个系统工程，好比盖一座高楼，工序清晰、有序开展，才能保证工程顺利进行。网站建设决不是今天做个界面，明天编个代码，这样的网站即使做出来，日后的维护工作也无法进行。网站的制作必须按总体规划进行，这样网站建设才有保障。
3）可以有效利用时间，提高网站制作效率
网站制作一般都有明确的工期要求，必须有一个整体规划，才能按时、保质完成网站建设工作。有了标准的流程，确定了明确的分工，每一个阶段有了具体的时间要求，网站才能如期交付。
4）有利于实施团队合作，协同完成网站整体制作
一个人的力量总是单枪匹马，众人的力量才能移山填海。网站的建设，不是一个人的力量所能完成，必须发挥团队的优势。业务、策划、美工、程序编写必须按照总体规划分工协作，共同完成，没有总体规划，就谈不上分工协作。
5）有利于保障网站的科学性、严谨性
网站是一个系统工程，必须保证其科学性与严谨性，而且网站的制作只是电子商务网站的第一步，日后的维护与更新将是一个漫长的过程。一个建设科学、严谨的网站，有规可循，日后维护工作也将极其便利。2.1.2 网站规划的任务
网站建设者不但要认识到网站规划的重要性，更重要的是要明确网站规划的任务。这样，才能对网站进行总体、详尽的规划，做出的规划才能切实可行，才能做出一份可操作、可实施的网站规划。那么网站规划具体都要做些什么工作呢?网站规划的任务是什么呢?
1）明晰网站建设的流程
明晰网站建设的流程是网站规划最重要的任务之一，根据网站建设的流程具体做出每一项安排。具体要解决以下三个任务：（1）网站制作有哪些流程。盖一栋大楼，第一步做什么，第二步做什么，先后如何衔接，大楼的建设者必须明晰盖大楼的每一个步骤。不可能盖完了一楼，地下的车库还没开工，最后拆了一楼，重建地下车库。网站建设也一样，每一个流程要按先后顺序严格制定，在规划阶段必须明晰；（2）每一个流程由谁来完成。清晰每一个流程，明确网站建设的每一个步骤，就要确定每一个步骤的制作人、责任人，即解决由谁来完成的问题；（3）每一项内容何时完成。网站建设流程还必须明确网站建设的时间，即每一个流程的工期。做什么、谁做、何时完成三个问题全部解决后，网站规划的第一步工作就全部完成了。
2）确定网站的目的、功能
为什么要建立网站，为了宣传产品，还是要进行网上交易?做本企业网站，还是建立行业性网站?为了企业日常任务需要，还是市场开拓的延伸?根据公司的需要和网站建设计划，确定网站的整体功能。目的确定，功能明晰，为后继工作掌握好方向，此后的工作才能顺畅进行。
3）确定网站的技术解决方案
网站的建设目的、建设功能确定了之后，接下来就要确定网站的技术解决方案。网站的技术解决方案，是对网站规划中技术实施环节的确定。技术解决方案的确定，直接决定着网站建设的人员配备、资源配备问题。具体说来包括以下几点：（1）服务器的选用 网站制作完成后，要上传到互联网服务器上，才能被互联网用户浏览。互联网服务器有很多种，在规划阶段首先应该确定服务器的类型。服务器类型确定之后才能进行服务器平台选型，以及开发技术选型、数据库选型等工作。服务器的选用有两种方法，一是采用自建服务器，二是租用虚拟主机。（2）服务器平台选型 用什么语言进行开发，首先要知道服务器操作系统类型，即服务器平台选型问题。在网站规划阶段，必须明确服务器平台类型，才能确定开发技术，即选择了什么样的服务器操作系统，决定用什么样的网络开发环境才能与之更好地配合，最终建设出稳定的电子商务网站。（3）开发技术选型 这是选择何种技术进行开发的问题。更简单地说，就是选择什么软件环境进行网站开发，开发环境要与服务器平台选型相配合，才能达到最理想的效果。（4）数据库选型 网站大量使用数据库管理页面内容，数据库的优劣直接决定网站的安全性，数据库选型就是解决采用何种数据库系统的问题，只有确定了数据库系统的类型，才能开始建立数据库，网站的编程工作才能正式开始。
4）对网站内容进行总体规划
网站的流程、目的、功能、技术解决方案都确定之后，网站规划的另一项重要任务就需要重点确定了。这就是网站的内容的规划，即网站都包含什么内容，如何组织网站内容的问题。网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。进行内容规划时要从以下两个方面入手：（1）规划时要解决网站有哪些栏目的问题 打开电视，每个频道相当于一个网站，而每个电视频道都有譬如今日说法、午间新闻、健康讲堂等特有的栏目。网站也与此类似，每个网站都有自己的栏目，如企业新闻、产品信息、特价促销等。网站规划之际，一定要确定栏目数量以及每个栏目的主题。（2）规划时要解决每个栏目都有什么内容的问题 栏目确定了，接下来就要确定每个栏目的内容，即每个栏目放置内容的标准是什么，什么样的内容应该放在这个栏目中，什么样的内容不应该放在这个栏目中。规划时可先对人们希望阅读的信息进行调查，企业网站内容应立足于企业形象展示来进行内容规划，切忌繁多杂乱。搜集整理网站可能需要的资料时，要精挑细选突出重点，尤其是文本资料和图片资料，准备得越充分越有利于网站的制作。
5）确定网页设计方案
网站规划时，还要确定网页的设计方案，明确每一个页面的设计方案。包括版式设计、目录设计、导航设计及风格设计等。实际实施制作的技术人员取得该方案后，可以快速按照指定的要求进行制作。
6）制定网站后期的运营、维护、管理、安全方案
对网站制作完成后的运营方案、维护计划、管理体系、安全防范等都要进行统一规划，这是网站规划的一项重要任务，也是网站规划中不可缺少的一个有机组成部分。2.1.3 网站建设的流程
网站制作流程是指网站制作过程中必须遵循的先后顺序。每一个成品网站都必须按标准流程进行建设。这类似企业产品生产线，一个工序一个工序地完成整个产品加工。很多人把网站建设与网页制作混为一谈。在他们的意识形态中，所谓做网站，就是用Dreamweaver把图片、文字弄到一起，形成一个页面。所以，他们制作网站时，往往直奔主题，直接进入Dreamweaver环境，随着制作的深入，越来越糟糕，越来越难以为继。最后，网站的夭折导致网站制作激情的泯灭。电子商务网站功能较多，应用性极强，更要注重按流程制作。因此，网站的制作流程在网站制作中有着重要的意义。
网站制作包括有规划设计、实施制作和发布维护三大流程。每一个流程又包括若干细节，流程之间有着严格的顺序。
1）规划设计
网站规划是指在网站的建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。网站建设之前，必须进行一系列的准备工作，也就是网站的规划设计工作。具体来说包括以下几个方面：（1）确定网站建设的主题 网站制作前，要确定网站的主题，即明确做一个关于什么内容的网站，是专门卖化妆品的网站，还是一个类似淘宝网的综合网站。根据已经确定的主题，确定网站的名字，再根据网站的名字注册网站的域名，同时申请网站的空间。（2）规划分析 明确了主题，就要根据客户的要求，进行整体规划、系统分析。网站的题目是什么?网站的主色调是什么?网站的结构怎样?网站的风格如何定位?网站的导航、网站的栏目如何确定等。（3）收集资料 主题已定，规划分析完毕，接下来，就要收集各种资料，包括文字资料、图片素材、影音素材等。（4）撰写网站规划书 网站规划书应该尽可能考虑周全，涵盖网站建设中的各个方面。网站规划书的写作要科学、认真、实事求是。网站规划书的书写还要切实可行，确保其可操作性。网站规划书包含的内容有建设网站前的市场分析、建设网站目的及功能定位、网站技术解决方案、网站内容规划、网页设计方案和网站维护计划等。
2）实施制作（1）版面设计 网站规划设计完毕之后，首要工作便是版面设计，就是网络公司常说的“打版”。所谓版面设计就是指用Photoshop等图像处理软件进行网页页面的设计制作过程。实际工作中，一般用Photoshop或Fireworks进行页面设计。设计结束后，经领导审核后，提交给客户。由客户指出不足、提出意见，然后不断进行修改，直至客户满意为止。（2）编辑排版 客户满意的前台版面，经分割后，导入网页排版软件中进行排版。行业上习惯用Photoshop或Firworks设计版面，用Dreamweaver进行编辑排版。排版结束后，前台美工部分工作即告完成。（3）后台功能实现 前台美工工作完成后，由软件编程人员按照客户要求编写相应的功能模块，即常说的后台管理功能。目前已经有大量的专业后台管理系统，使得后台代码编写工作越来越简化。（4）代码整合 前台美工、后台模块均完成后，进行代码整合，即后台挂接的过程，就是把已经编写好的相应功能模块与页面部分进行链接。
3）发布维护（1）网站测试 网站制作完成后，要进行有效测试，才能保证网站发布后可靠运行。测试内容主要包括功能测试、链接测试、流量压力测试、响应时间测试等方面。测试过程中发现问题要及时纠正。（2）上传发布 经过测试的网站，就可以上传发布了。所谓网站发布就是指将已经制作完成的网站上传到已经开通的网站空间上去。（3）日常维护 网站上传完毕，就开始了漫长的网站维护阶段。所谓网站的维护一般包括内容的维护与版面的维护两种。内容的维护一般由客户自行完成，根据企业活动需要，利用网站提供的后管理功能，随时向网站页面上添加内容。版面维护，就是常说的改版，即网站运营一段时间以后，为了继续吸引网民访问，改变网站的首页风格。一般要重新制作一个网站的首页，上传到原空间，覆盖原网站首页。改版工作类似软件的升级工作。2.1.4 网站规划的常用方法
网站规划常用的方法有哪些呢?如何动手实施网站的规划呢?网站的规划设计包括网站的栏目规划、网站的导航及目录设计、网站的内容设计、网站的风格设计等内容。其方法基本相同，网络公司实际应用的方法有如下几种：
1）调查法
所谓网站规划的调查法，就是通过市场调查、用户调查、受众群体调查，进行网站规划的一种方法。要多方听取意见，广开言路，兼听则明、偏听则废。通过对同行业网站的调查，对市场现状的调查，对用户需求的调查，对用户企业实际情况的调查，对网站将要面对的受众对象的调查，全面掌握信息，全面了解情况，在此基础上进行网站的规划设计。（1）市场调查 市场调查侧重对网站可行性进行分析，对网站的建设目的、功能进行准确定位。调查对象主要有同行业网站、本行业市场经营现状。调查结束后，经过整理，完成网站的目的确定及功能定位规划。（2）用户调查“做事不由东，累死也无功。”给谁做网站，就要了解谁的真实意图，按照客户的要求完成整个网站的规划。用户调查时一定要全面了解用户的真实目的、实际情况、现有条件、可利用资源。（3）受众群体调查 成品网站要为目标客户群服务。为了使网站一开始就以客户实际需求为目标，使网络的规划更符合实际需要，在网站的规划阶段就要对网站的受众对象进行调查，尽可能多地了解他们的实际需求。
调查法取得的资料、数据经过汇总，便形成了完整的网站规划材料，经过整理后便可直接制作网站规划书，完成网站的规划工作。
2）参照法
网站制作之初，设想阶段往往经纶满腹，实际制作规划阶段却又无从下手。这是所有网站制作者都曾经遇到过的现象，这也是很正常的现象。那么如何破解这一难题?采用参照法便可迎刃而解。
参照法就是指网站规划时大量参照同类网站、学习同类网站，形成自己的规划方案的一种规划方法。网站规划时，大量浏览同类网站，广泛吸取同类网站的优点，小到一个栏目、一个导航，大到整体布局、二级页面组织都要参照大量的网站。取其精华去其糟粕，形成自己独特风格。具体在实施参照法时，要分步骤进行。现以网站功能规划为例，其规划步骤如下：（1）上网浏览大量同类网站，重点查看各网站的功能；（2）总结各网站的功能特点，将各网站的功能列在纸上；（3）将各网站的功能与自己原有的设想对比；（4）结合自己实际需要，对各网站的功能进行取精去粗，完成网站功能规划。
3）手绘法
手绘法是将网站的规划用手绘的方式进行表现的一种方法。这种方法比较适用于页面的布局规划。这是最为传统的一种规划方法，一般小型网络公司目前还大量采用此种方法。小型网络公司的管理者一般都兼任规划设计职务，事务繁忙，随时画上几笔，想到哪，随时随地补上一些内容。【上机操作】根据你所在大学的校园网站的页面，为你曾经就读的中学的网站用手绘法进行规划。（a）打开并分析你所在大学的校园网站。（b）梳理你曾经就读的中学的基本情况。（c）画出网站整体轮廓。（d）分别对头部、尾部进行规划绘制。（e）对体部进行规划绘制。
4）软件规划法
软件规划法是指用Word、Photoshop、Fireworks等软件进行页面规划的方法。这是目前比较常用的页面规划方法。规划结束后，可以直接形成网站规划书，方便快捷。实际应用时，将网上可以参照的资源直接复制到Word、Photoshop、Fireworks等软件中，甚至可以在这些软件中进行修改。
一般使用Word进行总体规划设计，而使用Photoshop、Fireworks等软件进行页面的样例规划。【上机操作】用软件规划法规划一个以个人求职为主题的网站首页。（a）通过上网查找，结合自身情况确定个人主页的布局。（b）启动Word软件。（c）进行头部规划。上网查找与自己创意相符合的网站头部，参照制作或复制到Word中。（d）进行体部规划。对体部的每一部分内容进行设计，可以不断地上网查找相关资料。（e）对尾部进行规划。
5）移花接木法
移花接木法就是对网站的每个细节部分都在网上找到与自己设想比较一致的样例，然后将网上样例通过截图软件保存下来，并粘贴到自己的规划图上。
其实现方法很简单，首先在百度中检索相关网站，例如检索“电子商务网站”，然后依次打开检索到的每一个网站，重点查看每个网站的头部，发现令你眼前一亮的网站头部，与你设想的极其吻合，有了“众里寻她千百度”的那种感觉，立即将该网站的头部用抓图工具截下，放到Word或Photoshop中。运用此法，依次找到体部的每一个栏目以及适合的尾部。最后用Word组合成一个完整的页面，形成整体网站的构思。
实际版面设计时，照此构思即可完成版面设计工作。2.2 网站页面内容及栏目设计
每一个网站页面都是由大量的栏目组成，每一个栏目都有一系列相关的内容。电子商务网站页面内容与栏目规划的优劣直接决定着用户访问网站的频率高低。不同行业的企业，其网站页面内容也不尽相同。但其主要的功能和模块却是万变不离其宗。各企业根据自己的实际情况，在网站上放置以本企业产品为主题的内容。只有内容充实而且实用，才能使网站被客户接受并长期使用，从而有效地实施企业网络营销活动。2.2.1 网站页面应该包括的内容
按照人们认知规律，常规将网站页面分为头部、体部、尾部三大板块，下面具体分析网站应该具备的内容。
1）头部内容（1）网站标识（Logo）Logo是网站的图形标志，是与其他网站链接以及让其他网站链接的标志。Internet之所以叫做“互联网”，在于各个网站之间可以自由链接。要让浏览者进入本企业的网站，必须提供一个让其进入的门户。而Logo以图形化的形式，特别是动态的Logo，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，Logo的设计尤其重要。图21是新浪网、网易、百度三个网站的Logo。
网站Logo的设计要从功用性、识别性、艺术性三大方面进行考虑。标志的本质在于它的功用性，标志不仅仅是为了供人欣赏，更重要的是实用。Logo的识别性是指Logo要色彩强烈醒目、图形简练清晰，整体创意要独特，易于识别，能够显示企业特征。图21 新浪网、网易、百度的Logo（2）标题（Title）网站的标题就是指网站的题目，一般是显示在网页左上方的信息，如图22所示。图22 网站标题（3）广告条（Banner）很多电子商务网站在头部放置了宣传标语，这是吸引人的有力手段。在网络营销术语中，Banner是一种网络广告形式，一般放置在网页的醒目位置上。在用户浏览网页信息的同时，Banner吸引用户对广告信息的关注，从而获得网络营销的效果。Banner广告有多种规格和表现形式，其中最常用的是468×60像素的标准标志广告。由于这种规格曾处于支配地位，在早期有关网络广告的文章中，如没有特别指名，通常都是指标准标志广告。这种标志广告有多种不同的称呼，如横幅广告、全幅广告、条幅广告、旗帜广告等。通常采用图片、动画等方式来制作Banner广告。
常见的Banner广告规格是全幅标志广告468×60像素，半幅标志广告234×60像素，垂直Banner为120×240像素，宽型Banner为728×90像素，小型广告条则为88×31像素。（4）分类导航（Menu）与检索（Search）电子商务网站由于涉及大量商品交易，而头部则是网上的黄金宝地。所以，很多商家不失时机地在此处放置了分类信息，还有的网站在此处放置了产品检索。网站的站内搜索功能对于用户获取网站信息具有非常重要的作用，尤其对于像B2C零售网站这样含有大量信息的网站、含有大量产品类别的大型电子商务网站等。站内搜索功能是否健全，在一定程度上影响着网站的发展。知名市场研究公司Forrester Research对179个欧洲网站的调查发现，高达97%的欧洲在线消费者都使用搜索引擎寻找需要的信息，并且他们把这种搜索习惯带到了站内搜索中。【上机操作】下载网站Logo，进行分析。（a）打开IE浏览器，键入：http://www.baidu.com。（b）在搜索栏中键入“学校”两字。（c）打开其中的一个网站，将鼠标放在网站的Logo上，并按鼠标右键，另存Logo图片。（d）重复上一步骤，下载大量Logo。（e）分析不同Logo，从颜色、形状、创意上进行分析。
2）体部内容（1）用户注册与登录（Login）一般网站均具有用户注册与登录模块，实现会员功能，对会员与一般用户区别对待；（2）各类栏目 网站的主要功能分布在各类栏目上，依靠各类栏目实现网站的全部功能。比如电子商务网站的栏目一般有交易栏目，如我要销售、我要采购、商品热卖；新闻类栏目，如行业资讯、公告通知等；产品展示栏目，社区论坛、广告位等；（3）相关站点链接（Links）友情链接是各类网站不可或缺的内容，对于商品相关的网站，有关知识类网站，都可设为友情链接。
3）尾部内容（1）版权声明（Copyright）网站的尾部一般都要有版权声明以及电子信息产业部的备案号，用于声明网站的版权以及网站的合法批复文号；（2）管理入口 很多电子商务网站首页在尾部放置了管理入口，用于后台管理人员登录管理程序，对网站内容进行动态维护使用；（3）联系方式 为了便于联系，网页的尾部都留有各类联系方式，一般有电话、在线QQ、电子邮箱等。
应用提醒：适当地在网页尾部设计时采用一些小的卡通图标，可以为你的网站尾部增加灵气。2.2.2 网站内容设计遵循的原则
网站内容设计必须遵循的原则共有5个，他们是：
1）相关性
网站内容设计的相关性原则是指网站内容要紧紧围绕网站的主题，以主题为主线展开内容设计，所有内容均应与主题具有相关性，无关内容一概不予使用。
2）真实性
网站的真实性一方面是指要真实地传递本网站所掌握的客观情况，另一方面是指要表达商务活动中的真实数据。总的来说，就是要遵循交易上的诚信原则，在网站管理阶段对内容要严格把关，道听途说的内容不能采用，不确定的内容也不能采用。
3）动态性
网站，尤其一些电子商务类网站以其最新产品、最新报价吸引消费者常去浏览。因此网站在设计时必须保证能够随时进行修改和更新，并且注明修改和更新日期，为经常访问的用户提供最大便利。
4）准确性
网站的内容准确性，尤其电子商务类网站内容一定要准确，否则在交易实施过程中将产生不必要的麻烦，带来难以处理的纷争。
5）图像替代
图像能够比普通文本提供更丰富和更直接的信息，产生更大的吸引力。但文本字符可提供较快的浏览速度，因此，要在两者之间认真权衡，适中地使用图像代替文本。2.2.3 网站内容收集的注意事项
在制作网站时，需要大量的文字资料，如果是受人之托制作网站，如何收集网站的内容呢?这里有几个技巧。
1）文责自负
网站所有内容一律由客户负责提供，万不可擅自到网上自行搜索，否则文责自负。
2）材料电子版
文字材料一律要求电子版，千万不要印刷或手写的资料。因为你只是制作人员，不是录入人员，录入过程中难免出现错字，好心帮助录入，却要为文字担负责任，何苦呢?
3）发送途径选择问题
电子版的文字材料一律要通过邮箱发送，不要接受U盘材料，因为一旦出现文字责任，你的邮箱可以挺身而出，还你清白。同时也避免病毒侵入电脑带来不必要的麻烦。2.2.4 栏目规划概述
网站建设初学者最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排乱等。结果不但浏览者看得糊里糊涂，制作者在运营过程中扩充和维护网站也相当困难，所以栏目规划在网站制作中具有十分重要的地位。
1）什么是网站的栏目
网站的栏目是指网站内容的提纲，是网站内容的大纲索引。其功能是将网站的所有内容都分门别类，利用栏目将网站的主体明确显示出来。如果将网站比作一本书，那么书中的每章就是一个栏目。
网站栏目的规划，其实就是对网站内容的高度提炼。即使是文字再优美的书籍，如果缺乏清晰的纲要和结构，恐怕也会被淹没在书本的海洋中无人问津。网站也是如此，不管网站的内容有多么精彩，缺乏精确的栏目提炼，也难以引起浏览者的关注。
2）网站栏目规划的原则（1）紧扣主题的原则 网站的栏目要以网站的主题为中心，所有栏目要围绕主题进行设置。将网站的主题按一定的方法分类并将它们作为网站的主题栏目。主题栏目数量在总栏目中要占绝对优势，这样的网站专业性强而且主题突出，容易给人留下深刻印象。网站的栏目切不可离题而设，例如：一个以Flash学习为主题的网站，可以设置Flash技巧、Flash作品赏析、Flash教程下载等栏目，但不能加入诸如足球之夜、游戏在线等栏目；（2）精简的原则 网站的栏目，是一个网站某类内容的概括，一般用几个字表达即可，用词要精简达意。例如，齐齐哈尔信息工程学校的网站中有一个以招生管理、就业管理为主题的栏目，设置时可以考虑用“招生就业”，而不应使用“招生管理与就业安置专栏”这样的栏目标题；（3）提纲挈领的原则 网站的栏目规划首先要做到“提纲挈领、点题明义”，提炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息和功能；（4）凸显特色 栏目名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。例如：游戏前卫、游戏陶吧、e书时空等。在体现出网站主题的同时，能凸显特色。2.2.5 栏目规划策略
1）栏目规划的常用方法（1）分类法 所谓分类法，就是将欲在网站展示的所有资料进行分门别类，每一个类别形成一个栏目。这种方法是在给定文字、图片等素材的情况下进行的一种快捷栏目设置方法。使用这种方法进行网站栏目设置时，一定注意资料必须先进行整理，剔除无关、无用资料，以使分类符合实际；（2）参照法 所谓参照法，就是参照同类网站所设置的栏目，结合实际需要进行栏目设置的方法。这种方法可以综合其他网站的长处，广闻博取，集众网之长，形成独特风格。使用这种方法时，注意参照网站的选取，一般应该选择具有代表性的权威、同类网站做参照，同时要注意去粗取精。
2）栏目规划的技巧
制作网站，如果既没有接触过相关行业的日常活动，客户文化知识又有限，无法全面提供栏目信息资料，令人无所适从，而客户只是让制作者“照量着办”，那么怎么“照量着办”呢?办法很简单，就是上网搜索与客户主题相关的同类网站，参考这些同类网站的栏目，设置自己的栏目，具体方法是：（1）所有同类网站都有的栏目，你一定要有；（2）70%以上同类网站都有的栏目你不妨也加上；（3）如果有些栏目只有50%网站具有，这类栏目，你要询问客户的意见后，再决定是否采用此栏目；（4）有些栏目只有50%以下网站拥有，这时要注意了，这类栏目一是用处不大的栏目，二是特色栏目，你要根据情况再三斟酌，而后决定。
3）栏目的表现形式
网站栏目的表现形式有两种，一种是纯文字表现法（如图23所示），另外一种是图形化的表现法（如图24所示）。图形化的表示方法比较直观，视觉效果比较好，目前广泛使用的是图形化的表示方法。图23 栏目的纯文字表现法图24 栏目的图形化表现法2.2.6 网站常用栏目
1）网上商城常用栏目
网上商城是最典型的电子商务网站，一般都包含我要买、我要卖、热门促销、商品展示、分类导航、购物车、帮助、行业市场、商业社区、行业资讯、公告栏等栏目。所有栏目中以分类导航、商业展示占用幅面最大。如图25所示。
2）工业企业常用栏目
工业企业电子商务网站主要以宣传企业文化、展示企业产品、实施企业服务为主要目的。一般有首页、关于我们、企业简介、企业文化、经营理念、发展历程、企业荣誉、企业动态、企业新闻、业内动态、产品展示、产品系列、下载中心、技术支持、售后技术支持、客户留言、招聘信息联系我们、会员登录、会员注册等栏目。如图26所示。
图25 尚志都市商城网站栏目示例（资料来源http://www.sz667.com/shop/）图26 大连专用机床厂网站栏目示例（资料来源http://www.dzjc.cn）
3）其他常用栏目
学校类网站栏目一般有学校介绍、校园新闻、校园风光、教育教学、党建园地、资源下载、学生天地、互动交流等。如图27所示。
医院网站栏目一般有医院概况、新闻动态、环境设备、名医荟萃、专科介绍、就医指南、专家门诊、网上挂号、医疗保健、在线咨询等。图27 南京市第一中学网站栏目示例（资料来源http://www.njyz.net）2.2.7 阿里巴巴网站内容分析
阿里巴巴网站在国内电子商务网站市场上可谓是一面旗帜，其内容设计值得我们仔细分析。
1）头部内容设计分析
如图28所示为阿里巴巴网站头部内容，它包括标题、宣传标语、产品检索、分类导航等内容。图28 阿里巴巴网站头部内容
2）体部内容设计分析
阿里巴巴网站在体部设计时充分显示了一个设计良好的电子商务网站的主题内容。下面我们分类予以分析。（1）资讯栏目 阿里巴巴的资讯栏目如图29所示，包括了热点聚焦、经营实务、价格行情，甚至还包括股票行情实时查询，给人的感觉很实用、很贴切。图29 阿里巴巴网站的资讯栏目（2）社区栏目 阿里巴巴的社区栏目提供了网民交互的自由空间。不但有商人论坛，还有管理杂谈、专用设备论坛，甚至还有人们喜闻乐见的谈天贴图、实用性极强的阿里贷款、视频中心、聊天室，以及当下正红的奥运专栏。可以说对于电子商务网站的交互功能，阿里巴巴的智慧真是做绝了。如图210所示。图210 阿里巴巴网站的社区栏目（3）交易栏目 阿里巴巴网站中体部的三分之二都是交易栏目的内容，而且按行业做了细分，每个行业又做了更具体的分类，内容涉及其交易的所有商品目录。如图211所示。图211 阿里巴巴网站的交易栏目
3）尾部内容设计分析
阿里巴巴网站的尾部以链接为主，并且放置了版权声明。如图212所示。图212 阿里巴巴网站的尾部2.3 网站导航及目录设计2.3.1 网站导航栏设计概述
导航栏是指位于网页头部，在头部图片上边或下边的一排水平导航按钮，它起着链接网站各个页面的作用。
美丽的扎龙，丹顶鹤的故乡，初来乍到的你，需要一个导游。现代化的医院，迈进大门的一刹那，美丽的导医小姐，会让你的病痛一下子减轻许多。一个成功的网站，也需要一个向导，一个具有类似导游、导医的功能，能带领网站的浏览者穿梭于网站各个页面，这便是网站的导航栏。
1）导航的作用
网站导航的主要功能在于引导用户方便地访问网站内容，是评价网站专业度、可用度的重要指标。同时对搜索引擎也产生诸多提示作用。网站的导航对网站起到提纲挈领的作用，使用户在浏览网页时很容易到达不同的页面，是网页元素非常重要的组成部分。设计好的网站导航对整个网站功能的发挥，对网民浏览过程的引导起到至关重要的作用。对网页设计者来说，导航栏在设计时不仅要美观大方，而且要高效易用。
2）导航设计原则
实际使用过程中，浏览者一般以很随机的跳跃方式访问网站的各页面内容。网站的导航系统必须精心设计，最大限度方便用户访问。（1）导航结构要清楚 不管网站系统多么复杂，导航设计必须坚持清晰明了的原则，给浏览者一种既直接又简单的感觉。（2）每页都有返回主页的链接 每一个页面至少保证有一个指向主页的链接。保证浏览者不至于在网站中迷失方向。（3）每页都有导航系统 页面中的导航系统，帮助用户在网站中自由跳转，随意访问。2.3.2 导航分类
1）全局导航
全局导航一般是指网站首页的导航条，如图213所示。该导航条具有以下特点：（1）位置固定 为了方便用户使用，减少浏览者查找的时间，全局导航位置一般都比较固定，通常位于网站的头部，而且每个页面的位置基本不变。（2）所有页面的全局导航相同 每一个页面的导航都是相同的，内容相同、表现形式相同、位置相同，更直接地说就是一模一样。（3）随意跳转 全局导航可以帮助用户随时跳转到到网站的任何一个栏目。由一个栏目可以轻松跳转到另一个栏目。图213 全局导航示意图（图片来自北京大学出版社网站）
2）路径导航
路径导航显示了用户浏览页面的所属栏目及路径，帮助用户访问该页面的上下级栏目，从而更完整地了解网站信息。用户通过主导航到目标网页的访问过程中的路径提示，了解目前所处网站中的位置而不至于迷失“方向”，并方便回到上级页面和起点。路径中的每个栏目一般都添加有链接，单击后可以直接跳转到相关页面。如图214所示。图214 路径导航示意图（图片来自齐齐哈尔政府网站）
3）快捷导航
对于网站的老用户而言，需要快捷地到达所需栏目，快捷导航为这些用户提供直观的栏目链接，减少用户的单击次数和时间，提升浏览效率。
4）相关导航
为了增加用户的停留时间，网站策划者需要充分考虑浏览者的需求，为页面设置相关导航，让浏览者可以方便地到达所关注的相关页面，从而增进对企业的了解，提升合作几率。2.3.3 网站导航栏设计方法
网站导航栏如何进行设计呢?如何将你的智慧在网站导航的设计中发挥得淋漓尽致呢?这需要方法。
1）网站导航栏的表现形式
网站导航栏一般位于网站的上方，其位置处于网站的黄金地段，是争抢浏览者眼球的重要组成位置。其表现形式有两种：（1）纯文字表现法 纯文字表现法是指导航内容用文字的方式表现出来，其优点是显示速度快，几乎是打开网址的一刹那，导航也同步呈现在浏览者面前。其缺点是视觉效果不好，为了弥补这一点，一般将导航栏背景设置为漂亮的颜色，同时文字颜色与背景颜色巧妙搭配，将整个导航栏完美表现出来。（2）图片表现法 这是目前广泛使用的方法，就是将导航文字用Photoshop等工具制作成图片，图片可以采用任何艺术化的手法，实现最佳的效果。其优点是视觉效果好，其缺点是速度慢，但随着互联网技术的发展，目前速度已经不再是问题。因此提倡采用图片表现法。
应用提醒：导航栏中各栏目分割常用一条竖线，这条竖线的实现很简单，按住键盘上的Shift键，同时按下“\”键即可实现。
2）网站导航栏的常见内容
网站导航栏内容五花八门，不同的网站有不同的导航，但不管是什么样的网站其常用内容却是不变的，具体说来有以下几个：（1）首页 每一个网站的导航上，都固定有一个“首页”，其链接网址为本站的首页地址，这也是所有电子商务类网站必不可少的内容。（2）简介类 每一个网站都有一个自我介绍的栏目，虽然叫法不一，但其内容却唯一，都以介绍本企业为主，类似的叫法有“单位概况”、“企业简介”、“走近企业”等。（3）展示类 每一个网站都有一个展示类的栏目，向浏览者展示其产品或服务，全面宣传自己的产品。从产品的说明到产品的图片，从产品的特点到产品的优异之处，总之竭尽其全力显耀其光华。这类栏目常见的称呼有“产品介绍”等。（4）社区类 这类是为网站与浏览者交互提供的平台，例如论坛、留言板等。
3）网站导航栏的设计步骤（1）确定导航内容 通过前期调研，结合用户需求，确定导航按钮数量、导航内容，并以简明的文字概括出来。具体确定导航内容时，要在调研的基础上满足用户要求，广泛查阅相关网站，借鉴同行网站长处，形成自己的特色。（2）确定导航表现形式 网站的导航有许多表现形式，其中最常见的有图形式、文字式、菜单式。这三种方式中图形式最简洁，而且实现起来也最容易；图形式则需要将文字在图形处理软件中进行艺术化处理；菜单式则具有包含信息量大、新颖别致的特点。具体选择上要根据网站实际情况进行。网站规模大、信息量大的网站应该采用菜单式，网站显示速度要求高、流量大的网站宜选用文字式，而一般的网站则选择图形式比较好。（3）确定导航实现方法 菜单式通常用软件编程法来实现，即通过编写程序，实现导航的方法，通常复杂的导航、特殊效果的导航多采用此法。图形式一般用Photoshop或Fireworks将文字进行简单效果处理，并配以背景图片、卡通图标。而文字式则直接在网页排版时录入文字即可。
小技巧：没有编程基础的人，欲用软件编程法实现复杂的导航，已经不再是痴人妄想。目前网上有大量的导航源代码，通过百度检索、单击进入、复制、粘贴、修改这简单5个步骤即可轻松完成。2.3.4 网站目录设计概述
一个网站由大量的图片、网页、数据库等文件组成，小的网站有几十个文件，而大的网站则有数百上千个文件。无论在自己的计算机上建设网站还是制作完成后上传到服务器上发布大量的文件的网站，都要建立目录、分类有序存放。网站目录是指建立网站时创建的目录，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护、未来的扩充和移植有着重要的影响。否则不但网站查找费时费力，而且网站读取速度会越来越慢。
为了方便日后维护以及扩充升级，网站的目录建设必须在网站建设之初，按标准进行，不得随意建立目录，更不得随意存放文件。
网站目录建设的总原则是以最少的层次提供最清晰简便的访问结构，网站目录在建设时必须遵循以下原则：
1）分类存放、分别建立目录
网站上的图片、数据库等文件要根据其性质，分别建立相应目录，将各类文件分门别类，有序存放。目录的命名一般应使人望文知义，例如图片放在Images目录下，样式文件放在Style目录下。
2）目录的层次不要太深
目录的层次建议不要超过3层，这样的目录不但结构清晰，而且维护管理方便。便于后续的管理工作。
3）根目录下不要存放所有文件
网站的根目录下只能存放主页文件以及用于流量统计的文本文件，其他文件一律不得放置在根目录下。
4）根据栏目内容建立子目录
除了公共的目录以外，我们要根据网站栏目，为每一个栏目建立相应的子目录，并存放其对应的网页文件。
5）在每个主栏目子目录下都建立独立的Images目录
每一个网页中都有大量的图片文件，因此要在每一个栏目目录下，再建一个独立的Images子目录，用于存放各栏目对应网页的图像文件。
6）不要使用中文目录
网站制作上不允许使用中文目录，虽然也有极个别网站使用中文目录，这不但是一种极不规范的做法，而且在检索、使用过程中很容易出现错误。
7）不要使用过长的目录名
网站要经常被检索，一般不建议使用过长目录名，网站目录的命名一般以与栏目对应的英文为主，对于过长的英文组合应该进行适当缩略。2.3.5 网站目录建设的步骤及方法【上机操作】（a）建立一个用于存放网站的总目录，例如：MyWeb。（b）进入此网站总目录，展开网站目录的建设工作。（c）在网站的根目录下建立一个Images子目录，用于存放首页图像文件。（d）在网站的根目录下建立一个Style子目录，用于存放样式文件。（e）在网站的根目录下为每一个栏目建立对应子目录，每个子目录下建立独立的Images子目录，用以存放该页面所有图像文件。2.3.6 案例：敦煌网的目录结构（1）敦煌网的Logo及导航栏 如图215所示。图215 网站Logo及导航栏示例（2）敦煌网的目录结构设计 如图216所示。图216 网站目录结构示例2.4 网站版式及风格设计
精确的布局、美观的页面、规范的版式，会给网民一个永难忘却的印象。如何进行版式设计?如何进行布局设计?本节将就这些问题给予详细的讲解。2.4.1 版面布局的基础
网页的展示设备是计算机，而网页的受众对象则是人，因此，网页版面布局的设计既要根据计算机的显示能力，又要符合人的视觉习惯，好的网页布局是一个成功网站的重要方面。
1）分辨率确定
像素是指荧光屏上的每一个发光小点。例如某台计算机的显示器横向能显示1024个发光小点，即1024像素，纵向能显示768个发光小点，即768像素，则该显示器的分辨率为1024×768。目前，广泛流行的显示器的分辨率有1600×1200、1280×1024、1024×768、800×600四种。
网站的建设，首先要确定网站的尺寸，即以什么样的分辨率作为网站制作依据。一般来讲，网站的宽度以1024像素及800像素为依据较多，而高度则比较随意。
一般网站在设计时两边留出少许空白，以1024像素为依据的网站，其实际宽度多为1000像素左右，而以800像素为依据的网站，实际制作时宽度多选择为750像素至780像素，以采用776像素居多。
2）网页的内容与放置位置
版面布局要符合人的视觉习惯。人们阅读材料时习惯按照从左到右，从上到下的顺序进行。人的眼睛首先看到的是左上角，其次是顶部居中的位置。因此网页的左上角是整个网页的“黄金地段”，也是人的最佳视域。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如标志、通知新闻等，然后依据重要程度放置其他内容。
页面中不同的位置，吸引人的程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、积极之感；下部给人压抑、稳定的印象；左侧，感觉轻便、自由；右侧，感觉局促却显得庄重。根据内容的不同对放置位置要做恰当的选择。2.4.2 网页的常用版式
网站的布局灵活多样，但万变不离其宗，其标准布局共有两种。
1）结构化的布局（1）左右结构布局 这种布局结构体部由左右两部分组成，左部分占整个宽度的20%～30%，内容可以是菜单、用户登录、流量统计、联系方式等。右部则为显示主体内容。这是网页设计中使用最为广泛的一种布局结构，如图217所示。（2）左中右结构布局 这种结构左面、中间部分与左右结构相同，其右侧，多为友情链接等不太重要的栏目，这种结构比较呆板，不够灵活，如图218所示。（3）上下结构布局 上下结构布局，整个网页只有上下两部分组成，上面是标题，下面则只有正文，也称为标题正文型布局，通常的二级页面、文章页面都采用这种布局方法，如图219所示。图217 左右结构图218 左中右结构图219 上下结构
2）艺术化的布局（1）海报式布局 整个页面布局像一张海报，也称为POP布局，是个人网站建设的主要布局方法。一般适合美术功底较强者采用。否则，不但达不到效果，反倒弄巧成拙。（2）综合式布局 综合使用了上述各种布局方法，整个页面布局善于变化，一般采用Flash实现，给人以焕然一新的感觉，带来良好的视觉效果。2.4.3 版面布局的原则
1）根据网站的客户群选择合适的布局
网站的客户群决定了网站布局的方法，例如以儿童用品为主题的电子商务网站，采用海报式布局是最佳的选择，而新闻页面则适合采用上下结构的布局方法。
2）整体布局要遵循简洁大方
这是网页版式布局的重要原则，整个布局不要过于花哨，提倡简约的布局，突出网站的主题，强调网站的内容，不要以繁杂的布局吸引网民一时的眼球。
3）要注意视觉效果与内容翔实相结合
整个网页的布局要注意视觉效果的实现，恰当使用图像及文字，将有些标题文字用图像表现出来，更好地突出文字的内容。网站的内容要翔实，要为网站的主要内容留出足够的空间。
4）主次分明，条理清晰
设计网站布局时要突出网站的主题，将网站的主要部分放在左上角以及上面居中位置，而无关紧要的内容则放置在其他位置，做到主题突出，主次分明。内容与视觉效果要兼顾，形成和谐统一的整体布局。2.4.4 网站风格设计概述
每一个人都有自己的风格，给人一个特定的印象，每一个网站也都应该有自己的风格，风格独特的网站给人持久的印象，会被加入收藏夹，更有甚者，将其设为网站的首页。独特的网站设计风格能够带来公众的认可，随之而来的是流量的大增，效益的提高。
1）什么是网站的风格
网站的风格是指站点的整体形象给浏览者的综合感受，是这个站点的与众不同之处。包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字等方面。举个例子：我们觉得淘宝网、网易网是轻松的，IBM的网站是专业严肃的。这些都是网站给人们留下的不同感受。
有风格的网站与普通网站的区别在于：普通网站看到的只是堆砌在一起的信息，浏览后的感受只能是信息量大小，浏览速度快慢等。但浏览过有风格的网站后令人能有更深一层的感性认识，觉得站点有品位、有层次。
2）如何树立网站的风格
树立网站的风格可以从以下几个方面入手：（1）色调 色彩的搭配既要符合网站的内容，又有独特的创意。链接色彩、背景色彩、文字颜色、导航颜色、栏目颜色尽量使用与标准色彩一致的色彩。（2）简繁 网站建设者要善于把握好简洁与花哨尺度，尤其是门户类的电子商务网站，要将大量的商品图片放置其上，如何做到即齐全又不花哨，需要进行一番分析设计。（3）字体的使用 字体的使用要标准统一，字体要符合人们的审美观点，这里有一点尤其要注意，网站正文的字体以宋体12像素为主，这是因为，人们习惯阅读的书刊、报纸都是标准的五号字，即12像素。（4）站内风格的统一 每一个网站要有统一的风格，各个二级页面风格要统一，原则上各个页面的主色调要保持一致。2.4.5 网站色彩搭配
1）色彩搭配概述
网站的配色决定着网站的整体效果。自然界中的色彩五颜六色、千变万化，通常将颜色分为红、橙、黄、绿、青、蓝、紫七色，其中，红、绿、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；而暖色（如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。
色彩与人的心里感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。
小技巧：没有美术基础的初学者如何配色呢?其实这很简单，小孩子最初学走路的时候，总是先由人搀扶着走，然后自己扶着墙壁，接着才能慢慢蹒跚走路。同样的，我们在每次制作网站前，先到网上随意浏览，找到中意的网站，在制作初期配色可以对原网站照猫画猫、原样照搬，慢慢地可以部分参考，到最后，你就可以完全脱离参考网站，随心所欲地搭配颜色了。
2）主色调的选择
每个网站使用的颜色原则上不得超过3种，并且有一个占比例较大的颜色，我们称之为网站的主色调，而其他颜色则称为网站的辅色调。每种颜色适合不同类别的网站，具体情况如下：（1）蓝色 蓝色属于冷色调，给人以沉静、踏实、寒冷之感，也是网站采用最多的主色调，一般适用于企业、事业单位的网站。（2）红色 红色属于典型的暖色调。红色，是火的色彩，也是血的颜色，首先给人的感觉是温暖、兴奋、热烈、坚强和威严，所以我们的国旗使用红色。红色一般用于政府网站制作，也有的企业网站在重大节日期间改版为红色，代表喜庆。（3）绿色 绿色是大自然的代表色，象征春天、新鲜、自然和生长，也用来象征和平、安全、无污染，比如我们常说的绿色食品。同时绿色也是未成年人的象征。绿色一般用于食品、农业类网站，也有用于购物类网站以及儿童类网站。（4）黑色 黑色，是典型的冷色调，它表示一种深沉、神秘，把黑和其他颜色相配时却显出黑色的力量和个性，如黑白相衬，显得精致、新鲜、有活力。在黑色衬托下可以使用各种非常刺激的冷暖颜色，因为它有调和色彩的作用。这类颜色一般用于科幻、游戏类网站。（5）粉色。粉色给人一种活泼的感觉，一般用于妇女、儿童类网站。2.4.6 网站文字使用
1）字体的运用
在网站中，字体的设置要遵循以下原则：（1）正文字体 网页正文无特殊情况一般使用宋体。书刊、报纸通常使用的标准字体是宋体，这也是人们平时接触最多的字体，最符合人们的阅读习惯的字体。（2）非标准字体 正常情况下网站上使用黑体、宋体、楷体、仿宋体以外的字体时，必须将字体以图形的形式表现出来，浅显地说，就是把文字在Photoshop中做成图像文件再使用。如果使用了上述字体以外的其他字体，在没有安装更多字体的计算机上将无法按设计效果显示出来。（3）标题字体 网站头部标题字体一般要使用方方正正的字体，不得使用行楷等过于活泼的字体，以表达庄严、稳重之意。（4）栏目字体 栏目字体一般为黑体或其他艺术字体，但一般要用图形的方式表现出来，略加艺术化处理，以及搭配一些小图标，可以达到意想不到的视觉效果。
2）字号的设置
网站字号的设定，要注意以下几点：（1）正文字号 网站正文的字号一般设置为12像素，如果用磅表示则为10磅，其大小相当于平时常说的五号字，即标准的书刊用字大小，这个文字字号标准最符合人们阅读习惯，也是网站标准文字字号。（2）大标题字号 网站的大标题，即网站头部名称，此处使用的文字字号一般来说是网页中最大的字号，但其实际大小一般不能超过36像素，过大的标题给人以笨重的感觉，过小的标题则不显眼。（3）栏目标题字号 网站的栏目标题，即网站的小标题，一般为16像素至18像素，类似常用的三号字大小，太小起不到栏目标题的作用，太大则不灵动，一般以黑体或宋体加粗为好，但目前广泛使用的办法是将栏目标题图片化，通过图像处理软件，实现一些特殊的文字效果。注意文字不要进行过多的艺术处理，否则弄巧成拙。
3）行间距的设置
网站文字的行距设置一般采用的方法是在样式表中定义，其大小一般为1.2倍至1.5倍行距，通常宋体12像素大小的正文文字，将行间距设为18像素是比较理想的数值。练习题
简答题
1.电子商务网站规划的意义主要有哪些?
2.简述网站建设的流程。
3.简述电子商务网站规划的常用方法。
4.简述网站规划的任务。
操作题
1.以你最喜欢的运动项目为主题，策划一个网站。
2.根据你所在学校的网站内容，为你所在的学校补写一份网站策划书。
3.分析红孩子购物网（http://sh.redbaby.com.cn/）的规划特点。
4.规划你的个人求职网，为毕业求职做准备。3 网页制作工具Dreamweaver 8基础操作本章知识结构框图本章知识要点1.Dreamweaver基本知识；2.设置站点的方法；3.表格的创建、编辑与应用；4.样式和层的创建与应用。【学习激励与案例导航】
上海盛大和它的总裁陈天桥陈天桥，上海盛大网络总裁，1973年生于浙江新昌，毕业于上海复旦大学，现任中国游戏工作委员会副理事长、上海青少年发展基金会副会长、上海游戏专委会主任委员、上海信息服务业协会副理事长、共青团中央第十届候补中央委员。陈天桥是盛大网络的创始人，在他的带领下，三年多来盛大网络已发展成为员工近七百人、资产规模数亿元，集互动娱乐产品开发、运营、销售为一体，小路周边产品、出版物，形成立体品牌经营平台的大型集团化企业。盛大网络在网络游戏领域已经取得了世界级的成就：目前自主研发、代理运营产品的累计注册用户超过一亿五千万人次，同时在线人数超过百万，月平均销售额数千万元，在中国拥有65%以上的市场占有率，是世界上用户规模最大、收益位居前列的网络游戏企业，被国外媒体誉为世界三大网络游戏企业之一。
陈天桥说，一个企业发展要经历五个阶段：一是战略上寻找突破点；二是要专注；三是要进行整个产业链的整合；四是适度多元化；五是变成社会企业，承担适度的社会责任。当今大学生的成功也要经历五个阶段，一是找准学习方向；二是专注学习；三要广泛钻研、整合专业；四要广泛阅读，全面发展；五要与企业靠拢，逐步走向创业。3.1 Dreamweaver使用入门
Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得的网页编辑器，支持最新的XHTML标准和CSS标准。它采用了多种先进技术，能够快速、高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。3.1.1 Dreamweaver概述
知己知彼，百战不殆。网站制作征途上的每一天、每一个行程都离不开Dreamweaver，每一个网站都需要Dreamweaver来构建。因此，我们在正式使用Dreamweaver之前，必须走近它、了解它、熟悉它，方能得心应手地驾驭它。
Dreamweaver能做什么呢?Dreamweaver的功能十分强大，可以完成各种复杂的页面排版功能，简单来说主要有以下7项功能：（1）Dreamweaver具有可视化编辑功能，可以快速创建Web页面而无须编写任何代码。（2）Dreamweaver可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。（3）Dreamweaver可以在Fireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，从而优化开发工作流程。（4）Dreamweaver提供了其他工具，可以简化向Web页中添加Flash资源的过程。（5）Dreamweaver还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色、标签完成、“编码”工具栏和代码折叠）；有关层叠样式表（CSS）、JavaScript、ColdFusion标记语言（CFML）和其他语言的语言参考资料。（6）Dreamweaver可自由导入、导出。HTML技术可导入手工编码的HTML文档而不会重新设置代码的格式，可以随后用编写者首选的格式设置样式来重新设置代码的格式。（7）Dreamweaver还可以使用服务器技术（如CFML、ASP.NET、ASP、JSP和PHP）生成动态的、数据库驱动的Web应用程序。3.1.2 Dreamweaver的工作环境
1）第一次启动
第一次启动Dreamweaver 8时，系统会弹出如图31所示的“工作区设置”对话框，供用户选择工作界面的风格。在对话框左侧是Dreamweaver 8的设计视图，右侧是Dreamweaver 8的代码视图。Dreamweaver 8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。图31“工作区设置”对话框
2）起始页
为方便操作，Dreamweaver 8打开后首先都要显示一个起始页，这个页面包括：打开最近项目、创建新项目、从范例创建3个模块。可以勾选这个窗口下面的“不再显示此对话框”来隐藏它。
3）工作界面
工作界面犹如人的一张脸，脸部集成了人的五官，而工作界面则包含了进行网页设计的所有功能。Dreamweaver 8的工作界面主要包括标题栏、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和标签选择器等内容。如图32所示为Dreamweaver 8的工作界面。图32 Dreamweaver 8的工作界面（1）标题栏 Dreamweaver 8工作环境的最上一行就是标题栏。启动Dreamweaver 8后，标题栏显示文字“Macromedia Dreamweaver 8.0”，新建或打开一个文档后，显示的内容就在原内容后面加上了文件路径、文件名。
应用提醒：如果文件名后面有一个星号（∗）则说明文件已经被修改，尚未存盘。【上机操作】在D盘“MyWeb”目录下新建一个index主页文件。（a）启动Dreamweaver 8，进入起始页，单击“新建项目/HTML”进入Dreamweaver 8工作界面。（b）单击“文件/保存”，选择D：\MyWeb目录。（c）输入文件名“index.htm”，单击“保存（S）”按钮，文件建立完毕，如图33所示。图33 上机操作最终实现的标题栏效果（2）菜单栏 Dreamweaver 8共有10个菜单项，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助，如图33所示。“文件”菜单用来管理文件，包含新建、打开、保存、另存为、导入、输出打印等命令项。“编辑”菜单用来编辑文本，包括剪切、复制、粘贴、查找、替换和参数设置等。“查看”菜单用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。“插入”菜单用来插入各种元素，例如图片、多媒体组件、表格、框架及超级链接等。“修改”菜单具有对页面元素修改的功能。“文本”菜单用来对文本操作。“命令”菜单包括所有的附加命令项。“站点”菜单用来创建和管理站点。“窗口”菜单用来显示和隐藏控制面板以及切换文档窗口。“帮助”菜单提供联机帮助功能。（3）插入面板组 插入面板组类似Word的工具栏，是位于菜单下部的一些常用功能按钮。如图34所示，插入面板组集成了所有可以在网页应用的对象。插入面板组其实就是图像化了的菜单命令，通过一个个的按钮，可以很容易地加入图像、声音、表格、框架、表单、Flash等网页元素。可以按Ctrl+F2快捷键或者单击菜单栏中的“窗口”和“插入”来显示或隐藏。在插入面板组上用鼠标右键单击“插入”按钮，可以进行相关设置。图34 Dreamweaver 8的菜单栏、插入面板组、文档工具栏（4）文档工具栏 文档工具栏包含显示模式、标题设置框、常用功能按钮3部分。显示模式有：代码、拆分、设计3种；标题可以直接在文本框中输入；常用功能按钮包括验证标记、文件管理、在浏览器中预览/调试、刷新设计视图、视图选项、可视化助理等内容，最常用的是在浏览器中预览。（5）标准工具栏 标准工具栏包含来自“文件”和“编辑”菜单中的一般操作按钮，如新建、打开、保存、保存全部、剪切、复制、粘贴、撤消和重做等。单击“工具栏”和“标准”按钮即可显示或隐藏标准工具栏。（6）文档窗口 在Dreamweaver界面中，文档窗口是最主要的部分，显示当前创建和编辑的文档内容，在此进行网页制作的所有工作。可以根据实际网页制作需要选择“代码”、“拆分”、“设计”3种视图之一。“设计”视图是一个用于可视化的页面制作视图，采用所见即所得的制作方式，与在浏览器中看到的页面内容完全相同。“代码”视图是一个用于手工编写和修改代码的编码环境。“拆分”视图使你可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。（7）状态栏 文档窗口底部的状态栏提供与正创建的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击“＜body＞”可以选择整个网页内容。（8）属性面板 属性面板主要用于显示和修改文档窗口中所选中元素的属性。例如，在文档窗口中选中一段文本，那么属性面板上就出现文本的相关属性；如果选择了表格，那么属性面板会相应的显示表格的相关属性。（9）浮动面板 顾名思义，浮动面板就是浮动于编辑窗口之外，方便使用者在文档和面板之间来回切换的一种工具集合。在“窗口”菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组。3.1.3 Dreamweaver 8的基本操作
Dreamweaver 8的基本操作包括新建文件、打开文件、保存文件、浮动面板操作、环境参数设置等。
1）新建文件
新建网页文件要根据实际情况进行创建，有以下几种方法：（1）直接创建 启动Dreamweaver 8，出现起始页，在“创建新项目”中选取“HTML”。（2）使用菜单创建 也可通过菜单创建，单击“文件/新建”命令，打开“新建文档”对话框，如图35所示，从该对话框中选择相应的格式后单击“创建”按钮即可。图35“新建文档”对话框（3）基于模板创建 如果利用已经制作好的模块创建网页，则可单击“文件/新建”命令，打开“新建文档”对话框，选择“模板”选项卡，然后在右侧列表框中选择模板所在的站点，再在右边的模板列表中选择一个模板。
说明：创建网页前必须先建立好站点，如果创建主页，一般用直接创建的方法；如果创建二级页面，则应该利用模板创建。
网页文件制作后要不断修改，每次修改时必须先打开。网页制作时欲参考其他网页文件，也必须先打开。打开文件时单击“文件/打开”命令后，弹出“打开”对话框，选取欲打开的文件后，单击“文件”按钮。
2）保存文件（1）保存单个文件 标题栏文件名后面有一个“∗”表示该文件尚未存盘，单击“文件/保存”命令，文件保存成功。（2）换名存盘 单击“文件/另存为”命令，选择保存路径，输入文件名即可。（3）保存框架文件 单击“文件/保存全部”命令，然后按提示进行操作。（4）保存为模板 单击“文件/另存为模板”命令，输入模板名称即可。
3）面板操作（1）面板的隐藏与显示“属性”面板以及浮动面板，可以根据需要隐藏与显示。“属性”面板与状态栏中间、浮动面板与工作区中间都有一个三角形标记，单击该标记即可隐藏或显示相应的面板。也可按下快捷键进行操作，其快捷键为F4。（2）位置调整 浮动面板之所以称之为“浮动”，是因为面板的位置可以随意放置在屏幕的任何位置。用鼠标左键拖动标题栏左上角至新位置，松开鼠标浮动面板就移动到了新的位置。“属性”面板操作方法也完全相同。（3）重新组合 Dreamweaver可以将不同面板组合在一个浮动面板中，单击浮动面板右上角的指向下方的三角形图标，从打开的菜单中选择“将CSS样式组合在”子菜单中一个类别的浮动面板，所选择的浮动面板即被组合成选项卡形式。
4）环境参数设置
如何改变Dreamweaver环境字体、字号、颜色，使其更符合自己的编程习惯?如何对Dre-amweaver进行个性化设置，使其更方便网页制作?这便是环境参数设置。
单击“编辑/首选参数”启动“首选参数”对话框，其中包括常规、CSS样式、标记色彩、代码格式、字体等项目，可以根据需要进行灵活设置。3.2 Dreamweaver 8站点设置以及页面操作
网页是整个网站中的一个页面，网页必须存在于某个站点中，制作网页前必须先建立站点。很多毕业生到企业实际工作时发蒙，其根本原因是不了解网页实际制作的顺序。本节将根据网站实际制作的标准流程，进行网站制作第一步站点设置的讲解，同时还将页面制作的有关操作予以详细介绍，以方便后续网站的制作学习。3.2.1 Dreamweaver的站点设置
1）站点建立
站点设置包括3大部分，5个步骤。3大部分即编辑文件、测试文件、共享文件。【上机操作】（a）新建站点。打开Dreamweaver 8，单击菜单“站点/新建站点”命令。（b）输入站点的名字及站点的地址，站点的名字可以随意起，一般为中文，如欲建设“东北商务网”，则直接输入“东北商务网”即可，而不要输入“dbsww”之类让人摸不着头脑的名字。而站点地址则不必输入，因为我们一般都在本地计算机上制作网站，制作完成后上传，而FTP地址是用于直接在服务器上操作时使用的。（c）设定是否使用服务器技术。如果我们制作静态网站，则选择“否，我不想使用服务器技术”；如果我们需要使用编程语言制作动态网页，则选择“是，我想使用服务器技术”，同时还要选择所使用的脚本编程语言。（d）开发过程中文件的使用方法，即直接编辑远程服务器上的网页文件，还是在本地计算机制作。一般我们选择“在本地进行编辑和测试（我的测试服务器是这台计算机）”，同时还要设定站点使用的目录。（e）设定浏览站点根目录的URL，至此整个站点设置完毕。
2）文件夹创建
文件夹也称目录，网站中所有文件必须分门别类存放。站点设置完毕，接下来要创建网站文件夹。网站文件夹的创建既可以在磁盘文件中创建，也可以在Dreamweaver的浮动面板中创建。在Dreamweaver的“文件”浮动面板中，用鼠标右键单击刚刚创建的站点，选择“新建文件夹”并输入文件夹名称即可。
学习提示：如果创建静态页面，站点创建流程则简化为“站点”→“新建站点”→“您打算为您的站点起什么名字：站点命名”→“是否打算使用服务器技术：否，我不想使用服务器技术”→“在开发中您打算如何使用您的文件：编辑我的计算机上的本地副本，完成后上传到服务器”→“设定文件存放目录”→“如何连接到远程服务器”。3.2.2 Dreamweaver页面属性设置
网页中的字体、字号如果不进行设置，页面在实际显示时是按默认字体、字号进行显示的。页面属性设置是对页面字体、字号大小、背景颜色、边距、链接样式及页面设计的默认值进行设定。
单击“属性”面板中的“页面属性”按钮，如图36所示，或单击“修改/页面属性”菜单打开“页面属性”对话框，或直接按快捷键Ctrl+J。图36“属性”面板
1）设置外观
设置外观是设置页面的一些基本属性。可以在“外观”选项内定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等，如图37所示。
2）设置链接“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色，“下划线样式”可以定义链接的下划线样式，如图38所示。图37 外观设置图38 链接设置
3）设置标题“标题”选项用来设置标题字体的一些属性。如图39所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。我们可以定义“标题字体”及6种预定义的标题字体样式，包括粗体、斜体、大小和颜色，可以按自己喜欢的风格进行设置。
4）设置标题/编码“标题/编码”选项用于指定制作Web页面时所用语言的文档编码类型。
5）设置跟踪图像
小学生在一张白纸上写字，很难写得笔直，通常的做法是在纸下垫一张带较深颜色格子的硬纸做参考。网页制作时也可以在设计页面时插入用作参考的跟踪图像，跟踪图像是放在制作页面窗口背景中的JPEG、GIF或PNG图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。图39 标题设置
学习提示：如果想实现将鼠标放在文字上文字变为红色并自动添加下划线，而鼠标离开时文字颜色恢复原状，下划线取消，其方法是在“页面属性”的“链接”选项中设置“变换图像链接”为红色，“下划线样式”设置为“仅在变换图像时显示下划线”即可。3.2.3 Dreamweaver文本操作
1）输入文本和插入对象
纵观整个网页，其中的组成部分无非是文本、图片、动画等对象。其中文本和图像是网页中最重要的组成元素。文本可以直接在页面中输入，也可以从其他文字处理软件中粘贴。图像、动画等其他元素可在“插入”菜单下选取相应对象直接插入，也可在“插入”面板中执行插入操作。
2）文本属性设置（1）字体设置 选中页面中欲设置字体的文本，在对应的“属性”面板的“字体”下拉列表框中选择字体名称即可。如果“属性”下拉列表框中没有所需要的字体，则选择“编辑字体列表”添加字体。（2）文字大小设置 选中页面中欲设置文字尺寸的文本，在“属性”面板的“大小”下拉列表框中，选中合适的尺寸，页面中的文字大小随之而改变。（3）文字颜色设置“属性”面板的“大小”下拉列表框后面是颜色设置按钮。单击其右下角的倒三角形后可展开颜色选择对话框，根据需要进行相应的选择即可。
应用提示：实际网页制作时字体、字号、颜色的设置是通过CSS样式表进行的，很少在属性面板中进行设置。
3）插入日期
Dreamweaver提供了一个方便的日期对象，该对象可以以任何格式插入当前日期（也可包含时间），可以选择在每次保存文件时都自动更新日期。
4）插入水平线
水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。创建水平线，在文档窗口中，将插入点放在要插入水平线的位置，选择“插入/HTML/水平线”。
5）插入邮件链接
单击电子邮件链接时，该链接打开一个相关联的邮件程序，在电子邮件消息窗口中，“收件人”文本框自动更新为显示电子邮件链接中指定的地址。在页面上将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像，选择“插入/电子邮件链接”，出现“电子邮件链接”对话框。
6）插入特殊字符
通常需要在网页中插入版权、商标等特定字符，这时就要用到“特殊字符”功能。在页面制作窗口中，将插入点放在要插入特殊字符的位置，再从“插入/HTML/特殊字符”子菜单中选择相应的字符名称即可。3.2.4 Dreamweaver的图像操作
声泪俱下的哭诉，让所有人为之动容；图文并茂的展示，让网页丰富多彩。多媒体时代需要的网页使用最多的就是文字和图像。网页中图像的格式主要有JPEG、GIF、PNG三种，目前使用最多的是JPEG格式。仔细分析图像的日常操作主要有插入图像、设置图像属性、使用鼠标经过图像、使用图像地图4种。
1）插入图像
将图像插入网页时，Dreamweaver自动在源代码中生成对该图像文件的引用。为了确保引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver会询问你是否要将此文件复制到当前站点中。
应用提示：当Dreamweaver询问是否要将此文件复制到当前站点中时，一定要选择“是”，而且图像文件必须复制到相应的Images目录中，否则上传后，图像将不能正常显示。
将插入点放置在要显示图像的地方，然后执行以下操作之一：（1）在“插入”面板的“常用”类别中，单击“图像”图标。（2）在“插入”面板的“常用”类别中，将“图像”图标拖入网页窗口中（如果正处理代码，则拖入“代码”视图窗口中）。（3）选择“插入/图像”菜单。（4）单击“窗口”菜单的“资源”菜单项显示资源面板，将图像从“资源”面板拖到网页窗口中的所需位置。（5）将图像从“站点”面板拖到文档窗口中的所需位置。（6）将图像从桌面或文件夹中拖到网页中的所需位置。
2）设置图像属性
选中图像，在相对应的属性栏中就可以进行图像属性设置，如图310所示。图310 图像属性设置
在图像属性设置中可以进行宽、高、边框粗细、对齐方式等常规设置。“源文件”给出了图像的路径及文件名。“链接”用于指定图像链接目标。“替换”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本，当鼠标指针滑过图像时也会显示该文本。“垂直边距”、“水平边距”则用于指定图像距离上部与左部的距离。“地图”热点工具允许标注和创建客户端图像地图。“低解析度源”指定在载入主图像之前应该载入的图像。许多设计人员使用主图像的黑和白版本，因为它可以迅速载入并使访问者对他们等待看到的内容有所了解。“编辑”启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。
3）使用鼠标经过图像
鼠标经过图像是指鼠标指针移过它时发生变化的图像，通常用在导航条上。在网页中插入“鼠标经过图像”时可将插入点放置在要显示“鼠标经过图像”的位置，在“插入”面板中，选择“常用”，然后单击“鼠标经过图像”图标；或者选择“插入/图像对象/鼠标经过图像”菜单。出现“插入鼠标经过图像”对话框，依据提示选择“原始图像”、“鼠标经过图像”，以及“替换文本”、“按下时，前往的URL”，如图311所示。图311 使用鼠标经过图像
4）使用图像地图
图像地图指已被分为多个区域（或称“热点”）的图像，当用户单击某个热点时，会发生某种操作。例如，网页上有一个人体图片，单击眼睛会链接到眼部介绍页面，单击耳朵会链接到耳部介绍页面，人体图片的每一个区域称为一个热点。
选中图像，在“属性”面板的“地图”文本框中为该图像地图输入唯一的名称。如果在同一文档中使用多个图像地图，要确保每个地图都有唯一名称。选择圆形工具，并将鼠标指针拖至图像上，可以创建一个圆形热点；选择矩形工具，并将鼠标指针拖至图像上，则创建一个矩形热点；选择多边形工具，在各个顶点上单击，则可定义一个不规则形状的热点，然后单击箭头工具封闭此形状。
在“链接”文本框中，单击文件夹图标并通过浏览选择在用户单击该热点时要打开的文件，或者输入此文件的名称。在“目标”下拉列表框可以选择链接文件打开的窗口，具体含义如下：（1）_blank链接的文件在一个未命名的新浏览器窗口中打开。（2）_parent链接的文件在含有该链接的框架的父框架集或父窗口中打开。如果包含链接的框架不是嵌套的，则将链接文件加载到整个浏览器窗口中。（3）_self链接的文件在该链接所在的同一框架或窗口中打开。此目标是默认的，通常不需要指定它。（4）_top将链接的文件载入整个浏览器窗口中，会删除所有框架。3.2.5 Dreamweaver的链接操作
众多相关网页通过超链接形成了一个整体，没有超链接，网站就缺少了灵魂，一个个的网页就变成了孤舟。
1）基础知识（1）绝对路径和相对路径 绝对路径是指页面文件在硬盘上的实际路径，绝对路径是完整的描述文件位置的路径。例如，你的logo.jpg图片存放在C：\MyWeb\Images目录中，则C：\MyWeb\Images为绝对路径。相对路径是指与某文件夹相对应的路径，例如/images/logo.jpg就是相对路径，其意义为根目录下的images子目录中的logo.jpg文件。（2）链接目标 链接的目标有两种：一是网页，这个网页既可以是其他网站的某个页面，也可以是本网站的一个页面，还可以是本页面中的其他位置。当单击链接时将打开链接目标所指定的网页。二是文件或邮件地址，当单击链接到文件的链接时，自动下载文件；当单击到邮件地址时，将打开相关联的邮件收发软件，并自动添加目标邮件地址。（3）虚拟链接 虚拟链接也称为空链接，更通俗地说就是什么也不做的链接，这种链接单击后，不产生任何动作。空链接用于向页面上的对象或文本附加行为。创建空链接后，可向空链接附加行为，以便当鼠标指针滑过该链接时，交换图像或显示层。设置时将链接文本设置为“#”即可。（4）脚本链接 有时链接的目的是为了执行一定的功能，而不是为了打开网页或文件，而功能的实现需要编写脚本，这种链接便是脚本链接。脚本链接非常有用，能够在不离开当前网页的情况下，为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务，在属性设置面板的“链接”文本框中输入脚本即可。
2）链接的基本操作
文字、图片等均可作为链接类型，但最常用的链接类型是文本链接。【上机操作】链接操作。（a）选中需要建立链接的文本或图像。（b）在“属性”面板中设置要链接文件的路径及文件名。设置链接文件有3种方法，一是直接输入，二是指向文件，三是浏览文件。直接输入即在文本框中直接输入路径及文件名，指向文件即指定到一个文件以创建链接，而浏览文件则在磁盘中查找链接目标。（c）如果链接到邮件，则需要在邮件地址前加上Mailto，例如，链接到Cuilh666@126.com，则在“链接”文本框中输入Mailto：Cuilh666@126.com。3.3 表格操作
网页所有组成元素中应用最广泛的是两“表”，即表格与表单。表格是有序组织网页中内容的重要方法，表单则是用于浏览者与网页实现动态交互的必需手段。表格与表单是网页制作中不可缺少的两大内容。本节主要讲述表格的相关内容。3.3.1 表格的创建
大家都熟悉Word中的表格，其主要功能是用于做报表、分类展示数据。而网页中的表格则完全不同，其主要功能是网页的布局定位，网页通过表格将页面中的不同内容分别放在不同部分。用表格进行网页定位不但规范、灵活，而且定位十分精确。
1）插入表格
在网页中插入表格一般要解决以下三个问题：（1）确定在哪插入 要在网页中插入一个表格，首先要定位插入点，用鼠标单击欲插入表格的位置，然后单击“修改/表格”菜单命令，弹出“表格”对话框，如图312所示。图312“表格”对话框（2）确定插入几行几列的表格 在“表格”对话框中根据需要填写行数、列数。（3）确定插入什么样的表格 在“表格”对话框中进行表格相
试读结束[说明：试读内容隐藏了图片]