6.6　网站与网页制作

6.6.1　网站与网页概述

1）网站与网页

网站是因特网上一块固定的面向全世界发布消息的地方，由域名（也就是网站地址）和网站空间构成，通常包括主页和其他具有超链接文件的页面。

网页就是指用户在浏览器中所看到的页面。每一个WWW服务器上都存放着大量的网页文件，这些网页文件形成一个网站，其中默认的封面文件，即访问一个网站时看到的第一个页面，称为主页。

2）网页的基本构成元素

网页主要由网页的标题、网站的LOGO、导航栏、图片、表单、视频、超级链接、文本等元素构成。

6.6.2　Dreamweaver 8网页制作工具简介

1）Dreamweaver 8简介

Macromedia Dreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，功能强大，使得各个层次的开发人员和设计人员都能够快速创建网站和应用程序。

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件。Dreamweaver 8的发布，更巩固了Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。它的主要特点是:

①灵活的编写方式。Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

②可视化编辑界面。Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

③功能更多的CSS支持。

④动态跨浏览器验证。保存时，系统自动检查当前文档的跨浏览器有效性，可以指定测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

⑤强大的Web站点管理功能。

⑥内建的图形编辑引擎。

⑦Dreamweaver 8集成特性。Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。

⑧丰富的媒体支持能力，可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver 8具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver 8还提供行为和时间线两种控件来产生交互式响应和进行动画处理。

⑨超强的扩展能力。Dreamweaver 8还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver 8的功能，并且可以发布这些插件。

2）Dreamweaver 8界面介绍

启动Dreamweaver 8，在其界面中单击“创建新项目”选项组中的HTML链接，就可以创建一个网页文件。新建网页时的操作界面如图6.20所示。

图6.20　Dreamweaver 8工作界面

此窗口由标题栏、菜单栏、插入面板、文档窗口、属性窗口和右侧的活动面板组成。

（1）文档窗口

文档窗口用来显示当前所编辑的页面，其中包含“设计”“代码”和“拆分”3个选项卡。选择“设计”选项卡进入设计视图，在设计视图中用户可以使用可视化的方式进行页面设计；选择“代码”选项卡进入代码视图，在代码视图中可以看到页面的源代码；选择“拆分”选项卡进入拆分视图，拆分视图上半部分显示可视化设计界面，下半部分显示网页代码。

（2）插入面板

插入面板主要包括常用、布局、表单、文本和HTML等内容。

①常用:包含主页中最常用的一些对象，如图片、表格和超链接等。

②布局:包含常用的框架结构，如左右分帧、上下分帧等。

③表单:包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选按钮和列表框等。

④文本:包含一些特殊字符，如版权符号、注册商标符号和商标符号等。

⑤HTML:添加一些Script脚本等。

（3）属性面板

属性面板用来显示文档窗口中选定对象的各种属性。

（4）活动面板

活动面板给出了一些常用的设置，主要包括:CSS、应用程序、标签检查器和程序等。

6.6.3　站点管理

一个站点（site）是一个存储区，它存储了一个网站包含的所有文件。通俗地说，一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver 8的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。创建站点的步骤如下:

①单击“站点”菜单，在弹出子菜单中选择“新建站点”，即打开了创建站点向导的第一步，如图6.21所示。在此处请用户为自己的站点起名称，并选择HTTP地址。如果没有HTTP地址，这里可以不写，然后单击“下一步”按钮。

②系统询问用户是否使用服务器技术。如果是制作动态网站，一般需要使用，而静态网站则不需要。如果用户选择建立动态网站，则选择“是，我想使用服务器技术”单选按钮；否则，选择“否，我不想使用服务技术”单选按钮，然后单击“下一步”按钮，如图6.22所示。

图6.21　创建网站步骤1

图6.22　创建网站步骤2

③在弹出的对话框中询问用户如何使用文件，一般选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮，然后单击“下一步”按钮，如图6.23所示。

④在弹出的对话框中选择连接到远程服务器的方式和在服务器上存储的位置，然后单击“下一步”按钮，如图6.24所示。

图6.23　创建网站步骤3

图6.24　创建网站步骤4

⑤选择是否启用存回和取出文件。选择“否，不启用存回和取出”单选按钮，然后单击“下一步”按钮，如图6.25所示。

⑥在弹出的对话框中看站点信息，然后单击“完成”按钮，即完成了该站点的创建，如图6.26所示。

图6.25　创建网站步骤5

图6.26　创建网站步骤6

6.6.4　创建网页

建好了站点就可以创建网页了。选择“文件”→“新建”命令，弹出“新建文档”对话框，在此对话框内，用户可以选择自己想要创建的文件类别，如图6.27所示。

6.6.5　设置网站主页

当新编辑了一个网页时，想把它作为站点的新主页，可以进行以下操作:

选择“文件”→“保存”命令，在弹出的对话框中将文件命名为Index.html，此时该文件成为默认主页，并且在“文件”面板中可以看到此站点内的所有文件，如图6.28所示。

图6.27　“新建文档”对话框图

图6.28　“文件”面板

6.6.6　文本编辑

1）录入文本

要向Dreamweaver 8文档添加文本，可以直接在Dreamweaver 8“文档”窗口中键入文本，也可以复制、粘贴相关内容。

2）编辑文本格式

网页的文本分为段落和标题两种格式。

在文档编辑窗口中选中一段文本，在属性面板“格式”后的下拉列表框中选择“段落”选项，把选中的文本设置成段落格式。“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。

6.6.7　插入图片

网页中使用的图片文件可以是多种不同类型，jpg和gif格式等都可以。插入图片可以使用“常用”面板上的“图像”按钮，也可以使用“插入”菜单中的“图像”命令。插入图像后，可使用属性面板对图像的属性进行设置。

6.6.8　超级链接

在网站上浏览信息时，可以方便地在网站的网页之间跳转，实现这一跳转工作的就是超链接。在Dreamweaver 8中，可以为文字、图片等制作超链接，同时也可以链接到不同的地址，例如本网站内部或者其他网站，甚至可以给其他用户发送电子邮件。

在Dreamweaver 8中，选中要进行超级链接的文字或者图片，单击“常用”工具栏中的“超链接”按钮，此时弹出“超级链接”对话框，如图6.29所示。单击“链接”后面的按钮。弹出“选择文件”对话框，如图6.30所示，此时可以进行超级链接的设置。

图6.29　“超级链接”对话框

图6.30　“选择文件”对话框

设置完毕后，单击“确定”按钮，返回“超级链接”对话框。此时可以设置超级链接的目标，有4个选项:＿blank，＿parent，＿self和＿top。

①＿blank:链接到的新网页在新窗口中打开；

②＿parent:新网页在父窗口中打开，一般用于框架网页；

③＿self:在本窗口内打开新网页，新网页将覆盖原有网页；

④＿top:在顶端打开新网页，一般也用于框架网页。

6.6.9　表格处理

表格是网页经常使用的元素，因为它不仅可以内嵌各种HTML所允许的内容，而且还是页面布局最为重要的手段。现在大部分网页都是由一堆表格相互嵌套而成，所以灵活地运用表格是成功制作网页的关键。插入表格时，只需在“布局”面板上单击“表格”按钮，在弹出的“表格”对话框中选择属性设置，再单击“确定”按钮就可以了。如果需要修改已有表格的属性，在属性面板上重新设置即可。

6.6.10　表单操作

将Dreamweaver 8的“插入”面板中切换到“表单”面板，此时可以制作动态交互页面，常见的有用户注册页面、用户登录页面等典型页面。如图6.31所示为一个注册页面的截图，注册成功的数据会被写入数据库。

在上面的实例中，Dreamweaver 8只是完成了网页界面的设计，对于用户单击“提交”按钮完成注册的内容，必须编写脚本代码来实现，这就要使用动态网页制作技术来编写代码。

图6.31　注册页面截图

6.6.11　框架结构

有些网页通常使用框架。框架将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文件，各个区域也可以相关联地显示某一个内容。比如可以将导航放在一个区域，文件内容显示在另一个区域。例如论坛网站、电子邮箱等，它们使用框架结构就非常典型。Dreamweaver 8提供的框架能够完成网页框架设置。

框架网页中最大的区域通常作为主框架区，频繁变化的内容一般安排在该区域中显示。除主框架区外的其他区域则相对稳定，常用于显示框架的导航和目录等。在导航或目录的框架中单击某个超链接，就可以在主框架区显示相应的内容。因此，使用框架网页的特点是可以避免浏览窗口的频繁切换。

框架网页在使用时需要浏览器的支持，但是部分浏览器不支持框架网页，因此框架网页目前的使用并不普遍。如图6.32所示为框架网页设计的效果图。

图6.32　框架网页设计图

6.6.12　网页特效

网页特效是用程序代码在网页中实现的动态特殊效果或者特殊功能的一种技术。网页特效的使用可以极大地改善网页呆板、没有生气的状况。例如弹出的广告，跟着鼠标走来走去的图片、飘动的雪花等。

网页特效是通过由HTML组合脚本语言或层叠样式单（CSS）等技术完成的。