Cha17项目指导——制作家居网页

1、第第1717章章 项目指导项目指导制作制作家居网页家居网页（时间：（时间：2次课，次课，4学时）学时） 近几年随着房地产业的迅猛发展，与之相关的家居近几年随着房地产业的迅猛发展，与之相关的家居产业也发展繁荣，各大家居类企业几乎都有自己的网站，产业也发展繁荣，各大家居类企业几乎都有自己的网站，所以家居网站也随之增多，本章将通过对家居网页的制作所以家居网站也随之增多，本章将通过对家居网页的制作来讲解来讲解DreamwaverDreamwaver CC CC的使用，网页制作完成后的效果，的使用，网页制作完成后的效果，如图如图17.117.1所示。所示。 第第1717章章 项目指导项目指导制作制作家居

2、网页家居网页图图17.1 17.1 完成后的效果完成后的效果第第1717章章 项目指导项目指导制作制作家居网页家居网页n17.1 17.1 制作网页页面制作网页页面n17.2 17.2 为网页添加链接和行为为网页添加链接和行为17.1 17.1 制作网页页面制作网页页面 首先介绍网页页面的制作方法。首先介绍网页页面的制作方法。(1) (1) 打开打开Dreamweaver CCDreamweaver CC软件，执行【文件】软件，执行【文件】| |【新建】命令，打开【新建文档】窗【新建】命令，打开【新建文档】窗口。在【新建文档】窗口中，选择【空白页】，将【页面类型】选择为【口。在【新建文档】窗口

3、中，选择【空白页】，将【页面类型】选择为【HTMLHTML】，】，【布局】选择为【无】，如图【布局】选择为【无】，如图17.217.2所示。所示。(2) (2) 单击【创建】按钮即可创建一个单击【创建】按钮即可创建一个HTMLHTML空白网页，如图空白网页，如图17.317.3所示。所示。 图图17.3 17.3 创建一个创建一个HTMLHTML空白网页空白网页图图17.2 17.2 【新建文档】窗口【新建文档】窗口17.1 17.1 制作网页页面制作网页页面(3) (3) 在菜单栏中选择【插入】在菜单栏中选择【插入】| |【表格】命令，如图【表格】命令，如图17.417.4所示。所示。(4)

4、 (4) 在弹出的【表格】对话框中，将【行数】设置为在弹出的【表格】对话框中，将【行数】设置为3 3，【列】设置为，【列】设置为1 1，【表格】，【表格】宽度设置为宽度设置为10001000像素，【单元格间距】设置为像素，【单元格间距】设置为3 3，【标题】设置为无，如图，【标题】设置为无，如图17.517.5所示。所示。图图17.5 17.5 【表格】对话框【表格】对话框图图17.4 17.4 选择【表格】命令选择【表格】命令17.1 17.1 制作网页页面制作网页页面(5) (5) 单击【确定】按钮，网页中将创建一个单击【确定】按钮，网页中将创建一个3 3行行1 1列的表格，如图列的表格，

5、如图17.617.6所示。所示。(6) (6) 将鼠标光标插入到第将鼠标光标插入到第1 1行单元格中，鼠标右键单击，在弹出的快捷菜单中，选择行单元格中，鼠标右键单击，在弹出的快捷菜单中，选择【表格】【表格】| |【拆分单元格】命令，如图【拆分单元格】命令，如图17.717.7所示。所示。 图图17.7 17.7 选择【拆分单元格】命令选择【拆分单元格】命令图图17.6 17.6 创建表格创建表格17.1 17.1 制作网页页面制作网页页面(7) (7) 在弹出的【拆分单元格】对话框中，将【把单元格拆分】设置为行，【行数】在弹出的【拆分单元格】对话框中，将【把单元格拆分】设置为行，【行数】设置为

6、设置为2 2，如图，如图17.817.8所示。所示。(8) (8) 单击【确定】按钮，第单击【确定】按钮，第1 1行表格将拆分成两行，如图行表格将拆分成两行，如图17.917.9所示。所示。图图17.9 17.9 拆分单元格拆分单元格图图17.8 17.8 【拆分单元格】对话框【拆分单元格】对话框17.1 17.1 制作网页页面制作网页页面(9) (9) 将鼠标光标插入到第将鼠标光标插入到第1 1行单元格中，在菜单栏中选择【插入】行单元格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图像】【图像】命令，如图命令，如图17.1017.10所示。所示。(10) (10) 选择随书附带光盘

7、中的选择随书附带光盘中的CDROMCDROM素材素材Cha17 001.jpgCha17 001.jpg图片，如图图片，如图17.1117.11所示。所示。图图17.11 17.11 选择图片选择图片图图17.10 17.10 选择【图像】命令选择【图像】命令17.1 17.1 制作网页页面制作网页页面(11) (11) 单击【确定】按钮，在【属性】面板中，将【宽】设置为单击【确定】按钮，在【属性】面板中，将【宽】设置为10001000，然后单击【切，然后单击【切换尺寸约束】换尺寸约束】 按钮，调整图片的宽度，如图按钮，调整图片的宽度，如图17.1217.12所示。所示。(12) (12) 将

8、鼠标光标插入到第将鼠标光标插入到第2 2行单元格中，在菜单栏中选择【插入】行单元格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图【图像】命令，选择随书附带光盘中的像】命令，选择随书附带光盘中的CDROMCDROM素材素材Cha17Cha17导航栏导航栏.jpg.jpg图片，如图图片，如图17.1317.13所示。所示。 图图17.13 17.13 选择图片选择图片图图17.12 17.12 调整图片的宽度调整图片的宽度17.1 17.1 制作网页页面制作网页页面(13) (13) 单击【确定】按钮，在【属性】面板中，将【宽】设置为单击【确定】按钮，在【属性】面板中，将【宽】设置为1

9、0001000，调整图片的宽，调整图片的宽度，如图度，如图17.1417.14所示。所示。(14) (14) 将鼠标光标插入到第将鼠标光标插入到第3 3行单元格中，在菜单栏中选择【插入】行单元格中，在菜单栏中选择【插入】| |【表格】命令。【表格】命令。在弹出的【表格】对话框中，将【行数】设置为在弹出的【表格】对话框中，将【行数】设置为4 4，【列】设置为，【列】设置为1 1，【表格】宽，【表格】宽度设置为度设置为10001000像素，【单元格间距】设置为像素，【单元格间距】设置为3 3，【标题】设置为无，如图，【标题】设置为无，如图17.1517.15所所示。示。图图17.15 17.15

10、【表格】对话框【表格】对话框图图17.14 17.14 调整图片的宽度调整图片的宽度17.1 17.1 制作网页页面制作网页页面(15) (15) 单击【确定】按钮，插入单击【确定】按钮，插入4 4行行1 1列的表格，如图列的表格，如图17.1617.16所示。所示。(16) (16) 将鼠标光标插入到第将鼠标光标插入到第3 3行单元格中，然后单击【属性】面板中的【拆分单元格行单元格中，然后单击【属性】面板中的【拆分单元格为行或列】为行或列】 按钮，拆分单元格，如图按钮，拆分单元格，如图17.1717.17所示。所示。 图图17.17 17.17 拆分单元格拆分单元格图图17.16 17.16

11、 插入表格插入表格17.1 17.1 制作网页页面制作网页页面(17) (17) 在弹出的【拆分单元格】对话框中，将【把单元格拆分】设置为行，【行数】在弹出的【拆分单元格】对话框中，将【把单元格拆分】设置为行，【行数】设置为设置为2 2，单击【确定】按钮，表格将拆分成两行，如图，单击【确定】按钮，表格将拆分成两行，如图17.1817.18所示。所示。(18) (18) 将鼠标光标插入到第将鼠标光标插入到第3 3行单元格中，在菜单栏中选择【插入】行单元格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图【图像】命令，选择随书附带光盘中的像】命令，选择随书附带光盘中的CDROMCDROM素

12、材素材Cha17A01.jpgCha17A01.jpg图片，如图图片，如图17.1317.13所示所示图图17.19 17.19 选择图片选择图片图图17.18 17.18 表格将拆分成两行表格将拆分成两行17.1 17.1 制作网页页面制作网页页面(19) (19) 单击【确定】按钮，在【属性】面板中，将【宽】设置为单击【确定】按钮，在【属性】面板中，将【宽】设置为135135，如图，如图17.2017.20所示。所示。(20) (20) 将鼠标光标插入到下一行表格，在菜单栏中选择【插入】将鼠标光标插入到下一行表格，在菜单栏中选择【插入】| |【DivDiv】命令，如图】命令，如图17.21

13、17.21所示。所示。图图17.21 17.21 选择【选择【DivDiv】命令】命令图图17.20 17.20 设置【宽设置【宽】17.1 17.1 制作网页页面制作网页页面(21) (21) 在弹出的【插入在弹出的【插入DivDiv】对话框中，将【】对话框中，将【IDID】设置为】设置为D1D1，如图，如图17.2217.22所示。所示。(22) (22) 单击【确定】按钮，插入单击【确定】按钮，插入DivDiv，如图，如图17.2317.23所示。所示。图图17.23 17.23 插入插入DivDiv图图17.22 17.22 【插入【插入DivDiv】对话框】对话框17.1 17.1

14、制作网页页面制作网页页面(23) (23) 将将DivDiv中的文字删除，然后选择【插入】中的文字删除，然后选择【插入】| |【表格】命令，在弹出的【表格】对【表格】命令，在弹出的【表格】对话框中，将【行数】设置为话框中，将【行数】设置为2 2，【列】设置为，【列】设置为5 5，【表格】宽度设置为，【表格】宽度设置为10001000像素，像素，【单元格间距】设置为【单元格间距】设置为0 0，【标题】设置为无，如图，【标题】设置为无，如图17.2417.24所示。所示。(24) (24) 单击【确定】按钮，在单击【确定】按钮，在DivDiv中插入中插入2 2行行5 5列的表格，如图列的表格，如图

15、17.2517.25所示。所示。 图图17.25 17.25 插入表格插入表格图图17.24 17.24 【表格】对话框【表格】对话框17.1 17.1 制作网页页面制作网页页面(25) (25) 将鼠标光标插入到将鼠标光标插入到DivDiv的第的第1 1行第行第1 1列表格中，在菜单栏中选择【插入】列表格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图像】命令，选择随书附带光盘中的【图像】命令，选择随书附带光盘中的CDROMCDROM素材素材Cha17Cha17餐桌椅餐桌椅01.jpg01.jpg图片，图片，如图如图17.2617.26所示。所示。(26) (26) 单击【确定】按

16、钮，然后在【属性】面板中，将【宽】设置为单击【确定】按钮，然后在【属性】面板中，将【宽】设置为200200，如图，如图17.2717.27所示。所示。 图图17.27 17.27 设置【宽设置【宽】图图17.26 17.26 选择图片选择图片17.1 17.1 制作网页页面制作网页页面(27) (27) 调整调整DivDiv表格中的列宽，将其与图片对齐，如图表格中的列宽，将其与图片对齐，如图17.2817.28所示。所示。(28) (28) 在在DivDiv表格中的第表格中的第2 2行第行第1 1列中，输入文本列中，输入文本“餐桌椅餐桌椅”，然后将其居中，如图，然后将其居中，如图17.2917

17、.29所示。所示。 图图17.29 17.29 输入文本输入文本图图17.28 17.28 调整列宽调整列宽17.1 17.1 制作网页页面制作网页页面(29) (29) 使用相同的方法，在使用相同的方法，在DivDiv表格中插入其它图片并输入相应的文本，完成后的效表格中插入其它图片并输入相应的文本，完成后的效果如图果如图17.3017.30所示。所示。(30) (30) 将鼠标插入到下一行空白表格中，将其拆分成两行，如图将鼠标插入到下一行空白表格中，将其拆分成两行，如图17.3117.31所示。所示。 图图17.31 17.31 拆分表格拆分表格图图17.30 17.30 插入其它图片并输入

18、相应的文本插入其它图片并输入相应的文本17.1 17.1 制作网页页面制作网页页面(31) (31) 将鼠标插入到拆分的第将鼠标插入到拆分的第1 1行表格中，在菜单栏中选择【插入】行表格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图【图像】命令，选择随书附带光盘中的像】命令，选择随书附带光盘中的CDROMCDROM素材素材Cha17A02.jpgCha17A02.jpg图片，如图图片，如图17.3217.32所示所示(32) (32) 单击【确定】按钮，在【属性】面板中将【宽】设置为单击【确定】按钮，在【属性】面板中将【宽】设置为135135，如图，如图17.3317.33所示。所

19、示。图图17.33 17.33 设置【宽设置【宽】图图17.32 17.32 选择图片选择图片17.1 17.1 制作网页页面制作网页页面(33) (33) 将鼠标光标插入到下一行单元格中，在菜单栏中选择【插入】将鼠标光标插入到下一行单元格中，在菜单栏中选择【插入】| |【DivDiv】命令，】命令，在弹出的【插入在弹出的【插入DivDiv】对话框中，将【】对话框中，将【IDID】设置为】设置为D2D2，如图，如图17.3417.34所示。所示。(34) (34) 单击【确定】按钮，插入单击【确定】按钮，插入DivDiv，如图，如图17.3517.35所示所示图图17.35 17.35 插入插

20、入DivDiv图图17.34 17.34 【插入【插入DivDiv】对话框】对话框17.1 17.1 制作网页页面制作网页页面(35) (35) 将将DivDiv中的文字删除，然后然后选择【插入】中的文字删除，然后然后选择【插入】| |【表格】命令，在弹出的【表格】【表格】命令，在弹出的【表格】对话框中，将【行数】设置为对话框中，将【行数】设置为3 3，【列】设置为，【列】设置为3 3，如图，如图17.3617.36所示所示(36) (36) 单击【确定】按钮，在单击【确定】按钮，在DivDiv中插入中插入3 3行行3 3列的表格，如图列的表格，如图17.3717.37所示所示图图17.37

21、17.37 插入表格插入表格图图17.36 17.36 【表格】对话框【表格】对话框17.1 17.1 制作网页页面制作网页页面(37) (37) 将鼠标光标插入到进插入的第将鼠标光标插入到进插入的第1 1行第行第1 1列表格中，在菜单栏中选择【插入】列表格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图像】命令，选择随书附带光盘中的【图像】命令，选择随书附带光盘中的CDROMCDROM素材素材Cha171.jpgCha171.jpg图片，图片，如图如图17.3817.38所示。所示。(38) (38) 单击【确定】按钮，在【属性】面板中，将【高】设置为单击【确定】按钮，在【属性】面

22、板中，将【高】设置为250250，如图，如图17.3917.39所示。所示。图图17.39 17.39 设置【高设置【高】图图17.38 17.38 选择图片选择图片17.1 17.1 制作网页页面制作网页页面(39) (39) 将光标定位在第将光标定位在第1 1行第行第1 1列单元格中，在【属性】面板中，将【宽度】设置为列单元格中，在【属性】面板中，将【宽度】设置为333333，然后单击【居中对齐】，然后单击【居中对齐】 按钮，如图按钮，如图17.4017.40所示。所示。(40) (40) 使用相同的方法将其它图片插入到表格中，其中，第使用相同的方法将其它图片插入到表格中，其中，第2 2、

23、3 3行图片的高设置行图片的高设置225225，完成后的效果如图完成后的效果如图17.4117.41所示。所示。 图图17.41 17.41 插入图片插入图片图图17.40 17.40 【属性】面板【属性】面板17.1 17.1 制作网页页面制作网页页面(41) (41) 将鼠标光标插入到下一行表格中，将其拆分为两行，如图将鼠标光标插入到下一行表格中，将其拆分为两行，如图17.4217.42所示。所示。(42) (42) 将鼠标光标插入到拆分后的第将鼠标光标插入到拆分后的第1 1行表格中，在菜单栏中选择【插入】行表格中，在菜单栏中选择【插入】| |【图像】【图像】| |【图像】命令，选择随书附

24、带光盘中的【图像】命令，选择随书附带光盘中的CDROMCDROM素材素材Cha17A03.jpgCha17A03.jpg图片，如图图片，如图17.4317.43所示。所示。图图17.43 17.43 选择图片选择图片图图17.42 17.42 拆分表格拆分表格17.1 17.1 制作网页页面制作网页页面(43) (43) 单击【确定】按钮，在【属性】面板中将【宽】设置为单击【确定】按钮，在【属性】面板中将【宽】设置为135135，如图，如图17.4417.44所示。所示。(44) (44) 将鼠标光标插入到下一行表格中，在菜单栏中选择【插入】将鼠标光标插入到下一行表格中，在菜单栏中选择【插入】

25、| |【DivDiv】命令，在】命令，在弹出的【插入弹出的【插入DivDiv】对话框中，将【】对话框中，将【IDID】设置为】设置为D3D3，如图，如图17.4517.45所示所示 图图17.45 17.45 【插入【插入DivDiv】对话框】对话框图图17.44 17.44 设置【宽设置【宽】17.1 17.1 制作网页页面制作网页页面(45) (45) 打开随书附带光盘中的打开随书附带光盘中的CDROMCDROM素材素材Cha17Cha17售后服务条例售后服务条例.doc.doc文档，将其文本文档，将其文本复制到新插入的复制到新插入的DivDiv中，如图中，如图17.4617.46所示。所

26、示。(46) (46) 将鼠标光标插入到下一行表格中将其拆分成将鼠标光标插入到下一行表格中将其拆分成2 2行行2 2列的表格，如图列的表格，如图17.4717.47所示。所示。 图图17.47 17.47 拆分表格拆分表格图图17.46 17.46 复制文本复制文本17.1 17.1 制作网页页面制作网页页面(47) (47) 参照前面的操作步骤，在第一行表格中分别插入随书附带光盘中的参照前面的操作步骤，在第一行表格中分别插入随书附带光盘中的CDROMCDROM素材素材Cha17A04.jpgCha17A04.jpg和和A5.jpgA5.jpg图片，并调整其宽，如图图片，并调整其宽，如图17.

27、4817.48所示。所示。(48) (48) 将鼠标光标插入到下一行表格的第一列中，打开随书附带光盘中的将鼠标光标插入到下一行表格的第一列中，打开随书附带光盘中的CDROMCDROM素材素材Cha17Cha17联系方式联系方式.doc.doc文档，将其文本复制到新插入的文档，将其文本复制到新插入的DivDiv中，如图中，如图17.4917.49所示。所示。图图17.49 17.49 复制文本复制文本图图17.48 17.48 插入图片插入图片17.1 17.1 制作网页页面制作网页页面(49) (49) 将鼠标光标插入到表格的第将鼠标光标插入到表格的第2 2列中，在【属性】面板中，将【垂直】设

28、置为顶列中，在【属性】面板中，将【垂直】设置为顶端，如图端，如图17.5017.50所示。所示。(50) (50) 在菜单栏中选择【插入】在菜单栏中选择【插入】| |【表单】【表单】| |【表单】命令，在表格中插入表单，如图【表单】命令，在表格中插入表单，如图17.5117.51所示。所示。图图17.51 17.51 插入表单插入表单图图17.50 17.50 【属性】面板【属性】面板17.1 17.1 制作网页页面制作网页页面(51) (51) 参照前面的操作步骤，在表单中插入参照前面的操作步骤，在表单中插入5 5行行1 1列的表格，其宽度设置为列的表格，其宽度设置为500500，单元，单元

29、格间距为格间距为3 3，如图，如图17.5217.52所示所示(52) (52) 在表单中的表格里，分别插入【文本】、【电子邮件】、【在表单中的表格里，分别插入【文本】、【电子邮件】、【TelTel】、【文本区】、【文本区域】、【域】、【“提交提交”按钮】和【按钮】和【“重置重置”按钮】，然后对插入的表单元素的文本进按钮】，然后对插入的表单元素的文本进行修改并将文本区域的文本行数设置为行修改并将文本区域的文本行数设置为5 5，如图，如图17.5317.53所示。所示。图图17.53 17.53 插入表单元素插入表单元素图图17.52 17.52 插入表格插入表格17.1 17.1 制作网页页面

30、制作网页页面(53) (53) 将鼠标光标插入到表格的最后一行中，输入相应的链接和版权文本，并将其居将鼠标光标插入到表格的最后一行中，输入相应的链接和版权文本，并将其居中对齐，如图中对齐，如图17.5417.54所示。所示。(54) (54) 在【属性】面板中，将文字颜色设置为白色，单元格的背景颜色设置为黑色，在【属性】面板中，将文字颜色设置为白色，单元格的背景颜色设置为黑色，如图如图17.5517.55所示。所示。图图17.55 17.55 【属性】面板【属性】面板图图17.54 17.54 输入文本输入文本17.2 17.2 为网页添加链接和行为为网页添加链接和行为 网页页面制作完成后，下面介绍为网页添加链接和行为的操作步骤。网页页面制作完成后，下面介绍为网页添加链接和行为的操作步骤。(1) (1) 选择导航栏图片，在【属性】面板中使用【选择导航栏图片，在【属性】面板中使用【Rectangle Hotspot ToolRectangle Hotspot Tool】 按钮，按钮，为导航栏图片中的导航文字添加矩形热点，如图为导航栏图片中的导航文字添加矩形热点，如图17.5617.56所示。