HTML教案第一章.doc

HTML教案第一章 HTML的基本标签1.课程地位和课程目标:幻灯片2、3 10分钟22.课程知识点讲解：22.1.本章重点：幻灯片4 5分钟22.2.HTML文件的基本结构：幻灯片5，615分钟32.3.HTML的基本标记：幻灯片7到2250分钟32.4.HTML的链接：幻灯片23-2830分钟52.5.滚动标签：幻灯片29、3010分钟73.本章总结 10分钟74. 考核点75.测试题76.扩展部分87.作业8课时：3课时l 本课程主要目标能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。主要内容包括：掌握基本标签以及一些常用的属性表格，链接表单元素的使用，框架CSS样式表使用Dreamweaver制作网页以及布局l 本章主要目标1. 会使用HTML的基本结构创建网页2. 会使用文本相关标签实现文字修饰和布局3. 会使用图像相关标签实现图文并茂的页面4. 会使用超链接相关标签实现页面间的跳转l 本章重点n 本阶段的重点是让学员熟悉HTML的基本结构、HTML中的一些基本标记以及标记的属性，以及HTML中的链接。l 本章难点n HTML基本标记及其属性。1. 课程地位和课程目标:幻灯片2、3 10分钟l 在进行本课程之前，需要先介绍本课程在整个课程体系中的地位。l HTML课程属于基础课程，主要帮助学员建立网页的基本的概念，并通过学习HTML语言的基本知识，为其他课程的学习奠定扎实的基础。2. 课程知识点讲解：2.1. 本章重点：幻灯片4 5分钟l 什么是HTML ？超文本标记语言，是英文Hyper Text Markup Language的缩写。 引例讲解：关于HTML的例子有很多，比如我们日常生活中经常上网浏览网页，那这些网页有很多就是由html编写的或者基于HTML编写的。比如大家比较熟悉的163，新浪，搜狐等等。 老师提问：问题1：请问大家还知道什么网站啊。答： /*给学生看一下课程项目展示中的例子l 什么是超文本？超文本主要是以文字的形式表示信息，建立的链接关系主要是文句之间的链接关系。 引例讲解：/*生活范例名称：链接无处不在，包括以前学过的office中的链接2.2. HTML文件的基本结构：幻灯片5，615分钟l Html文档结构是什么样的？l 用记事本创建网页的步骤答：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果2.3. HTML的基本标记：幻灯片7到2250分钟l 标签（网页页面中出现乱码）5分钟讲解gb2312l 属性 5分钟 Hello World！l 文本相关标签 20分钟 字体、字号标题标签标签特殊符号行的控制段落标签换行标签演示案例l 图像标签10分钟图片的常用格式介绍老师提问：大家知道的图片常用格式有哪些？答：jpg,gif,bmp等等图像的基本语法：图像与文本的对齐方式：演示案例l 文字布局10分钟内容分隔标签项目列表和编号：有序列表，无序列表预格式文本标签演示案例：/*范例名称：链接的小例子免费注册 登录 2.4. HTML的链接：幻灯片23-2830分钟 老师提问：问题1：在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？ 答：两种方式：相对路径和绝对路径概念： 相对路径：指定相对于当前文件的文件位置。 绝对路径：指定从根目录到文件的完整路径。要链接到同一目录 (C:HTML) 下的页面，可编写 （相对路径） 或 （绝对路径） 案例讲解：链接的三种方式：普通链接，锚链接，邮件链接锚链接：链接到本页面，锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记主题名称为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称演示案例：链接到其他页面新人上路新人上路指南电子邮件链接要链接电子邮件，可在链接标签中插入“mailto:邮箱地址”演示案例：电子邮件链接 站长信箱2.5. 滚动标签：幻灯片29、3010分钟 老师提问：问题1：如何时网页中的文字或者图像动起来呢？比如水平或者垂直移动。答：使用标记。语法：滚动文字或图像 scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。演示案例：水平滚动 垂直滚动 Avon化妆品 雅诗兰黛 3. 本章总结 10分钟1. 哪个标签中的哪个属性可以改变字体颜色和字号？2. 图像与文本的对齐方式有哪几种？3. 项目列表和编号有何区别？分别适用什么场合？4. 链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？4.考核点 考核点1：HTML基本结构，HTML基本标记。5. 测试题 测试题1： 用记事本制作一个网页，格式如下：6. 扩展部分 扩展部分：使用word也能建网页7. 作业 习题1：用记事本设计一个网页，格式如下：参考答案：淘宝网主页免费注册 登录 新人上路 站长信箱 您好，欢迎来淘宝！ 手机充值、IP卡/电话卡 移动  |  50 |  100 |  联通 |  50 |  100 淘宝集市欢迎您！ 淘宝网首届翠友会！ 想做最闪亮的mm吗 千余中奖机会有你吗 淘宝入选平安网站 请点击广告进入明星专区 注册步骤： 填写信息 收电子邮件 注册成功 新人上路指南 如何激活会员名？ 如何注册淘宝会员？ 注册时密码设置有什么要求？ 支付宝认证