网页制作教学课件5.pptVIP

 4） Spry折叠构件 （1）Spry折叠构件 Spry折叠构件是一组可折叠的面板，当单击不同的选项卡时，折叠构件的面板中相应地展开或者收缩。在折叠件中每次只有能有一个内容面板处于打开且可见的状态。 要创建Spry折叠构件，只要单击【Spry】选项卡中的【Spry折叠构件】按钮即可。 高等职业教育“十二五”规划教材 图5-54 创建Spry折叠构件 该构件的编辑方法与Spry选项卡基本相同。在预览中发现，面板高度不会随着面板中的内容变化，而是固定的，这是可以通过拖动下拉条查看内容。  （2） Spry可折叠构件 Spry可折叠构件是一个面板，可以将内容存储到紧凑的空间中。单击构件的选型卡皆可隐藏或者显示在可折叠面板中的内容。 Spry可折叠面板虽然只有一个面板，在文档中还是可以显示或者隐藏面板内容的。方法是将鼠标指向该面板的选项卡，然后单击出现在该选项卡右侧中的眼睛图标即可。 在【属性】面板中，可以设置预览网页的默认状态。选择【默认状态】下拉列表中的【打开】或者【已关闭】选项，即可在打开的网页中查看打开或者已经关闭的面板效果。效果可打开素材中的网页折叠式.html。 高等职业教育“十二五”规划教材 图5-55  高等职业教育“十二五”规划教材 the end  第5章 网页布局 教学目标 通过本章的学习，能合理地对网页进行布局设计。掌握表格的插入及属性设置，能对单元格进行合并和拆分，能在表格中熟练地插入和编辑各种对象，能导入和导出表格数据；掌握布局表格和布局单元格的绘制，能对布局模式下的表格和单元格设置格式及插入各种对象。 重点和难点 重点：表格的插入和单元格的编辑，布局表格和布局单元格的绘制及编辑。 难点：表格数据的导入和导出，布局单元格的排版及嵌套布局表格的使用。 高等职业教育“十二五”规划教材  1、 案例 音乐网 本案例音乐网将练习使用表格来进行网页布局，效果如图5-1所示。 这个案例的制作思路：①在网页中插入表格，不显示边框只用来布局；②在单元格内插入文字、图片，设置丰富的效果；③通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。 高等职业教育“十二五”规划教材 图5-1 天籁音乐网  1） 创建并设置表格 （1） 创建表格 插入表格 高等职业教育“十二五”规划教材 图5-2 “表格”对话框  输入内容 创建好表格后可以在表格中输入文字、插入图片或者表格（嵌套表格）等对象。 (2) 设置表格属性 高等职业教育“十二五”规划教材 图5-4 表格属性面板 （3） 设置单元格、行或列的属性 图5-5 单元格、行或列的属性面板  2 ） 编辑表格 （1） 复制与粘贴单元格 （2）增加和删除表格行与列 增加行或列 删除行或列 高等职业教育“十二五”规划教材 图5-6 选中要复制的单元格 图5-7 粘贴到文档中生成新表格 图4-8 “插入行或列”对话框 图4-9 “拆分单元格”对话框  3） 数据的导入和导出 （1） 生成分隔符类型的数据源 要在Dreamweaver中导入表格数据，必须先在另一个应用程序中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存数据文件。 （2）表格数据的导入 生成分隔符类型的数据源后，就可以在Dreamweaver中导入表格数据。 高等职业教育“十二五”规划教材 图5-13 “导入表格式数据”对话框  另外，Dreamweaver还可以直接导入XML、Word或Excel文件 高等职业教育“十二五”规划教材 图5-15 “文件”下“导入”菜单选项 （3）表格数据的导出 图4-17 “导出表格”对话框  4 ） 案例实现 “天籁音乐网”案例分析 （1）启动Dreamweaver，选择“文件”→“新建”命令，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。 （2）选择“修改”→“页面属性”命令，在“分类”中选择“外观”选项，设置一种背景颜色，然后选择“标题/编码”类别，在“标题”文本框中输入“天籁音乐网”，完成后单击“确定”按钮。 （3）在文档的第一行输入“天籁音乐网”，选中文字在“属性”面板中设置格式为“标题1”，字体为“宋体”，颜色为FFFF00（黄色），“居中