第11章 Dreamweaver案例实训.pptVIP

* 阿尔茨海默症防治相关知识埃及的金字塔有建造方法动画艾司洛尔在神经外科重症中的应用二级二班防溺水等安全教育 LOGO 第11章　案例实训 本章目标 掌握使用表格排版网页 掌握CSS样式在网页中的应用 掌握模板的使用 掌握使用表格排版网页 11.1 综合实例一 11.1.1　策划页面布局 11.1.1 策划页面布局 （1）新建文件。设置页面属性。如图11-1所示。 （2）新建.tableCSS样式。 （3）插入一个一行一列表格。 （4）嵌套一个一行三列表格。 图11-1 （5）设置单元格大小，插入图片。（第一个单元格：宽21%、高72px，第二个单元格：宽63%）。 （6）嵌套一个三行一列的表格，插入图片、输入文本。如图11-6所示。 （7）插入一行8列的表格。 （8）输入文字，设置文字颜色为：#FFFFFF。前7个单元格宽度为：77、最后一个单元格宽度为259。 图11-6 （9）用相同的方法插入一行两列的表格。并在第一个单元格内制作表单、在第二个单元格内插入图片。（表格背景颜色为：#cococo。）如图11-9所示。 （10）插入两行三列表格：【宽】：760，【高】：387，【背景颜色】：#cococo。【边框】：1，【边框颜色】：#111111。 （11）在一个单元格内嵌套二行一列的表格，宽：160，高：209。并插入图片。在第二行嵌套11行一列的表格，输入文本 。 图11-9 （12）用同样的方法（嵌套表格）完成其它版块的制作。如图11-12所示。 （13）在底部插入一行一列表格。 （14）输入文字。设置文字的【颜色】为：#FFFFFF。【对齐】为：居中。 图11-12 11.2 综合实例二 11.2.1　设置内容外观 11.2.1 设置内容外观 （1）新建文件。定义两个CSS样式 。 （2）插入三行三列的表格（宽：750px）。合并第一行的三个单元格。在第二行中插入图片。 （3）合并第三行单元格，嵌套1行11列的表格（宽度为100%）。 （4）分别设置单元格的宽度为76px、22px，插入图片并输入文字。设置文字的颜色和大小,如图11-4所示。 图11-4 （5）插入一行一列表格。设置宽度为750、高度为16，插入图片。 （6）插入2行3列表格。合并第一列的两个单元格，嵌套一个4行1列的表格。子表格的宽度为170。插入图片输入文字，设置单元格的背景图片为bk_a.gif。 （7）嵌套2行1列表格，宽度为95%、【背景图片】为bk_d. gif。同样的方法插入图片和文字。 （8）在第二行的表格中嵌套2行1列的表格，宽度为409px。并设置第一行的【背景图片】为bk_c.gif。 （9）在第二行嵌套3行1列的表格，宽度为100%。【背景图片】为bk_d. gif。 （10）插入图片，在第三行嵌套2行3列的表格。先合并第一行的三个单元格后插入对象。 （11）用同样的方法完成下面的制作，（文字所在的行高为30px）。如图11-10所示 。 图11-10 （12）在最右侧的单元格内嵌套3行1列的表格。插入图片输入文字。如图11-11所示。 （13）在底部插入水平线，并设置属性。如图11-12所示。 图11-12 图11-11 （14）插入一行一列的表格，插入文字。如图11-13所示。 图11-13 （15）保存文件，完成本页面的排版。按【F12】预览效果。如图11-14所示。 图11-14 11.3 综合实例三 11.3.1　统一网页风格 11.3.1 统一网页风格 （1）新建模板文件。（.dwt的文件）。按组合键【Ctrl+J】设置页面属性。如图11-1、11-2所示。 图11-1 图11-2 （2）插入1行1列的表格。（宽度为779px、高度为111px）。 （3）在单元格中插入（Top.swf）。 （4）插入2行4列表格。 （5）合并第一行的三个单元格，插入图片。如图11-7所示。 图11-7 （6）在第二行中插入图片，设置第二个单元格的宽度为24、第三个单元格的背景颜色为：#7EB4D7。 （7）将第4列的宽度设置为208px，插入图片设置下面的单元格的背景颜色为：#7EB4D7。 （8）插入1行2列的表格，设置第一列单元背景颜色为：#52BEE5、宽度为：165px。如图11-11所示。 图11-11 （9）在第一列嵌套10行1列的表格 （10）在每行内插入图片和文本对象。如图11-12所示。 （11）执行菜单命令【插入】→【模板对象】→【可编辑区域】插入名为home的可编辑区域。 图11-12 （12）插入2行1列的表格。 （13）设置第一行的背景颜色为：#666666，第二行的