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

使用CSS3添加圆角和阴影

css3-border-radius-box-shadow

CSS3是W3C发布的CSS的最新版本,支持大量强大的功能,但是由于各大浏览器对标准的支持程度不同,很难保证制作的东西在所有的浏览器中都保持一致。现在连向来对标准支持很差的IE都发布了遵循W3C标准的IE9,CSS3的特性在各大浏览器上基本都得到了实现。现在我教你使用CSS3添加圆角和阴影,另外还有CSS2中的文字阴影。

Continue reading

CSS 2.1与CSS 3帮助手册

css-help-sheets

纵使非常有经验的网页设计师也不可能有能力把所有的CSS选择器和属性全部记住。这个CSS帮助手册就是用来查询用的,分为CSS 2.1和CSS 3,内容不多,都是最主要的东西。如果可以打印下来放在桌上或者挂在墙上什么地方,想不起来的时候看一下就OK了。

Continue reading

为网页不同应用类型添加不同的CSS样式表

一般设计网页的时候只会给网页添加一个CSS样式表,这个样式表用于屏幕显示。但是可以给打印,手持设备,语音朗读设置不同的CSS样式表。

为什么要设置不同的样式表?网页中一般会包含很多除了内容之外的其他内容,没有必要把这些也打印出来,可以为打印机设备另外一个样式表,这样去掉网页中的导航条,边栏之类的部分,节约油墨和打印空间。同样对于盲人可以添加另外一个适合语音朗读程序的样式表,对于手持设备可以针对小屏幕设置另外一个内容更为紧凑的CSS样式表。

有两种方法给网页添加不同应用类型的CSS样式表,一种是把样式表分为不同应用类型的单个文CSS文件,或者把所有内容写在一个CSS文件里。

例如,现在有3个样式表,screen.css用于屏幕显示,print.css用于打印,handheld.css用于手持设备。在HTML源代码的head部分添加下面几行:

Continue reading

用图片解释CSS盒子模型

CSS Box Model

很多CSS初学者不太理解margin和padding的区别,用语言描述总是非常难懂,用一幅图片就能很好解释了。其实从这幅图基本就能理解了,但是我还是稍微的讲解一下。

由内而外开始,最里层是内容区域,一般都是在html中的<p></p>标签中。5的地方就是padding,4的地方是border,1的地方就是margin。如果说border(边框)是内阁内外的大门,padding就是内边距,也就是内容距离房屋大门的距离,margin就是外边距,是外面其他的房屋距离大门的距离。一切内容都是存在于border这个大门中的。3是背景图片,2是背景色。背景图片和背景色可以设置任何一个,也可以不设置,也可以两个都设置。当同时设置了背景图片和背景色的时候会像图上表现的一样,背景图像会覆盖住背景色,当背景图像不存在时才会显示背景色。

Continue reading

IE6,IE7,IE8 CSS兼容查询表

微软的IE系列一直都让开发人员头疼不已,对很多网页标准都不兼容。尽管IE7和IE8相对IE6来说是有进步的,但对W3C的标准支持还是微不足道,所以对于不同版本的IE对标准的支持不同要搞清楚,因此,有人制作了兼容列表,分为GIF格式和PDF格式。

CheatSheet-PAGE1 CheatSheet-PAGE2

点击图片放大保存。PDF版下载

推荐一本学习CSS和HTML的书

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

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

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

CSS与HTML Web设计实践指南

CSS中何时使用id何时使用class

CSS中的选择符除了可以选择HTML预定义的标签,比如<a>,<p>,<div>。但是可以选择用户自己定义的id或者class。id与class的最主要不同就在于id不能重复,只能使用一次,一个id只能用于一个标签。而class可以重复使用,同一个class可以定义在多个标签上。实际上从名称就能看出来id与class的区别,id是识别符,而class是类。

那么什么时候使用id,什么时候使用class?根据我的经验来看id用于特殊的标签上,因为这个部分就这么一个,没有与其他的地方重复的。而class主要用于一类有同样特征的元素上。因为id只能用一次,class可以无限次使用。

打个比方,就以一个Blog来说。一个Blog只会有一个头部,用于放置Blog的名称和Logo之类的信息。因为就只有这么一个,所以定义id是最适合的,没有其他的地方与头部类似。而在Blog首页可以显示多篇文章,一般都是10篇,那么每篇文章的内容区域都有一个类似的样式,所以定义class是最合适的,因为有10个同样样式的部分,为同一个class定义样式可以应用于10个拥有同样的class值得元素上。

也就是说,只有一个独立样式的元素适合用id,而有多个元素拥有同样的样式的话适合使用class。

用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问题最多。所以选择一个对标准的支持良好的浏览器能够使你能够更好的欣赏到网站作者的设计用心。