商务网页第23课.pptx

第6章 商务网页制作实战 商务网页制作是一项综合性的工作，设计与制作过程中，涉及美术、音乐、计算机等方面的知识，应当因地制宜制定好工作步骤。 6.1.1 图像准备与网页图像制作 按照网页宣传的产品准备图像制作元素，包括产品、道具、模特、摄像师、摄像场所等，精心拍照，选取合适的照片进行编辑处理，适合网站上使用。 6.1.2 首页规划布局与配色 网页布局，首先应当考虑网站的主要功能，根据这些功能先进行页面布局；其次是根据营销的特点和产品特点，对网页布局进行优化，并确定网页配色。 中小商务网站因营销的产品较少，更应当注意图像在布局中的作用。并根据图像的颜色确定网页配色，保证背景图像、产品图像、网页配色的视觉效果比较协调。 通常，生产型企业的网站，其网站营销的产品相对较少，很少采用复杂的页面布局，保证页面重点突出、简洁清爽。这类网站的首页通常按照从上至下的顺序分为页眉、导航栏、Banner、主题内容、页脚5个基本的区域。也可以根据产品的特点对这些区域的大小、位置进行合理调整。这种典型五层区域布局如图6.1所示。 其中，各个区域还可根据网站建设内容和排版的需要细分为若干小的区域；页眉区域导航栏区也可以合并，Banner区、主题内容区和页脚区也可以合并等。 下面我们以“云之雷科技有限公司”的网站为例，确定该网站的布局及配色。 1．页面布局 该公司产品较少，仅有两大系列6款设备，建设网站的主要目的是宣传公司产品，提供服务网络的发布情况及联系方式，为产品营销创造好的氛围。综合考虑，选择典型的五层区域布局方案。 （1）页眉区：包括公司Logo、公司名称、语言选择、收藏本站4个元素。 （2）Banner区：放置横幅广告，3个广告交替显示，具有很好的视觉效果。 （3）导航栏区：设置首页、公司资讯、笔记本电脑系列、台式机系列、技术优势、荣誉资质、服务网络7个主栏目，并采用视角协调的横向排列方式。 （4）主题内容区：主题内容区是公司产品展示的主窗口，应当重点设计好主题内容区的展示内容。因为公司是新成立的高科技公司，资讯量比较多，故设立最新资讯专栏，展示公司发展的最新资讯；同时，公司产品技术先进，应设立王牌产品展示专栏。并按照美观的格局进行分隔（见图6.2）。 （5）页脚区： 设立3行信息。第1行为友情链接，有人民邮电出版社、人邮学院、人邮教育社区的链接；第2行为联络方式，有公司名称、地址、电话、邮箱；第3行为网站备案登记信息。 以上5层显示区域划分后，应当基于框架技术制作主页（首页），并分别制作5个框架对应的网页。 完成首页布局后，应当对首页各个区域的尺寸精确测量好，并记录下来，方便后续参考使用。 2．网页配色与字体字号 因为本公司生产的是计算机产品，需要营造科技感，故背景颜色以淡灰蓝色为主色调。文字以黑色为主，灰色、白色为辅。 页眉Logo以蓝色为主色调，公司名称是以深蓝色为主色调的文字图像，使用较大的字体突出公司名称的显示效果。 菜单栏为深灰色，字体为白色，字的大小为5的黑体字。 Banner的3幅广告分别以黑灰色、绿色、深红色为主颜色，代表商务、节能、性能3个鲜明的技术特点，烘托产品。 主题内容区资讯类的文字为字的大小为5的黑体字，产品展示区的文字颜色与主题图片的颜色保持协调，画龙点睛的字应当以大字体显示，突出效果。 页脚区：字的大小为5的黑体字，黑色。 6.1.3 首页主要构件设计制作 首页的主要构件有以下几个：Logo、公司名称的文字图像、导航栏、Banner、浮动广告条等。 1．Logo制作 公司名称为云之雷科技有限公司，以闪电代表公司产品的特点，所以Logo选择闪电型元素，配色以蓝色为主。需要制作成水印透明格式的图片，制作的效果图如图6.3所示。 2．公司名称的文字图像制作 因为云之雷科技有限公司为非著名企业，不能简单以Logo代表企业名称，所以应当制作醒目的带公司名称的文字图像，以加深浏览者对公司的印象。需要制作成水印透明格式的图片，制作的效果图如图6.4所示。 3．Banner制作 Banner是公司最重要的广告区，应当把产品最靓丽的一面展现出来。该公司以商务、节能、性能为3大特色，故分别选择3种机型的代表图片加工制作，最后合成动画。为了保证Banner的效果，应由3～5个图像合成。 加工制作的3个Banner图片如图6.5、图6.6和图6.7所示，然后合成GIF动画。 4．制作展示图像 首页通常会有代表性商品的展示功能，或者配合营销方案，需要对具有代表性商品的图片进行再次筛选，选出几张适合在首页进行展示的，并根据整体布局要求和营销展示要求，将图像进一步裁切、美化，适合在网页上展示。 本例制作3张图片：一张是开学促进图片，一张是台式机的代表机型图片，还有一张是笔记本电脑的代表机型图片，制作效果图如图6.8、图6.9和