零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第16课

Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
4. 布局页面
无论是主页还是内页， 无论是主页还是内页，其布局方式都应相 同。本例中是通过表格规定网页的大小和 定位网页元素的。 定位网页元素的。东方雷神网站的大小为 778×900像素，因此添加的表格以该大 × 像素， 像素 小来确定。再通过嵌套表格的方式将网页 小来确定。 图像、动画及文本放置在需要的位置， 图像、动画及文本放置在需要的位置，具 体操作参见16.2.4节。 体操作参见 节
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.1.1 实例效果预览
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.1.2 实例制作分析
1. 主页效果 2. 内页效果 3. Banner动画 动画 4. 布局页面
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 主页效果
主色彩的定位：网页设计色彩的定位一般以客户提 主色彩的定位： 供的资料（如宣传类资料、标志等） 供的资料（如宣传类资料、标志等）的色彩作为主 色调，因为这些都是客户已认可的东西， 色调，因为这些都是客户已认可的东西，因此如果 采用这些资料上的色彩来定主色， 采用这些资料上的色彩来定主色，客户认可的程度 会比较大。当然， 会比较大。当然，客户也可能会提出以哪些色彩作 为主色，这时则应根据客户的需求而定。 为主色，这时则应根据客户的需求而定。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.2 制作 制作Banner动画 动画
操作思路： 操作思路：
（1）设置动画场景大小为“773×246”像素， ）设置动画场景大小为“ × ”像素， 帧频为“ ” 帧频为“20”fps。 。 （2）导入图像，制作按钮效果和线条动画。 ）导入图像，制作按钮效果和线条动画。 （3）添加脚本实现按钮功能。 ）添加脚本实现按钮功能。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2 制作过程
本节将详细介绍东方雷神网站的制作。 本节将详细介绍东方雷神网站的制作。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2 制作过程
16.2.1 16.2.2 16.2.3 16.2.4 设计主页 制作Banner动画 制作 动画 建立站点 布局主页
16.2.4 布局主页
案例目标
下面将对主页进行布局，主要巩固插入表格、 下面将对主页进行布局，主要巩固插入表格、 图像，以及如何实施对主页的控制等操作。 图像，以及如何实施对主页的控制等操作。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.4 布局主页
具体要求
掌握主页效果的分析制作 掌握内页的制作方法 掌握网页动画的制作方法
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
本课导读
本课将根据网站的制作流程， 本课将根据网站的制作流程，应用前面学 习的知识制作一个完整的网站——东方雷 习的知识制作一个完整的网站 东方雷 神企业网站，巩固学习成果， 神企业网站，巩固学习成果，让读者对网 站建立有一个完整的概念。 站建立有一个完整的概念。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
3. Banner动画 动画
与设计效果有关联的动画制作， 与设计效果有关联的动画制作，是从设计 的效果中提取相关的元素进行制作的， 的效果中提取相关的元素进行制作的，而 不是单独完成的。 不是单独完成的。 动画大小是根据设计效果图中要制作动画 的区域来确定的。 的区域来确定的。动画中的内容可以在 Flash中单独制作。 中单独制作。 中单独制作
16.3.1 设计内页效果 设计内页效果1
操作思路： 操作思路：
在Fireworks中，将“index.png”文件另存为 中 ” “nei1.png”文件。 ”文件。 删除顶部导航栏下方左侧栏目的内容。 删除顶部导航栏下方左侧栏目的内容。 添加左侧内页导航标题和导航背景图形。 添加左侧内页导航标题和导航背景图形。 制作内页左侧导航按钮效果。 制作内页左侧导航按钮效果。 添加按钮文字及文字效果。 添加按钮文字及文字效果。
操作步骤请老师参照软件讲解
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.3 建立站点
案例目标
站点是用来存放原始文件、 站点是用来存放原始文件 、 素材及引导路 径的，要建立一个网站必须先创建站点。 径的，要建立一个网站必须先创建站点。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
第16课 建立企业网站 课
本课要点 具体要求 本课导读 上机练习
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
本课要点
东方雷神网站的制作分析 制作东方雷神网站的过程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.1 设计主页
操作思路： 操作思路：
程序， （1）启动 ）启动Fireworks程序，新建一个大小为 程序 “778×900”像素的文档。 × ”像素的文档。 （2）新建矩形并填充渐变效果。 ）新建矩形并填充渐变效果。 （3）导入素材图像，添加页面修饰元素， ）导入素材图像，添加页面修饰元素， 添加文本并进行编辑。 添加文本并进行编辑。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.1 制作分析
本节将根据第1课介绍的网站制作流程对 本节将根据第 课介绍的网站制作流程对 东方雷神网站进行详细分析并进行制作。 东方雷神网站进行详细分析并进行制作。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 主页效果
Banner动画内容的确定：设计界面中的 动画内容的确定： 动画内容的确定 Banner动画部分，在企业类网站中，Banner 动画部分， 动画部分 在企业类网站中， 动画主要用于体现企业的形象， 动画主要用于体现企业的形象，也可以是企业 产品图的展示。 产品图的展示。 页脚内容： 页脚内容：一个完整的网页少不了要给访问者 提供联系的方式，所以企业的地址、电话、 提供联系的方式，所以企业的地址、电话、传 邮件地址、所有权（可有）， ），以及其他的 真、邮件地址、所有权（可有），以及其他的 附加说明等内容通常都放置于页脚部分。 附加说明等内容通常都放置于页脚部分。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 主页效果
主页效果主要分为以下几部分。 主页效果主要分为以下几部分。
导航条的确定： 导航条的确定：主页效果是基于东方雷神网站的 流程图进行构思的。流程拓扑图中包含了4大部分 大部分， 流程图进行构思的。流程拓扑图中包含了 大部分， 部分可看作一个网站的导航， 这4部分可看作一个网站的导航，因此在设计界面 部分可看作一个网站的导航 效果（含内页效果） 将其作为导航条处理。 效果（含内页效果）时，将其作为导航条处理。 主体内容的确定： 主体内容的确定：制作主页的目的是能够将网站 中的主体内容和精华部分快速地传递给访问者， 中的主体内容和精华部分快速地传递给访问者， 让他们对该网站有一个大致的了解。 让他们对该网站有一个大致的了解。设计者也可 以将公司的主要信息列举在首页当中。 以将公司的主要信息列举在首页当中。
操作思路 ：
节新建的HTML文档保存在 （1）将16.2.3节新建的 ） 节新建的 文档保存在 “dfls”站点中并更名为“index.html”。 ”站点中并更名为“ ” 样式。 （2）添加 ）添加CSS样式。 样式 （3）插入表单及图像，布局主页。 ）插入表单及图像，布局主页。
操作步骤请老师参照软件讲解
下面继续制作内页效果，如下图所示。 下面继续制作内页效果，如下图所示。为 了保持网站风格， 了保持网站风格，常根据主页效果来设计 内页效果。 内页效果。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.3.1 设计内页效果 设计内页效果1
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
2. 内页效果
内页效果是基于主页效果来完成的。 内页效果是基于主页效果来完成的。内页 效果不能像主页效果那样分栏目， 效果不能像主页效果那样分栏目，因为它 主要是体现一个导航按钮的内容。 主要是体现一个导航按钮的内容。因此在 设计时要留下大量空间放置导航按钮对应 的内容。本例中就含有子导航。因此，在 的内容。本例中就含有子导航。因此， 主页效果的基础上， 主页效果的基础上，将下部分重新进行了 划分，分为子导航部分和内容部分。 划分，分为子导航部分和内容部分。这样 就形成了本网站所有内页的结构。 就形成了本网站所有内页的结构。
16.1 制作分析
16.1.1 实例效果预览 16.1.2 实例制作分析
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16Hale Waihona Puke Baidu1.1 实例效果预览
下面展示东方雷神网站的实例效果图， 下面展示东方雷神网站的实例效果图，其 左上所示为设计的主页面分布效果图， 中，左上所示为设计的主页面分布效果图， 右上所示为完成后的主页预览效果， 右上所示为完成后的主页预览效果，中下 所示为Banner动画效果。 所示为 动画效果。 动画效果
设计完成后，需要将在 设计完成后，需要将在Dreamweaver中无法完 中无法完 成的效果用图形处理软件制作并切片， 成的效果用图形处理软件制作并切片，以插入 图像的方式插入到网页，同时便于在Flash中制 图像的方式插入到网页，同时便于在 中制 作动画时调用。 作动画时调用。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.3.1 设计内页效果 设计内页效果1
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.1 设计主页
案例目标
本节将制作东方雷神网站主页效果， 本节将制作东方雷神网站主页效果，主要巩 固在Fireworks中制作图像的方法。 中制作图像的方法。 固在 中制作图像的方法
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
操作步骤请老师参照软件讲解
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.2.2 制作 制作Banner动画 动画
案例目标
下面制作Banner动画和导航按钮，主要巩固 动画和导航按钮， 下面制作 动画和导航按钮 Flash中帧的使用 、 动画的制作及按钮功能 中帧的使用、 中帧的使用 的添加。 的添加。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.3 上机练习
16.3.1 设计内页效果 设计内页效果1 16.3.2 设计内页效果2 设计内页效果
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
16.3.1 设计内页效果 设计内页效果1