第0章 网页配色.ppt

文档介绍：中国高等院校计算机基础教育课程体系规划教材
唐四薪编著
清华大学出版社
2009年11月
《基于Web标准的网页设计》
配套网站:http://ec.
第〇讲网页设计艺术
唐四薪
网页设计的基本问题
从艺术的角度看
网页设计属于平面设计的问题
布局的问题(三种布局方式)
配色的问题
从技术的角度看
运用html,css等解决网页布局和美观的问题
所以网页设计中很多技术问题都是为了使网页看起来美观
网页的布局
网页版面布局的方法
框架布局
将浏览器窗口分割成几部分,每部分放一个不同的网页(示例)
表格布局
将网页元素装填入表格内实现布局,表格相当于网页的骨架,因此表格布局的步骤是先画表格,再往表格里填内容。
DIV+CSS布局
用盒子布局,利用网页元素本身的盒子模型,通过盒子在页面上的排列和嵌套进行布局。
布局的含义
网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同,所以同一个页面的分辨率可能出现800*600像素,1024*768像素等。
布局,就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式,例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种:
常见网页的版式
1-3-1式
1-2-1式
艺术版式
1-3-1式
示例
Logo banner
导航条(Navigator)
Bottom(版权信息)
栏目1
栏目2
栏目3
用表格实现
用CSS布局实现
表格布局的原则
各栏目之间必须相对独立,方法是把每个栏目装在一个单独的表格中,这样修改一个栏目时不会对其他栏目产生影响
各栏目之间必须用占位表格(或CSS边界)留出一定的空隙
栏目采取纵列的形式排列
用CSS布局实现1-3-1布局
中间几列的盒子必须用一个大盒子包含起来,否则这几列无法实现居中