SoleilNeon首页大改版啦

花费一个多月策划,一个礼拜设计,一个多月后期制作,我的SoleilNeon首页大改版啦!新版页面不再使用Flash制作,推荐使用Firefox,Chrome等非IE核心浏览器观看。尽管Flash可以制作非常炫的效果,但是HTML+CSS+JavaScript的组合能过做出越来越炫的效果,曾经只有Flash才能做出来的效果现在不用Flash也能做出来了。

soleilneon-2012

页面大量的用到了CSS3,阴影,web字体,CSS圆角,CSS3动画。在火狐,Chrome,Opera上能够很完美的显示出来,但是IE就比较悲剧了,没有圆角,没有动画,没有阴影,没有CSS3动画,不过不影响整体。

其实这次改版的念头已经酝酿了一年有余了,但是一直没有足够的时间,而且我又比较懒,所以一直拖到了现在,最终还是一鼓作气做出来了。作为一个个人主页,不需要多复杂的层次结构,我喜欢简单的东西,所以这是单页的设计,但是分成上中下三个模块,还是花费了不少心思的。

至于我为什么要花费这么多的心思来制作首页呢。无非就是想通过网络来展现自己,能够有更多的机会参与一些项目的设计与制作,最终获得收入养家糊口。

上个礼拜已经完成了制作,留了几天作为测试,排除了几个小问题。也许还藏有一些小问题吧,希望大家能给我挑刺啊,帮助我更好的改进页面。点此去看看吧

HTML5浏览器兼容图表

HTML5和CSS3是今后的网页设计的趋势。Flash,还是忘了他吧,除非你需要用到摄像头和麦克风,Flash不值得你再去花时间学习他。HTML5被大多数新版浏览器支持,相比Flash,HTML5是浏览器原生支持,不是插件形式,不需要编译,维护也更方便。

但是HTML5是个非常新的标准,各个主流的浏览器对它的兼容程度不一,这一点上Flash有非常大的优势。为了让开发者了解到各个浏览器对HTML5的兼容状况有个了解,这个HTML5的浏览器兼容图表就非常有帮助。

HTML5 Cheat Sheet Browser Support

Continue reading

HTML 5参考手册

HTML 5是下一代网页标准规范,已经有越来越多的浏览器支持HTML 5了,包括Firefox 3.5以上的版本,Google Chrome,Opera 10和Safari,唯独只有IE系列还没有动静。虽然说HTML 5目前还处于阶级阶段,全面普及有可能要到2020年。但是掌握先机总是有必要的,HTML 5的多个新特性足以使网页的交互能力大大提升。HTML 5中最大的特性就是支持video标签,可以插入视频,而不需要借助例如Flash或者Silverlight之类的插件技术。

尽管曾经还有一个与HTML 5同时在制定的标准XHTML 2,不过现在随着HTML 5的逐渐成熟,XHTML 2已经胎死腹中。两者有太多的交集,没有必要同时存在两种标准,所以W3C取消了XHTML 2的制定。所以,对于广大的设计师来说HTML 5将是今后的出路。如果你想要更为华丽的特效,那么可以采用Flash。

这份参考手册对HTML 5中的所有标签功能和用法都做了细致的说明,不过是英文的,如果英文不是太好的话就开着字典看吧。

下载html5-cheat-sheet.pdf

推荐一本学习CSS和HTML的书

CSS和HTML虽然不是很难,但是看书学习还是必要的。市面上的CSS和HTML的书籍很多,但是精品太少,个人认为还是外国人写的书比较好。我要推荐的一本书是我前段时间买的《CSS与HTML Web设计实践指南》,作者为英国的Craig Grannell。这本书相当不错,把CSS和HTML放在一起讲解,比较全面。

引用书中的内容提要来说,这本书介绍如何利用CSS和HTML技术进行Web设计。从Web的发展和基础讲起,接着讲解了字体样式,图像,链接与导航,表格。而且针对目前的主流浏览器对于网页标准的不同兼容性介绍了解决方法。最后利用实例完整讲解各方面。

书是人民邮电出版社2009年7月出版的,价格49元,还算公道合理。

CSS与HTML Web设计实践指南

在HTML中给文字添加title属性

熟悉HTML的人中大部分都知道title属性存在于链接和图片中。title属性能够显示一个标题,也可能告诉人点击了链接或者图片之后会发生什么。但是有不少人都不知道文字也能添加title属性。其实这需要借助于abbr标签,abbr在英语中就是指缩略语的意思。而abbr标签中可以添加title属性,这样一个最大的用处就是在写一个缩略语的时候可以通过title属性来显示全称。

例如下面的这个例子:

<abbr title=”Cascading Style Sheets”>CSS</abbr>

接着再通过CSS修改abbr的样式让人知道这里是与众不同的:

abbr {
    border-bottom: 1px dotted #000000;
}

最终显示的就是下面的这个效果

CSS

用HTML描述内容 用CSS描述样式

Web刚开始发展的时候网页是相当丑陋的,那个时候几乎都是文字,没有色彩没有样式。Web页面使用HTML语言编写,随着Web的不断发展,人们开始注重网页的美观了,因此可以为文字设定字体及颜色,因此有了font属性,慢慢的有了各种描述外观的属性。

随着Web的继续发展,HTML变得越发的臃肿,一个HTML不仅要包含内容,还要包含他所能展示的外观。如果只有一个HTML文件倒还好,可是不多数情况都是一个网站有大量的HTML,而且样式保持一致。因此,如果当修改一个HTML的外观样式那么其他的都是跟着改,这样就出现了一个相当庞大的工作量。

于是CSS诞生了。CSS相当具有革命性,它将外观样式与内容分开,形成两个独立的部分。让HTML处理数据和结构,将外观样式交给CSS。当开发一个网站的时候,所有的网页都应该保持一致的样式,因此只需要将样式独立出来放入一个CSS文档中,然后再将所有HTML连接到CSS上。这样大大的减少工作量,而且便于维护,因为只需要更改一次CSS就可以使所有的HTML的样式发生改变。这就像是程序开发中的类。

可是CSS诞生了很久,但是依然存在将样式放在HTML中的现象,还有些情况是HTML中保存部分样式,CSS中保存部分样式,这些虽然都能显示正常不过都是不被W3C所推荐的。

还有另外一种情况,目前的各种浏览器对于网页标准的支持参差不齐,包括HTML,XHTML以及CSS。其中以微软的IE系列问题最严重,IE系列中又以IE6问题最多。所以选择一个对标准的支持良好的浏览器能够使你能够更好的欣赏到网站作者的设计用心。