HTML网页制作ppt课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,HTML,语言,1,目标,描述,HTML,文档的结构,使用基本的,HTML,标签,在,HTML,文档中插入特殊字符,在,HTML,文档中创建超级链接,2,HTML,简介,超文本,提供链接到其他页面或同一页面的其他位置的文本,标记,可以用标签标记页面的不同部分以正确显示,语言,HTML,可用于,：,控制页面和内容的外观,发布和检索联机文档,创建联机表单,插入诸如音频剪辑和视频剪辑等对象,3,HTML,文档示例,学习,HTML,欢迎来到,HTML,世界,HTML,代码,浏览器处理代码并进行显示,4,编辑器和浏览器,学习,HTML,欢迎来到,HTML,世界,HTML,代码,在编辑器中编写,HTML,代码,浏览器显示,HTML,文档,/,页面,5,编辑器,2-2,需要在编辑器中键入源代码,示例：,DreamWeaver,Macromedia Dreamweaver,是一种专业的,HTML,编辑器，用于设计、编码、开发网站、网页和强大的,Web,应用程序。,6,HTML,文档结构,学习,HTML,欢迎来到,HTML,世界,HTML,网页,头部部分,主体部分,标签标记,HTML,文档的开始和结束,这部分包括标题和其他说明信息。包括在,标签内,这部分包含文本、图像和链接。它包括在,标签内,7,HTML,标签2-2,学习,HTML,欢迎来到,HTML,世界,标签,标识,BODY,元素,属性,提供有关元素的附加信息,值,分配给属性的内容,8,META,标签,2-1,META,标签是一个特殊的,HTML,标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等,许多搜索引擎都使用,META,标签信息,例如，要将,Graham Browne,指定为作者，则使用以下,META,标签：,9,META,标签,2-2,http-equiv,属性可用来代替,META,标签中的,name,属性,表示有效期：格林尼治标准时间,2005,年,9,月,12,日，星期一,14:25:27,属性值：具体的过期时间,属性名称：网页过期,表示每隔,2,秒，自动刷新网页,演示：,自动,刷新的例子,10,HTML,基本元素,标题,段落,换行符,预先格式化,字符格式化,列表,水平线,字体,图像,特殊字符,超级链接,11,标题,动物世界,从大自然获得灵感,从大自然获得灵感,从大自然获得灵感,从大自然获得灵感,从大自然获得灵感,从大自然获得灵感,H1,到,H6,标签用于指定不同级别的标题,12,段落标签,诗词学习,我是第一段,我是第二段,左对齐显示,居中显示,右对齐显示,标签用于标记段落,13,换行符,只要在文本中放入,标签，就会强制换行,诗词学习,我是第一行,我是第二行,我是第一段,我是第二段,14,标签,诗词学习,静夜思,床前明月光,疑是地上霜,举头望明月,低头思故乡,HTML,标签用于显示具有预先定义格式的文本,（如,HTML,文档中所示）,15,字符格式化标签,学习,HTML,这很有趣,足球是最令人喜爱的运动之一,。,信息技术是发展的关键,。,水的分子式是,H 2 O,。,3 2,等于,9,。,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,16,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果,苹果,芒果,桔子,花卉,水仙,兰花,向日葵,玫瑰花,17,列表类型：无序列表,星期中的每一天,星期日,星期一,星期二,星期三,星期四,星期五,星期六,无序列表也称为“项目列表”,18,列表类型：有序列表,有序列表的属性,星期中的每一天,星期日,星期一,星期二,星期三,星期四,星期五,星期六,在有序列表中，列表项以自动生成的顺序显示,19,使用水平线,动物世界,老虎的夜间视觉,老虎的夜视能力优于人类的夜视能力五倍以上,标签属性,align,Width,Size,Noshade,标签用于在页面上绘制水平线,20,使用字体和属性,动物世界,了解有关动物的更多信息,斑马的特性,没有任何两匹斑马,的斑纹是完全一样的,，,因此每匹斑马都是独一无二的,可以按名称或十六进制值,指定颜色,可以为字体指定的大小范围为从,1,到,7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如,SIZE,、,COLOR,和,FACE,）可用于控制网页上文本的显示,21,插入图像,2-1,标签用于在,HTML,文档中插入图像。,标签的两个常用属性是,SRC,和,ALIGN,。,SRC,属性用于指定要插入的图像位置。,ALIGN,属性用于指定图像相对于文本的对齐方式。,22,插入图像,2-2,动物世界,让我们看看这些可爱的动物,底部对齐,顶部对齐,居中对齐,23,插入特殊字符,2-1,某些字符在,HTML,中具有特殊意义，如小于号,(,空格,；,24,插入特殊字符,2-2,特殊字符,字符实体,大于号,(),小于号,(),引号),&,号,25,创建超级链接,了解鸟类,会弹琴的狗狗,单击此处查看,26,绝对和相对路径名,要链接到另一目录,(C:example),下的页面，可编写,或,要链接到同一目录,(C:html),下的页面，可编写,或,C:html,目录,C:example,目录,Doc1.htm,Doc3.htm,Doc2.htm,Doc4.htm,绝对路径名,相对路径名,27,链接到同一文档的某个部分,2-1,锚记标签用于使用户“跳”到文档的某个部分,HTML,的,NAME,属性用于创建锚标记,为达到这种跳转效果，请在,HREF,参数中使用该标记,主题名称,主题名称,28,链接到同一文档的各个部分,2-2,.,狮子,斑马,印度豹,狮子,狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达,250,公斤。而雌狮则要轻得多，只有,180,公斤。,斑马,没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马,.,演示,:,锚链接例子,29,链接到其他文档的特定位置,让我们深入了解一些动物,狮子,斑马,印度豹,Animals.htm,狮子,狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达,250,公斤。而雌狮则要轻得多，只有,180,公斤。,Animaldetails.htm,30,电子邮件链接,用户可从网页发送电子邮件,海豚,充分交流，密切配合,据说，海豚的交流模式几乎与人类的一样复杂！,请将您的疑问发送至,David Fernandez,31,总结,2-1,HTML,标签一般配对使用，不区分大小写,标签都具有属性。属性提供关于网页上,HTML,元素的附加信息,META,标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签,标题级标签使用,32,总结,2-2,段落标签使用,无序列表使用,标签,有序列表使用,标签,字体标签,超链接标签,超链接文本,33,表格,行,列,列标题,在,HTML,文档中，广泛使用表格来存放网页上的文本和图像,单元格,表格标题,34,使用表格,姓名,性别,分数,Robert,M80,.,创建表格,代表表格的开始，,border=2,表示边框尺寸为,2,表示行，这是表格的第一行，有三列数据，,代表列,表格的第,二行，有三列数据,表格的第,三行，也有三列数据,35,学员档案信息,姓名,性别,分数,Robert,M,80,.,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第,二行，有三列数据,表格的第,三行，有三列数据,36,学员档案信息,姓名,性别,分数,Robert,M,80,.,表格的对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,37,合并单元格,(,跨列,),创建表格,第一学期,第二学期,数学,科学,英语,数学,科学,英语,9895,80,95,87,88,.,COLSPAN,=“n”,属性表示跨多少列,38,合并单元格,(,跨行,),创建表格,螺母,螺栓,锤子,第一季度,一月,2500,1000,1240,二月,3000,2500,4000,.,ROWSPAN,=“n”,属性表示跨多少行,39,学员档案信息,姓名,性别,分数,Robert,M,80,Mary,F,18,表格的背景色和尺寸设置,表格的颜色设置：,表格的背景色,行的背景色,列的背景色,颜色值可以采用,RGB,（,red/green/blue,）红绿蓝十六进制值表示，如红色,#FF0000,或是一些预定义色彩名称：,red,，,blue,，,yellow,等。,表格的尺寸设置：,例如：,表示一个长为,200,像素，宽为,100,像素的表格。,表示一个宽为窗口的,20%,，高为窗口的,10%,的表格。,18,80,分数,F,M,性别,Mary,Robert,姓名,学员档案信息,40,表单输入元素,-7,课堂练习,:,请编写,HTML,代码,表单,42,METHOD=“post,或,get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法,:,一般为,post,或,get,方法,post,方法比较安全,ACTION=“URL”,表单输入元素,-1,Type,此属性指定元素的类型。,元素类型可以有多种选择,：,TEXT,、,PASSWORD,、,CHECKBOX,、,RADIO,、,SUBMIT,、,RESET,、,FILE,、,HIDDEN,和,BUTTON,。,默认选择为 TEXT。,Name,此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称,TEXT1,、,TEXT2,或选择的任何名称来标识它们。,Name,属性的作用域是在,FORM,元素内。,Value,此属性是可选属性，它指定控件的初始值。但是，如果,TYPE,为,RADIO,，则必须指定一个值。,Size,此属性指定控件的初始宽度。,如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位对于其他输入类型，宽度以像素为单位。,Maxlength,此属性用于指定可在,TEXT,或,PASSWORD,元素中输入的最大字符数。,Checked,此属性是,Boolean,属性，指定按钮是否是打开的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,文本框、按钮、单选按钮、复选框等都是输入元素。,44,表单输入元素,-2,BUTTON,（按钮）,Type,属性：,submit,：,提交按钮,reset,：,重置按钮,button,：,普通按钮,表单输入元素,-3,身份证号,TEXT,（文本）,密 码：,请填写您的工作经历,表单输入元素,-4,性别：男性,女性,单选按钮和复选框,你喜欢以下哪些明星：,酒井法子,郑秀文,BonJovi,HTML,输入元素,-5,2004,年欧锦赛,预测“最佳球员”,Ronaldo,Beckham,Zidane,预测大赛亚军,巴西,法国,阿根廷,预测谁将成为,2004,年欧锦赛冠军？,阅读代码，请问网页中的显示结果？,48,表单输入元素,-6,下拉菜单,谁是,2002,年世界杯冠军？,西班牙,法国,巴西,德国,列表选项,表单输入元素,-7,课堂练习,:,请编写,HTML,代码,框架,广告栏顶部框架,(top.htm),商品,详细介绍右侧框架,(main.htm),商品导航,左侧,框架,(left.htm),51,为何使用框架,在另一个固定部分,显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。,站点中只有此部分是变化的。,总结,4-1,表格标题,数据,1,数据,2,.,数据,11,数据,22,跨行的单元格：,数据,11,跨列的单元格：,数据,22,表格的一般语法：,53,总结,4-2,文本框,密码框,文本域,单选按钮,男性,复选框,酒井法子,表单的一般语法：,54,总结,4-3,选项,1,选项,2,.,55,总结,4-4,框架,顶部窗口显示广告,top.htm,显示详细内容,main.htm,左侧窗口显示,导航链接,left.htm,56,DHTML,简介,DHTML,=,HTML,脚本语言,JavaScript,+,+,层叠样式表,CSS,指定一个网页的元素,决定元素的大小,颜色和位置,操纵网页的元素,DHTML,是制作,动态,HTML,页面的技术！,57,DHTML,的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用,x,座标和,y,座标来指定网页元素的确切位置（绝对位置或相对位置）,设计人员可以将网页中的表格绑定到数据库,设计人员可以将选择的字体和网页一起封装,Web,程序员可以编写脚本以更改网页的样式和内容,在,DHTML,中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定位,数据绑定,可下载字体,脚本,对象结构,58,DHTML,示例,闪烁文本,移动文本,消隐文本,59,设置属性,这个段落应用了样式,这个段落按默认样式显示,什么是样式？,指定显示样式,样式规则,60,常用的样式属性,属 性,CSS,名称,说 明,颜色,color,文本属性,font-size,字体大小,font-family,字体,text-align,文本对齐,边框属性,(,用于表,单元素,),border-style,边框样式,border-width,边框宽度,border-color,边框颜色,定位属性,(position),top,顶部边距（上边距）,left,左边距,width,宽度,height,高度,z-index,z,轴索引号，用于层,61,根据样式代码的位置，分为三类：,行内样式,内嵌样式,外部样式,样式的分类,在最后一个声明后面加上一个分号,(;),是一个好习惯,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的,STYLE,属性定义。,/*,关键代码,-*/,剩余时间：成交结束,新旧程度：全新,所 在 地：北京,宝贝数量：,5,件,浏 览 量：,220,次,另送价值,50,元的充电器套装！,(,一个充电器，两节充电电池,),可使用半年以,63,应用样式,P,font-size:20px;,color:blue;,text-align:center,我是段落,1,我是段落,2,我是段落,3,我们的样式绝对统一,内嵌样式,-1,样式表,样式规则,所有的段落都采用,P,样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,选择器,用分号隔开,64,内嵌样式,-2,选择器,根据选择器的不同，内嵌样式又分为：,HTML,选择器,CLASS,类选择器,ID,选择器,65,/*-,关键代码,-*/,P /*,设置样式：字体和背景色*,/,font-family:System;,font-size:18px;,color:#3333CC;,H2,background-color:#CCFF33;,text-align:center;,品种特征方面：,1,、蛋鱼：蛋鱼,.,。,2,、龙睛：龙睛,.,。,3,、高头：高头,.,。,内嵌样式,-3 HTML,选择器,HTML,选择器,应用,H2,样式,应用,P,样式,内嵌样式,-4,class,类选择器,.,myinput,border:1px solid;,border-color:#D4BFFF;,color:#2A00FF,用户名,密,码,CLASS,类选择器,应用类选择器：,class,”,类名,“,类选择器的定义格式为：,.,类名,样式规则,;,#fire,color:red;,font-size:24px;,我是二级标题，火是这样的,我是段落，火是这样的,内嵌样式,-5 ID,选择器,ID,选择器,ID,选择器的定义格式为：,ID,名,样式规则,;,应用,ID,选择器：,ID,”,ID,名“,A,/*,设置超链接不带下划线*,/,color:blue;,text-decoration:none;/*,文本修饰：无*,/,A:hover,/*,鼠标在超链接上方停留时，带下划线*,/,color:red;,text-decoration:underline;/*,文本修饰：下划线*,/,HEAD,俺是超链接，移过来我就显示下划线,内嵌样式,-6特殊的选择器,HTML,选择器,特殊的伪类：,A,代表超链接，,hover,代表鼠标悬停,外部样式,根据样式文件与网页的关联方式又分为：,链接（,LINK,）外部样式表,导入（,import,）外部样式表,样式文件,P,.,网页,2,网页,3,网页,1,70,链接外部样式表,使用,LINK,（链接）标签，语法：,第一步：创建样式表文件,newstyle.css,第二步：把样式文件和网页关联,样式文件：,newstyle.css,P,.,Onel.htm,another.htm,第三步：浏览查看各网页,演示,：,链接,样式表示例,71,导入外部样式表,使用,import,导入，语法：,import,样式表文件,.css;,操作步骤同链接样式表,72,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常,需要混合使用：,有关整个网站统一风格的样式代码，放置在独立的样式文件*,.css,某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式,某张网页内，部分内容”与众不同“，采用行内样式,对于某个,HTML,标签：,1,）如果有多种样式，如果规定的样式没有冲突，则叠加；,2,）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按,HTML,的默认样式显示；,内嵌样式,行内样式,某个,HTML,标签,73,层标签,关键代码,Z-index=1,，我是第一层，我是容器，包含图片段落,Z-index=2,，我是第二层，包含图片和段落,使用,Z,index,指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,74,标签,所有韩款童装,10,元,/,件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,75,CSS,的优点,改变浏览器的默认显示风格,页面内容和显示样式分离,可以重用样式表,方便网站维护,76,总结,DHTML,是网页中,HTML,、样式表和脚本的组合应用程序，增强网页的交互性,样式分为行内样式、内嵌样式、外部样式,样式表包括选择器和样式规则，选择器又分为,HTML,选择器、类选择器、,ID,选择器以及特殊的伪类,和,都是容器标签，,是块级标签，可包含段落、标题等，,是行级标签，不能包含段落、标题等，只能包含部分文字,77,