AIO网页设计方案系统教程(一).docVIP

AIO网站设计系统教程（一） 作者：anylee 来源： 为什么编写AIO？ 我想更多人学会网站设计！纯爱好，无目的！ 从2000年开始到现在我所学到的有关于网站设计的所有知识，绝大部分都是自己摸索的。期间遇到问题的时候我喜欢到论坛发问，到搜索引擎查询，或者向我的拍档兼哥们（我佛山人）请教。最终才有我现在的一技之长，虽然不值得炫耀但是我引以为傲：） 现在网上已经有很多有关网站设计的教程及资料，但是却没有一本系统性的从设计到前端代码的完整教程。说真的我很想当师傅，但是我却不想收徒弟，我只想交更多志同道合的朋友，用我的方式传授我所懂得的技术和经验。我的文笔功底有限，但是我还是厚着脸皮和大家一起分享。请多多指教！ 开始之前 人生就像一条曲线，每一个阶段都会遇到不同的人和不同的事！认真对待每一个人，认真对待每一件事！珍惜每一个学习的机会，选择自己喜欢的，不要计较它是否能够为你带来什么！因为他们将会是你人生曲线上的每一个点，也正是这些看似平淡且独立的点描绘出你的精彩人生！–AIO anylee 2009.10.19 All（一切）梦想从这里开始，一切就在AIO!简单直观的讲述网页设计的整个流程，帮助你了解页面从构思草稿到设计稿，从设计稿到HTML，然后对HTML添加动态元素。同时让你熟悉并精通这些知识。 In（集合）集合了效果图设计软件（Fireworks），网页可视化编辑软件（Dreamweaver），DHTML必备语言（Javascript），动态效果辅助软件（Flash）等软件应用操作技巧。 One（统一）熟悉网页设计流程：构思-草稿-设计稿-HTML-动态HTML，精通必备软件和语言。这就是网页魔法（web magic），最终成果是什么？存在于你的脑袋里，掌握在你的手里！从现在开始，你就是魔法师！ 形式主义（SS） 形状（shape）,样式风格（style） 任何事物都有形状以及独特风格！人的身材外观，衣着打扮正是形式之一。同样，物品（不管是真实的还是虚拟的）都应该具备形式，网页也应如此。整体版式谓之外形，色彩和效果谓之风格。这是我对形式的理解，纯属经验之谈。 效果图的整个设计过程应该遵循以下三个步骤：版式（外形,包括：平面和立体），色彩，质感、效果。大到页面整体版式，小到一个按钮一个图标都离不开这三个步骤，万变不离其中。 另外有一个值得注意的是：在效果图设计过程中，别忽略了可用性、易用性和人性化。举个例子：如果设计好了一个黑色背景的导航，而导航条的文字却用了深蓝色。试想一下，这样的对比度如何让用户清晰浏览信息呢？ 第一节：关于图片格式 常见的图像文件格式包括：BMP、GIF、JPG、JPEG2000、TIFF、PSD、PNG、SVG等，其中网页上面常用的格式：GIF、JPG、PNG。接下来我们简单了解一下这几种图像格式。 一、GIF格式 GIF是英文Graphics Interchange Format（图形交换格式）的缩写。顾名思义，这种格式是用来交换图片的。事实上也是如此，上世纪80年代，美国一家著名的在线信息服务机构CompuServe针对当时网络传输带宽的限制，开发出了这种GIF图像格式。 GIF格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图象进而形成连续的动画，使之成为当时支持2D动画为数不多的格式之一（称为GIF89a），而在GIF89a图像中可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。目前Internet上大量采用的彩色动画文件多为这种格式的文件，也称为GIF89a格式文件。 此外，考虑到网络传输中的实际情况，GIF图像格式还增加了渐显方式，也就是说，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分，从而适应了用户的”从朦胧到清楚”的观赏心理。目前Internet上大量采用的彩色动画文件多为这种格式的文件。 但GIF有个小小的缺点，即不能存储超过256色的图像。尽管如此，这种格式仍在网络上大行其道应用，这和GIF图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的。 二、JPEG格式 JPEG也是常见的一种图像格式，它由联合照片专家组（Joint Photographic Experts Group）开发并以命名为”ISO 10918-1″，JPEG仅仅是一种俗称而已。JPEG文件的扩展名为.jpg或.jpeg，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据，获取得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。