HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第1章 认识网站开发.doc

PAGE2

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

1

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第1章认识网站开发

课外学习任务：

（1）课前：

以小组为单位，分析了解常用的网站开发的知识；分析网站构建的流程以及网站开发所需要使用到的开发工具和展示工具并将了解的内容以PPT的形式记录下来。

（2）课后：

=1\*GB3①通过练习熟练掌握网页基础知识。

=2\*GB3②独立编写自己的第一个网页。

教学目标：

知识目标

掌握网页构成元素；

掌握网站建设流程；

初步了解HTML基础结构；

初步了解网页头部相关标签的使用。?

能力目标

能够独立开发一个简单的静态网页；

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

在掌握制作第一个静态网页的基础上，理解网页开发的专业知识。

重点难点及解决方法：

（1）重点：HTML页面结构

解决方法：通过课堂练习+视频式教学的方法，教师讲解网页的基本结构和相关的HTML标签的使用。引导学生积极思考，掌握静态网页开发的相关知识知识；同时通过课堂练习，使学生可以HTML结构的相关知识；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：掌握页面中的标签

解决方法：通过案例演示+启发式教学讲解的方式，细致讲解每个页面标签的功能和位置。帮助学生了解网页结构标签所在位置以及其对应的功能。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

【导引示例】

在网页设计中，使用jQuery框架可以实现更加丰富的网页交互效果。

1.网站开发概述

【网页构成元素】

网页是用HTML编写而成的一种文件，将这种文件放在Web服务器上可以让互联网上的其他用户浏览。比如访问百度网站，看到的就是百度网站的网页。网页是通过HTTP传递给浏览者的。网站显示的第一个网页称为首页。

网页具体构成元素如下。

1．文本

2．图像

3．超链接

4．表格

5．表单

6．导航栏

7．其他元素

【网站建设流程】

1．网站需求分析

2．网站整体规划

3．收集资料与素材

4．制作网页

5．域名和服务器空间的申请

6．测试与发布网站

7．后期维护与更新

【网站开发软件】

Dreamweaver?CS6?

2.HTML简介（教学重点）

【HTML基本概念】

超文本标记语言（HypertextMarkedLanguage，HTML）是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。

【HTML基本结构】

HTML文件包括文件头和文件体两部分。文件头中主要是对这个HTML文件进行一些必要的定义，文件体中的内容才是真正要显示的各种文件信息。一个HTML文件包含各种HTML元素，如图片、段落、表格等。这些HTML元素在页面中需要使用标签来分隔，因此也可以说HTML文件就是由各种HTML元素和标签组成的。

一般情况下，HTML文件的基本结构如下。

1 html /*HTML文件的开始标签，表示这是一个HTML文件*/

2 head /*文件头的开始标签，这对标签之间的是头部信息*/

3 头部信息 /*文件头的内容，也叫作文件的头部信息*/

4 /head /*文件头的结束标签*/

5 body /*文件体开始标签*/

6 文件主体，正文部分 /*文件的主体部分，是文件真正要显示的信息*/

7 /body /*文件体结束标签*/

8 /html /*HTML文件