样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

CSS网页布局与定位
XHTML中对象的显示方式：display:block/inline/none/inline-block/list-item;
CSS网页布局方式：浮动布局（float）和定位布局（position）　其核心都脱离于文档流的控制
设置对象的浮动方式 float:none/left/right; 　浮动的清理：clear:left/right;
设置对象的定位方式 position:static/absolute/relative;　深度：z-index数值较大对象层级位于数值较小对象之上
float:left;用于对象的布局控制；display:inline;用于信息的组织
空白边上下叠加时，以较大的margin值为准，主要是基于对段落控制的考虑。但对其设定float属性后，将不再进行空白边叠加。
IE6中左右margin加倍问题可用display:inline;解决

Web上的中文排版
选择合适和单位：
em：在任意的浏览器下能弹性地缩放字体的大小；
px：唯一能够精确到像素的指定大小的方式；
pt：唯一能够指定绝对的物理长度的方式.

每行的宽度：52～78个英文字符、汉字保持在30～40个字符为宜
词间距：对于标题（h1、h2）等字体比较大的文本应当适当缩小词间距，对于使用了粗体、斜体的文本应当适当增大词间距。这种增大或缩小以不超过原词间距的50%为宜。
行间距：默认行高line-height:120%;
字间距：对于全部由大写字母组成的缩写和较长的一段数字可适当放宽字间距
对齐：不要使用左右对齐text-align:justify;
text-overflow:ellipsis;当对象中的文本超过行宽时，可以对文本末端增加省略标记，但只有当对象设置为不换行显示时才有效即word-break:keep-all;
overflow:visible/auto/hidden/scroll;
强制换行{word-break:break-all;word-warp:warp;}使中英文文本都得到较好处理

图片样式设计
图片剪切
图片定位方式：margin外边距控制图片位置的相对定位
图片剪切方式：div强制剪切图片大小利用overflow:hidden;
利用clip:rect(number1 number2 number3 number4);对象须设置position:absolute;
图片替代文本
可利用text-indent隐藏文本

CSS缩写
字体缩写
font:font-style│font-variant│font-weight│font-size/line-height│font-family;
font-style:normal/italic/oblique；
font-variant:normal/small-caps;
text-transform:none/capitalize/uppercase/lowercase;
text-decoration:none/underline/line-through/overline;

边距缩写
margin:margin-top│margin-right│margin-bottom│margin-left;
padding:padding-top│padding-right│padding-bottom│padding-left;

border缩写
border:border-width│border-style│border-color;

list缩写
ul/ol list-style:list-style-type│list-style-position│list-style-image;
如果要设置特殊项目符号并要求精确定位，可利用li的background属性设置。

background缩写
background:background-color│background-image│background-repeat│background-attachment│background-position;

伪类与伪对象
伪类 用途
:link a链接标签的未被访问的样式
:hover 对象在鼠标移上时的样式
:active 对象被用户点击及被点击释放之间的样式
:visited a链接对象被访问后的样式
:focus 对象成为输入焦点时的样式
:first-child 对象的第一个子对象的样式
:first 对于页面的第一页使用的样式
伪对象用途
:after 设置某个对象之后的内容
:first-letter 对象内的第一个字符的样式设置
:first-line 对象内第一行的样式设置
:before 设置某个对象之前的内容

XHTML标签与功能
结构标签 Meta信息
html html根元素 DOCTYPE 文档类型指定
head html头部区域 title 浏览器标题栏
body html主体区域 link 链接到扩展资源
div 区块定义标签 meta Meta信息
span 行间区块定义标签 vstyle 样式表区域

表格表单
table 表格 form 表单区域
caption 表格标题 input 输入框
thead 表格头部 textarea 文本框
tbody 表格主体 select 下拉列表
tfoot 表格底部 option 下拉列表项
tr 行 optgroup 下拉列表项集合
th 表头 button 按钮
td 单元格 label 标签
col 表格列 fieldset 标签页
colgroup 表格列的集合 legent 标签页的标题

文本控制列表
p 段落 ul 无序列表
h1～h6 标题1～6级 ol 有序列表
strong 加重重点 li 列表项
em 重点/强调 dl 带描述的列表
abbr 定义文本的简写词 dt 描述列表中的名词
acronym 定义首字母简写词 dd 描述列表中的描述
address 标签联系信息 图像和对象
bdo 字母顺序左右反转 img 插入图像
blockquote 块状引用内容 area 图像热区细节
cite 行间引用内容 map 图像热区
q 行间小型的引用 object 插入对象
code 源代码区 param 对象的参数
ins 编辑注解：插入内容 表现
del 编辑注解：删除内容 b 加粗
dfn 文本术语注释 i 斜体
kbd 文本需要键盘输入 hr 分割线
pre 预格式化文本 sub 下标
samp 举例 sup 上标
var 文本是一个变量 big 加大
br 回车 small 减小
tt 打字机字体

链接脚本
a 链接 script 脚本区域
vbase 基础链接类 noscript 无法执行脚本的替代

这片文章大体概括了一些设计网页中的大问题。希望能给你做下一个网页时给予一些儿启发。

1.记住：你能掌控的时间是有限的
我仅仅用4秒钟就能浏览完平常的页面，因此，你没有足够的时间吸引用户并让他们继续浏览你的网站。也就是说你应尽可能准确的描述你设计的网站是关于什么的。如果它需要让浏览者花费更多的时间去弄明白此网站是关于什么的，他将放弃并离开。

2.记住：用户是略读页面
当你进入一个房间时，你不会具体的看每一样东西的外表。首先你会注意屋子里面人或物的外形，你环视整个屋子，然后找令你敢兴趣的东西。在第一次浏览网站的时候也会发生类似的事儿，浏览者或用户首先是大体浏览一下。这就需要你引导用户去你想要让他们去的地方。它可能是个登陆按钮、更多内容按钮、或博客文章等等

3.网站的左上角是最明显的位置
这是大家公认的事实。主要原因是大家都是用这种习惯方式来读书读文章的（从左上角的位置开始），另外早期的网站和应用软件也是基于此方法进行设计开发的。我们通常会把LOGO放在左上角，这样是很好的。但是考虑一下加入一个或者两个其他的元素在这个位置让它看起来更明显（注册的链接、搜索的表单、标语等）。

4.了解“F”结构
一些视觉跟踪调查研究证明，用户浏览网站的视觉路线类似于字母“F”型。最顶部的位置总是能被看到，中间区域仅有一半被看到，再往下只有左边一部分能被看到。当你在设计的时候不知道将一个内容块放到社么位置的时候，你可以去考虑一下这一因素。

5.了解用户忽略什么
用户都是对广告视而不见的。他们习惯于忽略图片广告和文字广告。避免设计的东西看上去像广告，同时，用户也会忽略大块的文字区域。没有人有时间（更确切的说是耐心！）去阅读大片的文字，他们仅仅是了解页面文章的大意。

6.文字和图片
一个有趣的事实是。文字比那些绝妙的图片更能够获得注意！如果你想向你的用户传达信息，我建议你使用大的标语文字来代替那些很炫的头部图片……

7.用设计元素来吸引注意
来吸引注意的好的元素是文字口号，行动纲领的按钮（通常用亮色调），分成1-2-3级，或者就是一个普通的列表……
如果你在写一篇很长的文章，很重要的一件事情就是你要去找小标题。小标题比其他的内容容易获得关注。使用恰当的标题，通过这简单的步骤向用户阐述这篇文章的主题。

8.文字格式
恰当的文字格式的编排更有意于阅读。不要担心使用过多的段落、加粗、斜体、引用、下划线或者字母大小写……它们都可以让文字块更有视觉冲击力。当然，你也需要用格式化强调一些你认为很重要的文字或者句子，这些能够引导你的读者阅读完全文。

9.使用简洁图片
我前面已经提及过用户对广告是视而不见的。当你在设计过程中使用到图片时，要确保它们不要杂乱、令人讨厌或不被理解。大部分人感觉看杂乱、色彩花哨的图片是比较费劲儿的。图片应该简洁、易理解的。
你使用人的脸部图片更容易引起用户的注意，尤其当图片人物的眼睛盯着用户。当然你也可以用目光的方向来引导用户关注某一个方向。

10.使用留白
使用留白可以给某些元素更多的可视空间，如果某元素与边距或其它元素太近就容易被混淆，那就需要给它留点呼吸的空间。尤其在文字与文字内容之间。

推荐文章：深色调网页界面设计注意事项
中文原文：如何做网页设计的10个小窍门
英文原文：10 short ‘n’ sweet tips on how to design for web

1、pngfix，使用js代码、AlphaImageLoader滤镜和一个透明gif来模拟png透明
使用方法：
第一步，把blank.gif、pngfix.htc和pngfix.js放在同一个文件夹里面
第二步，
第三步，在CSS样式表里制定标签应用 img,div,a,input {behavior: url(pngfix/pngfix.htc);}

2、DD_belatedPNG_0.0.8a，这个js插件使用了微软的VML语言进行绘制
使用方法：

优点：支持background-position定位，支持a：hover
缺点：因为是一个一个绘制的，如果png多的时候就有问题了，速度慢得有点受不了。
建议：
1、实在要使用这个js插件的话，可以在函数调用的时候，精确指定应用png的标签样式。例如：DD_belatedPNG.fix(’.png_bg’);尽量少用标签，这样遍历所有标签是一件很痛苦的事情。
2、也可以把所有需要做透明的png图片设计成全背景，然后通过一个CSS样式引入，再通过DD_belatedPNG.fix（”）指定。例如：把所有图标设计成全背景，CSS样式.icons {background-images:url(img/icons.png);},DD_belatedPNG.fix(’.icons’)。

还有值得提醒的几点，只要你遵循下面的几点，IE6会让你好过一点：
1、如果是多张图片合并的一张大图，每个图片之间留几像素空隙
2、每个图片宽高都尽量是偶数，图片坐标也是偶数（IE6的奇偶数是个超级大问题）
3、如果背景填充使用右对齐或者底对齐，那么还是会因为填充对象的宽高出现奇偶BUG，所以尽量用偶数坐标定位（这个就是我说的些许问题，其它都还好）

总结经验,我个人还是建议使用CSS滤镜来实现。几K的CSS代码，和一个可能带来缓慢访问速度和js冲突的js插件，你选择那一个？至于链接失效的问题不仅仅可以设置链接的position相对定位，也可以对该内容所在的层进行相对定位设置。

心得体会：其实用什么软件并不重要，重要的是它能否实现你想要的效果，最大限度的提高你的工作效率！
Tips：开始学习之前，设置软件工具。“窗口”-“工具栏”-“主要”，“窗口”-“属性”，“窗口”-“工具”。

Fireworks软件核心，根据“形式主义”我大致分为以下几部分：
一、造型（形状）
1、常规图形
一般用到的造型有矩形、圆形、星星、多边形等。在左侧工具栏的矢量面板里如图(形状工具)。如图：3.1

2、钢笔工具
一般用来绘制非常规造型，通过节点调节。如图：3.2

3、字体工具
用来输入界面上用到的字体或者模拟内容。字体本身填充选项里带有渐变填充，可以方便实现渐变字体。如图：3.3

4、切割工具
在web界面设计过程中很多时候需要对绘制的图形进行切割，以实现某种视觉效果。如图：3.4

5、组合路径和改变路径
组合路径，也就是组合图形，把一个或者多个图形组合成特定图形。打开菜单“修改”-“组合路径”，如图：3.5.1

改变路径，也就把路径简化、扩充、伸缩。打开菜单“修改”-“改变路径”，如图：3.5.2

6、图形操作
“修改”-“蒙板”、“变形”。如图3.6

二、滤镜效果（效果样式）
一般比较常用的有：“阴影和光晕”、“模糊”、“Bevel Boss”、“Alien Skin Splat LE”。如图3.7

三、渐变和羽化（质感样式）
渐变和羽化是web界面质感营造的根本，可以实现如：高光、内侧光、流光等。如图：3.8

四、层面板
“层面板”可以让你方便管理设计稿上面各个部分的元素。通过“层文件夹”来划分每一个独立部分，而层则是用来存放位图或矢量图元素，层具有层次关系。如图：3.10

Tips：
1、fireworks输出图片：
按下Ctrl+Shift+X调出“图像预览”窗口，选择“格式”为“GIF”，“调色版”为“精确”或者“最合适”，如果希望使用透明背景，在“不透明”下拉框选择“Alpha透明度”。
选择“格式”为“JPEG”可以选择品质为：80（图片质量较好，体积适中），100（图片质量最好，体积较大）。
选择“格式”为“PNG-32”，一般用于背景透明度质量要求较高的图片中，不失真的背景透明。

2、12px像素中文
使用字体工具输入字体，在“属性”面板里选择“不消除锯齿”，外框颜色任意设置。如图3.9

附录：快捷键一览
Ctrl+N新建
Ctrl+Shift+S另存为
Ctrl+S保存
Ctrl+C复制
Ctrl+V粘贴
Ctrl+X剪切
Ctrl+Z撤销
Ctrl+Y重做
Ctrl+R导入
Ctrl+O打开
Ctrl+G群组
Ctrl+Shift+G取消群组
Ctrl+Shift+X图像预览，可以设置输出图片的质量
待续…

网站定位，就是网站主题。你的网站是什么用途？希望传递什么信息？哪怕你只是记录自己的心情或者与好友分享自己的照片，这些都属于网站的内容，同样也是网站的基本主题。

内容分类，就像你的电脑文件一样，网站内容也需要分类管理。这样会更加条理清晰、一目了然，同样也为用户查找内容提供方便。试问一下，谁喜欢乱七八糟呢？

现在就拿ieic首页作为例子，开始我们的AIO之旅。
网站定位：一个关于工作室的网站，包括：简介、作品、联系方式。
内容分类：首先是提供一个返回到首页的连接“首页”，接着是工作室简介“关于我们”、作品展示“界面美化、网站设计”、联系我们。
风格定位：色彩选用了黑色主色调、粉红色、橙色、灰色作为辅助色。界面主要应用了渐变（包括：倒影、元素质感）、发光效果和阴影效果。
动态化预设：导航菜单应用鼠标移上淡出效果（实现方法：JS和Flash）、广告系统（JS）、作品弹出展示效果（JS）。

一般情况下，我喜欢手绘草稿。鉴于手绘能力有限，为了更加美观一点我还是选择使用Fireworks绘制一个。如图2.1：

一、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，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据，获取得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。

同时JPEG还是一种很灵活的格式，具有调节图像质量的功能，允许你用不同的压缩比例对这种文件压缩，比如我们最高可以把1.37MB的BMP位图文件压缩至20.3KB。当然我们完全可以在图像质量和文件尺寸之间找到平衡点。

由于JPEG优异的品质和杰出的表现，它的应用也非常广泛，特别是在网络和光盘读物上，肯定都能找到它的影子。目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快，使得Web页有可能以较短的下载时间提供大量美观的图像，JPEG同时也就顺理成章地成为网络上最受欢迎的图像格式。

三、PNG格式

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

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

PNG的缺点是不支持动画应用效果，如果在这方面能有所加强，简直就可以完全替代GIF和JPEG了。Macromedia公司的Fireworks软件的默认格式就是PNG。现在，越来越多的软件开始支持这一格式，而且在网络上也越来越流行。

以上文字来源网络，我进行一些总结：

1、GIF是一种无损图片格式，修改图片之后质量不会损失。
优点：体积小，支持半透明（全透明或全不透明）。一般应用于小图片或者色彩比较简单的图片。如：小图标、按钮等。（举例：小图标、按钮）
缺点：应用半透明的时候，有锯齿，边沿不柔和平滑。
Tips：记得输出的时候选择：精确。Ctrl+Shift+X打开图像预览（如图:1.1）

2、JPG具有比GIF和PNG更加完美的色彩，色彩丰富的图片建议使用。
优点：色彩丰富
缺点：每修改一次，都会造成图片质量损失，失真。

3、PNG分为PNG-8，真彩色PNG（PNG-24和PNG-32）
优点：体积更小，支持alpha（全透明）。
缺点：不支持动画，ie6只支持PNG-8透明，PNG-24和PNG-32透明需要hacker。
Tips：PNG可以实现很多意想不到的视觉效果，不妨多尝试一下全透明图片。（如图1.2：红歌会导航）

解决方法：
PNG图片在IE6上的透明问题:
来源：http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/

tips
图片压缩：
来源：http://www.ediyang.com/image-optimization/
首先,我们如果是在Photoshop中制作的图片或是网站素材,在保存图片时,切记选择”文件-存储为Web和设备所用格式”.因为这样往往在同等质量下能获得更小的图片体积(相比直接”存储为”)

Smush it!
在按照上面方法存储图片之后,其实还是可以继续压缩图片大小的,而且我谈论的是不对图片质量造成损失的方法.
Smush it!包含在著名的著名插件YSlow之中,并确保已经安装了Firebug.使用方法很简单,只需要在YSlow中打开”tool”下的All Smush it! 将会跳转到一个新页面,对当前网页的图片进行压缩.而这些压缩都是在不损失图片质量下进行的.所以你大可放心.

由于”实践是检验真理的惟一方式“,那么我现在用Smush it!对本网站及vikiworks.com分别进行测试,结果显示ediyang.com首页的图片压缩了6.52K,而vikiworks.com的首页压缩结果十分惊人,竟是46K.

由此可见Smuch it!真的是图片压缩的一大利器.
如果你想要单独压缩某一张图片,你可以到
http://developer.yahoo.com/yslow/smushit/index.html
只要填写图片的网址就可以进行压缩了.

介绍了那么多，我相信大家已经大概了解什么时候选择什么格式了。

一、web UI

也就是网页设计稿，具体用什么软件？这个因人而异，比较普遍的应该是photoshop和fireworks。而我从开始学习网页设计至今一直使用后者，不是为什么而是因为我第一个接触的制图软件就是它。于是一直钟情于fw，方便快捷的绘图，完美的渐变和元素效果，输出图形的优化，以及切片工具的集成。一切都那么方便！当然很多方面还是不如ps，但是对于设计页面效果图已经足够了。

二、HTML&CSS

效果图出来以后，接着需要做的就是把效果图切片、重新排版、写样式代码。切片其实是很有技巧的，能够重复的部分，就应该切成背景。例如：标题背景，菜单背景等。而重复可以分为：横向重复和纵向重复。至于背景尺寸应该怎么控制呢，就拿横向重复为例：高度肯定是不变的，而横向是一致的背景。曾经看过好多人都是把横向重复切成：高度固定宽度1px的背景。这样的话电脑需要运算多少次才能完成一个平铺呢？建议还是设置20像素的平铺，其实这不会增加多少kb的。

一般重排版有两种方式：

1、使用可见即可得编辑软件Dreamweaver，利用table来排版。方便快捷，但是代码可能比较多。至少比用fw直接输出的节省许多了。值得注意的是：利用table排版，一定要记住减少表格嵌套。因为表格是一个一个加载的，从里到外从上到下，加载完一个表格，再加载另外一个。嵌套越多，加载时间越长。

2、div+css，当然这个也需要可见即可得软件，只是代码模式应用的比较多。设计模式只是用来校正是否和效果图一致而已。div+css也算是网页设计的进阶阶段了，建议初学者有兴趣的可以了解一下。这方面的问题一下子很难说清楚，我们就具体问题具体分析吧！欢迎提问？：）

三、前端交互

说到前端，我也是个初学者。对于这方面还是略懂皮毛，还得加强学习。现在国内对前端交互越来越重视了，我想现在应该也有专门的岗位做前端这块的了吧：）对于一个设计师来说，我们有义务把这些都了解一下。不一定要精通，但知道能够让效果显示出来！

All（一切）梦想从这里开始，一切就在AIO!简单直观的讲述网页设计的整个流程，帮助你了解页面从构思草稿到设计稿，从设计稿到HTML，然后对HTML添加动态元素。同时让你熟悉并精通这些知识。

In（集合）集合了效果图设计软件（Fireworks），网页可视化编辑软件（Dreamweaver），DHTML必备语言（Javascript），动态效果辅助软件（Flash）等软件应用操作技巧。

One（统一）熟悉网页设计流程：构思-草稿-设计稿-HTML-动态HTML，精通必备软件和语言。这就是网页魔法（web magic），最终成果是什么？存在于你的脑袋里，掌握在你的手里！从现在开始，你就是魔法师！

形式主义（SS）

形状（shape）,样式风格（style）

任何事物都有形状以及独特风格！人的身材外观，衣着打扮正是形式之一。同样，物品（不管是真实的还是虚拟的）都应该具备形式，网页也应如此。整体版式谓之外形，色彩和效果谓之风格。这是我对形式的理解，纯属经验之谈。

效果图的整个设计过程应该遵循以下三个步骤：版式（外形,包括：平面和立体），色彩，质感、效果。大到页面整体版式，小到一个按钮一个图标都离不开这三个步骤，万变不离其中。

另外有一个值得注意的是：在效果图设计过程中，别忽略了可用性、易用性和人性化。举个例子：如果设计好了一个黑色背景的导航，而导航条的文字却用了深蓝色。试想一下，这样的对比度如何让用户清晰浏览信息呢？