HTML基础2.ppt

1、第3章 HTML语言基础(2),主 要 内 容,HTML的基本语法 超级链接 表格 列表标签 图像 DW的使用,3.2.4 超级链接,1、锚点标签 名称、语法、属性,3.2.4 超级链接,2、锚点标签应用 1）指向其他页面的链接 2）创建指向本页中的链接(文档内部靶位) 3) 创建指向其它类型文件的链接 4) 创建发送电子邮件的链接,3.2.4 超级链接,综合练习1,1)链接1：链接到html文件 2) 链接2：演示target 属性 3) 链接3：链接到网址 4)链接4：链接到非HTML文件 5) 链接4：链接到邮件,ch03(3.1,9).html,3.2.4 超级链接,综合练习2,锚链接

2、1 锚链接2 锚链接3 这里是锚链接1链接到的文本： 这里是锚链接2链接到的文本： 这里是锚链接3链接到的文本：,ch03(3.1,9).html,综合练习,ch03(3.2)-zh.html,font标签，楷体，7号，red,分别链接到学校主页及某邮箱,锚链接到本页的相应位置,标题1,嵌套列表,返回页首锚链接,水平线，宽度100%,练习字体辅助标签,3.2.5 表格,1、table的基本结构 1）表格主要通过三个标记来构成 表格标签: 行标签: 单元格标签: 2）其他标记 、,3.2.5 表格,2、table的常用属性,3.2.5 表格,3、tr和td的常用属性,tr属性,td属性,3.2.

3、5 表格,4、表格单元格的合并（表项跨行或跨列） 输出一个3行3列的表格，修改代码，将该表格改成以下的形式。表格的宽度为500，高度为210,table-colspan.html,3.2.5 表格,5、表格的嵌套 1）语法 2）注意,3.2.5 表格,表格练习1,3.2.5 表格,表格综合练习,ch03(3.1,11).html,3.2.6 列表标签,3.2.6 列表标签,1、无序列表 名称、语法、属性, 第一个列表项 第二个列表项 ,3.2.6 列表标签,2、有序列表 名称、语法、属性, 第一个列表项 第二个列表项 ,3.2.6 列表标签,2、定义列表 名称、语法、属性, 项目1 项目1的描

4、述1 项目1的描述2 项目2 项目2的描述1 项目2的描述2 ,3.2.6 列表标签,3.2.4 列表标签综合练习, 学校精神 德识并重 求是创新 慎思笃行 和谐进步 办学理念 以人为本 校训 艰苦创业，严谨治学 校风 严谨，朴实，勤奋，创新 ,ch03(3.1,8).html,3.2.7 图像,1、语法 2、属性 src ：图片路径，一般使用相对路径 border： 边框的厚度 align ：图文混排时用于描述文字和图片的对齐方式，值包括 top、middle、bottom alt ：图片无法显示时显示的文字,3.2.7 图像,例：图文混排, 图片标签有很多属性，常用的包括 等，这是一个东北

5、石油大学喷泉的图片。该页面设置了背景图片，插入的图片也设置了链接，并有替换文本为“喷泉”。注意作为背景的图片应尽量小，这样便于下载，平铺的效果保证了图片即使小也能够做背景，但是要注意边界的连续性。 ,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 文本编辑,1,2,3,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑超级链接,1,2,3,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑超级链接,插入命名锚记,1,2,3,4,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 1、插入表格 常用工具栏

6、布局工具栏 插入菜单,插入表格的三种方法,1,2,3,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 2、编辑表格属性 选择表格 Ctrl+a 鼠标单击框线 鼠标拖动选择 标签选择器 表格标题菜单 右键菜单选择,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 2、表格属性面板 设置表格属性 属性面板 标签检查器,清除宽度及高度,单位px与%之间的转换,1,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 2、表格属性面板 调整表格宽度和高度 鼠标拖动 表格标题菜单,1,2,3.3 使用Dreamweav

7、er CS4编辑网页元素,3.3.1 编辑表格 3、表格的行、列、单元格操作 选择行和列 利用行表头和列表头选择 Ctrl+鼠标单击 Ctrl+a 表格标题菜单选择列,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 3、表格的行、列、单元格操作 设置行和列的属性 属性面板 标签检查器,合并单元格,对齐方式,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 3、表格的行、列、单元格操作 设置行和列的属性 清除列宽 清除行高,1,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 3、表格的行、列、单元格操作

8、插入行和列,1,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 3、表格的行、列、单元格操作 合并及拆分单元格,1,3,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 4、向表格中插入内容 插入文本 插入图像 插入其他对象,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 5、表格扩展模式的使用 扩展模式与标准模式,标准模式,扩展模式,1,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑表格 6、使用表格嵌套布局页面 嵌套表格,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像 1、插入图像 菜单插入 插入面板插入,1,2,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像 2、编辑图像属性 属性面板,宽、高,为图片设置热点,编辑图像,源文件和链接,替换文本,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像 3、为图像创建热点,热点绘制工具,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像, 中国地图，单击某个省份可查看省份信息