第2章-网页设计中的布局基础.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,2,章 网页设计中的布局基础,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网站设计原理与实战,网页功能与形态的比较,网页设计是由一种设计语言来体现的，此种语言在网页设计中具有十分重要的作用。因此，要求设计师灵活处理好网页功能性与形态性之间的关系。,与偏重于网页的功能性和目的性的设计相比较而言，仅仅重视形态的设计只能被称为艺术家的创作作品，然而只注重网页功能的设计则又会缺乏审美性。,网页设计中视觉空间的点、线、面,网页设计是依靠视觉来传递信息的。因此，网页设计在开始寻求表现手法之前，首先要找到构成页面的种种不同的空间感觉。构成网站页面视觉空间的基本要素有点、线和面三要素，构成页面要素相互之间的组成关系，同文章与单词的关系相似。,网页设计中视觉空间的点、线、面,网页设计中的点,点是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。,网页设计中的线,网页设计中也可以通过“线”元素的视觉构成来表达类似平稳、不平稳、条理、圆润等种种联想。,网页设计中的面,因为面具有面积和质量，所以“面”是有形的。在点、线、面三元素中，面占据空间的位置最多，所以相对于点和线的视觉冲击力，面的视觉冲击力更强烈。,网页设计中由点、线、面组成的基本几何图形,在进行网页视觉设计时，很多时候设计师使用的是由点、线、面组成的几何图形来突出体现设计的创意以及网页的空间感。,大众化与个性化的网页视觉布局设计,大众化网页视觉布局设计,在网页设计中，大众化的网页布局设计是比较常用的。它注重文本信息的快速传达，以及方便用户熟练地使用网站,个性化网页视觉布局设计,在进行网页页面设计时，为了避免页面的单一性与呆板性，网页设计师都在寻求个性化的网页视觉布局设计，独特的有创意的个性化网页布局设计不仅可以增加页面的新颖感与趣味感,网页布局设计中的实验形态,实验形态的网页布局结构与其他的网页视觉布局形态不同，它不注重功能性的表现，而是将重点放在网页设计的创意性、独特性、新颖性上，追求前卫、新异的网页页面设计。,优秀网页的布局结构,网页布局结构的标准,网页布局结构的标准是信息架构，信息架构是指依据最普遍、最常见的原则和标准对网页界面中的内容进行分类整理、确立标记体系和导航系统、实现网站内容的结构化，从而便于浏览者更加方便、迅速地找到需要的信息。,网页布局设计中的相关元素,显示器的大小和分辨率的高低决定了网页显示页面的尺寸，也就是说网页的最大局限性在于页面显示无法突破显示器的范围。,网页的布局类型,网页设计中的“布局”要素是决定网页整体视觉感受的比较重要的环节。,网页布局的基本方法,网页布局的设计,网站页面的布局并不是说将页面中的元素在网页中随便的排列，网页布局的设计是一个网站页面展现其美观、实用的最重要的方法。,网页布局的构成原则,网页布局的构成原则包括协调、一致、流动、均衡、强调等。,网页布局的特征,在网页布局设计中，需要考虑到用户的体验度，是否能够准确、快捷地传达信息，另外还要考虑到网页界面是否具有视觉上的美感和结构形态的设计是否合理等因素，不但要突出各个构成元素的特性，还要兼顾网页整体的视觉效果。,网站页面的布局方式,左侧的页面布局,左侧的页面布局是指将页面中的内容居左排列，其以页面的左侧位置为标准，布局使用的基本框架为,1024768,像素的分辨率。,水平居中的页面布局,水平居中的页面布局是指以页面的水平位置为标准，在页面的中间位置对内容进行排列，这样设计出来的网页作品非常具有均衡感。,水平和垂直居中的页面布局,水平和垂直居中的页面布局是指将页面的横向和纵向设计成,100%,的布局框架，使得页面中的内容不管在任何大小的分辨率下都在浏览器的正中间显示。,满屏的页面布局,满屏的页面布局是指将页面的横向和纵向的大小不使用固定的像素值进行设置，而是使用相对的百分比值进行布局设置。,分割方式的页面布局,在进行网页布局设计时，首先需要通过页面的分割方向和布局方式将网页的基本格式确定下来，再在其基础上进行设计和制作。,课堂练习,设计美食饮品网站页面,本案例设计一个美食饮品网站页面，使用绿色作为页面的主色调，清新的绿色和天空的湛蓝相映衬，表现出自然、健康，还运用了一些外部笔刷的特效来增加画面的整体效果，给人靓丽、清新的感觉，下面我们来解析本案例的具体制作方法。,课后练习,设计咖啡馆网站页面,本案例设计咖啡馆网站页面，运用与咖啡色作为页面的主色调，契合了网站的主题内容，同时能够给人一种温暖、舒适的感受，再搭配与咖啡相关的素材图像，整个页面给人舒适、惬意、自然的感觉，下面一起来完成咖啡网站页面的设计。,