网页设计与制作项目教程（第二版）模块三利用表格和框架设计规整的网页.ppt

任务引领 ⑴ 课程表 ⑵ 时尚话题 ⑶ 中国名胜 项目渐近 网站项目“我心飞扬”之 第三阶段“爱好分享” 拓展训练 “求职网页”设计 模块三 利用表格和框架设计规整的网页 任务引领1 ◎ “课程表” 　　网页打开后，将显示如右图所示的“课程表”界面。 制作演示 插入表格对话框 ◎ 操作要点 （1） 插入一个表格用于布局。 （2）对表格进行合并。 （3）填写表格内容。 制作演示 对表格进行合并，填入内容即可。 相关知识 表格是网页中页面布局极为有用的设计工具。大部分网站中的主页是用表格来布局的。表格可以控制文本和图形在页面上出现的位置。在设计页面时，往往要利用表格来定位页面元素，通过设置表格和单元格的属性，可实现对页面元素的准确定位，合理地利用表格来布局页面，有利于协调页面结构的平衡。创建好表格后，可以在表格中输入文字、插入图像、修改表格属性、嵌套表格等。 　　 1．表格的知识 相关知识 　　 2．表格的构成 相关知识 插入表格是通过选择“插入”菜单中的“表格”菜单项来完成的； 在“插入”面板中的“布局”类别中，同样含有“表格”选项，通过单击该选项，也可以完成表格的插入。 在Dreamweaver中，不但可以使用以上两种办法直接制作新表格，如果已经有现成的数据文件（如Excel或表格式数据文件），还可以通过导入功能，自动将其转化为页面中的表格。 　　 3．表格的定义 相关知识 2 修改表格的行数与列数 可设具体值修改表格宽度，高度一般不设置而应让其自动调节 是表格内的内容与表格边框的距离 各单元格之间的间距 3 4 5 为表格取一个名称，便于脚本语言调用 1 表格在页面上的对齐方式，有默认、左对齐、居中对齐、右对齐四种对齐方式 设置边框线的厚度，当值为0时，表格无边框 6 7 可以自动清除列中多余的宽度 可以自动清除行中多余的高度 8 9 1 2 5 3 4 6 8 7 9 “表格”属性面板 任务引领2 ◎ “时尚话题 ” 　　以“时尚话题”为例，了解表格的用途，掌握表格属性，运用表格进行页面美观规整设计，运行效果如图3-14所示。 制作演示 ◎ 操作要点 （1） 插入一个总表格用于布局。 （2） 在总表格内嵌套表格。 （3） 在表格插入需要的内容。 制作演示 首先设计网页布局，然后利用另外的图像处理软件，如Photoshop，将一整幅完整的图片进行分割，分割后的图片大小与网页布局区域大小一致。 新建一个网页文件，插入一个3×3的表格。 对表格进行合并，合并后的表格如左图所示。将处理好的图像插入表格即可，见右图。 制作演示 在原来表格的基础上，继续嵌套表格，见上图。将处理好的图像插入表格即可。 相关知识 表格之中还有表格即嵌套表格。由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。 创建嵌套表格的操作方法是，先插入总表格，然后将光标置于要插入嵌套表格的单元格内，再继续插入表格即可。实际应用中表格的嵌套层数通常以不超过3层为宜。对于嵌套的表格可以单独对其进行设置，但是其宽度受它所在单元格的宽度的限制。 任务引领3 ◎ “中国名胜 ” 　　 在本任务模块中，将以“中国名胜”为例，学会使用框架进行页面布局的方法，运行效果如右图所示。 制作演示 ◎ 操作要点 （1） 将网页进行框架拆分用于布局。 （2）在每个框架内插入需要的内容，可以是文本、图片和网页文件。 （3） 将左框架的文本制作超级链接，链接目标框架是“main”。 制作演示 使用“修改”菜单中“框架集”菜单项 ，进行框架的拆分，拆分效果见下图。 制作演示 将光标分别定位在上、下、左框架中，输入对应的文本内容并设置好相关属性。 制作演示 在文档窗口中，分别选中左框架中各文本内容，选择“插入”菜单中的“超级链接”菜单项，在弹出的“超级链接”对话框中设置超级链接的目标文件，超级链接的目标窗口设置为“Main”框架。保存所有框架，浏览网页即可。 相关知识 　　 1．框架的知识 　 框架是网页制作时用来给网页布局的另一个工具，框架是用来拆分浏览器窗口，在不同的区域显示不同的网页。也可以说把一个网页页面划分成几个相对独立的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的HTML文件。因此，框架可以实现在一个浏览器窗口显示多个HTML文件的效果。 每个框架都具有自己的滚动条，当内容太长，在窗口中显示不下时自动显示滚动条，因此访问者可以独立滚