第1章 网页制作(1).ppt

1、助理电子商务师教程,国家职业资格三级,第一章：网页制作 第一节：HTML语言 第二节 动态网页制作 第二章：网络商务信息收集与交换 第一节 网络商务信息采集 第二节 网络商务信息处理 第三章：网络营销 第一节 网上市场调研 第二节 网络广告与促销 第四章：电子交易 第二节 电子合同签订 第五章：物流信息管理 第一节 物流信息收集与分析 第二节 物流信息的应用 第六章：网络采购 第一节 采购业务流程编制 第二节 供应商管理 第七章：电子商务安全管理 第一节 文件加密 第二节 交易安全管理 第三节 安全工具使用,第一章网页制作,第一节 HTML语言一、页面布局二、文字与表格 第二节 动态网页制作一

2、、编辑图像二、视频与音频,第一节 HTML语言,一、页面布局 学习目标：（1）了解HTML超文本标记语言的结构、语法。（2）掌握HTML文件的建立及浏览、常用格式化标记符的设置。（3）掌握链接标记的设置。工作程序及内容：（一）建立HTML文件操作步骤如下：（1）单击“开始”按钮，选择“程序” “附件” “记事本”，并打开“记事本”窗口。,（2）在记事本中，输入如图所示的HTML语句。（3）执行“文件” “保存”命令，将文件保存为1-1.htm。（4）在浏览器中打开所建立的HTML文件。说明：除了记事本之外，还可以使用写字板来编辑html.（二）常用的HTML标记设置操作步骤如下：（1）在文本文

3、件编辑器中编写HTML文件（可参考下面的示例编写）。,（2）保存HTML文件。（3）在浏览器中预览所编辑的HTML文件效果。1.标题标记 示例1标题标记，在记事本中输入以下HTML语句，保存后浏 览效果，如图所示。我的花店欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店!,说明： 标记符用于定义段落标题的大小级数。最大的标题级数是 ，最小的标题级数是。使用标记符的align属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。2. 段落标

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

5、行标记预览效果的不同。 我的花店,我的花店!欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情!,说明：标记符用于定义从新的一行显示，它不产生一个空行，但连续多个标记可以产生多个空行的效果。 标记符是非成对标记符。,4.列表标记 示例4项目列表标记，HTML语句如下，保存后的浏览效果如图。花语花语 各种花所代表的含义如下：玫瑰：纯洁的爱剑兰：用心坚固百合：百年好和满天星：爱怜菊花：吉祥康及馨：亲情思念,郁金香：爱的表白紫罗兰：永恒之美勿忘我：爱到永远,列表标记包括“项目列表”标记、“编号列表”标记。和标记都是成对标记。在标记之间还

6、可以使用标记来设定项目内容，其type属性可以显示不同形状的项目符号。（三）链接标记的设置示例5链接标记，输入如下所示的HTML语句，保存后的浏览效果如图所示。花语 花节 友情链接 与我联系,HTML是通过标记符来实际超链接的，它是成对标记符，主要属性有：（1）href。链接文件的地址。（2）target。链接目标的位置。1.指向电子邮件的链接与我联系2.指向站点内文件的链接花节3.指向其他网站文件的链接友情链接,相关知识（一）HTML文件的概念HTML（Hyper Text Markup Languafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容

7、进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。（二）HTML文件的特点HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创建HTML文件。（三）HTML文件的结构HTML文件均以标记符开始，以标记符结束。和标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在和标记符之间的内容即为页面的主体内容。HTML文件的整

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

9、（1）单击“开始”按钮，选择“程序” “附件” “记事本”，打开“记事本”窗口。 （2）在记事本中输入HTML语句。 （3）执行“文件” “保存”命令，将文件保存为htm或html格式。 （4）在浏览器中预览所建立的HTML文件,（二） 标记的设置示例6字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。我的花店我的花店!花店欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情!,标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：（1）face属性：定义文字所使用的字体，如face=“隶书”

10、。（2）size属性：定义文字的大小，属性值为17，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。（3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如： color=“red”；也可使用16进制的RGB代码来表示颜色， color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。此外，字体标记符还包括粗体标记符、斜体标记符等。,（三）表格标记的设置：示例7表格标记，在记事本中输入以下HTML语句，保存后在浏览器中浏览，效果如图所示。我的花店,节日名称5月1日国际劳动节,4日中国青年节12日护士节6月1日儿童节,此

11、单元格跨列colspan=“2”,此单元跨行rowspan=“3”,在和之间放置表格内容，标记是成对标记。在表格中，行是用标记来定义的一行使用一个标记，每行中的列是用标记定义的；一列使用一个标记。、标记都有相应的属性，用来定义表格中内容的显示方式。表格标记的主要属性有：（1）rowspan。定义该单元格所跨行数。（2）colspan。定义该单元格所跨列数。,相关知识,（一）HTML标记的格式HTML文件的所有控制语句称为标记，标记在一对尖括号之间，格式如下：HTML语言元素（1）标记符分为成对标记符和非成对标记符，、等属于成对标记符，、等属于非成对标记符。标记符忽略大小写。HTML源文件为文本

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

13、制作,一、编辑图像 学习目标（1）了解动态网页、图像处理的有关知识。（2）掌握使用Photoshop编辑和处理图像的方法。（3）掌握DHTML的应用。,工作程序及内容,（一）编辑图像示例8在FrontPage中利用横幅广告管理器组件插入横幅广告。横幅广告中的图片尺寸应尽量一致，为此需要利用图像编辑处理软件对图像进行适当的处理。以Photoshop工具为例进行介绍，对图片进行适当的处理，图片大小设置为200100像素，操作步骤如下：（1）单击“开始”按钮，选择“程序” “Adobe Photoshop7.0”，打开Photoshop工作窗口。,（2）在Photoshop工作窗口中执行“文件” “

14、打开”命令，打开图像文件，然后执行“图像” “图像大小”命令，在弹出的“图像大小”对话框中将图像的宽度设置为200像素，高度设置为100像素，如图所示，单击“好”按钮。（3）对图像应用滤镜效果。执行“滤镜” “风格化” “风”命令，在弹出的“风”对话框中进行参数设置，单击“好”按钮。,（4）保存图像。执行“文件” “存储为”命令，在弹出的“存储为”对话框中设置保存路径、文件名称及文件的类型。单击“保存”按钮，会弹出如图所示的“JPEG”选项对话框，进行品质等设置后单击“好”按钮，完成文件的保存操作。（5）按照上述方法，再打开两幅图像文件，调整图像大小为200 100像素，并分别应用“水波”、“

15、动感模糊”效果，参数设置，最后保存图像文件。,（二）在FrontPage中插入横幅广告 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新建文件保存为guanggao.htm。 （2）在FrontPage中执行“插入” “组件” “横幅广告管理器”命令，打开“横幅广告管理器属性”对话框，设置宽度为200，高度为100，过滤效果为“分解”，每幅图片显示3秒，单击“添加”按钮，将所需要的图片添加到“显示图片”列表框中，单击“上移”、“下移”按钮调整横幅广告图像变换的次

16、序，单击“确定”按钮。 （3）保存后在浏览器中进行预览，每隔3秒钟变换一幅图片。,（三）在FrontPage中应用动态HTML效果 示例9在FrontPage中应用动态HTML效果，操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”。打开“Microsoft FrontPage”窗口，执行“文件” “保存文件”命令，将新建文件保存为dtsg.htm。 （2）在FrontPage窗口中输入文本“助理电子商务师”，然后选中文本执行“格式” “动态HTML效果”命令，在出现的“HTML效果”工具栏中进行设置。（3）保存后在浏览器中进行预览。,（四）建立及

17、应用CSS样式文件 示例10使用FrontPage建立名为mystyle.css的外部CSS样式文件，并在其他页面文件中应用此样式文件。 1.创建CSS样式文件 操作步骤如下： （1）单击“开始”按钮，选择“程序” “Microsoft FrontPage”，打开“Microsoft FrontPage”窗口。 （2）在FrontPage窗口中，选择“文件” “新建” “网页”，在“新建”对话框中单击“样式表”选择卡，选择要创建的样式类型，然后单击“确定”按钮。,（3）单击样式工具栏中的样式按钮，弹出“样式”对话框。 （4）单击“样式”对话框中的“新建”按钮，弹出“新样式”对话框，在“名称（选

18、择器）”中输入样式名称，单击“格式”按钮进行字体、段落、边框等设置，新建样式的设置。 （5）单击“确定”按钮后，会在“样式”对话框的样式栏中显示用户自定义的样式。再单击“确定”按钮，完成样式文件的创建。 （6）执行“文件” “保存文件”命令，保存文件。,2.应用外部CSS样式 操作步骤如下： （1）新建页面文件并进行保存操作，输入文字内容“这是样式的应用”。 （2）执行“格式” “样式表链接”命令，在打开的“链接样式表”对话框中进行设置，选择“所选的网页”选项，单击“添加”按钮选择所要链接的样式表文件，单击“确定”按钮。 （3）选中文字，切换到HTML视图下，将区中的“这是样式的应用”HTML

19、语句修改为“这是样式的应用”，保存文件后浏览效果。大多数时候可以不为具体的HTML标记符定义格式，而是定义一些开放的格式，在内容需要的时候才引用这些格式。,（一）DHTML 1、DHTML的定义：又称动态网页，它将内容对象化，应用编程语言来操作页面上的对象，不必通过服务器就可以与用户交互信息，更新页面的内容。动态见面技术包括javascript、vbscript、css、layer等。,相关知识,、DHTML的基本结构DHTML的基本结构包括HTML、CSS、脚本程序、浏览器对象和网页对象等。DHTML 是基于HTML语言，通过CSS技术扩展了HTML的样式定义语法和语义，用脚本程序或控制浏览

20、器对象和网页对象，从而使页面具有动态效果和交互功能。,（二）CSS层叠样式表是一种用于定义网页内容显示样式的技术。通过样式可以设定许多属性，如字号，颜色，页边距等。样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法： HTML标志标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；.,（三）脚本语言1.脚本语言(JavaScript,VBscript等)介于HTML和C,C+,Java,C#等 编程语言之间。 HTML通常用于格式化和链结文本。 而编程语言通常用于向机器发出一系列复杂的指令。2.脚本语言与编程语言也有很多相似地方，其函数与编程语言 比较相象一些,其

21、也涉及到变量。与编程语言之间最大的区别 是编程语言的语法和规则更为严格和复杂一些。,3.与程序代码的关系:脚本也是一种语言，其同样由程序代码组成。注：脚本语言一般都有相应的脚本引擎来解释执行。4.脚本语言是一种解释性的语言,例如vbscript, javascript, installshield script等等,它不象cc+等可以编译成二进制代码,以可执行文件的形式存在。脚本语言一般都是以文本形式存在,类似于一种命令。,作业提交方式,作业分为纸质提交作业与电子版提交作业 电子版作业提交地址（QQ信箱360702252QQ.com）,综合测试,自办C2C网店！ 以成功产生销售额为评分基础,作

22、业,第一节 HTML语言 一 页面布局1成对标记与非成对标记在使用上有何不同？下列标记符中哪些是成对标记符，哪些是非成对标记符？2和有何区别？3试用HTML编写一个简单的网页。 二文字与表格1HTML文件中的标记是否区分大小写？2编辑HTML文件时应注意什么问题？3试用HTML编写一个简单的表格网页。 第二节 动态网页制作 一 编辑图像1静态网页和动态网页有何区别？2DHTML的基本结构。3CSS样式的主要特点及其类型。4试用创建一个外部样式文件，并在一个页面文件中应用此文件中的样式。 二视频与音频1多媒体文件常用的类型。2试用在一个页面文件中插入背景音乐。3试用在一个页面文件中插入Flash动画。,