《网站建设与管理 第5章 在网页中使用表格和框架.ppt》由会员分享，可在线阅读，更多相关《网站建设与管理 第5章 在网页中使用表格和框架.ppt（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网站建设与管理网站建设与管理 第第5章在网页中使用表格和框架章在网页中使用表格和框架5.1在在Dreamweaver中使用表格中使用表格 l5.1.1表格概述 表格是由一些被线条分开的单元格组成，数据、文字、图像都可以放在单元格中。表格的边框有粗有细，还可以不显示。放置在表格中的数据看上去简捷直观，所以表格被广泛应用于各种数据的显示和处理，表格是数据库最基本的组织形式。表格可以用来规划版面，使一些内容在指定位置显示。若表格的高度和宽度高设为“百分比”形式，内容位置可随浏览器窗口大小改变，是内容的相对定位。若设为“固定大小”，内容在页面上的位置不随浏览器窗口大小改变，是内容的绝对定位。5.1在在
2、Dreamweaver中使用表格中使用表格l5.1.2 创建表格 1插入表格：“插入”菜单“表格”，打开“表格”对话框。（1）“行数”框指定表格行数，“列数”框指定表格列数。（2）“表格宽度”框指定表格宽度，有“百分比”和“像素”两种单位。“百分比”使表格宽度随浏览器窗口宽度改变，“像素”使表格宽度固定，表格大小不变。（3）“边框粗细”框指定表格边框线的宽度。若取值为0，表格的边框不显示。（4）“单元格边距”框指定表格中各单元格的内容与其边框之间的距离。（5）“单元格间距”框指定表格的各单元格之间的距离。5.1在在Dreamweaver中使用表格中使用表格2表格属性面板（1）表格Id：为表格指
3、定名称。（2）行和列：设置表格的行数和列数。（3）宽和高：设置表格的宽度和高度。（4）填充：设置表格内容与表格内部边界之间的距离。（5）间距：设置表格中单元格与单元格之间的距离。（6）对齐：设置表格在浏览窗口水平方向的对齐方式。（7）边框：设置表格边框的宽度，值为0时不显示边框。（8）边框颜色：设置表格的边框颜色。（9）背景颜色：设置表格的背景颜色。5.1在在Dreamweaver中使用表格中使用表格l5.1.3编辑表格 1选中表格元素 2添加行或列 3删除行或列 4合并单元格 5拆分单元格 6改变单元格所跨的行或列的数目 7使用剪切、复制、粘贴命令 5.2表格的布局视图表格的布局视图 l5.
4、2.1布局视图概述 布局视图是一种特殊的表格视图，它能用可视化的方法在页面上绘制任意数量任意大小的复杂表格，而且能在表格中任意位置上绘制任意数量任意大小的单元格。布局视图用表格作为基础结构来设计页面，可以在页面中方便的绘制单元格，然后将这些单元格移动到所需的位置。可以在同一个布局表格中使用布局单元格创建页面布局，也可以使用多个布局表格创建更为高级的布局。使用多个布局表格能将布局的每个部分孤立起来，使它们之间不会相互影响。5.2表格的布局视图表格的布局视图l5.2.2布局表格的操作 进入布局视图有2种方法：（1）打开“查看”菜单选“表格视图”选“布局视图”。（2）在“插入”栏单击“布局”选项卡单
5、击“布局视图”。5.2表格的布局视图表格的布局视图l5.2.2布局表格的操作2绘制布局表格 绘制布局表格的步骤：单击“插入”栏“布局”选项卡单击“布局视图”按钮单击“绘制布局表格”按钮用鼠标在页面拖动。绘制的布局表格有绿色轮廓线，表格顶部有“布局表格”标签，能帮助用户识别并选定表格。5.2表格的布局视图表格的布局视图l5.2.2布局表格的操作 3绘制嵌套布局表格 嵌套布局表格是在已有的布局表格中插入布局表格，还可以插入嵌套布局表格，个数不限。步骤如下：单击“绘制布局表格”按钮用鼠标在已有的布局表格灰色区域中拖动。创建了嵌套布局表格。嵌套布局表格不能大于包含它的布局表格。5.2表格的布局视图表格
6、的布局视图4布局表格属性（1）“宽”和“高”框设置布局表格的宽度和高度。（2）“填充”框设置单元格内容与单元格边界的距离。（3）“间距”框设置两个相邻单元格之间的距离。（4）单击“清除行高”和“使列宽一致”按钮，可以使单元格高度与插入的内容相匹配。（5）单击“删除所有分隔图像”可以从当前布局表格中删除所有分隔图像。单击“删除嵌套”按钮可以将嵌套布局表格在保留内容的前提下融入到父级表格中，去除嵌套关系。（6）在“背景颜色”框中设置布局表格的背景颜色。5.2表格的布局视图表格的布局视图l5.2.3布局单元格的操作 1布局单元格概述 布局表格绘制完成后，开始在布局表格的有效空间里绘制布局单元格，Dr
7、eamweaver会自动围绕绘制的布局单元格生成其他表格。切换到标准视图可以看到实际生成的表格。布局单元格在页面上不能相互重叠，如果新绘制的布局单元格与已存在的布局单元格距离太近，系统自动将使两个单元格靠齐以维持不重叠的结构。5.2表格的布局视图表格的布局视图l5.2.3布局单元格的操作 2绘制布局单元格 绘制布局单元格步骤如下：单击“插入”栏中“布局”选项卡单击“布局视图”按钮单击“绘制布局单元格”按钮在页面上拖动鼠标创建布局单元格。绘制的单元格为蓝色的轮廓、白色的背景。切换到标准视图可看到生成的表格。5.2表格的布局视图表格的布局视图l5.2.3布局单元格的操作3向布局单元格中添加内容 在
8、布局视图中，可以向布局单元格中添加文本、图像和其他多媒体对象，方法与在标准视图中添加内容相同。单击需要插入内容的布局单元格，输入文本或者插入其他对象。在属性面板中单击“清除单元格高度”按钮，可以使布局单元格自动适应文本内容。5.2表格的布局视图表格的布局视图l5.2.3布局单元格的操作4移动或调整大小（1）调整布局单元格大小 单击布局单元格的边框将鼠标指针指向边框的某个调节柄按住鼠标左键拖动。（2）移动布局单元格 单击布局单元格的边框并拖动鼠标到目标地松开，布局单元格便移到指定位置。5.2表格的布局视图表格的布局视图l5.2.4标尺和网格 1标尺 （1）显示标尺的方法 （2）隐藏标尺 2网格
9、（1）显示和隐藏网格 （2）靠齐到网格 （3）设置网格 5.3 用框架布局页面用框架布局页面 l5.3.1框架概述 框架将一个浏览器窗口划分为多个不同区域，每个区域显示不同的网页文档内容。最常见框架结构是：上方区域是网站标志、主图和导航条，左边区域是网站目录索引，右下方区域为主体区域。这种框架称为“顶部和嵌套的左侧框架”。浏览网页时，导航和目录索引内容始终显示在页面上，单击导航或目录索引中的项目，主体区域的页面内容将发生变化，这就是框架技术。5.3 用框架布局页面用框架布局页面l5.3.2创建框架和框架集 如果一个页面被划分为“顶部和嵌套的左侧框架”，存盘时实际上保存了4个独立文件，一个是框架
10、集文件，另外三个是框架内容文件。1创建框架和框架集 2选定框架或框架集 3设置框架边框的显示和隐藏 4删除框架和框架集 5.3 用框架布局页面用框架布局页面l5.3.3框架和框架集属性面板 1“框架集”属性面板 2“框架”属性面板 5.3 用框架布局页面用框架布局页面l5.3.4保存框架和框架集 1保存框架集：选定框架集“文件”菜单“保存框架页”在“另存为”对话框中选择要放置网页的文件夹为框架集文件命名单击“保存”按钮。框架集文件是主页，通常以index.htm命名。2保存框架：打开“文件”菜单选“保存全部”“保存为”对话框将打开若干次逐一为框架集和每个框架文件指定文件名单击“保存”按钮。要在
11、框架面板中正确辨认正在保存的是框架集还是某个框架。5.3 用框架布局页面用框架布局页面l5.3.5在框架中插入文本、图像和表格 1可以直接在每个框架中插入文本、图像和 表格。2可以直接在各自的属性面板中为某框架或 框架中的表格添加背景颜色。3可以直接编辑某框架对应的页面文件。5.4 用用“层层”布局网页布局网页 l5.4.1 层的创建 1在文档中插入层：单击“插入”栏“布局”卡单击“描绘层”按钮在文档中拖动鼠标。可以看到文档中插入了一个新层。2层的属性面板 5.4 用用“层层”布局网页布局网页l5.4.2 在层中插入对象 1向层中插入嵌套层 2在层中输入文本 3在层中插入图像 5.4 用用“层层”布局网页布局网页l5.4.3编辑层 1选定层 2移动层 3改变层的大小 4对齐多个层 5使用“层”面板 5.5 用用HTML处理表格框架处理表格框架 l5.5.1表格标记符 表格标题 表格头1表格数据1 5.5.2使用表格标记符 5.6 网页头部信息网页头部信息 l5.6.1插入头部信息 l5.6.2元数据meta l5.6.3关键字和描述 1搜索“关键字”和“描述”2搜索页面作者 l5.6.4刷新