网页制作(1)ppt课件

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