Dreamweaver CS6如何应用:[2]怎样设计好网页
设计出好网页并不是那么简单的,这需要一定的技术能力和经验积累,那么怎样才能设计出一个好的网页呢,这一节为您比较系统地介绍整个设计网页所需要的一些步骤
工具/原料
Dreamweaver CS6
一、网页设计的三个理念
1、内容决定形式
先充实内容,再区分快,定色调,处理细节
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/51f9aa3ea8db574a9157872fa7f7dfb2dd1917f8.jpg)
2、先整体,后局部,最后再回归整体
首先要全局考虑,把最重要的安排清楚了,再处理局部一些区块,最后还要整理整个网页的和谐性。
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/2db6c1b2dc19ce2c2a7e0a6d7fdca039121f11f8.jpg)
3、功能决定设计方向
根据网站的功能,决定出设计的方向,比如商业网站,就主推盈利,政府网站,就要注重权威
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/5a5a00def4dca039667ada5f58d96975f3c40df8.jpg)
二、网页设计的三大误区
1、不重视域名和空间
一个空间可以存放很多个网站,一旦一个网站出了问题,其他网站都将受影响,所以选择好的,有保障的供应商非常重要。
2、注重外观,不注重实用
很多企业网站有很华丽的宣传页面,但却几乎都是静态页,没有实用功能,那这个网站是承担不了什么任务的。
3、网站维护的缺乏
我们说一个网站是有生命的,需要你经常修修补补,让它更完美。如果荒废在那里,那还不如不做这个网站。
三、什么才是好的网页设计
1、内容和功能决定表现形式和界面设计。
比如淘宝,主要就是卖东西,那就必须设计得让人买东西的时候直接了当。
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d91110e67767995943050108f8.jpg)
2、界面弱化
比如优酷网,很简洁的排版形式,与其他视频网站比起来并不显得很华丽,甚至很朴素,但正因为其功能突出,所以一直做得很好。典型的内容大于形式的网站。
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/cfadcdd96975f2c496fc4df08f0148fe1f4206f8.jpg)
3、模块化和可修改性
模块化不仅能提供重用性,也能统一网站的风格,还能降低开发的强度。
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/49bf00425d6b04d1c84c8e3bb213e8e5edee01f8.jpg)
4、强大的分析能力
一个最简单的例子,你在淘宝上搜了什么东西,在各个网站的淘宝推广窗口,立刻也出现你刚刚搜索的东西的相关内容,不信你仔细观察一下。
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/9bc92713e8e5ecee2bd9aa9ccc704618deda7af8.jpg)
四、配色原则
1、网页最常用的流行色
蓝色、绿色、橙色、暗红
2、颜色的忌讳
忌脏、忌纯、忌跳、忌粉、蓝色忌纯、绿色忌黄、红色忌艳
3、常见的几种固定搭配
蓝、白、橙
绿、白、蓝
橙、白、红
暗红、黑
五、常用的网页布局
1、国字型
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/bf6e59704618dfda6f5e2f3589214f57925677f8.jpg)
2、拐角型
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/3ac71c214f579356c3deec93effb960b302170f8.jpg)
3、标题正文型
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/974a2f21056104a3c28c971d63d7592ae2ef6bf8.jpg)
4、封面型
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/e996472ae3efe0788954cb05b96c576698cf65f8.jpg)
5、T结构布局
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/332d496699cf02538c0637366b36e29146e85ff8.jpg)
6、口型布局
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/22c4fe36e29147e89b852dc1b603bbea3f8658f8.jpg)
7、三型布局
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/38332303bbea3e869d2d75f05cd4483105eb55f8.jpg)
8、对称对比布局
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/5e4e9c2b74ee1c32fc7d459f07f1d8a727334bf8.jpg)
9、POP布局
![Dreamweaver CS6如何应用:[2]怎样设计好网页](https://exp-picture.cdn.bcebos.com/506d92f1d8a72633f4e1d950c02c56ee7a7f44f8.jpg)
六、网站构建原则
1、明确网站建立的目标和原则
2、网页设计总体方案主题鲜明
3、注重网站的版式设计
4、体会色彩在网页设计中的作用
5、实现网页设计形式与内容的统一
6、三维空间的构成和虚拟现实
7、网页设计中多媒体功能的应用
8、结构清晰并且便于应用、
9、定期进行网页测试和改进
(共篇)上一篇:什么是网页|下一篇: