网页设计基础 层与表格及其应用.pptVIP

第十三章 层与表格及其应用 计算机信息中心 授课教师：邵熹雯 jsjsxw@ 本章内容 13.1 层的创建与基本操作 13.2 层的属性面板和控制面板 13.3 层的应用实例 13.4 创建表格的基本操作 13.5 表格的编辑修改与格式化 13.6 布局表格和布局单元格 13.7 本章小结 层的创建与基本操作 层是网页元素的载体 层的应用技术也是一种网页元素的定位技术。 层可与行为、时间轴配合使用 创建和删除层 【插入】|【布局对象】|【层】 层可以重叠 层可以嵌套 【插入】|【布局对象】|【层】 将光标插入到已建好的层中 【插入】|【布局对象】|【层】 嵌套层的子层可以在其父层中间，也可以在其父层外边，嵌套层永远在其父层上方。 激活和选中层 激活层目的：向层中插入各种网页元素 单击层中任意位置，就可激活层 选中层目的：对层进行属性编辑、调整、定位等 先激活层，再单击层左上角的选择柄 单击层的边框，也可选中层 当前窗口中没有层被激活和选中 注意鼠标形状变化 F2/【窗口】|【层】，在【层】面板中选中 按住Shift键，在【层】面板中选中多层 调整、移动和对齐层 手动调整/利用层【属性】面板调整 手动定位/利用层【属性】面板定位 选中多层--【修改】|【排列顺序】 设置层的属性 层编号：不能以数字开头，只能是英文字母和数字。 左上：位置 宽高：大小 Z轴：叠放次序，大在上，小在下 可见性：inherit、visible、hidden 溢出： visible、hidden 、Scroll、 Auto 剪辑：层可视区域与层边界之间的距离。 背景：颜色和图像 层的控制与操作 在【层】面板中可以完成对层改名，选定层，修改层的可见性，设置层的叠放次序以及设置层嵌套等操作 嵌套层在页面上显示时并不一定位于其父层之中，它的HTML代码嵌套在其父层的HTML代码中，移动父。层时嵌套层会一齐移动。如果从页面上看到某一层位于另一层之中，它们的HTML代码互不包含，就不是嵌套层 div id=Layer1 div id=Layer2/div /div 层的应用实例 2个文字图层 4个图像图层 图像为鼠标经过图片 创建表格的基本操作 利用表格可以控制文本和图像等对象在页面上的位置 网页一般可用表格和层来对网页元素定位 对于页面元素布局不规则的网页则可用布局表格和布局单元格来对网页元素定位 新建表格 【插入】|【表格】 【插入】|【布局】|【表格】 Ctrl+Alt+T 设置表格属性 表格Id：表格名称。 行、列、宽、高 填充、间距、边框 对齐：表格相对于页面对齐方式 清除列宽、清除行高 将表格宽度转换成像素、将表格宽度转换成百分比 背景颜色、边框颜色、背景图像 设置单元格属性 水平、垂直：单元格中元素对齐方式 宽、高：像素或百分比 不换行 标题 背景、背景颜色、边框 合并和拆分单元格 选取表格和单元格 选择单元格 鼠标单击并拖动 单击状态栏左侧标签选择器的td 选中多个单元格：鼠标拖动、shift、Ctrl 选中整行和整列 选择表格 单击状态栏左侧标签选择器的table 【修改】|【表格】|【选择表格】 按两次Ctrl + A 单击表格的右边框线或下边框线 表格的嵌套 嵌套的表格往往用作页面布局 表格边框线的宽度应该设为0 将光标插入当前表格的某个单元格内，然后可选择【插入】|【表格】命令 表格的编辑修改与格式化 改变表格或单元格的大小 表格行、列的增加和删除 单元格的拆分和合并 单元格的复制、粘贴、移动和清除 表格的样式化 【命令】|【格式化表格】 补充:表格元素的对齐方式 表格在页面中的对齐方式 图片等元素在单元格中的对齐方式 注意区别：图片的基线对齐与图片本身的对齐 布局表格和布局单元格 网页页面布局有两种工作模式，分别是【标准模式】和【布局模式】 创建和调整布局表格与布局单元格 由标准模式切换到布局模式 选择【布局表格】按钮，绘制布局表格 按住Ctrl键可以连续画多个布局表格 选择【布局单元格】按钮，绘制布局单元格 布局单元格中，根据页面需要输入文字或插入图片等对象 调整布局表格或布局单元格的大小及其中内容的属性 选中布局表格或布局单元格，并在布局表格或布局单元格的【属性】面板中完成它们的属性设置 标准模式和布局模式的应用实例1 3行8列的单元格用于布局 前两行合并，用于插入居中图片 第三行单元格调整宽高为：80*300 输入相应文字 利用shift+enter键换行 利用吸管提取颜色 标准模式和布局模式的应用实例2 800*600像素的布局表格 800*40像素的布局单元格：插入flash 4个79*79像素的gif图片 170*170像素的gif图片 本章小结 在本章中介绍了Drameweaver 8中的层、表格、布局表格与布局单元格及