实例4 制作统计表页面
实例说明
本实例为一个统计表页面，该实例包括主页和引导页。引导页包括标题和箭头及文本，单击文本后，会进入主页，主页内容为调查表，包括文本框、单选按钮等组件。通过本实例，可以使读者了解文本相关组件的应用方法。
技术要点
在本实例中，首先创建主页，将素材文件拷贝到本地站点的路径，然后使用表格工具设置布局。接下来要使用表单工具栏中的文本字段、文本区域、复选框、单选按钮组、列表/菜单、按钮工具等工具来创建网页内容，完成主页的设置；最后创建引导页，创建一个新的HTML格式文件，导入图像和输入文本，并设置文本的超链接，完成网页的设置。
在本实例中，将指导读者制作统计表和设置超链接的方法。该网页制作完成后，在引导页中单击文本按钮，进入统计表页面。统计表页面包括文本框、单选按钮等组件，可以进行输入文本、选择选项等操作，图4-1所示为网页完成后的效果。
图4-1 进入统计表页面
1. 设置主页
1 由于主页为引导页的超链接内容，所以需要设置主页。将本书附带光盘文件中的“咨询类网页/实例4：进入统计表格”文件夹拷贝到本地站点的路径。
2 运行Dreamweaver CS3，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点的路径，并将其命名为“统计表主页02”。
3 在“常用”工具栏内单击
“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图4-2所示。单击“确定”按钮，退出该对话框。
图4-2 “表格”对话框
4 退出“表格”对话框后，在文档窗口会插入一个表格，如图4-3所示。
图4-3 插入表格
5 单击表格内的单元格，在“属性”面板中的“背景图像”右侧单击
“浏览”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例4：进入统计表格”/“背景.jpg”文件，如图4-4所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图4-4 “选择图像源文件”对话框
6 退出“选择图像源文件”对话框后，背景图像被导入到单元格中。在单元格内单击鼠标，在“属性”面板的“高”参数栏内键入768，如图4-5所示。
图4-5 调整图像高度
7 在“属性”面板的“大小”参数栏内键入16，激活
“左对齐”按钮，然后键入“用户名：”字样。如图4-6所示。
图4-6 键入文本
8 将光标定位在“用户名：”文本右侧，然后在“表单”工具栏中单击
“文本字段”按钮，打开“输入标签辅助功能属性”对话框，在该对话框中参照默认参数设置，如图4-7所示。单击“确定”按钮，退出该对话框。
图4-7 “输入标签辅助功能属性”对话框
9 退出“输入标签辅助功能属性”对话框后，会打开“Dreamweaver”对话框，询问是否添加表单标签。在“Dreamweaver”对话框中单击“否”按钮，退出该对话框，如图4-8所示。
图4-8 “Dreamweaver”对话框
10 退出“Dreamweaver”对话框后，在文档窗口中会插入一个文本字段。选择该文本字段，在“属性”面板的“字符宽度”参数栏内键入12，在“最多字符数”参数栏内键入15，如图4-9所示。
图4-9 设置文本字段的属性
11 使用同样方法，在“用户名：”文本的底部键入“密码：”字样，并插入一个文本字段，如图4-10所示。
图4-10 插入文本字段
12 选择刚刚插入的文本字段，在“属性”面板的“字符宽度”参数栏内键入12，在“最多字符数”参数栏内键入6，并选择“密码”单选按钮，使文本字段变为密码框。如图4-11所示。
图4-11 设置文本字段的属性
13 将光标定位在“密码：”文本的底部，插入一个文本字段。选择该文本字段，在“属性”面板内的“字符宽度”参数栏内键入30，在“最多字符数”参数栏内键入5，选择“多行”单选按钮，在“初始值”文本框内键入“请多提宝贵意见，我们期待您的来信！”字样，如图4-12所示。
图4-12 设置文本字段的属性
14 使用相同的设置，在刚刚插入的文本字段底部键入“您的兴趣：”字样，如图4-13所示。
图4-13 键入文本
15 将光标定位在“您的兴趣：”文本右侧，在“表单”工具栏中单击
“复选框”按钮。打开“输入标签辅助功能属性”对话框，在该对话框的“标签文字”文本框内键入“旅游”字样，其他属性使用默认设置，如图4-14所示。单击“确定”按钮，退出该对话框。
图4-14 “输入标签辅助功能属性”对话框
16 退出“输入标签辅助功能属性”对话框后，会打开“Dreamweaver”对话框。在“Dreamweaver”对话框中单击“否”按钮，退出该对话框，如图4-15所示。
图4-15 “Dreamweaver”对话框
17 退出“Dreamweaver”对话框后，在文档窗口中便插入一个复选框。选择该复选框右侧的“旅游”文本，在“属性”面板的“大小”参数栏内键入12，如图4-16所示。
图4-16 设置文本大小
18 参照上述插入复选框的方法，分别插入标签文本为“摄影”、“读书”、“电影”、“写字”的复选框，如图4-17所示。
图4-17 插入其他复选框
19 在“您的兴趣：”文本底部键入“您最想学习哪方面的知识？”字样，如图4-18 所示。
图4-18 键入文本
20 将光标定位在“您最想学习哪方面的知识？”文本的底部，然后在“表单”工具栏中单击
“单选按钮组”按钮，打开“单选按钮组”对话框，如图4-19所示。
图4-19 “单选按钮组”对话框
21 在“单选按钮组”对话框中单击“标签”值下的“单选”文本，此时文本处于可编辑的状态，然后分别输入Dreamweaver和Photoshop。在“单选按钮”选项组中单击
按钮，向该组添加单选按钮，并分别输入3dmax和Flash，如图4-20所示。单击“确定”按钮，退出该对话框。
图4-20 为单选按钮输入标签
22 退出“单选按钮组”对话框后，会打开“Dreamweaver”对话框。在“Dreamweaver”对话框中单击“否”按钮，退出该对话框，这时在文档窗口中插入一个单选按钮组，如图4-21所示。
图4-21 插入单选按钮组
23 在单选按钮组的底部键入“您最想上哪所大学：”字样，如图4-22所示。
图4-22 键入文本
24 将光标定位在“您最想上哪所大学：”文本的右侧，在“表单”工具栏中单击
“列表/菜单”按钮，打开“输入标签辅助功能属性”对话框，在该对话框中，参照默认参数设置，如图4-23所示。单击“确定”按钮，退出该对话框。
图4-23 “输入标签辅助功能属性”对话框
25 退出“输入标签辅助功能属性”对话框后，会打开“Dreamweaver”对话框。在“Dreamweaver”对话框中单击“否”按钮，退出该对话框，这时在文档窗口中插入一个列表/菜单，如图4-24所示。
图4-24 插入列表/菜单
26 选择刚刚插入的列表，在“属性”面板中单击“列表值”按钮，打开“列表值”对话框，如图4-25所示。
图4-25 “列表值”对话框
27 单击“项目标签”栏下的区域，这时会出现一个文本输入框。在该文本输入框内键入“北京大学”，然后在“列表值”对话框中单击按钮，这时会出现一个新的文本输入框，在该文本框内键入“清华大学”。使用同样的方法，分别添加当前菜单的选择项目“上海大学”、“郑州大学”、“山东大学”、“济南大学”，如图4-26所示。单击“确定”按钮，退出该对话框。
图4-26 添加当前菜单的选择项目
28 将光标定位于列表的底部，然后单击“表单”工具栏中的
“按钮”按钮，打开“输入标签辅助功能属性”对话框，如图4-27所示。单击“确定”按钮，退出该对话框。
图4-27 “输入标签辅助功能属性”对话框
29 退出“输入标签辅助功能属性”对话框后，会打开“Dreamweaver”对话框。在“Dreamweaver”对话框中单击“否”按钮，退出该对话框，这时文档窗口中插入一个按钮。如图4-28所示。
图4-28 插入按钮
30 选择刚刚插入的按钮，在“属性”面板的“值（V）”文本框内键入“完成”字样，并选择“提交表单”单选按钮，如图4-29所示。
图4-29 设置按钮的属性
31 执行菜单栏中的“文件”/“保存”命令，将该网页保存，然后按下键盘上的F12键，预览页面，图4-30所示为统计表的页面效果。
图4-30 统计表页面
2. 设置引导页
1 运行Dreamweaver CS3，单击起始页面的HTML选项，创建一个新的HTML格式文件，将该文件保存在本地站点的路径，将其命名为“统计表引导页02”。
2 在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入3，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图4-31所示。单击“确定”按钮，退出该对话框。
图4-31 “表格”对话框
3 退出“表格”对话框后，在文档窗口会插入一个3行1列的表格。选择第1行单元格，在“属性”面板中的“背景图像”右侧单击“浏览”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例4：进入统计表格”/“素材01.gif”文件，如图4-32所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图4-32 “选择图像源文件”对话框
提示
单击单元格，执行菜单栏中的“编辑”/“全选”命令，可选择该单元格；按住Ctrl键的同时，单击单元格，也可选择该单元格。
4 退出“选择图像源文件”对话框后，所选图像被导入到单元格中。单击第1行单元格，在“属性”面板的“高”参数栏内键入270，如图4-33所示。
图4-33 调整单元格大小
5 接下来使用同样方法，分别将“实例4：进入统计表格”/“素材02.jpg”文件导入第2行单元格中，将“实例4：进入统计表格”/“素材03.jpg”文件导入第3行单元格中。并将第2行单元格的“高”设置为185，第3行单元格的“高”设置为313，如图4-34所示。
图4-34 设置单元格属性
6 选择第2行单元格，在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入2，在“列数”参数栏内键入3，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图4-35所示。单击“确定”按钮，退出该对话框。
图4-35 “表格”对话框
7 退出“表格”对话框后，在第2行单元格内会插入一个表格，如图4-36所示。
图4-36 插入表格
8 拖动刚刚插入的表格边框，以改变表格的大小，图4-37为调整表格后的状态。
图4-37 调整表格后的状态
提示
水平方向调整表格的大小，拖动右边的选择柄；垂直方向调整表格的大小，拖动底部的选择柄。
9 选择第1行第2列的单元格，然后单击“常用”工具栏内的
“图像”按钮，打开“选择图像源文件”对话框。在该对话框中选择“实例4：进入统计表格”/“素材01.jpg”文件，然后单击“确定”按钮，退出该对话框。
10 退出“选择图像源文件”对话框后，打开“图像标签辅助功能属性”对话框，如图4-38所示。使用默认设置，单击“确定”按钮，退出该对话框。
图4-38 “图像标签辅助功能属性”对话框
11 退出“图像标签辅助功能属性”对话框后，在文档窗口中出现导入的图像。选择该图像，在“属性”面板中激活
“居中对齐”按钮，使其居中对齐，如图4-39所示。
图4-39 居中对齐图像
12 选择第2行第2列的单元格，键入“Come into”字样。选择该文本，在“属性”面板的“大小”参数栏内键入16，设置“文本颜色”显示窗内的颜色设置为黑色，并激活“居中对齐”按钮，文本效果如图4-40所示。
图4-40 设置文本属性
13 确定文本处于选择状态，在“属性”面板中单击“链接”下拉式选项栏右侧的“浏览”按钮，打开“选择文件”对话框。在该对话框中选择拷贝的“实例4：进入统计表格”文件夹内的“统计表页面.html”文件或读者自己制作的“统计表主页02.html”文件，如图4-41所示。单击“确定”按钮，退出该对话框。
图4-41 “选择文件”对话框
14 退出“选择文件”对话框后，再次选择文本，执行菜单栏中的“修改”/“页面属性”命令，打开“页面属性”对话框，在“分类”列表框中选择“链接”选项。
15 在“链接字体”下拉式列表框中选择“（同页面字体）”选项，在“大小”参数栏内键入16，单击
“链接颜色”显示窗，在弹出的颜色列表中选择黑色；在“下划线样式”下拉式列表中选择“始终无下划线”选项，其他选项按默认设置，如图4-42所示。单击“确定”按钮，退出该对话框。
图4-42 设置文本的链接属性
16 执行菜单栏中的“文件”/“保存”命令，将该网页保存，本实例就全部设置完毕了，图4-43所示为网页设置完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘的“咨询类网页/实例4：进入统计表页面/统计表页面.html”文件和“设置超链接.html”文件，这两个文件为本实例设置完成后的文件。
图4-43 进入统计表页面