网页制作PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,网页制作,1,相关知识,（一）,HTML,文件的概念,HTML,（,Hyper Text Markup Languafe,），即,超文本标记语言,，它通过多种标准化的标记符号（,Tag,）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。,（二）,HTML,文件的特点,HTML,是,Web,页面的基础,。使用,HTML,描述的网页文件称之为,HTML,页面或者,HTML,文件，这种文件以,“,.html”,或者“,.htm”,为扩展名，它是一种,纯文本文件,，可以使用,记事本,、,写字板,等文本编辑器来进行编辑，也可以使用,FrontPage,、,DreamWeaver,等网页制作工具来快速创建,HTML,文件。,（三）,HTML,文件的结构,HTML,文件均以,标记符开始，以,标记符结束。,和,标记符之间的内容用于描述页面的头部信息，,例如页面标题、关键词等信息。在,和,标记符之间的内容即为页面的主体内容。,HTML,文件的整体结构如图所示。,2,常见的标记有文本、图片、超链接、动画、音乐、表格、表单等,3,标记及其属性,HTML,标记的格式为：,内容,标记属性的语法是：,标记只是规定这是什么信息，如文本、图片、表格等，但是如何控制这些信息，就需要相关的属性值来表示。,各属性之间无先后次序，属性也可省略（即取默认值）,例如单标记,表示在文档当前位置画一条水平线（,horizontal line,），一般是从窗口中当前行的最左端一直画到最右端。,4,（一）建立,HTML,文件,操作步骤如下：,（,1,）单击“开始”按钮，选择“程序”“附件”“记事本”，并打开“记事本”窗口。,5,（,2,）在记事本中，输入如图所示的,HTML,语句。,（,3,）执行“文件”“保存”命令，将文件保存为,1-1.htm,。,（,4,）在浏览器中打开所建立的,HTML,文件。,说明：除了记事本之外，还可以使用写字板来编辑,html.,（二）常用的,HTML,标记设置,操作步骤如下：,（,1,）在文本文件编辑器中编写,HTML,文件（可参考下面的示例编写）,。,6,（,2,）保存,HTML,文件。,（,3,）在浏览器中预览所编辑的,HTML,文件效果。,1.,标题标记,示例,1,标题标记，在记事本中输入以下,HTML,语句，保存后浏,览效果，如图所示。,我的花店,欢迎你访问我的花店,!,欢迎你访问我的花店,!,欢迎你访问我的花店,!,欢迎你访问我的花店,!,欢迎你访问我的花店,!,欢迎你访问我的花店,!,欢迎你访问我的花店,!,7,说明：,标记符用于定义段落标题的大小级数。最大的标题级数是,，最小的标题级数是,。使用,标记符的,align,属性可控制文字的对齐方式,，属性值可以是,left(,左对齐,),，,center(,居中对齐,),，或者,right(,右对齐,),。,2.,段落标记符,示例,2,段落标记符，输入,HTML,语句如下，保存后的浏览效果,如图所示。,我的花店,我的花店,!,欢迎您访问我的花店,花可以传情,可表达思念之情,亲情,感恩的心情,衷,心的祝福,!,祝愿进入我的花店的朋友天天有好心情,!,8,说明：,标记符用于划分段落，控制文本的位置。,是成对标记符，用于定义内容从新的一行开始，并与上段之间的一个空行，其,align,属性定义新开始的一行内容在页面中的对齐位置，属性值可以是,left(,左对齐,),，,center(,居中对齐,),，或者,right(,右对齐,),。,9,3.,换行标记,示例,3,换行标记，将示例,2,中相应段落中的段落标记,替换为换行标记,，,HTML,语句如下，保存后的浏览效果如图所示。注意段落标记,和换行标记,预览效果的不同。,我的花店,10,我的花店,!,欢迎您访问我的花店,花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福,!,祝愿进入我的花店的朋友天天有好心情,!,说明：,标记符用于定义从新的一行显示，它,不产生一个空行，,但,连续多个,标记可以产生多个空行的效果。,标记符是非成对标记符,。,11,标记及其属性,无格式，插哪儿哪儿产生一个换行,注意：不能插入标识中！只能插入标识间,12,注释标记的格式为：,注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。,2,强制换行和不换行标记,、,.,要用,HTML,的标记来强制换行、分段。,放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：,文字,不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：,文字,段落标记,1,注释标记,13,设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用,标记。定位标记的格式为：,文本、图像或表格,其中属性,align,用来设置文本块、一段文字或标题在网页上的对齐方式：,left,、,center,和,right,。缺省时默认为,left,。,段落标记,定位标记 与.类似,大区域段,14,两边缩进标记,.,滚动,电子商务交易模式,15,在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到,HTML,文档中的,标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决定。,水平线标记的格式为：,size,设定线条粗细，以像素为单位，默认为,2,。,width,设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。,color,设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以,“,#,”,引导的一个十六进制数代码来表示。,段落标记,水平线标记,（,horizontal line,）,16,（二）,标记的设置,字体标记,，设置示例,2,中相应段落的字体，,HTML,语句如下，保存后浏览效果，如图所示。,我的花店,我的花店,!,花店,欢迎您访问我的花店,花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福,!,祝愿进入我的花店的朋友天天有好心情,!,17,标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有：,（,1,）,face,属性,：定义文字所使用的字体，如,face=“,隶书”。,（,2,）,size,属性,：定义文字的大小，属性值为,17,，也可以使用相对大小来设置，如,size=“+5”,、,size=“-5”,。,（,3,）,color,属性,。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如：,color=“red”,；也可使用,16,进制的,RGB,代码来表示颜色，,color=“#FF0000”,，在使用,16,进制的,RGB,代码来表示颜色时，需在颜色代码前加“,#”,。,此外，字体标记符还包括,粗体标记符、,斜体标记符,等。,18,4.,列表标记,示例,4,项目列表标记，,HTML,语句如下，保存后的浏览效果如图。,花语,花语,各种花所代表的含义如下：,玫瑰：纯洁的爱,剑兰：用心坚固,百合：百年好和,满天星：爱怜,菊花：吉祥,康及馨：亲情思念,19,郁金香：爱的表白,紫罗兰：永恒之美,勿忘我：爱到永远,列表标记包括“项目列表”标记,、“编号列表”标记,。,和,标记都是成对标记。在,标记之间还可以使用,标记来设定项目内容，其,type,属性可以显示不同形状的项目符号。,20,无序列表中每一个表项的前面是项目符号（如、等符号）。建立无序列表使用,标记和,表项标记。格式为：,第一个列表项,第二个列表项,值得注意的是，,标记是单标记。即一个表项的开始，就是前一个表项的结束。,type,指定每个表项左端的符号类型，可为,disc,（实心圆点）、,circle,（空心圆点）、,square,（方块），也可自己设置图片。,列表,1,无序列表标记,.,21,使用,标记可以建立有序列表，表项的标记仍为,。格式为：,表项,1,表项,2,有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。,列表嵌套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。,列表,2,有序列表标记,.,22,花语,花语,各种花所代表的含义如下：,玫瑰：纯洁的爱,剑兰：用心坚固,百合：百年好和,满天星：爱怜,菊花：吉祥,康及馨：亲情思念,23,郁金香：爱的表白,紫罗兰：永恒之美,勿忘我：爱到永远,24,（三）,链接标记的设置,示例,5,链接标记，输入如下所示的,HTML,语句，保存后的浏览效果如图所示。,花语,花节,友情链接,与我联系,25,HTML,是通过,标记符来实际超链接的，它是成对标记符,，主要属性有：,（,1,）,href,。链接文件的地址,。,（,2,）,target,。链接目标的位置,。,1.,指向电子邮件的链接,与我联系,2.,指向站点内文件的链接,花节,3.,指向其他网站文件的链接,友情链接,26,锚点（,anchor,）标记由,定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（,URL,）。具有以上特点的词、句或图片就称为热点。,标记的格式为：,热点,href,属性为超文本引用，它的值为一个,URL,，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用,“,#,”,代替,URL,，即,热点,。,target,属性设定链接被单击后结果所要开始窗口的方式。可选值为：,_blank,，,_parent,，,_self,，,_top,。,超链接,1,锚点标记,.,27,a,标记有,4,种窗口打开方法：,blank,浏览器总在一个新打开、未命名的窗口中载入目标文档。,self,这个目标的值对所有没有指定目标的,标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题,标签中的,target,属性一起使用。,parent,这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标,self,等效。,top,这个目标使得文档载入包含这个超链接的窗口，用,top,目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。,28,1.,链接到同一目录内的网页文件,链接到同一目录内的网页文件的格式为：,热点文本,2.,链接到下一级目录中的网页文件,链接到下一级目录中网页文件的格式为：,热点文本,3.,链接到上一级目录中的网页文件,链接到上一级目录中网页文件的格式为：,热点文本,其中,“,./,表示退到上一级目录中。,4.,链接到同级目录中的网页文件,链接到同级目录中网页文件的格式为：,热点文本,超链接,2,指向其他页面的链接,29,花语,友情链接,与我联系,30,要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：,热点文本,书签就是用,标记对该文本作一个记号。格式为：,目标文本附近的字符串,如果要建立指向其他页面某处的文本，格式为：,热点文本,要在跳转到的位置处加上链接标记：,文字串,如果链接指向其他文件的某一部分，格式为：,热点文本,超链接,3,指向本页中的链接,31,目录：,电商定义,构成要素,关联对象,存在价值,移动电商,第二人生,32,电商定义,电子商务是利用微电脑技术和网络通讯技术进行的商务活动。各国政府、学者、企业界人士根据自己所处的地位和对电子商务参与的角度和程度的不同，给出了许多不同的定义。但是，电子商务不等同于商务电子化。,构成要素,关联对象,存在价值,移动电商,第二人生,33,如果链接到的文件不是,HTML,文件，则该文件将作为下载文件，其格式为：,热点文本,5,指向电子邮件的链接,单击指向电子邮件的链接，将打开缺省的电子邮件程序，如,FoxMail,、,Outlook Express,，并自动填写邮件地址。指向电子邮件链接的格式为：,热点文本,例如，,E-mail,地址是,goodlook,，建立如下链接：,免费电话,:80012345678,信箱,:goodlook,超链接,4,指向下载文件的链接,34,网页制作,不同目录下加入路径即可,35,超级链接标识,超级链接标识格式,超级链接文字,注意：该格式是在当前窗口打开新窗口，当前窗口被新窗口取代,超级链接文字,注意：该格式是在不关闭当前窗口的情况下打开新窗口,36,（四）绝对地址和相对地址,文件的引用既可以使用绝对地址，也可以使用相对地址。,1,.,绝对地址,直接定出所链接的文件位于哪个服务器中的网站内，,主要用来链接其他网站的网页,，例如：,友情链接,2.,相对地址,用所链接的文件相对于目前网页所在位置来表示，,通常用来链接当前网站中的其他网页,，例如：,花节,37,操作总结,1,、点“开始”，选择“程序”、“附件”、“记事本”,2,、在记事本中用英文输入,文字,3,、用中文输入法在标识中插入文字,4,、点“文件”，选择“另存为”，文件名命名为 “,index.htm”,，选择文件类型为“所有文件”，点“保存”,5,、用,IE,浏览器打开“,index.htm”,注意：为什么要命名为,index.htm,？,因为这代表直接告诉浏览器是主页文件！,注意：,default.htm,也可以！,38,1.,设置背景色,格式为：,“,色彩值,”,可以为色彩的英文名或相应十六进制值。,2.,用图片作为背景,使用,标记的,background,属性，可为网页铺上背景图片。格式为：,background,取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为,GIF,格式或,JPEG,、,JPG,格式的文件。,在浏览器中，作为背景的图片将,按原来的大小复制，重复铺满整个网页,。,图片,1,网页的背景,39,使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。图片标记的格式为：,如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用,标记的,width,和,height,属性来设置图片的大小。,width,和,height,属性的属性值可取像素数，也可取百分数。,图片,2 图片标记,（单标识）,40,如果不设置文本对图片的环绕，图片在页面会占一片空白。利用,标记的属性，可以使文本环绕图片。,使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用,标记，其后的文本将不再环绕图片。格式为：,其中,clear,的取值可为：,left,（解除在图片左侧放置的文本）、,right,（解除在图片右侧放置的文本）或,all,（解除在图片左、右侧放置的文本）。,图片,2,图片标记,41,图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：,例如，下面代码：,图片,3,用图片作为超链接,42,多媒体文本,标记可以在主页中嵌入多媒体文本，如电影、声音、动画等,格式为：,43,制作滚动字幕,修改代码,（,红色是要添加的代码！,）,这是我的滚动字幕,这是第二行字幕,这是第三行字幕,思考：如果想让文字自上向下滚动怎么办？,down,44,鼠标悬停：如何在滚动字幕上实现：当,鼠标悬在上面时就停止滚动，按下时就实现超级链接，离开时继续滚动，下面粉色代码为实现代码。也可以直接用下面代码替换原来的代码。,这是我的滚动字幕,这是第二行字幕,这是第三行字幕,制作滚动字幕,45,滚动图片：,利用滚动字幕制作滚动图片，并实现超级链接。,动态滚动图片,第,5,个单元格,第,7,个单元格,第,8,个单元格,第,10,个单元格,浏览效果,46,（三）,表格标记的设置：,示例,7,表格标记，在记事本中输入以下,HTML,语句，保存后在浏览器中浏览，效果如图所示。,我的花店,47,节日,名称,5,月,1,日,国际劳动节,48,4,日,中国青年节,12,日,护士节,6,月,1,日,儿童节,此单元格跨列,colspan=“2”,此单元跨行,rowspan=“3”,49,在,和,之间放置表格内容，,标记是成对标记。,在表格中，,行是用,标记来定义的,一行使用一个,标记，,每行中的列是用,标记定义的,；,一列使用一个,标记。,、,、,标记都有相应的属性，用来定义表格中内容的显示方式。,表格标记的主要属性有：,（,1,）,rowspan,。定义该单元格所跨行数,。,（,2,）,colspan,。定义该单元格所跨列数,。,50,前面介绍的是表格中的各个单元格的属性。现在，把表格作为一个整体，介绍表格在页面中的位置及背景的设置。与图片一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用,标记的,align,属性。格式为：,当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当,align,属性缺省时，文本在表格的下面。,表格,表格在页面中的对齐方式,51,在,、,、,、,标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。,bgcolor=,色彩或色彩值,设置背景色彩,background=,图片文件名,设置背景图片,bordercolor=,色彩,设置表格边框的色彩,bordercolorlight=,色彩,设置表格边框亮部的色彩,rules=row,cols,或,none,设置表内线的显示方法，,none,为无内线,如果把属性放到,中，其作用范围为整个表格，如果把属性放到,中，则作用范围为整个行，如果把属性放到,、,中，则作用范围为该单元格。,表格,表格的色彩和图片背景,52,（1）可使用标记符的属性来讲进一步限定标记符，一个标记可以有多个属性项，各属性项的次序不限定，各属性项间用空格进行分隔。,（2）,HTML,中使用的注释语句为,注释内容可插入文本中任何位置,，注释内容将不显示。,53,上下型网页制作,1,、内容：,三十六计和第三十一计美人计,2,、结构：上下型（主要内容：,800*600,）,3,、草图,(,用表格制作，风格：复古型,),动画图片,导航条（三十六计）,三十六计总简介,版权信息,54,制作步骤,1,、收集资料,2,、画制草图,3,、决定结构,4,、决定风格,5,、逐层制作,6,、测试修改,7,、总结经验,1,、建文件夹（名字：,36J,）,2,、设计动画,3,、将所用素材存入该文件夹,4,、制作主页,（,1,）用,INDEX.HTML,存盘于,36J,（,2,）输入标题：三十六计,（,3,）选中页面,（,4,）点“页面属性”,（,5,）设置上边距为,0,（,6,）设置背景图片,（,7,）关闭页面属性,（,8,）插入三行一列的表格,注：经常按,F12,存盘浏览,55,利用标签插入背景音乐的步骤,1,、点主菜单的“插入”,2,、点“标签”，点“,HTML,标签”,3,、点左侧的“页元素”,4,、点右侧的“,BGSOUND”,5,、点源后“浏览”,6,、选择要插入的声音文件,7,、在循环后选“无限”,56,T,字型网页制作,1,、内容：爱情三十六计,2,、结构：,T,字型（主要内容：,1000*600,）,3,、草图,(,用框架制作，风格：计复古，情现代,),计导航条,爱情,36,计导航条,版权信息,三十六计内容,57,使用框架的好处,1,、打开新的网页不需换页,2,、可以在指定窗口打开网页,3,、多个窗口可同时在一个网面,4,、窗口之间既独立又联系,58,制作步骤,1,、收集资料,2,、画制草图,3,、决定结构,4,、决定风格,5,、逐层制作,6,、测试修改,7,、总结经验,1,、建文件夹（名字：,36J,）,2,、设计动画,3,、将所用素材存入该文件夹,4,、制作主页,（,1,）用,INDEX.HTML,存盘于,36J,（,2,）输入标题：三十六计,（,3,）选中页面,（,4,）点“页面属性”,（,5,）设置上边距为,0,（,6,）关闭页面属性,（,7,）从“从范例创建”中点“框架集”，再选“上方固定，左侧嵌套”，再点“创建”,注：框架名的定义格式：,NAME=“,框架名”,59,主页只有主题没有详细内容的主页称为封面型网页,封面型网页制作,60,封面型网页制作,1,、内容：网球超级明星,2,、结构：封面型（主要内容：,1000*600,）,3,、草图,(,用图片热点制作，风格：现代型,),链接一,链接二,链接三,61,制作步骤,1,、收集资料,2,、画制草图,3,、决定结构,4,、决定风格,5,、逐层制作,6,、测试修改,7,、总结经验,1,、建文件夹（名字：,F4,）,2,、设计动画,3,、将所用素材存入该文件夹,4,、制作主页,（,1,）用,INDEX.HTML,存盘于,F4,（,2,）输入标题,（,3,）插入图片,（,4,）绘制热点区域,（,5,）设计超级链接,62,综合网站制作,1,、内容：三十六计,2,、结构：,国字型,（主要内容：,1000*600,）,3,、草图,(,用表格和层制作，风格：复古型,),36,计导航条,爱情,36,计导航条,友好链接,三十六计新闻,八卦图片,版权信息,63,制作步骤,1,、收集资料,2,、画制草图,3,、决定结构,4,、决定风格,5,、逐层制作,6,、测试修改,7,、总结经验,1,、点主菜单的“站点”,2,、选择“新建站点”,3,、给站点命名,4,、选择站点文件的存放位置，没有就建一个,5,、选择服务器,6,、完成,说明：建好后右侧就会出现站点信息，可在这儿建文件夹、文件、修改文件、拖放文件等操作,64,大作业,65,制作个人网站,要求,设计个人网站,内容由自己充分发挥，不作任何约束,工具任选,期末检查,66,67,