电子商务网页制作-项目5.pptx

DW电子商务网页制作项目五网页版式设计与布局项目目标? 学习网页版式设计的概念；? 了解有关网页造型和分辨率的知识；? 了解网页布局的原则和方法；? 学习使用表格进行网页布局。看一看——网页设计欣赏　　网页布局是指在浏览器空间里，依照建站目的和审美的规律，结合各种平面设计的具体特点，将信息内容和页面视觉元素加以组合编排。　第一步：打开IE浏览器，在地址栏中输入/。看一看——网页设计欣赏　这是一种典型的横向平铺结构，浏览者拖动鼠标向下滚动页面可以流畅地浏览页面。由于网站主要经营白色家电，故采用白色系作为网站主色调，利用不同灰度的浅灰色块将页面巧妙分栏，使信息组织更加清晰有条理。整个页面设计留白较多，空旷开阔的设计给人以高端大气、品质优良的感觉。浏览者在浏览网页时，一般首先看网页的上部中间位置，然后是上部左面、上部右面，最后看整个网页的下面，因此网页左上部和中上部是最佳视域，重要信息应安排在这个位置，例如购物车、账户信息、搜索引擎、导航条等放在整个网页的上部。看一看——网页设计欣赏　　第二步：在地址栏中输入看一看——网页设计欣赏　　首先会看到一个Flash动画的演示，然后正式进入主页。主页布局设计类似于一个家庭影院，让人仿佛置身于生活中常见的体育赛事电视转播情景中，画面比例接近黄金分割，十分协调美观。任意点击页面下方的链接，进入网站浏览。可以发现这里充满了灵动的Flash动画，引人入胜，满足了青少年为主的客户群的审美心理。看一看——网页设计欣赏　　第三步：在地址栏中输入看一看——网页设计欣赏　　这是一个典型的采用FLASH动画制作的封面型结构网站，页面表达的信息十分丰富，视觉效果一流。请点击导航栏上的链接图片任意浏览，可以看到站内各个页面保持了高度一致的风格，如图5-2所示。采用醒目的红色图标作为导航区，强烈的视觉对比形成了鲜明的视觉效果。简洁的页面布局、生动的FLASH动画，迎合了年轻消费者的审美心理。看一看——网页设计欣赏第四步：在地址栏中输入看一看——网页设计欣赏　　这是一个介绍江南古镇的旅游网站。主页设计采用了仿手机界面的形式，新颖别致。点击图标继续浏览，将会看到整个网站页面设计的无不透露着深厚的人文底蕴，独具江南水乡的魅力。页面布局疏密有度，即平常所说的“密不透风，疏可跑马”。页面并没有采用一种样式，而是适当留白，运用空格，改变行间距、字符间距等，制造一些变化的效果，给人留下深刻印象。看一看——网页设计欣赏活动小结　网页布局最基本的目的就是对信息内容进行分类，重点突出地放置信息，在此基础上形成网页的外观风格。在一些设计类网站中，经常可以看到优秀网页设计作品展示，这些作品着重体现的是设计的艺术性，但对于电子商务网站来说，艺术性绝不是第一位的，易用性、经济性、可维护性才是最终的目标。版式设计的含义　网页版式设计是将文字、图形图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。版式设计是技术和艺术的高度统一，在设计时要运用统一、对比、对称、均衡、节奏、韵律等形式原理，构造出和谐、流畅、自然的网页界面。分辨率与网页尺寸　　显示器的分辨率，是指在计算机屏幕的水平和垂直方向上，各含有多少像素，如分辨率是800×600的屏幕，在水平方向上有800个像素点，而垂直方向上有600个像素点。显示器的分辨率范围，取决于显示器和显卡的性能，常用的屏幕分辨率有以下几种：640×480、800×600、1024×768、1280×1024、1152×864。浏览者使用什么样的分辨率浏览，网页设计者是不可能知道的，所以在设计的时候必须考虑分辨率的问题。由于浏览器本身也会占去不少空间，所以显示在浏览器窗口中的网页尺寸就更小了。分辨率（像素×像素）网页尺寸（像素×像素）640×480620×311800×600780×4281024×7681007×6001280868分辨率与网页尺寸1024×768分辨率下的网页显示800×600分辨率下的网页显示　分辨率越高，网页尺寸越大。另外，浏览器的工具栏也是影响网页尺寸的原因，工具栏全部显示和工具栏全部关闭的情况下，网页的尺寸是不一样的。分辨率与网页尺寸　　为了给网页增加更多的内容，必须采用延长网页的办法，浏览者向下拖动网页，即可浏览下面的内容。然而过长的网页会导致过多的滚动，这会让浏览者眼花缭乱。因此，如果网页长度超过三屏，应该在网页中加入书签链接，使浏览者能够自如地在长网页中来回跳转。小贴士　　通常浏览者习惯使用纵向滚动条上下拖动网页，但不能忍受使用向滚动条左右拖动网页，左图所示的同时出现纵向和横向滚动条的情况，是应该尽量避免的。同时出现纵向滚动条和横向滚动条的网页显示网页布