《Dreamweaver网页设计与制作项目九.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作项目九.docx（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程教案授课内容项目九 制作个人网站应用模板和库授课班级授课学时8课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容个人网站是提供记录，交流，分享，展现自我及个性的属于自己的空间和平台，通过网站能够和朋友进行交流、学习。本项目的工作内容就是制作一个个人网站。网站的设计要求如下：1.导航要尽量清晰明了，布局合理，层次分明，页面链接层次不要太深，尽量让用户用最短的时间找到需要的资料；2. 风格要统一。保持统一的风格，有助于加深访问者对个人网站的个人的印象；3.色彩要和谐、重点要突出。在网页设计中，要讲究和谐、均衡和重点突出的 原则；4. 动态效果不宜太多。教学目标学生通过本项目的学习，能
2、：1、 掌握创建和保存模板的方法2、 熟练利用模板创建网页3、 理解库项目的概念4、 熟悉库项目的创建和应用教学重点与难点教学重点：掌握模板和库的使用方法教学难点：熟练利用模板创建网页教学过程设计项目效果【任务一】创建“梦幻花园”首页应用模板（一）创建并保存模板文档创建模板文档的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样制作和编辑模板内容；还有一种是将普通网页另存为模板。本节讲解如何将普通网页另存为模板。步骤 1 将本项目素材中的“gp”文件夹拷贝至本地磁盘，然后在Dreamweaver中创建站点“gp”。打开准备作为模板的网页（此处为“gp”站点中的“invite.html”
3、文档），然后选择“文件”“另存为模板”菜单。步骤 2 打开“另存模板”对话框，在“站点”下拉列表中选择要保存到的站点，在“另存为”编辑框中命名模板，然后单击“保存”按钮。步骤 3 弹出提示框，询问是否更新链接，一般情况下都应单击“是”按钮。步骤 4 接下来需要编辑模板，模板的编辑和普通网页的编辑基本一致，可根据需要进行具体设计。步骤 5 完成编辑后就要设置可编辑区域。选择想要设置为可编辑区域的内容，或将插入点放在想要插入可编辑区域的位置。步骤 6 选择“插入记录”“模板对象”“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”编辑框中输入可编辑区域的名称，然后单击“确定”按钮，创建可编
4、辑区域。步骤 7 可依据类似方法，设置其他可编辑区域，最后按【Ctrl+S】组合键保存文档。步骤 8 创建可编辑区域后，如果希望选择可编辑区域，可单击可编辑区域左上角的可编辑区域名称标签，如图94所示；或选择“修改”“模板”菜单，然后从该子菜单底部的列表中选择可编辑区域名称。步骤 9 如果已经将模板中的一个区域标记为可编辑，而现在想要再次锁定它（使其在基于模板的文档中不可编辑），可使用“删除模板标记”命令。为此，可在选中可编辑区域后，选择“修改”“模板”“删除模板标记”菜单。步骤 10 要新命名可编辑区域，只需单击可编辑区域左上角的可编辑区域名称标签，然后在“属性”面板的“名称”编辑框中修改即
5、可。步骤 11 编辑完后，选择“文件”“保存”菜单，或按【Ctrl+S】组合键保存文档。模板文档中除可定义可编辑区域外，还可通过选择“插入记录”“模板对象”菜单，定义其他几种类型的区域。l 可选区域：如果在模板中指定了这类区域，则在基于模板的文档中可显示或隐藏该区域。要为文档中的某部分内容设置条件时，可使用“可选区域”。l 重复区域：重复区域是可以根据需要在基于模板的页面中复制任意次数的部分。重复区域通常用于表格，但也可以为其他页面元素定义重复区域。（二）基于模板创建文档步骤 1 选择“文件”“新建”菜单，打开“新建文档”对话框。步骤 2在左侧的“文档类型”列表中选择“模板中的页”，在“站点”
6、列表中选择模板所在站点（此处为“gp”），在“站点gp的模板”列表中选择模板名称（此处为“invite”），然后单击“创建”按钮。步骤 3 根据需要修改文档的可编辑区域或编辑文档，最后将文档保存即可。另外，除上面的方法外，也可在“资源”面板中右击模板，然后从弹出的快捷菜单中选择“从模板新建”选项，来创建基于模板的文档。步骤 4 在基于模板创建文档后，如果又更改了模板，在保存时系统将打开“更新模板文件”对话框，其中列出了基于该模板创建的文档列表。单击“更新”按钮，将打开 “更新页面”对话框，其中显示了页面更新情况。更新结束后，单击“关闭”按钮即可。【任务实施】在学习了模板的相关知识后，下面完成用
7、模板实现的个人网站的制作。（一）创建网站模板1. 创建并保存模板文档步骤 1 首先将本项目素材中的“p1”文件夹拷贝至本地磁盘，然后在Dreamweaver 中新建站点“p1”。步骤 2 选择“文件”“新建”菜单，打开“新建文档”对话框，在左侧的“文档类型”列表中选择“空模板”，在“模板类型”列表中选择“HTML模板”，在“布局”列表中选择“无”，最后单击“创建”按钮。步骤 3 按【Ctrl+S】组合键保存模板页，弹出提示框，提示“此模板不含有任何可编辑区域。你想继续吗？”，单击“确定”按钮即可。步骤 4 弹出“另存模板”对话框，在“站点”下拉列表中选择保存站点（此处为“p1”），在“描述”编
8、辑框中输入描述性文本（此处为“个人网站”），在“另存为”编辑框中输入模板文件名（此处为“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”“perso
9、nal1_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列的两个单元格合并，并在合并后
10、的单元格中插入图像“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 在标签中“”符号左侧单击，按一下空格键，然后应
11、用快速标签编辑器依次输入代码：name=“page”frameborder=“0”width=“603”height=“350”。步骤 3 单击标签选择器中“”标签左侧的“”标签，选中嵌入式框架所在单元格，然后选择“插入记录”“模板对象”“可编辑区域”菜单。步骤 4 打开“新建可编辑区域”对话框，在“名称”编辑框中输入“EditRegion1”，之后单击“确定”按钮，创建可编辑区域。步骤 5 按【Ctrl+S】组合键保存文档，便完成了网站模板的创建。（二）应用模板创建网站主页步骤 1 在站点“p1”中新建网页文档，重命名为intro.html，然后在文档编辑窗口中打开它。步骤 2 将文本文档“
12、text.txt”中的内容拷贝到该文档窗口，然后单击“CSS样式”面板上的“新建 CSS 规则”按钮，打开“新建 CSS 规则”对话框。步骤 3在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在“定义在”列表区选择“仅对该文档”，然后单击“确定”按钮。步骤 4 打开“body 的 CSS 规则定义”对话框，设置“大小”为 12 像素，“行高”为 20 像素，“颜色”为灰色“#999999”。步骤 5 在“分类”列表中选择“背景”，设置“背景图像”为“personal1_06.jpg”，在“重复”下拉列表中选择“不重复”，在“附件”下拉列表中选择“固定”。步骤 6 在“分类
13、”列表中选择“方框”，取消选择“边界”区的“全部相同”复选框，设置“上”为 40 像素，“右”和“下”均为 0 像素，“左”为 60 像素，然后单击“确定”按钮。步骤 7 按【Ctrl+S】组合键保存文档，此时的文档效果如图所示。步骤 8 选择“文件”“新建”菜单，打开“新建文档”对话框，在左侧的“文档类型”列表中选择“模板中的页”，在“站点”列表中选择“p1”，在“站点p1的模板”列表中选择“m1”，然后单击“创建”按钮，如图所示。步骤 9 将新建文档保存为“index.html”，并在文档窗口上方打开代码视图，在标签内部单击，按空格键打开快速标签编辑器，选择“src”，然后单击“浏览”按钮
14、。步骤 10 打开“选择文件”对话框，选择前面创建的文档“intro.html”，然后单击“确定”按钮。步骤 11 保存文档“index.html”，之后按 F12键预览。【任务实施】接下来，请同学们根据前面所学知识，应用模板制作网站中的其他子页。【任务二】创建“幸福一家”网页应用库项目（一）什么是库项目库项目是一种特殊类型的Dreamweaver文件，当前网页中的任意页面元素均可定义为库项目，如图像、表格、文本、声音和Flash影片等。当需要使用某库项目时，直接将其从“资源”模板中拖到网页中就可以了。（二）创建库项目步骤 1 在 Dreamweaver 中打开本项目素材“gp”文件夹下的“i
15、ndex.html”文档。步骤 2 单击选中“用户登录”栏目所在表格，选择“修改”“库”“增加对象到库”菜单，打开提示框，单击“确定”按钮。步骤 3 打开“资源”面板，刚选中的对象出现在“资源”面板中，且其名称处于可编辑状态。将默认名删除，重新输入新名称（此处为“login”）并按Enter键确认。（三）应用库项目应用库项目的方法非常简单，只需在“资源”面板的库窗口中将其拖入到文档的适当位置即可。此外，也可在定位插入点后，选中库中的项目并单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。对于普通对象，在单击选中该对象后，对象四周会出现一组控制点。但是，如果单击库项目，该对象将变成半透明
16、，而不是在四周出现控制点，如图所示。可以据此判定该对象是否是库项目。在文档窗口中单击选中库项目后，网页编辑窗口下方将显示库项目的“属性”面板，如图所示。该“属性”面板中各设置项的意义如下：l Src：显示库项目源文件的名称和在站点中的存放位置。l 打开：打开库项目源文件进行编辑。l 从源文件中分离：断开所选库项目与其源文件之间的链接，使库项目成为普通对象。l 重新创建：用当前选定的内容改写原库项目，使用此选项可以在丢失或意外删除原始库项目时重新创建库项目。（四）应用库项目要编辑库项目，可在“资源”面板中双击库项目，Dreamweaver会在文档编辑窗口中打开该库项目。可以在该文档窗口中对库项目进行编辑。对库项目进行编辑后保存时，系统会自动打开“更新库项目”对话框，询问用户是否更新使用了库项目的网页，一般情况下，应单击“更新“按钮，接下来系统将显示“更新页面”对话框，其中显示了更新情况，单击“关闭”按钮关闭即可。【任务实施】在学习了库项目的相关知识后，请同学们动动手，完成使用库项目的个人网站制作幸福一家。作业：1 简述创建模板的方法。2 怎样设置可编辑区域？3 什么是库项目？