电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目九

课程教课设计
讲课内容项目九制作个人网站——应用模板和库
讲课班级讲课学时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 列，宽为各个单元格中插入图像“ personal1_14.jpg “ personal1_16.jpg”。

1 000 像素的表格，并分别在”“ personal1_15.jpg” 和
3.设置可编写地区
步骤 1将插入点置于表格 2 中嵌套表格的第 2 行第 1 列单元格中，单击文档
工具栏中的“拆分”按钮，在文档窗口上方翻开代码视图，单击“布局”插入栏
中的“ IFRAME”按钮，在单元格中插入“ <iframe></iframe> ”代码。

步骤 2在<iframe>标签中“ >”符号左边单击，按一下空格键，而后应用快
速标签编写器挨次输入代码： name=“ page” frameborder= “ 0”width= “603”height= “ 350”。

步骤 3 单击标签选择器中“<iframe> ”标签左边的“<td> ”标签，选中嵌入式框架所在单元格，而后选择“插入记录”→“模板对象”→“可编写地区”
菜单。

步骤4翻开“新建可编写地区”对话框，在“名称”编写框中输入“EditRegion1 ”，以后单击“确立”按钮，创立可编写地区。

步骤 5按【Ctrl+S】组合键保留文档，便达成了网站模板的创立。

（二）应用模板创立网站主页
步骤 1 在站点“ p1”中新建网页文档，重命名为 intro.html ，而后在文档编写窗口中
翻开它。

步骤 2将文本文档“text.txt”中的内容拷贝到该文档窗口，而后单击“CSS 款式”面板上的“新建CSS 规则”按钮，翻开“新建CSS 规则”对话框。

步骤 3在“选择器种类” 区选择“标签”，在“标签” 下拉列表中选择“ body”，在“定义在”列表区选择“仅对该文档”，而后单击“确立”按钮。

步骤 4翻开“ body 的 CSS 规则定义”对话框，设置“大小”为12 像素，“行高”为 20 像素，“颜色”为灰色“ #999999”。

步骤5在“分类”列表中选择“背景”，设置“背景图像”为
“personal1_06.jpg ”，在“重复”下拉列表中选择“不重复”，在“附件”下拉列
表中选择“固定” 。

步骤6 在“分类”列表中选择“方框” ，撤消选择“界限”区的“所有相同”复选框，设置“上”为 40 像素，“右”和“下”均为 0 像素，“左”为 60 像素，而后单击
“确立”按钮。

步骤 7按【Ctrl+S】组合键保留文档，此时的文档成效以下图。

步骤 8 选择“文件”→“新建”菜单，翻开“新建文档”对话框，在左边的“文档种类”列表中选择“模板中的页”，在“站点”列表中选择“ p1”，在“站点 p1 的模板”
列表中选择“ m1”，而后单击“创立”按钮，以下图。

步骤 9将新建文档保留为“ index. html”，并在文档窗口上方翻开代码视图，
在 <iframe> 标签内部单击，按空格键翻开迅速标签编写器，选择“src ”，而后
单击“阅读”按钮。

步骤 10翻开“选择文件”对话框，选择前面创立的文档“intro.html”，
而后单击“确立”按钮。

步骤 11保留文档“ index.html”，以后按F12 键预览。

【任求实行】
接下来，请同学们依据前面所学知识，应用模板制作网站中的其余子页。

【任务二】创立“幸福一家”网页——应用库项目
（一）什么是库项目
库项目是一种特别种类的Dreamweaver 文件，目前网页中的随意页面元素
均可定义为库项目，如图像、表格、文本、声音和 Flash 电影等。

当需要使用某库项
目时，直接将其从“资源”模板中拖到网页中就能够了。

（二）创立库项目
步骤 1 在 Dreamweaver 中翻开本项目素材“ gp”文件夹下的“ index.html ”文档。

步骤 2 单击选中“用户登录”栏目所在表格，选择“改正”→“库”→“增添
对象到库”菜单，翻开提示框，单击“确立”按钮。

步骤 3翻开“资源”面板，刚选中的对象出此刻“资源”面板中，且其名称
处于可编写状态。

将默认名删除，从头输入新名称（此处为“ login ”）并按
Enter 键确认。

（三）应用库项目
应用库项目的方法特别简单，只要在“资源”面板的库窗口中将其拖入到
文档的适合地点即可。

别的，也可在定位插入点后，选中库中的项目并单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。

关于一般对象，在单击选中该对象后，对象周围会出现一组控制点。

可是，假如单击库项目，该对象将变为半透明，而不是在周围出现控制点，以下图。

能够据此判断该对象是不是库项目。

在文档窗口中单击选中库项目后，网页编写窗口下方将显示库项目的“属
性”面板，以下图。

该“属性”面板中各设置项的意义以下：
Src ：显示库项目源文件的名称和在站点中的寄存地点。

翻开：翻开库项目源文件进行编写。

从源文件中分别：断开所选库项目与其源文件之间的链接，使库项目成为
一般对象。

从头创立：用目前选定的内容改写原库项目，使用此选项能够在丢掉或不
测删除原始库项目时从头创立库项目。

（四）应用库项目
要编写库项目，可在“资源”面板中双击库项目， Dreamweaver 会在文档编写窗口中翻开该库项目。

能够在该文档窗口中对库项目进行编写。

对库项目进行编写后保留时，系
统会自动翻开“更新库项目” 对话框，咨询用户能否更新使用了库项目的网页，一般状况下，应单击“更新“按钮，接下来系统将显示“更新页面”对话框，此中显示了更新状况，单击“封闭”按钮封闭即可。

【任求实行】
在学习了库项目的有关知识后，请同学们动着手，达成使用库项目的个人
网站制作——幸福一家。

作业：
1．简述创立模板的方法。

2．如何设置可编写地区？
3．什么是库项目？。