《商务网页第23课课件》由会员分享,可在线阅读,更多相关《商务网页第23课课件(13页珍藏版)》请在金锄头文库上搜索。
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所示。