《中文DreamWeaverMX网页制作教程》课件第2章

第2章创建“梦衣裳”电子商务主题网站——策划篇2.1站点规划2.2网页配色2.3网页布局

2.1.1网站主题

开始着手策划制作站点时首先面临的问题便是制作的内容和选择的主题。不同性质的网站，会有不同的需求以及操作界面，比如说教学主题就应以网站内容为第一，解说清楚，网站界面操作要简单明快，个性网站则较注重美工和创意，而我们现在要设计的电子商务主题网站则应该突出良好的视觉效果，为客户提供实用的信息、便捷的操作。2.1站点规划2.1.2网站名称

主题确定好后，该给你的网站取个好听的名称了。网站名称是网站设计中非常关键的一个要素，对网站的形象和宣传有很大的影响，网站名称既要简明易记又要不失特色，因此我们把将要设计的服饰类电子商务网站暂命名为“梦衣裳”，当然，如果您有更好的名称，也不妨使用。

2.2.1网页色彩搭配的总原则

总体协调、局部对比是网页色彩搭配的总原则。在制作网页时，应该使用和谐的整体色彩效果，选择一种到两种主题色，局部可以使用一些明亮的对比色。2.2网页配色2.2.2网页的颜色原理和象征意义

我们所有网页上的颜色，在HTML下看到的是以颜色的英文单词表示或者以其十六进制的表示方法表示(如#000000表示为黑色)。不同的颜色有着不同的含义，会带给人各种丰富的感觉和联想。红色：热情、奔放、喜悦、庄严；

黄色：高贵、富有、灿烂、活泼；

黑色：严肃、夜晚、沉着；

白色：纯洁、简单、洁净；

蓝色：天空、清爽、科技；

绿色：植物、生命、生机；

灰色：庄重、沉稳；

紫色：浪漫、富贵；

棕色：大地、朴厚。2.2.3网页颜色的使用

不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用的颜色大概分为下面几种类型：

1.公司色。

图2-1公司色

2.风格色。图2-2风格色

3.习惯色。图2-3习惯色2.2.4实例——“梦衣裳”电子商务主题网站配色设计分析

本书将要涉及到的设计实例——“梦衣裳”网站属于时尚服饰类电子商务主题网站，该网站界面应以洁净大方为主，因为面向的对象以女性居多，所以在色彩的搭配方面，选择了代表女性的柔和典雅的粉色和洁净明亮的白色为主色调，将其作为网站的风格色。

2.3.1网页布局的基础

网页设计初期，空白的网页就好像一张白纸，可任由你在上面发挥自己的设计才思，但对于很多初学者来说却感到无从下手。这时假如你知道一种约定俗成的“标准”或者说大多数访问者的“浏览习惯”，那么就可以在这个基础上加上自己的东西，制作自己的网页。这种“标准”或“习惯”就是我们下面要涉及的网页布局的基本概念。2.3网页布局

1.页面尺寸。页面尺寸与显示器大小及其分辨率有关，并且因为浏览器也将占去不少空间，留下的页面范围会显得比较小。一般分辨率在1024×768的情况下，页面的显示尺寸为1007×600像素；在800×600的情况下，页面的显示尺寸为780×428像素。在网页设计过程中，向下拖动页面是唯一给网页增加更多内容(尺寸)的方法。但是出于美观和方便操作的考虑，建议拖动的页面不要超过三屏。

2.整体造型。这里所谓的造型就是网页形象的完成过程。造型中图形与文本的结合如同我们用Word进行图文排版一样，可以用各种各样的形状如矩形、圆形、三角形、菱形等给网页进行造型。

3.页头。页头又叫页眉，就是指网页页面最上方的内容，通常用来放置站点名称的图片和公司标志以及旗帜广告。页头是整个页面设计的关键，它将牵涉到下面更多的设计和整个页面的协调性。

4.图片和文本。图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键，图片和文本的摆放位置决定着整个页面布局的可视性。

5.页脚。页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。

6.多媒体。除了文本和图片，网页中还可包括声音、动画、视频等其他媒体，这些丰富的元素将会给整个网页布局增彩不少。2.3.2网页布局的技术

成功的网页设计离不开布局的选择，网页布局从技术上说可以由下面几种方式实现：

1.表格布局。表格布局是最普遍的网页布局方式，它的优势在于可以非常方便地定位图片和文本，互联网上大部分的网页都使用了表格布局。试试把你浏览的网页在本地另存为html文件，用Dreamweaver打开，就会清楚地看到这个网页是如何使用表格布局的。

2.框架布局。当同一个页面要显示几个相互独立的页面或者图像时，可以使用框架布局，如广州视窗论坛(/)便使用了社区目录和论坛帖子内容相互独立的左右框架结构，以方便浏览者在各个目录之间跳转。

3.层布局。如同表格一样，层是页面的布局定位工具，因此使用层可以定位网页的元素对象。与表格布局不同的是，表格布局中的元素不能互相重叠，而层布局可以把页面中的元素定位在任何位置，甚至置于其他元素的顶层。

4.

CSS层叠样式表的应用。CSS层叠样式表可以实现其他布局方式无法实现的布局，可以完全精确地定位图片和文字，并且可以加入一些其他布局方式无法实现的特效，让你的页面布局更加出色。2.3.3网页布局的形式

1.“T”形布局。

图2-4“T”形布局

2.“口”形布局。图2-5“口”形布局

3.“三”形布局。图2-6“三”形布局

4.“对称对比”布局。图2-7“对称对比”布局

5.“POP”布局。图2-8“POP”布局

6.其他布局。网页的布局形式并不局限于以上几种，根据网页的内容和设计者的想法，还有很多富有特色的布局方式，在这里不一一列举说明。2.3.4网页布局的步骤

1.设计草案。不打草稿很难设计出优秀的网页。所以在开始着手制作之前首先要设计草案，既可以在纸上设计，也可以通过Photoshop、Fireworks等图形处理软件设计。设计草案时要注意尺寸的选择、造型的选择以及增加页头、增加文本和图片。

2.定案。设计完草案之后就可以定案着手制作了。2.3.5