第5章--网页布局--网页制作课件.ppt

《第5章--网页布局--网页制作课件.ppt》由会员分享，可在线阅读，更多相关《第5章--网页布局--网页制作课件.ppt（33页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第5 5 教学目标教学目标 通过本章的学习，能合理地对网页进行布局设计。掌握表格的插入及属性设置，能对单元格进行合并和拆分，能在表格中熟练地插入和编辑各种对象，能导入和导出表格数据；掌握布局表格和布局单元格的绘制，能对布局模式下的表格和单元格设置格式及插入各种对象。重点和难点重点和难点 重点重点 难点难点高等职业教育高等职业教育“十二五十二五”规划教材规划教材1 1、案例案例 音乐网音乐网 本案例音乐网将练习使用表格来进行网页布局，效果如图5-1所示。这个案例的制作思路：在网页中插入表格，不显示边框只用来布局；在单元格内插入文字、图片，设置丰富的效果；通过拆分单元格或者插入嵌套表格来细化某些

2、单元格内部的布局。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-1 天籁音乐网 1 1）创建创建并设置表格并设置表格 （1）创建表格l 插入表格高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-2“表格”对话框l 输入内容 创建好表格后可以在表格中输入文字、插入图片或者表格（嵌套表格）等对象。(2)设置表格属性高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-4 表格属性面板（3）设置单元格、行或列的属性图5-5 单元格、行或列的属性面板 3 3）数据的导入和导出数据的导入和导出 （1）生成分隔符类型的数据源 要在Dreamweaver中导入表格数据，必

3、须先在另一个应用程序中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存数据文件。（2）表格数据的导入 生成分隔符类型的数据源后，就可以在Dreamweaver中导入表格数据。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-13“导入表格式数据”对话框 另外，Dreamweaver还可以直接导入XML、Word或Excel文件高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-15“文件”下“导入”菜单选项（3）表格数据的导出图4-17“导出表格”对话框 4 ）案例实现案例实现 “天籁音乐网”案例分析 （1）启动Dreamweaver，选择

4、“文件”“新建”命令，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。（2）选择“修改”“页面属性”命令，在“分类”中选择“外观”选项，设置一种背景颜色，然后选择“标题/编码”类别，在“标题”文本框中输入“天籁音乐网”，完成后单击“确定”按钮。（3）在文档的第一行输入“天籁音乐网”，选中文字在“属性”面板中设置格式为“标题1”，字体为“宋体”，颜色为FFFF00（黄色），“居中对齐”方式。4）按Enter键换行，在第二行中插入一条分隔线，可以选择“插入记录”HTML“水平线”选项。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-18 插入标题与分割线 （

5、7）光标定位在第二行单元格内，在单元格“属性”面板上单击“拆分单元格为行或列”按钮，在弹出的“拆分单元格”对话框设置将单元格拆分成3列。（8）在拆分的3个单元格内输入文字，拖动单元格的边框线调节每个单元格的宽度使它能容纳输入的内容。（9）光标定位在第三行单元格内，单击“插入”面板“常用”类别下的“表格”按钮，在弹出的“表格”对话框中设置行数为2，列数为6，表格宽度为778像素，其他为默认值。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图4-22 拆分第二行单元格图5-24 第三行中插入嵌套表格 （10）在嵌套表格中，选中第一行前5个单元格，单击单元格“属性”面板上“合并所选单元格，

6、使用跨度”按钮，在合并后的单元格内输入文本“热门专辑”并设置格式。在第一行第6个单元格内输入“更多”，选中文字在“属性”面板的“链接”文本框中输入“#”（空链接），“右对齐”方式。单击“插入”面板“常用”类别下的“图像”按钮，分别在第二行的6个单元格内插入图片，图片是images文件夹中的zj1、zj2、zj3、zj4、zj5和zj6，效果如图5-25所示。（11）光标定位到第四行单元格，与第三行一样插入一个2行6列的表格，将第一行的6个单元格合并为1个单元格并输入文字“分类搜索”；第二行16单元格内分别输入“歌手”、“歌曲”、“专辑”、“歌词”、MV和“排行榜”，在文字“属性”面板上设置链接

7、为“#”，“居中对齐”方式，效果如图5-26所示。（12）按CtrlS快捷键保存文件，命名为index.html，按F12键在浏览器中预览最终效果。高等职业教育高等职业教育“十二五十二五”规划教材规划教材 1 1）创建布局表格与单元格创建布局表格与单元格 （1）布局模式的基础知识l关于布局模式。在Dreamweaver中，表格有标准模式、扩展表格模式和布局模式3种模式。l设置布局模式首选参数。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-28“布局模式”首选参数对话框（2）绘制布局单元格和表格l绘制表格高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-32 绘制布局

8、表格l绘制布局单元格高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-33 绘制布局单元格2）布局表格与单元格属性）布局表格与单元格属性（1）设置布局表格格式（）设置布局单元格格式（）调整布局单元格和表格大小高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-35 布局表格“属性”面板图5-36 布局单元格“属性”面板 3)案例实现案例实现 “美食天下”网页案例分析 （1）启动Dreamweaver，选择“文件”“新建”命令，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。（2）在“文档窗口”的“标题”文本框中输入“无锡旅游”。图5-37 设置页

9、面标题 （3）选择“查看”“表格模式”“布局模式”命令，切换到布局模式。高等职业教育高等职业教育“十二五十二五”规划教材规划教材 （4）单击“插入”面板“布局”类别中的“绘制布局表格”按钮，在“文档窗口”中从左上角往右下角拖动鼠标绘制一个布局表格，并在布局表格“属性”面板上设置宽为778像素，高为600像素，背景色为#CCCCCC。（5）单击“插入”面板“布局”类别中的“绘制布局单元格”按钮，在布局表格顶部绘制一个宽为778像素，高为76像素的单元格（单元格大小在单元格“属性”面板中设置），在下面绘制5个宽和高都为100像素的正方形单元格和5个宽200像素、高60像素的矩形单元格，（图中深色区

10、域为布局单元格）。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-38 布局表格属性设置 （6）光标定位在顶部单元格，单击“插入”面板“常规”类别中的“图像”按钮，选择images文件夹中的banner.jpg图片将其插入。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-39 绘制布局单元格图5-40 顶部单元格内插入图片 （7）光标定位在第二排左边单元格，在其中插入图片jd1.jpg，然后光标置于右边单元格内，输入文本并设置格式，完成后效果如图5-41所示。（8）用同样的方法在第三到第六排单元格内添加其他景点的图片和文字介绍。（9）按CtrlS快捷键保存文件，命名

11、为index.html，按F12键在浏览器中预览最终效果。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-41 在第二排单元格内添加内容 2）Spry菜单栏构件菜单栏构件 （1）创建Spry菜单栏构件 在保存后的页面中，单击【布局】选项卡中的【Spry菜单栏】按钮，在【Spry菜单栏】对话框中启用不同的布局选项，会分别得到相应的菜单栏布局效果。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-43图5-44再次保存文档后，就可以预览默认样式的水平或垂直布局的菜单栏效果。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-45 预览Spry菜单图5-46 预览

12、Spry菜单（2）编辑Spry菜单栏构件 创建Spry菜单栏构件后，单击Spry菜单栏，【属性】面板中显示菜单条属性高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-47 Spry菜单栏【属性】面板帮助一级菜单栏链接窗口打开菜单栏目名称二级菜单栏目主菜单栏栏目链接文件 调整菜单栏目调整菜单栏目 在主菜单栏目区域中单击向下箭头一次，可以将该栏目与第二个栏目交换位置，而相应的子菜单栏目也会随之变为。如果单击加号或减号可直接增加或删除菜单栏项目。3）Spry选项卡式面板构件（1）创建Spry选项卡式面板构件 在保存页面后，单击【Spry】选项卡中的【Spry选项卡】按钮，在光标所在位置创

13、建Spry选项卡面板。（2）编辑Spry选项卡式面板构件 创建完成后，该面板属于被选中状态，【属性】面板中显示相应的选项。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-49 创建Spry选项卡图5-50 设置选项卡面板基本属性 在默认情况下，选项卡面板打开的事Tab1选项卡面板。要想打开其他选项卡面板，首先将光标指向该选项卡，然后单击出现的眼睛图标即可打开该面板。也可以单击【属性】面板中的面板选项卡。接着选中文本开始更改选项卡名称与面板内容，在面板中既可以输入文本，也可以插入图像，方法与在表格中相同。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-51 打开选项卡

14、面板图5-52 插入图片 4）Spry折叠构件 （1）Spry折叠构件 Spry折叠构件是一组可折叠的面板，当单击不同的选项卡时，折叠构件的面板中相应地展开或者收缩。在折叠件中每次只有能有一个内容面板处于打开且可见的状态。要创建Spry折叠构件，只要单击【Spry】选项卡中的【Spry折叠构件】按钮即可。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-54 创建Spry折叠构件 该构件的编辑方法与Spry选项卡基本相同。在预览中发现，面板高度不会随着面板中的内容变化，而是固定的，这是可以通过拖动下拉条查看内容。（2）Spry可折叠构件 Spry可折叠构件是一个面板，可以将内容存储到紧凑的空间中。单击构件的选型卡皆可隐藏或者显示在可折叠面板中的内容。Spry可折叠面板虽然只有一个面板，在文档中还是可以显示或者隐藏面板内容的。方法是将鼠标指向该面板的选项卡，然后单击出现在该选项卡右侧中的眼睛图标即可。在【属性】面板中，可以设置预览网页的默认状态。选择【默认状态】下拉列表中的【打开】或者【已关闭】选项，即可在打开的网页中查看打开或者已经关闭的面板效果。效果可打开素材中的网页折叠式.html。高等职业教育高等职业教育“十二五十二五”规划教材规划教材图5-55高等职业教育高等职业教育“十二五十二五”规划教材规划教材the end