电子商务网站设计与开发
照片组合式布局
一张照片单独看 起来可能无趣，但在 一组照片组合之后就 可能产生了新的情趣 ，照片组合式与全景 式共同创造出一种自 发来去自由的轻松气 氛。
电子商务网站设计与开发
电子商务网站设计与开发
照片组合式布局
电子商务网站设计与开发
31
电子商务网站建设与实践
电子商务网站设计与开发
电子商务网站设计与开发
―星火网”首页的粗略布局图
电子商务网站设计与开发
最终定案
将粗略布局精细化，具体化。凭借智慧和经验， 多方联想，才能做出具有创意的布局。
电子商务网站设计与开发
―星火网”首页的最终定案图
电子商务网站设计与开发
网页版面布局的原则
（1）正常平衡––––亦称“匀称”，多指左右、 上下对照形式，主要强调秩序，能达到安定诚实 、信赖的效果。
电子商务网站设计与开发
卫星式布局
卫星式以指太阳 为中心的卫星环绕型 ，传递出家庭的印象 ，让访问者沉浸在可 以自由参与的开放感 中。
电子商务网站设计与开发
散开式布局
散开式具有山水画 般的自由和优雅，不同 的国家，在散开式的构 成设计上有不同特征， 西方人讲究左右平衡， 日本以追求典雅感为目 的。
左右对齐方 式满载着文字信 息，没有浪费空 间的感觉，是最 适合传递商业性 信息的样式。
电子商务网站设计与开发
全景式布局
全景式分散排列多张图片，看起来就像在瞭望台上看全景 画，访问者可以自由、闲庭信步地参与进来。
电子商务网站设计与开发
包围式布局
包围式布局的基本 思路是页面四周用色块 或图案包围起来，以便 产生一个被限定的世界 。如果色块或图案是深 重的颜色，则表示这个 范围拒绝他人入侵，如 果是浅色调，则表示这 是一个柔和的世界。
电子商务网站设计与开发
网页版面布局的原则
（5）空白––––空白有两种作用，一方面对其他 网站表示突出卓越，另一方面也表示网页品位的 优越感，这种表现方法对体现网页的格调十分有 效。
（6）尽量用图片解说––––此方法对不能用语言 说服、或用语言无法表达的情感，特别有效。图 片解说的内容，可以传达给浏览者更多的信息。
c
网页版面布局设计
1
网站内容的规划
目前，全世界的网站总数已经超过了6000 万个，如何使自己的网站能够在众多的网站中脱 颖而出，令人刮目相看，关键是提升网站的知名 度和访问率，而对网站内容进行详细的规划和注 重网络应用则是提高网站访问率的重要因素。从 最新的网络统计分析报告中得知，网站访问率的 78%来自于搜索引擎，而网站在搜索引擎中的 排名与网站的内容有很大的关系。
电子商务网站设计与开发
布局的草稿
电子商务网站设计与开发
粗略布局
在草稿的基础上将确定需要放置的功能模块 安排到页面上。遵循突出重点、平衡谐调的原则 ，将网站标志、主菜单等最重要的模块放在最显 眼、最突出的位置上，然后再考虑次要模块的排 放。 一般情况下，将网站的LOGO、导航条等素放 在屏幕左边显眼的位置上，访问者在浏览网页时 可以对网站内容一目了然。
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
（2）异常平衡––––即非对照形式，但也要平衡 和韵律，当然都是不均整的，此种布局能达到强 调性、不安性、高注目性的效果。
电子商务网站设计与开发
网页版面布局的原则
（3）对比––––所谓对比，不仅利用色彩、色调 等技巧来进行表现，在内容上也可涉及古与今、 新与旧、贫与富等对比。
（4）凝视––––所谓凝视是利用页面中人物视线 ，使浏览者仿照跟随的心理，以达到注视页面的 效果，一般多用明星凝视状。
电子商务网站设计与开发
网页版面布局的样式
就像传统的报刊杂志一样，我们可以将页面 看作一张报纸或一本杂志中的一页来进行排版布 局。设计版面时要把文字、图片、空白当作一个 整体来看待，采用平面分割的方式，调动全部面 积来构建这个版面。下面我们来探讨一下页面布 局的样式。
电子商务网站设计与开发
左右对齐方式布局
电子商务网站设计与开发
网页布局
以最适合浏览的方式将图片和文字摆放在页面的 不同位置。 网页布局的基本原理是共通的，只要领会要点， 就能够举一反三。
电子商务网站设计与开发
创作阶段——打草稿
新建的页面就像一张白纸，没有任何表格、 框架和约定俗成的东西，我们可以任意发挥自己 的想象力，把想到的“景象”画上去（建议用一 张白纸和一支铅笔，当然用图像处理软件 Fireworks MX等也可以）。这属于创作阶段 ，不讲究细腻工整，不必考虑细节功能，只以粗 略的线条勾画出创意的轮廓即可。尽可能多画几 张，最后选定一个满意的作为继续创作的脚本。
电子商务网站设计与开发
电子商务网站设计与开发
网页版面布局设计
版面指的是从浏览器看到的完整的一个页面（可 以包含框架和层）。 由于不同的浏览者所拥有的显示器的分辨率不一 致，所以在设计网页的时候要考虑到浏览者的实 际情况。目前常见的网页所采用的分辨率有： 640*480像素、800*600像素、1024*768 像素等。
电子商务网站设计与开发
企业机构网站的规划
企业机构网站是指以企业单位为主体而构建 的网站，其目的是为了利用网络宣传企业形象， 展示企业文化，推销企业产品，拓宽企业的营销 渠道。其最高层域名一般为“.com‖。 企业机构网站的内容一般从企业介绍、产品 展示、售后服务等方面来进行设计，参照若干企 业网站画出企业网站的内容结构图。
电子商务网站设计与开发
包围式布局
电子商务网站设计与开发
对称式布局
对称式布局 的基本思路 是以中心线 为基准，左 右对称，是 一种格调高 雅的安定型 版式。
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
电子商务网站设计与开发
单侧对齐式布局
单侧对齐式布局 的基本思路是以左则 对齐为基调，将右侧 散开，一般用在追求 理智和自由感适当的 平衡场合，既暗示了 页面的格调，也传达 了自由的气氛。