HTML网页制作.ppt

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