2.4 使用Dreamweaver CS6创建基本网页

使用Dreamweaver CS6，可以创建和编辑网站的网页，该软件为创建Web文档提供了灵活的环境。

2.4.1 定义Dreamweaver站点

Dreamweaver站点是管理网站中所有相关联文档的一种工具，通过站点，可以实现将文件上传到网络服务器、自动跟踪和维护、管理文件以及共享文件等功能。Dreamweaver中的站点包括本地站点、远程站点和测试站点三类。

●本地站点：用来存放整个网站框架的本地文件夹，是用户的工作目录，一般制作网页时，只要建立本地站点即可。

●远程站点：存储于Internet服务器上的站点和相关文档。通常情况下，为了不连接Internet而对所建的站点进行测试，可以在本地计算机上创建远程站点，来模拟真实的Web服务器进行测试。

●测试站点：Dreamweaver处理动态页面的文件夹，使用此文件夹生成动态内容，并在工作时连接到数据库，用于对动态页面进行测试。

1．使用向导创建本地站点

在Dreamweaver CS6中使用向导创建本地站点的具体步骤如下。

step 01 打开Dreamweaver CS6，选择“站点”→“新建站点”菜单命令，弹出“站点设置对象”对话框，从中输入站点的名称，并设置本地站点文件夹的路径和名称，然后单击“保存”按钮，如图2-25所示。

step 02 本地站点创建完成，在“文件”面板的“本地文件”窗格中，会显示该站点的根目录，如图2-26所示。

2．使用“管理站点”功能创建站点

在“文件”面板中，提供了“管理站点”功能，利用该功能，可以创建站点，具体的操作步骤如下。

step 01 单击“文件”面板右侧的下三角按钮，在弹出的下拉列表中选择“管理站点”选项，如图2-27所示。

step 02 将弹出“管理站点”对话框，在此对话框中单击“新建站点”按钮，如图2-28所示。

step 03 弹出“站点设置对象”对话框，在此对话框中，即可根据前面介绍的方法创建本地站点，如图2-29所示。

2.4.2 使用欢迎页

打开软件之后，出现在我们面前的是一个欢迎界面，在欢迎界面中，可以快捷地选择所要操作的对象，如图2-30所示。

可以看到，在这个欢迎界面中，可以方便地打开最近的项目和新建各种页面文件，或者执行打开站点等功能。

2.4.3 新建页面

制作网页应该从创建空白文档开始。创建空白文档的具体步骤如下。

step 01 选择“文件”→“新建”菜单命令，如图2-31所示。

step 02 弹出“新建文档”对话框。在“新建文档”对话框的左侧选择“空白页”选项，在“页面类型”列表框中选择HTML选项，在“布局”列表框中选择“无”选项，如图2-32所示。

step 03 单击“创建”按钮，即可创建一个空白文档，如图2-33所示。

2.4.4 设置页面标题

新建一个空白页面后，就可以进行网页的编辑操作了。首先，为网站设置页面标题，其步骤如下。

step 01 选择新建的网站页面，然后单击“代码”标签，进入“代码”窗口，如图2-34所示。

step 02 在“代码”窗口中，选择<title>标签，在<title>与</title>标签之间，输入“鸿鹄电子商务网站”文本，如图2-35所示。

step 03 按Ctrl+S组合键，弹出“另存为”对话框，选择网站保存的路径，将文件命名为“index.html”，如图2-36所示。

step 04 按快捷键F12预览效果，如图2-37所示。

2.4.5 设置页面属性

创建空白文档并设置标题后，接下来需要对文件进行页面属性的设置，即设置整个网站页面的外观效果。

选择“修改”→“页面属性”菜单命令，或者按Ctrl+J组合键，打开“页面属性”对话框，在该对话框中，可以设置外观、链接、标题、编码和跟踪图像等属性。

1．设置外观

在“页面属性”对话框的“分类”列表框中，选择“外观”选项，设置“页面字体”为“默认字体”，设置字体“大小”为12px，并设置“背景颜色”为“#FFFBF2”，如图2-38所示。

注意

图像和背景颜色不能同时显示，如果在网页中同时设置这两个选项，在浏览网页时，将只显示网页背景图像。

2．设置链接

在“页面属性”对话框的“分类”列表框中选择“链接”选项，设置“链接颜色”为“#000000”，设置“已访问链接”为“#000000”，设置“变换图像链接”为“#000000”，设置“活动链接”为“#990000”，并设置“下划线样式”为“仅在变换图像时显示下划线”，如图2-39所示。

3．设置标题和编码

除了在“代码”窗口中设置页面标题外，还可以在“页面属性”对话框的“分类”列表框中选择“标题”选项，设置标题及其相关属性，在“标题”区域中，可以设置各种标题的字体样式、大小、颜色等，如图2-40所示。在“分类”列表框中，选择“标题/编码”选项，设置标题、文档类型、编码和站点文件夹等，如图2-41所示。

4．设置跟踪图像

在“页面属性”对话框的“分类”列表框中，选择“跟踪图像”选项，可以设置跟踪图像的属性，如图2-42所示。

注意

对于在Dreamweaver中创建的每一个页面，都可以使用“页面属性”对话框指定布局和格式属性。在不同的页面中，可以为创建的每个新页面指定新的页面属性，也可以使用“页面属性”对话框修改现有的页面属性。

2.4.6 添加文本

文本是基本的信息载体，是网页中最基本的元素之一。在文件中使用丰富的字体、多样的格式以及赏心悦目的文本效果，对于网站设计师来说，是必不可少的技能。

在网页中插入文本和设置文本属性的具体步骤如下。

step 01 首先新建一个文档或打开一个文档。

step 02 将光标放置在文档的编辑区，输入文字，如图2-43所示。

step 03 在文件窗口中，选定要设置字体的文本，在“属性”面板中单击CSS按钮，在“大小”文本框中，将文字大小设置为30像素，单击“字体”下拉列表右边的下三角按钮，在弹出的列表中，选择字体为楷体，然后在Color（颜色）设置栏中设置颜色为红色，如图2-44所示。

step 04 设置好文字属性后，效果如图2-45所示。

提示

在输入文本的过程中，换行时如果直接按Enter键，行间距会比较大。一般情况下，在网页中换行时，应该按Shift+Enter组合键，这样才是正常的行距。

2.4.7 插入图像

在文件中插入漂亮的图像，会使网页更加美观，使页面更具吸引力。在网页中插入和编辑图像的具体步骤如下。

step 01 首先新建一个文档或打开一个文档。

step 02 在文档编辑区中，将光标放置在需要插入图像的位置，选择“插入”→“图像”→“图像”菜单命令，弹出“选择图像源文件”对话框，从中选择要插入的图像文件，然后单击“确定”按钮，如图2-46所示。

step 03 即可完成向文档中插入图像的操作，最终效果如图2-47所示。

step 04 在“属性”面板的“替换”文本框中输入文字“山西村”，设置图像的替换文本，如图2-48所示。

step 05 如果需要剪裁图像，首先选择图像，然后在“属性”面板中单击“裁剪”按钮，图像周围出现8个控制点，通过拖动这些控制点可修剪图像的大小，如图2-49所示。选择好剪裁的位置后，按Enter键完成图像的裁剪工作。

step 06 如果需要优化图像，可在“属性”面板中单击“编辑图像设置”按钮，弹出“图像优化”对话框，如图2-50所示。在该对话框中进行相应的设置后，单击“确定”按钮，即可对图像进行优化。

2.4.8 插入多媒体

多媒体对象和图像，在网页中起到的作用主要是美化网页，在Dreamweaver CS6中，可以插入多媒体对象，例如Flash。

插入多媒体的具体操作步骤如下。

step 01 首先新建一个文档或打开一个文档。

step 02 在文档编辑区中，将光标放置在需要插入多媒体的位置，选择“插入”→“媒体”→“Flash SWF”菜单命令，弹出“选择SWF”对话框，从中选择要插入的多媒体文件，然后单击“确定”按钮，如图2-51所示。

step 03 这样即可完成向文档中插入多媒体的操作，最终效果如图2-52所示。

2.4.9 设置网页链接

链接是网页中极为重要的部分，是各个网页相互跳转的依据，单击文档中的链接，即可跳转至相应的位置。浏览网页就是从一个文档跳转到另一个文档，从一个位置跳转到另一个位置，从一个网站跳转到另一个网站的过程，而这些过程都是通过链接来实现的。

通过Dreamweaver，可以使用多种方法来创建内部文本链接。可以在文档窗口中选择“修改”→“创建链接”菜单命令，选择指向的文件；可以使用“属性”面板来链接文件，即单击“浏览文件”图标来选择文件；也可以使用“指向文件”图标来选择文件或直接输入文件路径。

使用“属性”面板创建链接的具体步骤如下。

step 01 首先新建一个文档或打开一个文档。

step 02 选择需要添加链接的文字，单击“属性”面板中的“浏览文件”图标，弹出“选择文件”对话框，然后选择需要转向的网页，如图2-53所示。

step 03 在“属性”面板的“目标”下拉列表中，可以选择链接文档时打开的框架，如图2-54所示。

其中各选项的含义如下。

●_blank：将链接的文件载入一个未命名的新浏览器窗口中。

●_new：将链接的文件载入一个新的浏览器窗口中。

●_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，链接文件则加载到整个浏览器窗口中。

●_self：将链接的文件载入该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。

●_top：将链接的文件载入整个浏览器窗口中，会删除所有的框架。

step 01 图像热点链接可以将一幅图分割为若干区域，并将这些区域设置为热点区域，可以将这些不同的热点区域链接到不同的页面。热点工具有3种：矩形热点工具、椭圆形热点工具和多边形热点工具。选中图像后，单击“属性”面板中的矩形热点工具按钮，在“情感日志”图像上拖动鼠标，绘制一个矩形热点，即可创建热点，如图2-55所示。

step 02 电子邮件链接是一种特殊的链接，单击这种链接时，就会启动计算机中相应的E-mail程序，允许书写电子邮件，然后发往指定地址。选择文字“联系我们”，然后选择“插入”→“电子邮件链接”菜单命令，弹出“电子邮件链接”对话框，输入要链接的电子邮箱，如图2-56所示。

step 03 单击“确定”按钮，即可完成电子邮件链接的添加操作，如图2-57所示。

2.4.10 在网页中插入表格

表格是网页制作中不可缺少的网页元素之一，在Dreamweaver CS6中，表格主要用来安排网页的整体布局，也可以用来制作简单的图表。在文档中，利用表格可以对网页内容进行精确定位。

使用“插入”面板或“插入”菜单，都可以创建新表格，然后设置表格的属性，也可以添加和删除表格的行和列，还可以对表格进行拆分和合并。

操作表格的具体步骤如下。

step 01 首先新建一个文档或打开一个文档，将光标定位到需要插入表格的位置，选择“插入”→“表格”菜单命令，打开“表格”对话框，如图2-58所示。

step 02 在“表格”对话框中，将“行数”设置为5，“列”设置为2，“表格宽度”设置为400像素，“边框粗细”设置为1像素，其他保持默认设置，单击“确定”按钮，即可在文档中插入表格，如图2-59所示。

在“表格”对话框中可以进行以下设置。

●行数：在该文本框中输入新建表格的行数。

●列：在该文本框中输入新建表格的列数。

●表格宽度：用于设置表格的宽度，单位可以是像素或百分比。

●边框粗细：用于设置表格边框的宽度（以像素为单位）。若设置为0，在浏览时，则不显示表格边框。

●单元格边距：用于设置单元格边框和单元格内容之间的像素数。

●单元格间距：用于设置相邻单元格之间的像素数。

●标题：用于设置表头样式，有4种样式可供选择。

无——不将表格的首列或首行设置为标题。

左——将表格的第一列作为标题列，表格中的每一行可以输入一个标题。

顶部——将表格的第一行作为标题行，表格中的每一列可以输入一个标题。

两者——可以在表格中同时输入列标题和行标题。

●标题：在该文本框中输入表格的标题，标题将显示在表格的外部。

●摘要：对表格进行说明或注释，内容不会在浏览器中显示，仅在源代码中显示，可提高源代码的可读性。

step 03 选定表格后，选择“窗口”→“属性”菜单命令，或按Ctrl+F3组合键，即可打开表格的“属性”面板，如图2-60所示。

step 04 将鼠标指针移动到单元格的边框上，当鼠标指针变成形状时，按下鼠标左键并上下移动，即可改变单元格的高度，如图2-61所示。

提示

对表格的高度一般不需要进行设置，它会根据单元格中所输入的内容自动调整。

在表格的“属性”面板中，可以进行以下设置。

●“表格”文本框：用于设置表格的标识。

●“行”和“列”文本框：用于设置表格中的行数和列数。可通过修改该值，达到添加或删除表格行和列的目的。

●“宽”文本框：用于设置表格的宽度值，单位是像素或百分比。

●“填充”文本框：设置单元格边距，指单元格边框和单元格内容间的像素数。

●“间距”文本框：设置单元格间距，指相邻单元格之间的像素数。

●“对齐”下拉列表：用于设置表格的对齐方式，该下拉列表中包括默认、左对齐、居中对齐和右对齐4个选项。

●“边框”文本框：用于设置表格边框的宽度（以像素为单位）。

●“清除列宽”按钮和“清除行高”按钮：用于清除表格的列宽和行高。

●“将表格宽度转换成像素”按钮：可用来将表格中每列的宽度转换为以像素为单位的宽度。

●“将表格宽度转换成百分比”按钮：可用来将表格中每列的宽度转换为以百分比为单位的宽度。

step 05 选择需要改变高度的单元格，在“属性”面板的“高”文本框中输入“60”，可以精确地设定单元格的高度，如图2-62所示。

step 06 将鼠标指针移动到单元格的边框上，当鼠标指针变成形状时，按下鼠标左键并左右移动，即可改变单元格的宽度，如图2-63所示。

step 07 将光标放置在要删除的行或列中，选择“修改”→“表格”→“删除行”或“删除列”菜单命令，即可删除行或列，如图2-64所示。如果选择“插入行”或“插入列”菜单命令，即可添加行或列。

step 08 选择需要合并的单元格并右击，在弹出的快捷菜单中选择“表格”→“合并单元格”命令，即可合并选择的单元格，如图2-65所示。

step 09 选择需要拆分的单元格并右击，在弹出的快捷菜单中选择“表格”→“拆分单元格”命令，如图2-66所示。

step 10 打开“拆分单元格”对话框，在“列数”文本框中输入“4”，如图2-67所示

step 11 单击“确定”按钮，即可拆分选择的单元格，最终效果如图2-68所示。

2.4.11 使用表单对象

表单用于把来自用户的信息提交给服务器，是网站管理者与浏览者之间进行沟通的桥梁。利用表单处理程序，可以收集、分析用户的反馈意见，以做出科学、合理的决策，因此，表单设计得好坏，是一个网站成功与否的重要因素。使用Dreamweaver CS6创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。

下面以制作一个留言本为例，来讲解如何在网页中插入表单，具体的操作步骤如下。

step 01 打开随书光盘中的“ch02\制作留言本.html”文件，如图2-69所示。

step 02 将光标移到下一行，单击“插入”面板“表单”选项卡中的“表单”按钮，插入一个表单，如图2-70所示。

step 03 将光标放在红色的虚线内，选择“插入”→“表格”菜单命令，弹出“表格”对话框。我们将“行数”设置为9，“列”设置为2，“表格宽度”设置为470像素，“边框粗细”设置为1，“单元格边距”设置为2，“单元格间距”设置为3，如图2-71所示。

step 04 单击“确定”按钮，在表单中插入表格，并调整表格的宽度，如图2-72所示。

step 05 在第1列单元格中输入相应的文字，然后选定文字，在“属性”面板中，设置文字的“大小”为12像素，将“水平”设置为“右对齐”，“垂直”设置为“居中”，设置效果如图2-73所示。

step 06 将光标放在第1行的第2列单元格中，选择“插入”→“表单”→“文本域”菜单命令，插入文本域。在“属性”面板中，设置文本域的“字符宽度”为12，“最多字符数”为12，“类型”为“单行”，如图2-74所示。

step 07 重复以上步骤，在第4行、第5行和第6行的第2列单元格中插入文本域，并设置相应的属性，如图2-75所示。

step 08 将光标放在第2行的第2列单元格中，单击“插入”面板“表单”选项卡中的“单选按钮”按钮，插入单选按钮，在单选按钮的右侧输入“男”，按照同样的方法，再插入一个单选按钮，输入“女”，如图2-76所示。在“属性”面板中，将“初始状态”分别设置为“已选中”和“未选中”。

step 09 将光标放在第3行的第2列单元格中，单击“插入”面板“表单”选项卡中的“复选框”按钮，插入复选框。在“属性”面板中，将“初始状态”设置为“未选中”，在其后输入文本“音乐”，如图2-77所示。

step 10 按照同样的方法，插入其他复选框，设置属性并输入文字，如图2-78所示。

step 11 将光标置于第8行的第2列单元格中，然后选择“插入”→“表单”→“文本区域”菜单命令，插入多行文本域，在“属性”面板中的选项为默认值，如图2-79所示。

step 12 将光标放在第7行的第2列单元格中，选择“插入”→“表单”→“文件域”菜单命令，插入文件域，然后在“属性”面板中设置相应的属性，如图2-80所示。

step 13 选定第9行的两个单元格，选择“修改”→“表格”→“合并单元格”菜单命令，合并单元格，如图2-81所示。然后将光标放在合并后的单元格中，在“属性”面板中，将“水平”设置为“居中对齐”。

step 14 选择“插入”→“表单”→“按钮”菜单命令，插入两个按钮：按钮和按钮。在“属性”面板中，分别设置相应的属性，如图2-82所示。

step 15 保存文档，按F12键，在浏览器中预览效果，如图2-83所示。