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