实例4 咖啡馆网页
实例说明 在本实例中将指导读者制作一个咖啡馆网页，该网页包含了大量的信息内容，因此使用了链接来更具体直观地展示信息内容。通过本实例的学习，使读者掌握为图片设置链接的方法。
技术要点 在本实例中，首先需要将网页中使用的素材导入到本地站点，然后打开已进行过编辑的网页，通过导入图片丰富网页内容，通过设置辅助操作，简化操作步骤，最后为导入的图片添加链接，并设置其属性，完成该网页的制作。图4-1所示为本实例完成后的效果。
图4-1 咖啡馆网页
1 将本书附带光盘中的“网页基础设置/实例4：咖啡馆网页”文件夹复制到本地站点路径内。
2 运行Dreamweaver CS4，打开复制的“实例4：咖啡馆网页”文件夹中的“咖啡馆网页源文件．html”，如图4-2所示，将该文件另存在本地站点路径内，然后将其命名为“咖啡馆网页”。
图4-2 打开“咖啡馆网页源文件．html”
3 在第二行第二列单元格内单击，执行菜单栏中的“插入”/“图像”命令，打开“选择图像源文件”对话框。从该对话框中选择复制的“实例4：咖啡馆网页”文件夹中的a-01.jpg文件，如图4-3所示，单击“确定”按钮，退出该对话框。
图4-3 “选择图像源文件”对话框
4 退出“选择图像源文件”对话框后，会打开“图像标签辅助功能属性”对话框，如图4-4所示，使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到页面内。
图4-4 “图像标签辅助功能属性”对话框
5 在前面讲解的操作中，导入图片时会弹出“图像标签辅助功能属性”对话框，为了便于操作，可以关闭该对话框。
6 接下来设置辅助操作，执行菜单栏内的“编辑”/“首选参数”命令，打开“首选参数”对话框，如图4-5所示。
图4-5 “首选参数”对话框
7 在打开的“首选参数”对话框中的“分类”显示窗中选择“辅助功能”选项，在“首选参数”对话框中会显示“辅助功能”编辑窗，清除“图像”复选框，如图4-6所示。单击“确定”按钮，退出“首选参数”对话框。
图4-6 清除“图像”复选框
8 使用同样的方法，参照图4-7所示由左至右依次导入复制的“实例4：咖啡馆网页”文件夹中的a-02.jpg、a-03.jpg、a-04.jpg文件。
图4-7 导入相应图像
9 选择第二行第二列单元格内的图像，单击“属性”面板中的“链接”文本框右侧的
“浏览文件”按钮，打开“选择文件”对话框。从该对话框中选择复制的“实例4：咖啡馆网页”文件夹中的01.jpg文件，如图4-8所示，单击“确定”按钮，退出该对话框。
图4-8 “选择文件”对话框
10 设置图像的边框。确定a-01.jpg文件仍处于被选择状态，在“属性”面板中的“边框”参数栏中键入0，设置图像的边框，如图4-9所示。
图4-9 设置图像边框
11 使用同样的方法，为其他文件添加链接图像，并设置图像的边框。
12 执行菜单栏内的“文件”/“保存”命令，将该网页保存，按下键盘上的F12键浏览网页，如图4-10所示。
图4-10 左图为主页，右图为设置后的链接分页
13 现在本实例的制作就全部完成了，图4-11所示为本实例完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“网页基础设置/实例4：咖啡馆网页/咖啡馆．html”文件，该文件为本实例完成后的文件。
图4-11 咖啡馆网页