实例制作：留言板制作教程

本例制作的留言簿页面是导航项目图片“语过添情”的链接目标。由于其页面布局与主页相同，所以本例使用模板制作留言簿。步骤如下：

打开已制作的个人主页index.html，选中正文部分的表格（即页面右侧的表格）。

打开“插入”浮动面板，并切换到“常用”面板。单击“常用”面板上的可编辑区域图标按钮。

在弹出的“新建可编辑区域”对话框中，将可编辑区域命名为content，然后单击“确定”按钮关闭对话框。即可将选中表格变为可编辑区域，如图9-39所示。

执行“文件”/“另保存为模板”命令，将index.html另存为模板。

执行“文件”/“资源”命令，打开“资源”面板。单击“资源”面板左侧的模板按钮，切换到“模板”面板。

在模板列表中单击另存为的模板index.dwt，单击右键，从弹出的上下文菜单中选择“从模板新建”命令，即可新建一个与index.html相同的未命名文档，但只有命名为content的区域可以编辑。

有关模板的介绍将在本书第12章进行讲解。

删除正文区域第二行至第四行的内容，然后将“欢迎光临我的小屋”修改为“语过添情”。此时的页面如图9-40所示。

图9-39 插入可编辑区域

图9-40 修改标题文字

选中第二行至第四行的单元格，在属性面板上单击“合并单元格”按钮，将选中的单元格合并为一行；并设置单元格内容的水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。

将光标定位在单元格中，单击“常用”面板上的“表单”页签，切换到“表单”面板。然后单击表单图标按钮，在单元格中插入一个表单。

在表单的属性面板上，设置表单的名称为form1；在“动作”文本框中输入mailto:vivi@123.com；在“方法”下拉列表中选择“POST”；在“目标”下拉列表中选择“_blank”。

当浏览者单击表单的“提交”按钮后，该表单内容将会发送到指定的邮箱。

将光标放置在表单中，单击“常用”面板上的表格图标按钮，在弹出的对话框中设置表格的行数为5，列数为2，表格宽度为500像素，边框粗细为1像素。单击“确定”按钮在页面中插入一个5行2列的表格。

在属性面板中将插入的表格的边框颜色设置为#99CC00；然后选中正文区域的大表格，在属性面板上将“填充”和“间距”均设置为5；边框为1像素；边框颜色为#99CC00。此时的页面效果如图9-41所示。

在第一行的前四行单元格中输入文本，例如：昵称、性别、主题类别、留言。

将光标放置在第一行第二列的单元格中，单击“表单”面板中的Spry验证文本域图标按钮，插入一个Spry验证文本域。

选中Spry验证文本域，在其属性面板上设置其“最小字符数”为2，“最大字符数”为12；“预览状态”为“初始”。其他选项保留默认设置。此时的页面如图9-42所示。

将光标定位在第二行第二列的单元格中，单击“插入”栏“表单”面板中的按钮，此时会添加一个单选框，再此单选框后键入文本“帅哥”。

选中该单选按钮，在属性面板中为新添加的单选框对象命名“gender”，设置选定值为0，初始状态为“未选中”。(https://www.xing528.com)

再次单击 按钮，添加同名为“gender”的单选框，改变选定值为1，并在单选框后键入文本“美眉”。此时文档的效果如图9-43所示。

图9-41 插入表格

图9-42 添加Spry文本域

图9-43 添加单选框

在“主题类别”后的单元格中插入一个Spry选择构件。在属性面板上将其名称设置为item；“预览状态”为“必填”；其他选项保留默认设置。

在页面上单击插入的Spry选择构件，在属性面板上设置其“类型”为“菜单”；然后单击“列表值”按钮，在弹出的对话框中编辑该选择构件的各个选项。如软件、文学、图像、情感、娱乐、其他、请选择一个类别。

单击“确定”按钮关闭“列表值”对话框，在属性面板的“初始时选定”列表框中选中“请选择一个类别”。此时的页面如图9-44所示。

在“留言”后的单元格中插入一个Spry验证文本区域，并在属性面板上设置其名称为message；“最小字符数”和“最大字符数”分别为6和300；“计数器”为“其余字符”，即提示浏览者还可以输入多少个字符；“提示”为“请留下您的宝贵意见或建议。”；“预览状态”为“有效”；其他选项保留默认设置。此时的页面如图9-45所示。

选中最后一行单元格，单击属性面板上的合并单元格按钮，将其合并为一个单元格，并设置单元格内容的水平对齐方式为“居中对齐”。然后在其中插入两个按钮。

选中第一个按钮，在属性面板上设置其名称为submit；值为“提交”；动作为“提交表单”。选中第二个按钮，在属性面板上设置其名称为reset；值为“重写”；动作为“重设表单”。

图9-44 添加Spry文本域

图9-45 添加单选框

调整表格的高度到合适的位置。然后保存文档，Dreamweaver将弹出一个“复制相关文件”对话框，提示用户页面上的对象需要的支持文件已复制到本地站点，要使相应的对象能正常工作，必须将这些文件上传到服务器。

单击“确定”按钮，上传支持文件。然后按下F12键在浏览器中预览页面。

当输入的文本有效，单击“提交”按钮即可将表单数据发送到指定的邮箱，且Spry构件的背景色为绿色；否则不提交表单，显示一个错误提示框，并显示为相应的颜色，如图9-46所示。

图9-46 页面预览效果

由于本例设置了“其余字符”类型的计数器，因此，如果在“留言”文本区域没有输入字符，则显示为300，每输入一个字符，则计数器就递减。