资源简介

课题 网页设计与制作基础( 二 ）
课时 2课时（90 min）
教学目标 知识技能目标： （1）了解Internet，IP地址，域名，WWW，URL和HTTP （2）认识网站建设流程 （3）知道网页制作语言和网页制作、测试工具 思政育人目标： （1）养成做事有计划、有条理的工作习惯 （2）有意识地培养自己的审美能力，并运用到工作中
教学重难点 教学重点：网页制作语言和网页制作、测试工具 教学难点：能够保存、编辑与运行网页文件
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（33 min） 第2节课：问题导入（5 min）→ 任务实施（20 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页制作相关知识 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学课程的大概内容，激发学生的学习欲望
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
问题导入 （10 min） 【教师】提出以下问题： 同学们思考一下，我们现在使用的网络叫什么名字？不同国家、地区之间是通过什么协议来使用网络呢？ 【学生】思考、举手发言 Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的，全球最大的开放式计算机网络。 通过问题导入，引导学生思考，调动学生的主观能动性，为学习新知识做好准备
传授新知 （33 min） 【教师】通过学生的发言，引入新的知识点，介绍Internet，IP地址和域名 一、Internet，IP地址和域名 【教师】展示因特网的基本概念和教师机的IP地址，帮助学习理解 Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的，全球最大的开放式计算机网络。 因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（internet protocol address）。IP地址是一个32位的二进制数，为方便使用，一般用4个小于256的十进制数表示，4个数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。 （详见教材） 【教师】布置以下学习任务： 阅读教材“高手点拨”部分，了解internet与Internet的区别。 【学生】自主学习、思考 【教师】利用多媒体展示各级各类网站的域名，并进行讲解 由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们在浏览器地址栏中输入搜狐网站的域名“”，然后按“Enter”键即可访问搜狐网站。 域名可分为顶级域名（一级域名）、二级域名和三级域名等。 （详见教材） 二、WWW，URL和HTTP 【教师】提出以下问题： 同学们知道什么我们常用的网址前缀中WWW和HTTP有什么含义吗 【学生】聆听、思考、举手回答 【教师】总结学生的答案 WWW：万维网（world wide web，WWW）又称全球信息网，是Internet的信息服务类型，它将世界各地的信息资源以超文本或超媒体的形式组织成一个巨大的信息网络，用户可以使用Web浏览器随心所欲地在万维网中漫游，获取感兴趣的信息。这些信息由URL标识，通过HTTP传送给用户。 HTTP：超文本传输协议（hypertext transfer protocol，HTTP）负责规定浏览器和服务器怎样互相交流。 （详见教材） 【教师】展示网址的组成，辅助学习理解URL URL：统一资源定位符（uniform resource locator，URL），也称为网址，是世界通用的负责给万维网上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名或IP地址、资源在服务器中的路径和文件名4部分组成。 （详见教材） 三、网站建设流程 【教师】展示网站建设流程图，辅助学习理解网站建设流程 1．网站策划 网站策划可以分为分析策划和资料收集两个部分。制作网站前，首先需要分析网站的功能及建站的目的，确定网站的用户群和网站内容，并出具详细的网站策划书，然后根据策划书搜集建站所需的相关资料和素材。 2．设计页面 网页设计师与客户进行沟通，了解客户的基本要求后，制定网站建设方案并使用图像处理软件设计页面效果图。 3．效果图切片 在效果图得到客户认可后，设计师可使用图像处理软件将效果图切割并保存为较小的图像文件，留待后面制作网页时使用。 （详见教材） 【教师】布置以下小组合作学习任务： 根据网站建设流程图，查找资料，以小组为单位说一说你们想建设什么网站，根据流程图尽量详细的规划网站。完成后将学习成果以word形式提交到文旌课堂APP。 【学生】聆听、思考、合作、完成学习任务 【教师】展示网页的案例（例如百度），并提出以下问题： 你都知道哪些网页制作语言？ 【学生】聆听、思考、举手回答 【教师】总结学生的回答并讲解知识点——网页制作语言 1．HTML5 HTML是hypertext markup language（超文本标记语言）的英文缩写，它是制作网页的主要语言。HTML有许多版本，目前最新版是HTML5。 2．CSS3 CSS是cascading style sheets（层叠样式表）的英文缩写，用于设置网页中各元素的样式，如文本的大小、颜色与图像的边框、位置等。 3．JavaScript JavaScript简称JS，它是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。 （详见教材） 五、网页制作与测试工具 【教师】展示网页制作与测试的工具例如Adobe Photoshop、Adobe Dreamweaver等，辅助学生理解 1．网页设计工具 设计网页或制作网页中使用的素材图像，通常需要使用制图工具制作或处理。常用的相关软件有Adobe Photoshop、Adobe Illustrator和CorelDRAW等，最常用的是Adobe Photoshop，也就是我们常说的PS。 2．网页制作工具 网页文件是纯文本文档，使用计算机自带的记事本软件即可编写制作。不过记事本软件的功能相对匮乏，对使用者的技术要求较高，不适合初学者使用。常用的专业软件有Notepad++、Sublime Text、HBuilder X等，对于初学者来说更适合使用Adobe Dreamweaver CC，本书选用的工具正是该软件。 3．网页测试工具 网页测试就是查看网页的效果是否符合预期，验证网页的功能是否完好，检测网页的链接是否正确。 （详见教材） 【学生】聆听、思考、理解、记忆 通过讲解，让学生了解网页类型，通过讲解和对网页的分析，掌握网页的构成
第二节课
问题导入 （5 min） 【教师】提问引出新知识点 我们上节课已经学习了网页制作的基本知识，本节课先思考这个问题：如何保存、编辑与运行网页文件？ 【学生】思考、发言 用问题导入，让学生主动探究保存、编辑、运行的基本操作
任务实施 （20 min） 【教师】演示保存、编辑和运行“北京鲁迅博物馆”网站的操作，并对其进行分析 （1）在谷歌浏览器中打开“北京鲁迅博物馆”网站主页，在工具栏中单击“自定义及控制”按钮 ，在展开的下拉列表中选择“更多工具”→“网页另存为”选项…… （2）打开“另存为”对话框，选择合适的本地磁盘位置，然后单击“保存”按钮，将网页文件保存到本地。 （3）在文件资源管理器中找到保存的文件，右击该网页文件，在弹出的快捷菜单中选择“打开方式”→“记事本”选项，使用记事本打开网页文件。 （4）记事本软件中显示网页文件的代码，修改记事本中的代码即可改变页面内容。例如，修改