项目7 使用表格布局页面.pptVIP

* 项目七 使用表格布局页面 情 境 设 置 大家在浏览绚丽多彩、生动美观的页面时，如果仔细观察可以发现这些精美的页面中，各种元素都是有机的结合在一起，无论是图像还是文字都被精心的合理的布置在网页上。这都是网页设计者的功劳，网页设计者根据自己的审美观和喜好，对网页进行布局，将各种元素放置在网页页面的不同位置上。大家可能会说，在前面项目的制作中，也想按照自己的想法放置图像或文字，但很难实现，比如，有时图像和文字无法对齐，有时想将图像放在某个特定位置但很难办到。这都是网页布局上的问题，从这个项目开始，我们将学习网页布局技术，有了网页布局技术，各种元素就可以按照你的设计进行放置。在网页布局技术中，最为常见的就是采用表格。 项 目 展 示 本项目完成后的大体效果如下。（不要求大家做的和样张完全一样，但要尽量模仿） 项 目 目 标 能正确地插入表格，并合理设置表格属性 能正确地在表格中插入文字并定位 能正确地在表格中插入图像并定位 能正确地在表格中插入动画并定位 能正确地在表格中插入表格并定位 能正确地在单元格中输入数据并设置属性 能进行单元格的合并、拆分、插入和删除 能设置表格、单元格的背景 项 目 分 析 具体工作任务： 制作一个网站，主题为“旅游景点” 运用表格布局页面 在各个单元格中添加适当的网页元素 对表格进行相应的属性设置来调整页面效果 对单元格进行相应的属性设置来调整页面效果 实 施 步 骤 步骤一：新建站点并建立首页 步骤二：运用表格布局页面 ，有时也将用于布局页面的表格叫做定位表格，因为可以利用表格将各种元素进行定位放置。 步骤三：插入标题文字和标题图片 这一步中要在刚才表格的第一行单元格中再次插入一个表格，这个表格称作嵌套表格，表格的宽度设为100%，意思是其宽度占据所在单元格的整个宽度，如果它所在的单元格为700像素，那该嵌套表格宽就是700像素，若它所在的单元格为800像素，那该嵌套表格宽就是800像素。 实 施 步 骤 步骤四：插入页面主体内容 步骤五：插入图像 步骤六：插入“欢迎光临”动画图像 步骤七：保存网页并预览最终效果 知 识 链 接 一、表格对话框 通过表格对话框可以设置表格的属性，主要包 括表格大小、页眉、辅助功能三部分。 知 识 链 接 1.表格大小 可以设置表格的行数、列数、表格宽度、边框粗细、单元格边距和单元格间距。 注意：为了确保浏览器不显示表格中的边距和间距，则将其设置为0。 2.页眉 用来设置表格的标题。 3.辅助功能 用来设置表格的其他内容。 知 识 链 接 二、选择表格元素 在表格中，横向称作行，纵向称作列，行与列的交叉部分称作单元格。 选择整个表格对象 选择行或列 选择单个单元格 选择连续的多个单元格 选择不连续的单元格 选择表格元素主要是指： 知 识 链 接 三、设置表格属性 可以用表格属性面板来设置表格属性 可以设置表格的行数、列数 、行宽、列高、间距、边框、对齐方式、背景色等属性。 知 识 链 接 四、设置单元格属性 可以用单元格属性面板来设置单元格属性 可以设置单元格的宽度、高度、背景、对齐方式、单元格内字体的样式等属性。 知 识 链 接 五、添加及删除行或列 选择【修改】下拉菜单中的【表格】选项，在弹出的级联菜单中选择相应的命令操作。 知 识 链 接 六、格式化表格 选择【命令】下拉菜单中的【格式化表格】选项，在弹出的对话框中做相应的设置。 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 1.新建站点并编辑保存首页 2.创建第一个二级页面 3.创建第二个二级页面 4.创建超链接 5.预览最终效果 小 结 本项目中主要介绍了如何用表格来规 划布局页面，使页面中的各种元素能够按照 设计要求放置，最终达到页面完整，和谐， 美观。