Web标准网页设计之道-1

### 网页和网站
    * 所有通过浏览器在WWW上所看到的每一个画面就是网页
    * 网站就是网页的集合
### 静态网页与动态网页
    * 纯粹HTML格式的网页通常被称为“静态网页”,静态网页是标准的
HTML文件,它的文件扩展名是以.htm、.html、.shtml、.xml等常见形
式出现。
    * 采用动态网站技术生成的网页都称为动态网页。动态网页URL的后缀则是
以.asp、.jsp、.php、.perl、.cgi等形式出现的
    * 静态网页的特点:
    >1. 内容相对稳定,因此容易被搜索引擎检索
    >2. 没有数据库的支持,再网站制作和维护方面工作量比较大,因此当
    网站信息量很大时,完全依靠静态网页的制作方式比较困难
    >3. 交互性较差,再功能性方面有较大的限制
    * 动态网页的特点:
    >1. 以数据可技术为基础,可以大大降低网站维护的工作量
    >2. 采用动态技术的网页可以实现更多功能,如用户注册,用户登录,
    在线调查,用户管理,订单管理等。
    >3. 实际上并不是独立存在于服务器上的网页文件,只有当用户请求时,
    服务器才返回一个完整的网页。
### 网页的基本构成元素
    * 文字、图形和超级链接就是最基本的三元素。
### 网页设计的基本原则
* 明确主题
* 高质量的首页
* 合理分类
* 良好互动
* 合理利用图像
* 避免滥用技术
* 及时更新及维护
### 网页设计的色彩搭配-----色彩原理
1. 颜色是因为光的折射而产生的。
2. 由于网页是基于计算机浏览器开发的媒体。所以颜色以光学为主是RGB为主。颜
色的代码可以表示:红色#FF0000,蓝色#0000FF,绿色#00FF00,白色
#FFFFFF,经常看到“bgColor=#FFFFFF”就是背景是白色。
3. 颜色分非彩色和彩色两类
4. 任何彩色都有饱和度和透明度的属性,属性的变化会产生不同的色相,所以颜色
都太多太多的选择。
### 网页设计的色彩搭配
    * 用一种色彩。先选定一种色彩,然后调整透明度或者饱和度。
    * 用两种色彩。先选定一种色彩,然后选择它的对比色。
    * 用同一个色系。
    * 用黑色和一种彩色。
### 网页设计要点
    * 整体布局
    * 有价值的信息
    * 下载速度
    * 文字可读性
    * 导航清晰
### 网站制作流程
    
|  | 网站制作流程 |
| :----:| :----:|
|1.分析用户需求<br>2.规划站点<br>3.搜集素材<br>4.页面分析与制作<br>5.程序开发<br>6.后期维护及更新 | ![](images/web-design1.png) |
>用户提出功能需求 → 收集素材 → 设计效果图 → 排版布局 → 后台程
序开发 → 上线发布测试

### 网站配色
* 黑,白,灰这三色是万能色。
* 针对明度较高的网站,为其配上黑色,则可以适当降低明度。
* 白色则是网站中应用得最普遍的颜色,很多网站甚至留着大块的白色空间
作为组成的一部分,也就是留白的艺术。

### 小结
* 网站主要是由网页集合而成,而大家通过浏览器看到的画面就是网页,网
页是一个html文件。
* 静态网页的URL及文件后缀名一般以.htm、.html、.shtml、.xml等常见形
式出现,而动态网页URL的后缀则是以.asp、.jsp、.php、.perl、.cgi等形
式出现的。
* 网页的基本构成元素由文本、图像、动画、超级链接等基本元素构成。
* 网页设计要点:一个网站制作成功与否,我们可以从整体布局、信息、下
载速度、文字可读性、导航清晰这几点来进行检验。
* 网页配色技巧:用一种色彩,然后调整透明度或者饱和度;用两种色彩。
先选定一种色彩,然后选择它的对比色;用同一个色系;用黑色和一种彩色。
* 站主要设计流程:前期策划(用户需求、规划站点),搜集素材,页面细
化及实施(美工设计、程序开发),网站测试及改进,后期制作及维护。