课程教案
授课内容 授课班级 教学方法与手段 项目九 制作个人网站——应用模板和库 授课学时 8课时 讲授法、演示法、讨论法。多媒体教学 个人网站是提供记录，交流，分享，展现自我及个性的属于自己的空间和平台，通过网站能够和朋友进行交流、学习。本项目的工作内容就是制作一个个人网站。网站的设计要求如下： 1.导航要尽量清晰明了，布局合理，层次分明，页面链接层次不要太深，尽量让用户用最短的时间找到需要的资料； 项目内容 2. 风格要统一。保持统一的风格，有助于加深访问者对个人网站的个人的印象； 3.色彩要和谐、重点要突出。在网页设计中，要讲究和谐、均衡和重点突出的 原则； 4. 动态效果不宜太多。 学生通过本项目的学习，能： 1、 掌握创建和保存模板的方法 教学目标 2、 熟练利用模板创建网页 3、 理解库项目的概念 4、 熟悉库项目的创建和应用 教学重点与难点 教学重点：掌握模板和库的使用方法 教学难点：熟练利用模板创建网页 项目效果 教学过程设计 【任务一】创建“梦幻花园”首页——应用模板 （一）创建并保存模板文档 创建模板文档的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样制作和编辑模板内容；还有一种是将普通网页另存为模板。本节讲解如何将普通网页另存为模板。 步骤 1 将本项目素材中的“gp”文件夹拷贝至本地磁盘，然后在Dreamweaver中创建站点“gp”。打开准备作为模板的网页（此处为“gp”站点中的“invite.html”文档），然后选择“文件”→“另存为模板”菜单。 步骤 2 打开“另存模板”对话框，在“站点”下拉列表中选择要保存到的站点，在“另存为”编辑框中命名模板，然后单击“保存”按钮。 步骤 3 弹出提示框，询问是否更新链接，一般情况下都应单击“是”按钮。 步骤 4 接下来需要编辑模板，模板的编辑和普通网页的编辑基本一致，可根据需要进行具体设计。 步骤 5 完成编辑后就要设置可编辑区域。选择想要设置为可编辑区域的内容，或将插入点放在想要插入可编辑区域的位置。 步骤 6 选择“插入记录”→“模板对象”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”编辑框中输入可编辑区域的名称，然后单击“确定”按钮，创建可编辑区域。 步骤 7 可依据类似方法，设置其他可编辑区域，最后按【Ctrl+S】组合键保存文档。 步骤 8 创建可编辑区域后，如果希望选择可编辑区域，可单击可编辑区域左上角的可编辑区域名称标签，如图9—4所示；或选择“修改”→“模板”菜单，然后从该子菜单底部的列表中选择可编辑区域名称。 步骤 9 如果已经将模板中的一个区域标记为可编辑，而现在想要再次锁定它（使其在基于模板的文档中不可编辑），可使用“删除模板标记”命令。为此，可在选中可编辑区域后，选择“修改”→“模板”→“删除模板标记”菜单。 步骤 10 要新命名可编辑区域，只需单击可编辑区域左上角的可编辑区域名称标签，然后在“属性”面板的“名称”编辑框中修改即可。 步骤 11 编辑完后，选择“文件”→“保存”菜单，或按【Ctrl+S】组合键保存文档。 模板文档中除可定义可编辑区域外，还可通过选择“插入记录”→“模板对象”菜单，定义其他几种类型的区域。 可选区域：如果在模板中指定了这类区域，则在基于模板的文档中可显示或隐藏该区域。要为文档中的某部分内容设置条件时，可使用“可选区域”。 重复区域：重复区域是可以根据需要在基于模板的页面中复制任意次数的部分。重复区域通常用于表格，但也可以为其他页面元素定义重复区域。 （二）基于模板创建文档 步骤 1 选择“文件”→“新建”菜单，打开“新建文档”对话框。 步骤 2 在左侧的“文档类型”列表中选择“模板中的页”，在“站点”列表中选择模板所在站点（此处为“gp”），在“站点‘gp’的模板”列表中选择模板名称（此处为“invite”），然后单击“创建”按钮。 步骤 3 根据需要修改文档的可编辑区域或编辑文档，最后将文档保存即可。 另外，除上面的方法外，也可在“资源”面板中右击模板，然后从弹出的快捷菜单中选择“从模板新建”选项，来创建基于模板的文档。 步骤 4 在基于模板创建文档后，如果又更改了模板，在保存时系统将打开“更新模板文件”对话框，其中列出了基于该模板创建的文档列表。单击“更新”按钮，将打开 “更新页面”对话框，其中显示了页面更新情况。更新结束后，单击“关闭”按钮即可。 【任务实施】 在学习了模板的相关知识后，下面完成用模板实现的个人网站的制作。 （一）创建网站模板 1. 创建并保存模板文档 步骤 1 首先将本项目素材中的“p1”文件夹拷贝至本地磁盘，然后在Dreamweaver 中新建站点“p1”。 步骤 2 选择“文件”→“新建”菜单，打开“新建文档”对话框，在左侧的“文档类型”列表中选择“空模板”，在“模板类型”列表中选择“HTML模板”，在“布局”列表中选择“无”，最后单击“创建”按钮。 步骤 3 按【Ctrl+S】组合键保存模板页，弹出提示框，提示“此模板不含有任何可编辑区域。你想继续吗？”，单击“确定”按钮即可。 步骤 4 弹出“另存模板”对话框，在“站点”下拉列表中选择保存站点（此处为“p1”），在“描述”编辑框中输入描述性文本（此处为“个人网站”），在“另存为”编辑框中输入模板文件名（此处为“m1”），然后单击“保存”按钮。 步骤 5 打开“CSS 样式”面板，将“p1”站点中的样式文件“s1.css”链接至模板文档。 2. 设置模板内容 步骤 1 将插入点置于文档窗口中，插入一个1行3列，宽为1 000像素，边 框、间距和边距均为0的表格（称为表格1），然后在各单元格中分别插入图像。 步骤 2 在表格1下方插入一个6行2列，宽为1 000像素，边框、间距和边距均为0的表格（称为表格2），在左侧的各个单元格中分别插入图像“personal1_04.jpg”和“personal1_08.jpg”～“personal1_12.jpg”。 步骤 3 将表格2右侧的6个单元格合并为一个单元格，并将插入点置于合并后的单元格中，在“属性”面板上的“垂直”下拉列表中选择“顶端”。 步骤 4 在合并后的单元格中嵌套一个3行2列，宽为723像素，边框、间距和边距均为0的表格。将第1行的两个单元格合并，并在其中插入图像“personal1_05.jpg”。 步骤 5 将插入点置于嵌套表格第2行第1列单元格中，设置其宽为603像素，高为378像素，并在“属性”面板上的“垂直”下拉列表中选择“顶端”，“背景图像”为“personal1_06.jpg”。 步骤 6 将嵌套表格第2行第2列和第3行第2列的两个单元格合并，并在合并后的单元格中插入图像“personal1_07.jpg”；同样在第3行第1列单元格中插入图像“personal1_13.jpg”。 步骤 7 在表格2下方插入一个1行3列，宽为1 000像素的表格，并分别在各个单元格中插入图像“personal1_14.jpg”“personal1_15.jpg”和“personal1_16.jpg”。 3. 设置可编辑区域 步骤 1 将插入点置于表格2中嵌套表格的第2行第1列单元格中，单击文档 工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，单击“布局”插入栏中的“IFRAME”按钮，在单元格中插入“”代码。 步骤 2 在
