DW电子教案第三章.pptx

《DW电子教案第三章.pptx》由会员分享，可在线阅读，更多相关《DW电子教案第三章.pptx（15页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第三章第三章企业产品介绍页面的实现企业产品介绍页面的实现2021/9/122021/9/121 1教学目标教学目标l l 掌握在网页中建立各种超链接的方法掌握在网页中建立各种超链接的方法掌握在网页中建立各种超链接的方法掌握在网页中建立各种超链接的方法l l l l 掌掌掌掌握握握握框框框框架架架架的的的的基基基基础础础础知知知知识识识识，创创创创建建建建各各各各种种种种类类类类型型型型的的的的框框框框架架架架集并能根据需要修改框架集并能根据需要修改框架集并能根据需要修改框架集并能根据需要修改框架l l l l 掌掌掌掌握握握握层层层层的的的的建建建建立立立立与与与与设设设设置置置置，掌掌掌掌握

2、握握握层层层层在在在在排排排排版版版版中中中中的的的的应应应应用用用用l l l l 理理理理解解解解模模模模板板板板对对对对于于于于网网网网站站站站建建建建设设设设的的的的重重重重要要要要性性性性，掌掌掌掌握握握握创创创创建建建建和和和和修改模板的方法，能够使用模板更新页面修改模板的方法，能够使用模板更新页面修改模板的方法，能够使用模板更新页面修改模板的方法，能够使用模板更新页面l l l l 掌握建立和应用库项目的方法掌握建立和应用库项目的方法掌握建立和应用库项目的方法掌握建立和应用库项目的方法2021/9/122021/9/122 2企业产品页面实例 2021/9/122021/9/12

3、3 3将现有文档保存为模板将现有文档保存为模板 打开上章实例二中制作的打开上章实例二中制作的打开上章实例二中制作的打开上章实例二中制作的“intro.htm”“intro.htm”“intro.htm”“intro.htm”，将其，将其，将其，将其中公司简介部分内容删除，效果如图所示，再将其保中公司简介部分内容删除，效果如图所示，再将其保中公司简介部分内容删除，效果如图所示，再将其保中公司简介部分内容删除，效果如图所示，再将其保存为模板应执行以下操作：单击存为模板应执行以下操作：单击存为模板应执行以下操作：单击存为模板应执行以下操作：单击“文件文件文件文件”菜单中的菜单中的菜单中的菜单中的“另

4、存为模板另存为模板另存为模板另存为模板”命令，在命令，在命令，在命令，在“另存为另存为另存为另存为”域中为该模板输域中为该模板输域中为该模板输域中为该模板输入名称入名称入名称入名称“模板模板模板模板1”1”1”1”2021/9/122021/9/124 4插入可编辑区域插入可编辑区域 定义模板后，就要指定模板的哪个部分可编辑，以便定义模板后，就要指定模板的哪个部分可编辑，以便定义模板后，就要指定模板的哪个部分可编辑，以便定义模板后，就要指定模板的哪个部分可编辑，以便在其中添加内容，因为默认情况下，整个模板处于锁定在其中添加内容，因为默认情况下，整个模板处于锁定在其中添加内容，因为默认情况下，整

5、个模板处于锁定在其中添加内容，因为默认情况下，整个模板处于锁定状态。可编辑模板区域指在创建基于模板的页面时，模状态。可编辑模板区域指在创建基于模板的页面时，模状态。可编辑模板区域指在创建基于模板的页面时，模状态。可编辑模板区域指在创建基于模板的页面时，模板使用者可以编辑哪些区域。板使用者可以编辑哪些区域。板使用者可以编辑哪些区域。板使用者可以编辑哪些区域。1.1.在在在在“文档文档文档文档”窗口中，选择右侧空白单元格中的上面的一窗口中，选择右侧空白单元格中的上面的一窗口中，选择右侧空白单元格中的上面的一窗口中，选择右侧空白单元格中的上面的一个。个。个。个。2.2.单击单击单击单击“插入插入插入

6、插入”菜单中的菜单中的菜单中的菜单中的“模板对象模板对象模板对象模板对象”命令，选择命令，选择命令，选择命令，选择“可编可编可编可编辑区域辑区域辑区域辑区域”命令，打开命令，打开命令，打开命令，打开“新建可编辑区域新建可编辑区域新建可编辑区域新建可编辑区域”对话框。对话框。对话框。对话框。3.3.在在在在“名称名称名称名称”文本框中为该区域输入唯一的名称，文本框中为该区域输入唯一的名称，文本框中为该区域输入唯一的名称，文本框中为该区域输入唯一的名称，“EditRegion1”“EditRegion1”“EditRegion1”“EditRegion1”，注意不要在，注意不要在，注意不要在，注意

7、不要在“名称名称名称名称”文本框中使用特文本框中使用特文本框中使用特文本框中使用特殊字符殊字符殊字符殊字符。2021/9/122021/9/125 5基于模板创建新的文档基于模板创建新的文档 1.1.在在在在“新建文档新建文档新建文档新建文档”对话框中选择对话框中选择对话框中选择对话框中选择“模板模板模板模板”选项卡，在选项卡，在选项卡，在选项卡，在左侧的左侧的左侧的左侧的“模板用于模板用于模板用于模板用于”列表中选择列表中选择列表中选择列表中选择“沈阳电缆厂石家沈阳电缆厂石家沈阳电缆厂石家沈阳电缆厂石家庄销售处庄销售处庄销售处庄销售处”站点。站点。站点。站点。2.2.从中间的模板列表中选择从

8、中间的模板列表中选择从中间的模板列表中选择从中间的模板列表中选择“模板模板模板模板1”1”1”1”，右侧的，右侧的，右侧的，右侧的“预览预览预览预览”窗口中将显示该模板。窗口中将显示该模板。窗口中将显示该模板。窗口中将显示该模板。3.3.选中选中选中选中“当模板改变时更新页面当模板改变时更新页面当模板改变时更新页面当模板改变时更新页面”复选框，如果不希复选框，如果不希复选框，如果不希复选框，如果不希望在每次更改模板后望在每次更改模板后望在每次更改模板后望在每次更改模板后 Dreamweaver Dreamweaver Dreamweaver Dreamweaver 都更新基于该模都更新基于该模

9、都更新基于该模都更新基于该模板的页面，可取消选择板的页面，可取消选择板的页面，可取消选择板的页面，可取消选择“当模板改变时更新页面当模板改变时更新页面当模板改变时更新页面当模板改变时更新页面”复选框，那样该文档将不再以模板文件复选框，那样该文档将不再以模板文件复选框，那样该文档将不再以模板文件复选框，那样该文档将不再以模板文件“.dwt”“.dwt”“.dwt”“.dwt”形形形形式存在，而是成为一个独立的式存在，而是成为一个独立的式存在，而是成为一个独立的式存在，而是成为一个独立的 HTML HTML HTML HTML文档。文档。文档。文档。2021/9/122021/9/126 6基于模

10、板创建新的文档基于模板创建新的文档4.单击单击单击单击“创建创建创建创建”按钮，按钮，按钮，按钮，基于选定模板的新文档基于选定模板的新文档基于选定模板的新文档基于选定模板的新文档出现在出现在出现在出现在“文档文档文档文档”窗口中，如图所示。窗口中，如图所示。窗口中，如图所示。窗口中，如图所示。2021/9/122021/9/127 7添加产品介绍页面的内容添加产品介绍页面的内容 1 1 1 1、将新建文档保存为、将新建文档保存为、将新建文档保存为、将新建文档保存为“chanpin.htm”chanpin.htm”chanpin.htm”chanpin.htm”，在第一，在第一，在第一，在第一个

11、可编辑区域中插入个可编辑区域中插入个可编辑区域中插入个可编辑区域中插入“a2.gif”a2.gif”a2.gif”a2.gif”，在第二行，在第二行，在第二行，在第二行的可编辑区域中插入一个的可编辑区域中插入一个的可编辑区域中插入一个的可编辑区域中插入一个8 8 8 8行行行行2 2 2 2列，列，列，列，“宽度宽度宽度宽度”为为为为“500”“500”“500”“500”，边框为，边框为，边框为，边框为“0”“0”“0”“0”的表格，并在属性的表格，并在属性的表格，并在属性的表格，并在属性面板中设置其水平居中对齐，设置各单元格面板中设置其水平居中对齐，设置各单元格面板中设置其水平居中对齐，设

12、置各单元格面板中设置其水平居中对齐，设置各单元格高度为高度为高度为高度为30303030。2021/9/122021/9/128 8添加产品介绍页面的内容添加产品介绍页面的内容 2 2、合并新建表格第二列的合并新建表格第二列的合并新建表格第二列的合并新建表格第二列的8 8 8 8行单元格，并在左边的行单元格，并在左边的行单元格，并在左边的行单元格，并在左边的8 8 8 8行中行中行中行中分别输入各种产品名称，（分别输入各种产品名称，（分别输入各种产品名称，（分别输入各种产品名称，（6-110kV6-110kV6-110kV6-110kV交联聚乙烯绝缘交联聚乙烯绝缘交联聚乙烯绝缘交联聚乙烯绝缘电

13、力电缆、电力电缆、电力电缆、电力电缆、0.6/1KV0.6/1KV0.6/1KV0.6/1KV交联聚乙烯绝缘电力电缆、聚氯交联聚乙烯绝缘电力电缆、聚氯交联聚乙烯绝缘电力电缆、聚氯交联聚乙烯绝缘电力电缆、聚氯乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、特控电缆），选中左边的特控电缆），

14、选中左边的特控电缆），选中左边的特控电缆），选中左边的8 8 8 8个单元格，应用在上一个个单元格，应用在上一个个单元格，应用在上一个个单元格，应用在上一个网页中创建的样式网页中创建的样式网页中创建的样式网页中创建的样式“.wen”“.wen”“.wen”“.wen”，并分别为每种产品的，并分别为每种产品的，并分别为每种产品的，并分别为每种产品的名称建立链接为名称建立链接为名称建立链接为名称建立链接为“chanpin1.htm”“chanpin1.htm”“chanpin1.htm”“chanpin1.htm”至至至至“chanpin8.htm”“chanpin8.htm”“chanpin8.

15、htm”“chanpin8.htm”2021/9/122021/9/129 9添加产品介绍页面的内容添加产品介绍页面的内容3 3 3 3、在新建表格的右单元格新建一个、在新建表格的右单元格新建一个、在新建表格的右单元格新建一个、在新建表格的右单元格新建一个2 2 2 2行行行行1 1 1 1列的表格，宽度列的表格，宽度列的表格，宽度列的表格，宽度为为为为“200“200“200“200像素像素像素像素”，边框线为，边框线为，边框线为，边框线为“0”“0”“0”“0”，水平居中。分别，水平居中。分别，水平居中。分别，水平居中。分别在两个单元格中插入图片在两个单元格中插入图片在两个单元格中插入图片

16、在两个单元格中插入图片“chanpin1.jpg”“chanpin1.jpg”“chanpin1.jpg”“chanpin1.jpg”和和和和“chanpin2.jpg”“chanpin2.jpg”“chanpin2.jpg”“chanpin2.jpg”，设计效果如图所示，设计效果如图所示，设计效果如图所示，设计效果如图所示 2021/9/122021/9/121010创建每一种产品的介绍页面创建每一种产品的介绍页面 2021/9/122021/9/1211111 1 1 1、先创建基于新建模板网页文档，并将其保存为、先创建基于新建模板网页文档，并将其保存为、先创建基于新建模板网页文档，并将其

17、保存为、先创建基于新建模板网页文档，并将其保存为“chanpin1.htm”“chanpin1.htm”“chanpin1.htm”“chanpin1.htm”文件，文件，文件，文件，在第一个可编辑区域中插入在第一个可编辑区域中插入在第一个可编辑区域中插入在第一个可编辑区域中插入“a2.gif”a2.gif”a2.gif”a2.gif”，在第二行的可编辑区域中插入一个宽度为，在第二行的可编辑区域中插入一个宽度为，在第二行的可编辑区域中插入一个宽度为，在第二行的可编辑区域中插入一个宽度为“600“600“600“600像素像素像素像素”，3 3 3 3行行行行1 1 1 1列，间距设列，间距设列

18、，间距设列，间距设“2”“2”“2”“2”，边框为，边框为，边框为，边框为“0”“0”“0”“0”的表的表的表的表格，使其水平居中。将第一行拆分成两列，再将第一行格，使其水平居中。将第一行拆分成两列，再将第一行格，使其水平居中。将第一行拆分成两列，再将第一行格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。右边单元格拆分成两行，如图所示。右边单元格拆分成两行，如图所示。右边单元格拆分成两行，如图所示。创建每一种产品的介绍页面创建每一种产品的介绍页面 2021/9/122021/9/1212122 2 2 2、将新建表格中第一行左边列的宽度设为、将新建表格中第一行左

19、边列的宽度设为、将新建表格中第一行左边列的宽度设为、将新建表格中第一行左边列的宽度设为“40%”“40%”“40%”“40%”，并，并，并，并在其中插入产品图片在其中插入产品图片在其中插入产品图片在其中插入产品图片“chanpin01.jpg”“chanpin01.jpg”“chanpin01.jpg”“chanpin01.jpg”，右边单元，右边单元，右边单元，右边单元格分别插入产品名称、编号及用途等内容。在第二行格分别插入产品名称、编号及用途等内容。在第二行格分别插入产品名称、编号及用途等内容。在第二行格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。插入产品其他信息。插入产

20、品其他信息。插入产品其他信息。3 3 3 3、在具体的产品介绍中还应有参数说明的表格，我们可、在具体的产品介绍中还应有参数说明的表格，我们可、在具体的产品介绍中还应有参数说明的表格，我们可、在具体的产品介绍中还应有参数说明的表格，我们可以根据具体情况插入表格，比如在第二行表格中插入以根据具体情况插入表格，比如在第二行表格中插入以根据具体情况插入表格，比如在第二行表格中插入以根据具体情况插入表格，比如在第二行表格中插入一个新的表格，并将表格的宽度应设为一个新的表格，并将表格的宽度应设为一个新的表格，并将表格的宽度应设为一个新的表格，并将表格的宽度应设为“600“600“600“600像素像素像素

21、像素”，边框可设为，边框可设为，边框可设为，边框可设为“1”“1”“1”“1”，可将表头和表体设为不同的颜，可将表头和表体设为不同的颜，可将表头和表体设为不同的颜，可将表头和表体设为不同的颜色以示区别，如表头可设为色以示区别，如表头可设为色以示区别，如表头可设为色以示区别，如表头可设为“#80BFDB”“#80BFDB”“#80BFDB”“#80BFDB”色；表体可色；表体可色；表体可色；表体可设为设为设为设为“#FFFFEE”“#FFFFEE”“#FFFFEE”“#FFFFEE”色，设计效果如图所示。色，设计效果如图所示。色，设计效果如图所示。色，设计效果如图所示。创建每一种产品的介绍页面创

22、建每一种产品的介绍页面 2021/9/122021/9/1213134.4.在下面再插入一个表格，表头设为在下面再插入一个表格，表头设为“#99CCCC”“#99CCCC”色，；表体可设为色，；表体可设为“#FFFFEE”“#FFFFEE”色，色，输入相应的文字。输入相应的文字。创建每一种产品的介绍页面创建每一种产品的介绍页面 2021/9/122021/9/1214145 5 5 5、由于页面内容过多，页面过长，应在页尾加一、由于页面内容过多，页面过长，应在页尾加一、由于页面内容过多，页面过长，应在页尾加一、由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，即在第一个可编辑区域中个返

23、回页首的链接，即在第一个可编辑区域中个返回页首的链接，即在第一个可编辑区域中个返回页首的链接，即在第一个可编辑区域中插入一个名为插入一个名为插入一个名为插入一个名为“top”“top”“top”“top”的锚点，在第三行表格的锚点，在第三行表格的锚点，在第三行表格的锚点，在第三行表格中插入图片中插入图片中插入图片中插入图片“top.htm”“top.htm”“top.htm”“top.htm”，选中新插入的图片，选中新插入的图片，选中新插入的图片，选中新插入的图片后，在图片的属性面板中的后，在图片的属性面板中的后，在图片的属性面板中的后，在图片的属性面板中的“链接链接链接链接”文本框中文本框中文本框中文本框中输入输入输入输入“#top”“#top”“#top”“#top”。创建每一种产品的介绍页面创建每一种产品的介绍页面 2021/9/122021/9/121515