Web前端设计基础

网站建设流程
网站形象设计
网站布局设计
导航及栏目设计
网页层次及目录设计

网站建设流程

1. 确定网站主题
2. 资料搜集整理
   工具：搜索引擎、信息采集软件、RSS订阅
3. 规划网站
   规划的内容：
   形象设计
   布局设计
   导航及栏目设计
   页面层次结构
   目录结构设计
4. 选择制作工具

文本编辑器：记事本、写字板、EditPlus、Sublime Text、Notepad++等
所见即所得的制作工具：Dreamweaver、Visual Studio等
图像编辑工具：Photoshop、美图秀秀等
动画制作工具：Flash、After Effects、Cool 3D、GIF Animator等
音视频制作工具、网页特效工具等

5. 设计制作网页

原则：
先大后小：设计好大结构，再逐步完善小的结构
先简单后复杂：先设计出简单的内容，再设计复杂的内容
多灵活运用模块

网页设计原则：
对比性原则、简洁性原则、平衡性原则

网站首页的制作：
文档创建
内容编辑
样式创建
样式设计
元素定位
制作完善

形象设计

1. 网站的标志
   各主要栏目要求一致性、首页及各级页面都要有网站logo，并链接到网站首页
   页面长度原则：长度不超过3屏，宽度不超过1屏
   Banner广告

2. 网站的色彩
   标准色彩不超过3种
   色彩搭配技巧：
   相同色系
   对比色、互补色
   过渡色
   黑色和一种色彩
   背景和文字的对比要尽量大

3. 网站的字体

字体大小：9pt、12pt或12pt、14pt的宋体
文章正文的自豪一般使用16pt宋体
行距：10：12 即字号为10pt则行高为12pt

4. 网站的宣传标语

用一句话让用户指导网站的定位

布局设计

1. 页面布局形式

国字型

拐角型

标题正文型

框架布局型

POP型

2. 页面布局原则

主次分明，中心突出；大小搭配、相互呼应；图文并茂，相得益彰；动静结合，平衡对称。
3. 页面布局技术

DIV+CSS布局
HTML5布局

导航设计
主次导航之分
主导航放于页面首次导航一般放于页面底端

面包屑导航：主要告诉用户如何到达的位置，以及如何返回（类似电脑里打开文件一样）

栏目设计
分清栏目主次
分类、分层合理、结构合理、具有一定拓展性
注意：紧扣主题

网页层次结构
树状结构
线性结构
网状结构

目录结构设计
原则：以最少的层次提供最清晰简便的访问结构
按栏目建立子目录
目录层次不宜太深
使用意义明确的目录