版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
课程教案
第1章网站开发入门
课题名称
第1-3节网站开发相关知识、HTML与CSS基础语法、网页基本结构
授课班级授课学时2
授课地点授课形式讲授、演示
参考教材《前端HTML+CSS修炼之道》
教学资源电子课件、教案、文字材料
知识目标：了解网站开发的基本流程和相关知识；了解HBuiIder工作环境及使用
方法，能够建立站点及新建网页；了解HTML&CSS在网页制作中的作用，了解Web
标准的概念，能够使用HTML标签创建简单的网页；
教学目标
技能目标：网站开发的基本流程和相关知识；HBuilder工作环境；Web标准的概
念
素质目标：培养学生认真、一丝不苟的学习态度
教学
HTML与CSS基础语法、网页的基本结构
重点
教学重点与难点教学
网页的基本结构
难点
本次所讲内容选自教材第1章第『3节。因为本次课程是学习网站制作的基础，
学情分析
学生必须掌握软件的使用，掌握站点的建立及网页的创建。
课前：预习
课中：
网站基础知识
教学过程
创建HBuilder站点
制作简单的IITML+CSS页面
课后：启动HBuilder,熟悉其工作界面；创建“阳光旅游”网站，并创建一个网
页文件“index.html”和图像子文件夹"img”
采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在
教学反思上机课上学生学会了如何创建站点和简单的网页页面；课后布置了有关站点的作
业，并且利用上机时间完成和指导工作
课程网站开发软件及基础语法教学设计
2021级计算机
课程名称HTML5&CSS3授课对象应用技术专业
1-4班
第1章网站开发入门
本次课学
授课章节第1-3节网站开发相关知识、HTML与CSS基2学时
时数
础语法、网页基本结构
1.了解网站开发的基本流程和相关知识；
2.了解HBuilder工作环境及使用方法，能够建立站点及新建网页；
教学目的
3.了解HTML&CSS在网页制作中的作用，了解Web标准的概念,能够使用HTML
标签创建简单的网页；
本次所讲内容选自教材第1章第卜3节。因为本次课程是学习网站制
教学分析
作的基础，学生必须掌握软件的使用，掌握站点的建立及网页的创建。
教学重点与重点HTML与CSS基础语法、网页的基本结构
难点难点网页的基本结构
教学方法•课堂讲授•讲解例题•电子课件•案例分析O小组讨论
与手段•文字材料•提问。音像材料其他：代码演示
教学过程设计
教学内容教学过程设计意图时间分配
网站是一种新型的信息传播工具，
人们通过它来发布自己想要公开的
资讯及提供相关的网络服务，许多引入本章所学
课程导入5分钟
公司都要自己的网站，用于宣传公内容
司或发布产品信息等，那么大家可
以思考下如何开发一个网站，即开
发的流程
(1)网站基础知识
网页就是我们上网时在浏览器中打
开的一个个画面；
让学生理解网
了解网站开发流程网站就是一组相关网页的集合；20分钟
站开发流程
主页就是打开某个网站时显示的第
一个网页，又叫首页；
(2)Internet,IP地址和域名
Internet的全称是Internetwork,
中文称为因特网；
因特网上连接了不计其数的服务器
和客户机，每一个主机在因特网上
都有一个唯一的地址，我们称这个
地址为IP地址；
一种与IP地址对应的字符来表示
地址，这就是域名；
(3)WWW,HTTP,URL和浏览器
WWW是WorldWideWeb的缩写，中
文称为“万维网”，也可简称为Web；
HTTP：超文本传送协议，它负责规
定浏览器和服务器怎样互相交流；
URL：统一资源标识符，也称为网址；
浏览器：是WWW服务的客户端浏览
程序；
步骤1：选择菜单栏中的“站点”>
“新建站点”菜单；
步骤2：在“站点名称”文本框中
让学生掌握如
创建站点输入站点名称，在“本地站点文件20分钟
何创建站点
夹”输入步骤1中文件夹的物理地
址；
步骤3：单击“保存”。
以案例讲解网页基本结构
见或不见
你见
或者不见我
我就在那里
不悲不喜
你念
或者不念我
.就在荔a
不来不去通过具体网页
你爱
或者不爱我
爱就在那里实例让学生深
不增不减
入理解网页节35分钟
(1)HTML标签概述本结构
HTML标签是由尖括号括起来的关
制作简单的HTML+CSS键词，绝大多数HTML标签都是成对
页面出现的，包含标记头◊和标记尾〈
/〉。标记头是开始标签，标记尾是
结束标签，中间是元素内容，如段
落标签<pX/p>。除双标签外也存在
少量的单标签，如换行标签<br/>。
(2)HTML标签格式
格式1：〈标签名>标签内容(文本
或超文本)〈/标签名〉
格式2：〈标签名属性名1=〃属性
值1”属性名2="属性值2〃〉标签
内容(文本或超文本)〈/标签名〉
格式3：〈标签名/>
(3)网页基本结构
<html>
<head>
<title></title>
<meta/>
<style></style>
<link></link>
<script></script>
</head>
<body>
</body>
</html>
(4)网页的WEB标准
认识Web标准；
Div+CSS布局优势；
符合Web标准的HTML代码规范
贯穿本节所讲
本次课程重点了解网站开发流程。
知识，对必须
课程内容总结理解HTML基本结构，并且学会创建5分钟
掌握的内容进
简单的网页。
行总结复习
启动Dreamweaver,熟悉其工作界
思考题或预习题或作面；创建“阳光旅游”网站，并创巩固课堂知识5分钟
建一个网页文件“index.html”和
图像子文件夹“img”
业题
《前端HTML+CSS修炼之道》
主编：聂常红
《HTML5网页设计》
参考资料
主编：李强
《网页设计与制作案例教程》
主编：马涛、王然、彭芳
采用启发式教学，通过多媒体课件
现场演示更加生动，与学生互动效
果更好；
课后小结在上机课上学生学会了如何创建站
点和简单的网页页面；
课后布置了有关站点的作业，并且
利用上机时间完成和指导工作
课程教案
第1章网站开发入门
课题名称
第1-3节网站开发相关知识、HTML与CSS基础语法、网页基本结构
授课班级授课学时2
授课地点授课形式上机
参考教材《前端HTML+CSS修炼之道》
教学资源电子课件、教案、文字材料
知识目标：在理论课基础上通过上机练习理解HTML基本结构以及一些常用标签的
使用。
教学目标技能目标：通过上机练习让学生基本可以熟练掌握开发环境的基本操作，以及HTML
基本结构、熟练掌握一些基本标签的使用。
素质目标：让学生对HTML有初步认识，能灵活使用HTML常用的标签。
教学
HTML与CSS基础语法、网页的基本结构
重点
教学重点与难点教学
网页的基本结构
难点
本次上机课为课程第一次上机课，上机任务内容相对不是特别难，通过此次课程
学情分析
来调用学生积极学习的态度和学习兴趣。
课前：预习教材第一章节内容
课中：
复习理论课知识点
教学过程任务一:使用记事本编写HTML基本结构
任务二:使用Hbuilder开发工具制作诗词或歌词显示网页
课后：复习上机内容，预习下章节内容，思考CSS样式表的作用。
任务工作量不大，但学生刚接触课程，会有部分同学基本操作有很大问题，需要
教学反思指派其他学生或者老师自己慢慢给学生启发，提醒，让学生能够在基础操作上不
掉队。
课程网站开发软件及基础语法教学设计
2021级计算机
课程名称HTML5&CSS3授课对象应用技术专业
1-4班
第1章网站开发入门
本次课学
授课章节第1-3节网站开发相关知识、HTML与CSS基2学时
时数
础语法、网页基本结构
1.熟练掌握HBuilder工作环境及使用方法，以及在环境中文件夹的命名习
惯。
教学目的
2.熟练掌握HBuilder工作环境站点创建及文件的创建；
3.熟练掌握HTML基本结构以及HTML常见标签的使用；
本次上机课为课程第一次上机课，上机任务内容相对不是特别难，通过此次课程
教学分析
来调用学生积极学习的态度和学习兴趣。
1.熟练掌握HBuilder工作环境及使用方法，以及在环境中文件
夹的命名习惯。
教学重点与重点
2.熟练掌握HBuilder工作环境站点创建及文件的创建；
难点
3.熟练掌握HTML基本结构以及HTML常见标签的使用；
难点熟练掌握HTML基本结构以及HTML常见标签的使用；
教学方法•课堂讲授•讲解例题•电子课件•案例分析•小组讨论
与手段•文字材料•提问。音像材料其他：代码演示
教学过程设计
教学内容教学过程设计意图时间分配
复习理论课知识点，以学生回答问
回顾知识点，
题+老师引导的方式回顾理论课：
方便学生在上
(1)HTML基本结构中有哪些标签，
课程导入机任务中灵活10分钟
分别代表什么含义。
运用这些知识
(2)<br/>,<P〉,<hn>标签分别能
点
产生什么效果。
(1)提问学生文本文件和HTML文
件的后缀名分别是什么？
布置任务:使用记事本让学生能够熟
(2)讲解任务实现思路。
练掌握HTML25分钟
一创建记事本文件，将记事本文件
编写HTML基本结构的基本结构
的后缀txt修改成html.
一打开方式中，选择用记事本打开。
一编写HTML基本结构,并且在body
中编写文本内容
一保存文件
—使用浏览器打开文件进行测试
(3)关注学生完成情况，对困难学
生进行帮助。
(4)总结学生遇到的共性问题进行
集中讲解。
(1)老师演示使用开发工具创建站
点的步骤。
(2)布置任务让学生创建站点。
让学生熟悉开
熟悉开发工具的使用(3)总结共性问题。15分钟
发工具的使用
(4)提问在站点中的img,css,js
等文件夹习惯上分别用于存储什么
类型的文件
(1)任务需求使用HTML实现如下
诗词。
清平乐
年年霄里.京插梅花醉,接尽梅花无好意.盗得闲衣清泪!
今年海角天涯,旃两蹙生华.
看取晚采风势,故应难看梅花.
(2)讲解实现思路
让学生自主实
一在站点中创建HTML文件
布置任务：实现文字排践掌握HTML
一在body中添加H标签实现标题
版的网页中常用文本类
一使用hr标签实现分割线25分钟
标签的使用。
—使用p标签实现诗句正文的编
写。
(3)关注学生完成情况，对困难学
生进行帮助。
(4)总结学生遇到的共性问题进行
集中讲解。
本次课程通过自主上机实践让学生总结上机知识
熟悉网站开发流程。熟练掌握HTML点和上机过
课程内容总结10分钟
基本结构，并且学会创建简单的网程，让学生知
页以及熟练掌握常用文本标签的使晓自己的掌握
用。情况并根据掌
握情况做复习
工作。
思考题或预习题或作
复习上机内容，预习下章节内容，思考
巩固课堂知识5分钟
c$s样式表的作用。
业题
《前端HTML+CSS修炼之道》
主编：聂常红
《HTML5网页设计》
参考资料
主编：李强
《网页设计与制作案例教程》
主编：马涛、王然、彭芳
任务工作量不大，但学生刚接触课程，
会有部分同学基本操作有很大问题，需
课后小结要指派其他学生或者老师自己慢慢给学
生启发，提醒，让学生能够在基础操作
上不掉队。
课程教案
第2章HTML标签与CSS样式基础
课题名称
第1-2节HTML标签、CSS样式基础
授课班级授课学时2
授课地点授课形式讲授、演示
参考教材《前端HTML+CSS修炼之道》
教学资源电子课件、教案、文字材料
知识目标：掌握HTML的语法规则；掌握网页各元素的HTML标签的写法，能够编
写网页结构层的HTML代码；掌握CSS的语法规则；掌握CSS的3选择器（标签选
择器、类选择器和id选择器）的使用；掌握在页面中引入CSS的4种方式
教学目标
技能目标：HTML的语法规则；HTML标签的写法；CSS的语法规则；掌握CSS的
3选择器；页面中引入CSS的4种方式
素质目标：培养学生自主学习意识；培养学生良好的编程规范
教学
HTML标签（标题、水平线、段落、列表、图像、超链接）
重点
教学重点与难点教学
CSS样式基础、选择器类型
难点
本次所讲内容选自教材第2章第1-2节。学生须掌握各元素的HTML标签写法；理
学情分析
解CSS语法规则、掌握CSS的3种选择器，并且掌握引入CSS的4种方式。
课前：预习
课中.
制作鲜花导购网页的结构一一HTML标签
修饰鲜花导购网页一CSS样式基础
教学过程
（1）CSS引入的4种方式
（2）选择器的类型
（3）选择器的集体声明、嵌套和优先级
课后：制作个人主页
采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在
教学反思上机课上学生学会HTML标签及其使用方法；掌握了CSS引入的方法，以及选择器
的格式书写课后布置了简单网页的制作，并且利用上机时间完成和指导工作
课程HTML标签、CSS样式基础教学设计
2021级计算机应
课程名称HTML5&CSS3授课对象用技术专业1-4
班
第2章HTML标签与CSS样式基础本次课学
授课章节2学时
第1-2节HTML标签、CSS样式基础时数
1.掌握HTML的语法规则；
2.掌握网页各元素的HTML标签的写法,能够编写网页结构层的HTML代码；
教学目的3.掌握CSS的语法规则；
4.掌握CSS的3选择器（标签选择器、类选择器和id选择器）的使用；
5.掌握在页面中引入CSS的4种方式
本次所讲内容选自教材第2章第1-2节。学生须掌握各元素的HTML标签写
教学分析法；理解CSS语法规则、掌握CSS的3种选择器，并且掌握引入CSS的4
种方式。
教学重点与重点HTML标签（标题、水平线、段落、列表、图像、超链接）
难点难点CSS样式基础、选择器类型
教学方法•课堂讲授•讲解例题•电子课件O案例分析O小组讨论
与手段・文字材料。提问。音像材料其他：代码演示
教学过程设计
教学内容教学过程设计意图时间分配
网页已从以前大范围应用的
表格布局过渡到现在的
Div+CSS布局。这个转变顺应
引入本章学习
课程导入了技术的需求，现在网页主要5分钟
的知识
由3部分组成：结构、表现和
行为，我们本章来学习网页结
构层和表现层。
通过具体实际
案例来依次讲
制作鲜花导购网页的结构解HTML标签
以实例来讲解HTML标签30分钟
---HTML标签等，使学生更
加容易理解，
并且学会代码
书写
需胃:\“Z3X•滥ESraGSE"懦
薮嚣感澎葩工密:端维：・造冷器共
:1:三:凝益秋联配精皿
F
,FWW*
BTTTVBVYcmrmwsrcm：
百V
HTML标签
(1)HTML标题
标题的作用是让用户快速了
解文档的结构与大致信息，它
是通过＜hl＞~＜h6＞等标签对
进行定义的。〈hl〉标签对定义
最大的一号标题；〈h6＞标签对
定义最小的六号标题。当为文
字添加标题标签后，它会独立
成一行显示
<1>花之语</">
(2)HTML水平线
水平线主要是用来分隔网页
中的内容。水平线标签＜hr/＞
是一个单标签，其作用是在
HTML页面中创建水平线
<hr/>
(3)HTML段落
HTML段落是通过〈pX/p〉标
签对进行定义的
<>花也是符国.告双足平样白件整TH出工不的八A、，1口和蚱&
a&.双子访各冷不同的，、性化兼口塞乂•是指人行用花东勤达人的
SH.表立人的某豺啰"，息里，在一定倭历史条件下点用的定修改
的.为一定比81人0新公认的信息文制笛M.员花要愫花flh花塔种庖花
，，？，「在花卉交油中.花塔虽无声,包此时无声也有声.翼中的
通义加修哒襄道♦干X退•</,>
<>比谱是指',用五:柒表达人的信三.表达人的某汩酩情与思型.在一定的历，
自己的一看心惠而在亲了"沈送四枇JL送利人!?花.辂泉只会引亲刖人的谈
<c”“-p「>花语•星起朴干古伟■.第个职假不止是花，叶亍.»lH8f?T-
H亚记心发行是在送05皇室明明,贵相的林民阊讦干沅弃的将《151理堀梏.
<cla，s-p>>随-时代的决JR.瓦卉成力了社交的一怜*1与品,更加究，曾力
(4)HTML换行
要在不产生一个新段落的情
况下进行换行，需使用(br/>
标签
(5)无序列表
无序列表就是列表结构中的
列表项没有先后顺序的列表
形式。大部分网页中的列表均
采用无序列表，使用
<ulX/ul>标签对定义，包含
的列表项使用<liX/li>标签
对定义。列表项的默认符号为
小圆点•，要改变符号类型或
去除符号，可使用CSS属性进
行控制
<>玫瑰花</]>
<li>百合花</li>
<li>郁金香〈/>
<li>太阳花〈/>
<>康乃馨（/>
<>马蹄莲</>
<li>扶朗〃li>
<>剑兰（/i>
</ul>
(6)有序列表
有序列表在列表项前都有编
号，因此，浏览者可以清晰地
了解每项的顺序。其中
<olX/ol>标签对用来定义有
序列表，包含的列表项用
＜liX/li＞标签对定义，默认
序号为1、2、3
(7)自定义列表
定义列表是项目及其注释的
组合。其中＜dlX/dl＞标签对
表示定义列表;＜dtX/dt＞标
签对表示每个定义的名称(项
目名);＜ddX/dd＞标签对表不
每个定义名称的详细内容(注
释)
(8)HTML图像标签
HTML插入图像是通过＜img/＞
标签进行定义的。它是一个单
标签。由图像标签〈img/》和其
属性构成。其中src属性用来
表示图片的源地址，是必不可
少的
<2UC=.,TiugeG2\4-JOMGL-3b8uMiq印="520”
(9)图像路径
绝对路径是书写完整的路径，
系统按照整个路径查找文件。
绝对路径中的盘符后面用：\
或:/分隔，各目录名之间以及
目录名与文件名之间用'或/
分隔；
相对路径是以当前文档所在
的路径和子目录为起始目录，
进行相对于文档的查找。制作
网页时通常采用相对路径，这
样可以避免站点中的文件整
体移动后，产生找不到图片或
其他文件等的现象
(10)超链接标签：
超链接由源端点和目标端点
两部分组成，其中设置了链接
的一端称为源端点，跳转到的
页面或对象称为目标端点，源
端点可以是文字或图像等。
1TML超链接主要由标签对
<a></a>和属性href构成。耍
实现链接的跳转，必须要使用
属性href
通过上述案例来学习css科
式基础
(1)CSS引入的4种方式
将CSS样式表放置在HTML文
件头部：内部样式表。将cSS
样式表放置在HTML文件主
体：行内样式表。
将CSS样式表放置在HTML文
件外部:链接样式表与导入样
通过实例学习
式表
CSS引入的4
修饰鲜花导购网页一一CSS(2)选择器的类型
种方法，及选35分钟
样式基础标签选择器
择器的相关知
识
id选择器
类选择器
*pl(
text-decoration:underline;
font-styLe:oblique;
coLor:#ff9;
（3）选择器的集体声明、嵌
套和优先级
贯穿本节所讲
本次课程主要讲解了HTML标
知识，对必须
课程内容总结签等以及CSS引入的4种方10分钟
掌握的内容进
法、选择器的嵌套、优先级等
行总结复习
思考题或预习题或作业题制作个人主页巩固课堂知识10分钟
《前端HTML+CSS修炼之道》
主编：聂常红
《HTML5网页设计》
参考资料
主编：李强
《网页设计与制作案例教程》
主编：马涛、王然、彭芳
采用启发式教学，通过多媒体
课件现场演示更加生动，与学
生互动效果更好；
在上机课上学生学会HTML标
签及其使用方法；掌握了CSS
课后小结
引入的方法，以及选择器的格
式书写
课后布置了简单网页的制作，
并且利用上机时间完成和指
导工作
课程教案
第2章HTML标签与CSS样式基础
课题名称
第1-2节HTML标签、CSS样式基础
授课班级授课学时2
授课地点授课形式上机
参考教材《前端HTML+CSS修炼之道》
教学资源电子课件、教案、文字材料
知识目标：掌握HTML的语法规则；掌握网页各元素的HTML标签的写法，能够编
写网页结构层的HTML代码；掌握CSS的语法规则；掌握CSS的3选择器（标签选
择器、类选择器和id选择器）的使用；掌握在页面中引入CSS的4种方式
教学目标
技能目标：HTML的语法规则；HTML标签的写法；CSS的语法规则；掌握CSS的
3选择器；页面中引入CSS的4种方式
素质目标：培养学生实践能力及理解样式与内容分离模式。
教学
HTML标签（标题、水平线、段落、列表、图像、超链接）
重点
教学重点与难点教学
CSS样式基础、选择器类型
难点
本次课程前面部分在上次课程上机课已经有所涉及，重点内容为列表，图像，超
学情分析链接以及样式表，其中样式表的基础在本次课中为难点内容，需要让学生理解并
在课下进行练习。
课前：预习样式表内容
课中：
复习理论课知识点
教学过程布置任务实现音乐排行榜列表
布置任务实现热门活动图片列表
布置任务实现使用CSS美化电影剧情介绍页面
课后：完成个人主页的制作
引导学生自己动手实践；利用上机实践环节让学生学会列表，图片，超链接；熟
教学反思
练掌握CSS引入的方法，以及选择器的格式。
课程
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024届福建省福州市第三中学高三第二次模拟考试数学试卷含解析
- 2025届浙江省诸暨市诸暨中学高一数学第二学期期末综合测试模拟试题含解析
- 青海西宁二十一中2025届高一物理第二学期期末联考模拟试题含解析
- 重庆市第七十一中学2025届生物高一下期末统考试题含解析
- 2025届辽宁省清原中学物理高一下期末预测试题含解析
- 陕西省咸阳市礼泉县2025届数学高一下期末监测试题含解析
- 2025届云南省景东彝族自治县一中高一下生物期末质量跟踪监视试题含解析
- 2025届安徽六安市第一中学物理高一第二学期期末综合测试模拟试题含解析
- 2025届云南省元江第一中学生物高一下期末预测试题含解析
- 设立企业验资业务约定书
- 乡镇基层减负总结亮点做法
- 副食品采购及配送服务副食品安全质量保障方案
- 房颤患者护理查房
- 门诊病历书写规范
- 大美劳动智慧树知到期末考试答案2024年
- 2023年河北省普通高等学校对口招生考试中职英语试题
- 幼儿园家园共育实施策略研究
- 2024年江苏徐州邳州市基层医疗卫生单位面向农村订单定向医学生招聘34人高频考题难、易错点模拟试题（共500题）附带答案详解
- 儿童滑梯安全提示语
- 自杀风险C-SSRS评分量表
- 2021年银行信贷知识题库超全
评论
0/150
提交评论