网页美工设计 第3章 网页布局设计.pptxVIP

;;;;;;;;;;;图3-6 对称型网页布局;;;;;;;;;;;;;;;;;;;网页设计公司的设计师小杨接到一家电子产品销售公司网站的设计项目，该公司的项目负责人说：“我公司是一家私营企业，主要从事电子产品的代销、批发等工作。现需要制作一个企业网站，主页内容包括首页、新品上市、产品展示、热卖配件几个主要导航项。此外，还需加入登陆、购物车、收藏、评论等功能。要求网站页面干净大气，分类清晰，使消费者能够轻松地找到所需信息。” 图3-25所示为小杨根据客户描述规划的网站首页基本布局图。该布局图主要由图像、文字、浮动导航几个色块组合而成，简洁明了地展示了网页的基本结构和图文比例，并且直观地表现了Logo、导航栏、Banner、主体内容和页尾版块的位置。;在设计时，小杨将顶部导航栏与网站Banner的高度之和设定为950像素，使2个版块组成约一屏的高度，目的是让浏览者感受到Banner带来的强大视觉冲击；然后将新品展示版块与热卖展示版块依次排列，并控制各版块的间距，给人规整、简洁的感觉，便于浏览者挑选商品；最后添加一个资讯版块，用来放置与行业和本企业相关的咨询。此外，右侧的浮动导航中包括登陆、购物车、收藏、评论等功能，既保证了页首导航栏的简洁，又能始终为浏览者提供导航服务。 根据网页的布局结构，小杨结合该企业的商业模式和企业性质，对各版块进行设计和制作，最终完成的网页效果如图3-26所示。;;;