HTML基础2.ppt

第五级,第二级,第三级,第四级,Click to edit Master title style,主 要 内 容,HTML的基本语法,超级链接,表格,列表标签,图像,DW的使用,3.2.4 超级链接,1、锚点标签,名称、语法、属性,target属性定义,描述,target=_blank,在新浏览器窗口中打开（多个）,在新浏览器窗口中打开（1个）,target=new,target=_ self,显示在当前窗口中,target=_parent,显示在直接父框架窗口中,target=_top,显示在没有框架的窗口中,target=“框架名称,显示在制定名称的框架中,3.2.4 超级链接,2、锚点标签应用,1）指向其他页面的链接,2）创建指向本页中的链接,(文档内部靶位),3)创建指向其它类型文件的链接,4)创建发送电子邮件的链接,综合练习,ch03(3.2)-zh.html,font标签，楷体，7号，red,分别链接到学校主页及某邮箱,锚链接到本页的相应位置,标题1,嵌套列表,返回页首锚链接,水平线，宽度100%,练习字体辅助标签,3.2.5 表格,1、table的基本结构,1）表格主要通过三个标记来构成,表格标签:,行标签:,单元格标签:,2）其他标记,、,3.2.5 表格,2、table的常用属性,序号,属性,描述,1,align,表格对齐方式（包括left、center、right）,2,width,指定表格的宽度,3,height,指定表格的高度,4,bgcolor,表格的背景颜色,5,background,表格的背景图片,6,border,表格边框宽度,7,bordercolor,表格的边框颜色,8,cellspacing,表格内的单元格之间的距离,也称间距,9,cellpadding,表格的填充距离（单元格的内容与边框距离）,3.2.5 表格,3、tr和td的常用属性,序号,属性,描述,1,align,文字水平对齐方式,2,valign,文字垂直对齐方式,3,bgcolor,背景颜色,4,background,背景图片,5,bordercolor,边框颜色,6,height,行高,序号,属性,描述,1,colspan,单元格跨列（横向合并的单元格）,2,rowspan,单元格跨行（纵向合并的单元格）,3,width,单元格宽度,tr属性,td属性,3.2.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的描述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 图像,例：图文混排,图片标签有很多属性，常用的包括 等，这是一个东北石油大学喷泉的图片。该页面设置了背景图片，插入的图片也设置了链接，并有替换文本为“喷泉”。注意作为背景的图片应尽量小，这样便于下载，平铺的效果保证了图片即使小也能够做背景，但是要注意边界的连续性。,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、插入表格,常用工具栏,布局工具栏,插入菜单,插入表格的三种方法,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 使用Dreamweaver 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、表格的行、列、单元格操作,插入行和列,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 编辑图像,中国地图，单击某个省份可查看省份信息,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像,4、鼠标经过图像,2,1,3.3 使用Dreamweaver CS4编辑网页元素,3.3.1 编辑图像,1、使用DW制作简单的导航栏,1,2,综合练习,使用table布局，制作一个简单的个人主页,