第1课网页设计与制作基础(一)（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页设计与制作基础(一) 课时 4课时（180 min） 教学目标 知识技能目标： （1）了解网页，网站和主页的概念 （2）了解网页类型、构成、版式和配色的相关知识 思政育人目标： （1）养成做事有计划、有条理的工作习惯 （2）有意识地培养自己的审美能力，并运用到工作中 教学重难点 教学重点：网页设计的基础知识 教学难点：能够分析总结网站的特点 教学方法 情景模拟法、问答法、讨论法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 新课预热（8 min）→ 互动导入（12 min）→传授新知（23 min） 第2节课：问题导入（5 min）→ 实践探究（25 min）→ 小组合作（5 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页设计相关知识 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学课程的大概内容，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 新课预热 （8 min） · 【教师】教师自我介绍，并介绍课程定位、内容安排、考核要求等 网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。例如，新浪网就包含新闻、财经、科技、体育、娱乐等多个版块，而每个版块又包含很多网页。 · 【学生】聆听、互动、思考 · 【教师】导入课题，板书 在网络中，网页是传递资源与信息的载体，也是网站的组成部分。本任务将简单介绍网页和网站的基本概念、网页类型、网页的构成及网页设计的基础知识。 试问：日常生活中常用的网页有哪些，你知道网页是如何制作出来的吗？ · 【学生】观看、聆听、思考 通过导入环节，与学生互相熟悉，并让学生了解这门课的大致内容和考核要求 问题导入 （5 min） · 【教师】提出问题： 你在日常生活中常用的网页有哪些，你知道网页是如何制作出来的吗？ · 【学生】聆听、思考、举手回答 通过问题导入，引导学生思考，调动学生的主观能动性 传授新知 （23 min） · 【教师】通过学生的发烟引入新课题，介绍网页、网站和主页的概念，以及网页的类型、构成、版式和配色 一、网页，网站和主页 网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。……（详见教材） 【教师】打开12306主页，并提问： 请同学们观看网页，说一说12306官网网页是由哪些元素组成的？ 【学生】观看、聆听、思考、举手回答 【教师】总结学生的回答 二、网页类型 从实现原理和功能上区分，网页分为静态网页与动态网页两种类型。 1．静态网页 使用纯HTML编写的网页为静态网页，扩展名为“.htm”或“.html”。 静态网页并不是指网页静止不动，许多静态网页也会有视频、动画等动态效果。静态网页具有以下基本特点。 （1）每一个静态网页都是一个独立的文件，内容相对稳定，容易被搜索引擎检索。 （2）静态网页没有数据库支持，网页制作与维护更加耗时。 （3）静态网页交互性相对较差，功能受限。 2．动态网页 动态网页与静态网页相对应，指使用HTML加ASP、PHP、JSP或ASP.NET等编写的网页。 动态网页可以通过程序访问数据库，拥有交互功能，也称为交互式网页。动态网页可以独立存在于服务器上，也可以由程序根据用户请求自动生成。动态网页具有以下基本特点。 （1）动态网页与数据库相连接，数据内容可以在后台更新，网站维护的工作量相对较低。 （2）动态网页能够实现用户注册、用户登录、信息管理等功能，并根据用户需求动态响应。 （3）动态网页内容并不固定，在做搜索引擎检索设计时需要进行一定的技术处理。 三、网页构成 【教师】展示网页的案例，帮助学习理解 1．网页的基本元素 从浏览者的角度出发，网页中主要包含文本、图像、多媒体、超链接等元素。 （1）文本。文本是传递信息的主要载体，新闻资讯、产品信息、企业介绍等都要依靠文本来表达。可以说，文本是网页中必不可少的元素。 （2）图像。图像能够给人非常直观的视觉效果，具有展示、装饰等功能，在网页中主要用于制作标题、网页背景、网页主图、图像超链接等。 （详见教材） 2．网页的模块 【教师】展示网页的案例（例如百度），并提出以下问题： 我们已经知道了网页的组成，