《网页设计与制作案例教程（第2版） 》教案 第4课 站点的创建与管理（二）

第课站点的创建与管理第课站点的创建与管理（二）4（二）站点的创建与管理（二）站点的创建与管理第课4PAGE2PAGE2PAGE5PAGE54第4第课站点的创建与管理（二） 课题站点的创建与管理(二）课时2课时（180min）教学目标知识技能目标：（1）认识什么是站点（2）学会创建并管理本地站点（3）熟悉创建和保存网页文件的基本操作（4）知道如何使用“文件”面板管理站点中的文件思政育人目标：（1）体验网页制作工具的使用方法，培养基本的工作能力（2）练习创建站点，锻炼学生的实践能力，培养学生的探究精神。教学重难点教学重点：站点的概念教学难点：创建并管理本地站点教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）小组互助（15min）第2节课：任务实施（25min）

实践探究（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解站点的相关知识【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：你知道什么是网络站点吗？【学生】思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解相关行业的背景传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍站点一、什么是站点【教师】展示站点的相关图片，帮助学习理解相关知识1．远程站点对于用户来说，远程站点就是可以通过网络访问的网站。这些站点存放在网络服务器上，只要知道IP地址任何人都可以访问。2．本地站点对于制作者来说，站点实际上就是一个文件夹，这个文件夹中存放着网站的所有网页文件及素材资源。这些文件夹一般存放在本地磁盘中，也称为本地站点，在发布之前其他人不可以访问。在网页制作完成后，制作者将站点文件夹上传至网络服务器后即成为远程站点，供用户访问。（详见教材）二、创建并管理本地站点1．站点的目录结构【教师】提出以下问题：请举例说明站点的目录混乱会导致什么问题？【学生】思考、举手回答【教师】总结学生的答案通常情况下，一个网站往往包含很多文件，大型网站的文件甚至有成千上万个。如果将这些文件杂乱存放，容易导致文件管理混乱、上传速度慢等问题。（详见教材）【教师】提出以下问题：我们已经知道了目录树混乱会导致一系列的问题，那么如何避免这些问题呢？【学生】聆听、思考、举手回答【教师】总结学生的答案为避免这些问题，创建网站目录结构应遵循以下方法和建议。（1）大型网站的站点按导航栏中的栏目内容建立子目录。例如，网页制作技术教学站点可以根据技术类别建立相应的子目录，如html、css、javascript等；企业站点可以按公司简介、产品介绍、价格、在线订单、反馈联系等内容建立相应的子目录。（2）需要经常更新的栏目（如新闻、资讯等）可以建立独立的子目录；而一些相关性强，又不需要经常更新的栏目（如联系地址、版权信息等），可以统一放在一个目录下。（3）在栏目较多时，为每个主栏目都建立独立的目录放置资源文件（图像、视频等）。（详见教材）2．创建站点在明确站点的目录结构之后，可以先在本地磁盘创建站点文件夹及其子文件夹，并放置相关的资源文件，然后使用DreamweaverCC创建站点。【教师】演示创建站点的步骤（1）本地磁盘合适位置创建“test”文件夹，并在其中创建子文件夹“img”。（2）打开DreamweaverCC，单击“站点”→“新建站点”菜单，打开“站点设置对象”对话框，在“站点名称”文本框中输入“test”，单击“本地站点文件夹”文本框右侧的浏览文件夹按钮，找到“test”文件夹，然后单击“保存”按钮。（3）站点创建完成后，在“文件”面板中即可查看创建好的站点。（4）导出和导入站点。（详见教材）【学生】观察、思考、理解3．管理站点管理本地站点的操作主要包括编辑站点、复制站点、删除站点、导出和导入站点等。【教师】根据教材提示，演示管理站点的步骤（1）编辑站点。单击“站点”→“管理站点”菜单，打开“管理站点”对话框，在“您的站点”列表框中双击站点对象，即可弹出此站点的“站点设置对象”对话框，在其中进行编辑即可。（2）复制站点。打开“管理站点”对话框，选择要复制的站点（此处选择“test”），单击“复制当前选定的站点”按钮，站点列表中即增加一个新的“test复制”站点。（3）删除站点。打开“管理站点”对话框，选择要删除的站点对象，单击“删除当前选定的站点”按钮，在弹出的对话框中单击“是”按钮确认删除，单击“否”按钮则取消删除。（详见教材）【学生】观察、思考、理解三、创建和保存网页文件【教师】演示创建和保存网页文件的步骤（1）创建网页文件。单击“文件”→“新建”菜单，打开“新建文档”对话框，在“标题”文本框中输入“测试主页”，然后单击“创建”按钮（2）保存网页文件。创建网页文件后，该文件自动显示在文档窗口中（见图2-24），单击“文件”→“保存”菜单，打开“另存为”对话框，在本地磁盘中选择“test”文件夹，在“文件名”文本框中输入“index.html”，然后单击“保存”按钮，即可将网页文件保存在“test”站点中（详见教材）【学生】观察、思考、理解四、使用“文件”面板管理站点中的文件使用“文件”面板能够快速创建、删除站点中的文件。【教师】演示使用“文件”面板能够快速创建、删除站点中的文件的步骤（1）创建文件。在“文件”面板中右击“test”站点，在弹出的快捷菜单中选择“新建文件”选项，面板中即新建了一个文件，其扩展名默认为“.html”，将其重命名为“login.html”，然后按“Enter”键，即创建了一个网页文件。（2）打开文件。双击创建好的网页文件，即可将其在文档窗口中打开。（3）删除文件。在“文件”面板中右击网页文件，在弹出的快捷菜单中选择“编辑”→“删除”选项，即可删除网页文件。（详见教材）【学生】观察、思考、理解【学生】聆听、思考、理解、记忆通过讲解，让学生了解什么是站点，通过讲解和对分析，掌握创建并管理本地站点的方法小组互助（15min）【教师】组织学生以小组为单位根据教材“提示”部分的内容，进行重命名网页文件的操作【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作【教师】进行巡视，解答学生的问题以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施

（25min）【教师】演示在Dreamweaver中如何创建并管理站点本节课将创建“传承经典网”站点，并在站点中创建两个网页文件与它们的样式文件，以及一个行为文件。（1）在本地磁盘的合适位置创建一个名为“Sculture”的文件夹，并将本书配套素材“项目二”→“任务二”中的“img”文件夹复制并粘贴到该文件夹中。（2）打开DreamweaverCC，创建一个名为“Sculture”的站点，并将本地站点文件夹设置为创建好的“Sculture”文件夹。（3）在“文件”面板中创建5个文件并分别命名为“index.html”“index.css”“index.js”“contact.html”与“contact.css”（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，通过实践熟悉利用软件DreamweaverCC进行创建和管理站点的操作，在实践过程中理解、巩固知识点实践探索

（15min）【教师】组织学生完成创建“图书交易网”站点的具体操作【学生】聆听、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于站点的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了站点的概念，通过实践熟悉了创建和管理站点的操作。希望大家在课下多加练习，进一步熟悉创建和管理站点的相关操作。【学生】总结回顾知识点总结知识点，巩固印象作业布置

（2