实例3 游戏引导页

实例说明 在本实例中将指导读者制作一个游戏引导页，在网页的制作过程中，需要导入外部图像素材、键入文本，并设置超链接。通过本实例的制作，使读者了解在网页中设置文本及超链接的方法。

技术要点 在本实例中，首先需要将网页中使用的素材导入到本地站点，然后将图片导入到单元格内，设置其属性，最后创建链接，完成该网页的制作。图3-1所示为本实例完成后的效果。

1 将本书附带光盘中的“网页基础设置/实例3：游戏引导页”文件夹复制到本地站点路径中。

2 运行Dreamweaver CS4，打开复制的“实例3：游戏引导页”文件夹中的“游戏引导页源文件．html”，如图3-2所示，将该文件另存在本地站点路径中，然后将其命名为“游戏引导页”。

3 在第一行第一列单元格内单击，执行菜单栏内的“插入”/“图像”命令，打开“选择图像源文件”对话框，从该对话框中选择复制的“实例3：游戏引导页”文件夹中的02.jpg文件，如图3-3所示，单击“确定”按钮，退出该对话框。

4 退出“选择图像源文件”对话框后，会打开“图像标签辅助功能属性”对话框，如图3-4所示。使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到页面中。

5 图像导入后的效果如图3-5所示。

6 使用同样的方法，在第一行第二列单元格内导入复制的“实例3：游戏引导页”文件夹中的03.jpg文件，在第二行单元格内导入复制的“实例3：游戏引导页”文件夹中的04.jpg文件，完成的效果如图3-6所示。

7 选择所有的单元格，在“属性”面板中的“间距”参数栏中键入4，确定单元格的间距，如图3-7所示。

8 在属性栏中单击“右对齐”按钮，然后参照图3-8所示来定位鼠标。

9 编辑页面属性。单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，在“分类”显示窗中选择“链接（CSS）”选项，在“页面属性”对话框中会显示“链接（CSS）”编辑窗，在“链接（CSS）”编辑窗中将“链接颜色”右侧显示窗中的颜色设置为黑色，在“下画线样式”下拉选项栏中选择“始终有下画线”选项，如图3-9所示，单击“确定”按钮，退出该对话框。

10 创建链接文字。在“属性”面板中的“字体”下拉选项栏中选择“默认字体”选项，在“大小”参数栏中键入36，在“大小”参数栏右侧的下拉选项栏中选择px选项，设置字体单位，如图3-10所示。

11 在页面内键入“返回”文本，如图3-11所示。

12 在页面内选择新创建的文本，右击文本，在弹出的快捷菜单中选择“创建链接”选项，如图3-12所示。

13 选择“创建链接”选项后，会打开“选择文件”对话框，如图3-13所示。从该对话框中选择复制的“实例3：游戏引导页”文件夹中的01.jpg文件，单击“确定”按钮，退出该对话框。

14 执行菜单栏内的“文件”/“保存”命令，将该网页保存，按下键盘上的F12键浏览网页，如图3-14所示。

15 现在本实例的制作就全部完成了，图3-15所示为本实例完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“网页基础设置/实例3：游戏引导页/游戏引导页．html”文件，该文件为本实例完成后的文件。