第3章网页设计.pptVIP

网站规划与网页设计 电子工业出版社同名教材 配套电子教案 2009.9 * * 3.1 网页设计的准则 3.2 常见网页设计工具 第3章 网页设计 确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下方面组织内容来吸引浏览者浏览网站。 1．站点结构图 2．导航栏 3．精美的图片 4．引人入胜的内容 5．反馈表 6．联系方式页面 7．有哪些信誉好的足球投注网站工具 8．常见问题解答 3.1 网页设计的准则 3.1.1 网页的基本元素 网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。常见的网页元素包括文本、图片、超链接、表格、导航栏、动画和交互表单。 1．文本 2．图片和动画 3．声音和视频 4．超链接 5．导航栏 6．表格 7．表单 8．其他常见元素 网页的设计 3.1.2 网页布局 网页是网站构成的基本元素。当浏览者移动鼠标，在网海中遨游，一个个精彩的网页会呈现在用户面前。网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素—网页的布局。 1．网页布局的基本概念 对于初学者，最好应先了解网页布局的基本概念。 （1）页面尺寸 一般在分辨率为1024*768像素的情况下，页面的显示尺寸为1007*600像素；在分辨率为800*600像素的情况下，页面的显示尺寸为780*428像素；而在分辨率为640*480像素的情况下，页面的显示尺寸为620*311像素。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。但应当注意的是，除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。 网页的设计 3.1.2 网页布局 （2）整体造型 造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆形、三角形、菱形等。 虽然不同形状代表不同意义，但目前的网页制作大多结合多种图形加以设计，只是其中某一种图形的构图比例可能占得多一些。 网页的设计 3.1.2 网页布局 2．网页布局的一般步骤 （1）构思 根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓就行。当然也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。 （2）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。要注意重点突出，把网站的标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其他元素的放置。 （3）细化 在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。 网页的设计 3.1.2 网页布局 3．网页排版布局的原则 上面简要介绍了设计网页布局的步骤，而事实上，在构思和设计的过程中，设计者还必须要掌握以下5项原则。 （1）平衡性 （2）对称性 （3）对比性 （4）疏密度 （5）比例 网页的设计 3.1.2 网页布局 4．网页布局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。 （1）“国”字型布局 “国”字型也可以称为“同”字型，是一些大型网站经常使用的类型。这种布局最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。 网页的设计 3.1.2 网页布局 （2）拐角型布局 拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在