教你如何建立公司网站

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