HTML与CSS课程第三.ppt

HTML第三课李伟,HTML开发语言基础,HTML常用标记HMTL开发工具Dreamweaver的使用在Dreamweaver工具中开发网页HTML中站点概念、及站点下开发项目,内容回顾,Html中布局的概念在HTML文档中进行排版布局列表表格框架使用表单及其中的对象,内容摘要,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果苹果芒果桔子花卉水仙兰花向日葵玫瑰花,列表类型：无序列表,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,无序列表也称为“项目列表”,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,列表类型：有序列表,在有序列表中，列表项以自动生成的顺序显示,任务1：HTML开发应用,格式标签标签：用来创建一个有序的列表，该标签内有一子标签，多个标签同时嵌套在中，在浏览器显示的时候列表前的数字以递增的形式显示。标签：用来创建一个无序的列表，该标签内有一子标签，每个列表内容前都有一圆点。标签：是、标签的子标签，用于定义标签的内容。,无序列表项1无序列表项2,列表内容1列表内容2,任务1：HTML开发应用,格式标签标签：用于创建一个列表，标签与其嵌套在内的dt、dd一起使用。标签：必须嵌套在标签内，在浏览器中该标签内的内容将在列表的第一层显示。标签：嵌套在标签内，配合一起使用，在浏览器中该标签的内容作为列表的第二层显示。第一层内容第二层内容,表格,行,列,使用表格姓名性别分数RobertM80.,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,创建表格,第一步,第三步,第二步,此时，在“文档”窗口中将插入一个空白表格,演示：创建表格的步骤,表格,行,列,列标题,在HTML文档中，广泛使用表格来存放网页上的文本和图像,单元格,学员档案信息姓名性别分数RobertM80.,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,学员档案信息姓名性别分数RobertM80.,表格的对齐方式,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,合并单元格(跨列),创建表格第一学期第二学期数学科学英语数学科学英语9888.,COLSPAN=“n”属性表示跨多少列,合并单元格(跨行),创建表格螺母螺栓锤子第一季度一月250010001240二月.,ROWSPAN=“n”属性表示跨多少行,学员档案信息姓名性别分数RobertM80MaryF18,表格的背景色和尺寸设置,表格的颜色设置：表格的背景色行的背景色列的背景色颜色值可以采用RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。,表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。,格式化表格,演示：格式化表格的步骤,课堂练习:请编写HTML代码,框架标签框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。,注意：所有的框架标签要放在一个HTML文档中，HTML页面的文档体标签被框架集标签所取代，然后通过的子窗口标签定义每一个子窗口和子窗口的页面属性。,标签,用像素和%分割上下窗口，*表示剩余部分，一般设置了几个rows值，就需要几个框架,框架,框架,广告栏顶部框架(top.htm),商品详细介绍右侧框架(main.htm),商品导航左侧框架(left.htm),还可设置的属性包括：frameborder：是否显示框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显示，取值为0或no边框将会隐藏。framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位）bordercolor：可设置边框线颜色。,用像素和%分割上下窗口，*表示剩余部分，一般设置了几个cols值，就需要几个框架,为何使用框架,在另一个固定部分显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。站点中只有此部分是变化的。,Frame标签,frame标签：每一个框架都有一个显示的页面，这个页面文件称为框架页面，通过该标签可以定义框架页面的属性。其他常用属性：noresize：禁止调整框架窗口尺寸。marginwidth：设置边框与页面内容的水平边距marginheight：设置边框与页面内容的垂直边距,页面的源文件可以是正常的html文件，也可以是一个图片或者其他文件,页面名称中不允许包含特殊字符、连字符、空格等，必须是单个的单词或者字母的组合,Frame标签,scrolling：设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示；no表示无论什么情况都不显示滚动条；auto是系统的默认值，它是根据内容来调整的，当页面长度超过浏览器窗口的范围时就会自动显示滚动条。标签如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。,Target目标,应用1：一般情况下，在页面中添加框架是为了更好地对页面内容进行导航，因此通常是通过框架链接不同的内容。新闻中心,在哪里显示超链接-名字叫做mainFrame的框架中,使用iframe框架,使用iframe进行页面内的页面