Dreamweaver网页设计第13章研讨.ppt

Dreamweaver 网页设计 第13章 网页设计实用理论知识 【学习概述】 要制作出漂亮的网页，不仅要求掌握Dreamweaver软件，而且还要掌握一些关于网页设计的一些基本理论知识。本章内容包括：网站的主题和名称、网站的标志和横幅广告、网站的结构、网站的色彩、网页布局和网站的开发流程等内容。 13.1 【课堂讲解】网站与网页的基本知识 13.4 实践检验 * * 13.1.1 网站的主题和名称 网站的主题也就是网站的题材，是开始设计网站首先遇到的问题。网站题材十分广泛、千奇百怪，比如新闻、财经、娱乐、房产、游戏、旅游、健康、体育、科技、音乐、汽车、法制、读书、理财、饮食、拍卖、教育、军事、招聘、聊天、商城等等。只要想得到的，就可以把它制作出来。网站主题要求小而精、要有自己的特色，比如著名的网站“闪客帝国”（）主要就是专注于flash的网站，虽然涉及的内容单一，但是人气很旺，就是一个成功的网站。几个甚至几十个人也不可能打造出像新浪、网易、搜狐这样的门户网站，即使这些门户网站也是分门别类、每个大类又可以继续细分，几个设计人员专注于一个方面。对于个人网站爱好者来说，比如你喜欢计算机技术。你要设计个人网站就不能大而空的选择“计算机”，而应该选择计算机下面的分支，比如“网站设计”，即使这样，一个人制作出这样的网站还是很困难的，可以进一步细分，比如选择“Flash动画设计”作为自己的主题。 网站主题确定以后，就可以围绕该主题给网站起一个名字。网站名称，是很关键的一个要素。网站名称要体现主题，要有自己的特色。“闪客帝国”这个关于Flash的网站，因为Flash的本意就是“闪光、闪光的”，对照“黑客”就有了“闪客”之说。其它的比如要设计音乐网站，名称为“音乐天堂”、“音乐爱好者”等比较中庸，但是单凭名称就可以知道它的主题，也是一种不错的起名方法。 13.1.2 网站的标志 网站的标志也叫Logo。标志是网站形象的重要体现，一个好的标志往往会反映网站的主题，特别是对一个商业网站，我们可以从中基本了解到这个网站的类型，或者内容。标志一般出现在页面的左上端。如图13-1所示的分别是新浪、网易、华为、闪客帝国的网站标志。 图13-1 新浪、网易、华为、闪客帝国的网站标志 网站的横幅广告 横幅广告也叫Banner，内容多为本网站的宣传标语，通常放置在页面上用于表现本网站的内容，大小通常为468*60像素，往往做成动画形式，这样更具有吸引力，通常为Gif、Flash格式的动画。在互联网媒体广告发达的今天，横幅广告显示出越来越重要的作用。因此如何能通过Banner条去做好宣传是每个网站设计者必须考虑的问题。如图13-2所示的就是468*60像素Gif格式的横幅广告。 图13-2 468*60像素Gif格式动画 13.1.4 网站的目录结构 从一开始就注重组织站点的目录结构。要做到紧扣网站主题，确定网站的目录结构。目录结构是否合理，对站点本身的上传维护，内容的扩充等有着重要的影响。目录层次不要太深，比如最多不要超过5层。还要注意的有：为兼容性考虑，不要使用中文目录；目录命名要合理，做到望文知意等。如图13-3所示的目录结构，“images”目录是放图像的，“js”目录是放javascrip脚本的，“bottom”目录是放页面底部链接页面的，还有其它目录如“css”、“bbs”、“vote”等等。其中“bottom”目录下面又有个“images”目录，是放本目录下网页所用到的图像的。这样的目录结构就比较清晰、目录名字也做到望文知意。 图13-3 合理的目录结构 13.1.5 网站的链接结构 网站的链接结构有树状链接结构，星状链接结构。 ? 树状链接结构：首页链接指向二级页面，二级页面链接指向三级页面，依次类推。这样的链接结构优点是条理清晰，访问者明确知道自己在什么位置。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。如图13-4所示的是网站的树状链接结构示意图。 图13-4 树状链接结构 星状链接结构：此种结构每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，链接结构太过复杂，容易使浏览者迷失在网站之中，不知所处位置。如图13-5所示的是网站的星状链接结构示意图。 图13-5 星状链接结构 13.1.6 网站的色彩 不管是什么网站它都有色彩。颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。所有网页上的颜色，在HTML源代码下看到的是以颜色英文单词（如red）或者十六进制（如#ff0000）的表示方法。 1．关于冷色和暖色 所谓色调就是色彩给人的感觉。给人热的感觉的称暖色，给人冷的感觉的称冷色。 ? 冷色：紫、蓝、绿