新的助理电子商务师教案Word格式文档下载.docx
《新的助理电子商务师教案Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《新的助理电子商务师教案Word格式文档下载.docx（24页珍藏版）》请在冰点文库上搜索。
HTML（HyperTextMarkupLanguafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。
（二）HTML文件的特点
HTML是Web页面的基础。
使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。
（三）HTML文件的结构
HTML文件均以<
html>
标记符开始，以<
/html>
标记符结束。
<
head>
和<
/head>
标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。
在<
body>
/body>
标记符之间的内容即为页面的主体内容。
<
网页的头部信息
页面的主要内容
（四）注意事项
使用记事本等编辑HTML文件时，一定要以.htm或.html为扩展名保存文件，否则在浏览器中无法正确显示预览效果。
（一）HTML文件中表格的作用
表格是HTML的一项非常重要功能，利用其多种属性能够设计出多样化的表格，使用表格可以使网页有很多意想不到的效果。
（二）表格标签极其属性
Valign：
定义表格内容的垂直对齐方式，取值可选top（靠上），middle（居中），bottom（靠下）
Background：
定义表格的背景图片，不能与bgcolor同用。
Bgcolor：
定义表格的底色，不能与Background同用。
Bordercolor：
定义表格边框颜色
Bordercolorloght：
定义表格边框向光部分的颜色（只适用于IE浏览器）
Bordercolordark：
定义该行框背光部分的颜色（只适用于IE浏览器）
注意：
使用Bordercolorloght或Bordercolordark时Bordercolor将会失效（只适用于IE浏览器）
Cols：
定义表格栏位数目，可令浏览器下载表格时先画出整个表格。
2.<
tr>
标签的常用属性
table>
标签内使用<
标签标示和编辑表格的行，<
标签的常用属性包括：
align:
定义该行内容的水平对齐方式，取值可选;
left（左对齐），center（居中），right（右对齐）
Valign：
定义该行内容的垂直对齐方式，去值可选：
top（靠上），middle（居中），bottom（靠下）
定义该行背景色。
定义该行边框颜色（只适用于IE浏览器）
定义该行边框向光部分的颜色（只适用于IE浏览器）
使用Bordercolorloght或Bordercolordark时Bordercolorloght将会失效。
3.<
td>
标签记和编辑表格中该行的列，<
Width：
定义单元格宽度，可以用绝对值（如80）或相对值（如80％）方式设置。
Heigh：
定义单元格高度。
Rowspan:
定义单元格所跨行数
Colspan:
定义单元格所跨列数
Align:
定义单元格内容水平对齐方式
Valign:
定义单元格内容垂直对齐方式
Bgcolor:
定义单元格景色
定义单元格边框颜色（只适用于IE浏览器）
Bordercolorlight：
定义单元格边框向光部分的颜色（只适用于IE浏览器）
定义单元格边框背光部分的颜色（只适用于IE）
使用Bordercolorlight或Bordercolordark时Bordercolor将会失效。
定义单元格背景图片，不能与bgcolor属性同时使用。
（三）、注意事项
表格使用<
…<
/tr>
行标记符来定义各行，每行中用<
/td>
列标记符来定义各列
操作部分：
步骤一单击“开始”按钮，选择“程序”→“附件”→“记事本”，并打开“记事本”窗口。
步骤二在记事本中，输入HTML文件首标签和尾标签语句；
……
说明：
首标签<
和尾标签<
分别位于HTML文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的，该标记不带任何属性。
步骤三在记事本中，输入HTML文件头部内容：
title>
我的花店<
/title>
说明：
……<
之间的内容是HTML文档的头部内容，用来规定文档的标题出现在浏览器窗口的标题栏中）和文档的一些属性。
是成对标记，嵌套在<
…..<
标签中使用，<
…….<
之间内容是HTML文件的标题。
步骤四在记事本中，输入HTML文件主题内容；
欢迎您访问我的花店！
之间的内容将显示在浏览器窗口的用户区内，是HTML文档的主体部分，主要属性有：
1bgcolor属性：
定义页面背景颜色，可以使用颜色的英文名称来表示颜色，如：
bgcolor=“red”，也可以使用16进制的RGB代码来表示颜色，如：
bgcolor=“#FF00000“，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#“。
2background属性：
定义页面背景图片，background属性值就是背景图片的路径和文件名，如：
bodybackground=”/html/images/html-tutorials-logo.gif”>
或<
bodybackground=”
如果背景图片小于网页显示窗口，那么这个背景图片会自动恢复。
Bgcolor和background这两个<
的属性，在新的HTML标准（HTML4与XHTML）里已不建议使用，而建议用CSS设置背景颜色和图片。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。
text属性：
定义页面文字的颜色，可以使用颜色的英文名称来表示颜色，如：
text=“red”,也可使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。
link属性：
定义页面默认超链接对象的颜色，可以使用颜色的英文名称来表示颜色，如：
link=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。
alink属性：
定义鼠标在单击时的超链接对象颜色，可以使用颜色的英文名称来表示颜色，如：
alink=“red,”也可使用16进制的RGB代码来表示颜色，如：
alink=“#FF0000”，在使用16进制的RGB代码来表示颜色时，
vlink属性:
定义访问后超链接对象的颜色。
leftmargin属性：
定义页面的左边距
topmargin属性：
定义页面的上边距
bgproperties属性：
定义页面背景图片为固定，不随页面的滚动而滚动
二、建立表格
步骤二在记事本中，输入HTML语句
bodybgcolor="
#FFFF99"
>
步骤三在新建的HTML文件主体标签内输入表格标签语句
tablewidth="
210"
align="
center"
border="
1"
tralign="
>
tdcolspan="
2"
节日<
td>
名称<
tdrowspan="
3"
5月<
1日<
国际劳动节<
4日<
中国青年节<
12日<
护士节<
6月1日<
国际儿童节<
/table>
步骤四保存HTML文件，并浏览效果
之间放置表格内容，<
标记是成对标记。
在表格中，行是用<
标记来定义的，一行使用一个<
标记，每行中的列是用<
标记定义的；
一列使用一个<
标记。
、<
标记都有相应的属性，用来定义表格中内容的显示方式。
表格标记的主要属性有
（1）rowspan。
定义该单元格所跨行数。
（2）colspan。
定义该单元格所跨列数。
Ⅳ.巩固小结:
本次课主要了解HTML文档结构，掌握HTML文件的基本编写方法，掌握HTML文档中表格标记符的设置
Ⅴ.布置作业:
课后练习与补充。
课题二运用HTML编辑网页内容
掌握HTML文档中网页内容修饰标记符的设置
HTML文档中网页内容修饰标记符的设置
一、HTML标记的格式
二、HTML的作用
三、绝对地址和相对地址
（一）<
hi>
标题标记
（二）<
p>
段落标记符
（三）<
br>
换行标记
（四）列表标记
（五）<
a>
链接标记的设置
（六）<
font>
标记的设置
Ⅰ.复习提问:
1使用HTML编写一个简单的网页？
2.什么是容器标记？
为什么<
标记被称为容器标记？
Ⅱ、导入新课:
上次课我们已经学习建立HTML文档、运用HTML建立表格，本次课主要学习运用HTML编辑网页内容。
Ⅲ、教学目标：
掌握HTML文档中网页内容修饰标记符的设置。
Ⅳ、授课内容
（一）HTML标记的格式
HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下：
标记>
HTML语言元素<
/标记>
（1）标记符分为成对标记符和非成对标记符，<
等属于成对标记符，<
hr>
等属于非成对标记符。
标记符忽略大小写。
HTML源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；
一个标记符的内容可以定成多行。
（2）可使用标记符的属性来讲进一步限定标记符，一个标记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。
（3）HTML中使用的注释语句为<
!
--…-->
注释内容可插入文本中任何位置，注释内容将不显示。
（二）HTML的作用
（1）利用标题、文本、表格、列表和图像发布在线信息。
（2）应用超连接获得世界各地的在线信息。
（3）应用表单与远程服务通信，实现信息查询及各种商贸活动。
（4）把样式、视频、音频和应用程序嵌入到HTML文档。
（三）绝对地址和相对地址
文件的引用既可以使用绝对地址，也可以使用相对地址。
（1）、绝对地址
直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如：
ahref="
"
友情链接<
/a>
（2）、相对地址
用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如：
bg.htm"
target="
right"
花节<
注意事项：
表格是用<
标记符来一行一行定义的，每行中用<
列标记符来定义各列。
h1>
欢迎你访问我的花店!
/h1>
h2>
/h2>
h3>
/h3>
h4>
/h4>
h5>
/h5>
h6>
/h6>
说明:
标记符用于定义段落标题的大小级数。
最大的标题级数是<
最小的标题级数是<
.使用<
标记符的align属性可控制文字的对齐方式，属性值可以是left（左对齐）、center（居中对齐）、或者right（右对齐）。
h1align="
我的花店!
palign="
欢迎您访问我的花店<
/p>
palign=“center”>
花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!
居室之内，放上一束瓶插花，可增添幽静、清静、舒适之感!
祝愿进入我的花店的朋友天天有好心情!
标记符用于划分段落，控制文本的位置。
是成对标记符，用于定义内容从新的一行开始，并与上段这间有一个空行，其align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left（左对齐）、center（居中对齐）、或者right（右对齐）。
hralign="
width="
100%"
size="
4"
color="
#3333FF"
版权归“我的花店”所有<
标记符用于定义文本从新的一行显示，它不产生一个空行，但连续多个<
标记符可以产生多个空行的效果。
标记符是非成对标记符。
注意与段落标记符
的区别
花语<
hlalign="
fontface="
宋体"
/font>
/hl>
各种花所代表的含义如下：
ul>
li>
玫瑰：
纯洁的爱<
/li>
剑兰：
用心坚固<
百合：
百年好和<
litype="
circle"
满天星：
爱怜<
菊花：
吉祥<
康及馨：
亲情思念<
郁金香：
爱的表白<
紫罗兰：
永恒之美<
勿忘我：
爱到永远<
/ul>
列表标记包括“项目列表”标记<
、“编号列表”标记<
ol>
。
标记都是成对标记。
标记之间还可以使用<
标记来设定项目内容，其type属性可以显示不同形状的项目符号。
1-7.htm"
mailto:
gltxiaohong@"
与我联系<
HTML是通过<
标记符来实际超链接的，它是成对标记符，主要属性有：
（1）href。
链接文件的地址。
（2）target。
链接目标的位置。
1.指向电子邮件的链接
2.指向站点内文件的链接
3.指向其他网站文件的链接
b>
fontcolor="
#FF0000"
face="
隶书"
+5"
花店<
/b>
i>
fontcolor=“#660000”>
/i>
标记用来定义文字的字体、大小和颜色，是成对标记符。
主要属性有：
（1）face属性：
定义文字所使用的字体，如face=“隶书”。
（2）size属性：
定义文字的大小，属性值为1~7，也可以使用相对大小来设置，如size=“+5”、size=“-5”。
（3）color属性。
定义文字的颜色，可以使用颜色的英文名称来表示颜色，如：
color=“red”；
也可使用16进制的RGB代码来表示颜色，color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。
此外，字体标记符还包括<
粗体标记符、<
斜体标记符等。
Ⅴ.巩固小结:
本次课重点学习如何运用HTML编辑网页内容
Ⅵ.布置作业:
课题三运用HTML编辑网页表单与网页布局设计
掌握HTML文档中网页内容编辑标记符的设置
了解网页布局的主要类型和网页布局技术
掌握使用表格设计网页布局的方法
使用表格设计网页布局的方法
一、运用HTML编辑网页表单HTML表单的作用
HTML表单的标签
网页布局类型
三、网页布局设计网页布局一般原则
网页布局基本要素
网页布局的技术
（一）运用HTML编辑网页内容
（二）网页布局设计
1、成对标记与非成对标记在使用上有所不同？
、
2、<
.....<
有何区别
Ⅱ.导入新课:
上次课我们学习了运用HTML编辑网页内容，本次课主要学习运用HTML编辑网页表单以及网页布局设计
Ⅲ.教学目标：
掌握HTML
升级会员 