CSS and XHTML: October 2006 Archives

ALA给新读者的入门指南

| | Comments (11) | TrackBacks (0)

近期ALA (A List Apart) 发表了一个系列共两篇文章“The ALA Primer: A Guide for New Readers” 和 “The ALA Primer Part Two: Resources For Beginners” 来帮助新读者更有效的通过ALA学习和掌握网站制作的各个方面.

第一篇“ALA入门:给新读者的指南”主要是在设计理念方面给出的一些文章资源,通过推荐的这些资源和文章对网站设计的大方向或趋势有个基本的认识。有意思的是推荐的第一篇文章就是“A Dao of Web Design”(网页设计之道),外国人在做网页设计的时候都要先学习下咱们中国的道德经。接下来是设计界影响巨大的“CSS Zen Garden”(CSS禅院),佛啊道啊都用上了。这张推荐单上的文章和资源虽说是关于一些大道理或理念,但读起来其实并不乏味,甚至是件有意思的事。象里面那篇“The Perfect 404”是关于404错误页面的,怎么会被列到这里呢?看过就知道了。

ALA入门之二是为初学者开出的一份长长的资源列表。哇,好多。包括很多方面,确实比较全面。我猜要是把这个页面上的东西看完并适当的做点作业,起码不是入门级的了。

虽说是给ALA的新读者的指南,但实际上也是给刚开始学习网页设计的朋友的一份入门指南。

用CSS设计圆角

| | Comments (14) | TrackBacks (0)

今天Leavic提到他喜欢CSS设计的圆角,并且是不使用图片的那种,我答应找点资料来。以前知道一点这方面的东西,但没有钻研过,今天倒是有点兴致去找找看个究竟。

很快找到了不下几打的方法,真是各路英雄大显神通。

一般来说,基于CSS的圆角技术分为带图片和不带图片两大类。在这当中,又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋,互有利弊。还有就是,处理出来的圆角有的是有锯齿的,甚至还有人就利用锯齿来做圆角,于是就有人挑战要做成无锯齿的圆角。总之,新技术在不断出现,新战友挑战老战友,仅仅这个CSS圆角技术就够热闹了。

使用图片的圆角一般结构相对简单,而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以,我希望能找到一个不用图片,不用JavaScript,并且结构简单的方法,如果可能的话,消除锯齿最好(废话!)。

这就不是件容易的事了。不过我还是找到了:就是 Spiffy Corners !它符合我的所有条件:纯CSS,没有JavaScript,结构紧凑简洁,没有锯齿,当然也不用图片。最好玩的是,作者把这个技术单独做成一个网站。

下面是结构和CSS,也就是这个页面。你在他的网站可以随意改动颜色做尝试。

<style type="text/css">
.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
}
.spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.spiffy_content{
padding:0px 5px;
background:#0a67e6;
}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div class="spiffy_content">

<!-- 在这里填入文本内容 -->

</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

应该算是满意了,可我还在继续找。很偶然的,我找到了Christian 在三天前发表的“CSS圆角大集合”,之前我找到的有大半在这里面,也有的没被列在里面。这张表列出了目前主要的圆角技术名称,分别用了几张图片,是否有用JavaScript,是固定的还是浮动的等项比较。非常一目了然,一眼你就知道哪种是你需要的了。要是我早点看到这张表就不会花几个小时到处查了,所以这张表是我查找的最终结果。

当然,Spiffy Corners 也是在其中的。你会看到,表的最下方,还有一个和 Spiffy Corners 同样参数的圆角方案是来自 CSSplay 的 Snazzy Borders。在源文件下你会看得很清楚,我不再写出来。

Christian 的这张大集合还会不断更新。希望从中你能找到自己喜欢的圆角。

我这样开始了CSS学习

| | Comments (8) | TrackBacks (0)

前段时间看了振之的“如何开始标准之路”,很有点感想,他从解剖大师的网站开始,我告诉他我从做练习开始。

大概是2004年初,我想开始学习做网页,因为我在这方面的知识为零。

让我有这样的想法是从这次经历开始的:03年底我的奔II电脑系统坏了,我请电脑城的一个小伙子来帮我重装系统,完了我问他网页是怎么做出来的,他帮我装上FrontPage,然后打开一个网页,在FrontPage中我看到了这个网页,还告诉我说,他可以把背景的蓝色改为红色。我觉得很有意思。就开始对FrontPage有好感,因为可以做网页。

于是决定要买本FrontPage的书来好好学习。到了书店我才知道还有DreamWeaver呢,这个太高深,我想还是买本儿童教材“米奇e时代”来开始,他们总不会拿儿童来教条一下的。这本90页的彩页书我象看连环画似的一下就翻完了,有点小感觉,决定要向DreamWeaver进军,马上买来“从零开始”。这次我被云里雾里了一番,说是从“零”开始,我看完还是不知道哪里是“零”。开始对国人的教材有点失望,再买来韩国人的“从入门到精通”。扎实花了一个星期,一边看一边对着做。把那些心爱的表格摆弄的得心应手,一个星期后我做出了一个“象样”的页面,那是我的第一个“作品”。

fp dwmx dw2004

我不满足这本“从入门到精通”,就到当时的Macromedia去寻找更多的信息。我在Macromedia的这里第一次看到了CSS的入门练习,我把里面的每个练习都做完了。从这里我了解到无表格的CSS设计,也是从这里我开始知道10天前学的那些东西原来都是不符合标准的方法,要从现在开始丢掉。现在都还记得当时在国外还展开了一场表格和非表格的大辩论,到今天已经没有人去争这个了,因为不需要争,大家都明白了。上面的那三本书页永远的在我的书架上存档了。学了一个星期的表格就要在10天后丢掉。是可惜还是庆幸啊?

当时上海福州路所有的书店我找不到一本关于CSS的书,摆满半层楼的都是表格表格表格,都是非标准的方法(直到今天还是没有什么变化,还在表格)。我被迫整天泡在满是英文的相关网站上。是痛苦还是快乐?

我在Macromedia只呆了不到10天时间,就到处乱跑了。我还要找循序渐进的练习来做,要找CSS的教程。现在回想起来,那时候让我得益最大的是 CSS完全指南MaxDesign。前者让我了解CSS的规则,后者一步一步的练习让我直观的感觉到每个标签和属性给页面带来的变化,每往前走一步看到自己做出来的和教程的效果一样,都会有种巨大的成就感。

也就从那时候开始,只会用手写代码,反而不知道所见即所得了。

后来没多久,我又看到了Veerle的这个CSS模板设计 的教程,真是不错。从一个页面设计的最开始到结尾,包括怎么做,为什么这么做,原理是什么,根据是什么,都解释的非常详细。

从这些地方我对CSS有了初步的认识,我找到了“零”也已经开始出发了。

两年多时间过去,现在的资源更多,国内相关的书籍也开始出现,开始学习标准设计的朋友也更多了。

JoshuainkSimplebits 都在我的feeds名单里,所以他们这些设计师的页面实在是很熟悉。

今晚照例又打开FeedDemon,看到了John的这篇“一切的根源”,他指到一个提供模板下载的页面。所以John发出这样的感叹:“哇,所以现在我总算明白为什么我的这个网站会有那么多个人版本冒出来......”

对我来说,其实并不是第一次看到提供这类模板的站点。但看到被点名还真的是第一次。

将这些设计师的作品原封不动的一把抄过来,然后提供给大家做模板。我是发自内心的佩服他们的水平,因为他们可以将国外的不同系统的blog模板转换为其他的各种blog系统的模板,没有一定的水平是不行的。除了技术不说,光是体力劳动都不知道要付出多少。

想到这里我就更不明白了:他们有足够的技术,又有那么多的时间和精力,为什么就不去做自己的作品呢?设计出好的作品可以受到尊重,何苦折腾自己。

不过没有关系,不能弄明白的事情多了。

我还看到过另外一个blog,是用的Simplebits的设计。那是去年的Simplebits的设计,今年Simplebits作了改动。下面的页脚有“Template by SimpleBits.com”,连那个在设计界有名的三个方块都被用作了logo,唉,没有话说了... ...

About this Archive

This page is a archive of entries in the CSS and XHTML category from October 2006.

CSS and XHTML: September 2006 is the previous archive.

CSS and XHTML: February 2007 is the next archive.

Find recent content on the main index or look in the archives to find all content.