Dreamweaver网页设计与制作项目二.docx

《Dreamweaver网页设计与制作项目二.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计与制作项目二.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程教案授课内容项目二 创建度假村网站授课班级授课学时8课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容本次课程将讲授网站站点的创建与管理知识，使学生了解站点的基本概念，站点的种类，站点的作用，站点文件的管理。站点的发布及网页的预览。本项目的工作内容是为某度假村公司创建网站。该公司要求度假村网站的首页以动静相结合的方式突出度假村的整体形象，给人的视觉冲击力强，网站风格独特、新颖、严谨、大方、浪漫、温馨。教学目标学生通过本项目的学习，能：1、 了解网页文档和文件的命名规则2、 熟悉定义站点的步骤3、 初步认识Dreamweaver CS3后，学习新建和管理站点的方法，主要包括网页文档

2、和文件夹的命名规则，定义站点以及新建、保存、关闭、打开和预览文档的方法。4、 熟练掌握页面属性及网页头信息的设置教学重点与难点教学重点：1、熟悉网页文档结构，正确命名文档2、正确定义站点教学难点：1、 创建站点，新建文档。2、 掌握页面属性及网页头信息的设置。教学过程设计知识加油站：网页中文件夹与文件的命名规则1.静态的首页文件一般命名为“index.html”。如果是包含程序代码的动态页面，如ASP文件，则命名为“index.asp”。总之，后缀名与网页本身所使用的技术是一一对应的。2.最好不要使用中文命名文件和文件夹，因为在使用Unix或Linux作为操作系统的主机上，使用中文命名的文件会

3、出错。3.文件名中不要使用大写英文字母，因为Unix操作系统区分英文字母大小写，而Windows操作系统不区分英文字母大小写。因此，为保证网站发布后不出错，文件名最好全部使用小写英文字母。4. 运算符号不能用在文件名的开头。5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键字。6.在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。7. 在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。【活动一】定义站点步骤 1 在电脑的磁盘上创建一个要作为站点的

4、根文件夹。步骤 2 启动 Dreamweaver CS3 后，选择“站点”“新建站点”菜单，打开“未命名地点1的站点定义为”对话框。单击“基本”选项卡，在上面的编辑框中输入站点名（此处为“fuligong”），然后单击“下一步”按钮。步骤 3 由于创建的是静态站点，因此，在接着弹出的对话框中选择“否，我不想使用服务器技术”单选钮，然后单击“下一步”按钮。步骤 4 在接下来弹出的对话框中选择“编辑我的计算机”单选钮，单击“您将把”编辑框后的文件夹图标，在打开的“选择站点fuligong的本地根文件夹：”对话框中选择本地硬盘上的站点根文件夹，然后单击“选择”按钮。步骤 5 回到“fuligong的

5、站点定义为”对话框，单击“下一步”按钮。由于现在只是在本地编写和调试网页，故不需要连接到远程服务器，在“您如何”下拉列表中选择“无”。步骤 6 单击“下一步”按钮，系统显示所设参数总结，单击“完成”按钮，此时便完成了站点的创建。【活动二】新建文档Dreamweaver中的文档也就是网页，创建新网页的方法有多种。下面使用“文件”菜单创建网页。步骤 1 选择“文件”“新建”菜单，打开“新建文档”对话框。在左侧的“文档类型”列表中选择创建方式，这里选择“空白页”，在“页面类型”列表中选择网页类型，这里选择“HTML”，在“布局”列表中选择布局类型，这里选择“无”。步骤 2 设置完后单击“创建”按钮，

6、就创建了一个默认名为“Untitled-1”的新文档。如图所示：【活动三】保存和关闭文档新建或编辑网页文档后，需要保存文档才能使所做的设置生效。步骤 1 如要保存文档，可选择“文件”“保存”菜单，或按【Ctrl+S】组合键，弹出“另存为”对话框，在该对话框的“保存在”下拉列表中选择保存文档的文件夹，在“文件名”编辑框中输入文档名。步骤 2 设置完后单击“保存”按钮，便将文档保存在选择的文件夹中，此时“文件”面板中也会出现刚保存的文档。步骤 3 关闭文档的操作相当简单，只需单击相应文档右上角的“关闭”按钮，或按【Ctrl+W】组合键即可。【活动四】打开和预览文档除常用的新建、保存和关闭文档操作外

7、，有时还需要打开某个文档进行编辑。步骤 1 要打开文档，可选择“文件”“打开”菜单，弹出“打开”对话框。步骤 2 在“查找范围”下拉菜单中选择文档所在文件夹，在文件列表中选择要打开的文档，单击“打开”按钮，即可打开所选择的文档。步骤 3 在对网页执行保存操作后，通常需要预览一下编辑效果。如果预览文档，可在对网页执行保存操作后，单击“文档”工具栏中的“在浏览器中预览/调试”按钮，在弹出的菜单中选择“预览在IExplore”菜单项，在浏览器中预览文档。【活动五】“文件”面板的应用使用“文件”面板可以非常高效地管理站点。实际操作中，在定义站点后，通常都是利用该面板创建、重命名或打开站点中的网页文档或

8、文件夹。步骤 1 要创建网页文档，可右键单击“文件”面板中的站点根文件夹，在弹出的快捷菜单中选择“新建文件”选项，新建的文档名处于可编辑状态。步骤 2 单击并拖动鼠标选中文档名，输入新名称（此处为“com”），之后按Enter键确认。步骤 3 要新建文件夹，可在目标文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，即可在目标文件夹中新建一个文件夹。步骤 4 参照重命名网页文档的方法，将文件夹重命名为“images”，以存放网站中用到的图像文件。步骤 5 要删除网页文档或文件夹，可以右键单击文档或文件夹，然后在弹出的快捷菜单中选择“编辑”“删除”选项，也可在选中文档后，直接按Del

9、ete键删除。步骤 6 除上述操作外，在“文件”面板中还可以非常方便地打开文档。双击“文件”面板中的网页文档，可在文档编辑窗口中打开该文档。步骤 7 要重命名现有的网页文档或文件夹，可首先选中文档或文件夹，然后单击文档名或文件夹名，接着输入新名称即可。重命名文档时，注意不要更改其扩展名。【任务实施】请同学们参考演示步骤，先确定本地站点的目录结构，并准备好相应的素材文件，然后在Dreamweaver 中定义站点并创建网页，进行度假村网站创建的具体操作。【活动六】设置头信息头信息包括网页关键字、网页说明等。在使用Google、Baidu、Yahoo等搜索引擎搜索网页时，不是检索网页的所有内容，而是

10、只检索网页的关键字。如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。步骤 1 单击“常用”插入栏中“文件头”按钮 右侧的下拉按钮，在打开的下拉列表中选择“关键字”，打开“关键字”对话框。在“关键字”编辑框中输入要为网页设置的关键字，各个关键字之间用逗号隔开，单击“确定”按钮，插入关键字。步骤 2 为确认所插入的关键字，单击“拆分”按钮，在文档窗口上方将显示“代码”视图，可以看到在标签里插入了标签，其中显示了刚才设置的关键字。步骤 3 除关键字外，搜索引擎在检索网页时还会查看网页中的说明文本。单击“常用”插入栏中“文件头”按钮 右侧的下拉按钮，在打开的下拉列表中选择

11、“说明”，打开“说明”对话框，在“说明”编辑框中输入对网页的描述性文本。【活动七】设置页面属性页面属性主要包括页面字体、文本颜色、文档标题、页边距、背景颜色和背景图 像等。步骤 1 单击“属性”面板上的“页面属性”按钮，或按【Ctrl+J】组合键，打开“页面属性”对话框。步骤 2 在“页面字体”下拉列表中选择网页默认的字体。如果没有需要的字体，可选择“编辑字体列表”选项，打开“编辑字体列表”对话框，在“可用字体”列表框中选择一种字体，然后单击 按钮，可将选中的字体加入到字体列表中。步骤 3 如果还想添加其他字体，可继续执行上面的操作。添加完后单击“确定”按钮，关闭“编辑字体列表”对话框，回到“

12、页面属性”对话框，在“字体”下拉列表中选择需要的字体。步骤 4 在“大小”下拉列表中可设置网页默认文本的大小；单击“文本颜色”后的按钮，在弹出的调色板中设置网页文本的颜色；采用同样的方法可设置网页的背景颜色。步骤 5 单击“背景图像”编辑框后的“浏览”按钮，打开“选择图像源文件”对话框，在对话框中选择要设置为背景图像的文件，然后单击“确定”按钮，可将其设置为网页背景。步骤 6 在“重复”下拉列表中可设置背景图像的显示方式，其中，“不重复”表示背景图像保持原大小和位置；“重复”为默认项，选择该项，背景图像会填满整个窗口；“横向重复”表示背景图像沿水平方向平铺；“纵向重复”表示背景图像沿垂直方向平

13、铺。步骤 7 在表示边距的四个编辑框里分别输入边距值（指网页有效内容区距离网页上、下、左、右边界的距离），一般设置为0。单击左侧“分类”列表中的“链接”选项，可设置网页中链接文本的颜色、是否有下划线等。步骤 8 单击左侧“分类”列表中的“标题/编码”选项，在“标题”编辑框中输入网页标题，一般是表示网页特征或欢迎词之类的文本；在“编码”下拉列表中选择网页使用的编码类型，一般选择“简体中文（GB2312）”。步骤 9 单击“确定”按钮，关闭“页面属性”对话框，前面所做的设置将应用于网页文档中。【任务实施】请同学们参考课本，通过为前面创建的度假村网站首页“index.html”设置头信息和页面属性，来学习头信息和页面属性在实际网页制作中的应用。【知识拓展】网站制作流程1、 确定网站内容2、 规划网站结构3、 收集网站素材4、 设计制作网站页面5、 空间和域名申请6、 测试和发布网站7、 推广和维护网站作业：1 请简述网页文档的命名规则。2 请简述删除站点的步骤？3 如何修改网页背景颜色？