HTML与CSS课程第三课.pptVIP

格式化表格 使用属性检查器格式化表格。 要查看表格属性，首先选择整个表格。 然后，可以使用属性检查器为该表格增加行、列和边框，对表格或单元格插入背景图像。 演示：格式化表格的步骤 课堂练习:请编写HTML代码 框架标签框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。 注意：所有的框架标签要放在一个HTML文档中，HTML页面的文档体标签body被框架集标签frameset所取代，然后通过frameset的子窗口标签frame定义每一个子窗口和子窗口的页面属性。 frameset标签 frameset rows=“框架窗口高度,框架窗口高度，…” /frameset 用像素和%分割上下窗口，*表示剩余部分，一般设置了几个rows值，就需要几个框架 框架 框架 广告栏顶部框架(top.htm) 商品详细介绍右侧框架(main.htm) 商品导航 左侧 框架(left.htm) frameset cols=“框架窗口宽度,框架窗口宽度，…” /frameset 还可设置的属性包括： frameborder：是否显示框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显示，取值为0或no边框将会隐藏。 framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位） bordercolor：可设置边框线颜色。 用像素和%分割上下窗口，*表示剩余部分，一般设置了几个cols值，就需要几个框架 为何使用框架 在另一个固定部分 显示导航部分 在页面的一个固定部分显示徽标或静态信息 在此处显示主要内容。 站点中只有此部分是变化的。 Frame标签 frame标签：每一个框架都有一个显示的页面，这个页面文件称为框架页面，通过该标签可以定义框架页面的属性。 frame src=“页面源文件地址” name=“框架名称” 其他常用属性： noresize：禁止调整框架窗口尺寸。 marginwidth：设置边框与页面内容的水平边距 marginheight：设置边框与页面内容的垂直边距 页面的源文件可以是正常的html文件，也可以是一个图片或者其他文件 页面名称中不允许包含特殊字符、连字符、空格等，必须是单个的单词或者字母的组合 Frame标签 scrolling：设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示；no表示无论什么情况都不显示滚动条；auto是系统的默认值，它是根据内容来调整的，当页面长度超过浏览器窗口的范围时就会自动显示滚动条。 noframes标签 如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。 Target 目标 应用1：一般情况下，在页面中添加框架是为了更好地对页面内容进行导航，因此通常是通过框架链接不同的内容。 a href=“right1.html” target=“mainFrame”新闻中心/a 在哪里显示超链接---名字叫做mainFrame的框架中 使用iframe框架 使用iframe进行页面内的页面嵌套 可以定义嵌套页面的大小、位置等 用法： iframe name=“ifra1” scr=“abc.htm” border=“1”/ 可以通过name属性将链接的显示目标定位到 iframe框架内。 课堂重点 Html 常用标签使用 HTML 文档排版布局 使用表单及其中的对象 有问有答 作业： 制作一个简单的个人主页 制作一个网页版个人简历 * 演示： TG4-Source文件夹中“无序列表“用例 * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。 * 演示制作上图中的表格：(参见TG2-Source文件夹中表格例子) 1）插入表格（告诉学员几行几列） 2）在单元格中键入文字 3）单元格内容的对齐 4）合并单元格（顺便告诉学员什么是跨行，跨列，为后续TABLE标签打基础） 5）修饰表格的背景色 6）修饰第一行单元格的背景色（第一行一般作为单元格的标题列） 7）浏览显示给学员看，遗憾的是表格没有居中 8）整个表格的居中 9)再次浏览给学员看 10）总结讲解相关理论 * 1.先根据效果图：集体提问，表格是多少行多少列？ 回答：肯定是2行3列。 2.讲解代码：TABLE表示….TR表示…TD表示。 3.为了代码的可读性，象C语言写代码一样，为了显示层次关系， 建议学员写HTML代码时保持一定的缩进，如幻灯片的示例代码所示。 4.演示：TG5-Source文件夹中的“简单表格”用例。 * 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般