第12章 综合案例1 网站“蝴蝶谷”　课件

学习目标 了解如何规划网站、组织素材及制作网站的流程 掌握网站布局的方法和实用技巧 掌握如何在网页中添加动态特效代码 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” 最终效果如图所示。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” 最终效果如图所示。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （1）准备素材 当我们制作一个主题网站时，第1步是收集相关的图片与文字，同时还要对网站的制作形式和色彩进行构思，根据需求确定网站的布局模式、色调和组成版块，重点是对首页进行规划。网页的布局结构可以借鉴一些比较优秀的网站。第2步就是合成素材。一般我们收集的素材往往满足不了我们的需求，尤其要制作有艺术感的网站。这时就需要借助图形图像处理软件Photoshop进行素材的合成和色调处理，并保存为jpg或gif格式文件。还需借助动画制作软件Flash制作一些小的动画，并生成“.swf”格式文件。无论是合成图像还是Flash动画，它们的制作尺寸都是根据网页的布局尺寸确定的。在本网站中，需要应用Photoshop合成头部的背景图片、导航菜单图片、两个栏目的背景图片、欢迎介绍图片及各栏目头图片。用Flash制作网页头部动画和蝴蝶宣传动画。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （2）规划站点 新建文件夹hudie,在文件夹中新建image、file、other三个子文件夹。image文件夹将放置所有图片素材，站点中除主页以外的所有网页文件将放置在file文件夹中，其他所有的素材将放置在other文件夹中。将站点中的图片素材拷贝到image文件夹中，将Flash素材拷贝到other文件夹中。 （3）定义站点 启动Dreamweaver CC，单击菜单命令“站点”→“新建站点”，通过“站点设置对象”对话框定义站点名称为“hudie”，将文件夹hudie定义为存放当前站点的文件夹。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 1）新建网页，在站点的根目录下保存为index.html，将网页的标题改为“蝴蝶谷”。单击属性面板上的“页面设置”按钮，在“外观（CSS）”选项下设页面字体大小为12，“上边距”为0。在“链接（CSS）”选项下设“链接颜色”和“已访问链接”的颜色为#666666，“变换图像链接”颜色为#4ec100，“活动链接”颜色设为红色，单击“确定”按钮。这样对页面文字大小、超链接文字的大小及链接显示状态进行了设置。 2）单击菜单命令“插入”→“表格”新建表格，在弹出的对话框中设定表格为3行1列，宽770像素，其余参数为0，单击“确定”按钮。选中表格，在属性面板中设定表格的“Align”为居中对齐，这样表格将在页面中居中对齐。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 3)光标移到第1行的单元格里，在文档窗口右侧的“CSS设计器”面板单击“源”窗格右侧的按钮 ，在弹出的菜单中选择“在页面中定义”，在“源”窗格中生成<style>标签，表示创建源成功。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 3)选中在“源”窗格中创建的<style>标签，在“选择器”窗格的右侧单击按钮 ，设置新的选择器名称为“.bj1”。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 5）在CSS属性面板中设“目标规则”为“.bj1”，单击“编辑规则”按钮，打开“.bj1的CSS规则定义”对话框，在弹出的对话框中选择左侧的“背景”选项，设背景图像Background-image 为image/tou.jpg，如图所示，单击“确定”按钮。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 5）设单元格“宽”为770，“高”为140。属性面板和表格如图所示。 12.1 案例制作：网站“蝴蝶谷” 12.1 第12章　综合站点制作 12.1 案例制作：网站“蝴蝶谷” （4）制作网页页眉部分 6)光标在第1行单元格中。单击菜单命令“插入”→“媒体”→“Flash SWF”，打开“选择文件”对话框，找到image/mu.swf，单击“确定”按钮，于是在单元格