作者：李跃贞,常春英,北京金企鹅文化发展中心
出版社：航空工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网页制作案例教程试读：
第1部分 网页制作基础知识
随着互联网飞跃式的发展，越来越多的人都想学习制作网页，但是，要制作网页，首先要了解与网页相关的一些基础知识。例如，网站的建设流程，网页和主页的关系以及网页的构成等。
主要内容
项目一 网站建设流程
参考学时：2学时
学习目标
了解网站建设的一般流程
理解网站、网页和主页的概念
认识网址的构成
认识网页构成
模块分配
模块一 网站需求分析
模块二 设计和制作网站页面
模块三 空间和域名申请
模块四 测试和发布网站
模块五 网站推广
新手在制作网页时往往不知道从何入手。针对这种情况，我们首先来了解一下网站建设的基本流程，以使大家从宏观的角度认识一下网站建设。模块一 网站需求分析
学习目标
确定网站主要内容
规划网站主要栏目
收集网页所用素材
在整个网站建设中，网站需求分析是一个非常重要的环节，它关系到后面的整个制作过程和网站整体质量，所以一定要认真对待。一、确定网站主要内容
建设网站要有目的性，首先要确定网站的性质和受众，并预期网站发布后的反响。确定了这些后就要开始组织网站的主要内容。如果是企业宣传网站，受众是与其相关的企业或个人，主要内容应该是企业的经营项目、企业背景和企业所获殊荣等；如果是电子商务网站，受众就是消费者，主要内容就应该是商品的各种信息；如果是个人主页，那么所有你感兴趣的东西都可以成为网站内容。二、规划网站主要栏目
确定网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。
此外，在网站的每个主栏目下可能还有子栏目，这些都应该在具体制作网站之前先划分清楚。图1-1显示了一个企业宣传网站的网站栏目结构图。图1-1 网站栏目结构图三、收集网页所用素材
在制作网页之前，应首先收集好制作网页时要使用的素材，包括文字资料、图片、动画、声音、视频等。这些素材既可以是企业提供的各种材料和调查结果，也可以来自网络或图片库等媒体。收集素材时要保证其真实、合法性。对于一些原始的素材还可以使用Fireworks、Photoshop、Flash等软件进行处理，使其可以更好地应用于网页。提供网页素材下载的网站有3lian素材网（http://www.3lian.com/）、网页制作大宝库（http://www.dabaoku.com/）、中国站长站（http://www.chinaz.com/）和素材中国（http://www.sccnn.com/）等。图1-2显示了素材中国的网站首页。图1-2 素材中国网站首页模块二 设计和制作网站页面
学习目标
了解设计和制作网站页面的相关知识
在做好了充足的准备后，就可以开始实际操作了。该过程主要包括设计和制作页面。所谓设计，就是用图像处理软件（本书中为Fireworks）设计好网页的效果图，并将设计好的效果图进行切割导出，图1-3显示了本书实例之一——个人网站的效果图。图1-3 个人网站效果图
提示
像Fireworks、Photoshop等图像处理软件，一般都有切割图片的功能。
将切割好的图片进行导出后，就可以在Dreamweaver中组织网站内容了。包括输入文本、插入图片、动画等。此外，还可根据需要为网页增加一些特效，比如闪烁的字幕、跳出动画、可变换形状的鼠标指针等，这些多是通过JavaScript实现的。这些特效可以使网页看起来更活泼，从而为网页增色不少。
提示
在使用Dreamweaver制作网页的过程中，可根据需要使用Flash等动画制作软件来制作动画，并插入到网页中，好为你的网页增加一些动感效果。模块三 空间和域名申请
学习目标
了解如何申请虚拟空间
了解如何申请域名
要使别人能通过互联网访问你的网站，就需要将其上传到服务器上，并且拥有一个属于自己的域名。这就需要申请虚拟空间和域名。一、申请虚拟空间
所谓虚拟空间，就是互联网上一台功能相当于服务器的电脑或虚拟主机，该电脑要用专线或其他形式24小时与互联网相连。
知识库
互联网（Internet）由计算机、网线和网络互联设备组成，是目前世界上最大的计算机网络，它将无数广域网、局域网及单机按照一定的通信协议组织在一起，方便了计算机之间的信息传递。互联网中的计算机基本上可以分为三类：享受服务的、提供服务的和既享受又提供服务的。比如我们用来上网的计算机，大部分都属于第一类，通常我们称其为客户机；而我们访问的网站所在的主机都是提供服务的，它们被称作服务器。
所谓虚拟主机是指：在一台电脑中运行着为多个用户服务的服务器程序，各个程序之间互不干扰。每个虚拟主机都具有独立域名和IP地址，在外界看来，这些虚拟主机和一台完整的主机一样。
服务器不仅可以存放公司的网页，为浏览者提供浏览服务，还可以充当“电子邮局”的角色，收发公司的电子邮件。根据需要，还可以在服务器上添加各种各样的网络服务功能，前提是有足够的技术支持。
目前来说，空间服务商能够提供的虚拟空间模式主要有两种：主机托管和虚拟主机，用户可根据自己网站的规模和功能模块进行选择。要申请虚拟空间，只需登录到任何一家提供虚拟空间服务的网站即可，如“e网通”（http://www.ewont.com）、“你好万维网”（http://www.nihao.cn）、“中资网”（http://web.114.com.cn）、“中国万网”（http://www.net.cn/）、西部数码（http://www.netinter.cn/）等。当然，这需要一定的费用，图1-4为“你好万维网”网站的首页。
提示
如果你的网站功能模块非常全，流量也很大，那你最好选择主机托管；如果你的网站很小，只是起到宣传推广的作用，那么虚拟主机就完全可以应付了。二、申请域名
说到域名，就不得不说说IP地址。我们知道，互联网上连接了不计其数的服务器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地
址为IP地址（Internet Protocol Address）。它由4个0～255之间的数字组成，数字之间用点间隔，例如61.135.150.126就是一个IP地址。图1-4 “你好万维网”网站首页
由于IP地址在使用过程中难以记忆和书写，人们采用了一种与IP地址对应的字符来表示地址，这就是域名，每一个网站都有自己的域名，域名也是独一无二的。例如，我们只需在浏览器地址栏中输入www.sohu.com，就可以访问搜狐网站。同样地，只有申请了域名，别人才能通过互联网访问你的网站。
域名的申请方法与虚拟空间相同，凡提供虚拟空间服务的网站一般都提供域名服务。模块四 测试和发布网站
学习目标
了解测试和发布网站的相关知识
有了空间和域名后，就可以测试并发布网站了，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。
可以先在本地计算机上使用服务器软件（如IIS）来进行网站测试。如果在本地计算机可以正常运行，便可以将网站发布，进行下一步的测试。为确保网站的稳定性，可以使用不同的系统和浏览器多次登录进行测试。
测试通过后，就可以利用Dreamweaver或专门的FTP软件将已完成的网站上传至虚拟空间，网站就可以被访问了。模块五 网站推广
学习目标
了解网站推广的方法
网站制作好后，还要进行宣传推广，不然会被淹没在浩如烟海的网络海洋中，当然也就起不到建立站点的作用了。那么如何推广呢，下面讲述几种常用的方法。（1）注册到搜索引擎
目前最经济、实用和高效的网站推广形式就是注册到搜索引擎。比较有代表性的搜索引擎有：百度（www.baidu.com）、Google（www.google.cn）、雅虎（www.yahoo.com.cn）、搜狐（www.sohu.com）等。（2）交换广告条
现在有很多提供广告交换信息的网站，我们称之为广告交换网。登录到该类网站，注册并填写一些主要信息，即可与其他网站进行广告交换。图1-5是提供广告交换的“阿里妈妈”网站（http://www.alimama.com/）。图1-5 “阿里妈妈”网站
另外，也可以跟一些合作伙伴或者朋友的网站交换链接，很多网站都设有链接栏目。（3）宣传
将网站网址印在公司每个人的名片和公司宣传册上，向自己的客户宣传网站。（4）网络广告
可以在一些大型的门户网站上放上宣传自己公司的横幅广告。（5）报纸、杂志
可以在传统的媒体（如报纸、杂志等）上登广告宣传自己的网站。延伸阅读
在学习了网站建设的基本流程后，我们再来学习一些与网页相关的基础知识，例如网页、主页、网址的概念以及网页构成等。一、网页和主页
互联网能在人们的生活中占据重要作用，主要是各种网站的功劳。网站是若干网页的集合，通过网页，人们足不出户就可以看新闻、读报纸、聊天，甚至可以买卖东西。下面分别列出了网页和主页的概念。
* 我们看到的网页实际上包括了一组文件，它们分别是网页文件（扩展名为.htm、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。网页可以存放在世界上某个角落的某台计算机中，而这台计算机必须是互联网中的服务器。网页经由网址（URL）来识别与存取，当我们在浏览器地址栏中输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机中，通过浏览器解释网页的内容，再展示到你的眼前。
* 主页也叫首页，即浏览者登录网站时看见的第一个网页，也是网站的入口。通过主页，浏览者可以很快了解网站的性质和主要内容，并可通过主页上的链接浏览网站中的其他页面，图1-6为瑞丽女性网的首页。图1-6 瑞丽女性网首页
知识库
网页分为动态网页和静态网页。动态网页可提供交互式操作功能，如各种论坛、留言板和聊天室等都属于动态网页，人们可以在动态网页上发表自己的论点并浏览别人的论点。而静态网页则相反，它只供浏览者浏览，而不提供交互功能。二、网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。
一个完整的网址由通信协议名称、域名或IP地址、网页在服务器中的路径和文件名4部分组成。如图1-7所示的网址http://v.blog.sina.com.cn/a/520633.html，其中http是超文本传输协议，v.blog.sina.com.cn是域名，a是文件在服务器中的路径，520633.html是网页文件名。
http://v.blog.sina.com.cn/a/520633.html图1-7 网址示例三、浏览器
上网浏览网页需要通过浏览器，目前大多数用户使用的是微软公司的IE浏览器（Internet Explorer），还有不少用户使用诸如Netscape Navigator、Mosaic、Opera、火狐等浏览器，国内厂商开发的浏览器主要有腾讯TT、遨游（Maxthon Browser）等。
IE是微软公司推出的免费浏览器，它最大的优点在于：直接绑定在Windows操作系统中，用户只要安装了Windows操作系统，就可以使用IE浏览器实现网页浏览。图1-8为IE浏览器的操作界面。图1-8 IE浏览器操作界面
在制作网页时一定要考虑不同浏览者使用的浏览器，最好能在不同的浏览器上进行测试，尽量兼顾所有的浏览器，以使所有浏览者都能看到完整的网页。四、网页构成
从浏览者的角度看，网页中无非就是一些文字、图片、动画等。但从专业的角度来讲，这些元素都有自己的名字，可以将它们分为站标、导航条、广告条、标题栏和按钮等，如图1-9所示。图1-9 网页构成1．站标
站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo通常采用企业的Logo。
Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合，如图1-10所示。图1-10 网站或企业的Logo
在网页设计中，通常把Logo放在页面的左上角，大小没有严格要求。不过，考虑到网页显示空间的限制，要求Logo的尺寸不能太大。此外，Logo普遍没有过多的色彩和细腻的描绘。现在有些网站使用动感Logo，取得了很好的效果。
如果要自己设计网站Logo，应掌握一些Logo设计的技巧。例如：
* 字体的选择要与网站整体风格相符，不要一味追求美观花哨。
* 使用色彩时，既要注意视觉上的美感，又要使其与网站内容相呼应。
* 可以采用边框，使用反差与对比等手法来强调Logo中的主体。
* Logo的形状尽量保持视觉上的平衡，细部要讲究线条的流畅。2．导航条
导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。
设计导航条时，应注意如下几点：
* 如果网站内容不多，并且导航条不超过两排，可以根据网站风格尝试灵活摆放，也可以使用图片或Flash动画等，如图1-11所示。图1-11 灵活摆放的导航条
* 如果网站栏目很多，可以将导航条分为多排放置在主页Logo的下方或右侧，为便于观看，可为各排设置不同的底色，如图1-12所示。图1-12 多排导航条3．广告条
广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。Banner的尺寸可以根据版面需要来安排。
在Banner的制作过程中有一些要点需要注意：
* Banner可以是静态的也可以是动态的。现在使用动态的居多，动态画面容易引起浏览者的注意。
* Banner的体积不宜过大，尽量使用GIF格式的图片与动画或Flash动画，因为这两种格式的动画文件体积小，载入时间短。
* Banner中的文字不要太多，只要达到一定的提醒效果就可以，通常是一两句企业的广告语。
* Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果，因为GIF格式仅支持256种颜色，颜色的连续变换会看出明显的断层甚至光斑，影响效果。4．标题栏
这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方便了浏览者。
标题栏可以是文字加不同颜色的背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站常采用后者，如图1-13所示。图1-13 网页标题栏5．按钮
在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等，图1-14是比较有代表性的几个按钮。图1-14 按钮实例
设计按钮时，有以下几点需要注意：
* 要保证按钮与页面的协调，不能太抢眼，不宜使用过多的颜色。
* 如果按钮上有字则尽量使用单色或渐变色背景，保证字迹的清晰。
* 当页面上有多个按钮的时候，应分清主次，根据版面的需要改变按钮的颜色或者大小。五、XHTML
XHTML是EXtensible HyperText Markup Language（可扩展超文本标记语言）的英文缩写，它的前身是HTML。由于HTML代码烦琐，结构松散，所以推出了XHTML。也可以说，XHTML是HTML的一个升级版本。
XHTML语言是网页制作的基础，在网页制作软件出现之前，人们是靠手写HTML代码来制作网页的。我们在Dreamweaver的可视化环境中制作网页时，系统自动将这些设计“翻译”成了XHTML语言，并保存在网页文档中。因此，我们使用Dreamweaver 8制作网页的过程，实际上就是编写XHTML语言的过程。
虽说Dreamweaver已经实现了可视化编辑，但适当地掌握一些XHTML语法还是非常有益的。在Dreamweaver中新建文档便可创建一个简单的XHTML文档，如图1-15所示。图1-15 在Dreamweaver中创建的XHTML文档
其中的＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞，以DOCTYPE开头，也可称为DOCTYPE指定代码，它是XHTML的格式标记，用来告诉浏览器代码的类型，这里是xhtml1.0 transitional类型的。
XHTML语言的核心是标签（或者称为标记）。也就是说，我们在浏览网页时看到的文字、图像、动画等在XHTML文档中都是用标签来描述的。一个完整的XHTML文档由＜html＞标签开始并由＜/html＞标签结束，所有的XHTML代码都应写在＜html＞标签与＜/html＞标签之间。
起始标签＜head＞与结束标签＜/head＞之间的内容是XHTML文档的头部，其中主要包括：由“meta”对象声明的页面类型（“text/html”）和编码方式（“gb2312”），由起始标签＜title＞和结束标签＜/title＞指明的文档标题，以及由起始标签＜style＞和结束标签＜/style＞构成的CSS层叠样式表（项目五将会做详细介绍）。另外，我们还可以在这里加入由起始标签＜script＞和结束标签＜/script＞包含的JavaScript脚本代码。
起始标签＜body＞和结束标签＜/body＞之间是XHTML文档的主体，也是我们进行网页设计的主要部分。六、脚本语言简介
脚本语言是基于对象的编程语言，网页中常用的有VBScript、JScript和JavaScript，主要用来制作一些特殊效果，以弥补XHTML的不足。现在有很多网站都提供网页特效的下载，这些网页特效便是用脚本语言制作的，其形式如图1-16中所示。
VBScript和JScript是微软的产品，IE都支持。JavaScript是Netscape的产品，不仅适用于Netscape，同时和IE也有很好的兼容性，可以说是一种通用的脚本语言。图1-16 脚本语言形式成果检验
一、填空题
1．所谓 ，就是互联网上的一台功能相当于服务器级的电脑，并且要用专线或其他形式24小时与互联网相连。
2．互联网（Internet）由 、 和 组成，是目前世界上最大的计算机网络，它将无数 、 及 按照一定的通信协议组织在一起，方便了计算机之间的信息传递。
3．一个完整的网址由 、 或IP地址、网页在服务器中的路径和文件名4部分组成。
二、问答题
1．目前常用的网站推广方式有哪些？
2．简述网站建设的一般流程。
三、操作题
指出图1-17中所示网页的站标、导航栏、标题栏和广告条。图1-17 “新漫网”首页
第2部分 Dreamweaver 8详解
Dreamweaver 8 是Micromedia 公司推出的网页制作软件。通过使用Dreamweaver 8，用户可以方便地制作各种动态和静态网站。从大的方面讲，Dreamweaver 8 主要有两个功能，一是站点管理，二是网页制作。其中，利用Dreamweaver 的站点管理功能可以规划站点文件夹，设置站点属性，上传、下载和更新站点，以及管理站点文件等；利用Dreamweaver 的网页制作功能可以规划网页布局，编辑网页内容等。下面，我们将正式学习Dreamweaver 8。
主要内容
项目二 创建房地产网站
参考学时：4学时
学习目标
掌握创建和管理站点的方法
掌握网页文档的基本操作
掌握设置网页基本属性的方法
掌握图像、文本等基本网页元素的应用
掌握设置常见网页链接的方法
模块分配
模块一 创建本地站点
模块二 创建网站首页
模块三 创建网站子页
作品成品预览
素材文件位置：\material\dreamweaver\house
实例位置：\example\dreamweaver\house
本例通过制作一个房地产网站，来让大家熟悉一下Dreamweaver 8的基本功能。模块一 创建本地站点
学习目标
会启动Dreamweaver 8
认识Dreamweaver 8操作界面
会创建本地站点
在使用Dreamweaver 8制作网页之前，需要先创建一个站点，这样才能更方便地管理网页和素材文件。一、启动Dreamweaver 8
同所有的常用软件一样，安装Dreamweaver 8的方法相当简单，本书就不再详述。下面首先来看一下Dreamweaver 8的启动过程。
步骤1 第一次启动Dreamweaver 8，可单击“开始”按钮，选择“所有程序”＞“Macromedia”＞“Macromedia Dreamweaver 8”，如图2-1所示。
步骤2 显示启动过程。稍等片刻，显示Dreamweaver 8起始页，软件启动完成，如图2-2所示。图2-1 启动Dreamweaver 8图2-2 显示Dreamweaver 8起始页二、认识Dreamweaver 8操作界面
当我们在起始页的“创建新项目”列中单击第一项“HTML”后，将会创建一个“.html”格式的新文档，并进入Dreamweaver 8操作界面，如图2-3所示。图2-3 Dreamweaver 8操作界面
Dreamweaver 8的操作界面由标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、“属性”面板和面板组等组成，下面简要介绍各组成部分的特点。1．标题栏和菜单栏
标题栏上显示软件名称、文档标题和程序窗口控制按钮（最小化、最大化和关闭窗口）。“菜单栏”中几乎集中了Dreamweaver ８的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要打开某项主菜单，只需用鼠标单击该菜单项即可。2．插入栏
插入栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。
默认状态下，插入栏中显示的是网页中最常用的对象按钮组，即“常用”插入栏。单击插入栏左侧的“常用”按钮可以打开一个下拉列表，从中选择其他选项可以改变插入栏的类别，如图2-4所示。
某些按钮的右侧带有一个小三角符号“”，这表示该按钮具有同位按钮组，单击该三角符号将弹出其同位按钮组，如图2-5所示。图2-4 切换到其他插入栏
试读结束[说明：试读内容隐藏了图片]