山东新华电脑学院课堂教学教案
（电脑应用课使用）
课程名称
Dreamweaver网页设计
教学对象
电商、应用专业
教    材
Dreamweaver网页设计
授课内容
HTML简介
课 时
6课时
教学目的
与要求
通过本节课的学习，您应该学会以下知识和技能
1 掌握HTML语言的结构和语法
2 掌握标记的属性的属性设置
3 掌握HTML标签网页中的具体应用 
重点、难点
1 重点掌握HTML语言的结构和语法，以及各种标记的属性的属性设置、在网页中的具体应用。
2 难点是最终能用HTML代码写出简单的网页知识点：
      关键字： 标签  语法结构       
课    型
新授课
教学方法
讲授法、演示法、讨论法
教学过程
一、 导入课题（10分钟）
通过打开一些网页,查看HTML代码,让学生认识到学习HTML的目的就是为了了解什么是网页以及网页的制作过程。同时学习HTML也是为了学习网页后台打下基础。
二、 知识剖析 （270分钟）
（一） 什么是HTML？(10分钟)
HTML即HyperText Markup Language（超文本链接标记语言）的缩写，它是一种基于Web、不受操作系统限制且通用性极佳的脚本语言，其文件格式可以是*.htm或*.html；
（二） HTML脚本编辑器（10分钟）
1.记事本
2.Macromedia Dreamweaver MX 2008
3 Word
4. FrontPage
（三） HTML脚本的相关概念（30分钟）
1.标记：凡是用< >符号扩起来的关键字，我们就叫它标记．如<html> </html>
2.标记分类：标记分为单向标记、双向标记和中性标记．
3.标记属性：用来丰富和修饰标记.
4.标记属性值：与属性相匹配的具体参数．
（四） 基本语法（20分钟）
基本格式:
<标记名称 属性=属性值 属性=属性值……>
标记:是html文件的一种基本结构单位，一对标记以及它们之间的所有内容，标记能独立体现一种页面效果或实现一种功能，可以看作是一个功能模块。
（五） 基本单位（20分钟）
1.长度单位
1.1  相对长度:%
1.2  绝对长度:pixel(像素)
2. 颜单位
2.1  16进制:#RRGGBB
2.2  直接颜名称:使用颜的英文名称
3. URL路径
3.1  概念：URL统一资源定位器，是一种互联网地址的表示方法。
3.2  绝对路径:是将服务器上磁盘驱动器名称和完整的路径都写出来.如:
<a href=“file:///D:/website/index.htm”>
3.3  相对路径:相对于当前的HTMLhtml滚动效果代码文档所在的目录或站点根目录的路径
格式:相对关系/部分路径/文件名
（六） HTML脚本结构（30分钟）
<html>
<head>
<title>Welcome to XinHua Computer School !!</title>
</head>
<body>
多媒体网页设计，这是我的第一个页面！
</body>
</html>
（七） 各种标记说明（180分钟）
1. 文档声明标记：<html>...</html>
1.1语法：<html>…</html>（指定并告知浏览器当前的文档类型是HTML文档，所有<html>标记必须包含在<html>与</html>之间）
2. 页面标题标记：<title>…</title>
2.1语法：<title>…</title>（该标记用来指定网页标题栏显示的标题）
3. 文档头部标记：<head>…</head>
3.1语法：<head>…</head>（指定当前文档的头部即文档说明信息，包含在其中的说明信息主要有<title>、<meta>与<script>等标记，其中<meta>标记指当前文档被搜索引擎使用的关键字，样式的预先定义、<script>标记指定义头部的脚本语言及其函数）
4. 文档体标记：<body>…</body>
4.1语法：<body>…</body>（所有在浏览器中显示网页元素均需包含在该标记中）
  4.2属性：
4.2.1  bgcolor＝colorvalue（网页的背景颜）
    4.2.2  background＝URL（网页背景图像的位置）
    4.2.3  bgproperties＝fixed（锁定背景图象）
    4.2.4  leftmargin＝数据（网页内容的左边距）
    4.2.5  topmargin＝数据（网页内容的上边距）
    4.2.6  text＝colorvalue（网页文本的默认颜）
5. 文本格式欲定义标记：<pre>…</pre>
5.1 语法：<pre>…</pre>（保留文本的原始格式）
5.2 属性：width＝size（文本的宽度）
5.3 应用实例：
…<body>
<pre>
多么渴望听到你笑声,
渴望听到你真心的话语。
而现在牵挂你却已经成为我的习惯！
              ―――――――
</pre>
</body>
…
6. 文本段落标记：<p>
6.1 语法：<p>…</p>（将文本强行换段）
6.2 属性：align＝left/right/center（文本的对齐方式）
6.3 应用实例：<p align=”center”>安徽新华电脑专修学院欢迎您！</p>
提示：</p>可以省略
7. 段内换行标记： <br>
语法：<br>（将文本强行换行）
7.2 属性：无
7.3 应用实例：
        <p>一切开心就好...<br>
        登鹳雀楼<br>
白日依山尽，<br>
黄河入海流。<br>
欲穷千里目，<br>
更上一层楼
</p>
8. 水平线标记：<hr>
语法：<hr>（在当前光标位置插入一条水平线）
8.2 属性：width=size（水平线的长度）
          size=size（水平线的高度）
          align=alignstyle（水平线的对齐方式）
          color＝colorvalue（水平线的颜）
8.3应用实例：
<hr width="200" size="1" color＝”0000FF” align="center" noshade>
9. 居中显示标记：<center>…</center>
语法    <center>…</center>（指定网页元素居中）
属性：无
应用实例
<center>新华杯卡拉OK大赛开幕！</center>
10. 标题级数标记：<h?>…</h?>
语法：<h>…</h>（定义文本的标题级数）
属性：align＝aligstyle（定义标题的对齐方式）
应用实例：
<h1 align=center>这是一级标题</h1>
<h4 align=center>这是四级标题</h4>
<h6 align=center>这是六级标题</h6>
提示：标题的级数共为六级，级数越大，字号越小。
11. 字体修正标记：<font>…</font>
语法：<font>…</font>（定义文本的字体、字号等）
属性：size＝size（字号）
            color＝colorvalue（文本颜）
            face＝cdata（字体）
11.3  应用实例：
<font face="宋体" size="3" color="red">喧嚣的都市，到处充斥着廉价的玫瑰！</font>
12. 字体修饰标记
12.1 语法：<b>…</b>（粗体）
            <i>…</i>（斜体）
            <u>…</u>（文本的下滑线）
12.2 属性：无
12.3 应用实例：
<b><i><u>非常可乐 非常选择</u></i></b>
13. 超级链接标记：<a>…</a>
语法：<a>…</a>（定义链接源的超级链接）
属性：
1、href=URL（链接目标文件的地址）
2、target=frametarget（显示目标文件的窗口）
3、title=“info”（连接源的替换信息）
4、鼠标提示信息即鼠标事件OnMouseOver
应用实例：
<a href=“www.ahxh”  title=“welcome to anhuixinhua”
    target=“_blank”>新华电脑专修学院欢迎您！</a>
超级链接分类
1. 空链接（blank link）
如：<a href=“#”  title=“这是一个空链接”  target=“_blank> 空链接blank link</a>
2 . URL链接
如：<a href=www.baidu  title=“link sina” target=“_blank”>新浪link sina</a>
3. E-mail链接
如：
<a href=mailto:loveme1122@126?subject=how are you>发送邮件</a>
4. 锚点链接：先定义锚点名称，再实现链接
14. 图象标记：<img>
语法：<img>...</img>在页面中显示图片的标记。
属性：
1. src=“url”  图片的目标路径。
2. name=“str”  图片的名称。
3. width=“size” 图片的宽度
4. height=“size” 图片的高度。
5. alt=“替代文本”或title=“替代文本”。
15. 表格标记：<table>…</table>
语法：
  <table>…</table>（表格标记）
        <tr>..</tr>（定义表格的行）
        <td>…</td>（定义表格的列）
属性：
1. width=size（表格的宽度）
2. height=size（表格的高度）
3. border=size（表格边框线的大小）
4. background=URL（表格背景图像的地址）
5. bgcolor=colorvalue（表格的背景颜）
6. align=alignstyle（表格相对页面的对齐方式）
表格事件
1. onmouseover=this.bgColor=’颜值’
2. onmouseout=this.bgColor=’颜值’
16. 声音标记：<bgsounde>
语法：<bgsound>
属性：src=url(音乐文件的路径）
              loop=?(播放音乐循环的次数）
17. 滚动字幕标记：<marquee>…</marquee>
语法：<marquee>…</marquee>
属性：behavior:滚动方式
            direction:滚动方向
            scrollamount:滚动速度
            height/width:高度宽度
            bgcolor：滚动背景
            onmouseover/onmouseout:鼠标滑过和离开触发的事件
应用所有属性的一个例子：
  <marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF"
  height="30"  width="150" hspace="0" vspace="0" loop="INFINITE"
scrollamount="30“  scrolldelay="500">Hello</marquee>
复习思考
与
上机任务
（***10***）
1. 掌握标记、标记属性、标记属性值的概念
2. 理解HTML的框架结构
3. 掌握HTML语言的语法格式
。
归纳小结
（***10***）
1什么是标记、标记属性、标记属性值的概念
2  HTML的框架结构
3 HTML语言的语法格式
4 HTML语言中的几个基本单位
5 <marquee>的应用

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。