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

*第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.框架布局。当同一个页面要显示几个相互独立的页面或者图像时，可以使