《Dreamweaver 网页设计》第13章 网页设计实用理论知识

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”目录，是放本目录下网页所用到的图像的。 这样的目录结构就比较清晰、目录名字也做到望文知意

v文件 文件资源代码片 本地视图 |↓合y| guanggao htr li ani htn a wenti. htm yew. htm guestbook 日志 图13-3合理的目录结构 13.1.5网站的链接结构 网站的链接结构有树状链接结构,星状链接结构。 树状链接结构:首页链接指向二级页面,二级页面链接指向三 级页面,依次类推。这样的链接结构优点是条理清晰,访问者明确知道 自己在什么位置。缺点是浏览效率低,一个栏目下的子页面到另一个栏 目下的子页面,必须绕经首页。如图13-4所示的是网站的树状链接结构

图13-3 合理的目录结构 13.1.5 网站的链接结构 网站的链接结构有树状链接结构，星状链接结构。 树状链接结构：首页链接指向二级页面，二级页面链接指向三 级页面，依次类推。这样的链接结构优点是条理清晰，访问者明确知道 自己在什么位置。缺点是浏览效率低，一个栏目下的子页面到另一个栏 目下的子页面，必须绕经首页。如图13-4所示的是网站的树状链接结构 示意图

首页 级页面 二级页面 三级页面 三级页面 三级页面 图13-4树状链接结构 星状链接结构:此种结构每个页面相互之间都建立有链接。这种 链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺 点是链接太多,链接结构太过复杂,容易使浏览者迷失在网站之 中,不知所处位置。如图135所示的是网站的星状链接结构示意 图 网页1 图13-5星状链接结构 网页2 网页3 网页44

图13-4 树状链接结构 星状链接结构：此种结构每个页面相互之间都建立有链接。这种 链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺 点是链接太多，链接结构太过复杂，容易使浏览者迷失在网站之 中，不知所处位置。如图13-5所示的是网站的星状链接结构示意 图。 图13-5 星状链接结构

13.16网站的色彩 不管是什么网站它都有色彩。颜色的使用在网页制作中起着非常关键的作 用,有很多网站以其成功的色彩搭配令人过目不忘。所有网页上的颜色 在HTML源代码下看到的是以颜色英文单词(如red)或者十六进制(如 #f0000)的表示方法 关于冷色和暖色 所谓色调就是色彩给人的感觉。给人热的感觉的称暖色,给人冷的感觉的 称冷色。 冷色:紫、蓝、绿等 暖色:红、橙、黄等。 把各种深浅不同的冷颜色配在一起就构成“冷色调”,把各种深浅不同的 暖颜色配在一起就构成“暖色调”;在冷色调中可能会有面积很小的一点 暖色,这也不影响总的色调。在暖色调中也可有一些冷色调。 比如在37度的高温天气浏览网站,如果看到大红大紫的网页就会感到十分 的不舒服,而到了零下几度的天气就会显得各位温暖。所以网页设计者必 须考虑色彩给人的感觉。 2.颜色的象征意义 每一种颜色又有其象征意义,不同的颜色有着不同的含义,给人各种丰富 的感觉和联想,如: 红色:热情、奔放、喜悦 黄色:高贵、活泼

13.1.6 网站的色彩 不管是什么网站它都有色彩。颜色的使用在网页制作中起着非常关键的作 用，有很多网站以其成功的色彩搭配令人过目不忘。所有网页上的颜色， 在HTML源代码下看到的是以颜色英文单词（如red）或者十六进制（如 #ff0000）的表示方法。 1．关于冷色和暖色 所谓色调就是色彩给人的感觉。给人热的感觉的称暖色，给人冷的感觉的 称冷色。 冷色：紫、蓝、绿等。 暖色：红、橙、黄等。 把各种深浅不同的冷颜色配在一起就构成“冷色调”，把各种深浅不同的 暖颜色配在一起就构成“暖色调”；在冷色调中可能会有面积很小的一点 暖色，这也不影响总的色调。在暖色调中也可有一些冷色调。 比如在37度的高温天气浏览网站，如果看到大红大紫的网页就会感到十分 的不舒服，而到了零下几度的天气就会显得各位温暖。所以网页设计者必 须考虑色彩给人的感觉。 2．颜色的象征意义 每一种颜色又有其象征意义，不同的颜色有着不同的含义，给人各种丰富 的感觉和联想，如： 红色：热情、奔放、喜悦 黄色：高贵、活泼

黑色:严肃、沉着 白色:纯洁、简单 蓝色:清爽、科技 绿色:植物、生命、体育 灰色:庄重、沉稳 紫色:浪漫、富贵 比如,可口可乐网站以深红色为主,以表达热情、奔放之意。CCT网站的 体育频道栏目以绿色为主以表达生命、体育之意。 总之,网页设计要达到赏心悦目的目的,需要注意色彩的运用和搭配。 网页的布局 网页设计者要能够把网页相关的内容合理安排到页面中,从而 达到内容与形式的完美结合,这就要掌握一些关于网页布 局的知识 常见的布局样式有: (1)∏形结构:顶部通常为标志、横幅广告和站内导航菜单,顶部下 面分为左、中 通常中间部分是页面的主题内容,如 图13-6所示。 图13-6∏形结构

黑色：严肃、沉着 白色：纯洁、简单 蓝色：清爽、科技 绿色：植物、生命、体育 灰色：庄重、沉稳 紫色：浪漫、富贵 比如，可口可乐网站以深红色为主，以表达热情、奔放之意。CCTV网站的 体育频道栏目以绿色为主以表达生命、体育之意。 总之，网页设计要达到赏心悦目的目的，需要注意色彩的运用和搭配。 网页的布局 网页设计者要能够把网页相关的内容合理安排到页面中，从而 达到内容与形式的完美结合，这就要掌握一些关于网页布 局的知识。 常见的布局样式有： （1）∏形结构：顶部通常为标志、横幅广告和站内导航菜单，顶部下 面分为左、中、右3栏结构，通常中间部分是页面的主题内容，如 图13-6所示。 图13-6 ∏形结构

2)口字形结构:总体分为上、中、下3部分,中间部分又分为3栏,中 间是网页的主内容区,如图13-7所示。 图13-7口字形结构 3)T形结构:顶部通常为标志、横幅广告和站内导航菜单,顶部 下面分为左、右2栏结构,通常左右不对称,栏宽的是页面的主题内 容,如图13-8所示。 图13-8T形结构

（2）口字形结构：总体分为上、中、下3部分，中间部分又分为3栏，中 间是网页的主内容区，如图13-7所示。 图13-7 口字形结构 （3）T形结构：顶部通常为标志、横幅广告和站内导航菜单，顶部 下面分为左、右2栏结构，通常左右不对称，栏宽的是页面的主题内 容，如图13-8所示。 图13-8 T形结构