教你如何建立公司网站(ppt 86页)

（6）锁定图层，再新建图层2，用椭圆工具绘制一个椭 圆，去掉其填充部分。
（7）用 工具调整椭圆，使其与图层1的环形大小一 致，如右图所示。
（8）复制绘制的环形，新建图层3和图层4。
（9）分别在图层3和图层4中按【Ctrl+Shift+V】组合键粘 贴图形，用 工具调整环形，使其与图片中其他的环形重合， 然后用 工具将绘制的每个环形擦除一个小缺口，完成后的 效果如左图所示。
（2）选择[文件][导入]菜单命令，导入如图左所示的 图片。
（3）按【Ctrl+B】键打散图片，用 工具去掉图片中的 白色区域，如图右所示。
（4）用 工具擦除小球，再选取 工具，在“颜色” 栏的 中设置 工具的颜色，该颜色应与图片环形颜色相 同。
（5）用设置的项颜色填充绘制删除的小球部分的颜色， 完成效果如左图所示。
提高知识
在网页中添加外部链接。
重点知识
掌握主页图片的制作、图书放映及circle动 画的制作、主页制作、公司简介和图书介绍 页面的制作。
课堂讲解
➢实例目标 ➢制作分析
实例目标
本例将制作导向科技资讯机构网站的“公 司主页”、“公司简介”和“图书介绍”页 面，如图所示，并在各个页面间建立链接。 通过本例的练习将使读者了解如何应用 Fireworks处理图片、用Flash制作网页动画 和用Dreamweaver布局页面并创建页面间 的链接，从而掌握网站页面的制作方法。
（9）将光标定位到第3行中，在属性面板的“垂 直”下拉列表框中选择“底部”项。
（10）在“插入”栏的“媒体”选项卡中单击 按钮，打开“选择文件”对话框。
（11）在列表中选择格式为“.swf”的“movie”文 件，单击“确认”按钮将其插入页面中，如图所示。
（12）选取插入的Flash，在属性面板中设置“宽” 为“550像素”，“高”为“200像素”。
制作透明图片
（1）单击常用工具栏中的 新建按钮，打开“新 建文档”对话框，设置“宽度”为“100”，高度为 “26”。
（2）在“画布颜色”栏中选中“透明”单选项， 单击 按钮。
（3）选择“矢量”工具栏中的矩形，绘制一个 与画布大小一致的矩形。
（4）在属性面板中设置填充色为“无”。
（5）选择[文件] [导出]菜单命令，打开“导出” 对话框。
制作主页
（1）在“插入”栏的“布局”选项卡中选择“标准 视图”。
（2）单击 按钮插入1行1列的表格，将文件保存到 “my web”文件夹中，文件名为“index”。
（3）在编辑窗口上方的“标题”文本框中输入“公 司主页”。
（4）将光标定位到表格中，单击属性面板“背景”文 本框右侧的 图标，打开“选择图像源”对话框。
（11）新建图层6，用钢笔工具绘制一个如图所示的 图形。
（12）在属性面板中设置其透明度为“54%”，将其 缩小并放置于“导向科技资讯机构”的左上角，如图所 示。
（13）新建图层7，用“位图”工具栏中的矩形工具绘制一 个矩形，并用渐变工具填充“白-蓝”的渐变色。
（14）在层面板中拖动该层到透明图标上复制图层。用同样 的方法复制两个，将其分别缩小并放置于编辑区的左下角，如 图所示。
制作分析
在制作网页前，应先在“我的电脑”中新建 “dx-kj”文件夹，并在其下面新建“image”和 “my web”文件夹。“image”用于存放网页中 要用到的图片，“my web”用来存放制作的网页。 然后在Fireworks MX中制作主页图片、透明图片 和角边图片，在Flash MX中制作图书播放动画和 “circle”动画，在Dreamweaver MX中布局主页、 公司简介和图书介绍页面，最后在各页面间创建超 级链接。在本例的制作中，使用Dreamweaver制 作网站是重点，对其中的制作页面以及添加链接等 内容，读者应认真阅读并重点进行练习，以对其熟 练掌握。
（4）在“插入”栏的“常规”选项卡中单击 钮插入“biaoti”，如图所示。
（5）在第2行中插入一个1行2列的表格。 （6）设置右侧的单元格的颜色为“#FFFFCC”，并 输入“公司简介”的内容。 （7）在属性面板中设置“公司简介”的字号为“4”， 颜色为“#990066”，并单击加粗文本按钮。 （8）设置正文字体的大小为“3”，颜色为 “#990066”，完成效果如图所示。
（3）按【F11】键打开库面板，将导入的图片拖入库 中，并将图片转化为元件。
（4）选取所有图片，选择[修改][分配到层]菜单命令， 将元件分配到各个图层中，然后删除空图层。
（5）选取图层1-7中的第30帧，按【F6】键插入关键 帧。
（6）将各层中的图片向左移，使第1张图片移到场景 外，如图所示。
（7）在第60帧处插入关键帧，将“电脑打字”图片 移到图片列的最右侧。
（14）在两关键帧间创建移动动作。 （15）在图层2上单击鼠标右键，从弹出的快捷菜单中 选择“引导线”命令。 （16）双击图层5的图标，在打开的“图层属性”对话 框中选中 已引导单选项，使图层2和图层5建立引导关系。 （17）激活图层2，新建图层6，将小球元件拖入场景 并放置于图层3圆环缺口的一端。在第40帧处插入关键帧， 将小球移到缺口的另一端，并设置小球元件的色调。
（15）单击保存 按钮，打开“导出Flash播放器”对话框。
（16）在“选项”栏中选择 保护导入和 允许调试复选框， 在“JPEG品质”文本框中输入“100”，如图所示。
（17）单击确定 按钮导出影片，然后保存文件即可。
制作circle动画
（1）新建一个场景大小为“100×100”像素，背景色为 “#98CCFF”的文档。
（5）再绘制两个矩形，其高度为“1”，一个矩形的填 充色为黄色，另一个矩形的填充色为白色，如图所示。
（6）新建图层2，选择[文件][导入]菜单命令，导入 一本书的图片并放置于上图的右下角，如图所示。
（7）新建图层3，选择[文件] [导入]菜单命令，导入 “电脑打字”、“电脑基础与网络办公应用”、“公务 员电脑基础”、“电脑组网”和“五合一”的丛书封面， 并按如图所示进行排列。
（5）从“image”文件夹中选择“zuye”图片，如图所 示，单击“确认”按钮。
（6）在属性面板的“垂直”下拉列表框中选择 “顶部”选项。
（7）选取表格，在属性面板中设置“边框”为 “0”，在“对齐”下拉列表框中选择“居中对齐” 选项。
（8）在表格中插入3行1列的表格，在属性面板 中设置第1行的高度，使行线与黄线一致，第2行的 高度为两条横线间的距离，第3行的高度为“240”。
（12）保存文件为“movie”。该文件应保存在
Fireworks文件的同一目录中。
（13）选择[文件][导出影片]菜单命令，打开“导出影片” 对话框。
（14）在“保存在”下拉列表框中指定导出到的目录为 “image”，在“文件名”文本框中输入“movie”，在 “保存类型”下拉列表框中选择“.swf”选项，如图所示。
（2）在“宽度”文本框中输入“760”，在“高 度”文本框中输入“450”，并在其后的下拉列表框 中选择“像素”，“画布颜色”为白色如图所示， 单击 按钮。
（3）选取矢量工具面板中的 工具，在“颜色”工 具面板中设置颜色为“墨蓝色”。
（4）在编辑区中绘制一个矩形，选取矩形，在属性 面板中设置宽为“778”，高为“450”，并设置 “X=0”。
（15）用 文字工具输入公司地址和联系电话，如图所 示。并保存文件为“zuye”即可。
制作标题图片
（1）用裁剪工具选取横线以上的图片，在选框内 双击裁剪图片，并另存文件为“biaoti”。完成后的效果 如图所示。
（2）将“”文本移到公司名称的左下 角。
（3）复制“公司简介”，并均匀排列其他的文本和 圆点，将复制的“公司简介”修改为“公司主页” ， 最后保存该文件即可。
（8）新建图层4，在横线的上方输入“导向科技有限 责任公司”，在两横线之间输入“公司简介”、“图书 介绍”、“网上购物”、“意见箱”和“”，完成后的效果如图所示。
（9）新建图层5，用椭圆工具，绘制实心圆，在属性 面板的效果栏中按如图所示进行设置。
（10）完成后的效果如图所示。
（18）在两关键帧间创建移动动作。 （19）按第（15）~（16）步的方法在图层3和图层6间建 立引导关系。 （20）用同样的方法创建图层7，并在图层4和图层7间创 建引导关系，完成后的时间轴如图所示。
（21）将文件保存到“image”文件夹中，文件名为 “circle”。
（22）按【Ctrl+Enter】键测试动画效果。
第十八课 建立公司网站
➢本课要点 ➢课前导读 ➢课堂讲解 ➢上机实战 ➢习题
本课要点
➢用Fireworks制作图片 ➢用Flash制作网页动画 ➢用Dreamweaver布局 ➢在各网页中添加链接
课前导读
➢基础知识 ➢提高知识 ➢重点知识
基础知识
在Fireworks中制作透明图片、角边，建立 站点、利用图片及文本在网页间进行链接。
（3）将文件保存在“image”文 件夹中，文件名为“jiaobian”。
在Flash MX中制作网页中的动画
➢制作图书放映动画 ➢制作circle动画
制作图书放映动画
（1）新建一个Flash MX文档，设置场景大小为 “500×200”，背景色为“深蓝色”。
（2）导入“ck-104 ck-110”图片，并按如图所 示进行排列。
（17）将文件保存在“my web”文件夹中，文件名 为“Index”。
公司简介
（1）选择[文件][新建]菜单命令，新建一个 HTML文档。
（2）将文件保存到“my web”下，文件名为 “jianjie”。
（3）插入一个2行1列的表格，在属性面板中设 置表格的边框为“0”，在单元格的“垂直”下拉列 表框中选择“顶部”选项。
（10）激活图层1，新建图层5，用 工具和调色板绘制一 个径向渐变的黄色小球，并放置于一个环缺口的一端。