资源简介 课题 第2课 Dreamweaver CS5基本操作课时 2课时(90 min)教学目标 知识目标: (1)认识Dreamweaver CS5工作界面中各组成元素 (2)掌握在Dreamweaver CS5中定义和管理站点的方法 (3)掌握在Dreamweaver CS5中新建、打开、保存和预览网页的方法 (4)掌握利用“文件”面板管理站点文件和文件夹的方法 技能目标: (1)掌握Dreamweaver CS5软件的使用 (2)掌握Dreamweaver CS5对站点进行管理 素质目标: 工欲善其事必先利其器,学习中不急不躁,做足充分准备教学重难点 教学重点:使用Dreamweaver CS5软件制作网页的基本操作 教学难点:使用Dreamweaver CS5定义和管理站点教学方法 问答法、讨论法、讲授法、练习法教学用具 电脑、投影仪、多媒体课件、教材教学设计 第1节课:课前任务→ 考勤(2 min)→ 问题导入(3 min)→传授新知(30 min)→课堂实训(10 min) 第2节课:问题导入(3 min)→ 传授新知(27 min)→ 课堂实训(10 min)→ 课堂小结(3 min)→ 作业布置(2 min)教学过程 主要教学内容及步骤 设计意图第一节课课前任务 【教师】让学生上网查询网页制作的软件有哪些,各自有哪些特点,应如何选择适合的软件 【学生】按照要求完成课前任务 通过课前任务,让学生了解行业中网页制作各类软件考勤 (2 min) 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性,掌握学生的出勤情况问题导入 (3min) 【教师】提出以下问题,并随机邀请学生进行回答 上节课我们在记事本中通过编写XHTML代码呈现出一个简单网页,这种方式有什么缺点? 【学生】聆听、思考、回答 【教师】总结学生的回答,导入本节课内容:Dreamweaver CS5基本操作 通过上节课最原始的编写网页代码呈现网页,引出其缺点,让学生学会利用集成化的专门的网页制作软件传授新知 (30 min) 【教师】讲解新知,介绍Dreamweaver CS5软件 任务一 认识Dreamweaver CS5工作界面 一、任务说明 本任务将简单介绍Dreamweaver CS5的工作界面。其中包括应用程序栏、文档标签栏、文档工具栏、状态栏、属性检查器和面板组。 二、预备知识 (一)启动Dreamweaver CS5 【多媒体】展示“Dreamweaver CS5起始页”与“Dreamweaver CS5工作界面”图片(详见教材) 单击桌面左下角的“开始”按钮,选择“所有程序”>“Adobe Dreamweaver CS5”,就可以启动Dreamweaver CS5了。 启动Dreamweaver CS5后,首先显示起始页。通过起始页可以直接打开最近使用过的文档或其他文档,也可以创建新文档,如图2-1所示(详见教材)。 单击起始页“新建”列中的任一项,将会创建一个相应格式的新文档,并进入Dreamweaver CS5工作界面。此处单击“HTML”项,创建一个.html格式的文档并进入Dreamweaver CS5工作界面,如图2-2所示(详见教材)。 (二)应用程序栏和文档标签栏 【多媒体】展示“应用程序栏和文档标签栏”图片(详见教材) 应用程序栏位于工作区顶部,左侧显示菜单栏,右侧包含工作区切换器(可在其下拉列表中选择不同的工作区模式)、“CS Live”按钮和程序窗口控制按钮。 文档标签栏位于应用程序栏下方,左侧显示当前打开的所有网页文档的标签(标签上显示相应网页文档的名称)及其关闭按钮;右侧显示当前文档在本地磁盘中的保存路径及向下还原按钮;下方显示当前文档中包含的文档以及链接文档。当用户打开多个网页时,通过单击文档标签可在各网页之间切换。另外,单击下方的包含文档或链接文档,同样可打开相应文档。 【知识库】 如果文档名后带一个“*”号,表示网页已修改但未保存。 (三)文档工具栏 文档工具栏位于文档标签栏下方,其中包括各种可对文档进行操作的按钮。 【多媒体】展示“文档工具栏”图片(详见教材) A.显示代码视图:在文档窗口中显示代码视图,代码视图以不同的颜色显示网页XHTML代码,方便用户区分各种标签并对代码进行编辑。 B.同时显示代码视图和设计视图:将文档窗口拆分为代码视图和设计视图,这样当用户在代码视图中编辑网页HTML源代码后,单击设计视图中的任意位置或单击“刷新设计视图”按钮,能立刻看到相应的编辑结果。 C.显示设计视图:在文档窗口中显示设计视图。在设计视图中可以直接编辑网页中的各个对象(一般情况下,使用Dreamweaver制作或编辑网页主要就是在文档窗口的设计视图中进行的)。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们思考,使用Dreamweaver制作或编辑网页在文档窗口的设计视图中进行相比在代码视图中有什么好处? 【学生】聆听、思考、回答 【教师】总结学生的回答 “设计”视图在Dreamweaver工作区中着重显示其所见即所得的编辑器,它非常接近地显示了Web页面在浏览器中的效果,减少了代码编写的复杂逻辑。 【提示】 如果当前文档是XML、JavaScript、Java、CSS或其他基于代码的文件类型,则“设计”和“拆分”按钮将变为不可用。 D.实时代码:以黄色背景显示在浏览器中用于执行该页面的实际代码。 E.实时视图:在文档窗口中显示不可编辑的、交互式的、基于浏览器的文档视图,其效果与在浏览器中预览时差不多。 F.在浏览器中预览/调试:在浏览器中预览或调试文档,单击后可在弹出菜单中选择一个浏览器版本。 G.可视化助理:设置在编辑网页时显示或隐藏某个可视化助理以便于操作,如显示表格边框、表格宽度等。 H.刷新设计视图:用于在代码视图中进行更改后刷新文档的设计视图。 I.文档标题:为文档设置标题。浏览网页时,该标题将显示在浏览器的标题栏中。 (四)状态栏 状态栏位于文档窗口底部,它提供了与当前文档相关的一些信息。 【多媒体】展示“状态栏”图片(详见教材) 标签选择器:显示了网页文档中当前选定内容的标签层次结构。单击某个标签可以选中网页中该标签所代表的内容,如单击“”标签,可选中网页中与之对应的表格。 【课堂问答】 【教师】随机邀请学生回答以下问题 上节课我们在记事本中编写XHTML代码,出现了哪些标签,各代表什么意思? 【学生】聆听、思考、回答 【教师】总结学生的回答 定义文档的头部,设置标题,内容主体,定义标题,定义段落。 【知识库】 标签选择器中显示对象层次结构的方式为自左向右,也就是说,在标签选择器中,标签的位置越靠左,相应对象覆盖的范围就越大。 选取工具:为默认选择工具,用于在页面中选取对象。 手形工具:如果页面内容超出当前窗口,要平移页面,可选择“手形”工具 ,然后在页面中单击并拖动。 缩放工具和“设置缩放比率”下拉菜单:如要放大文档显示比例,可在选择缩放工具后,在页面中需要放大的位置单击;如要缩小文档显示比例,可在选择该工具后,按住【Alt】键的同时在页面中单击。另外,也可在“设置缩放比率”下拉列表中选择缩放比率以放大或缩小文档显示比例。 (五)属性检查器和面板组 使用属性检查器可以检查和设置当前选定页面元素(如文本和图像)的最常用属性。“属性检查器”中的内容会根据选定元素的不同而变化。 默认状态下,面板组位于文档窗口右侧。面板组中包含各种类型的面板,Dreamweaver中的大部分操作都需要在面板中实现。其中最常用的有“插入”面板、“文件”面板和“CSS样式”面板。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容,讲解调整Dreamweaver CS5工作界面 三、任务实施——调整Dreamweaver CS5工作界面 【多媒体】演示调整Dreamweaver CS5工作界面的具体步骤 步骤1 默认状态下,文档窗口的右侧和下方分别是面板组和属性检查器。要关闭属性检查器和面板组,可按【F4】键;再次按【F4】键可恢复原来的状态。 步骤2 要打开或关闭某个面板,可选择“窗口”菜单下的相应菜单项。例如,可选择“窗口”>“文件”菜单,打开或关闭“文件”面板。 【知识库】 在打开“窗口”菜单后,可以看到有些菜单名左侧有一个对号√,这说明该面板已经打开,再次选择可关闭面板。 步骤3 如要折叠窗口右侧的面板区域,可单击该面板区域右上方的按钮,此时按钮将变成按钮,再次单击可展开面板区域。当面板区域处于折叠状态时,单击某个面板按钮可展开该面板,再次单击可将面板恢复为按钮状态。 步骤4 如果面板组包含了多个面板,可以在展开面板组后,通过单击面板标签在各面板之间切换。 步骤5 双击某个面板组名称或名称右侧的空白处,可以展开或折叠面板组。 步骤6 单击面板组标题栏并拖动,可将面板组变为浮动状态。此时可拖动面板组标题栏,将其置于屏幕上任意位置。要还原面板组到文档窗口右侧的面板区域,可将其重新拖动至面板区域。 步骤7 如果用户在更改面板组布局后又想恢复其原始布局,可选择“窗口”>“工作区布局”>“重置‘设计器’”菜单。 【学生】聆听、观看、记录、思考、记忆 【教师】讲解新知,介绍站点基本操作 任务二 站点基本操作 一、任务说明 本任务将简单介绍在Dreamweaver中定义和管理站点的方法。 二、预备知识 (一)定义站点 在Dreamweaver中定义站点的目的是把本地磁盘中的站点文件夹同Dreamweaver建立一定的关联,从而方便用户使用Dreamweaver管理站点和编辑站点中的网页文档,以及上传或下载站点内容等。 在开始定义站点之前需要先在本地磁盘创建一个文件夹,作为站点根文件夹;然后在Dreamweaver中选择“站点”>“新建站点”菜单;接着在打开的对话框中设置“站点名称”和“本地站点文件夹”信息。 (二)管理站点 定义站点后,如果需要修改站点属性、复制或删除站点等,可执行下面的操作。 步骤1 启动Dreamweaver CS5后,选择“站点”>“管理站点”菜单,打开“管理站点”对话框。该对话框列出了Dreamweaver中定义的所有站点,选中某站点后,单击“删除”“复制”按钮,可删除或复制所选站点。 步骤2 选择某站点(此处为“买肯抠”),然后单击“编辑”按钮。 步骤3 打开“站点设置对象 买肯抠”对话框,在该对话框中,可根据需要修改站点名称或本地站点文件夹。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容,讲解在Dreamweaver CS5中定义站点“天音” 三、任务实施——在Dreamweaver CS5中定义站点“天音” 在项目一的任务实施“规划天音企业网站结构”中,曾在本地磁盘创建了一个“SM”和“images”文件夹,这里以它作为“天音”网站根文件夹。 首先将本书配套素材“素材与实例\素材\Dreamweaver\SM”目录下images文件夹中的内容拷贝至本地磁盘中的images文件夹中,将“SM”文件夹中的“text.txt”文档拷贝至“SM”文件夹中,然后执行以下操作。 【多媒体】演示在Dreamweaver CS5中定义站点“天音” 步骤1在Dreamweaver中选择“站点”>“新建站点”菜单,打开“站点设置对象……”对话框,在“站点名称”文本框中输入站点名,此处为“天音”。 【提示】 在开始网页制作之前,最好将网站中用到的所有文件都分类放置在站点文件夹中。比如,网页文件放在根目录下,图像文件放在images文件夹里,动画文件放在swf文件夹里,以便更顺利地完成站点的创建和网页的制作。 【课堂问答】 【教师】随机邀请学生回答以下问题 网站中用到的所有文件都必须放置在站点文件夹中吗? 【学生】聆听、思考、回答 【教师】总结学生的回答 不一定在根目录,但一般放于根目录,这样便于各类文件的管理,以及对各类资源文件的使用。 步骤2 单击“本地站点文件夹”编辑框右侧的“浏览文件夹”按钮,在打开的“选择根文件夹”对话框中选择前面创建的文件夹“SM”,然后单击“选择”按钮。 步骤3 回到“站点设置对象 天音”对话框,单击“高级设置”中的“本地信息”链接,按照设置站点文件夹的方法,设置“默认图像文件夹”为“images”。 步骤4 在“站点设置对象 天音”对话框中单击“保存”按钮,即完成网站的定义。此时可看到“文件”面板中显示了刚定义的站点。 【知识库】 如果Dreamweaver中定义了多个站点,可以通过单击“文件”面板中的“站点名称”下拉列表来选择站点,使其成为当前站点。“文件”面板的列表窗口中显示了当前站点中的所有文件和文件夹。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式,让学生认识Dreamweaver CS5工作界面中各组成元素,包括软件启动,认识应用程序栏、文档标签栏、文档工具栏、状态栏,以及属性检查器和面板组;通过实训,实际操作来调整Dreamweaver CS5工作界面,加深学生对软件界面的印象;同时,讲解了在Dreamweaver CS5中定义和管理站点的方法,包括如何定义和管理站点,通过实训,完成站点的定义的管理课堂实训 (10 min) 【教师】组织学生完成以下任务 按照上述任务实施中所讲步骤,熟悉软件界面的组成和基本操作,完成“天音”站点的定义。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训,巩固课堂所学知识,帮助学生熟练使用软件,以及掌握站点的创建方法第二节课问题导入 (3 min) 【教师】随机邀请学生回答以下问题 熟悉了软件的使用和站点的定义之后,我们应该怎么去创建网页? 【学生】聆听、思考、回答 用问题导入,让学生在熟练软件使用后,有探索新知的兴趣传授新知 (27 min) 【教师】讲解新知,介绍网页文档基本操作 任务三 网页文档基本操作 一、任务说明 定义好站点后,便可以在站点中创建网页了。本任务首先学习在Dreamweaver中新建和保存网页文档的方法,然后学习打开、预览和关闭网页文档的方法,最后学习利用“文件”面板管理站点中网页文档和文件夹的方法。 二、预备知识 (一)新建和保存网页文档 在Dreamweaver CS5中可以非常容易地创建网页文档。下面通过新建一个网页文档,并将其保存,来学习使用Dreamweaver新建和保存网页文档的方法。 步骤1 启动Dreamweaver CS5后,选择“文件”>“新建”菜单,或按【Ctrl+N】组合键,打开“新建文档”对话框。 步骤2 在左侧的“文档类型”列表中选择一项(此处选择“空白页”),在“页面类型”列表中选择网页类型(此处选择“HTML”),在“布局”列表中选择布局类型(此处选择“无”),单击“创建”按钮,便创建了一个新文档。 【课堂问答】 【教师】随机邀请学生回答以下问题 “文档类型”列表中除了常用的网页类型“HTML”,还有哪些类型? 【学生】聆听、思考、回答 【教师】总结学生的回答 JavaScript、HTML、CSS属于网页前端呈现元素,你所看到的网页内容就是由这些元素共同构成的。JSP、PHP、ASP则是运行在服务器端的,可根据用户的请求搜索数据库,然后把搜索结果再结合上面的JavaScript、HTML、CSS等元素生成网页后发送到用户的客户端(即浏览器)。 步骤3 新建或编辑网页文档后,需要将其保存,才能使所做的设置生效。要保存前面新建的网页文档,可选择“文件”>“保存”菜单,或按【Ctrl+S】组合键,打开“另存为”对话框。 步骤4 在该对话框的“保存在”下拉列表中选择保存文件的文件夹(此处为已经存在的站点文件夹“macaco”),在“文件名”文本框中输入文件名(此处为“p2.html”),单击“保存”按钮,即可将文档保存。 【知识库】 网页文档名称最好使用小写英文字母;对于比较长的网页文档名可以使用下划线“_”隔开多个单词或关键字。另外,网站首页一般命名为index.html,index.asp或者index.php,后缀名与网页本身所使用的技术是一一对应的。 对于已经保存过的文档,在执行保存操作时,不会再弹出“另存为”对话框。 (二)打开、预览和关闭网页文档 若要对已有的文档进行编辑,就需要在Dreamweaver中打开该文档。另外,在Dreamweaver中打开网页文档并执行相应操作后,如果想查看它在浏览器中的效果,可执行预览操作。 步骤1 要打开现有的网页文档进行编辑,可选择“文件”>“打开”菜单(或按【Ctrl+O】组合键),打开“打开”对话框。 步骤2 在“查找范围”下拉列表中选择网页文档所在位置(此处选择本书配套素材“素材与实例\实例\Dreamweaver\macaco”文件夹),在“文件列表”中选择要打开的网页文档(此处选择“index.html”)。 步骤3 单击“打开”按钮。 步骤4 如要预览网页文档,可在打开文档后按【F12】键,或单击文档工具栏中的按钮,在其下拉列表中选择“预览在IExplore”项。如果文档已保存,将直接在IE浏览器中打开。 【提示】 如果网页文档已修改但未保存,执行预览操作时会弹出图2-21所示的提示框,单击“是”按钮,系统将自动保存并在IE浏览器中打开文档。 步骤5 要关闭文档,只需单击文档标签栏上的“关闭”按钮(或按【Ctrl+W】组合键),此处将“index.html”文档关闭。执行该操作时,如果文档已修改但未保存,系统同样会弹出提示框,询问是否保存修改。 (三)利用“文件”面板管理站点文件和文件夹 一般在定义站点后,都会利用“文件”面板来创建、重命名或打开站点中的网页文档和文件夹。 步骤1 选择“窗口”>“文件”菜单,打开“文件”面板。要在当前站点的某个文件夹中创建网页文档,可右键单击该文件夹,在弹出的快捷菜单中选择“新建文件”选项。 步骤2 此时在当前站点中新建了一个网页文档,并且该网页文档名处于可编辑状态。 步骤3 用户可直接输入文档名并按【Enter】键来命名文档。本例是在站点根文件夹中创建名称为“p3.html”的网页文档。 步骤4 同样,要新建文件夹,可在目标文件夹上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”选项,然后给新建的文件夹命名。 步骤5 要重命名现有的网页文档或文件夹,可首先在“文件”面板中选中文档或文件夹,然后单击文档名或文件夹名(或按【F2】键),此时文档名或文件夹名将变为可编辑状态,输入新名称并按【Enter】键即可。 【提示】 重命名文档时,注意不要更改其扩展名。 步骤6 当不需要站点中的某个网页文档或文件夹时,可将其删除,方法为:右击要删除的网页文档或文件夹,在弹出的快捷菜单中选择“编辑”>“删除”菜单,然后在弹出的提示框中单击“是”按钮。 【小技巧】 在选中需要删除的文档或文件夹后,按键盘上的【Delete】键同样会弹出确认删除提示框,单击“是”按钮即可。 【课堂问答】 【教师】随机邀请学生回答以下问题 总结一下我们在完成各类操作时可以使用的快捷键。 【学生】聆听、思考、回答 【教师】总结学生的回答 【Ctrl+N】组合键,打开“新建文档”对话框;【Ctrl+S】组合键,打开“另存为”对话框;【Ctrl+O】组合键,打开“打开”对话框;【Ctrl+W】组合键,关闭当前文档;选中文档或文件夹后,【Delete】键删除,【F2】键重命名;打开文档后【F12】键,预览网页文档。 步骤7 除上述操作外,在“文件”面板中双击某个网页文档,可在文档编辑窗口中打开该文档。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容,讲解在“天音”站点中创建并命名网页 三、任务实施——在“天音”站点中创建并命名网页 【多媒体】演示在“天音”站点中创建并命名网页 步骤1 启动Dreamweaver CS5,打开“文件”面板,在“站点名称”下拉列表中选择“天音”。 步骤2 右键单击站点根文件夹,在弹出的快捷菜单中选择“新建文件”选项,新建文档并命名为“index.html”。 步骤3 按照同样的方法,在站点中再新建一个文档,并命名为“sub1.html”。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式,帮助学生掌握网页文档基本操作,包括:新建、打开、保存和预览网页的方法,以及利用“文件”面板管理站点文件和文件夹的方法;通过实训在“天音”站点下创建index.html,练习网页文档的新建、打开、保存和预览,练习在“文件”面板管理站点文件和文件夹课堂实训 (10 min) 【教师】组织学生完成以下任务 请同学们在自己的实训电脑上完成在“天音”站点下创建网页文档,练习网页文档的新建、打开、保存和预览,练习在“文件”面板管理站点文件和文件夹。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训,帮助学生进一步巩固所学知识,并能够动手完成网页文档的创建,站点文件管理课堂小结 (3 min) 【教师】简要总结本节课的要点 在本次课中,主要介绍了Dreamweaver CS5工作界面中各组成元素;定义和管理站点的方法,只有定义了站点,才能更方便地管理网页和网站中的其他文件;网页文档的基本操作,包括创建、保存、修改、删除等;使用“文件”面板来创建和管理网页文档的方法。希望大家课下能够及时巩固复习,熟练掌握相关应用。 【学生】总结回顾知识点 总结知识点,从宏观上把握所学知识,梳理知识要点作业布置 (2 min) 【教师】布置课后作业 完成项目实训——定义“蝶舞”站点。在本地磁盘新建一个文件夹“butterfly”,将本书配套素材“素材与实例\实例\Dreamweaver\butterfly”目录下的“images”文件夹拷贝至新文件夹中,然后在Dreamweaver中定义一个名为“蝶舞”的站点,将“butterfly”文件夹设置为站点根文件夹,并在站点中新建一个网页文档“index.html”。 【学生】完成课后任务 通过课后练习,复习巩固所学知识教学反思 本节课中完成了Dreamweaver CS5软件的基本操作,包括:认识软件操作界面,定义和管理站点,网页文档的操作,“文件”面板的使用。本节课不足之处是没有通过实例来配合介绍软件各界面的功能,需进一步优化。 展开更多...... 收起↑ 资源预览