网页设计实用理论知识.ppt

Dreamweaver网页设计,第13章网页设计实用理论知识,学习目标了解网站的基本结构特性和网页的布局掌握如何给网站定位了解网站设计原则掌握网站建立步骤了解网站开发流程,【学习概述】,要制作出漂亮的网页，不仅要求掌握Dreamweaver软件，而且还要掌握一些关于网页设计的一些基本理论知识。本章内容包括：网站的主题和名称、网站的标志和横幅广告、网站的结构、网站的色彩、网页布局和网站的开发流程等内容。,教学内容13.1网站与网页的基本知识13.2网站的规划13.3网站的开发流程本章小结,返回总目录,13.1网站与网页的基本知识,网站的主题也就是网站的题材，是开始设计网站首先遇到的问题。网站主题要求小而精、要有自己的特色，对于个人网站爱好者来说，比如你喜欢计算机技术。你要设计个人网站就不能大而空的选择“计算机”，而应该选择计算机下面的分支，比如“网站设计”，即使这样，一个人制作出这样的网站还是很困难的，可以进一步细分，比如选择“Flash动画设计”作为自己的主题。网站主题确定以后，就可以围绕该主题给网站起一个名字。网站名称，是很关键的一个要素。网站名称要体现主题，要有自己的特色。,13.1.1网站的主题和名称,13.1.2网站的标志网站的标志也叫Logo。标志是网站形象的重要体现，一个好的标志往往会反映网站的主题，特别是对一个商业网站，我们可以从中基本了解到这个网站的类型，或者内容。标志一般出现在页面的左上端。如图13-1所示的分别是新浪、网易、华为、闪客帝国的网站标志。,图13-1新浪、网易、华为、闪客帝国的网站标志,图13-2468*60像素Gif格式动画,13.1.3网站的横幅广告横幅广告也叫Banner，内容多为本网站的宣传标语，通常放置在页面上用于表现本网站的内容，大小通常为468*60像素，往往做成动画形式，这样更具有吸引力，通常为Gif、Flash格式的动画。如图13-2所示的就是468*60像素Gif格式的横幅广告。,13.1.4网站的目录结构,从一开始就注重组织站点的目录结构。1、要做到紧扣网站主题，确定网站的目录结构。2、目录结构是否合理，对站点本身的上传维护，内容的扩充等有着重要的影响。3、目录层次不要太深，比如最多不要超过5层。4、还要注意的有：为兼容性考虑，不要使用中文目录；目录命名要合理，做到望文知意等。,图13-3合理的目录结构,13.1.5网站的链接结构,网站的链接结构有树状链接结构，星状链接结构。,图13-4树状链接结构,图13-5星状链接结构,13.1.6网站的色彩所有网页上的颜色，在HTML源代码下看到的是以颜色英文单词（如red）或者十六进制（如#ff0000）的表示方法。1关于冷色和暖色冷色：紫、蓝、绿等。暖色：红、橙、黄等。,2颜色的象征意义每一种颜色又有其象征意义，不同的颜色有着不同的含义，给人各种丰富的感觉和联想，如：红色：热情、奔放、喜悦黄色：高贵、活泼黑色：严肃、沉着白色：纯洁、简单蓝色：清爽、科技绿色：植物、生命、体育灰色：庄重、沉稳紫色：浪漫、富贵总之，网页设计要达到赏心悦目的目的，需要注意色彩的运用和搭配。,常见的布局样式有：（1）形结构：顶部通常为标志、横幅广告和站内导航菜单，顶部下面分为左、中、右3栏结构，通常中间部分是页面的主题内容，如图13-6所示。,图13-6形结构,13.1.7网页的布局,（2）口字形结构：总体分为上、中、下3部分，中间部分又分为3栏，中间是网页的主内容区，如图13-7所示。,图13-7口字形结构,（3）T形结构：顶部通常为标志、横幅广告和站内导航菜单，顶部下面分为左、右2栏结构，通常左右不对称，栏宽的是页面的主题内容，如图13-8所示。,图13-8T形结构,（4）上下形结构：页面划分为上下2部分。可以对称，也可以不对称，如图13-9所示。,图13-9上下形结构,（5）左右形结构：页面划分为左右2部分。可以对称，也可以不对称，如图13-10所示。,图13-10左右形结构,（6）三型结构：页面划分为上、中、下3部分，通常中间部分是主内容区，如图13-11所示。,图13-11三型结构,13.3网站的开发流程,【网站需求分析】,【制定网站建设方案】,【网站制作计划】,【页面设计和程序开发】,【测试】,【发布网站】,【推广和维护】,