第1篇第4章网页元素定位(免费阅读).pptVIP

第1篇 第4章 网页元素定位 4.1 标准表格 4.1.1 建立表格 4.1.2编辑表格 4.2 布局表格 4.2.1 绘制布局表格与布局单元格 4.2.2 编辑布局表格与布局单元格 4.3 层 4.3.1 层的特点 4.3.2 层的基本操作 4.3.3 层面板 4.3.4 设置层属性 4.4 框架 4.4.1 框架基础 4.4.2 框架的基本操作 4.4.3 框架与框架集属性 思考题 4.1 标准表格 在信息世界中表格主要用于装载数据信息。由于表格能将单元格中的内容规划整齐后显示出来，表格属性能改变对象在浏览器中的显示效果，所以表格就成为网页中组织规划文字、图像等内容的排版工具。 本节主要介绍表格的建立、对表格的一些基本操作和怎样利用表格来构造页面的整体框架。 4.1.1 建立表格 table属性名＝属性值 … caption属性名＝属性值 …表格标题/caption tr属性名＝属性值 … th属性名＝属性值 …表头1/th td属性名＝属性值 …表项1/td /tr tr属性名＝属性值 … th属性名＝属性值 …表头2/th td属性名＝属性值 …表项2/td /tr /table 4.1.1 建立表格 表格标签table的常用属性有width、height、border、align、cellpadding（表项内部空白）、cellspacing（表项间隙）、bordercolor、 background、bgcolor 标题标签caption的常用属性有align、 valign（标题在表格的上部或下部，值为bottom|top）。 行标签tr、单元格标签td、表头标签th的常用属性有width、height、align、valign、nowrap、bordercolor、background、bgcolor。此外还有跨多行属性colspan和跨多列属性rowspan，如： th colspan=x rowspan=y 表项 /th 4.1.1 建立表格 body table width=247 height=129 border=1 caption学生成绩表/caption tr th rowspan=2学号/th th rowspan=2姓名/th th colspan=3成绩/th /tr trth width=40数学/thth width=40语文/thth width=40外语/th/tr trtd040321/tdtd张三/tdtd78/tdtd88/tdtd90/td/tr trtd050833/tdtd李四/tdtd67/tdtd75/tdtd98/td/tr trtd067712/tdtd王五/tdtd90/tdtd56/tdtd70/td/tr /table /body 4.1.1 建立表格 使用Dreamweaver建立表格，通过“插入”面板或者“插入”菜单 4.1.2 编辑表格 1．选择表格对象 选择整个表格：单击表格左上角或右边框或底边框或状态条中的Table标签。 选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击。 选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。 选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。 选择单元格中的网页元素：点击单元格中的网页元素。 4.1.2 编辑表格 2．编辑表格外观 表格属性面板 行、列、一个或多个单元格的属性面板 【例4-2】表格嵌套和代码 在对表格多次设置同一属性时，单元格的属性优先于表格行的属性，表格行的属性优先于整个表格的属性。 【例4-3】利用表格构造网页的整体框架 3．表格数据排序 4.2 布局表格 利用布局表格制作复杂的网页布局，制作简单，但布局表格可设置的属性比标准表格少。 利用布局表格布置复杂页面后，转换到标准表格设置属性。 4.2.1 绘制布局表格与布局单元格 “布局表格”按钮 ，“布局单元格”按钮 布局表格之间与布局单元格之间不能重叠 页面中的灰色空间是不可用来添加网页元素的区域，必须在需要插入网页对象的地方插入一个布局单元格 。 4.2.2 编辑布局表格与布局单元格 1. 调整布局表格与布局单元格的位置与大小。 2. 布局单元格的自动伸缩 。 3. 设置布局表格与布局单元格的属性。 【例4-4】应用布局表格重新制作的【例4-3】页面。 4.3 层 4.3.1 层的特点 层是可移动的，表格是不可