- Dreamweaver CS3网页设计50例
- 李峰 刘明晶 张波芳等编著
- 3071字
- 2020-08-26 20:39:18
实例1 材质查询网页
实例说明
本实例为一个材质查询网站的页面，该网页包含了图片、文本、超链接等网页的基本元素。通过本实例，可以使读者了解网页设置的基础知识点，并能够独立制作网页。
技术要点
在本实例中，为了便于管理，首先需要设置本地站点，然后使用表格工具设置布局；接下来要导入位图并设置图片的超链接，最后输入文本，完成网页的设置。
网页的设置，需要进行合理的规划和编辑，并进行大量的前期准备工作。虽然其过程较为复杂，但是如果方法得当，工具运用正确，制作网页的过程并不困难。在本实例中，将指导读者按照标准的工作流程来制作一个网页，使读者了解使用Dreamweaver CS3制作网页的基本方法。该网页制作完成后，在网页中有各种材质的名称和缩略图，单击缩略图，可以显示大图，图1-1所示为网页完成后的效果。
图1-1 材质查询网页
1. 设置本地站点
1 为了更好地对网页进行编辑和管理，首先需要定义一个本地站点，运行Dreamweaver CS3，单击起始页面的“Dreamweaver站点”选项，打开“站点定义为”对话框。在该对话框内设置站点名称和HTTP地址，由于本站点为制作练习使用的，所以可以不设置HTTP地址，如图1-2所示。单击“下一步”按钮，进入下一个面板。
图1-2 “站点定义为”对话框
2 进入“编辑文件，第2部分”面板，选择“否，我不想使用服务器技术”单选按钮，如图1-3所示。单击“下一步”按钮，进入下一个面板。
图1-3 “编辑文件，第2部分”面板
3 进入“编辑文件，第3部分”面板，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，并设置文件的保存路径，如图1-4所示。单击“下一步”按钮，进入下一个面板。
图1-4 “编辑文件，第3部分”面板
4 进入“共享文件”面板，在“您如何连接到远程服务器”下拉式选项栏内选择“无”选项，如图1-5所示。单击“下一步”按钮，进入下一个面板。
图1-5 “共享文件”面板
5 进入“总结”面板后，单击“完成”按钮，如图1-6所示，完成本地站点的设置。在“文件”面板中会显示创建站点的信息，如图1-7所示。
图1-6 “总结”面板
图1-7 “文件”面板
提示
本地站点的设置是非常重要的，在默认状态下，使用Dreamweaver CS3制作的所有网页和素材都将被保存在本地站点。如果路径设置错误或者相关文件夹被移动或删除，会导致网页错误。
2. 制作网页
1 将本书附带光盘的“咨询类网页/实例1：材质查询网页”文件夹拷贝到本地站点的路径。
提示
html使用的素材文件必须与网页文件在同一路径，否则网页将无法显示素材文件，所以首先需要将素材拷贝到本地站点的路径。
2 单击起始页面的HTML选项，如图1-8所示。创建一个新的HTML格式文件，将该文件保存在本地站点的路径。
图1-8 单击起始页面的HTML选项
3 在“常用”工具栏内单击
“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图1-9所示。单击“确定”按钮，退出该对话框。
图1-9 “表格”对话框
提示
表格用于网页的布局。表格由若干单元格组成，在单元格内可以设置文本或导入图像，在设置表格时，首先需要计划好网页的基本布局，以便能够正确设置单元格数目。
4 退出“表格”对话框后，在文档窗口中会出现一个表格，如图1-10所示。
图1-10 插入表格
5 单击表格内的单元格，在“常用”工具栏内单击
“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例1：材质查询网页”文件夹内的“版头.gif”文件，如图1-11所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图1-11 “选择图像源文件”对话框
6 退出“选择图像源文件”对话框后，会打开“图像标签辅助功能属性”对话框，如图1-12所示。使用默认设置，单击“确定”按钮，退出该对话框，将图像导入到单元格。
图1-12 “图像标签辅助功能属性”对话框
7 图像导入后的效果如图1-13所示。
图1-13 导入“版头”图像
8 将光标定位在表格底部，在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入2，在“列数”参数栏内键入5，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，如图1-14所示。单击“确定”按钮，退出该对话框。
图1-14 “表格”对话框
9 退出“表格”对话框后，在文档窗口会插入如图1-15所示的表格。
图1-15 插入表格
10 在第1行第1列的单元格内单击，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例1：材质查询网页”文件夹内的“木材02.jpg”文件，如图1-16所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图1-16 “选择图像源文件”对话框
11 选择导入后的图像，在“属性”面板内激活
“居中对齐”按钮，使其居中对齐，如图1-17所示。
图1-17 对齐图像
12 使用同样的方法，在第1行第2列单元格内导入“实例1：材质查询网页”文件夹内的“皮革02.jpg”文件；在第1行第3列单元格内导入“实例1：材质查询网页”文件夹内的“肌理02.jpg”文件；在第1行第4列单元格内导入“实例1：材质查询网页”文件夹内的“石材02.jpg”文件；在第1行第5列单元格内导入“实例1：材质查询网页”文件夹内的“布艺02.jpg”文件；均使其居中对齐，效果如图1-18所示。
图1-18 导入其他图像
13 设置图像的超链接。单击“木材02.jpg”图像，在“属性”面板中单击“链接”文本框右侧的
“浏览”按钮，打开“选择文件”对话框。从该对话框内选择拷贝的“实例1：材质查询网页”文件夹内的“木材.jpg”文件，如图1-19所示。
图1-19 “选择文件”对话框
提示
超链接是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置；还可以是一张图片，一个电子邮件地址，一个文件，甚至是一个应用程序；而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。设置超链接的属性后，单击源对象，可以打开超链接内容。
14 使用同样的方法设置其他图像相应的超链接。
15 选择第2行第1列的单元格，在“属性”面板内的“大小”参数栏内键入20，设置“文本颜色”显示窗内的颜色为黑色，激活“居中对齐”按钮，如图1-20所示。
图1-20 “属性”面板
16 在所选单元格内键入“木材”，如图1-21所示。
图1-21 键入文本
17 使用同样的设置，在第2行第2列单元格内键入“皮革”，在第2行第3列单元格内键入“肌理”，在第2行第4列单元格内键入“石材”，在第2行第5列单元格内键入“布艺”，如图1-22所示。
图1-22 输入其他文本
18 将光标定位在表格外侧，在“常用”工具栏内单击“表格”按钮，打开“表格”对话框。在“行数”参数栏内键入1，在“列数”参数栏内键入1，在“表格宽度”参数栏内键入1024，在“边框粗细”、“单元格边距”、“单元格间距”参数栏内均键入0，单击“确定”按钮，退出该对话框，在文档窗口会插入一个表格。
19 在刚刚插入表格的单元格内单击，在“常用”工具栏内单击“图像”按钮，打开“选择图像源文件”对话框。从该对话框内选择拷贝的“实例1：材质查询网页”文件夹内的“底部.gif”文件，如图1-23 所示。单击“确定”按钮，退出“选择图像源文件”对话框。
图1-23 “选择图像源文件”对话框
20 导入图像后的效果如图1-24所示。
图1-24 导入“底部”图像
21 在菜单栏执行“文件”/“保存”命令，将该网页保存，本实例就全部设置完毕了。打开本实例制作的html文件，单击材质图片，可以打开相应的图像，图1-25所示为网页设置完成后的效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘的“咨询类网页/实例1：材质查询网页/材质查询网页.html”文件，该文件为本实例设置完成后的文件。
图1-25 材质查询网页