《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第12章 综合制作》由会员分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第12章 综合制作（86页珍藏版）》请在金锄头文库上搜索。
1、学习目标,了解如何规划网站、组织素材及制作网站的流程能利用站点定 义向导创建站点和编辑管理站点 掌握网站布局的方法和实用技巧 掌握如何在网页中添加动态特效代码,12.1 案例制作：网站“蝴蝶谷” 12.2 案例制作：网站“集邮之家” 12.3 案例制作：“网页设计教程”网页,本章内容,通过本案例的操作，你将学会：如何利用布局表格的叠加和嵌套进行复杂的页面布局、如何利用页面属性对页面元素进行格式化、如何插入各种网页元素和设Flash背景透明,12.1 案例制作：网站“蝴蝶谷”,通过本案例的操作，你将学会：如何利用布局表格的叠加和嵌套进行复杂的页面布局、如何利用页面属性对页面元素进行格式化、如何插
2、入各种网页元素和设Flash背景透明,12.1 案例制作：网站“蝴蝶谷”,操作步骤： （1）准备素材 当我们制作一个主题网站时，第1步是收集相关的图片与文字，同时还要对网站的制作形式和色彩进行构思，根据需求确定网站的布局模式、色调和组成版块，重点是对首页进行规划。网页的布局结构可以借鉴一些比较优秀的网站。第2步就是合成素材。一般我们收集的素材往往满足不了我们的需求，尤其要制作有艺术感的网站。这时就需要借助图形图像处理软件Photoshop进行素材的合成和色调处理，并保存为jpg或gif格式文件。还需借助动画制作软件Flash制作一些小的动画，并生成“.swf”格式文件。无论是合成图像还是Fla
3、sh动画，它们的制作尺寸都是根据网页的布局尺寸确定的。在本网站中，需要应用Photoshop合成头部的背景图片、导航菜单图片、两个栏目的背景图片、欢迎介绍图片及各栏目头图片。用Flash制作网页头部动画和蝴蝶宣传动画。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： （2）规划站点 新建文件夹hudie,在文件夹中新建image、file、other三个子文件夹。image文件夹将放置所有图片素材，站点中除主页以外的所有网页文件将放置在file文件夹中，其他所有的素材将放置在other文件夹中。将站点中的图片素材拷贝到image文件夹中，将Flash素材拷贝到other文件夹中。 （3）定义站
4、点 启动Dreamweaver CS5，单击菜单“站点”“新建站点”命令，通过“站点设置对象”对话框定义站点名称为hudie，将文件夹hudie定义为存放当前站点的文件夹。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： （4）制作网页页眉部分 1）新建网页，在站点的根目录下保存为index.html，将网页的标题改为“蝴蝶谷”。单击属性面板上的“页面设置”按钮，在“外观（CSS）”选项下设页面字体大小为12，“上边距”为0。在“链接（CSS）”选项下设“链接颜色”和“已访问链接”的颜色为#666666，“变换图像链接”颜色为#4ec100，“活动链接”颜色设为红色，单击“确定”按钮。这样对页
5、面超链接文字的大小及链接显示状态进行了设置。 2）单击菜单“插入”“表格”命令新建表格，在弹出的对话框中设定表格为3行1列，宽770像素，其余参数为0，单击“确定”按钮。选中表格，在属性面板中设定表格的“对齐”为居中对齐，这样表格将在页面中居中对齐。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 3)光标移到第1行的单元格里，在右侧的“CSS样式”面板中单击 新建CSS规则，在弹出的对话框中设选择器类型为“类”，在“选择器名称”中输入“d1”，单击“确定”按钮，在弹出的“d1的CSS定义规则”对话框中选择“背景”选项，设“背景图像”为image/tou.jpg，如图所示。,12.1 案例制作
6、：网站“蝴蝶谷”,操作步骤： 此时文档窗口中的第一行单元格的背景变成指定的背景图片。在CSS属性面板中，设单元格宽度为770，高度为140，如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 4)光标在第1行单元格中。单击菜单“插入”“媒体”“SWF”命令，打开“选择文件”对话框，找到image/mu.swf，单击“确定”按钮，于是在单元格中插入Flash的SWF文件。选中SWF文件，在属性面板中单击Wmode的下拉列表选择“透明”，属性面板如图所示。按F12预览Flash背景是否透明。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 5）光标移到第2行单元格中，插入图像文件image
7、/caidan.jpg。选中图像，在属性面板上选择矩形热点工具，分别在菜单图像上绘制矩形热点区域，如图所示。系统自动为热区建立空链接。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 6）光标移到第3行单元格中，在CSS属性面板中，设单元格宽度为770，高度为20、背景颜色为#4ec100。 在CSS属性面板中单击拆分单元格按钮 ，将单元格拆分为2列。光标移到左侧单元格中，输入文字“当前位置：首页”，在右侧单元格输入文字“欢迎浏览本网站！” 选中右侧文字，切换到代码视图，找到反白显示的文字，添加跑马灯效果代码，当鼠标移到滚动的文字上时文字停下不动，鼠标离开文字后文字继续滚动。修改后的代码为“欢
8、迎光临本网站！”。按F12观察文字滚动效果。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 7） 在右侧的CSS样式面板中单击 新建CSS规则，在弹出的对话框中设选择器类型为“类”，在“选择器名称”输入名称为“t0”，在接下来弹出“t0的CSS规则定义”对话框中，在“类型”选项下设字号为12、字体颜色为#666666。 在右侧的CSS样式面板中单击 新建CSS规则，在弹出的对话框中设选择器类型为“类”，在“选择器名称”输入名称为“t1”，在接下来弹出“t1的CSS规则定义”对话框中，在“类型”选项下设字体颜色为白色。 分别选中左、右单元格中的文字，在CSS属性面板的目标规则下拉列表中选择t1
9、，此时文字变为白色。按F12观察效果如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： （5）制作正文部分 1）鼠标单击表格右侧外部的空白区域，将光标移到表格的右侧，插入一个新的2行2列表格，设表格宽为770，其他为0。在属性面板中设表格的“对齐”为居中对齐。 2）将光标分别放入不同的单元格中，在属性面板中设单元格“垂直”对齐方式为“顶端”。 3）在右侧的CSS样式面板中单击 新建CSS规则，在弹出的对话框中设选择器类型为“类”，在“选择器名称”输入名称为“b1”，如图所示，单击“确定”。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 在接下来弹出“b1的CSS规则定义”对话框中，在
10、“背景”选项下设背景图形为“image/left.jpg”，“背景重复”选择“不重复”。在“方框”选项下设宽为460，高为170。 光标移到第1行左侧的单元格中，在CSS属性面板中的“目标规则”中应用b1样式，效果如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 4）参照步骤3），新建CSS规则b2，设背景图像为“image/right.jpg”。在“方框”选项下设宽为460，高为170。将该样式应用到左侧第2行的单元格。其效果如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 5）光标移到左侧第1行单元格内，插入一个5行7列、宽为100%、其他为0的嵌套表格。选中所有单元格
11、，设水平和垂直对齐方式为“居中”。 在第2行的第2、4、6单元格中分别插入图像。光标分别移到插入图像的单元格中，在属性面板中设单元格的宽为27%，高度为95。 在第3、4行的对应单元格中输入文字，并分别选中文字，在CSS属性面板的目标规则下拉列表中选择t0，应用t0样式。在属性面板中设第3、4行的单元格的高度为18。 在第5行中合并第6、7个单元格，并输入“更多”。选中文字，应用t0样式，设单元格“水平”为“右对齐”。设“垂直”为“底部”。 其效果如图所示。若左侧的背景图片的栏目名称被覆盖遮挡的话，可以向右拖动第1个单元右侧的边线，使得栏目名称不被遮挡。,12.1 案例制作：网站“蝴蝶谷”,操
12、作步骤： 6）参照步骤5），在第2行左侧的单元格插入6行7列、宽为100%的嵌套表格。按照图所示布局进行单元格合并。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 在相应的单元格中插入图片和文字，文字前面的黑点，是通过“插入”“HTML”“特殊字符”“其他字符”找到黑点符号来实现的。分别为文字应用t0样式。最后1行的单元格设“垂直”对齐方式为“右对齐”。设每行单元格高度为18。根据布局美观要求，可适当调整各单元格的宽度，如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 7）将光标移到大表格右侧的第1行单元格中，设单元格的“水平”和“垂直”的对齐方式为“居中”。插入图像image/Y
13、OUTU1.jpg。 8）将光标移到大表格右侧的第2行单元格中，设单元格的“垂直”的对齐方式为“顶端”。插入一个7行3列、宽为100%的嵌套表格。分别在其中输入文字。设每行单元格高度为20。如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 9） 在右侧的CSS样式面板中单击 新建CSS规则，在弹出的对话框中设选择器类型为“类”，在“选择器名称”输入名称为“t2”，在接下来弹出“t2的CSS规则定义”对话框中，在“类型”选项下设字号为14，字体颜色为#c00。选中第1行的英文，在属性面板中的“目标规则”中选择t2样式。其他文字应用t0样式。页面布局效果如图所示。,12.1 案例制作：网
14、站“蝴蝶谷”,操作步骤： （6）版权区域制作 1）鼠标单击表格右侧外部的空白区域，将光标移到表格的右侧，插入一个新的3行1列表格，设表格宽为770，其他为0。在属性面板中设表格的“对齐”为居中对齐。 2）光标移到第1行单元格中，在CSS属性面板中，设宽度为770，高度为20、背景颜色为#4ec100。输入文字“I LOVE BUTTERFLY”，选中文字，在属性面板中的“目标规则”中应用t1样式，文字颜色为白色。 2）光标移到第2行单元格中，插入水平线，选中水平线，在属性面板中设高度为2，切换到代码视图，找到反白显示的水平线代码，修改代码为“”，则水平线改为浅绿色。 3）在第3行单元格中输入版
15、权文字，并设置电子邮件链接和更新日期，在属性面板中设单元格的“水平”对齐方式为“居中对齐”。选中文字，应用t0样式。如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： （7）网站子页的制作 1）将网页index.html另存为gushi.html,保存到file文件夹下。将网页正文部分左、右两侧的嵌套表格和图像删除掉。分别选中左侧的上下两个单元格，在属性面板的“目标规则”中选择“删除类”，去掉单元格背景。选中正文部分的表格，在属性面板中修改为1行2列，如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 2）光标移到正文部分表格的左侧单元格内，在属性面板中设单元格的宽为205、背
16、景颜色为#eeeeee、“垂直”对齐方式为“顶部”。 插入一个8行3列、宽为100%、其他为0的嵌套表格。将第1行的3个单元格进行合并，插入图像image/futou.jpg。 光标移到第3行第2个单元格中，设单元格的“水平”和“垂直”对齐方式为“居中”。插入Flash文件other/fumu.swf。 光标移到第5行的中间单元格中，输入文字“内容提要：”，并应用t0样式。 光标移到第6行的中间单元格中，单击菜单命令“插入”“HTML”“特殊字符”“其他字符”单击黑点符号，再输入文字“我的蝴蝶说”。选中文字。应用样式t0。选中小黑点，在属性面板的“目标规则”中应用t2样式。拖动单元格的边线调整单元格的高度，其布局效果如图所示。,12.1 案例制作：网站“蝴蝶谷”,操作步骤： 3）将光标移到右侧的单元格中，设单元格的“垂直”对齐方式为“顶端”。插入一个5行3列、宽为100%、其他为0的嵌套表格 在第2行第2个单元格中插入图像image/gushi.jpg。 将光
