电子商务师(国家职业资格级)

《电子商务师(国家职业资格级)》由会员分享，可在线阅读，更多相关《电子商务师(国家职业资格级)（185页珍藏版）》请在金锄头文库上搜索。

1、助理电子商务师教程,国家职业资格三级,第一章网页制作,第一节 HTML语言一、页面布局二、文字与表格 第二节 动态网页制作一、编辑图像二、视频与音频,第一节 HTML语言,一、页面布局 学习目标：（1）了解HTML超文本标记语言的结构、语法。（2）掌握HTML文件的建立及浏览、常用格式化标记符的设置。（3）掌握链接标记的设置。工作程序及内容：（一）建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序” “附件” “记事本”，并打开“记事本”窗口。,（2）在记事本中，输入如图所示的HTML语句。（3）执行“文件” “保存”命令，将文件保存为1-1.htm。（4）在浏览器中打开所建立的

2、HTML文件。说明：除了记事本之外，还可以使用写字板来编辑html.（二）常用的HTML标记设置操作步骤如下：（1）在文本文件编辑器中编写HTML文件（可参考下面的示例编写）。,（2）保存HTML文件。（3）在浏览器中预览所编辑的HTML文件效果。1.标题标记 示例1标题标记，在记事本中输入以下HTML语句，保存后浏 览效果，如图所示。我的花店欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店!,说明： 标记符用于定义段落标题的大小级数。最大的标题级数是 ，最小的标题级数是。使用标记符的alig

3、n属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。2. 段落标记符示例2段落标记符，输入HTML语句如下，保存后的浏览效果 如图所示。我的花店我的花店! 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷 心的祝福! 祝愿进入我的花店的朋友天天有好心情!,说明： 标记符用于划分段落，控制文本的位置。 是成对标记符，用于定义内容从新的一行开始，并与上段之间的一个空行，其align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。3. 换行标

4、记示例3换行标记，将示例2中相应段落中的段落标记替换为换行标记，HTML语句如下，保存后的浏览效果如图所示。注意段落标记和换行标记预览效果的不同。 我的花店,我的花店!欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情!,说明：标记符用于定义从新的一行显示，它不产生一个空行，但连续多个标记可以产生多个空行的效果。 标记符是非成对标记符。,4.列表标记 示例4项目列表标记，HTML语句如下，保存后的浏览效果如图。花语花语 各种花所代表的含义如下：玫瑰：纯洁的爱剑兰：用心坚固百合：百年好和满天星：爱怜菊花：吉祥康及馨：亲情思念,郁金香

5、：爱的表白紫罗兰：永恒之美勿忘我：爱到永远,列表标记包括“项目列表”标记、“编号列表”标记。和标记都是成对标记。在标记之间还可以使用标记来设定项目内容，其type属性可以显示不同形状的项目符号。（三）链接标记的设置示例5链接标记，输入如下所示的HTML语句，保存后的浏览效果如图所示。花语 花节 友情链接 与我联系,HTML是通过标记符来实际超链接的，它是成对标记符，主要属性有：（1）href。链接文件的地址。（2）target。链接目标的位置。1.指向电子邮件的链接与我联系2.指向站点内文件的链接花节3.指向其他网站文件的链接友情链接,相关知识（一）HTML文件的概念HTML（Hyper Te

6、xt Markup Languafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。（二）HTML文件的特点HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。（三）HTML文件的结构HTML文件均以标记符开始，以标记符结束。和

7、标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在和标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。,（四）绝对地址和相对地址文件的引用既可以使用绝对地址，也可以使用相对地址。1.绝对地址直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如：友情链接2.相对地址用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如：花节,注意事项在使用记事本等编辑器建立HTML文件时，一定要以.htm.或html为扩展名保存文件否则在浏览器中无法正确显示预览效果。 二、文字与表格学习目标 （1）进一步了解HTML超文

8、本标记语言的结构、语法。 （2）掌握字体标记符、表格标记符的设置。 工作程序和内容 （一）建立HTML文件 操作步骤如下： （1）单击“开始”按钮，选择“程序” “附件” “记事本”，打开“记事本”窗口。 （2）在记事本中输入HTML语句。 （3）执行“文件” “保存”命令，将文件保存为htm或html格式。 （4）在浏览器中预览所建立的HTML文件,（二） 标记的设置示例6字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。我的花店我的花店!花店欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情!,

9、标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：（1）face属性：定义文字所使用的字体，如face=“隶书”。（2）size属性：定义文字的大小，属性值为17，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。（3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如： color=“red”；也可使用16进制的RGB代码来表示颜色， color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。此外，字体标记符还包括粗体标记符、斜体标记符等。（三）表格标记的设置：示例7表格标记，在记事本中输入以下HTML语

10、句，保存后在浏览器中浏览，效果如图所示。我的花店,节日名称5月1日国际劳动节,4日中国青年节12日护士节6月1日儿童节,此单元格跨列colspan=“2”,此单元跨行rowspan=“3”,在和之间放置表格内容，标记是成对标记。在表格中，行是用标记来定义的，一行使用一个标记，每行中的列是用标记定义的；一列使用一个标记。、标记都有相应的属性，用来定义表格中内容的显示方式。表格标记的主要属性有：（1）rowspan。定义该单元格所跨行数。（2）colspan。定义该单元格所跨列数。 相关知识（一）HTML标记的格式HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下：HTML语言元素

11、（1）标记符分为成对标记符和非成对标记符，、等属于成对标记符，、等属于非成对标记符。标记符忽略大小写。HTML源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；一个标记符的内容可以定成多行。（2）可使用标记符的属性来讲进一步限定标记符，一个标,记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。（3）HTML中使用的注释语句为,注释内容可插入文本中任何位置，注释内容将不显示。（二）HTML的作用（1）利用标题、文本、表格、列表和图像发布在线信息。（2）应用超连接获得世界各地的在线信息。（3）应用表单与远程服务通信，实现信息查询及各种商贸活动。（4）把样式、视频、音

12、频和应用程序嵌入到HTML文档。 注意事项表格是用标记符来一行一行定义的，每行中用列标记符来定义各列。,第二节 动态网页制作,一、编辑图像 学习目标（1）了解动态网页、图像处理的有关知识。（2）掌握使用Photoshop编辑和处理图像的方法。（3）掌握DHTML的应用。 工作程序及内容（一）编辑图像示例8在FrontPage中利用横幅广告管理器组件插入横幅广告。横幅广告中的图片尺寸应尽量一致，为此需要利用图像编辑处理软件对图像进行适当的处理。我们以Photoshop工具为例进行介绍，对图片进行适当的处理，图片大小设置为200100像素，操作步骤如下：（1）单击“开始”按钮，选择“程序” “Ad

13、obe Photoshop7.0”，打开Photoshop工作窗口。,（2）在Photoshop工作窗口中执行“文件” “打开”命令，打开图像文件，然后执行“图像” “图像大小”命令，在弹出的“图像大小”对话框中将图像的宽度设置为200像素，高度设置为100像素，如图所示，单击“好”按钮。（3）对图像应用滤镜效果。执行“滤镜” “风格化” “风”命令，在弹出的“风”对话框中进行参数设置，单击“好”按钮。（4）保存图像。执行“文件” “存储为”命令，在弹出的“存储为”对话框中设置保存路径、文件名称及文件的类型。单击“保存”按钮，会弹出如图所示的“JPEG”选项对话框，进行品质等设置后单击“好”按

14、钮，完成文件的保存操作。（5）按照上述方法，再打开两幅图像文件，调整图像大小为200 100像素，并分别应用“水波”、“动感模糊”效果，参数设置，最后保存图像文件。,（二）在FrontPage中插入横幅广告 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新建文件保存为guanggao.htm。 （2）在FrontPage中执行“插入” “组件” “横幅广告管理器”命令，打开“横幅广告管理器属性”对话框，设置宽度为200，高度为100，过滤效果为“分解”，每幅图片

15、显示3秒，单击“添加”按钮，将所需要的图片添加到“显示图片”列表框中，单击“上移”、“下移”按钮调整横幅广告图像变换的次序，单击“确定”按钮。 （3）保存后在浏览器中进行预览，每隔3秒钟变换一幅图片。（三）在FrontPage中应用动态HTML效果 示例9在FrontPage中应用动态HTML效果，操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”。打开“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新建文件保存为dtsg.htm。 （2）在FrontPage窗口中输入文本“助理电子商务师”，然后选中文本执行“格式

16、” “动态HTML效果”命令，在出现的“HTML效果”工具栏中进行设置。（3）保存后在浏览器中进行预览。,（四）建立及应用CSS样式文件 示例10使用FrontPage建立名为mystyle.css的外部CSS样式文件，并在其他页面文件中应用此样式文件。 1.创建CSS样式文件 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，打开“Microsoft FrontPage”窗口。 （2）在FrontPage窗口中，选择“文件” “新建” “网页”，在“新建”对话框中单击“样式表”选择卡，选择要创建的样式类型，然后单击“确定”按钮。 （3）单击样式工具栏中的样式按钮，弹出“样式”对话框。 （4）单击“样式”对话框中的“新建”按钮，弹出“新样式”对话框，在“名称（选择器）”中输入样式名称，单击“格式”按钮进行字体、段落、边框等设置，新建样式的设置。 （5）单击“确定”按钮后，会在“样式”对话框的样式栏中显示用户自定义的样式。再单击“确定”按钮，完成样式文件的创建。 （6）执行“文件” “保存文件”命令，保存文件。,