Dreamweaver网页设计 第13章网页设计实用理论知识
Dreamweaver 网页设计 第13章 网页设计实用理论知识
【学习概述】 要制作出漂亮的网页,不仅要求掌握 Dreamweaver软件,而且还要掌握一些关 于网页设计的一些基本理论知识。本章内 容包括:网站的主题和名称、网站的标志 和横幅广告、网站的结构、网站的色彩、 网页布局和网站的开发流程等内容
【学习概述】 要制作出漂亮的网页，不仅要求掌握 Dreamweaver软件，而且还要掌握一些关 于网页设计的一些基本理论知识。本章内 容包括：网站的主题和名称、网站的标志 和横幅广告、网站的结构、网站的色彩、 网页布局和网站的开发流程等内容
13.1【课堂讲解】网站与网页的 基本知识 13.1.1网站的主题和名称 网站的主题也就是网站的题材,是开始设计网站首先遇到的问题。网站题材 十分广泛、千奇百怪,比如新闻、财经、娱乐、房产、游戏、旅游、健康 体育、科技、音乐、汽车、法制、读书、理财、饮食、拍卖、教育、军事、 招聘、聊天、商城等等。只要想得到的,就可以把它制作出来。网站主题要 求小而精、要有自己的特色,比如著名的网站“闪客帝国” (http://www.flashempire.com)主要就是专注于fash的网站,虽然涉及的内 容单一,但是人气很旺,就是一个成功的网站。几个甚至几十个人也不可能 打造出像新浪、网易、搜狐这样的门户网站,即使这些门户网站也是分门别 类、每个大类又可以继续细分,几个设计人员专注于一个方面。对于个人网 站爱好者来说,比如你喜欢计算机技术。你要设计个人网站就不能大而空的 选择“计算机”,而应该选择计算机下面的分支,比如“网站设计”,即使 这样,一个人制作出这样的网站还是很困难的,可以进一步细分,比如选择 “ Flash动画设计”作为自己的主题
13.1 【课堂讲解】网站与网页的 基本知识 13.1.1 网站的主题和名称 网站的主题也就是网站的题材，是开始设计网站首先遇到的问题。网站题材 十分广泛、千奇百怪，比如新闻、财经、娱乐、房产、游戏、旅游、健康、 体育、科技、音乐、汽车、法制、读书、理财、饮食、拍卖、教育、军事、 招聘、聊天、商城等等。只要想得到的，就可以把它制作出来。网站主题要 求小而精、要有自己的特色，比如著名的网站“闪客帝国” （http://www.flashempire.com）主要就是专注于flash的网站，虽然涉及的内 容单一，但是人气很旺，就是一个成功的网站。几个甚至几十个人也不可能 打造出像新浪、网易、搜狐这样的门户网站，即使这些门户网站也是分门别 类、每个大类又可以继续细分，几个设计人员专注于一个方面。对于个人网 站爱好者来说，比如你喜欢计算机技术。你要设计个人网站就不能大而空的 选择“计算机”，而应该选择计算机下面的分支，比如“网站设计”，即使 这样，一个人制作出这样的网站还是很困难的，可以进一步细分，比如选择 “Flash动画设计”作为自己的主题
网站主题确定以后,就可以围绕该主题给网站起一个名字。网站名称,是 很关键的一个要素。网站名称要体现主题,要有自己的特色。“闪客帝国” 这个关于Fash的网站,因为 Flash的本意就是“闪光、闪光的”,对照 “黑客”就有了“闪客”之说。其它的比如要设计音乐网站,名称为“音 乐天堂”、“音乐爱好者”等比较中庸,但是单凭名称就可以知道它的主 题,也是一种不错的起名方法。 13.1.2网站的标志 网站的标志也叫Logo。标志是网站形象的重要体现,一个好的标志往往 会反映网站的主题,特别是对一个商业网站,我们可以从中基本了解到 这个网站的类型,或者内容。标志一般出现在页面的左上端。如图13-1 所示的分别是新浪、网易、华为、闪客帝国的网站标志。 na.com.cn 易NTEA ww亻63·c0 empire 图13-1新浪、网易、华为、闪客帝国的网站标志
网站主题确定以后，就可以围绕该主题给网站起一个名字。网站名称，是 很关键的一个要素。网站名称要体现主题，要有自己的特色。“闪客帝国” 这个关于Flash的网站，因为Flash的本意就是“闪光、闪光的”，对照 “黑客”就有了“闪客”之说。其它的比如要设计音乐网站，名称为“音 乐天堂”、“音乐爱好者”等比较中庸，但是单凭名称就可以知道它的主 题，也是一种不错的起名方法。 13.1.2 网站的标志 网站的标志也叫Logo。标志是网站形象的重要体现，一个好的标志往往 会反映网站的主题，特别是对一个商业网站，我们可以从中基本了解到 这个网站的类型，或者内容。标志一般出现在页面的左上端。如图13-1 所示的分别是新浪、网易、华为、闪客帝国的网站标志。 图13-1 新浪、网易、华为、闪客帝国的网站标志
网站的横幅广告 横幅广告也叫 Banner,内容多为本网站的宣传标语,通常放置在 页面上用于表现本网站的内容,大小通常为468*60像素,往 往做成动画形式,这样更具有吸引力,通常为G、 Flash格式 的动画。在互联网媒体广告发达的今天,横幅广告显示出越来 越重要的作用。因此如何能通过 Banner条去做好宣传是每个 网站设计者必须考虑的问题。如图13-2所示的就是468*60像 素G格式的横幅广告。 激情世界杯 图13-2468*60像素Gf格式动画 13.14网站的目录结构 从一开始就注重组织站点的目录结构。要做到紧扣网站主题,确定网站的目录结 构。目录结构是否合理,对站点本身的上传维护,内容的扩充等有着重要的影响 目录层次不要太深,比如最多不要超过5层。还要注意的有:为兼容性考虑,不 要使用中文目录;目录命名要合理,做到望文知意等。如图133所示的目录结构, “ Images"目录是放图像的,“js”目录是放 Javascrip脚本的,“ bottom”目录是放 页面底部链接页面的,还有其它目录如“css”、“bbs”、“vote"等等。其中 “ bottom”目录下面又有个“ images'目录,是放本目录下网页所用到的图像的 这样的目录结构就比较清晰、目录名字也做到望文知意
网站的横幅广告 横幅广告也叫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”目录，是放本目录下网页所用到的图像的。 这样的目录结构就比较清晰、目录名字也做到望文知意