大型 v10 重构项目

我们已经为页面顶部的 Treehouse 广告设置了标记，但还需要进行一些样式工作。我们从树形图本身开始。

我们正在考虑使用矢量并输出为 SVG …

我们已经设置的广告非常适合大型/桌面尺寸屏幕，但在较小的屏幕上很快就会失效。

我们在设计中已经使用了一些断点，但这个设计开始失效的地方并不…

搜索设计在缩小到“小熊”（小移动设备）尺寸断点之前工作正常。我们必须在那里做些不同的事情。我们在导航区域下方留出一些空间，然后将它移到…

将桌面浏览器缩小到非常窄的宽度可以让你对响应式设计如何工作有一个模糊的概念，但这并不准确地反映实际的小屏幕设备。而我们正在设计的正是实际的小屏幕设备…

我认为在本系列中，我们将首次通过直接在浏览器中操作来向设计添加一些新内容（不是先从 Photoshop 开始）。我们的目标是设计“热门链接”模块…

网站主侧边栏中的顶部模块属于 Treehouse，它是 CSS-Tricks 的主要赞助商。根据我与 Ryan Carson 的交谈，他们转化率最高的广告是那些…

CSS-Tricks 上有很长时间的投票传统。它们很有趣，可以收集重要的数据，并增强人们与网站的联系。互动至上！

我们去从 v9 网站获取一些标记…

我们上次结束的时候，有一个相当不错的投票小部件。排版很干净，一切都很实用。但是，它并不那么引人注目或有趣。我们快速查看了画廊的多色区域，作为一些灵感…

我们已经花了一些时间构建页面，以便我们的导航能够工作（视频 #030），你可以浏览整个网站，但这些子页面上的内容不足以让人感觉像一个真实的页面。…

我们开始深入研究画廊区域的布局，这是我从重构过程开始就一直放在心上的事情。主要是因为…v9 中的画廊有点糟糕。我们将会做得更好…

我们的画廊网格布局已经开始生效。不幸的是，它的加载有点突然和怪异。这是因为 CSS3 列被设计为将内容均匀地分配到各个列中，但图像有时需要…

在这个视频中，我们弄清楚了导致列布局加载不流畅的问题。解决方法是删除使纵横比保持一致的占位符框在图像加载后仍然有效的 CSS…

我们为画廊设置的网格添加了一些响应式功能。在最宽的屏幕上，我们将其设置为四列。然后我们开始通过我们非常简单的 @mixins 添加断点…

我们的响应式设计已经有了良好的开端。在最小的屏幕尺寸上，菜单会分解为一个 2×4 网格。它很好地适应了屏幕，但在它和品牌之间，它占据了…

到目前为止，我们一直在本地进行代码更改，没有使用任何版本控制。随着网站复杂性的不断提高，这样做越来越不负责任。发生了什么变化以及何时发生？为什么发生了变化？我们如何…

当我在开发这个设计时，jQuery 1.8 发布了。这只是一个简短的视频，说明了这种事情在开发网站时会发生，在预发布开发过程中是…

除了主页之外，网站还有七个不同的主要区域。所以，我雇佣了七位不同的插画家来做设计。这是我们将要深入研究并将其实施到网站中的第一个设计。它是…

我们已经设置了基本的画廊标题，但它缺少 Erica 在原始插图中添加的蓝色小人。我们事先讨论过，并决定如果屏幕…

我们刚刚完成了画廊的自定义标题，所以既然我们已经开始了，让我们继续添加另一个自定义标题。这个标题是由 Erica 的弟弟 Nick Sirotich 设计的。

因为这是不同的插图，所以…

Nick 的插图有三个不同的头部图层。它们只是略微不同的变体。我们可以使用动画或 JavaScript 等方法来替换图像，但始终运行动画（甚至每…

现在，我们的自定义论坛标题中唯一缺少的就是实际显示“论坛”的部分！

Nick 绘制了一只手拿着一个牌子，这个牌子是为那个区域设计的。我们删除了那里原本的文字（不是很大…

如你所知，CSS-Tricks 上的一些广告是“自行管理”的，比如主要的 Treehouse 赞助商。我接管了这项工作，因为它只有一个广告商，我们有着非常特殊的关系，广告…

现在我们知道自己要使用哪些区域，我们可以回到 Photoshop 中模拟我们希望这些广告区域的外观。

我们有侧边栏广告的先例。它基本上会像…

我们已经模拟了 BuySellAds 区域的外观，所以让我们开始将其真正构建出来。BuySellAds 网站提供了我们在网站上展示广告所需的代码…

我们还需要将另一个 BSA 区域集成到网站中。这个应该更容易一些，因为我们已经有了 JavaScript，它只在一个模块中包含一个广告。事实上，我们已经有了那个顶部的 Treehouse…

我们开始了页脚的伟大旅程！CSS-Tricks 始终拥有一个大型的华丽页脚，这个设计也不例外。它并非完全是无用的。我们有很多东西确实至少值得…

我们正在用 Photoshop 为页脚创建设计。快速提醒：我使用 Photoshop，因为我觉得在跳到浏览器之前，在 Photoshop 中更具创造性。我不会在 Photoshop 中停留太久，但它是我喜欢…

在这个视频演示中，我们继续进行 Photoshop 的工作，设计底部页脚，其中包含指向我的另外两个主要项目 CodePen 和 ShopTalk 的链接。

我们在视频演示中现场编写了一些内容，这当然是一个…

这是我们将专门为页脚进行的 Photoshop 工作的最后一部分，然后我们将跳到实际构建它。

在这个视频演示中，我们基本上设置了围绕“Photostar”的链接列表。没什么太花哨的…

现在我们已经准备好 Photoshop 中的页脚设计，我们可以开始将其构建到我们的静态 HTML 和 CSS 模型中。第一步是为我们自己提供一些 HTML 来处理。我们已经有一个…

页脚的 HTML 结构已经就位，我们有了所需的一切，可以开始设计它，使其看起来像我们在 Photoshop 中设计的那样。

我们为页脚创建一个新的 SCSS 文件，因为…

在这个视频演示中，我们主要处理页脚中占主导地位的橙色“Photostar”。

我们在 Photoshop 中的单独文件中制作了星形，这样我们就可以将其制作成网页所需的正确尺寸，而不是…

在这个视频演示中，我们专注于页脚顶部链接下方的线条。我们有点摸索着，试图弄清楚哪些东西应该具有相对定位，哪些不应该，这样我们就可以让这些线条…

在这个构建页脚的最后一个视频演示中，我们处理底部页脚，其中包含 CodePen 和 ShopTalk 区域。

我们必须稍微修改一下 HTML 代码，因为我们意识到这四个部分……

年鉴的标题来自 Giovanni Difeterici。

我们使用了一些已经建立的技术来开始这项工作。我们为年鉴创建一个新的 .scss 文件……

视频部分的自定义标题插图来自 Alyssa Nassner。

我们花了一些时间整理 Photoshop 文件，命名图层等等，以便我们能够保持组织并理解……

代码片段的标题来自 Reagan Ray。

我们这次在 Photoshop 中花了一些时间调整了一些东西，以确保我们有一个背景，它的高度与我们……

我们之前一直在本地域 (v10.whatup) 上进行本地工作。现在是时候开始迁移到 WordPress 了。我们将继续在本地域上进行本地工作，但我们将开始使用已经工作的本地安装……

当我们开始在 WordPress 中工作时，最好是获取一个实时数据库的精确副本，以便在本地使用。一些网站安装了 phpMyAdmin 之类的工具，可以提供 GUI 来执行诸如导出……

现在我们有了 .sql 文件，因为我们在上一视频中导出了它并下载了它。现在我们只需要运行它，并覆盖我们当前存在的本地数据库。这个本地数据库已经存在，因为……