《网页设计的准则》PPT课件

《《网页设计的准则》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5节网页设计的准则5.1网页的基本元素5.2网页布局5.3配色原则第5节网页设计的准则确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下方面组织内容来吸引浏览者浏览网站。1．站点结构图2．导航栏3．精美的图片4．引人入胜的内容5．反馈表6．联系方式页面7．搜索工具8．常见问题解答网页设计的准则5.1.1网页的基本元素网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。常见的网页元素包括文本、图片、超链接、表格、导航栏、动

2、画和交互表单。1．文本2．图片和动画3．声音和视频4．超链接5．导航栏6．表格7．表单8．其他常见元素网页的设计5.2网页布局网页是网站构成的基本元素。当浏览者移动鼠标，在网海中遨游，一个个精彩的网页会呈现在用户面前。网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素—网页的布局。1．网页布局的基本概念对于初学者，最好应先了解网页布局的基本概念。（1）页面尺寸一般在分辨率为1024*768像素的情况下，页面的显示尺寸为1007*600像素；在分辨率为800*600像素的

3、情况下，页面的显示尺寸为780*428像素；而在分辨率为640*480像素的情况下，页面的显示尺寸为620*311像素。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。但应当注意的是，除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。网页的设计5.2网页布局（2）整体造型造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合

4、，如矩形、圆形、三角形、菱形等。虽然不同形状代表不同意义，但目前的网页制作大多结合多种图形加以设计，只是其中某一种图形的构图比例可能占得多一些。网页的设计5.2网页布局2．网页布局的一般步骤（1）构思根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓就行。当然也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。（2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。要注意重点突出，把网站的标志、广告条、菜单放在最突出、最醒目的位置，

5、然后再考虑其他元素的放置。（3）细化在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。网页的设计5.2网页布局3．网页排版布局的原则上面简要介绍了设计网页布局的步骤，而事实上，在构思和设计的过程中，设计者还必须要掌握以下5项原则。（1）平衡性（2）对称性（3）对比性（4）疏密度（5）比例网页的设计5.2网页布局4．网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。（

6、1）“国”字型布局“国”字型也可以称为“同”字型，是一些大型网站经常使用的类型。这种布局最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。网页的设计5.2网页布局（2）拐角型布局拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在这种布局中，左侧一般是导航链

7、接。网页的设计（3）标题正文型布局标题正文型布局的最上面是标题或类似的一些东西，下面一般是正文，例如，一些文章页面或注册页面等就属于这种类型。（4）左右框架型布局采用左右框架型布局的网页分为左、右两部分，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。大部分大型论坛和网页教程都使用这种布局，有一些个人网站和企业网站也喜欢采用这种布局。（5）上下框架型布局上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分。网页的设计5.2网页布局5．网页布局的常用技术（1）CSS（层叠样式表）布局

8、CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。目前，CSS运用的好坏是判断一个网站优秀与否的关键。（2）表格布局表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。（3）框架布