网页制作电子教案系列第三讲.ppt

教学目标 l???掌握在网页中建立各种超链接的方法 l???掌握框架的基础知识，创建各种类型的框架集并能根据需要修改框架 l???掌握层的建立与设置，掌握层在排版中的应用 l??理解模板对于网站建设的重要性，掌握创建和修改模板的方法，能够使用模板更新页面 l?? 掌握建立和应用库项目的方法 企业产品页面实例 将现有文档保存为模板 打开上章实例二中制作的“intro.htm”，将其中公司简介部分内容删除，效果如图所示，再将其保存为模板应执行以下操作：单击“文件”菜单中的“另存为模板”命令，在“另存为”域中为该模板输入名称“模板1” 插入可编辑区域 定义模板后，就要指定模板的哪个部分可编辑，以便在其中添加内容，因为默认情况下，整个模板处于锁定状态。可编辑模板区域指在创建基于模板的页面时，模板使用者可以编辑哪些区域。 在“文档”窗口中，选择右侧空白单元格中的上面的一个。 单击“插入”菜单中的“模板对象”命令，选择“可编辑区域”命令，打开“新建可编辑区域”对话框。 在“名称”文本框中为该区域输入唯一的名称，“EditRegion1”，注意不要在“名称”文本框中使用特殊字符。 基于模板创建新的文档 在“新建文档”对话框中选择“模板”选项卡，在左侧的“模板用于”列表中选择“沈阳电缆厂石家庄销售处”站点。 从中间的模板列表中选择“模板1”，右侧的“预览”窗口中将显示该模板。 选中“当模板改变时更新页面”复选框，如果不希望在每次更改模板后 Dreamweaver 都更新基于该模板的页面，可取消选择“当模板改变时更新页面”复选框，那样该文档将不再以模板文件“.dwt”形式存在，而是成为一个独立的 HTML文档。 基于模板创建新的文档 单击“创建”按钮，基于选定模板的新文档出现在“文档”窗口中，如图所示。 添加产品介绍页面的内容 1、将新建文档保存为“chanpin.htm”，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个8行2列，“宽度”为“500”，边框为“0”的表格，并在属性面板中设置其水平居中对齐，设置各单元格高度为30。 添加产品介绍页面的内容 2、合并新建表格第二列的8行单元格，并在左边的8行中分别输入各种产品名称，（6-110kV交联聚乙烯绝缘电力电缆、0.6/1KV交联聚乙烯绝缘电力电缆、聚氯乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、特控电缆），选中左边的8个单元格，应用在上一个网页中创建的样式“.wen”，并分别为每种产品的名称建立链接为“chanpin1.htm”至“chanpin8.htm” 添加产品介绍页面的内容 3、在新建表格的右单元格新建一个2行1列的表格，宽度为“200像素”，边框线为“0”，水平居中。分别在两个单元格中插入图片“chanpin1.jpg”和“chanpin2.jpg”，设计效果如图所示 创建每一种产品的介绍页面 创建每一种产品的介绍页面 1、先创建基于新建模板网页文档，并将其保存为“chanpin1.htm”文件，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个宽度为“600像素”，3行1列，间距设“2”，边框为“0”的表格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。 创建每一种产品的介绍页面 2、将新建表格中第一行左边列的宽度设为“40%”，并在其中插入产品图片“chanpin01.jpg”，右边单元格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。 3、在具体的产品介绍中还应有参数说明的表格，我们可以根据具体情况插入表格，比如在第二行表格中插入一个新的表格，并将表格的宽度应设为“600像素”，边框可设为“1”，可将表头和表体设为不同的颜色以示区别，如表头可设为“#80BFDB”色；表体可设为“#FFFFEE”色，设计效果如图所示。 创建每一种产品的介绍页面 创建每一种产品的介绍页面 5、由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，即在第一个可编辑区域中插入一个名为“top”的锚点，在第三行表格中插入图片“top.htm”，选中新插入的图片后，在图片的属性面板中的“链接”文本框中输入“#top”。 * 第三章 企业产品介绍页面的实现 在下面再插入一个表格，表头设为“#99CCCC”色，；表体可设为“#FFFFEE”色，输入相应的文字。 *