《WEB设计方案》一教案

1、个人收集整理勿做商业用途封面个人收集整理勿做商业用途作者： Pan Hongliang仅供个人学习第 1 章 HTML概述1.1 HTML 入门教学目标：1、了解什么是HTML个人收集整理勿做商业用途2、了解 HTML标准的版本历史3、了解 HTML的基本结构教学重点与难点：1、什么是HTML2、 HTML标准的版本历史3、 HTML的基本结构教学方法： 讲授法、探讨法、分组讨论。教学资源： 机房、多媒体教学系统、案例素材教学课时：2 课时教学过程：一、引导：问： WEB开发设计要学会什么？学生回答。教师归纳：引出HTML二、新课1、什么是HTMLHTML（ HyperTextMark-upL

2、anguage）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。设计 HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体， 人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（ Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。2、 HTML标准的版本历史超文本置标语言( 第一版) 在1993 年 6 月发为互联网工程工

3、作小组(IETF)工作草案发布（并非标准）HTML 2.0 1995 年 11 月作为 RFC 1866 发布，在RFC 2854 于 2000 年 6 月发布之后被宣布已经过时HTML 3.2 1996 年 1 月 14 日， W3C推荐标准个人收集整理勿做商业用途HTML 4.0 1997 年 12 月 18 日， W3C推荐标准HTML 4.01 （微小改进）1999 年 12 月 24 日， W3C推荐标准ISO/IEC 15445:2000 （“ ISO HTML”） 2000 年 5 月 15 日发布，基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准XHTML

4、1.0 发布于 2000 年 1 月 26 日，是 W3C推荐标准，后来经过修订于2002 年 8月 1 日重新发布XHTML 1.1,于 2001 年 5 月 31 日发布(XHTML 2.0, W3C 工作草案 )3、 HTML的基本结构超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。实例：这是注释标记。网页标题: 网页设计基础-培训讲义个人收集整理勿做商业用途if (top.location != location)top.location.href = self.location;文档主体，正文部分页面主题标记-BODYb

5、gcolor-背景色 bgcolor=#000000background-背景图片， background=image-URL bgproperties=fixedtext-文字颜色； text=#fffffflink-链接文字属性；alink vlink；link-可链接文字的色彩，alink-正被点击的可链接文字的色彩，vlink-已经点击 ( 访问 ) 过的可链接文字的色彩；如： body bgcolor=# text=# link=# alink=# vlink=#此处 #=rrggbb色彩是用16进制的红绿蓝 (red-green-blue, RGB)值来表示。16 进制的数码有 :

6、 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.margin-边距设置；上边距topmargin=10左边距 leftmargin=20； css中表示为：margin-right: 0px; margin-bottom: 0px;个人收集整理勿做商业用途显示特殊字符：参考字符以& 开始以 ;结束。如： = > &= &空格 =  1、单标签 -2、双标签 -内容 3、标签属性 -三、小结本节课我们主要学习了HTML的定义， 以及 HTML 标准的版本历史；在了解的基础上我们进一步学习了HTML的基本结构。四、练习1、编写简单的网页代码。个人收集整理勿做

7、商业用途1.2各种文本格式的使用教学目标：1、掌握文本格式标签的分类和使用教学重点与难点：1、文本格式标签的分类和使用教学方法： 讲授法、探讨法、分组讨论。教学资源： 机房、教室、多媒体教学系统、案例教学课时：2 课时教学过程：一、复习：回顾 HTML基本结构，进一步学习各种文本格式的应用。二、新课文本格式1、段落标记符-(Paragraph) P；2、换行标记符-BR ； 登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。取消换行 : 取消换行 .3、水平线标记符-HR ； size=1整数像素；width= 像素或百分比；(Alignment)对齐方式align=left,r

8、ight,center；noshade 表示实心，无阴影；4、标题标签 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中 n 为标题的等 HTML总共提供六个等级的标题， n 越小，标题字号就越大，以下列出所有等级的标题：这是一行普通文字 一级标题 二级标题 个人收集整理勿做商业用途三级标题 四级标题 五级标题 六级标题 5、 (Division) DIV标记符 -DIV ；如： 说明： DIV 和 SPAN 标记符主要用于CSS样式表。 6、控制文本的标记符字体控制标记符 -font!- #=1, 2, 3, 4, 5, 6, 7此代码可放置于头部，更改默认字体

9、大小，系统默认字体为3-文字大小 -size文字控制 #=1, 2, 3, 4, 5, 6, 7 or +#, -#默认为 3；文字控制 1文字控制 2文字控制 3文字控制 4文字控制 5文字控制 6文字控制 7文字颜色 -color文字颜色为红色 文字样式 -face 文字样式为宋体 - 红色 -5号大小 文字样式为楷体- 红色 -7 号大小物理字体B:这是物理黑体标记效果 这是正常效果 I: 这是物理斜体标记效果 这是正常效果 U:这是物理下划线标记效果 这是正常效果 TT: 这是物理等宽字体标记效果这是正常效果 个人收集整理勿做商业用途SUP:这是物理上标字体标记效果 这是正常效果SUB

10、:这是物理下标字体标记效果 这是正常效果S: 这是物理删除线标记效果 这是正常效果逻辑字体EM:这是逻辑标记强调em效果，斜体显示这是正常效果 STORNG:这是逻辑标记特别强调stong 效果，粗体显示 这是正常效果CODE:这是逻辑标记程序代码code 效果，固定宽度 这是正常效果 SAMP:这是逻辑标记样本字符samp效果，固定宽度这是正常效果 KBD:这是逻辑标记用户键盘输入kbd 效果，固定宽度 这是正常效果VAR: 这是逻辑标记通常变量var效果，斜体显示这是正常效果DFN: 这是逻辑标记定义术语dfn效果，黑体或斜体显示这是正常效果CITE:这是逻辑标记文本引用cite效果，斜体

11、显示这是正常效果SMALL: 这是逻辑标记小字体small效果，小字号显示这是正常效果BIG: 这是逻辑标记大字体 big 效果，大字号显示 这是正常效果 ADDRESS:逻辑标记地址格式 address 效果，斜体显示 7、其他标记符ABBR:标 记 缩 写 , 当 鼠 标 移 动 到 这 个 字 样 上 ， 将 显 示aaaaaaaa预格式化文本(Preformatted Text) 保留原始排版方式，空格回车都可以看见 块引用 (Blockquote)向右缩进标记比较这个效果1比较这个效果2文字标注标记-ruby 被说明的文字 文字的标注 忽视 html 标签标记符 -XMP看看这个效果

12、：加粗强调标记无效个人收集整理勿做商业用途列表无效 列表无效 文字控制1 无效 三、小结本节课我们主要学习了文本格式标签的各种使用。四、练习1、自定义设计文本格式，编写网页源代码。个人收集整理勿做商业用途1.3 列表格式、图像及超链接教学目标：1、掌握列表格式2、掌握图像与超链接教学重点与难点：1、列表格式2、图像与超链接教学方法： 讲授法、探讨法、分组讨论。教学资源： 机房、教室、多媒体教学系统、案例教学课时：2 课时教学过程：一、复习：回顾前面学过的文本格式，进一步学习列表、图像及超链接二、新课列表格式（ list）1、有序列表 -OL 列表 1 列表 2 列表 3type 是区分大小写的

13、，因此要小写。#=1 A a I i2、无序列表 -UL 列表 1 列表 2 列表 3个人收集整理勿做商业用途#=disc 实心圆circle 空心圆square 方块3、定义列表 (Definition lists)-DL 名词 1 解释 1 名词 2 解释 24、菜单列表 -MENU 列表 1 列表 2 列表 35、目录列表 -DIR 列表 1 列表 2 列表 3 这是什么？ 图像与超链接1、图像标记符-IMG属性描述：src图像的url的路径；alt提示文字；width宽度通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具；height高度通常只设为图片的真实大小以免失真,改变

14、图片大小最好用图像工具；align图像和文字之间的排列属性；top上对齐middle居中对齐bottom下对齐left个人收集整理勿做商业用途左对齐right 右对齐border 边框；hspace 水平间距；vlign 垂直间距；dynsrc avi 文件的 url 的路径loop 设定 avi 文件循环播放的次数loopdelay 设定 avi 文件循环播放延迟start 设定 avi 文件的播放方式lowsrc 设定低分辨率图片,若所加入的是一张很大的图片，可先显示图片。usemap 映像地图2、超链接相对地址和绝对地址：相对地址 URL=./123/123.HTML或 ./a/1.gi

15、f绝对地址 URL=此处为链接文字；书签或锚点链接： 锚点名称 锚点链接 电子邮件链接用法： 开一个新窗口；3、图像映射!-插入图片时要在标记中设置参数usemap=#图的名称，以表示对图像地图（图的名称）的引用；-!- 用 标记设定图像地图的作用区域，并用name 属性爲图像起一个名字-. 可根据需要定义多少个热点区域个人收集整理勿做商业用途shape - 定义热点形状shape=rect：矩形； shape=circle：圆形； shape=poly：多边形；coords - 定义区域点的坐标a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字

16、为右下角座标例： b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例： c.任意图形（多边形） ：将图形之每一转折点座标依序填入例： 返回 关闭 4、用 标签插入avi 文件格式： dynsrc 指定 avi 文件所在路径loop 设定 avi 文件循环次数loopdelay 设定 avi 文件循环延迟start 设定文件播放方式fileopen/mouseover( 网页打开时即播放/ 当鼠标滑到 avi 文件时播放）5、 FLASH 插入三、小结本节课我们主要学习了列表格式、图像与超链接的代码编写。四、练习1、利用所学内容编写简单网页。个人收集整理勿做商业用途1.

17、4 表格教学目标：1、掌握表格标签的使用及属性设置教学重点与难点：1、表格标签的使用及属性设置教学方法： 讲授法、探讨法、分组讨论。教学资源： 机房、教室、多媒体教学系统、案例教学课时：4 课时教学过程：一、引入：网页设计中，最主要的应用标签就是表格，她主要用来定位各种网页元素。二、新课表格1、表格的基本语法. -定义表格 -定义表行 -定义表头 -定义表元 ( 表格的具体数据)表格的标题标签表格标题的位置，可由ALIGN 属性和 VALIGN属性来设置，ALIGN 属性设置标题位于文档的左，中，右。VALIGN 属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。语法格式：

18、表格标题valign=top, middle, bottom。应放在标签内，在表格行标签标签之前。 标签的默认属性是标题位于表格的上方中间位置。个人收集整理勿做商业用途表格标题 第1行中的第 1列 第 1行中的第2 列 第 1行中的第3 列 第 2 行中的第 1 列 第 2 行中的第2 列 第 2 行中的第3 列 2、表格 标签的属性属性描述：width表格的宽度height表格的高度align表格在页面的水平摆放位置可选值为：left, center, right。background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度（以像素为单位）bordercolor表

19、格边框颜色bordercolorlight表格边框明亮部分的颜色bordercolordark表格边框昏暗部分的颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小3、表格的边框显示状态frame表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态语法格式： 个人收集整理勿做商业用途frame 的值描述：box 显示整个表格边框void不显示表格边框hsides只显示表格的上下边框vsides只显示表格的左右边框alove只显示表格的上边框below 只显示表格的下边框lhs只显示表格的左边框rhs只显示表格

20、的右边框4、设置分隔线的显示状态rules语法格式： rules的值描述：all显示所有分隔线groups只显示组与组的分隔线rows 只显示行与行的分隔线cols只显示列与列的分隔线none 所有分隔线都不显示5、表格行TR 属性的设定属性描述 :align行内容的水平对齐valign行内容的垂直对齐bgcolor行的背景颜色bordercolo行的边框颜色bordercolorlight行的亮边框颜色bordercolordark行的暗边框颜色6、单元格TD 的设定属性描述 :width/height单元格的宽和高，接受绝对值（如80 ）及相对值（如80%）。colspan单元格向右打通的

21、栏数rowspan 单元格向下打通的列数个人收集整理勿做商业用途align单元格内字画等的摆放贴，位置（水平），可选值为：left, center, right。valign单元格内字画等的摆放贴位置（垂直） ，可选值为：top, middle, bottom。bgcolor单元格的底色bordercolor单元格边框颜色bordercolorlight单元格边框向光部分的颜色bordercolordark单元格边框背光部分的颜色background单元格背景图片7、设定跨多行多列单元格要创建跨多行、 多列的单元格， 只需在 或 中加入 ROWSPAN或 COLSPAN属性的属性值，默认值为1

22、。表明了表格中要跨越的行或列的个数。跨多列的语法：colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。跨多行的语法：rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。8、表格的分组表格的行分组/html文档的表格按行分组是由：表头标签 、表格主体标签 和尾注标签三个部分组成的。其中尾注标签很少用。 标签是成对标签，其标签内是由表头标签标识的表头元素。 标签用于规定表格主体部分的元素。 和 标签的属性和标签是一样的。表格按列分组html使用 标签来将表格分组。语法格式：说明： 标签有两个属性，span和align,

23、他们都是可选的。span属性的值是数字，表示该组包含的列数，默认值为1。 align属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。个人收集整理勿做商业用途9、表格的嵌套网页设计中，表格嵌套保持三层以内；学会分屏技巧。三、小结本节课我们主要学习了HTML 中表格标签的应用。四、练习1、根据所学代码编写个人主页。1.5 框架教学目标：1、学会使用代码编写网页框架教学重点与难点：1、网页框架标签个人收集整理勿做商业用途教学方法： 讲授法、探讨法、分组讨论。教学资源： 机房、多媒体教学系

24、统、案例素材教学课时：2 课时教学过程：一、引导：问： WEB开发设计要学会什么？学生回答。教师归纳：引出HTML二、新课框架1、框架的含义和基本构成框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。而所有的框架标记要放在一个html文档中。html页面的文档体标签被框架集标签 所取代，然后通过的子窗口标签 定义每一个子窗口和子窗口的页面属性。语法格式：frame src=url2.Frame 子框架的 src 属性的每个URL值指定了一个html 文件（这个文件必须事先做好）地

25、址，地址路径可使用绝对路径或相对路径，这个文件将载入相应的窗口中。框架结构可以根据框架集标签 的分割属性分为3 种：左右分割窗口上下分割窗口嵌套分割窗口2、框架集 控制属性描述：border设置边框粗细, 默认是 5 象素 .bordercolor设置边框颜色个人收集整理勿做商业用途frameborder 指定是否显示边框： 0代表不显示边框，1 代表显示边框cols 用 象素数 和 % 分割左右窗口,*表示剩余部分rows 用 象素数 和 % 分割上下窗口,*表示剩余部分framespacing=5表示框架与框架间的保留空白的距离noresize设定框架不能够调节，只要设定了前面的，后面的将继承浮动窗口 的参数设定格式：属性含义：src浮动窗框中的要显示的页面文件的路径，可以是相对或绝对。name 此框窗名称，这是连结标记的target参数所要的，align可选值为left, right, top, middle, bottom，作用不大height框窗的高，以pixels为单位。width框窗的宽，以pixels为单位。marginwidth该插入的文件与框边所保留的空间。marginheight该插入的文件与框边所保留的空间。frameborder使用 1表示显示边框， 0 则不显示。（可以是 yes或 no ）scrolling使用 Ye