《网页设计与制作（活页式）》 教案全套 傅伟 项目1--8 网页设计与制作 --- 婚庆网站首页.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目一网页基础

计划课时

课时

内容分析

网页设计中每个细节都是重要的，如同一个颜色的色值要相同、元素要进行规则处理、圆角按钮的大小要一样等。细节上处理得恰当，当设计的产品受到质疑时，可以详尽地说明细节设计的原因，使人信服。完美的网页设计需要巨大努力和付出，培养细心耐心的品质至关重要。

教学目标

了解网页基础知识。

熟悉网页设计语言。

掌握网页制作工具的使用方法。

重点及措施

教学重点：能够安装网页制作工具；能够使用网页制作工具设计简单页面

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：网页基础知识，网页设计语言

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务1.1信息与信息技术

1.1.1认识网页与网站

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

什么是网页和网站？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

网页是Internet中基本的信息单位，是由超文本标记语言（HyperTextMarkupLanguage，HTML）或者其他语言编写的。

网站是一个或多个网页的集合。网站是指通过浏览器在Internet上访问的页面。网站可以用于发布自己想要公开的信息，也可以用于提供相关的网络服务，同样可以获取自己需要的信息或者享受网络服务。网站设计者先将整个网站结构规划好，然后分别制作各个网页，大多数网站都会为浏览者提供一个主页，最后将其他网页与主页链接起来。

知识点讲解

讲解网页的概念：

教师展示PPT，对网页的概念进行具体讲解。网页是Internet中基本的信息单位，是由超文本标记语言（HyperTextMarkupLanguage，HTML）或者其他语言编写的。

中国知网：/

学生自主提问，教师对疑难问题进行解答。

讲解网站概念：

教师展示PPT，讲解网站概念。网站是一个或多个网页的集合。网站是指通过浏览器在Internet上访问的页面。网站可以用于发布自己想要公开的信息，也可以用于提供相关的网络服务，同样可以获取自己需要的信息或者享受网络服务。网站设计者先将整个网站结构规划好，然后分别制作各个网页，大多数网站都会为浏览者提供一个主页，最后将其他网页与主页链接起来。

中国大学MOOC：/

生自主提问，教师对疑难问题进行解答。

讲解网页的特点

教师展示PPT，讲解网页的特点。

学生自主提问，教师对疑难问题进行解答。

讲解网站分类：

教师展示PPT，讲解网站分类。网站有很多不同的分类方法，例如，按照其使用的技术可分为静态网站和动态网站；按照网站的性质可以分为企业网站、政府网站、教育网站和个人网站；按照网站的作用可以分为搜索引擎网站、社区论坛网站、在线翻译网站、软件下载网站和音乐欣赏网站等。

直观的网站分类方法是按网站的主题进行分类。主题是网站的题材，它决定网站的内容，体现网站代表的形象。一般常见的题材有公司企业、休闲娱乐、教育培训、电脑网络、文化艺术、交通旅游等，而每一个题材又可以继续划分。

学生自主提问，教师对疑难问题进行解答。

讲解网站的特征

教师展示PPT，讲解网站的特征。

学生自主提问，教师对疑难问题进行解答。

1.1.2网页的组成元素

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

网页有哪些组成要素？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

网页包含了许多元素，如文本、图像、动画、音频、视频等，使得内容丰富，引人入胜。

知识点讲解

讲解文本、图像、动画、音频、视频、

（1）教师展示PPT，讲解网页的特点。

新华网：/index.htm

1.文本

文本是指网页中叙述性的文字，是理想的网页信息载体与交流工具，网页中主要信息一般都以文本为主，与图像相比，文本虽然不如图像那样容易被浏览者注意，但却能简明扼要地表达出主题。

2.图像

图像是指网页中插入的具有说明性的图片。图像拥有丰富的色彩和表现形式，能够表达更加丰富的内容和含义，并且具有文本无法达到的视觉效果。添加适量的图像可以使制作的网页图文并茂，展现出更好的活力和表现力。

在网页中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的图像文件，其中使用广泛的是GIF和JPEG两种格式。

3.动画

动画在网页中的作用是有效地吸引浏览者更多的注意，在设计网页时可以在页面中加入动画使页面更加生动。

在