CSS 大比拼 & 大奖赛

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

大家好,事情是这样的。我有一堆东西想送给大家,主要是关于网页设计和开发的书籍。我一直在思考如何才能把它们都送出去,我绝对不想用 Twitter 刷屏,我也不想搞那种“只需评论即可”的活动,因为我觉得太简单了,只会留下满屏的垃圾评论。

我最终想出了一个我认为不错的点子:CSS 大比拼!我从 JD Graffam 和 Tony White 那里借用了这个名字和创意,据我所知,他们是最初举办 CSS OFF 的人。不过他们已经快两年没举办了,所以我认为现在介入不会有问题。这个创意就是,你获得一个 Photoshop (.psd) 文件,你的任务就是把它变成 HTML 和 CSS。做得最好的人获胜,但是… 这不仅仅如此。请继续往下读,了解所有细节。

活动流程

在这篇文章的底部,您可以下载 Photoshop (.psd) 文件。显然,您可以使用 Adobe Photoshop 打开它,但您无需拥有 Photoshop 才能参加此次比赛。一种替代方法是使用 GIMP,它类似于 Photoshop,但它是开源且免费的。如果您在 Google 上搜索,可以找到其他可以打开您平台上的 Photoshop 文件的程序。我们还将提供一个扁平的 JPG 版本。从一个扁平的文件进行转换会更具挑战性,但也是可行的。

打开文件后,您需要做任何需要做的事情来将设计转换为 HTML 和 CSS 设计。将其切片、切分、转换,无论您想怎么称呼它都可以。您有了设计,现在将其变成一个真正的网页。

两种参赛方式,两种获胜方式

您可能会对自己说,太难了!我想要那些书是为了学习如何像那样构建网站。的确,你说得没错。像这样的比赛,以最佳作品获胜,对那些已经很厉害的人来说,就像是锦上添花。所以这次比赛的规则是这样的,前四名参赛者将是获胜的开发者,然后这四位获胜者将从这篇文章的评论中分别选出另外两位获胜者。这也是参与这次比赛的第二种方式:您可以在这篇文章的评论中留下您的姓名、真实邮箱地址(以便我们在您获胜时与您联系)以及一段话描述您对网页设计的热爱。让我们回顾一下

两种获胜方式

  • 经验丰富的开发者 – 转换设计并提交您的作品。您将获得优先选择奖品的机会,并且您可以选择其他获胜者。
  • 初级开发者 – 在这篇文章中评论。写一段话描述您对网页设计的热爱。

获胜开发者的姓名和网站将被公布。他们将根据自己想要的任何标准来选择获胜者。第一个评论的人?随机?最有趣的人?最真诚的人?这取决于他们。请只以一种方式参赛。

将有12 位获胜者,4 位获胜开发者,8 位获胜评论者。

设计转换的细节 / 规则

  • 您只需要创建模型中的那个页面。子页面完全可选,创建它们不会获得额外积分。
  • 设计模型中存在的每个元素都必须出现在您的最终设计中,至少要包含这些元素。如果您愿意,可以扩展现有内容。请记住,您所做的一切都会被评判。添加额外内容可能会让您的设计更上一层楼,也可能会让您的设计跌入谷底,而您最好将其省略。
  • 没有提供任何元素的悬停状态,请发挥您的创意。
  • 设计不必在每个浏览器中看起来都一样,但设计必须在任何浏览器中都完全可用,不能出现任何看起来像是错误的区域。
  • 在评审结束后,所有作品将在线托管,供大家浏览。
  • 请记住,较小的文件大小是高质量设计的标志,我们不应该下载 2 MB 的 ZIP 文件!
  • 模型只使用了 Helvetica 和 Georgia,每个人都应该拥有这些字体。网站标题和文章标题中有一点 Helvetica Neue,您如何处理它取决于您。
  • index.html 文件是必需的,您应该使用 CSS 进行设计。您选择使用的任何其他技术完全取决于您。
  • 您有一周的时间,从现在开始!提交作品截止日期为 2010 年 2 月 17 日美国中部时间下午 12 点。

评审

作品将根据其质量进行评审,而不是提交时间,因此您可以将您的设计保留到比赛结束(但不要迟到!)。评审将由我和 Doug Neiner 进行。我们将测试上面列出的标准,以及许多其他未公开的/无形的因素(例如您的代码的整洁性和工艺)。

您的设计需要适应 Firefox(3.6)、Safari(4)、Chrome(4)、Opera(10)和 IE(8)的最新版本。由于这是针对熟练开发人员的,并且我们希望这是一项挑战,因此我们还将在 IE 7 和 IE 6 上进行测试。设计不必在这些旧的浏览器中保持一致。您选择如何降低设计质量由您决定。

作品提交

您可以在 CSS OFF 作品提交表格 提交您的作品。所有作品必须在 2010 年 2 月 17 日美国中部时间下午 12 点前提交。要求

  • 提交一个 .ZIP 或 .RAR 文件。
  • 使用您的真实姓名和真实邮箱地址(不会被公布,我们只需要在您获胜时与您联系)。
  • 提交的文件解压缩到一个名为“CSS OFF 作品 – 您的姓名”的文件夹中。
  • 该文件夹可以包含您完成设计所需的一切,但必须包含一个 index.html 文件。
  • 我们应该能够在本地浏览器中打开该 index.html 文件并查看您完成的设计。

获胜

我们可能需要至少几周的时间来评审参赛作品,因此在宣布获胜者的时间方面没有明确的承诺,但我们会尽量在一个月内完成。一旦选出获胜者,我们将通过电子邮件通知获胜开发者,以便他们可以选出自己的两位获胜者。然后按以下顺序选择奖品

第一名开发者
– 他们选择的评论者 #1
– 他们选择的评论者 #2
第二名开发者
– 他们选择的评论者 #1
– 他们选择的评论者 #2
等等。

获胜者将选择他们想要的奖品,奖品将从列表中划去,然后下一位获胜者选择。每个人需要在 24 小时内做出选择,否则我们将需要继续进行下一项选择,否则会花费太长时间。在所有获胜者都选出奖品后,我将一次性将所有奖品寄出。

奖品

12 位获胜者,24 份奖品。最顶层的“团队”获胜者选择他们的奖品,然后我们从上到下进行,在选择时将奖品从列表中划去。每个人可以选择两样东西。列表中的最后一个人获得最后剩下的两样东西。请注意,这些产品大多是使用过的。它们是我使用过的东西,或者是我读过的书。有些书的封面可能有点破损,诸如此类。它们曾经对我很有用,所以我想把它们送给需要的人。

最重要的奖项,就像铁人料理的参赛者一样,你赢得的是**自豪感**,因为你知道你在转换网页设计方面很棒。我们将公布四位开发人员的获奖者,他们的获奖作品以及他们真实网站的链接。

此外,对于每个符合基本标准的模型转换条目,我将向我选择的援助海地的项目捐款 3 美元。所以,即使你参加了比赛却没有获胜,也会有一些好事发生。

Smashing Book

作者:众多作者

Smashing Book 是一本关于现代网页设计最佳实践的印刷书籍。这本书分享了关于编码、可用性和优化的技术技巧和最佳实践,并探讨了如何创建成功的用户界面,以及如何应用营销原则来提高转化率。它还展示了如何充分利用排版、颜色和品牌,从而获得直观有效的网页设计。最后,您还将一窥 Smashing Magazine 幕后。

CSS Mastery

作者:Andy Budd

互联网上充斥着关于基于 CSS 的设计的信息。但是它分散在大量不同的网站上,可能很难找到。本书的目的是将所有这些信息集中在一个地方,从而创建一个关于现代基于 CSS 的技术的权威指南。本书可以从头到尾阅读,每个章节都建立在前面章节的基础之上。但是它也可以用作参考书,查阅每个章节或技术,以帮助解决特定问题。

Flexible Web Design

作者:Zoe Gillenwater

流体或弹性布局会根据用户的独特设备查看大小来改变宽度。弹性布局会根据用户的独特文本大小来改变宽度。这两种类型的灵活设计都为用户提供了明显的优势,用户可以根据自己的需求查看各种尺寸的网站,但它们可能会给习惯了像素级控制的网页设计师带来挑战。但是,只要规划和构建得当,灵活布局在视觉上仍然很吸引人,并且构建起来也相当容易。灵活网页设计的概念和技术也可以让固定宽度 CSS 设计受益,因为设计师学习如何为网络固有的灵活性而设计,而不是为印刷媒体或基于网格的布局的刚性特性而设计。

EyeTV Hybrid

EyeTV Hybrid 将您的 Mac 变成世界上最实惠的平板电视和 DVR 组合。EyeTV Hybrid 紧凑而多功能,是一款 Mac 电视调谐器棒,可以使用天线接收超高清电视,使用 Clear QAM 接收未加密的数字有线电视,以及接收基本的模拟有线电视和 FM 收音机。

我用过它,效果很好,只是不再用了。

Sams Teach Yourself Drupal in 24 Hours

作者:Jesse Feiler

Sams Teach Yourself Drupal in 24 Hours 帮助您快速掌握 Drupal。无论您是新手还是想填补 Drupal 知识中的某些空白,您都会找到说明、示例和“试一试”编号步骤来引导您完成使用 Drupal 的过程。

Learning jQuery

作者:Jonathan Chaffer 和 Karl Swedberg

受欢迎的 jQuery 学习资源 LearningjQuery.com 的创建者分享了他们关于 jQuery JavaScript 库的知识、经验和热情,让您的 Web 应用程序闪耀!

这是我开始学习 jQuery 的那本书。请注意,这**不是**本书的最新版本,但书中的代码和概念仍然相关。

Microformats Made Simple

作者:Emily Lewis

微格式是基于 HTML 的设计模式,可以帮助为 Web 内容添加意义(语义)。它们被一些最重要的 Web 网站广泛使用,包括 Google、Yahoo!、Facebook 和 Twitter。这些网站背后的内容作者、设计师和开发人员都了解微格式的强大功能和灵活性,并且正在利用它们的功能。任何网站都可以通过正确使用微格式来获得更有效的内容和改进的用户体验。

The Art of Scalability

作者:Marty Abbott 和 Michael Fisher

The Art of Scalability 教会技术主管、工程师和架构师如何通过改变架构、流程和组织结构来解决技术可扩展性问题。本书提供了一组模型和方法,帮助后台、Web 服务和其他平台实现扩展。本书没有关注现有系统的优化和调整,而是提供了作者开发的模型,帮助公司重新思考其技术架构。

Sams Teach Yourself HTML and CSS in 24 Hours

作者:Dick Oliver

从备受赞誉的 HTML 入门书籍 Sams Teach Yourself HTML and CSS In 24 Hours 的最新更新版本中学习。第七版包含更新,以介绍级联样式表 (CSS) 与 HTML 协同使用,以制作高质量的网页。您将能够学习改进的示例,以及提供与网页的增强集成。您还将通过与当前 HTML 状态相匹配的新示例获得全面了解。

这是这本书的第七版,所以他们一定做对了什么!

The Web Designer’s Idea Book

作者:Patrick McNeil

The Web Designer’s Idea Book 收录了 700 多个按主题排列的网站,这样您就可以找到关于布局、颜色、样式等的灵感。作者 Patrick McNeil 在他的网站上已经整理了超过 20,000 个网站,而这本书展示了其中最棒的例子。

Agile Web Development with Rails

作者:Dave Thomas、David Hansson 等

学习和使用 Rails 的权威指南,获得 Jolt 奖,现已推出第二版。Rails 是一种用于基于 Web 的应用程序开发的新方法,它使开发人员能够使用更少的代码和更少的努力创建功能齐全、复杂的基于 Web 的应用程序。现在程序员可以完成工作,并仍然准时下班。

警告:这实际上是这本书的第一版,现在已经出到第三版了。我不能保证这仍然是相关的。

Fancy Form Design

作者:Derek Featherstone、Tim Connell 和 Jina Bolton

您再也不用担心在网站上集成时尚的表单了。Fancy Form Design 是一个完整的逐步指南,教你如何创建美观、高效且兼容所有主流浏览器的精美网页表单。本书涵盖了创建精美表单的各个方面,从布局和排版到最佳实践 CSS 和 HTML,并辅以 JavaScript 的闪光点!

Joomla! 基础

作者:Barrie M. North

Joomla! 是面向所有类型网站的网站管理员和开发人员的强大解决方案。在这个独一无二的视频包中,顶尖 Joomla 顾问和 Prentice Hall 作者 Barrie M. North 向您展示了如何使用 Joomla! 来构建复杂的网站,这些网站极其易于编辑和更新。您将通过 13 个全面的视频课程掌握 Joomla!,您将比以往任何时候都快地运行您的第一个 Joomla! 网站!

这是一套书籍+DVD 培训组合(9 小时以上的视频)

Sams 自学 PHP、MySQL 和 Apache

作者:Julie C. Meloni

只需很短的时间,您就可以学习如何将 PHP、MySQL 和 Apache 结合在一起使用这三种领先的开源 Web 开发技术创建动态、交互式的网站和应用程序。本书使用直观的逐步方法,每一课都建立在之前的基础上,使您能够从头开始学习 PHP 脚本、MySQL 数据库和 Apache Web 服务器的基础知识。无论您运行的是 Linux、Windows 还是 Mac OS X,附带的光盘都包含一个完整的入门套件,让您安装设置学习、测试和生产稳定环境所需的所有软件。

书籍+视频组合!

维多利亚时代的互联网

作者:汤姆·斯坦达奇

想象一个几乎即时的通信系统,它可以让人们和政府在世界各地发送和接收有关政治、战争、疾病和家庭事件的信息。政府试图控制它,但失败了,它的革命性本质得到了其支持者的强烈吹捧。互联网?不,简陋的电报早在 1800 年代就符合这一要求。如今无处不在的互联网与电报之间的相似之处令人惊叹,它让我们了解了新技术如何在短短一代人的时间内改变社会的结构。

AdSense 代码

作者:Joel Comm

互联网上隐藏着无数线索,散落在数十亿个网页中,指向一个难以置信的秘密。对于那些了解这个秘密的人来说,结果是无法估量的财富。每个月,一小群人——一个揭开了 AdSense 代码奥秘的精英俱乐部——将他们的知识付诸实践,从谷歌那里获得数万美元的支票。无数其他网站所有者通过 AdSense 定期获得额外收入,而他们则在玩耍、睡觉和吃饭。AdSense 代码简明扼要,专注于揭示使用谷歌 AdSense 创建被动收入的经过验证的在线策略。

jQuery 实战

作者:Bear Bibeault 和 Yehuda Katz

一个好的 Web 开发框架可以预料到您需要做什么,并使这些任务更轻松、更高效;jQuery 几乎能读懂您的心思。各种类型的开发人员——从业余爱好者到专业人士——在将 20 行笨拙的 JavaScript 代码简化为 3 行优雅易读的代码的那一刻就爱上了 jQuery。这个新的简洁的 JavaScript 库彻底简化了您遍历 HTML 文档、处理事件、执行动画以及向网页添加 Ajax 交互的方式。

这是本书的最新版本,但很快就会有第二版取代它。

使用 Web 标准设计

作者:杰弗里·泽尔德曼
这是开创性的书籍,它定义了我们的行业。现在已经出版了第三版(这是第二版),所以它已经过时,但仍然是任何技术书籍收藏的基石。

万物皆有回声

由 AIGA 整理。每一页都是与设计相关的引言。

Joomla 模板设计

作者:Tessa Blakeley Silver

Joomla! 是一个免费的获奖内容管理系统,用 PHP 编写,允许用户轻松地在万维网和内部网上发布他们的内容。它在世界各地被用于从简单的网站到复杂的企业应用程序的各种用途。Joomla! 易于安装、易于管理且可靠。Joomla! 模板是 Joomla! CMS 中的一系列文件,用于控制内容的呈现方式。模板是用于查看 Joomla! 网站的基本基础设计。为了产生“完整”网站的效果,模板与存储在 Joomla! 数据库中的内容密切配合。

Polycom® SoundPoint® IP 550

请不要问我这是什么东西。我不明白。我拥有它的故事很奇怪。但嘿,也许它对你们中的一位来说是完美的。否则,把它在 eBay 上卖掉或者什么。

苹果蓝牙键盘

这是他们变得超级纤薄之前的旧款键盘。我个人更喜欢较大的按钮版本。我认为这对 RSI 也更好。当我使用新的纤薄键盘时,我的 RSI 非常严重,当我回到“你需要实际按下按钮”的键盘后,RSI 就消失了。

Wacom Bamboo Fun 平板电脑

Bamboo Fun 让你能够亲身参与你的创意项目,结合了多点触控的优势,以及 Wacom 人体工学设计的笔带来的舒适性和精准度。使用多点触控,你可以用简单的手势进行导航、滚动和操作。平板电脑的宽大触控区域比其他触控设备(如电脑触控板和手机)提供了更大的导航空间。

JavaScript 基础 I & II

作者:Paul J. Deitel

使用 Deitel & Co. 标志性的“实时代码”方法,著名讲师 Paul Deitel 教授正确的方法:从完整的可运行程序开始,而不是琐碎的片段。Deitel 的视频课程专注于你真正需要了解的内容,帮助你快速掌握新技能,并立即投入使用。只需观看并学习如何使用控制语句、函数、数组、对象、事件、CSS、DOM 等。然后,掌握使用 XML 和 RSS 的脚本编写,开始构建席卷互联网的 Ajax 富互联网应用程序!为了获得更强大的解决方案,请参考 Deitels 的 JavaScript for Programmers:包含 100 多个经过全面测试的程序和 150 多个构建健壮的客户端 Web 应用程序的优秀技巧,这是你唯一需要的 JavaScript 书籍!

组合书籍和视频课程!

好的,让我们开始吧!

以下是 PSD 文件

下载 PSD

对于好奇的人,它看起来像这样

最后提醒:参赛作品截止时间为 2 月 17 日中午 CST,你可以在这里提交作品。通过评论参赛的人员可以现在就开始,评论将在该日期关闭。