网页设计实用理论知识.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-2 468*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-8 T形结构,（4）上下形结构：页面划分为上下2部分。可以对称，也可以不对称，如图13-9所示。,图13-9 上下形结构,（5）左右形结构：页面划分为左右2部分。可以对称，也可以不对称，如图13-10所示。,图13-10 左右形结构,（6）三型结构：页面划分为上、中、下3部分，通常中间部分是主内容区，如图13-