网页制作电子教案系列第三章课件.ppt

《网页制作电子教案系列第三章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第三章企业产品介绍页面的实现教学目标l掌握在网页中建立各种超链接的方法l掌握框架的基础知识，创建各种类型的框架集并能根据需要修改框架l掌握层的建立与设置，掌握层在排版中的应用l理解模板对于网站建设的重要性，掌握创建和修改模板的方法，能够使用模板更新页面l掌握建立和应用库项目的方法企业产品页面实例将现有文档保存为模板打开上章实例二中制作的“intro.htm”，将其中公司简介部分内容删除，效果如图所示，再将其保存为模板应执行以下操作：单击“文件”菜单中的“另存为模板”命令，在“另存为”域中为该模板输入名称“模板1”插入可编辑区域定义模板后，就要指定模板的哪个部

2、分可编辑，以便在其中添加内容，因为默认情况下，整个模板处于锁定状态。可编辑模板区域指在创建基于模板的页面时，模板使用者可以编辑哪些区域。在“文档”窗口中，选择右侧空白单元格中的上面的一个。单击“插入”菜单中的“模板对象”命令，选择“可编辑区域”命令，打开“新建可编辑区域”对话框。在“名称”文本框中为该区域输入唯一的名称，“EditRegion1”，注意不要在“名称”文本框中使用特殊字符。基于模板创建新的文档在“新建文档”对话框中选择“模板”选项卡，在左侧的“模板用于”列表中选择“沈阳电缆厂石家庄销售处”站点。从中间的模板列表中选择“模板1”，右侧的“预览”窗

3、口中将显示该模板。选中“当模板改变时更新页面”复选框，如果不希望在每次更改模板后Dreamweaver都更新基于该模板的页面，可取消选择“当模板改变时更新页面”复选框，那样该文档将不再以模板文件“.dwt”形式存在，而是成为一个独立的HTML文档。基于模板创建新的文档单击“创建”按钮，基于选定模板的新文档出现在“文档”窗口中，如图所示。添加产品介绍页面的内容1、将新建文档保存为“chanpin.htm”，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个8行2列，“宽度”为“500”，边框为“0”的表格，并在属性面板中设置其水平居中对齐

4、，设置各单元格高度为30。添加产品介绍页面的内容2、合并新建表格第二列的8行单元格，并在左边的8行中分别输入各种产品名称，（6-110kV交联聚乙烯绝缘电力电缆、0.6/1KV交联聚乙烯绝缘电力电缆、聚氯乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、特控电缆），选中左边的8个单元格，应用在上一个网页中创建的样式“.wen”，并分别为每种产品的名称建立链接为“chanpin1.htm”至“chanpin8.htm”添加产品介绍页面的内容3、在新建表格的右单元格新建一个2行1列的表格，宽度为“200像素”，边框线为“0

5、”，水平居中。分别在两个单元格中插入图片“chanpin1.jpg”和“chanpin2.jpg”，设计效果如图所示创建每一种产品的介绍页面1、先创建基于新建模板网页文档，并将其保存为“chanpin1.htm”文件，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个宽度为“600像素”，3行1列，间距设“2”，边框为“0”的表格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。创建每一种产品的介绍页面2、将新建表格中第一行左边列的宽度设为“40%”，并在其中插入产品图片“chanpin01.jpg”，右边单

6、元格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。3、在具体的产品介绍中还应有参数说明的表格，我们可以根据具体情况插入表格，比如在第二行表格中插入一个新的表格，并将表格的宽度应设为“600像素”，边框可设为“1”，可将表头和表体设为不同的颜色以示区别，如表头可设为“#80BFDB”色；表体可设为“#FFFFEE”色，设计效果如图所示。创建每一种产品的介绍页面在下面再插入一个表格，表头设为“#99CCCC”色，；表体可设为“#FFFFEE”色，输入相应的文字。创建每一种产品的介绍页面5、由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，

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