第12章构建IT类商务网站.pptVIP

? 2007 CAC教育机构 Corporation ? 2007 CAC教育机构 Corporation CAC职业(岗位)培训课程 * 网页设计实用教程 * 第 12章 构建IT类商务网站 重点提示； ♂在Photoshop中设计页面效果 ♂在Flash中编辑网页动画 ♂在Dreamweaver中编辑网页 * 构建IT类商务网站 1 实例分析 2　主要知识点 3　设计流程 4　在Photoshop中设计页面效果 在Flash CS3中编辑网页动画 在Dreamweaver CS3中编辑网页 * 实例分析 1 背景概述 2 实例简介 * 1 背景概述 IT网站是一个很大的类别，包括有软件、硬件、通讯、科技、IT社区等数个分支，每个分支均可以独立成为一个大类了，不过之所以把其放在一起介绍，统称为IT类，主要是考虑到各个类别之间通常是相辅相成的。 * 2 实例简介 本实例介绍了一个IT类商务网站“创想科技有限公司”的首页、内容制作过程，展现了IT网站的特点和优势。 * 主要知识点  本章所述的IT类商务网站是综合使用Photoshop CS3、 Flash CS3和 Dreamweaver CS3软件制作而成的。用到Photoshop CS3中的创建新组、油漆桶工具，对文字进行变形、渐变工具、描边样式，圆角矩形工具、切片工具等。在Flash 动画时用到的工具有属性面板、时间轴、补间动画、库面板、任意变形工具、矩形工具、颜料桶以及滤镜面板等。 在Dreamweaver CS3中制作网页时用到的工具有创建站点、利用表格布局网页、插入图像和Flash动画、输入和编辑文本、【属性】面板、添加友情链接等。 * 设计流程 作为IT商务网站，一般要求有用户登录面板和商品展示等具有商务特色的部分，制作网站的具体步骤如下： 步骤1：创建站点。先要在Dreamweaver CS3中建立一个站点进行管理。 步骤2：在Photoshop CS3中设计页面整体效果。设计页面顶部显示部分、制作导航栏和Banner、设计用户登录面板、设计商品链接面板、设计新闻面板和公告栏面板、制作页面底部效果等，并处理网站中需要的图片。 步骤3：在Flash CS3中编辑动画。用一些商品的图片作为元件，在Flash CS3中设计图片动画展示效果和制作Banner动画。 步骤4：在Dreamweaver CS3中编辑网页。在Dreamweaver CS3网页编辑器中利用表格布局网页、添加图片和文字、创建友情链接等内容，以完成网站的制作。 * 在Photoshop中设计页面效果 1 设计页面顶部显示部分 2 设置banner和导航栏效果图 3 设计用户登录面板 4 设置商品链接面板 5 设计页面中间部分 6 设计公告栏面板 7 制作页面底部效果 8 对图片进行裁剪 * 设置banner和导航栏效果图 网站中的主要链接是通过导航条体现出来的，所以制作导航条就显得非常重要，本实例利用Photoshop CS3中各种工具来制作一个网页导航条。创想科技公司网站中Banner条是在Flash CS3中制作的，这里只是做一个简单的渐变背景。 * 设计页面中间部分 IT网站页面中部包括新闻中心模块和友情链接模块，使用暗黄色作为背景，使用明亮的蓝色作为栏目，这样可以是网站看起来比较醒目和柔和。 * 公告栏面板主要用来公布公司的最新促销信息和新闻资讯，放置在网站的右侧醒目位置。本章制作的公告栏面板与左边的用户登录面板相对称，用的颜色大体上是一样的。 * 在Flash CS3中编辑网页动画 1 在Flash CS3中设计Banner动画 2 设计图片动画展示效果 * 设计图片动画展示效果 在IT商务网站中对最新商品的展示是吸引浏览者浏览网站的主要手段，用一些商品的图片作为元件，制作出图片动画展示效果，可以吸引浏览者的注意。 * 在Dreamweaver CS3中编辑网页 1 添加Logo与顶部导航 2 添加Flash动画 3 添加图片与文字 4 添加友情链接 5 添加其他链接和栏目 * 添加Logo与顶部导航 在Dreamweaver CS3主窗口中先创建一个站点，再新建一个网页文档并设置页面属性，将Logo与顶部导航部分进行链接和编辑。 * 添加Flash动画 Flash动画的添加为网页增添了活力，被广泛地用于网页页面。 * 添加图片与文字 文字和图片是网页中不可缺少的页面元素，一个优秀网站通常是图文并茂的，本章制作的IT商务也不例外。 * 添加友情链接 网站友情链接是网站推广的一个重要手段，友情链接的质量和数量直接影响搜索引擎对网站权重的衡量。友情链接主要能够为