电子商务师-助理电子商务师国家资格培训教材

助理电子商务师教程国家职业资格三级第一章网页制作第一节HTML语言一、页面布局二、文字与表格第二节动态网页制作一、编辑图像二、视频与音频第一节HTML语言一、页面布局学习目标：（1）了解HTML超文本标记语言的结构、语法。（2）掌握HTML文件的建立及浏览、常用格式化标记符的设置。（3）掌握链接标记的设置。工作程序及内容：（一）建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序”→“附件”→“记事本”，并打开“记事本”窗口。（2）保存HTML文件。（3）在浏览器中预览所编辑的HTML文件效果。1.Hi标题标记[示例1]标题标记，在记事本中输入以下HTML语句，保存后浏览效果，如图所示。htmlheadtitle我的花店/title/headbodyh1欢迎你访问我的花店!/h1h2欢迎你访问我的花店!/h2h3欢迎你访问我的花店!/h3h4欢迎你访问我的花店!/h4h5欢迎你访问我的花店!/h5h6欢迎你访问我的花店!/h6h7欢迎你访问我的花店!/h7/body/html说明：hi标记符用于定义段落标题的大小级数。最大的标题级数是h1，最小的标题级数是h6。使用hi标记符的align属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。2.P段落标记符[示例2]段落标记符，输入HTML语句如下，保存后的浏览效果如图所示。htmlheadtitle我的花店/title/headbodybgcolor=#FFFF99h1align=center我的花店!/h1palign=center欢迎您访问我的花店/ppalign=“center”花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!/ppalign=center祝愿进入我的花店的朋友天天有好心情!/p/body/html4.列表标记[示例4]项目列表标记，HTML语句如下，保存后的浏览效果如图。headhtmltitle花语/title/headbodybgcolor=#FFFF99hlalign=centerfontface=宋体花语/font/hlp各种花所代表的含义如下：/pulli玫瑰：纯洁的爱/lili剑兰：用心坚固/lili百合：百年好和/lilitype=circle满天星：爱怜/lilitype=circle菊花：吉祥/lilitype=circle康及馨：亲情思念/lilitype=circle郁金香：爱的表白/lilitype=circle紫罗兰：永恒之美/lilitype=circle勿忘我：爱到永远/li/ul/body/html列表标记包括“项目列表”标记ul、“编号列表”标记ol。ul和ol标记都是成对标记。在ul标记之间还可以使用li标记来设定项目内容，其type属性可以显示不同形状的项目符号。（三）a链接标记的设置[示例5]链接标记，输入如下所示的HTML语句，保存后的浏览效果如图所示。htmlhead/headbodybgcolor=#FFFF99pahref=1-7.htm花语/a/ppahref=bg.htmtarget=right花节/a/ppahref=友情链接/a/ppahref=mailto:[e-mail]与我联系/a/p/body/htmlHTML是通过a标记符来实际超链接的，它是成对标记符，主要属性有：（1）href。链接文件的地址。（2）target。链接目标的位置。1.指向电子邮件的链接ahref=mailto:[e-mail]与我联系/a2.指向站点内文件的链接ahref=bg.htmtarget=right花节/a3.指向其他网站文件的链接ahref=友情链接/a相关知识（一）HTML文件的概念HTML（HyperTextMarkupLanguafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。（二）HTML文件的特点HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。（三）HTML文件的结构HTML文件均以html标记符开始，以/html标记符结束。head和/head标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在body和/body标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。（四）绝对地址和相对地址文件的引用既可以使用绝对地址，也可以使用相对地址。1.绝对地址直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如：ahref=友情链接/a2.相对地址用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如：ahref=bg.htmtarget=right花节/a注意事项在使用记事本等编辑器建立HTML文件时，一定要以.htm.或html为扩展名保存文件否则在浏览器中无法正确显示预览效果。二、文字与表格学习目标（1）进一步了解HTML超文本标记语言的结构、语法。（2）掌握字体标记符、表格标记符的设置。工作程序和内容（一）建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序”→“附件”→“记事本”，打开“记事本”窗口。（2）在记事本中输入HTML语句。（3）执行“文件”→“保存”命令，将文件保存为htm或html格式。（4）在浏览器中预览所建立的HTML文件（二）font标记的设置[示例6]字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。headtitle我的花店/title/headbodybgcolor=#FFFF99h1align=centerbfontcolor=#FF0000face=隶书size=+5我的花店!花店/font/b/h1hralign=centerwidth=100%size=4color=3333FFpalign=center欢迎您访问我的花店/p花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福!br祝愿进入我的花店的朋友天天有好心情!brhralign=centerwidth=100%size=4color=3333FF/body/htmlfont标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：（1）face属性：定义文字所使用的字体，如face=“隶书”。（2）size属性：定义文字的大小，属性值为1~7，也可以使用相对大小来设置，如size=“+5”、size=“-5”。（3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如：color=“red”；也可使用16进制的RGB代码来表示颜色，color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。此外，字体标记符还包括b…/b粗体标记符、i…/i斜体标记符等。（三）table表格标记的设置：[示例7]表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图所示。htmlheadtitle我的花店/titlestyletype=text/css!--.style3{font-size:24px;}--/style/headbodybgcolor=#FFFF99tablewidth=317height=182border=1trtdcolspan=2divalign=centerclass=style3节日/div/tdtddivalign=centerclass=style3名称/div/td/trtrtdrowspan=3divalign=centerclass=style35月/div/tdtddivalign=centerclass=style31日/div/tdtdheight=36divalign=centerclass=style3国际劳动节/div/td/trtr在table和/table之间放置表格内容，table标记是成对标记。在表格中，行是用tr…/tr标记来定义的，一行使用一个tr…/tr标记，每行中的列是用td…/td标记定义的；一列使用一个td…/td标记。table、tr、td标记都有相应的属性，用来定义表格中内容的显示方式。table表格标记的主要属性有：（1）rowspan。定义该单元格所跨行数。（2）colspan。定义该单元格所跨列数。相关知识（一）HTML标记的格式HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下：标记HTML语言元素/标记（1）标记符分为成对标记符和非成对标记符，title、p、font等属于成对标记符，br、hr等属于非成对标记符。标记符忽略大小写。HTML源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；一个标记符的内容可以定成多行。（2）可使用标记符的属性来讲进一步限定标记符，一个标记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。（3）HTML中使用的注释语句为!--…--,注释内容可插入文本中任何位置，注释内容将不显示。（二）HTML的作用（1）利用标题、文本、表格、列表和图像发布在线信息。（2）应用超连接获得世界各地的在线信息。（3）应用表单与远程服务通信，实现信息查询及各种商贸活动。（4）把样式、视频、音频和应用程序嵌入到HTML文档。注意事项表格是用tr…/tr标记符来一行一行定义的，每行中用td…/td列标记符来定义各列。第二节动态网页制作一、编辑图像学习目标（1）了解动态网页、图像处理的有关知识。（2）掌握使用Photoshop编辑和处理图像的方法。（3）掌握DHTML的应用。工作程序及内容（一）编辑图像[示例8]在FrontPage中利用横幅广告管理器组件插入横幅广告。横幅广告中的图片尺寸应尽量一致，为此需要利用图像编辑处理软件对图像进行适当的处理。我们以Photoshop工具为例进行介绍，对图片进行适当的处理，图片大小设置为200×100像素，操作步骤如下：（1）单击“开始”按钮，选择“程序”→“AdobePhotoshop7.0”，打开Photoshop工作窗口。（2）在Photoshop工作窗口中执行“文件”→“打开”命令，打开图像文件，然后执行“图像”→“图像大小”命令，在弹出的“图像大小”对话框中将图像的宽度设置为200像素，高度设置为100像素，如图所示，单击“好”按钮。（3）对图像应用滤