助理电子商务师教程课件

《助理电子商务师教程课件》由会员分享，可在线阅读，更多相关《助理电子商务师教程课件（185页珍藏版）》请在金锄头文库上搜索。

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

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

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

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

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

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

7、快速创建HTML文件。 （三）HTML文件的结构 HTML文件均以标记符开始，以标记符结束。和标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在和标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。,（四）绝对地址和相对地址 文件的引用既可以使用绝对地址，也可以使用相对地址。 1.绝对地址 直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如： 友情链接 2.相对地址 用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如： 花节,注意事项 在使用记事本等编辑器建立HTML文件时，一定要以.htm.或ht

8、ml为扩展名保存文件否则在浏览器中无法正确显示预览效果。 二、文字与表格 学习目标 （1）进一步了解HTML超文本标记语言的结构、语法。 （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代码来表示颜色时，需在颜色代

10、码前加“#”。 此外，字体标记符还包括粗体标记符、斜体标记符等。 （三）表格标记的设置： 示例7表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图所示。 我的花店 , 节日 名称 5月 1日 国际劳动节 ,4日 中国青年节 12日 护士节 6月1日 儿童节 ,此单元格跨列colspan=“2”,此单元跨行rowspan=“3”,在和之间放置表格内容，标记是成对标记。在表格中，行是用标记来定义的，一行使用一个标记，每行中的列是用标记定义的；一列使用一个标记。、标记都有相应的属性，用来定义表格中内容的显示方式。表格标记的主要属性有： （1）rowspan。定义该单元格所跨行数

11、。 （2）colspan。定义该单元格所跨列数。 相关知识 （一）HTML标记的格式 HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下： HTML语言元素 （1）标记符分为成对标记符和非成对标记符，、等属于成对标记符，、等属于非成对标记符。标记符忽略大小写。HTML源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；一个标记符的内容可以定成多行。 （2）可使用标记符的属性来讲进一步限定标记符，一个标,记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。 （3）HTML中使用的注释语句为,注释内容可插入文本中任何位置，注释内容将不显示。 （二）HTM

12、L的作用 （1）利用标题、文本、表格、列表和图像发布在线信息。 （2）应用超连接获得世界各地的在线信息。 （3）应用表单与远程服务通信，实现信息查询及各种商贸活动。 （4）把样式、视频、音频和应用程序嵌入到HTML文档。 注意事项 表格是用标记符来一行一行定义的，每行中用列标记符来定义各列。,第二节 动态网页制作,一、编辑图像 学习目标 （1）了解动态网页、图像处理的有关知识。 （2）掌握使用Photoshop编辑和处理图像的方法。 （3）掌握DHTML的应用。 工作程序及内容 （一）编辑图像 示例8在FrontPage中利用横幅广告管理器组件插入横幅广告。 横幅广告中的图片尺寸应尽量一致，为

13、此需要利用图像编辑处理软件对图像进行适当的处理。我们以Photoshop工具为例进行介绍，对图片进行适当的处理，图片大小设置为200100像素，操作步骤如下： （1）单击“开始”按钮，选择“程序” “Adobe Photoshop7.0”，打开Photoshop工作窗口。,（2）在Photoshop工作窗口中执行“文件” “打开”命令，打开图像文件，然后执行“图像” “图像大小”命令，在弹出的“图像大小”对话框中将图像的宽度设置为200像素，高度设置为100像素，如图所示，单击“好”按钮。 （3）对图像应用滤镜效果。执行“滤镜” “风格化” “风”命令，在弹出的“风”对话框中进行参数设置，单击

14、“好”按钮。 （4）保存图像。执行“文件” “存储为”命令，在弹出的“存储为”对话框中设置保存路径、文件名称及文件的类型。单击“保存”按钮，会弹出如图所示的“JPEG”选项对话框，进行品质等设置后单击“好”按钮，完成文件的保存操作。 （5）按照上述方法，再打开两幅图像文件，调整图像大小为200 100像素，并分别应用“水波”、“动感模糊”效果，参数设置，最后保存图像文件。,（二）在FrontPage中插入横幅广告 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新

15、建文件保存为guanggao.htm。 （2）在FrontPage中执行“插入” “组件” “横幅广告管理器”命令，打开“横幅广告管理器属性”对话框，设置宽度为200，高度为100，过滤效果为“分解”，每幅图片显示3秒，单击“添加”按钮，将所需要的图片添加到“显示图片”列表框中，单击“上移”、“下移”按钮调整横幅广告图像变换的次序，单击“确定”按钮。 （3）保存后在浏览器中进行预览，每隔3秒钟变换一幅图片。 （三）在FrontPage中应用动态HTML效果 示例9在FrontPage中应用动态HTML效果，操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontP

16、age”。打开“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新建文件保存为dtsg.htm。 （2）在FrontPage窗口中输入文本“助理电子商务师”，然后选中文本执行“格式” “动态HTML效果”命令，在出现的“HTML效果”工具栏中进行设置。 （3）保存后在浏览器中进行预览。,（四）建立及应用CSS样式文件 示例10使用FrontPage建立名为mystyle.css的外部CSS样式文件，并在其他页面文件中应用此样式文件。 1.创建CSS样式文件 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，打开“Microsoft FrontPage”窗口。 （2）在FrontPage窗口中，选择“文