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