电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目二.docx
- 文档编号:24042763
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:12
- 大小:2.09MB
电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目二.docx
《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目二.docx》由会员分享,可在线阅读,更多相关《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目二.docx(12页珍藏版)》请在冰豆网上搜索。
电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目二
课程教案
授课内容
项目二创建度假村网站
授课班级
授课学时
8课时
教学方法与手段
讲授法、演示法、讨论法。
多媒体教学
项目内容
本次课程将讲授网站站点的创建与管理知识,使学生了解站点的基本概念,站点的种类,站点的作用,站点文件的管理。
站点的发布及网页的预览。
本项目的工作内容是为某度假村公司创建网站。
该公司要求度假村网站的首页以动静相结合的方式突出度假村的整体形象,给人的视觉冲击力强,网站风格独特、新颖、严谨、大方、浪漫、温馨。
教学目标
学生通过本项目的学习,能:
1、了解网页文档和文件的命名规则
2、熟悉定义站点的步骤
3、初步认识DreamweaverCS3后,学习新建和管理站点的方法,主要包括网页文档和文件夹的命名规则,定义站点以及新建、保存、关闭、打开和预览文档的方法。
4、熟练掌握页面属性及网页头信息的设置
教学重点与难点
教学重点:
1、熟悉网页文档结构,正确命名文档
2、正确定义站点
教学难点:
1、创建站点,新建文档。
2、掌握页面属性及网页头信息的设置。
教学过程设计
知识加油站:
网页中文件夹与文件的命名规则
1.静态的首页文件一般命名为“index.html”。
如果是包含程序代码的动态页面,如ASP文件,则命名为“index.asp”。
总之,后缀名与网页本身所使用的技术是一一对应的。
2.最好不要使用中文命名文件和文件夹,因为在使用Unix或Linux作为操作系统的主机上,使用中文命名的文件会出错。
3.文件名中不要使用大写英文字母,因为Unix操作系统区分英文字母大小写,而Windows操作系统不区分英文字母大小写。
因此,为保证网站发布后不出错,文件名最好全部使用小写英文字母。
4.运算符号不能用在文件名的开头。
5.比较长的文件名可以使用下划线“_”隔开多个单词或关键字。
6.在大型网站中,分支页面的文件应存放在单独的文件夹中,每个分支中的图像也应该存放在单独的文件夹中,存放网页图像的文件夹一般命名为“images”或者“img”。
7.在动态网站中,用来存放数据库的文件夹一般命名为“data”或者“database”。
【活动一】定义站点
步骤1 在电脑的磁盘上创建一个要作为站点的根文件夹。
步骤2 启动DreamweaverCS3后,选择“站点”→“新建站点”菜单,打开“未命名地点1的站点定义为”对话框。
单击“基本”选项卡,在上面的编辑框中输入站点名(此处为“fuligong”),然后单击“下一步”按钮。
步骤3 由于创建的是静态站点,因此,在接着弹出的对话框中选择“否,我不想使用服务器技术”单选钮,然后单击“下一步”按钮。
步骤4 在接下来弹出的对话框中选择“编辑我的计算机…”单选钮,单击“您将把…”编辑框后的文件夹图标,在打开的“选择站点fuligong的本地根文件夹:
”对话框中选择本地硬盘上的站点根文件夹,然后单击“选择”按钮。
步骤5 回到“fuligong的站点定义为”对话框,单击“下一步”按钮。
由于现在只是在本地编写和调试网页,故不需要连接到远程服务器,在“您如何…”下拉列表中选择“无”。
步骤6 单击“下一步”按钮,系统显示所设参数总结,单击“完成”按钮,此时便完成了站点的创建。
【活动二】新建文档
Dreamweaver中的文档也就是网页,创建新网页的方法有多种。
下面使用“文件”菜单创建网页。
步骤1 选择“文件”→“新建”菜单,打开“新建文档”对话框。
在左侧的“文档类型”列表中选择创建方式,这里选择“空白页”,在“页面类型”列表中选择网页类型,这里选择“HTML”,在“布局”列表中选择布局类型,这里选择“无”。
步骤2 设置完后单击“创建”按钮,就创建了一个默认名为“Untitled-1”的新文档。
如图所示:
【活动三】保存和关闭文档
新建或编辑网页文档后,需要保存文档才能使所做的设置生效。
步骤1 如要保存文档,可选择“文件”→“保存”菜单,或按【Ctrl+S】组合键,弹出“另存为”对话框,在该对话框的“保存在”下拉列表中选择保存文档的文件夹,在“文件名”编辑框中输入文档名。
步骤2 设置完后单击“保存”按钮,便将文档保存在选择的文件夹中,此时“文件”面板中也会出现刚保存的文档。
步骤3 关闭文档的操作相当简单,只需单击相应文档右上角的“关闭”按钮,或按【Ctrl+W】组合键即可。
【活动四】打开和预览文档
除常用的新建、保存和关闭文档操作外,有时还需要打开某个文档进行编辑。
步骤1 要打开文档,可选择“文件”→“打开”菜单,弹出“打开”对话框。
步骤2 在“查找范围”下拉菜单中选择文档所在文件夹,在文件列表中选择要打开的文档,单击“打开”按钮,即可打开所选择的文档。
步骤3 在对网页执行保存操作后,通常需要预览一下编辑效果。
如果预览文
档,可在对网页执行保存操作后,单击“文档”工具栏中的“在浏览器中预览/调试”按钮,在弹出的菜单中选择“预览在IExplore”菜单项,在浏览器中预览文档。
【活动五】“文件”面板的应用
使用“文件”面板可以非常高效地管理站点。
实际操作中,在定义站点后,通常都是利用该面板创建、重命名或打开站点中的网页文档或文件夹。
步骤1 要创建网页文档,可右键单击“文件”面板中的站点根文件夹,在弹出的快捷菜单中选择“新建文件”选项,新建的文档名处于可编辑状态。
步骤2 单击并拖动鼠标选中文档名,输入新名称(此处为“com”),之后按Enter键确认。
步骤3 要新建文件夹,可在目标文件夹上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”选项,即可在目标文件夹中新建一个文件夹。
步骤4 参照重命名网页文档的方法,将文件夹重命名为“images”,以存放网站中用到的图像文件。
步骤5 要删除网页文档或文件夹,可以右键单击文档或文件夹,然后在弹出的快捷菜单中选择“编辑”→“删除”选项,也可在选中文档后,直接按Delete
键删除。
步骤6 除上述操作外,在“文件”面板中还可以非常方便地打开文档。
双
击“文件”面板中的网页文档,可在文档编辑窗口中打开该文档。
步骤7 要重命名现有的网页文档或文件夹,可首先选中文档或文件夹,然后单击文档名或文件夹名,接着输入新名称即可。
重命名文档时,注意不要更改其扩展名。
【任务实施】
请同学们参考演示步骤,先确定本地站点的目录结构,并准备好相应的素材文件,然后在Dreamweaver中定义站点并创建网页,进行度假村网站创建的具体操作。
【活动六】设置头信息
头信息包括网页关键字、网页说明等。
在使用Google、Baidu、Yahoo等搜索引擎搜索网页时,不是检索网页的所有内容,而是只检索网页的关键字。
如果想要自己的网页能够被搜索引擎检索到,最好把关键字设置为人们经常使用的词语。
步骤1 单击“常用”插入栏中“文件头”按钮右侧的下拉按钮,在打开的下拉列表中选择“关键字”,打开“关键字”对话框。
在“关键字”编辑框中输入要为网页设置的关键字,各个关键字之间用逗号隔开,单击“确定”按钮,插入关键字。
步骤2 为确认所插入的关键字,单击“拆分”按钮,在文档窗口上方将显示“代码”视图,可以看到在
标签里插入了标签,其中显示了刚才设置的关键字。步骤3 除关键字外,搜索引擎在检索网页时还会查看网页中的说明文本。
单
击“常用”插入栏中“文件头”按钮右侧的下拉按钮,在打开的下拉列表中选择“说明”,打开“说明”对话框,在“说明”编辑框中输入对网页的描述性文本。
【活动七】设置页面属性
页面属性主要包括页面字体、文本颜色、文档标题、页边距、背景颜色和背景图像等。
步骤1 单击“属性”面板上的“页面属性”按钮,或按【Ctrl+J】组合键,打开“页面属性”对话框。
步骤2 在“页面字体”下拉列表中选择网页默认的字体。
如果没有需要的字体,可选择“编辑字体列表”选项,打开“编辑字体列表”对话框,在“可用字体”列表框中选择一种字体,然后单击按钮,可将选中的字体加入到字体列表中。
步骤3 如果还想添加其他字体,可继续执行上面的操作。
添加完后单击“确定”按钮,关闭“编辑字体列表”对话框,回到“页面属性”对话框,在“字体”下拉列表中选择需要的字体。
步骤4 在“大小”下拉列表中可设置网页默认文本的大小;单击“文本颜色”后的按钮,在弹出的调色板中设置网页文本的颜色;采用同样的方法可设置网页的背景颜色。
步骤5 单击“背景图像”编辑框后的“浏览”按钮,打开“选择图像源文件”对话框,在对话框中选择要设置为背景图像的文件,然后单击“确定”按钮,可将其设置为网页背景。
步骤6 在“重复”下拉列表中可设置背景图像的显示方式,其中,“不重复”表示背景图像保持原大小和位置;“重复”为默认项,选择该项,背景图像会填满整个窗口;“横向重复”表示背景图像沿水平方向平铺;“纵向重复”表示背景图像沿垂直方向平铺。
步骤7 在表示边距的四个编辑框里分别输入边距值(指网页有效内容区距离网页上、下、左、右边界的距离),一般设置为0。
单击左侧“分类”列表中的“链接”选项,可设置网页中链接文本的颜色、是否有下划线等。
步骤8 单击左侧“分类”列表中的“标题/编码”选项,在“标题”编辑框中输入网页标题,一般是表示网页特征或欢迎词之类的文本;在“编码”下拉列表中选择网页使用的编码类型,一般选择“简体中文(GB2312)”。
步骤9 单击“确定”按钮,关闭“页面属性”对话框,前面所做的设置将应用于网页文档中。
【任务实施】
请同学们参考课本,通过为前面创建的度假村网站首页“index.html”设置头信息和页面属性,来学习头信息和页面属性在实际网页制作中的应用。
【知识拓展】网站制作流程
1、确定网站内容
2、规划网站结构
3、收集网站素材
4、设计制作网站页面
5、空间和域名申请
6、测试和发布网站
7、推广和维护网站
作业:
1.请简述网页文档的命名规则。
2.请简述删除站点的步骤?
3.如何修改网页背景颜色?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver网页设计与制作第二版 电子 教案 Dreamweaver 网页 设计 制作 第二 A063954 示例 项目