Cha01 网页设计基础.ppt

本章主要介绍网页与网站的概念，详细介绍网站的分类，讲述了一般网站制作流程，还将介绍一些网页的风格，讲解网页的一些相关概念。 1.1 网站与网站的开发 1.2 网页与网页设计 1.3 网站规划设计 1.4 认识网页页面元素 1.5 网页版式与配色 1.6 设计网页图像元素 1.7 设计网页动画元素 1.8 思考与练习 1.1 网站与网站的开发 网站是发布在网络服务器上由一系列网页文件构成的，为访问者提供信息和服务的网页文件的集合。网页是网站的基本组成要素，一个大型网站可能含有数以百万计的网页，而一个小的企业网站或个人网站可能只有几个网页。上网用户可以通过网页浏览器或者其他浏览工具访问网页以获取网站的信息和服务。 网站与网页的区别就在于，网站是一个总体，而网页是个体。说访问某个网站，实际上是访问该网站的某些网页，包括网站首页也是一个网页。相应地，在一个统计周期内（通常24小时），所有用户访问某个网站的网页数量就是该网站在该统计日的访问量。 中国互联网络信息中心（CNNIC）在进行中国互联网络发展状况统计时对网站的定义为：网站是指有独立域名的Web站点，其中包括CN和通用顶级域名下的Web站点。独立域名指的是每个域名最多只对应一个网站【WWW+域名】。例如：对域名来说，它只有一个网站，而并非有、等多个网站，它们只被视为网站的不同频道。 版式设计是整个页面制作的关键。版式最常见的有海报型和表格型。 例如，表格型版式多见于学校网站，信息量大，结构清晰，但是艺术性较差，很容易千篇一律，如图1.13所示的北京大学新闻网页面。 1.5.1 页面版型的结构 这类网页一般可以在Fireworks中将整个网页用图像的形式【画】出来，然后将整个图像切片并输出成HTML文档和图片。最终每个切片都会被输出为一个图片文件，而且图片将自动被插入到输出的HTML文档中，并且用表格进行了布局的设定。 制作这种版式的网页需要完成以下5项工作。 网页的标志设计。 网页静态、动画广告条的设计。 制作网页效果图。 切片输出。 在Dreamweaver中做细微调整。 1.5.2 认识网页安全色 网页安全色是各种浏览器各种机器都可以无损失无偏差输出的色彩集合。 在设计网络作品的时候尽量使用网页安全色，这样不会让观看的人看到的效果与你制作时相差太多。否则一旦你的色彩文件与观看者不同可能会出现偏色很严重的情况。 1.5.3 基本配色的方法 既然这样，就要突出文字的地位，设计时可以在广告条的区域里设法通过颜色和大小来突出。这样文字就不必考虑与整个页面的协调问题，因为它是作为广告条的一个整体的一部分，假如前者已与整体协调，就同样是协调的，所以可以将文字做得醒目一些。这就可以采用动画的形式，也可以用闪动的方式，或者是一些渐变或消影的方式，这样既使页面显得丰富多彩，同时也让人浏览时不得不注意到广告条的内容。有时候能造成这样的效果：在用户主要关注上面的内容时不经意间看到一些吸引它的东西，这样就去点击了。达到这样的程度，设计者的目的就达到了。下面是一个网页的广告条，如图1.16所示。 网页按钮在页面中一般起强调或者修饰的作用。合适的按钮可以使页面更加生动丰富。网页按钮分为几种：一种是使用文本内容为主的按钮；一种是以图案为主的按钮；另外还有综合使用图案和文字的按钮。 以文字为主的按钮主要是用来完成一个明确的功能，例如连接到一个新的页面等。效果如图1.17所示。 以图案为主的按钮较为生动活泼，但是使用得不好能产生理解上的困难，无法达到预期的目的。效果如图1.18所示。 使用图文结合的按钮一般使用文字来指示按钮的作用，使用图案作为美化和修饰。效果如图1.19所示。 1.6.4 设计导航条 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说，网站中的导航栏在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。 导航栏一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航栏，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的折叠菜单，同时又在页面的底部设置了多种链接，这样便增强了网站的可访问性。当然，并不是导航栏在页面中出现的次数越多越好，而是要合理地运用，使页面达到总体的协调一致。下面是一个网页的顶部导航，如图1.20所示。 1.8 思考与练习 1.4.3 网页多媒体元素的分类 在多媒体