Dreamweaver-Flash-Fireworks网页制作培训教程第16课.ppt

1、第16课 建立浪度沙发网站,本课要点 具体要求 本课导读 上机练习,本课要点,浪度沙发网站的制作分析 制作浪度沙发网站的过程,具体要求,掌握主页的制作分析方法 掌握内页的制作方法 掌握网页动画的制作方法,本课导读,本课将根据网站的制作流程，应用前面学习的知识制作一个完整的网站浪度沙发网站，从而巩固学习成果，让读者对网站建设有一个完整的概念。,16.1 制作分析,本节将根据第1课中介绍的网站制作流程对浪度沙发网站进行详细分析和制作，由“实例效果预览”和“实例制作分析”两部分构成。,16.1 制作分析,16.1.1 实例效果预览 16.1.2 实例制作分析,16.1.1 实例效果预览,下面展示浪度

2、沙发网站的实例效果图，分别是设计的主页效果、完成后的主页预览效果和banner动画效果,16.1.1 实例效果预览,16.1.2 实例制作分析,1. 主页效果 2. 内页效果 3. banner动画 4. 布局页面,1. 主页效果,主页效果的设计主要分为以下几部分。 导航条的确定：主页效果是基于浪度沙发网站的流程图进行构思的。流程拓扑图中包含了4大部分，这4部分可看做一个网站的导航，因此在设计界面效果（包括内页效果）时将其作为导航条处理。,1. 主页效果,主体内容的确定：制作主页的目的是将网站中的主体内容和精华部分快速地展示给访问者，让他们对该网站有一个大致的了解，因此，通过运用栏目分类（“浪

3、度快讯”、“企业理念”、“企业简介”、“企业荣誉”和“产品展示”）的方式将浪度沙发网站的主体内容体现出来，同时增加了“管理员入口”和“友情链接”栏目。,1. 主页效果,banner内容的确定：设计界面中的banner部分，在企业类网站中主要用于体现企业的形象，也可以是企业产品图的展示。 页脚内容：一个完整的网页少不了给访问者提供联系方式，所以企业的地址、电话、传真、邮件地址、所有权（可选）或其他附加说明都放置于地址栏中。,1. 主页效果,主色彩的定位：网页一般以客户提供的资料（如宣传类资料和标志等）的色彩作为主色彩，因为这些都是成型的东西，客户已认可，如果采用这些资料的色彩来作为主色，客户认可

4、的程度会比较大。本例中的主色是通过浪度沙发的图像来确定的。当然，客户也会提出以哪些色彩作为主色，这时可根据客户的需求而确定。,1. 主页效果,设计完成后，需要将在Dreamweaver中无法完成的效果用图形处理软件制作并切片，以插入图像的方式插入到网页中，这样也便于在Flash中制作动画时调用。,2. 内页效果,内页效果是基于主页效果来设计的。内页效果不能像主页效果那样分栏，因为它主要用于体现一个导航按钮的内容。因此，在设计时要留下大量空间来放置导航按钮对应的内容。本网站中含有子导航，因此将主页效果的下部分重新进行了划分，分为子导航部分和内容部分，这样也形成了本网站所有内页的结构。,3. ba

5、nner动画,与设计效果有关联的动画制作，是从设计效果中提取出来的相关元素的制作，而不是单独完成的。 动画的大小是根据设计效果图中要制作动画的区域来确定的。动画中的内容可以在Flash中单独添加。,4. 布局页面,无论主页，还是内页，其布局方式都应该相同。本例中通过表格来规定网页的大小和定位网页元素。浪度沙发网站的大小为774800像素，因此添加的表格的大小以该大小来确定。再通过嵌套表格的方式将网页图像、动画及文本放置于需要的地方，具体操作请参见16.2.4节。,16.2 制作过程,本节将通过详细的步骤来介绍浪度沙发网站的制作过程。,16.2 制作过程,16.2.1 设计主页效果 16.2.2

6、 制作banner动画 16.2.3 建立站点 16.2.4 对主页进行布局,16.2.1 设计主页效果,案例目标 本节将制作浪度沙发网站的主页，主要练习在Fireworks中制作图像效果。,16.2.1 设计主页效果,操作思路： （1）启动Fireworks程序，新建一个大小为774800像素的文档。 （2）新建矩形并填充渐变效果。 （3）导入素材图片，添加文本并进行编辑。 操作步骤请老师参照软件讲解,16.2.2 制作banner动画,案例目标 本节将制作banner变换效果，主要练习Flash中帧的使用和动画的制作。,16.2.2 制作banner动画,操作思路： （1）设置动画场景大小

7、为774229像素，帧频为20fps。 （2）导入图像并打散。 （3）绘制一个与banner大小一致的黑色矩形框。 操作步骤请老师参照软件讲解,16.2.3 建立站点,案例目标 站点是用来存放原始文件、素材及引导路径的，要建立一个网站，必须先创建站点。,16.2.4 对主页进行布局,案例目标 本节将对浪度沙发网站的主页进行布局，主要练习插入表格、图片及对主页实施控制等。,16.2.4 对主页进行布局,操作思路 （1）将16.2.3节新建的HTML文档保存在langdu站点中，并将其更名为index.html。 （2）将banner.swf文件拖到tu文件夹中，并添加CSS样式。 （3）插入表单

8、及图片对主页进行布局。 操作步骤请老师参照软件讲解,16.3 上机练习,16.3.1 设计内页效果 16.3.2 对简介页进行布局,16.3.1 设计内页效果,本练习将在下图所示的主页效果基础上设计内页效果。为了保持网站风格一致，常根据主页效果来设计内页效果。,16.3.1 设计内页效果,16.3.1 设计内页效果,操作思路： 在Fireworks中将“浪度界面.png”文件另存为nei.png。 在导航条上增加一项“返回主页”，并删除导航条下方的所有内容。,16.3.1 设计内页效果,导入“第16课素材tubiao.jpg”图片，并去除背景，以此作为内页标题图标。绘制“#C1C1C1”颜色的

9、矩形，添加“网格线4”纹理，分隔广告语与内页标题。,16.3.1 设计内页效果,在左侧通过导入按钮的方法制作子导航条，并在内页标题和左侧子导航条间用虚线分隔。 选择【修改】【组合路径】【联合】命令，用大小不等的圆或椭圆制作一个图形放置于页脚作为点缀。,16.3.1 设计内页效果,将导航条及导航条以下的对象重新切片，如下图所示，并导出到“第16课源文件langdutu”文件夹中。将子导航条导出为HTML文档形式。,16.3.1 设计内页效果,保存文件，浏览效果。,16.3.2 对简介页进行布局,本练习将对简介页进行布局，效果如下图所示，主要练习应用主页布局效果来对内页进行布局。,16.3.2 对简介页进行布局,16.3.2 对简介页进行布局,操作思路： 打开站点中的index.html文档，将其另存到web文件夹中，并重命名为jianjie.html。 修改导航条的源文件路径。调整热点位置后再给“返回主页”导航条元件添加一个热点并链接到index.html。,16.3.2 对简介页进行布局,删除导航条下方