助理电子商务师教程网页制作

助理电子商务师教程,国家职业资格三级,第一章网页制作,第一节 HTML语言 一、页面布局 二、文字与表格 第二节 动态网页制作 一、编辑图像 二、视频与音频,第一节 HTML语言,一、页面布局 学习目标： (1)了解HTML超文本标记语言的结构、语法。 (2)掌握HTML文件的建立及浏览、常用格式化标记符的设置。 (3)掌握链接标记的设置。 工作程序及内容： (一)建立HTML文件 操作步骤如下： (1)单击“开始”按钮，选择“程序” →“附件” →“记事本”，并打开“记事本”窗口。,(2)在记事本中，输入如图所示的HTML语句。 (3)执行“文件” →“保存”命令，将文件保存为1-1.htm。 (4)在浏览器中打开所建立的HTML文件。 说明：除了记事本之外，还可以使用写字板来编辑html. (二)常用的HTML标记设置 操作步骤如下： (1)在文本文件编辑器中编写HTML文件(可参考下面的示例编写)。,(2)保存HTML文件。 (3)在浏览器中预览所编辑的HTML文件效果。 1.标题标记 [示例1]标题标记，在记事本中输入以下HTML语句，保存后浏 览效果，如图所示。 我的花店 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! ,说明： 标记符用于定义段落标题的大小级数。最大的标题级数是 ，最小的标题级数是。使用标记符的align属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。 2. 段落标记符 [示例2]段落标记符，输入HTML语句如下，保存后的浏览效果 如图所示。 我的花店 我的花店! 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷 心的祝福! 祝愿进入我的花店的朋友天天有好心情! ,,说明： 标记符用于划分段落，控制文本的位置。 是成对标记符，用于定义内容从新的一行开始，并与上段之间的一个空行，其align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。 3. 换行标记 [示例3]换行标记，将示例2中相应段落中的段落标记替换为换行标记，HTML语句如下，保存后的浏览效果如图所示。注意段落标记和换行标记预览效果的不同。 我的花店 ,我的花店! 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情! ,说明：标记符用于定义从新的一行显示，它不产生一个空行，但连续多个标记可以产生多个空行的效果。 标记符是非成对标记符。,4.列表标记 [示例4]项目列表标记，HTML语句如下，保存后的浏览效果如图。 花语 花语 各种花所代表的含义如下： 玫瑰：纯洁的爱 剑兰：用心坚固 百合：百年好和 满天星：爱怜 菊花：吉祥 康及馨：亲情思念,郁金香：爱的表白 紫罗兰：永恒之美 勿忘我：爱到永远 ,列表标记包括“项目列表”标记、“编号列表”标记。和标记都是成对标记。在标记之间还可以使用标记来设定项目内容，其type属性可以显示不同形状的项目符号。 (三)链接标记的设置 [示例5]链接标记，输入如下所示的HTML语句，保存后的浏览效果如图所示。 花语 花节 友情链接 与我联系 ,HTML是通过标记符来实际超链接的，它是成对标记符，主要属性有： (1)href。链接文件的地址。 (2)target。链接目标的位置。 1.指向电子邮件的链接 与我联系 2.指向站点内文件的链接 花节 3.指向其他网站文件的链接 友情链接,相关知识 (一)HTML文件的概念 HTML(Hyper Text Markup Languafe)，即超文本标记语言，它通过多种标准化的标记符号(Tag)对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。 (二)HTML文件的特点 HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。 (三)HTML文件的结构 HTML文件均以标记符开始，以标记符结束。和标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在和标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。,(四)绝对地址和相对地址 文件的引用既可以使用绝对地址，也可以使用相对地址。 1.绝对地址 直接定出所链接的文件位于哪个服务器中的网站内，主要用来链接其他网站的网页，例如： 友情链接 2.相对地址 用所链接的文件相对于目前网页所在位置来表示，通常用来链接当前网站中的其他网页，例如： 花节,注意事项 在使用记事本等编辑器建立HTML文件时，一定要以.htm.或html为扩展名保存文件否则在浏览器中无法正确显示预览效果。 二、文字与表格 学习目标 (1)进一步了解HTML超文本标记语言的结构、语法。 (2)掌握字体标记符、表格标记符的设置。 工作程序和内容 (一)建立HTML文件 操作步骤如下： (1)单击“开始”按钮，选择“程序” →“附件” →“记事本”，打开“记事本”窗口。 (2)在记事本中输入HTML语句。 (3)执行“文件” →“保存”命令，将文件保存为htm或html格式。 (4)在浏览器中预览所建立的HTML文件,(二) 标记的设置 [示例6]字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。 我的花店 我的花店!花店 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情! ,标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有： (1)face属性：定义文字所使用的字体，如face=“隶书”。 (2)size属性：定义文字的大小，属性值为1~7，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。 (3)color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如： color=“red”；也可使用16进制的RGB代码来表示颜色， color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。 此外，字体标记符还包括…粗体标记符、…斜体标记符等。 (三)表格标记的设置： [示例7]表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图所示。 我的花店 ,