计算机网络技术基础第三版教案.docx

《计算机网络技术基础第三版教案.docx》由会员分享，可在线阅读，更多相关《计算机网络技术基础第三版教案.docx（44页珍藏版）》请在冰豆网上搜索。

计算机网络技术基础第三版教案

计算机网络技术基础理论教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html语言入门

课型

新授课

授课时间

第一周第2次课

授课时数

2课时

教学目标

1、知识目标

熟悉网站的结构和基本的概念。

2、技能目标

能正确选择网站的布局，正确识别动态网页和静态网页。

3、德育目标

激励学生，让学生在学习中体验成功的喜悦，获得自信。

教学重点

动态网页和静态网页的区别

教学难点

网页布局。

教学关键

理解、熟记、练习、实习

教学方法

讲解法、列举法、演示法、练习法

人数清点

应到46人，实到46人

教

学

过

程

一、网站

3、网站（website）即网络站点，是指连接到互联网上，包含特定内容的网页的有序集合。

它拥有域或地址并提供一定网络服务的主机，其中域名指网站所在的位置，主机指提供存放文件所在的空间，网络指提供访问站点的物理链路，也就是网站的接入，服务指提供网站功能和访问形式。

2、网站类型（根据性质和内容分）

1）政府网站

2）商业网站

3）企业网站

4）个人网站

5）其他非营利机构网站

3、网站结构

1）线性结构

2）二维表结构

3）层次结构

二、网页

1、网页是一种可以在WWW上传输并被浏览器识别、翻译并显示出来的特殊文件。

一般我们常见到的网页文件是HTML【Hypertext MarkupLanguage，超文本标记语言】文件。

所谓“超文本”就是指页面内除文本外，还可以包含图片、链接、音频甚至视频等非文字的组成部分。

2、网页文件类型

网页文件都是以.htm或html为后缀的文件。

另外还有.asp、.aspx、.php或.jsp等。

3、网页的分类

1）静态网页

2）动态网页

区别：

动态见面的程序在服务器端运行，而静态网页则在客户端运行。

4、网页布局形式

1）“国”字型布局

2）“匡”字型布局

3）标题文本型布局

4）框架布局

三、学生看书复习

四、小结

1、网站基础知识

2、网页基础知识

五、作业

教学后记

学生学习兴趣较浓，学习认真，多数同学对概念能正确理解，但还须加强记忆。

 

计算机网络技术基础理论教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html基本标记

课型

新授课

授课时间

第二周第1次课

授课时数

2课时

教学目标

3、知识目标

熟悉HTML结构和基本的标记格式。

2、技能目标

能正确利HTML进行网页设计。

3、德育目标

激励学生，让学生在学习中体验成功的喜悦，获得自信。

教学重点

Html的基本结构、基本标记的使用

教学难点

主体常用属性的记忆。

教学关键

理解、熟记、练习、实习

教学方法

讲解法、列举法、演示法、练习法

人数清点

应到46人，实到46人，鄢元昊请假

教

学

过

程

一、WWW、HTTP与HTML

1、WWW

WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“'3W'”，英文全称为“WorldWideWeb”），中文名字为“万维网”，"环球网"等，常简称为Web。

 

2、HTTP

超文本传输协议（HTTP，HyperTextTransferProtocol）是互联网上应用最为广泛的一种网络协议。

所有的WWW文件都必须遵守这个标准。

设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

通常，由HTTP客户端发起一个请求，建立一个到服务器指定端口（默认是80端口）的TCP连接。

HTTP服务器则在那个端口监听客户端发送过来的请求。

一旦收到请求，服务器（向客户端）发回一个状态行，比如"HTTP/1.1200OK"，和（响应的）消息，消息的消息体可能是请求的文件、错误消息、或者其它一些信息。

3、

HTML即超文本标记语言，是WWW的描述语言。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，HTML文本是由HTML命令组成的描述性文本。

二、Html基本知识

Html是英文HyperTextMarkupLanguage的缩写，中文意思是“超文本标志语言”，用它编写的文件（文档）的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。

您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。

Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名>来表示标志的开始和结束（例如标志对），因此在Html文档中这样的标志对都必须是成对使用的。

在此教程中，我先讲一下Html的基本标志：

1．

标志用于Html文档的最前边，用来标识Html文档的开始。

而标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。

2．

和构成Html文档的开头部分，在此标志对之间可以使用、等等标志对，这些标志对都是描述Html文档相关信息的标志对，标志对之间的内容是不会在浏览器的框内显示出来的。

两个标志必须一块使用。

三、学生练习

四、小结

1、Html基本知识

2、Html基本结构

五、作业

教学后记

学生对www、HTTP、Html的理解、功能掌握较好，学习认真、努力，效果较好。

计算机网络技术基础理论教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html标记

（二）

课型

新授课

授课时间

第二周第2次课

授课时数

2课时

教学目标

1、知识目标

熟悉HTML结构和基本的标记格式。

2、技能目标

能正确利HTML进行网页设计。

3、德育目标

激励学生，让学生在学习中体验成功的喜悦，获得自信。

教学重点

Html的基本结构、基本标记的使用

教学难点

主体常用属性的记忆。

教学关键

理解、熟记、练习、实习

教学方法

讲解法、列举法、演示法、练习法

人数清点

应人46人，实到46人

教

学

过

程

一、Html的基本标志：

3．

是Html文档的主体部分，在此标志对之间可包含

、

、

、

、
、

---

等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。

两个标志必须一块使用。

标志中还可以有以下属性：

属性

用途

示例

设置背景颜色。

红色背景

设置背景图片

设置文本颜色。

蓝色文本

设置链接颜色。

链接为蓝色

设置已使用的链接的颜色

设置正在被击中的链接的颜色。

说明:

以上各个属性可以结合使用，如。

引号内的rrggbb是用六个十六进制数表示的RGB（即红、绿、蓝三色的组合）颜色，如#ff0000对应的是红色。

此外，还可以使用Html语言所给定的常量名来表示颜色：

Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如表示标志对中的文本使用蓝色显示在浏览器的框内。

4．

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入您要显示的文本即可。

注意：

标志对只能放在标志对之间。

四、学生练习

五、小结

1、Html中主体标记的结构。

2、Html主体标记中的属性。

六、作业

教学后记

学生对---标记和属性的功能，特点掌握较好，但对标记中属性的记忆还不牢固，还须加强记忆训练。

计算机网络技术基础实践教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html标记机练习

课型

新授课

授课日期

第三周第1次课

授课时数

2课时

教学目标

3、知识目标：

熟悉html和主体标记中属性的使用。

4、技能目标：

正确使用HTML标记设置主体属性。

5、德育目标：

培养学生动手、动脑、探索知识的能力。

教学程序

组织教学

设备（材料）准备情况

学生出勤情况

整理现场指导

装有记事本程序的计算机，

正常

学生按常规清点设备并开机

讲解示范

工艺规程

操作要领

安全要求

演示、练习

注意操作步骤　

机房用电安全　

人数清点

应到46人，实到46人

学

生

训

练

3、教师讲解、演示HTML文件的建立方法

说明：

编辑HTML代码的方法

1.单击”开始”→”程序”→”附件”→”记事本”

2.将上方的蓝色html代码输入记事本中,单击记事本的”文件”菜单,选”保存”命令.

3.在弹出的”保存”对话框中,”保存位置”我们选C:

盘,文件名我们输入abc.htm（注意:

记事本默认的扩展名是.txt,这里一定要改成.htm）,下方的”保存类型”列表框中选”所有文件”,单击”保存”按钮.如图:

4.打开C:

就会看到一个名为abc.htm的html文件,这就是我们刚才保存了，双击打开它,就会启动浏览器。

二、学生练习，教师巡回辅导。

三、小结

巡回辅导

对学生作个别指导，及时解决学生在操作中遇到的问题。

　

总结讲评

学生练习认真，学习兴趣较浓。

布置作业

根据实训内容填写实习报告。

整理现场

关机，清理、摆放好设备，整理好卫生。

教学后记

大多数学生上机的积极性较高，还有些人不认真完成上机操作任务，个别学生借自己没有机子就贪玩，这是以后上机课要注意纠正的地方。

 

计算机网络技术基础实践教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html标记机练习

课型

新授课

授课日期

第三周第2次课

授课时数

2课时

教学目标

3、知识目标：

熟悉html标记的基本结构，掌握主体标记中属性的使用。

2、技能目标：

正确使用HTML标记设置主体属性。

3、德育目标：

培养学生动手、动脑、探索知识的能力。

教学程序

组织教学

设备（材料）准备情况

学生出勤情况

整理现场指导

装有记事本程序的计算机，

正常

学生按常规清点设备并开机

讲解示范

工艺规程

操作要领

安全要求

演示、练习

注意操作步骤　

机房用电安全　

人数清点

应到46人，实到45人，钟丽，王陈洋迟到

学

生

训

练

一、复习html文件的结构和主体的常用属性。

是Html文档的主体部分，在此标志对之间可包含

、

、

、

、
、

---

等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。

两个标志必须一块使用。

标志中还可以有以下属性：

说明:

以上各个属性可以结合使用，如。

引号内的rrggbb是用六个十六进制数表示的RGB（即红、绿、蓝三色的组合）颜色，如#ff0000对应的是红色。

此外，还可以使用Html语言所给定的常量名来表示颜色：

Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如表示标志对中的文本使用蓝色显示在浏览器的框内。

二、HTML的结构演示

下面是一个综合的例子，仔细阅读，可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。

例1Html文档中基本标志的使用

红色背景、蓝色文本

三、学生练习，教师巡回辅导。

四、小结

巡回辅导

对学生作个别指导，及时解决学生在操作中遇到的问题。

　

总结讲评

学生练习认真，学习兴趣较浓。

布置作业

根据实训内容填写实习报告。

整理现场

关机，清理、摆放好设备，整理好卫生。

教学后记

大多数学生上机的积极性较高，还有些人不认真完成上机操作任务，个别学生借自己没有机子就贪玩，这是以后上机课要注意纠正的地方。

 

计算机网络技术基础理论教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html格式标记的使用

课型

新授课

授课时间

第四周第1次课

授课时数

2课时

教学目标

1、知识目标

熟悉Html格式标记的使用。

2、技能目标

能够使用格式标记进行正确的格式控制。

3、德育目标

培养学生养成良好的学习习惯，有团结协作的精神。

教学重点

列表标记的使用。

教学难点

列表类型的选择。

教学关键

理论学习与实践相结合

教学方法

讲授法、演示法、练习法和实习法

教

学

过

程

一、复习引入新课：

上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。

在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于标志对之间的。

二、新课讲解：

1.换行标记

是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。

在
的使用上还有一定的技巧，如果您把
加在标志对的外边，将创建一个大的回车换行，即
前边和后边的文本的行与行之间的距离比较大，若放在的里边则
前边和后边的文本的行与行之间的距离将比较小。

2.分段标记

标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。

另外，

标志还可以使用align属性，它用来说明对齐方式，语法是：

。

align可以是Left（左对齐）、Center（居中）和Right（右对齐）三个值中的任何一个。

如

表示标志对中的文本使用居中的对齐方式。

3.

（1）

标志对用来创建序列表；

标志对用来创建一个标有圆点的列表；

标志对只能在

或

标志对之间使用，此标志对用来创建一个列表项，若

放在

之间则每个列表项加上一个数字，若在

则为无序列表，之间则每个列表项加上一个圆点。

请看下边的例子：

（2）有序列表的编号类型

阿拉伯数字（默认）

大写英文字母

小写英文字母

大写罗马数字编号

小写罗马数字编号

（3）无序列表类型

实心圆（默认）

空心圆

实心方块

4.定义列表标记

用来创建一个定义列表，

用来创建列表中的上层项目，

用来创建列表中最下层项目，

和

都必须放在

标志对之间。

下边的例子：

例题讲解：

例2创建一个普通列表

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

此例在浏览器中的显示如下:

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

例题讲解

例3标有数字或圆点的列表

中国城市

1. 北京
2. 上海
3. 广州

美国城市

• 华盛顿
• 芝加哥
• 纽约

此例在浏览器中的显示如下:

中国城市

1.北京

2.上海

3.广州

美国城市

•华盛顿

•芝加哥

•纽约

5.列表的嵌套

就是列表里面又有列表。

（举例略）

三、小结：

1．换行标记

2.分段标记

3.定义列表标记

4.

5.列表的嵌套

四、作业

教学后记

学生对有序开表、无序列表和定义列表的掌握较好，但对列表的嵌套掌握还不好，还须多做相关例题加以练习。

计算机网络技术基础实践教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html标记机练习

课型

新授课

授课日期

第四周第2次课

授课时数

2课时

教学目标

1、知识目标：

熟悉HTML中列表标记的格式、功能和使用。

2、技能目标：

正确使用HTML文件国的列表标记。

3、德育目标：

培养学生动手、动脑、探索知识的能力。

教学程序

组织教学

设备（材料）准备情况

学生出勤情况

整理现场指导

装有记事本程序的计算机，

正常

学生按常规清点设备并开机

讲解示范

工艺规程

操作要领

安全要求

演示、练习

注意操作步骤　

机房用电安全　

学

生

训

练

一、复习html文件中的列表标记

1.列表标记

（1）有序列表

标志对用来创建序列表；

（2）无序列表

标志对用来创建一个标有圆点的列表；

标志对只能在

或

标志对之间使用，此标志对用来创建一个列表项，若

放在

之间则每个列表项加上一个数字，若在

则为无序列表，之间则每个列表项加上一个圆点。

请看下边的例子：

（2）有序列表的编号类型

阿拉伯数字（默认）

大写英文字母

小写英文字母

大写罗马数字编号

小写罗马数字编号

（3）无序列表类型

实心圆（默认）

空心圆

实心方块

二、教师演示列表标记的使用。

三、学生练习，教师巡回辅导。

四、小结

巡回辅导

对学生作个别指导，及时解决学生在操作中遇到的问题。

　

总结讲评

学生练习认真，学习兴趣较浓。

布置作业

根据实训内容填写实习报告。

整理现场

关机，清理、摆放好设备，整理好卫生。

教学后记

大多数学生上机的积极性较高，还有些人不认真完成上机操作任务，个别学生借自己没有机子就贪玩，这是以后上机课要注意纠正的地方。

第五周第一次课安岳培训

计算机网络技术基础理论教学教案

计算机专业课程：

计算机网络技术基础授课教师

课题

Html中超链接标记

课型

新授课

授课时间

第五周第2次课

授课时数

2课时

教学目标

1、知识目标

熟悉Html中标记超链接标记的格式及使用。

2、技能目标

能够使用超链接标记进行超链接的创建。

3、德育目标

培养学生养成良好的学习习惯，有团结协作的精神。

教学重点

超链接标记的使用。

教学难点

超链接标记的属性。

教学关键

理论学习与实践相结合。

教学方法

讲授法、演示法、练习法和实习法

教

学

过

程

一、建立超链接

超链接是网页页面中最重要的元素之一，是一个网站的灵魂。

一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系

1、基本语法

链接源

2、功能

建立一个链接源作为链接对象指向链接目标的超链接。

3、说明

1）链接源是指网页中用来作为超链接的链接对象,可以是一段文本或一张图片。

2）通过href属性指定地址，链接目标是要链接到的其他资源，"链接文字"为鼠标单击的文字内容。

3）绝对路径和相对路径。

4）Target属性指定链接目标的显示位置。

链接文字

属性值

描述

＿parent

在上一级窗口中打开。

一般使用框架会经常使用

＿blank

在新窗口中打开

＿self

在当前窗口中打开，这项一般不用设置

＿top

在浏览器的整个窗口中打开，忽略任何框架

框架名称

只用于框架网页中，目标在指定的框架中显示

二、教师演示超链接标记的作用

三、小结：

1）链接标记链接源

2）Target属性