电子商务网站建设和实践网页版面布局设计课件

1

网页版面布局设计

1

网页版面布局设计

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

全景式分散排列多张图片，看起来就像在瞭望台上看全景画，访问者可以自由、闲庭信步地参与进来。全景式布局全景式分散排列多张图片，看起来就像在瞭望包围式布局

包围式布局的基本思路是页面四周用色块或图案包围起来，以便产生一个被限定的世界。如果色块或图案是深重的颜色，则表示这个范围拒绝他人入侵，如果是浅色调，则表示这是一个柔和的世界。包围式布局包围式布局的基本思路是页面四周用色块或图包围式布局包围式布局对称式布局对称式布局的基本思路是以中心线为基准，左右对称，是一种格调高雅的安定型版式。对称式布局对称式布局的基本思路是以中心线为基准，左右对称，是电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件单侧对齐式布局单侧对齐式布局的基本思路是以左则对齐为基调，将右侧散开，一般用在追求理智和自由感适当的平衡场合，既暗示了页面的格调，也传达了自由的气氛。单侧对齐式布局单侧对齐式布局的基本思路是以左则对卫星式布局卫星式以指太阳为中心的卫星环绕型，传递出家庭的印象，让访问者沉浸在可以自由参与的开放感中。卫星式布局卫星式以指太阳为中心的卫星环绕型，传递出散开式布局散开式具有山水画般的自由和优雅，不同的国家，在散开式的构成设计上有不同特征，西方人讲究左右平衡，日本以追求典雅感为目的。散开式布局散开式具有山水画般的自由和优雅，不同的照片组合式布局一张照片单独看起来可能无趣，但在一组照片组合之后就可能产生了新的情趣，照片组合式与全景式共同创造出一种自发来去自由的轻松气氛。照片组合式布局一张照片单独看起来可能无趣，但在一组电子商务网站建设和实践网页版面布局设计课件照片组合式布局

电子商务网站建设与实践31照片组合式布局电子商务网站建设与实践31电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件

电子商务网站建设与实践40电子商务网站建设与实践40

电子商务网站建设与实践41电子商务网站建设与实践41

电子商务网站建设与实践42电子商务网站建设与实践42

电子商务网站建设与实践43电子商务网站建设与实践43电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件

电子商务网站建设与实践55电子商务网站建设与实践55作业：

电子商务网站建设与实践561、分小组进行企业网站设计，每3人一个小组。2、选择下列三个企业中的一个进行设计：

温州唐风宋雨服饰有限公司/路易诗兰服饰有限公司

浙江美福食品有限公司

温州亚得利鞋业有限公司/浙江画眉鸟鞋业有限公司3、要求：

（1）了解公司情况，确定网站基本定位

（2）画出网站功能结构图

（3）用photoshop做出网页效果图，每人设计一个页面，同一网站要求页面风格统一。作业：电子商务网站建设与实践561、分小组进行企业网站设

电子商务网站建设与实践57网站功能结构图示例电子商务网站建设与实践57网站功能结构图示例

电子商务网站建设与实践58企业网站风格与企业发展方向的统一电子商务网站建设与实践58企业网站风格与企业发展方向的统59Thank

you!59Thank

you!60

网页版面布局设计

1

网页版面布局设计

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

全景式分散排列多张图片，看起来就像在瞭望台上看全景画，访问者可以自由、闲庭信步地参与进来。全景式布局全景式分散排列多张图片，看起来就像在瞭望包围式布局

包围式布局的基本思路是页面四周用色块或图案包围起来，以便产生一个被限定的世界。如果色块或图案是深重的颜色，则表示这个范围拒绝他人入侵，如果是浅色调，则表示这是一个柔和的世界。包围式布局包围式布局的基本思路是页面四周用色块或图包围式布局包围式布局对称式布局对称式布局的基本思路是以中心线为基准，左右对称，是一种格调高雅的安定型版式。对称式布局对称式布局的基本思路是以中心线为基准，左右对称，是电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件单侧对齐式布局单侧对齐式布局的基本思路是以左则对齐为基调，将右侧散开，一般用在追求理智和自由感适当的平衡场合，既暗示了页面的格调，也传达了自由的气氛。单侧对齐式布局单侧对齐式布局的基本思路是以左则对卫星式布局卫星式以指太阳为中心的卫星环绕型，传递出家庭的印象，让访问者沉浸在可以自由参与的开放感中。卫星式布局卫星式以指太阳为中心的卫星环绕型，传递出散开式布局散开式具有山水画般的自由和优雅，不同的国家，在散开式的构成设计上有不同特征，西方人讲究左右平衡，日本以追求典雅感为目的。散开式布局散开式具有山水画般的自由和优雅，不同的照片组合式布局一张照片单独看起来可能无趣，但在一组照片组合之后就可能产生了新的情趣，照片组合式与全景式共同创造出一种自发来去自由的轻松气氛。照片组合式布局一张照片单独看起来可能无趣，但在一组电子商务网站建设和实践网页版面布局设计课件照片组合式布局

电子商务网站建设与实践90照片组合式布局电子商务网站建设与实践31电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件电子商务网站建设和实践网页版面布局设计课件

电子商务网站建设与实践99电子商务网站建设与实践40

电子商务网站建设与实践100电子商务网站建设与实践