dw网页设计基础

1、第1章 网页基础知识网页基础知识 网页构成要素和组成元素网页构成要素和组成元素网页相关知识简介网页相关知识简介网页的设计理念和配色方案网页的设计理念和配色方案网站建设流程网站建设流程典型网站分析典型网站分析1.11.1网页构成要素和组成元素网页构成要素和组成元素1.1.11.1.1网页构成要素网页构成要素 网页的构成要素主要有站标、导航条、广告条、网页的构成要素主要有站标、导航条、广告条、标题栏和按钮等。标题栏和按钮等。 站站标标广告广告条条导航导航条条按钮按钮标题标题栏栏1.1.站标站标 站标也叫站标也叫LogoLogo，是网站的标志，其作用是使人，是网站的标志，其作用是使人看见它就能够联想

2、到企业。看见它就能够联想到企业。因此，网站因此，网站LogoLogo通通常采用企业的常采用企业的LogoLogo。LogoLogo一般采用带有企业特色和思想的图案，或一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也是与企业相关的字符或符号及其变形，当然也有很多是图文组合，如下图所示。有很多是图文组合，如下图所示。2.2.导航条导航条 导航条是网站内多个页面的超链接组合，它可导航条是网站内多个页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。以引导浏览者轻松找到网站中的各个页面。导航导航条条导航导航条条3.3.广告条广告条 广告条又称广告条又称BannerB

3、anner，其功能是宣传网站或，其功能是宣传网站或替其他企业做广告。替其他企业做广告。BannerBanner的尺寸可以根的尺寸可以根据版面需要来安排，一般大型商务网站都据版面需要来安排，一般大型商务网站都有自己的标准尺寸和摆放位置。有自己的标准尺寸和摆放位置。 4.4.标题栏标题栏 此处的标题栏不是指整个网页的标题栏，而是此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概网页内部各版块的标题栏，是各版块内容的概括。括。 标题栏可以是文字加单元格背景，也可以是图标题栏可以是文字加单元格背景，也可以是图片，一般大型网站都采用前者，一些内容少的片，一般大型网站都采用前

4、者，一些内容少的小网站常采用后者。小网站常采用后者。5.5.按钮按钮 在现实生活中，按钮通常是启动某些装置或机在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。操作，比如页面跳转，或数据的传输等。1.1.21.1.2组成元素组成元素 网页的组成元素有文字、图片、动画（网页的组成元素有文字、图片、动画（gifgif、flashflash）、表单（交互功能）、音）、表单（交互功能）、音频、视频、超链接、表格、框架、

5、导航频、视频、超链接、表格、框架、导航等。等。1.2 1.2 网页相关知识简介网页相关知识简介 1.2.11.2.1互联网互联网互联网（互联网（InternetInternet），又叫因特网，它是目前世界上），又叫因特网，它是目前世界上最大的计算机网络，将无数广域网、局域网及单机按最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的照一定的通讯协议组织在一起，方便了计算机之间的信息传递。信息传递。1.2.21.2.2网页的本质网页的本质 一个一个网页网页由多个文件组成，网页文件是由多个文件组成，网页文件是“根根”，图像文件都是，图像文件都是“枝叶枝叶”

6、，图像和动画，图像和动画都以链接的形式插入到网页中。都以链接的形式插入到网页中。 打开网站打开网站“搜狐网搜狐网”，在浏览器中选择，在浏览器中选择“文件文件”“另存为另存为”菜单，将网页保存到磁菜单，将网页保存到磁盘中，然后看看网页及其组成素材。盘中，然后看看网页及其组成素材。1.2.3 1.2.3 网站、网页和主页网站、网页和主页 网站网站是多个网页的集合，各个网页通过超级是多个网页的集合，各个网页通过超级链接构成一个网站整体。链接构成一个网站整体。 网页网页就是以就是以htmlhtml语言为基础编写的，能够通语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出过网络传输，并被浏览

7、器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形来的包含文字、图片、声音、动画等媒体形式的页面文件。网页由主页和其它链接页组式的页面文件。网页由主页和其它链接页组成。成。主页主页也叫首页，是网站的入口，即浏览者登也叫首页，是网站的入口，即浏览者登录网站时看见的第一个网页。录网站时看见的第一个网页。根据网页能够在服务器端运行，把网页分根据网页能够在服务器端运行，把网页分为动态网页和静态网页。为动态网页和静态网页。静态网页静态网页：纯粹用html语言编写的网页，不能在服务器端运行，没有数据库支持，交互性相没有数据库支持，交互性相对较差。每个网页都有一个固定的对较差。每个网页都有一个固定的u

8、rlurl，且以，且以htmhtm、htmlhtml、shtmlshtml、xmlxml等常见形式为后缀；发等常见形式为后缀；发布在服务器上的静态网页是事先保存在服务器布在服务器上的静态网页是事先保存在服务器上的文件，每个网页都是一个独立的文件；内上的文件，每个网页都是一个独立的文件；内容相对稳定，容易被搜索引擎检索。容相对稳定，容易被搜索引擎检索。动态网页：动态网页：即采用动态网站技术动态生成的网即采用动态网站技术动态生成的网页，以数据库为基础，能在服务器端运行；可以页，以数据库为基础，能在服务器端运行；可以实现的功能较多，如用户注册、登陆、在线调查、实现的功能较多，如用户注册、登陆、在线调

9、查、用户管理、订单管理、站内搜索、歌曲下载、软用户管理、订单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、可以留言或书写评论等；件下载、即时更新新闻、可以留言或书写评论等；不是独立存于服务器上的网页文件，只有当用户不是独立存于服务器上的网页文件，只有当用户请求服务器时才返回一个完整的网页。请求服务器时才返回一个完整的网页。1.2.4 IP1.2.4 IP地址与域名地址与域名 IPIP地址用来标识每台主机在互联网上的地址，具地址用来标识每台主机在互联网上的地址，具有唯一性。它由有唯一性。它由4 4个小于个小于256256的数字组成，数字之的数字组成，数字之间用点间隔。间用点间隔。例如，例如，

10、“61.135.150.126”61.135.150.126”就是一就是一个个IPIP地址。地址。 但是但是IPIP地址难以书写和记忆。地址难以书写和记忆。域名是用字符来表示主机地址的另一种方法，与域名是用字符来表示主机地址的另一种方法，与IPIP地址对应，在使用过程中易于记忆和书写。地址对应，在使用过程中易于记忆和书写。 域名也是独一无二的。域名也是独一无二的。 如：如：和和都是域名。都是域名。1.2.5 1.2.5 网址网址 网址又叫网址又叫URLURL，它是一种网络上通用的地址格，它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。式，用于标识网页文件在网络中的位置。一个完整的

11、网址由通信协议名称、域名或一个完整的网址由通信协议名称、域名或IPIP地地址、网页在服务器中的路径和文件名址、网页在服务器中的路径和文件名4 4部分组部分组成。成。 1.2.6 1.2.6 网页的布局类型网页的布局类型1.1.网站的类型：门户网站、政府部门形象类网站、企业网站、网站的类型：门户网站、政府部门形象类网站、企业网站、医院网站、科技网站、教育网站、综合网站等。医院网站、科技网站、教育网站、综合网站等。2.2.布局相关概念布局相关概念版面版面指的是浏览器看到的完整的一个页面。因为每个人的指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现显示器

12、分辨率不同，所以同一个页面的分辨率可能出现800800* *600600像素，像素，10241024* *768768像素等，看到的版面效果也不尽像素等，看到的版面效果也不尽相同。相同。布局布局就是以最适合浏览的方式将图片和文字摆放在页面的就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。不同位置。网页版面布局网页版面布局是指定网页内容在浏览器中的显示方式，例是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。如徽标的位置、导航栏的显示、主要内容的排版等。图图1 形结构形结构3.3.常见的布局样式常见的布局样式（1）形结构：如图形结构：如图1所示。所示。（

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

14、。可以对称，也可以不对称，如图可以不对称，如图4所示。所示。图图4上下形结构上下形结构（5）左右形结构：页面划分为左右）左右形结构：页面划分为左右2部分。可以对称，也可以部分。可以对称，也可以不对称，如图不对称，如图5所示。所示。图5左右形结构1.2.71.2.7网站管理与网页制作相关软件网站管理与网页制作相关软件 FireworksFireworks：主要用于制作网页图像、网站标志、：主要用于制作网页图像、网站标志、GIFGIF动画、图像按钮与导航栏等。动画、图像按钮与导航栏等。FlashFlash：主要用于制作矢量动画，如广告条、网站片：主要用于制作矢量动画，如广告条、网站片头动画、动画短

15、片、头动画、动画短片、MTVMTV等。等。PhotoshopPhotoshop：AdobeAdobe公司出品的一个优秀而且强大的图公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计的需要（除了多媒体）。了网页设计的需要（除了多媒体）。在进行网页制作时，除需要在进行网页制作时，除需要Dreamweaver外，还外，还会用到会用到Fireworks、Flash、Photoshop等辅助软等辅助软件。件。（DW、FW、Flash

16、称作网页三剑客。）称作网页三剑客。）1.2.8 HTML1.2.8 HTML基础基础（1 1） HTMLHTML语言：语言：HTMLHTML是网页的主要组成部分，要想精通网页制是网页的主要组成部分，要想精通网页制作，必须对作，必须对HTMLHTML语言有所了解。语言有所了解。HTMLHTML语言语言是利用标记（是利用标记（tagtag）来描述网页的字体、来描述网页的字体、大小、颜色及页面布局的语言，是一种早期的用大小、颜色及页面布局的语言，是一种早期的用于网页制作的主要语言；它也是纯文本类型的语于网页制作的主要语言；它也是纯文本类型的语言，可以使用任何的文本编辑器对它进行编辑。言，可以使用任何

17、的文本编辑器对它进行编辑。使用使用HTMLHTML编写的网页文件是标准的纯文本文件，编写的网页文件是标准的纯文本文件，可以用任何文本编辑器打开它。可以用任何文本编辑器打开它。其后缀名其后缀名为：为：.html.html或或. .htmhtm。（2）HTML文档的基本结构标题标题正文正文（3）主要标记简介开始和结束标记。在它们中开始和结束标记。在它们中间，包含网页里的所有内容。间，包含网页里的所有内容。主体主体:页面内容页面内容。主体部分包含文。主体部分包含文本和图像等网页里所有可见部分。本和图像等网页里所有可见部分。头部：头部：头部的内容头部的内容 head head是除文档标题外的不可见部分

18、，文档标题出现在浏是除文档标题外的不可见部分，文档标题出现在浏览器的窗口标题栏中，还可以包括览器的窗口标题栏中，还可以包括METAMETA信息、关键字、信息、关键字、说明说明/ /描述、刷新、基础网页描述、刷新、基础网页/ /首页（申请的域名空间或首页（申请的域名空间或网址）、链接等；若不需头部信息则可省略此标记。网址）、链接等；若不需头部信息则可省略此标记。【刷新就是在网址发生变化或网页经常更新时，规定在刷新就是在网址发生变化或网页经常更新时，规定在几秒钟内更新当前网页的内容。几秒钟内更新当前网页的内容。】标题标题:标题标题：呈现出网页的标题：呈现出网页的标题，文档标题出现在浏览器的窗口标题

19、栏中，包含，文档标题出现在浏览器的窗口标题栏中，包含在在 标签内部。标签内部。以下内容以下内容(4)(4)(6)(6)为选学内容。为选学内容。 （4 4）网页中的其他常用标记）网页中的其他常用标记:分段标记分段标记 :换行标记换行标记 :& &nbspnbsp; ;是空格标记是空格标记 空的标签区块空的标签区块字体标签字体标签表格标签表格标签文字标签文字标签文本缩进的标签文本缩进的标签 可以使用这些标记在记事本中完成网页的设计。可以使用这些标记在记事本中完成网页的设计。HEAD部分包含的主要元素部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描

20、述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前文档的指定当前文档的CSS层叠样式表层叠样式表(5)Html的重要标签和属性 头部标签头部标签HEAD部分包含的主要元素部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前文档的指定当前文档的CSS层叠样式表层叠样式表HEAD部分包含的主要元素

21、部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前文档的指定当前文档的CSS层叠样式表层叠样式表HEAD部分包含的主要元素部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前文档的指定当前文档的CSS层叠样式表

22、层叠样式表HEAD部分包含的主要元素部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前文档的指定当前文档的CSS层叠样式表层叠样式表HEAD部分包含的主要元素部分包含的主要元素 标签标签 描描 述述title 文档标题文档标题meta 描述描述HTML元信息元信息link 描述当前文档与其它文档之间的链接关系描述当前文档与其它文档之间的链接关系script 脚本程序内容脚本程序内容style 指定当前

23、文档的指定当前文档的CSS层叠样式表层叠样式表meta元素元素描述描述HTML文档的元信息，即关于文档自身的信息。文档的元信息，即关于文档自身的信息。定义搜索关键字、字符编码、作者、版权信息以及定义搜索关键字、字符编码、作者、版权信息以及文档描述文档描述.这些标签可以向服务器提供信息，如页面这些标签可以向服务器提供信息，如页面的失效日期、刷新间隔和的失效日期、刷新间隔和PICC等级。等级。 PICC是是internet内容选择平台，它提供了向网页内容选择平台，它提供了向网页分配等级的方法。分配等级的方法。格式例：格式例：定义语言定义语言格式例：格式例：script元素元素语法格式：语法格式：

24、属性：属性：languagestyle元素元素语法格式：语法格式： 样式语句样式语句 主体标签主体标签BODY部分包含的主要元素部分包含的主要元素 属性属性 描描 述述text 设置页面文字的颜色设置页面文字的颜色Bgcolor 设置页面的背景颜色设置页面的背景颜色Background 设置页面的背景图像设置页面的背景图像Link 设置页面默认的连接颜色设置页面默认的连接颜色alink 设置鼠标单击时的连接颜色设置鼠标单击时的连接颜色Vlink 设置访问后的连接颜色设置访问后的连接颜色Script 设置网页中的程序脚本内容设置网页中的程序脚本内容图片标签图片标签属性描述Src图片的源文件Alt

25、提示文字Width设置图片的宽度Height设置图片的高度Border设置图片的边框Vspace垂直间距Hspace水平间距align设置图片的对齐方式字体标签字体标签属性描述字体字号文字颜色属性描述表格标签行标签单元格标签表格标签表格标签常见的列表标签常见的列表标签标签描述无序列表有序列表目录列表定义列表菜单列表列表项目的标签（6）在编写代码时的注意事项：在书写标签属性值的时候尽量将属性值用引在书写标签属性值的时候尽量将属性值用引号（英文标点符号）括起来。号（英文标点符号）括起来。在书写在书写htmlhtml语言的时候不区分大小写。语言的时候不区分大小写。代码优化：清理代码优化：清理html

26、/html/xhtmlxhtml和清理和清理word word 生生成的成的htmlhtml代码。代码。 可以使用代码片段面板插入可以使用代码片段面板插入dwdw中预定义的中预定义的代码片段（代码片段（javascriptjavascript、内容表、导航、文内容表、导航、文本、表单元素、页眉和页脚等）。本、表单元素、页眉和页脚等）。课堂实例课堂实例创建和测试第一个创建和测试第一个htmlhtml网页网页在在“记事本记事本”窗口或者窗口或者DreamweaverDreamweaver网页中输入以网页中输入以下内容：下内容：欢迎光临我的第一个网页欢迎光临我的第一个网页这是第一个简单网页这是第一个

27、简单网页! !选择选择【文件文件】| |【保存保存】命令，在弹出的命令，在弹出的“另存为另存为”对话框中选择要保存的路径，在对话框中选择要保存的路径，在【文件名文件名】文本文本框中输入文件名框中输入文件名myweb001.htmlmyweb001.html。1.2.10 XHTML1.2.10 XHTML语言简介语言简介 XHTMLXHTML是是Extensible Extensible HyperTextHyperText Markup Markup Language(Language(可扩展超文本标记语言可扩展超文本标记语言) )的英文的英文缩写，它的前身是缩写，它的前身是HTMLHTML

28、。由于。由于HTMLHTML代码烦代码烦琐，结构松散，所以推出了琐，结构松散，所以推出了XHTMLXHTML。也可。也可以说，以说，XHTMLXHTML是是HTMLHTML的一个升级版本。的一个升级版本。 1.2.11 1.2.11 脚本语言简介脚本语言简介 脚本语言是基于对象的编程语言，网页中常用的脚本语言是基于对象的编程语言，网页中常用的有有VBScriptVBScript、JScriptJScript和和JavaScriptJavaScript。 VBScriptVBScript和和JScriptJScript是微软的产品，是微软的产品，IEIE都支持。都支持。JavaScriptJav

29、aScript是是NetscapeNetscape的产品，不仅适用于的产品，不仅适用于NetscapeNetscape，同时和，同时和IEIE也有很好的兼容性，可以说也有很好的兼容性，可以说是一种通用的脚本语言。是一种通用的脚本语言。 课堂练习课堂练习2 2 无缝滚动效果的实现无缝滚动效果的实现本例通过研究无缝滚动效果的实现，来认识一本例通过研究无缝滚动效果的实现，来认识一下下XHTMLXHTML和脚本语言在网页制作中的作用。和脚本语言在网页制作中的作用。 XHTMLXHTMLJavaScriptJavaScript 网页内容第一：内容要精彩且便于浏览，导网页内容第一：内容要精彩且便于浏览，导

30、航清晰明了。航清晰明了。 界面美观第三：精美的网站标志、合理的版面界面美观第三：精美的网站标志、合理的版面布局（尽量简约、美观）、网站风格统一、注布局（尽量简约、美观）、网站风格统一、注重色彩搭配、能适应不同浏览器及分辨率重色彩搭配、能适应不同浏览器及分辨率、 1.3. 1.3.网页的设计理念和配色方案网页的设计理念和配色方案1.3.11.3.1设计理念设计理念网页大小第二：图片、多媒体的大小和多少要网页大小第二：图片、多媒体的大小和多少要细致考虑，下载速度要尽可能快细致考虑，下载速度要尽可能快1.3.2 1.3.2 网页中的色彩搭配网页中的色彩搭配色彩的三要素色彩的三要素色相：色相：色彩的相

31、貌，是区分色彩种类的名称，表色彩的相貌，是区分色彩种类的名称，表示色彩相貌的差异，这种差异由光波的波长决定。示色彩相貌的差异，这种差异由光波的波长决定。明度：明度：色彩的强度，只色彩的明暗度。色彩的强度，只色彩的明暗度。纯度：纯度：色彩的饱和度，即颜色的深浅程度或浓淡色彩的饱和度，即颜色的深浅程度或浓淡程度。程度。色彩心理与网页表现：色彩心理与网页表现：不同的颜色有着不同的含不同的颜色有着不同的含义，给人各种丰富的感觉和联想。义，给人各种丰富的感觉和联想。 记住常用纯记住常用纯色的十六进制代码。色的十六进制代码。红色：红色：热情、奔放、喜悦、庄严、浪漫、火焰、暴力、热情、奔放、喜悦、庄严、浪漫

32、、火焰、暴力、侵略。具有刺激效果，容易使人产生冲动，是一种雄侵略。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，有愤怒、热情、活力的感觉红色在很壮的精神体现，有愤怒、热情、活力的感觉红色在很多文化中代表的是停止的讯号，用于警告或禁止一些多文化中代表的是停止的讯号，用于警告或禁止一些动作。动作。黄色：黄色：亮度最高，有温暖感，具有快乐、高贵、富有、亮度最高，有温暖感，具有快乐、高贵、富有、灿烂、活泼、明亮、光辉、疾病、懦弱、希望、智慧灿烂、活泼、明亮、光辉、疾病、懦弱、希望、智慧和轻快的个性，让人感觉灿烂辉煌。和轻快的个性，让人感觉灿烂辉煌。黑色：黑色：给人深沉、神秘、寂静、悲哀、精致、

33、现代感、给人深沉、神秘、寂静、悲哀、精致、现代感、死亡、病态、邪恶、压抑的感觉。死亡、病态、邪恶、压抑的感觉。白色：白色：纯洁、天真、洁净、简单、真理、和平、冷淡、纯洁、天真、洁净、简单、真理、和平、冷淡、贫乏。白色在中华文化中也代表着死亡的颜色。贫乏。白色在中华文化中也代表着死亡的颜色。紫色：紫色：浪漫、富贵、创造、谜、忠诚、神秘、稀有。浪漫、富贵、创造、谜、忠诚、神秘、稀有。紫色在某些文化中与死亡有关。紫色在某些文化中与死亡有关。 灰色：灰色：庄重、沉稳庄重、沉稳绿色：绿色：介于冷暖色中间，显得和睦、宁静，给人健康、介于冷暖色中间，显得和睦、宁静，给人健康、安全的感觉。与金黄、淡白搭配，产

34、生优雅、舒适的气安全的感觉。与金黄、淡白搭配，产生优雅、舒适的气氛。植物、生命、生机、自然、稳定、成长、忌妒。在氛。植物、生命、生机、自然、稳定、成长、忌妒。在北美文化中，绿色代表的是北美文化中，绿色代表的是“行行”，与环保意识有关，与环保意识有关，也经常被连结到有关财政方面的事物。也经常被连结到有关财政方面的事物。蓝色：蓝色：天空、清爽、科技、忠诚、安全、保守、宁静、天空、清爽、科技、忠诚、安全、保守、宁静、冷漠、悲伤。冷漠、悲伤。 棕色：棕色：大地、厚朴、忠诚、安全、保守大地、厚朴、忠诚、安全、保守橙色：也是一种激奋的色彩，有轻快、欢欣、热烈、温橙色：也是一种激奋的色彩，有轻快、欢欣、热烈

35、、温馨、时尚的效果。馨、时尚的效果。在网页中运用色彩一般应遵循下列几个原则在网页中运用色彩一般应遵循下列几个原则: （1）一个页面中切忌采用过多的颜色，）一个页面中切忌采用过多的颜色， 否则会给人一种繁否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。选用颜色一般不要超过三四种。（2）背景的颜色不要太深，显得过于厚重，）背景的颜色不要太深，显得过于厚重， 因为这样会影因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人

36、一种另类的感觉。亮丽的文本和图像，会给人一种另类的感觉。（3）要保持整个网页的色调统一。）要保持整个网页的色调统一。 （4）要围绕网页的主题选择颜色，色彩要能烘托出主题。）要围绕网页的主题选择颜色，色彩要能烘托出主题。1.4 1.4 网站建设流程网站建设流程 网站需求分析网站需求分析 创建站点，创建站点，设计制作各级页面设计制作各级页面 空间和域名申请空间和域名申请 测试和发布网站测试和发布网站 网站推广网站推广1.4.1 1.4.1 网站需求分析网站需求分析 （1 1）确定网站的功能和主要内容）确定网站的功能和主要内容（2 2）规划网站主要栏目、确定网站的风格、）规划网站主要栏目、确定网站的

37、风格、主题，主题， 色调，以及网页的大体布局，并绘制色调，以及网页的大体布局，并绘制设计草图。设计草图。（3 3）收集网页所用素材）收集网页所用素材 网站的风格设计网站的风格设计 风格，是指站点的整体形象给访问者的综合感受，比风格，是指站点的整体形象给访问者的综合感受，比较抽象。较抽象。 网站的整体形象包含以下因素网站的整体形象包含以下因素 色彩色彩 版面布局版面布局 浏览方式浏览方式 网站标志的设计网站标志的设计 交互性交互性 文字文字 价值价值设计草图根据实际需要，画出网站的设计草图，设计草图根据实际需要，画出网站的设计草图，如下：如下： 1.4.2 1.4.2 设计制作网站页面设计制作网站页面 该过程主要包括设计和制作页面，所谓该过程主要包括设计和制作页面，所谓设计，就是用图像处理软件设计好网页设计，就是用图像处理软件设计好网页的效果图，并将设计好的效果图进行切的效果图，并将设计好的效果图进行切割导出。割导出。将切割好的图片进行导出后，就可将切割好的图片进行导出后，就可以在以在DreamweaverDreamweaver中组织网站内容了。包括输中组织网站内容了。包括输入文本、插入图片、动