我刚刚参加了在加拿大温哥华举行的 Interlink 会议。我举办了我的第一个研讨会：一个3.5小时的课程，名为“网页设计师的工作流程”。我们从零开始（在桌面上创建一个文件夹），到最终 部署了一个完整的网站。我们涵盖了很多内容，所以我认为写一些笔记会很有帮助。而且，为什么不写成博客呢？
- 我们从绝对的零开始。只是在桌面上创建了一个名为“Interlink Workshop”的文件夹。
- 我们在 Sublime Text 2 中打开该文件夹并创建了一个 index.html 文件。
- 我们查看了几个我们要参考的网站：UXMad 和 BarCamp Tour。它们都具有网格化、模块化的结构。
- 我们手动编写了 HTML 结构。基本上是一个
doctype，基本的<head>，以及一些用于列的 div。我们没有使用任何 HTML5（除了doctype），因为还没有任何内容需要它。 - 我们使用百分比设置宽度和间距，创建了一个非常简单的三列网格。我们讨论了使用
last类来处理最右侧的列（我们希望在那里移除边距），但最终使用了:nth-child，因为在响应式环境中，该列可能并不总是“最后”一个，所以last没有语义价值。 - 如果我们需要在这些列中使用填充，则使用 通用 box-sizing border-box 来确保填充不会扩展列并破坏我们的网格。我们还介绍了为什么它几乎总是很棒，如果可以的话，我们会嫁给它。
- 我们需要在一些模块中添加一些内容，所以我们使用 HTML-Ipsum 复制/粘贴了一些内容。
- 我们开始编写更复杂的 CSS，所以我们决定开始使用 Sass。我们在项目中创建了一个“scss”文件夹，并创建了一个 global.scss 文件。
- 为了使 Sass 的使用变得非常简单，我们使用了 CodeKit。我们只需将文件夹拖放到 CodeKit 窗口中，然后告诉 CodeKit 将我们的 global.scss 文件处理成“css”文件夹中的 global.css 文件。该 CSS 文件是我们从 index.html 文件中链接到的文件。
- 我们确保 CodeKit 将 scss 处理成“压缩”格式，这是提供 CSS 的最有效方式，也提醒任何意外打开该文件的人，他们不应该编辑它。
- 无法使用 CodeKit 的 Windows 用户，可以查看 Beta LiveReload。Linux 用户，你们太酷了，不需要任何帮助。
- 我们观察 CodeKit 如何在不重新加载的情况下将新的 CSS 样式注入页面，这对声明式应用程序来说非常棒。
- 我们为模块设置了一些排版样式。其中一部分乐趣是制作模块标题栏，我们使用负边距将其从模块中的填充中拉出来。
- 对于字体，我们展示了使用 Typekit 使用漂亮的自定义字体是多么快速和简单。为了方便在家下载和使用，最终版本使用了 Google Fonts。
- 我们确保关注我们正在使用的字体粗细。我们尽可能少地选择字体，以满足我们的需求，保持速度，因为字体文件的尺寸会很快累积。我们专门声明了
font-weight，使其与我们可用的字体完全一致，以避免 粗俗的伪样式。 - 我们使用了一点 CSS3。起初，我们自己编写了 mixins.scss 文件，但后来决定这样做从长远来看会存在问题，因此我们切换到使用 Compass，这在 CodeKit 中非常容易。
- 我们为变量创建了一个特殊文件，然后可以在 CSS 中使用它。我们设置了一些颜色和一个特殊的数值
$globalPadding，我们在所有地方都使用了它，以保持间距的良好一致性。 - 我们需要一个性感的微妙背景，所以我们 去获取了一个。
- 我们不得不在 Finder 中四处乱搞，就像你通常做的那样，所以使用 TotalFinder 的分屏功能很不错。
- 我们认为我们已经有一个良好的开端，并且是时候开始使用版本控制了。因为我们很帅，所以我们使用了 Git。
- 我们正在考虑 GitHub，但是 GitHub 无法帮助部署，所以我们反而在 Beanstalk 上创建了一个 Git 仓库。
- Beanstalk 与 Mac 应用程序 Tower 很好地集成在一起，我们使用它在本地处理 Git。
- 我们查看了 GoDaddy，我在那里购买了域名。我们只需要浏览 56 个追加销售对话框并以 12 美元或其他价格购买域名即可。然后，我们将名称服务器设置为指向 Media Temple，我在那里有一些可以使用的主机。
- 我登录了 Plesk（Media Temple (dv) 上安装的服务器管理软件）并在那里创建了域名，因此我们获得了用于登录的 FTP 用户名和密码。
- 我们可以使用 Coda 2 等软件登录我们的服务器并部署我们的文件。但后来我们决定 FTP 工作流程太危险了。 #FTPBOOFOREVER。
- 相反，我们使用 Beanstalk 设置了部署，以便每次我们提交到该 Git 仓库时，它都会将文件移到我们的服务器上。这样做意味着我们处于一个与团队协作、回滚更改以及版本控制提供的其他所有很棒功能的绝佳位置。这里有一个 关于此的屏幕截图。
- 我们开始将一些图像放入模块中。我们在 Flickr 上搜索了 Creative Commons 许可的内容，发现了一些不错的图像。其中一张图像太大，超出了模块的范围。我们通过应用一些简单的流体图像技术来解决它。我们没有做得太花哨，但我们让图像重新调整大小并保持纵横比。我们可以 做得更花哨。
- 我们还在一个模块中插入了一个 视频。我们尝试使用与图像相同的流体技术，但不幸的是，效果并不好。
- 为了解决这个问题，我们在网站上加载了 jQuery（从 ScriptSrc 复制脚本），加载了 FitVids.js 插件，并调用它。
- 我们探索了 CodeKit 的一些 JavaScript 功能。它可以使用 JS Hint 检查我们的 JavaScript，该工具将查找错误。我们还发现，我们可以将脚本拖放到 CodeKit 的 UI 中，这将允许我们组合（追加或前置）脚本、最小化它们，并为我们创建一个新的脚本供使用。这使得 JavaScript 工作流程与我们使用 CSS 预处理所做的事情类似。
- 对于另一张图像，我们尝试通过将其设置为 CSS 中的背景图像并使用 花哨的 CSS3 背景大小调整 来使其具有响应性。
- 为了完善整个响应式纵横比问题，我们尝试了 填充盒，我们了解到这与 FitVids.js 使用的概念相同。
- 我们开始考虑使用图标来增强设计，方法是将它们添加到标题栏中。我们查看了 Pictos Server，并了解了创建自定义托管图标集是多么容易。我们讨论了在生产环境中，最好自行托管。我们还查看了 IcoMoon，这是一个很棒的图标集，甚至是一个更棒的应用程序，用于使用任何基本图标字体集创建自己的图标字体。网站的最终版本使用了这个。
- 有人提出了关于表单的问题，所以我们查看了 Wufoo 如何提供帮助。即使您不需要 Wufoo 的所有功能，您也可以在 Wufoo 中设计表单并免费下载 HTML/CSS/JS。Wufoo 表单的结构对于需要高度适应性的环境非常棒，例如能够更改标签位置或处理从右到左的语言。
- 我们偶尔需要用 Google 搜索东西，我们查看了如何在搜索词的末尾添加“mdn”通常会将您带到 Mozilla 开发者网络，这是前端方面一些最好的文档。当然，你也可以在 CSS-Tricks 上搜索 =)。
- 我们查看了 HTML5 Boilerplate。我们没有用它开始项目，但是我们逐行查看了 index 文件，并复制了我们自己忘记添加的内容。
- 我们查看了 Normalize.css，并讨论了它如何比 CSS 重置做更多和更少的事情，以及它的工作流程如何更好（例如，下载、不要删除任何内容，而是更改或添加内容，@import 到全局）。
- 我们为网站制作了一个徽标。新的 HF&J 字体 Idlewild 刚刚发布，所以我们获取了它并在徽标中使用了它。
- 徽标使用了许多有趣的颜色，这些颜色受到 我在去会场的路上看到的一件毛衣 的启发。请记住，灵感来自任何地方。
- 我们工作了一段时间，只是在浏览器中以 file:// URL 打开 index.html 文件，但后来这变得有问题，所以我们在 MAMP 中设置了一个合适的域名，以便我们可以在本地服务器上的“真实”域名上工作。
- MAMP 使我们能够使用 PHP，因此我们将 index.html 文件切换到 index.php，以便我们可以使用服务器端注释，这比 HTML 注释更简洁。我们还使用服务器端注释为我们提供了一个可以复制和粘贴的空白模块模板，而不用担心 HTML 会变得杂乱/膨胀。
- 我们提到了如何在简单的网站上使用 PHP include，这可以让我们像在 CSS 和 JS 中一样，以更小的 HTML 块进行工作。
- 我们通过使用带有强标签的无序列表来组织时间表的表格状结构。强标签设置为内联块并右对齐。
- 我们提到了 选择性排版 的概念，即在父元素上使用类来识别何时要应用否则不会生效的排版样式。
- 最终我们发布了这个东西。我也把它传到了GitHub上，如果你出于任何原因想从那里获取文件。
嗯……这就是我所能记住的了。是的。很多东西。我可能应该稍微删减一下，更多地关注内容（无论是假网站还是研讨会本身）。但嘿，这是我的第一次，我完全不知道自己在做什么（对此表示抱歉）。
感谢您详细地逐步介绍。很高兴听到您的活动取得了成功。非常有帮助！
您好，这里有一些非常好的想法，但是，请在Windows上使用WebKit检查您的Interlink网站（我用chrome和safari检查过），主体字体看起来真的很乱……IE 10渲染得很好。
Firefox（13）也渲染得很好。似乎是字体大小使用的问题，在WebKit中放大可以解决。
确实如此。我有点难过，即使在大象事件和SOPA事件之后，我仍然使用GoDaddy，因为我的所有东西都在那里，而且我真的不知道有什么更好或更便宜的东西。
嗨，Josh，
您可能想看看hover.com。他们比godaddy好10倍。网站非常简洁。获取域名非常简单。没有追加销售或任何此类事情，此外，您可以将所有godaddy域名转移到它们那里。我认为他们不会因此向您额外收费……我可能错了。
希望我帮到了你。:)
也向http://iwantmyname.com致敬，它也是godaddy的一个不错的替代方案。
从阅读Chris涵盖的内容列表来看，他确实塞进了很多东西。
http://mediatemple.net是一个非常好的替代方案。
非常棒的分步说明。感谢分享
不错的文章，Chris
通读整个故事本身让我学习和发现了许多东西（我在这个网站的每一篇文章中都会这样做）。非常感谢。
这次活动有广播吗？
我在那里……对于第一次研讨会来说，你做得很好……感谢你发布所有笔记……你让我不用再回去查看我自己的潦草笔记了……你是怎么记住所有这些的？……
很多不错的实用程序技巧……还有那个Wufoo表单技巧……以后帮我节省了很多按键……非常棒的技巧……
再次感谢……
很棒的总结。尤其是IcoMoon的部分。太棒了！
可以制作一个完美的屏幕截图。（我希望看到更多这样的内容:)）
问候
听起来像是一个很棒的会议！
作为Windows用户，我经常会愤怒地挥舞拳头，因为Mac用户可以使用很棒的工具来简化他们的工作流程。
LiveReload对Windows来说将是极好的，但我不想使用它，直到有稳定版/测试版发布。
我发现CSSrefresh很有用 – http://cssrefresh.frebsite.nl/
感谢您分享您研讨会的笔记。了解您的流程确实很有趣。
请不要拖动文件夹；)
仅仅为了响应式视频而加载jQuery是一个好主意吗？这种纯CSS技巧怎么样？http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
绝对棒极了，谢谢Chris
天哪，这些都是很棒的东西。我希望我当时在那里，但无论如何我都会把这个列表当作替代品。
再次感谢Chris。
哇，这是一篇很棒的文章。我没想到作为一名“经验丰富”的开发者我会学到很多东西。我错了，有这么多新的工作流程想法可以尝试。查看您的源代码也让我学到了一些东西（比如在标题上使用负边距来解决容器填充问题。哎呀！）
我们最近在工作场所接手了一名实习生，我想我会让她按照这篇文章的思路参加一个小型研讨会。
感谢分享！
感谢您的信息，那里有很多有用的链接。
同上！很棒的东西！
嗨，Chris，
这是一个非常棒的研讨会。希望那些人对HTML和CSS有所了解，因为您采取的“步骤”并不是针对不懂CSS和HTML的人的步骤，而更像是跳跃。我也为荷兰的学生举办过这些研讨会，如果我举办了你一样的研讨会，我可能会失败:)！
我只有一个问题；为什么不使用:first-child选择器？我总是使用它，以便IE7知道我在说什么。只需为所有内容设置左边距，并使用:first-child为行中的第一个div撤消此操作即可。对我来说效果很好，而且您不必使用nth-child（IE7（和IE8？）不支持）。
哇，我不知道那是你的第一次研讨会——你太棒了！感谢你发布这篇博文，我之后头脑有点晕，这篇文章帮助我整理了所有内容，因为我的笔记有时会变得有点混乱……我将把这些新信息与Jessica Hische关于副项目的建议结合起来，从头开始构建我的第一个响应式网站——迫不及待！
我很享受阅读这篇文章，谢谢兄弟
希望我当时在那里，但我的同事们去了——这篇回顾几乎和亲临现场一样好。一些很棒的资源，时代在变！
谢谢Chris，听起来像是一个很棒的环节。一个网站从头到尾的精彩概述。
实际上我喜欢创建网站的过程，而不是网站本身:(资源很酷。
充满了有用的链接和资源，已适时添加到我的书签中。让我意识到我还有多少东西要学习！感谢您撰写这篇精彩的文章。
好的，有视频吗？？？
这里有很多东西，Chris..我喜欢！在CSS Tricks上总能学到新东西。
一如既往地充满灵感！感谢分享。
你的写作使它变得非常简单。
嗨，Chris，
你能详细说明你使用设置的[code]$globalPadding[/code]变量的情况吗？我想知道你在哪里使用了它——网格块、标题、段落等？
我发现自己真的很不喜欢 Compass 的垂直节奏模块，想知道你如何设置这个项目是否可以作为一个替代方案。
谢谢！
糟糕，使用了 bbcode 而不是 html 标签。你懂我的意思。
感谢你提到 ScriptSrc，Chris，好文章！
工作量相当大。感谢分享！
精彩的文章！我学习了很多东西并收藏了！请继续发布这种（列表风格解释）类型的文章！
不错的格式，
很高兴读到一篇“实践”文章。尤其是那些支持思考的链接。
我个人认为说“Linux 用户，你们不需要任何帮助，你们太厉害了”有点逃避现实…
太棒了！非常有用。有一些工具我之前不知道。谢谢！