第十三章网页设计实用理论知识.pptVIP

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