《HTML网页制作》PPT课件.ppt

《《HTML网页制作》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《HTML网页制作》PPT课件.ppt（77页珍藏版）》请在三一办公上搜索。

1、,HTML语言,目标,描述 HTML 文档的结构使用基本的 HTML 标签在 HTML 文档中插入特殊字符 在 HTML 文档中创建超级链接,2,HTML 简介,3,超文本,提供链接到其他页面或同一页面的其他位置的文本,标记,可以用标签标记页面的不同部分以正确显示,语言,HTML 可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象,HTML 文档示例,4,学习 HTML欢迎来到 HTML 世界,HTML 代码,浏览器处理代码并进行显示,编辑器和浏览器,5,学习 HTML欢迎来到 HTML 世界,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示

2、HTML 文档/页面,编辑器 2-2,6,需要在编辑器中键入源代码,示例：DreamWeaver,Macromedia Dreamweaver 是一种专业的 HTML 编辑器，用于设计、编码、开发网站、网页和强大的 Web 应用程序。,HTML 文档结构,7,学习 HTML 欢迎来到 HTML 世界,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,HTML 标签 2-2,8,学习 HTML 欢迎来到 HTML 世界,标签,标识 BODY 元素,属性,提供有关元素的附加信息,值,

3、分配给属性的内容,META 标签 2-1,META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用 META 标签信息例如，要将 Graham Browne 指定为作者，则使用以下 META 标签：,9,META 标签 2-2,http-equiv 属性可用来代替 META 标签中的 name 属性,10,表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27,表示每隔2秒，自动刷新网页,演示：自动刷新的例子,HTML 基本元素,标题 段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接,11

4、,标题,12,动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,H1 到 H6 标签用于指定不同级别的标题,段落标签,13,诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示,标签用于标记段落,换行符,只要在文本中放入 标签，就会强制换行,14,诗词学习我是第一行我是第二行 我是第一段我是第二段,标签,15,诗词学习静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 HTML,标签用于显示具有预先定义格式的文本（如 HTML 文档中所示）,字符格式化标签,16,学习 HTML这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关

5、键。水的分子式是 H 2 O。3 2 等于 9。,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,列表简介,列表用于按逻辑方式对数据分组,17,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果苹果 芒果桔子花卉水仙兰花向日葵玫瑰花,列表类型：无序列表,18,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,无序列表也称为“项目列表”,列表类型：有序列表,19,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,在有序列表中，列表项以自动生成的顺序显示,使用水平线,20,动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线

6、,使用字体和属性,21,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,插入图像 2-1,22,标签用于在 HTML 文档中插入图像。标签的两个常用属性是 SRC 和 ALIGN。,SRC 属性用于指定要插入的图像位置。,ALIGN 属性用于指定图像相对于文本的对齐方式。,插入图像 2-2,23,动物世界让我们看

7、看这些可爱的动物底部对齐顶部对齐居中对齐,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意义，如小于号()定义 HTML 标签的开始字符实体用于在 HTML 文档中插入特殊字符，如版权号，注册商标等通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用表示空格。,24,插入特殊字符需要用HTML字符实体,空格；,插入特殊字符 2-2,25,创建超级链接,26,了解鸟类会弹琴的狗狗 单击此处查看,绝对和相对路径名,27,要链接到另一目录(C:example)下的页

8、面，可编写 或,要链接到同一目录(C:html)下的页面，可编写 或,C:html 目录,C:example目录,绝对路径名,相对路径名,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,28,主题名称,主题名称,链接到同一文档的各个部分2-2,29,.狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹

9、相间的马.,演示:锚链接例子,链接到其他文档的特定位置,30,让我们深入了解一些动物狮子斑马印度豹,Animals.htm,狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。,Animaldetails.htm,电子邮件链接,用户可从网页发送电子邮件,31,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez,总结 2-1,HTML 标签一般配对使用，不区分大小写标签都具有属性。属性提供关于网页上 HTML 元素的附加信息META 标签放置在网页的标题处以

10、提供关于页面的信息。搜索引擎常会用到这些标签标题级标签使用,32,总结 2-2,段落标签使用无序列表使用标签,有序列表使用标签字体标签超链接标签超链接文本,33,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,使用表格 姓名 性别 分数 Robert M 80.,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,学员档案信息 姓名 性别 分数 Robert M 80.,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据

11、,表格的第三行，有三列数据,学员档案信息 姓名 性别 分数 Robert M 80.,表格的对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,合并单元格(跨列),创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88.,COLSPAN=“n”属性表示跨多少列,合并单元格(跨行),创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000.,ROWSPAN=“n”属性表示跨多少行,学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18,表格的背景色和尺寸设置,表格的颜色设置：表格

12、的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。,表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。,表单输入元素-7,课堂练习:请编写HTML代码,表单,METHOD=“post或get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法:一般为post或get方法,post方法比较安全,ACTION=“URL”,表单输入元素-1,文本框、

13、按钮、单选按钮、复选框等都是输入元素。,表单输入元素-2,BUTTON（按钮）,表单输入元素-3,身份证号,TEXT（文本）,密 码：,请填写您的工作经历,表单输入元素-4,性别：男性女性,单选按钮和复选框,你喜欢以下哪些明星：酒井法子 郑秀文 BonJovi,HTML输入元素-5,2004 年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为 2004 年欧锦赛冠军？,阅读代码，请问网页中的显示结果？,表单输入元素-6,下拉菜单,谁是 2002 年世界杯冠军？西班牙法国巴西德国,列表选项,表单输入元素-7,课堂练习:请编写HTML代码,框架,

14、广告栏顶部框架(top.htm),商品详细介绍右侧框架(main.htm),商品导航左侧框架(left.htm),为何使用框架,在另一个固定部分显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。站点中只有此部分是变化的。,总结 4-1,表格标题 数据1 数据2.数据11 数据22,跨行的单元格：数据11 跨列的单元格：数据22,表格的一般语法：,总结 4-2,文本框 密码框 文本域 单选按钮 男性 复选框 酒井法子,表单的一般语法：,总结 4-3,选项1选项2.,总结 4-4,框架,顶部窗口显示广告 top.htm,显示详细内容main.htm,左侧窗口显示导航链接le

15、ft.htm,DHTML 简介,DHTML,=,HTML,脚本语言JavaScript,+,+,层叠样式表CSS,指定一个网页的元素,决定元素的大小颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！,DHTML 的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置）,设计人员可以将网页中的表格绑定到数据库,设计人员可以将选择的字体和网页一起封装,Web 程序员可以编写脚本以更改网页的样式和内容,在 DHTML 中

16、，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定位,数据绑定,可下载字体,脚本,对象结构,DHTML 示例,闪烁文本,移动文本,消隐文本,设置属性 这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,常用的样式属性,根据样式代码的位置，分为三类：行内样式内嵌样式外部样式,样式的分类,在最后一个声明后面加上一个分号(;)是一个好习惯,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数

17、量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,应用样式 P font-size:20px;color:blue;text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一,内嵌样式-1,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,内嵌样式-2 选择器,根据选择器的不同，内嵌样式又分为：HTML 选择器CLASS 类选择器ID 选择器,/*-关键代码-*/P/*设置样式：字体和背景色*/font-family:Sy

18、stem;font-size:18px;color:#3333CC;H2 background-color:#CCFF33;text-align:center;品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛.。3、高头：高头.。,内嵌样式-3 HTML选择器,应用H2样式,应用P样式,内嵌样式-4 class类选择器,.myinput border:1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码,CLASS类选择器,应用类选择器：class”类名“,类选择器的定义格式为：.类名 样式规则;,#fire color:red;font-size

19、: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代表鼠标悬停,外部样式,根据样式文件与网

20、页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表,样式文件P.,网页2,网页3,网页1,链接外部样式表,使用LINK（链接）标签，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件：newstyle.css P.,Onel.htm,another.htm,第三步：浏览查看各网页,演示：链接样式表示例,导入外部样式表,使用import导入，语法：import 样式表文件.css;,操作步骤同链接样式表,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格

21、的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,层标签,关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落,使用 Z index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,CSS 的优点,改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表方便网站维护,总结,DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性样式分为行内样式、内嵌样式、外部样式样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字,