基于Dreamweaver的购物网站的设计与实现
3.4 Dreamweaver设计网页技巧
3.4.1 颜色搭配技巧
（1）网页最常用流行色
1）蓝色——蓝天白云、沉静整洁的颜色。 2）绿色——绿白相间、雅致而有生气。 3）橙色——活泼热烈、标准商业色调。
4）暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色， （2）颜色的忌讳
1）忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！ 2）忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。
3）忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！ 4）忌花——要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要、最能揭示和反映主题的颜色，就像领导者一样，虽然在人数上居少数，但起着决定性作用。
5）忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就像病夫一样无可救药。
6）蓝色忌纯，绿色忌黄，红色忌艳。 （3）几种固定搭配
1）蓝白橙——蓝为主调。白底、蓝标题栏，橙色按钮或ICON做点缀。 2）绿白兰——绿为主调。白底、绿标题栏，蓝色或橙色按钮或ICON做点缀。 3）橙白红——橙为主调。白底、橙标题栏，暗红或桔红按钮或ICON做点缀。 4）暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。
3.4.2 常用绘图工具的基本知识。
（1）源文件psd，ai，cdr的区别
psd文件就是用photoshop创建的，当然也必须用photoshop打开，ai文件是Illustrator的。他们都是Adobe公司的。ai文件同样也可以用photoshop打开，但打开后会载入在
15
基于Dreamweaver的购物网站的设计与实现
同一层内。 cdr文件是CorelDRAW的。
（2）关于CMYK和RGB颜色模式
CMYK是Cyan（青）、Mageata（品红）、Yellow（黄）、Black（黑），这是印刷上使用比较普遍的色彩模式。
R、G、B就是Red、Green、Blue（红，绿，蓝）三种颜色，RGB模式就是由这三种颜色为基色进行叠加而模拟出大自然色彩的色彩组合模式。我们日常用的彩色电脑显示器、彩色电视机等的色彩都使用这种模式。
（3）矢量图
矢量图与位图最大的区别是，它不受分辨率的影响。因此在印刷时，可以任意放大或缩小图形而不会影响出图的清晰度。
矢量图：是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等。
（4）图片文件jpg，gif，png，bmp的区别
bmp：是未经过压缩的用点阵来表示的真彩图片，占用磁盘空间较大gif，是经过压缩的，只能表示256种颜色，占磁盘空间小，常用来演示色彩单一的成块的卡通图案，GIF还有一种可以表示连续的动画.png，是fireworks的图片格式 jpg，也是有损压缩格式但是它表示的颜色较丰富，一般用来显示真彩的照片或图案。
（5）名片的尺寸问题
名片的标准尺寸：90mmX54mm，但是加上出血上下左右各2mm，所以在设计时制作尺寸必须设定为：94 x 58mm。
3.5 使用Dreamweaver制作网页基本步骤
3.5.1 创建页面
在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。中文版的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。 注意：网站第
16
基于Dreamweaver的购物网站的设计与实现
一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。
3.5.2 设置页面属性
在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3.5.3 选取字体
如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选加号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。在网页上打入空格的办法是：把输入法调为全角。在网页上换行的办法是：shift+Enter。只按Enter则为换段。
3.5.4 插入标题文字
进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。 启动中文输入法输入文字。字小不要紧，我们可以对它进行设置。
3.5.5 细节设置
（1）设置文字首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
（2）插入图像使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。
（3）预览网页在页面编辑器中按F12预览网页效果。
17
基于Dreamweaver的购物网站的设计与实现
第四章 购物系统设计和实现
4.1 系统概述
购物网是互联网对消费者的电子商务模式。这种形式的电子商务一般以网络零售业为主，主要借助于Internet开展在线销售活动。
一般是商家与顾客之间的商务活动，也就是通常所说的“网上购物网站”。企业、商家可充分利用电子商城提供的网络基础设施、支付平台、安全平台、管理平台等共享资源有效地、低成本地开展自己的商业活动。它是电子商务按交易对象分类中的一种，即表示商业机构对消费者的电子商务。
本网站具有的具体最基本模块有用户模块、商品模块，广告模块，购物车模块、订单管理模、用户评价模块等等。
每一种图之间的区别以及定义：
用户流程图：需求人员根据用户需求整理出来的use case ，用来描述用户需求的操作流程。
功能模块图：用来描述系统的功能组成，是产品方面应该给出的，提供给售前或销售的。
系统架构图是系统的总体表示，主要描述清楚系统的组成部分，逻辑结构；是研发层面的，是系统架构师根据用户流程图和功能模块图做出来的，可以作为详细设计的依据或直接给研发人员做下一步开发。
4.2 系统模块程序流图
本系统模块的设计，其主要功能的程序流图，如图4-1所示：
18
基于Dreamweaver的购物网站的设计与实现
开始 用户注册? N 注册 Y 登录 YN 合法用户? Y 搜索商品 购买商品 修改订单? N 修改订单 Y 付款 结束
图4-1系统模块的程序流图
4.2.1 系统模块需求分析
网上商店的需求，由用户、管理人员两方面。电子商务网站可简单的划分为2个部分。
19