CSS网页设计紧急充电

最近的生活只一个词,忙乱~

好些寒假未完成的工作积压,许多学了好一阵的东西实践不出来,连文字也牵强语言也匮乏,知识也似被掏空,经常出现断面和崩溃前迹象,需要恶补。工作紧迫,先上的都是正餐~

CSS


还是CSS, 《权威指南》第一版看过,没想到和第二版的差异竟然很大,悔不该将宝书压箱雪藏。那本阿捷(傅捷参译)的《网站重构》还须细读,为论文提炼素材。不过只凭网络上的少许知识加上CSS权威指南附录的CSS属性索引,配合Dreamweaver也算凑和把页面方案做出来了,只是耗费了很多精力,因为框架划分不合理重作了好几次。

值得推荐的几个实用教程

1.前期准备:网站-w3cn;书-《CSS权威指南》 《网站重构》

2.实践:有好的CSS样式作为学习的参照,在其基础上挑选、修改和补充,最终完善成自己需要的样式对于首次做的人来说很有益处。

推荐的网站--

Just平生一笑 (平生一笑Blog的CSS简洁清楚,一目了然,而且有一些高级应用范例,如右侧菜单样式等,是首推的CSS样式经典)

w3cn (阿捷是国内引进和推广CSS的前辈,网站很规范,多行多列的CSS代码值得研究和学习,只是有些繁复了,研究都需要花些功夫,对于门户类的样式应该帮助大些)

推荐的软件--也算不上软件了,就是mathone和firefox浏览器,在两个浏览器里测试,可以兼顾样式表在不同环境下的呈现状态。此外mathone插件可以帮助调试和解决问题,firefox自带的w3c验证可以随时测试网页是否能通过标准验证。


值得注意的几点:

一是,由设计图到网页的过程看似一个拆分-组合的过程,其实不然。html化时不仅要考虑图片切割,布局,区域划分等等,还要考虑整个页面嵌套的结构和层次。除此之外,CSS化有时还要精确pix背景和文字对齐等样式,非常麻烦。这也是我“为CSS抓狂”的原因所在。

另外,在DW中调节的元素属性经常会和w3c不兼容,那是因为DW中的有些不符合规范,所以属性能少加,尽量少用,还容易产生冗余代码,扰乱检查的视线。有能力里话,最好进行必要的手工代码核查一步。

时间所限,我的页面样式很复杂,结构上还是基于position的定位,所以对各元素的position和width,height,border,margin以及padding属性都要求比较严格--失之毫厘,谬以千里。调整和饿修改都比较麻烦,当然算不上好的css,希望有时间再逐渐改进了。

myokindex-060303


关于JS菜单

以前用的powermenu好像不错(实现竖排列)。这次设计需求是类似macromedia导航那般的横排列(MM的那个是用Flash做的)JS菜单,找到了Sothink魔法菜单(SoThinkDHTMLmenu)。

功能实现上看似很强大,内置许多模板,基本能满足各种设计需求。界面比较友好,易学,易上手。只是内置的菜单模板大多太花哨,不论是用色还是显示方式,只能自己挑选简单的样式,慢慢调试(比较花功夫)。
还有一点麻烦的是,导出时,有多个(9)js文件同步调用--呵呵,菜单兵团。

in-index-060303

还有些问题,就是次级菜单明明一样的,可是行高却有差异,造成效果的微瑕。


配色宝典

使用CSS其实也代表了一种趋势,简洁明快。其实这种风格一直以来都是设计者追求的终极目标。多用色块,少依赖图片还能大大提高页面速度。这样对于配色和色感要求就高了。此次设计在色彩上花了大功夫,虽然还是走稳实平和的线,但自我感觉,这次配色体验比较丰富和成熟。

design-express

网络上有些色卡还是值得看看学习研究的,此外培养对色彩的感觉很重要。有本《设计师谈网页配色》随书光盘中有配色训练的Flash游戏,感兴趣的朋友可以试试。

游戏分为四类:Color Match、Tone Match、Adjective Match、Adjective Circle Match

下载1(444k) 下载2


CSS相关学习资料还可参看

DHTML&CSS

以前也提供国一些免费配色软件 私藏两款swf配色软件和屏幕取色软件