第1章 网页制作.ppt

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,助理电子商务师教程,国家职业资格三级,第一章：,网页制作,第一节：,HTML,语言,第二节 动态网页制作,第二章：,网络商务信息收集与交换,第一节 网络商务信息采集,第二节 网络商务信息处理,第三章：,网络营销,第一节 网上市场调研,第二节 网络广告与促销,第四章：,电子交易,第二节 电子合同签订,第五章：,物流信息管理,第一节 物流信息收集与分析,第二节 物流信息的应用,第六章：,网络采购,第一节 采购业务流程编制,第二节 供应商管理,第七章：,电子商务安全管理,第一节 文件加密,第二节 交易安全管理,第三节 安全工具使用,第一章网页制作,第一节,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,语句，保存后的浏览效果如图所示。,body,bgcolor,=#FFFF99,花语,花节,友情链接,与我联系,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,属性,：定义文字的大小，属性值为,17,，也可以使用相对大小来设置，如,size=“+5”,、,size=“-5”,。,（,3,）,color,属性,。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如：,color=“red”,；也可使用,16,进制的,RGB,代码来表示颜色，,color=“#FF0000”,，在使用,16,进制的,RGB,代码来表示颜色时，需在颜色代码前加“,#”,。,此外，字体标记符还包括,粗体标记符、,斜体标记符,等。,（三）,表格标记的设置：,示例,7,表格标记，在记事本中输入以下,HTML,语句，保存后在浏览器中浏览，效果如图所示。,我的花店,节日,名称,5,月,1,日,国际劳动节,4,日,中国青年节,12,日,护士节,6,月,1,日,儿童节,此单元格跨列,colspan,=“2”,此单元跨行,rowspan,=“3”,在,和,之间放置表格内容，,标记是成对标记。,在表格中，,行是用,标记来定义的,一行使用一个,标记，,每行中的列是用,标记定义的,；,一列使用一个,标记。,、,、,标记都有相应的属性，用来定义表格中内容的显示方式。,表格标记的主要属性有：,（,1,）,rowspan,。定义该单元格所跨行数,。,（,2,）,colspan,。定义该单元格所跨列数,。,相关知识,（一）,HTML,标记的格式,HTML,文件的所有控制语句称为标记,，标记在一对尖括号之间，格式如下：,HTML,语言元素,（,1,）标记符分为成对标记符和非成对标记符，,、,、,等属于成对标记符，,、,等属于非成对标记符,。,标记符忽略大小写。,HTML,源文件为文本文件，多个标记符可定成一行，甚至整个文件可定成一行；一个标记符的内容可以定成多行。,（,2,）可使用标记符的属性来讲进一步限定标记符，一个标记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。,（,3,）,HTML,中使用的注释语句为,注释内容可插入文本中任何位置,，注释内容将不显示。,（二）,HTML,的作用,（,1,）利用标题、文本、表格、列表和图像发布在线信息。,（,2,）应用超连接获得世界各地的在线信息。,（,3,）应用表单与远程服务通信，实现信息查询及各种商贸活动。,（,4,）把样式、视频、音频和应用程序嵌入到,HTML,文档。,注意事项,表格是用,标记符来一行一行定义的，每行中用,列标记符来定义各列。,第二节 动态网页制作,一、编辑图像,学习目标,（,1,）了解动态网页、图像处理的有关知识。,（,2,）掌握使用,Photoshop,编辑和处理图像的方法。,（,3,）掌握,DHTML,的应用。,工作程序及内容,（一）编辑图像,示例,8,在,FrontPage,中利用横幅广告管理器组件插入横幅广告。,横幅广告中的图片尺寸应尽量一致，为此需要利用图像编辑处理软件对图像进行适当的处理。,以,Photoshop,工具为例进行介绍，对图片进行适当的处理，图片大小设置为,200100,像素，操作步骤如下：,（,1,）单击“开始”按钮，选择“程序”“,Adobe Photoshop7.0”,，打开,Photoshop,工作窗口。,（,2,）在,Photoshop,工作窗口中执行“文件”“打开”命令，打开图像文件，然后执行“图像”“图像大小”命令，在弹出的“图像大小”对话框中将图像的宽度设置为,200,像素，高度设置为,100,像素，如图所示，单击“好”按钮。,（,3,）对图像应用滤镜效果。执行“滤镜”“风格化”“风”命令，在弹出的“风”对话框中进行参数设置，单击“好”按钮。,（,4,）保存图像。执行“文件”“存储为”命令，在弹出的“存储为”对话框中设置保存路径、文件名称及文件的类型。单击“保存”按钮，会弹出如图所示的“,JPEG”,选项对话框，进行品质等设置后单击“好”按钮，完成文件的保存操作。,（,5,）按照上述方法，再打开两幅图像文件，调整图像大小为,200 100,像素，并分别应用“水波”、“动感模糊”效果，参数设置，最后保存图像文件。,（二）在,FrontPage,中插入横幅广告,操作步骤如下：,（,1,）单击“开始”按钮，选择“程序”“,Microsoft FrontPage”,，“,Microsoft FrontPage”,窗口，执行“文件”“保存文件”命令，将新建文件保存为,guanggao.htm,。,（,2,）在,FrontPage,中执行“插入”“组件”“横幅广告管理器”命令，打开“横幅广告管理器属性”对话框，设置宽度为,200,，高度为,100,，过滤效果为“分解”，每幅图片显示,3,秒，单击“添加”按钮，将所需要的图片添加到“显示图片”列表框中，单击“上移”、“下移”按钮调整横幅广告图像变换的次序，单击“确定”按钮。,（,3,）保存后在浏览器中进行预览，每隔,3,秒钟变换一幅图片。,（三）在,FrontPage,中应用动态,HTML,效果,示例,9,在,FrontPage,中应用动态,HTML,效果，操作步骤如下：,（,1,）单击“开始”按钮，选择“程序”“,Microsoft FrontPage”,。打开“,Microsoft FrontPage”,窗口，执行“文件”“保存文件”命令，将新建文件保存为,dtsg.htm,。,（,2,）在,FrontPage,窗口中输入文本“助理电子商务师”，然后选中文本执行“格式”“动态,HTML,效果”命令，在出现的“,HTML,效果”工具栏中进行设置。,（,3,）保存后在浏览器中进行预览。,（四）建立及应用,CSS,样式文件,示例,10,使用,FrontPage,建立名为,mystyle.css,的外部,CSS,样式文件，并在其他页面文件中应用此样式文件。,1.,创建,CSS,样式文件,操作步骤如下：,（,1,）单击“开始”按钮，选择“程序”“,Microsoft FrontPage”,，打开“,Microsoft FrontPage”,窗口。,（,2,）在,FrontPage,窗口中，选择“文件”“新建”“网页”，在“新建”对话框中单击“样式表”选择卡，选择要创建的样式类型，然后单击“确定”按钮。,（,3,）单击样式工具栏中的样式按钮，弹出“样式”对话框。,（,4,）单击“样式”对话框中的“新建”按钮，弹出“新样式”对话框，在“名称（选择器）”中输入样式名称，单击“格式”按钮进行字体、段落、边框等设置，新建样式的设置。,（,5,）单击“确定”按钮后，会在“样式”对话框的样式栏中显示用户自定义的样式。再单击“确定”按钮，完成样式文件的创建。,（,6,）执行“文件”“保存文件”命令，保存文件。,2.,应用外部,CSS,样式,操作步骤如下：,（,1,）新建页面文件并进行保存操作，输入文字内容“这是样式的应用”。,（,2,）执行“格式”“样式表链接”命令，在打开的“链接样式表”对话框中进行设置，选择“所选的网页”选项，单击“添加”按钮选择所要链接的样式表文件，单击“确定”按钮。,（,3,）选中文字，切换到,HTML,视图下，将,区中的“,这是样式的应用,”HTML,语句修改为“,这是样式的应用,”,，保存文件后浏览效果。,大多数时候可以不为具体的,HTML,标记符定义格式，而是定义一些开放的格式，在内容需要的时候才引用这些格式。,（一）,DHTML,1,、,DHTML,的定义：又称动态网页，它将内容对象化，应用编程语言来操作页面上的对象，不必通过服务器就可以与用户交互信息，更新页面的内容。动态见面技术包括,javascript,、,vbscript,、,css,、,layer,等。,相关知识,、,DHTML,的基本结构,DHTML,的基本结构包括,HTML,、,CSS,、脚本程序、浏览器对象和网页对象等。,DHTML,是基于,HTML,语言，通过,CSS,技术扩展了,HTML,的样式定义语法和语义，用脚本程序或控制浏览器对象和网页对象，从而使页面具有动态效果和交互功能。,（二）,CSS,层叠样式表,是一种用于定义网页内容显示样式的技术。通过样式可以设定许多属性，如字号，颜色，页边距等。,样式表的建立要符合,CSS,规则，它们一般被定义成以下形式的句法：,HTML,标志,标志属性,:,属性值；标志属性,:,属性值；标志属性,:,属性值；标志属性,:,属性值；,.,（三）脚本语言,1.,脚本语言,(,JavaScript,VBscript,等,),介于,HTML,和,C,C+,Java,C,#,等,编程语言之间。,HTML,通常用于格式化和链结文本。而编程语言通常用于向机器发出一系列复杂的指令。,2.,脚本语言与编程语言也有很多相似地方，其函数与编程语言 比较相象一些,其也涉及到变量。与编程语言之间最大的区别 是编程语言的语法和规则更为严格和复杂一些。,3.,与程序代码的关系,:,脚本也是一种语言，其同样由程序代码组成。,注：脚本语言一般都有相应的脚本引擎来解释执行。,4.,脚本语言是一种解释性的语言,例如,vbscript,javascript,installshield,script,等等,它不象,cc,+,等可以编译成二进制代码,以可执行文件的形式存在。,脚本语言一般都是以文本形式存在,类似于一种命令。,作业提交方式,作业分为纸质提交作业与电子版提交作业,电子版作业提交地址（,QQ,信箱,360702252QQ.com,）,综合测试,自办,C2C,网店！,以成功产生销售额为评分基础,作业,第一节,HTML,语言,一 页面布局,1,成对标记与非成对标记在使用上有何不同？下列标记符中哪些是成对标记符，哪些是非成对标记符？,2,和,有何区别？,3,试用,HTML,编写一个简单的网页。,二文字与表格,1,HTML,文件中的标记是否区分大小写？,2,编辑,HTML,文件时应注意什么问题？,3,试用,HTML,编写一个简单的表格网页。,第二节动态网页制作,一 编辑图像,1,静态网页和动态网页有何区别？,2,DHTML,的基本结构。,3,CSS,样式的主要特点及其类型。,4,试用创建一个外部样式文件，并在一个页面文件中应用此文件中的样式。,二视频与音频,1,多媒体文件常用的类型。,2,试用在一个页面文件中插入背景音乐。,3,试用在一个页面文件中插入,Flash,动画。,