《网页设计基础—html.ppt.ppt》由会员分享，可在线阅读，更多相关《网页设计基础—html.ppt.ppt（40页珍藏版）》请在三一办公上搜索。
1、网页设计基础html部分,主讲：周益卫,什么是html,HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,HTML 简介,HTML 可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象,HTML 文档示例,学习 HTML
2、欢迎来到 HTML 世界,HTML 代码,浏览器处理代码并进行显示,编辑器和浏览器,学习 HTML欢迎来到 HTML 世界,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示 HTML 文档/页面,编辑器 2-2,需要在编辑器中键入源代码,示例：DreamWeaver,Macromedia Dreamweaver 是一种专业的 HTML 编辑器，用于设计、编码、开发网站、网页和强大的 Web 应用程序。,HTML 文档结构,学习 HTML 欢迎来到 HTML 世界,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这
3、部分包含文本、图像和链接。它包括在 标签内,学习 HTML 欢迎来到 HTML 世界,HTML 标签 2-2,标签,标识 BODY 元素,属性,提供有关元素的附加信息,值,分配给属性的内容,META 标签 2-1,META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用 META 标签信息例如，要将 Graham Browne 指定为作者，则使用以下 META 标签：,META 标签 2-2,http-equiv 属性可用来代替 META 标签中的 name 属性,表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 1
4、4:25:27,表示每隔2秒，自动刷新网页,演示：自动刷新的例子,HTML 基本元素,标题 段落换行符预先格式化字符格式化水平线字体图像特殊字符超级链接,标题,动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,H1 到 H6 标签用于指定不同级别的标题,段落标签,诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示,标签用于标记段落,换行符(新的标准应当写,只要在文本中放入 标签，就会强制换行,诗词学习我是第一行我是第二行 我是第一段我是第二段,标签,诗词学习静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 HTML,标签用于显
5、示具有预先定义格式的文本（如 HTML 文档中所示）,格式化文本 2-1(在css中改),使用属性检查器中的字体类型、字体大小、字体颜色等设置可以格式化文本,字体大小,字体类型,字体颜色,演示：格式化文本的步骤,格式化文本 2-2,在网页中，段落用于组织内容，一个段落就是一个文本块。Dreamweaver 提供了三种基本段落样式：段落、标题和预先格式化的。使用属性检查器中的“格式”选项可应用这些样式。,学习 HTML这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关键。水的分子式是 H 2 O。3 2 等于 9。,字符格式化标签,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上
6、标等,使用水平线,动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线,使用字体和属性,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意义，如小于号()定义 HTML 标签的开始字符实体用于在 HTML 文档中插入特殊
7、字符，如版权号，注册商标等,插入特殊字符需要用HTML字符实体,空格；,插入特殊字符 2-2,创建超级链接,了解鸟类会弹琴的狗狗 单击此处查看,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,主题名称,主题名称,链接到同一文档的各个部分2-2,.狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的
8、马.,演示:锚链接例子,链接到其他文档的特定位置,让我们深入了解一些动物狮子斑马印度豹,Animals.htm,狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。,Animaldetails.htm,电子邮件链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez,插入并格式化图像,演示：插入图像的步骤,标签用于在 HTML 文档中插入图像。标签的两个常用属性是 SRC 和 ALIGN。,SRC 属性用于指定要插入的图像位置。,
9、ALIGN 属性用于指定图像相对于文本的对齐方式。,插入图像 2-1,插入图像 2-2,动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐,图像热点,演示：制作图像热点的步骤,模板 2-1,在大多数情况下，一个站点的网页内容不同，但它们的界 面是相同的如果界面相同，则可以创建模板,模板 2-2,应用模板后,模板示例,创建模板 2-1,演示：创建模板的步骤,创建模板 2-2,应用模板,活动网页,应用于网页的模板,演示：应用模板的步骤,课堂重点,Dreamweaver 是一个HTML集成开发环境HTML文档的格式HTML的常用标签链接的路径分为三种：绝对路径文档相对路径站点根目录相对路径,目
10、前我们使用的html版本,目前我们使用的是xhtml1.0版本。他和html4.0版本相比它要求属性必须包含引号，所有元素必须是封闭的。xhtml1.0页面可以作为html文档。而xhtml1.1则是作为xml发送给浏览器的。这就意味着，即使xtml1.1出现一个错误。Web浏览器都不会显示页面。大多数开发人员显然不喜欢这样，所以xhtml1.1不受欢迎。（p13）,网页制作发展史,Html布局表格布局Div+css,为什么要使用div+css,表格本来就不适合布局（p3）Css可以控制页面的外观，并且将文档的表现部分与内容部分隔开，只需在一个地方进行站点更改，就可以贯彻到整个系统。其他好处：代码更少、下载更快、更容易维护等等如果你仍然在使用基于表格的布局，会越来越难以找到工作。（p5）,
