Recently in CSS and XHTML Category

Photoshop设计草稿

| | Comments (14) | TrackBacks (0)

每次我在做网页设计之前,都会做些准备工作。其中的一项就是画个草稿。

对于设计样稿,我没有专门学过什么。在最初喜欢上页面设计之后,我不知道如何开始,一直在想,怎么样画草稿呢?也没有搜索过什么教程之类的,但有次好像听到过用Photoshop来画,于是我就开始学习这玩意了。

我也看过别人在纸上画草稿的,但我没有做过。虽然有些艺术效果,但和实际效果差距很大,也不好修改,形成网页效果最终还是要通过制图软件完成。但在纸上画个大概的结构和颜色搭配,再用Photoshop来实现效果也是个好办法。

为了省事,我就直接在Photoshop上画了,不好,就删掉再重新建一个文件就是。

用Photoshop画设计样稿有几个好处。

首先,对于各方面的修改和调整非常简单而效果一目了然。

其次,Photoshop本身的强大功能可以达到各种想要的效果。草稿定稿后,即从草稿输出各个页面元素。

第三,充分利用软件中的创建新图层功能。无论用它来做其它方面的图片处理还是画设计稿,一定要善于和习惯创建新图层。这不光是起到保护设计中的其它部分的作用而且还非常方便修改。当你对页面的某一元素或部分有几套设计方案时,除了创建新文件,还可以通过创建新图层来实现。在不同的图层作出不同的设计方案,隐藏一个,显示另一个,你就可以容易看到孰优孰劣。

第四,利用好图层组。将某一局部的相关设计图层安排到一个图层组中,比方页面头,有背景,logo等元素的相关图层,把它们放到图层组后,就方便识别和管理了。

事实上,我不是Photoshop行家,只会一点基本的使用。我用这点有限的基础尽量使页面好看点。

zucai zucai-

在Movable Type的模版设计中,我也是用Photoshop完成草稿的设计。去年设计的“足彩博客”,后来我不满意,撤下来了,觉得与主题不相称,缺乏一点喜气。上个星期重新画了个草稿。感觉好像是活跃了点。到目前为止,还只是草稿,很多细节还没有画,更没有来得及写html和css。顺便把前几天画的PSD文件传上来,给不熟悉的朋友做个参考。若是不幸被高手看到了,一定得好好批批。

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,唉,没有话说了... ...

在Amazon买书

| | Comments (13) | TrackBacks (0)

这段时间一直在想着要买点书来看。

今天上午终于买了。不象我平常到书店买本来就是,几十块。在Amazon买,除了书要比国内的贵,还有邮费也有点那个了,何况买得少又有点花不来,所以我狠下心来买了好几本。搞掉我一百六十美金。邮费就三十多美金(还是最便宜的那种)。

说不心痛是假的。可是当漂亮的书到达手上的时候,我敢保证这种心痛的感觉会荡然无存,绝对是值得的。

先是选了四本,后来想到我有本《网站重构》,就干脆还加了本 "Designing with Web Standards"

不知道什么时候能到,耐心等吧。

eric_mayer.jpg more_eric_mayer.jpg beginning_css css_mastery

资深CSS设计师给入门者的指导

| | Comments (3) | TrackBacks (0)

Cameron 早两天写了一篇文章,“资深CSS设计师给入门者的指导”

作为一名很有声望的设计师,在给那些CSS设计入门者的建议时,他先从自己当时是如何开始说起的:

我是怎么开始的呢?当我最开始接触Web标准和CSS的时候 - 和其他大多数人一样 - 2001年,当我在Web Design World 听到 Jeffrey Zeldman 的介绍后,我回去向我的团队(10个设计师)描述了大概情况,随后非常可惜的将这些有价值的信息束之高阁,而并没有在这方面下很多功夫。

来年我再次参加同样的会议,听同样的人发言,回来后再次向我的团队讲述结果。虽然那时互联网不景气,我的团队也只剩下4个人了,然而,就是那次我没有再把Zeldman的话当作耳边风了,也就是那时我开始认识到标准的重要性。当Blake Scarbrough (当时担任我的创作总监助理) 在那年承担起创建公司第一个符合标准的网站时我都还没有转变过来。

从此,他们一头栽进了CSS,XHTML和Web标准,并从此开始用标准来写网页。

除了给出一些自己的看法和建议,Cameron 还列出了他拟定的一些应该阅读的相关书籍,要去看的相关的blog,需要参考的有关网站和他以前的一些文章。

这的确是一份值得保存的资源,他也这么建议。

呵呵,说句真话,这些列出的网站里,只有很少几个我是去过的,至于那些书我就一本都没有看过了。

我要加油。在看到这篇文章之前,我就开始在计划要买书,还在Vick那里讨论

毛主席说的,要“好好学习,天天向上”。

Web标准与SEO

| | Comments (4) | TrackBacks (0)

不少人拒绝Web标准,不少人热衷于SEO;也有不少人在热衷于SEO的同时无视Web标准。

这两者好象关系不大。事实上,不是关系不大,是很有关系。

回想两三年以前,我也是热衷于SEO,后来知道Web标准对SEO的影响,我就开始学习CSS,XHTML,开始尝试用它们来设计网页,也越来越喜欢上了。

“写好文章”,SEO成功一半,Realazy说得很直白也很形象。

几个月前,我在A List Apart还读到另外类似的文章,象“Using XHTML/CSS for an Effective SEO Campaign”和“High Accessibility Is Effective Search Engine Optimization”,则是更加具体,一点一点参照比对Web标准和Google来解说XHTML/CSS对SEO的影响。

Web标准是大势所趋,页面的亲和力带给我们的好处当然远不止这一点。对SEO的影响只是额外的战利品,你对我友好,我也会对你友好,搜索引擎也是这么势利的。

Web标准网站陈列

| | Comments (10) | TrackBacks (0)

我喜欢Web 标准。我也在这上面花了最多的时间和精力。

我喜欢看详细的教程,正是在它们的指导下,我开始学了点东西有了进步。我也喜欢看那些优秀的web标准设计的陈列,看那些对设计的评论。

大概两年多时间以来,我收藏了一些陈列web标准设计的网站。这些陈列网站的队伍还在不断的扩大,也是在大概半年前我没有再收藏新的,不是别的原因,而是有点忙。

我觉得到半年前为止的这份单子应该还是比较全的,现在的情况怎么样,我还真有点不清楚了。遗漏的和有新的还望朋友们补充上来。

没有什么顺序:

1 -- Tom

2 -- CssMania

3 -- CssBeauty

4 -- UnmatchedStyle

5 -- CssReboot

6 -- WordStudio

7 -- CssDrive

8 -- CssImport

9 -- StyleGala

10 -- CssVault

11 -- CssLiquid

12 -- ScreenSpire

13 -- WebStandardsAwards

14 -- CssRemix

15 -- Thesis.Veracon

16 -- CssElite

17 -- DarkEye

18 -- WebCreme

19 -- DesignShack

20 -- CSSZenGarden

21 -- CssBloom

22 -- CssLove

23 -- WebDesignArchive

不管是学习还是欣赏,这份资源都将消耗你不少的精力。但你会获得欣喜。

花了点心思,还是完成了从 MT3.2 到 3.31 模板的修改。

以前我的这个设计是在 MT3.2 的基础上做的。由于CSS样式是根据页面结构来设计的,所以随着MT3.31页面模板结构的变化,其CSS样式也应该在原来的基础上做相应的变化 (了解MT3.2的模板特点)。

其实并不是件难事,有点像是帖几块创口贴的味道,贴这里不对那就换个地方贴,总会贴中那个伤口。

在开始之前,我已经新建了一个MT,把MT3.2的所有模板和CSS文件全部覆盖到新的MT(相应的模板)上面,然后"rebuild all files"。这样出来的就是原来的样式,也是备份下以前的模板和样式。如果你只是把所有模板和样式表储存在本地,那好像还不够。

所谓储存的那些3.2的模板可能是你以前自己修改的,也可能是在其他网站下载过来的主题(或皮肤),都没有关系,问题是你确定要使用它来作为你的3.3的样式。

有了上面这个备份,现在就要开始纯粹的体力活了(我是老实人,喜欢做老实事)。首先比较两份CSS文件(3.2和3.3),好苦。把3.2中没有的 class 和 ID 从3.3中复制过来,这样我这个MT3.3 的CSS 文件就应该包含以前的样式和3.3版本新增加的样式了。将它保存好之后就可以看看现在的网站是什么样子了。整个不对头了?

如果是整个的结构都走调了,那你首先要检查的是页面模板的 body 标签中的 "class=......" 是否对头,两栏,三栏还是左边右边。接下来再看 "banner" ,"alpha","beta" 等。这几个 ID 对了就应该不会走调了,布局正确。

因为你已经有了3.2 的备份,所以你开两个窗口看浏览器中的效果有什么不同的地方。本来以前这里有这个的,现在却不见了?

那你就要找到这个东西的名字才知道结果。

例如在首页,本来每篇文章标题上是有时间的,现在没有了,那就到 Main Index 模板中找找看,它的名字是 "date-header" (h2 class="date-header"),然后到CSS文件中找它的定义,你看到了:

/* Main index styles
Suppress date header on main index */
.main-index .date-header { display: none; }

这个时间被隐藏起来了。你想要它象以前一样的显示? 把括号中的 "display: none;" 去掉就是。

你发现哪个东西和以前不一样了?或者你想要它变成一个别的样子?那还是要到模板中先知道它叫什么名字,再到CSS文件中看它的定义,针对该元素的定义进行修改。嘿,先到 Firefox 下看结果,再到 Internet Explorer 下看是否正常 ! MT3.3不是新加了 TAGS 的功能吗?到 Main Index,Individual Entry Archive 和 Search Results Template 几个模板中去看看,它都分别被叫做什么名字?还是要到CSS中找到相关的定义才能对它进行修改或重定义。没有什么特别的。

MT3.31中所有的页面模板和 MT3.2 时代的一个很大的不同是每个页面模板的 body 标签都被分别同时定义了两个类,而3.2 只有一个。怎么说?

看几个模板吧:

<body class="layout-two-column-right main-index">
<body class="layout-two-column-right master-archive-index">
<body class="layout-two-column-right category-archive">
<body class="layout-two-column-right individual-entry-archive">
<body class="layout-one-column comment-preview">
<body class="layout-one-column comment-pending">

以前是类似于这样的:
<body class="layout-two-column-right">

最上面的首页模板中,body 同时被 layout-two-column-right 和 main-index 两个类定义着。不能说这是多此一举。它能更好的满足各个用户的需求,不是说“林子大了什么样的鸟都有”吗?这样你就可以把各个不同的页面做成不同的样子,只要分别定义后面那个类就是。你不想搞得那么是是非非,那就统统地把他们集合到一起给一个统一的定义,不就都一样了吗?

定义body的那些类,不一定都能在CSS中找到,有的没有,主要的几个都有。你要定义它的时候只要到模板中把它复制过来就是,或者单独定义,或者加到同类的里面让它和那些一样就是了。

MT3.3 的模板中,新加了一个模板叫“搜索模板”(Search Results Template),这在以前是没有的。加上来方便多了,而且它是个相当重要的模板类型。我在这个搜索模板中看到了不少的象铁路一样的东西:

<MTIgnore>
########## STRAIGHT SEARCHES GET THE SEARCH QUERY FORM
</MTIgnore>

如果你还不完全明白他们的含义,最好别碰他们啊,都是关于搜索的条件之类的玩意。我不明白我就不动他们。我明白那几个 clas,ID 和那几句洋文什么的,我就改动一点,翻译一下。胆小呢。

还有,那个 Comment Listing Template ,嘿嘿, 里面是空心的,什么都没有 ! 不会吧?有点吓人?那是 Movable Type 的一个小失误,他们忘记了! 可能是那个工程师正好肚子痛来不及了。不过没关系,没有什么影响。因为那是用来评论时以弹出窗口的形式用的模板。如果你不是用弹出窗口那它就没有用,如果你要弹出窗口你可以把3.2的这个模板复制过来就是。总算可以放心了!过不了几天,Movable Type 应该会针对这个模板出个通知的。

其实没有什么好说的,无非就是找来找去,比来比去的。象那首歌:“找呀找呀找呀找,找到一个朋友 ... ...”

虽然有点繁琐,细心点就好了。当最终你的修改完成时,你会觉得还算值。

有点象记流水账哦。写了一堆,也不知道朋友们是不是被我搞糊涂了?实在糊涂的话,把我这个网站的页面多翻几次可能会清醒点。

About this Archive

This page is a archive of recent entries in the CSS and XHTML category.

Blogging is the previous category.

Hosting is the next category.

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