《实战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。 将光