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

1、个人收集整理勿做商业用途封面个人收集整理勿做商业用途作者： Pan Hongliang仅供个人学习AIO 网站设计系统教程（一）作者： anylee来源： 为什么编写 AIO ？我想更多人学会网站设计！纯爱好，无目的！个人收集整理勿做商业用途从 2000 年开始到现在我所学到的有关于网站设计的所有知识，绝大部分都是自己摸索的。 期间遇到问题的时候我喜欢到论坛发问， 到搜索引擎查询， 或者向我的拍档兼哥们（我佛山人）请教。最终才有我现在的一技之长，虽然不值得炫耀但是我引以为傲：）现在网上已经有很多有关网站设计的教程及资料， 但是却没有一本系统性的从设计到前端代码的完整教程。 说真的我很想当师傅，

2、 但是我却不想收徒弟， 我只想交更多志同道合的朋友， 用我的方式传授我所懂得的技术和经验。 我的文笔功底有限，但是我还是厚着脸皮和大家一起分享。请多多指教！开始之前人生就像一条曲线， 每一个阶段都会遇到不同的人和不同的事！ 认真对待每一个人，认真对待每一件事！珍惜每一个学习的机会，选择自己喜欢的，不要计较它是否能够为你带来什么！ 因为他们将会是你人生曲线上的每一个点， 也正是这些看似平淡且独立的点描绘出你的精彩人生！All （一切）梦想从这里开始，一切就在AIO! 简单直观的讲述网页设计的整个流程，帮助你了解页面从构思草稿到设计稿， 从设计稿到 HTML ，然后对 HTML添加动态元素。同时让

3、你熟悉并精通这些知识。In（集合）集合了效果图设计软件（Fireworks），网页可视化编辑软件（ Dreamweaver），DHTML 必备语言（ Javascript），动态效果辅助软件（ Flash）等软件应用操作技巧。One（统一）熟悉网页设计流程：构思-草稿 -设计稿 -HTML- 动态 HTML ，精通必备软件和语言。这就是网页魔法（web magic），最终成果是什么？存在于你的脑袋里，掌握在你的手里！从现在开始，你就是魔法师！形式主义（ SS）形状（ shape）,样式风格（ style）任何事物都有形状以及独特风格！人的身材外观，衣着打扮正是形式之一。同样，物品（不管是真实的

4、还是虚拟的）都应该具备形式，网页也应如此。整体版式谓之外形，色彩和效果谓之风格。这是我对形式的理解，纯属经验之谈。效果图的整个设计过程应该遵循以下三个步骤：版式（外形,包括：平面和立体），色彩，质感、效果。大到页面整体版式，小到一个按钮一个图标都离不个人收集整理勿做商业用途开这三个步骤，万变不离其中。另外有一个值得注意的是： 在效果图设计过程中， 别忽略了可用性、 易用性和人性化。举个例子：如果设计好了一个黑色背景的导航，而导航条的文字却用了深蓝色。试想一下，这样的对比度如何让用户清晰浏览信息呢？第一节：关于图片格式常见的图像文件格式包括： BMP 、GIF、JPG、JPEG2000、TIFF

5、、PSD、PNG、SVG 等，其中网页上面常用的格式：GIF、JPG、 PNG。接下来我们简单了解一下这几种图像格式。一、 GIF 格式GIF 是英文 Graphics Interchange Format（图形交换格式）的缩写。顾名思义，这种格式是用来交换图片的。事实上也是如此，上世纪 80 年代，美国一家著名的在线信息服务机构 CompuServe 针对当时网络传输带宽的限制，开发出了这种 GIF 图像格式。GIF 格式的特点是压缩比高， 磁盘空间占用较少， 所以这种图像格式迅速得到了广泛的应用。 最初的 GIF 只是简单地用来存储单幅静止图像 （称为 GIF87a），后来随着技术发展，

6、可以同时存储若干幅静止图象进而形成连续的动画， 使之成为当时支持 2D 动画为数不多的格式之一 （称为 GIF89a），而在 GIF89a 图像中可指定透明区域，使图像具有非同一般的显示效果，这更使 GIF 风光十足。目前 Internet 上大量采用的彩色动画文件多为这种格式的文件， 也称为 GIF89a 格式文件。此外，考虑到网络传输中的实际情况， GIF 图像格式还增加了渐显方式，也就是说，在图像传输过程中， 用户可以先看到图像的大致轮廓， 然后随着传输过程的继续而逐步看清图像中的细节部分， 从而适应了用户的” 从朦胧到清楚” 的观赏心理。目前 Internet 上大量采用的彩色动画文件

7、多为这种格式的文件。但 GIF 有个小小的缺点，即不能存储超过 256 色的图像。尽管如此，这种格式仍在网络上大行其道应用，这和 GIF 图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的。二、 JPEG 格式JPEG 也是常见的一种图像格式， 它由联合照片专家组（Joint Photographic Experts个人收集整理勿做商业用途Group）开发并以命名为” ISO 10918-1， JPEG 仅仅是一种俗称而已。 JPEG 文件的扩展名为 .jpg 或 .jpeg，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据， 获取得极高的压缩率的同时

8、能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。同时 JPEG 还是一种很灵活的格式，具有调节图像质量的功能，允许你用不同的压缩比例对这种文件压缩，比如我们最高可以把1.37MB 的 BMP 位图文件压缩至 20.3KB。当然我们完全可以在图像质量和文件尺寸之间找到平衡点。由于 JPEG 优异的品质和杰出的表现，它的应用也非常广泛，特别是在网络和光盘读物上，肯定都能找到它的影子。 目前各类浏览器均支持 JPEG 这种图像格式，因为 JPEG 格式的文件尺寸较小， 下载速度快，使得 Web 页有可能以较短的下载时间提供大量美观的图像， JPEG同时也就顺理成章地成

9、为网络上最受欢迎的图像格式。三、 PNG 格式PNG（Portable Network Graphics）是一种新兴的网络图像格式。在 1994 年底，由于 Unysis 公司宣布 GIF 拥有专利的压缩方法，要求开发 GIF 软件的作者须缴交一定费用， 由此促使免费的 png 图像格式的诞生。 PNG 一开始便结合 GIF 及 JPG 两家之长，打算一举取代这两种格式。 1996 年 10 月 1 日由 PNG 向国际网络联盟提出并得到推荐认可标准，并且大部分绘图软件和浏览器开始支持PNG 图像浏览，从此PNG 图像格式生机焕发。PNG 是目前保证最不失真的格式，它汲取了GIF 和 JPG

10、二者的优点，存贮形式丰富，兼有GIF 和 JPG 的色彩模式；它的另一个特点能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，因为PNG 是采用无损压缩方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG 有所不同；它的第三个特点是显示速度很快，只需下载1/64 的图像信息就可以显示出低分辨率的预览图像；第四，PNG 同样支持透明图像的制作，透明图像在制作网页图像的时候很有用，我们可以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的色彩，这样可让图像和网页背景很和谐地融合在一起。PNG 的缺点是不支持动画应用效果，如果在这方面能有所加强，简直就可个人

11、收集整理勿做商业用途以完全替代 GIF 和 JPEG 了。Macromedia 公司的 Fireworks 软件的默认格式就是PNG。现在，越来越多的软件开始支持这一格式，而且在网络上也越来越流行。以上文字来源网络，我进行一些总结：1、GIF 是一种无损图片格式，修改图片之后质量不会损失。优点：体积小，支持半透明（全透明或全不透明） 。一般应用于小图片或者色彩比较简单的图片。如：小图标、按钮等。 （举例：小图标、按钮）缺点：应用半透明的时候，有锯齿，边沿不柔和平滑。Tips：记得输出的时候选择：精确。Ctrl+Shift+X 打开图像预览（如图 :1.1）2、JPG 具有比 GIF 和 PNG

12、 更加完美的色彩，色彩丰富的图片建议使用。优点：色彩丰富缺点：每修改一次，都会造成图片质量损失，失真。3、PNG 分为 PNG-8，真彩色 PNG（PNG-24 和 PNG-32）优点：体积更小，支持alpha（全透明）。缺点：不支持动画，ie6 只支持 PNG-8 透明，PNG-24 和 PNG-32 透明需要 hacker。Tips：PNG 可以实现很多意想不到的视觉效果，不妨多尝试一下全透明图片。（如图 1.2：2009 红歌会导航）解决方法：PNG 图片在 IE6 上的透明问题 :来源：介绍了那么多， 我相信大家已经大概了解什么时候选择什么格式了。而我个人比较偏爱于以下组合：普通切图用

13、jpg，像素图标用 gif ，透明图片用 png。对于 png 在 ie6 下面的透明问题，我一般很少用js 之类的 hacker，大部分采用css自带的滤镜进行处理。如果您有什么更好的方法欢迎和大家一起交流，技术QQ群： 38574132（网页素菜库） 。待续个人收集整理勿做商业用途版权申明本文部分内容，包括文字、图片、以及设计等在网上搜集整理。版权为潘宏亮个人所有This articleincludessome parts,includingtext,pictures,and design. Copyright is Pan Hongliang's personal ownersh

14、ip.用户可将本文的内容或服务用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途， 但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。除此以外，将本文任何内容或服务用于其他用途时，须征得本人及相关权利人的书面许可，并支付报酬。Users may use the contents or services of this article for personal study, research or appreciation, and other non-commercial or non-profit purposes, but at the same tim

15、e, they shall abide by the provisions of copyright law and other relevant laws, and shall not infringe upon the legitimaterights of this website and its relevant obligees. In addition, when any content or service of this article is used for other purposes, written permission and remuneration shall be obtained from the person concerned and the relevant obligee.个人收集整理勿做商业用途转载或引用本文内容必须是以新闻性或资料性公共免费信息为使用目的的合理、善意引用，不得对本文内容原意进行曲解、修改，并自负版权等法律责任。Reproduction or quotation of the content of this ar