网页设计基础—html.ppt.ppt

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