#121 通用页面模板

播放时间:7:37

我们看一下联系页面,并认为它是 CSS-Tricks 上一种非常通用的页面,根本不需要任何特殊的样式。实际上,通用页面和博客页面之间唯一的区别在于……

观看屏幕截图

#122 构建视频存档,第一部分

播放时间:18:47

视频存档页面是网站的一部分,用户可以在其中浏览所有可供观看的免费视频。它用于浏览,就像片段主页或演示主页一样。

这些页面是……

观看屏幕截图

#123 构建视频存档,第二部分(导航)

播放时间:14:01

我们刚刚完成了这个重新设计的激动人心的部分,我们得以丢弃视频存档页面上的一堆乱七八糟的标记,并将其替换为新的、智能的、干净的、自动生成的标记。但是我们还有更多工作……

观看屏幕截图

#124 构建演示存档

播放时间:6:56

在这个屏幕截图中,我们将处理 CSS-Tricks 的“演示”区域。它是网站上一个相当受欢迎的区域,尽管我并没有像我应该那样花很多时间在这个区域。它的目的是……

观看屏幕截图

#125 对单个视频页面进行 Photoshop 处理

播放时间:15:03

在这个屏幕截图中,我们深入研究了另一个非常重要的页面的设计。这是我从一开始就一直很兴奋要设计的页面之一,因为它是一个在上次设计中服务不足的页面。在这个新的……

观看屏幕截图

#126 构建单个视频页面,第一部分

播放时间:14:01

在这个屏幕截图中,我们深入研究了构成单个视频页面的 HTML、CSS 和 WordPress 模板。我们已经设计好了我们希望它在 Photoshop 文档中的样子,因此我们只需要将其带到……

观看屏幕截图

#127 构建单个视频页面,第二部分

播放时间:10:39

在这个屏幕截图中,我们将完成对单个视频模板的代码整理。

我们首先对 CSS 进行一些整理。videos.scss 文件的一部分适用于与视频相关的页面。有些部分专门用于存档页面,以及……

观看屏幕截图

#128 样式化优惠页面

播放时间:18:27

在这个屏幕截图中,我们将深入研究优惠部分。优惠部分本质上是“广告墙”。它是网站上人们必须自己导航到的区域,因此我不担心在……

观看屏幕截图

#130 样式化文章存档页面

播放时间:14:11

CSS-Tricks 上的文章存档页面相当重要。与大多数博客一样,它没有分页的博文,而是直接链接到存档。我认为这可以为用户节省点击-滚动浏览、点击-滚动浏览、点击-滚动浏览的麻烦……相反,他们直接去……

观看屏幕截图

#131 构建更多主页模块

播放时间:16:48

在这个屏幕截图中,我们开始构建我们计划在主页上使用的其他几个模块。

只需稍微调整一下,我们就可以显示三个热门链接,而不是两个。复制粘贴一些……

观看屏幕截图

#132 论坛简介

播放时间:8:59

在这个屏幕截图中,我们将深入研究网站上的一个全新的部分:论坛!它是网站上一个巨大的区域。也许在流量方面不是很大(我一直希望它在流量方面能够增长),但在……方面肯定很大。

观看屏幕截图

#133 论坛整理,第一部分

播放时间:32:48

在这个屏幕截图中,我们将深入研究论坛区域的代码。

论坛的“主”文件(如果存在这样的文件)是 default.master.php。它有点像 WordPress 主题中的 index.php,只是每个视图……

观看屏幕截图

#134 论坛整理,第二部分

播放时间:18:17

在这个屏幕截图中,我们将继续深入研究 Vanilla Forums 的代码,并让我们的主题运行起来。我们立即决定采取疯狂的举动,删除 Vanilla 附带的整个 CSS 集……

观看屏幕截图

#135 论坛整理,第三部分,登录

播放时间:11:45

我们继续深入研究网站论坛区域的主题设计。到目前为止我们做得不错,但我们越深入,事情就越困难。部分原因仅仅是因为我没有太多关于……的经验。

观看屏幕截图

#138 论坛主页样式

播放时间:13:30

我们经过了一段漫长的旅程,才获得了对所有需要控制的部分的控制权,在此过程中经历了一些挣扎和意外。我们终于可以根据……开始设计主页上的那些模块了。

观看屏幕截图

#139 个人论坛主题样式

播放时间:16:53

你可能会争论说论坛主页是最重要的页面,但同样有力的论据是个人主题视图是最重要的。数据显示,与……相比,人们会访问这些“深层链接”的次数更多。

观看屏幕截图

#140 论坛注册样式

播放时间:17:01

我们仍然深入研究论坛区域。在这个屏幕截图中,我们将查看注册页面。另一个相当重要的页面,因为我们希望加入论坛的体验尽可能轻松和令人愉快。

我们是一个……

观看屏幕截图

#141 Restrict Content Pro 设置和配置

播放时间:12:53

在这个屏幕截图中,我们将短暂休息一下,从与 Vanilla Forums 样式的斗争中抽离出来,开始设置 Restrict Content Pro (RCP),我们的 WordPress 插件,用于管理“小屋”的订阅者,这是一个私人访问区域(你实际上就在……里面)。

观看屏幕截图

#142 论坛模块样式

播放时间:19:21

在论坛的右侧,有一系列模块。“视觉上”的模块,“代码上”的模块,以及“内容上”的模块,因为它们包含的内容是相关的组,与其他模块中的内容分开/不同。

第一个……

观看屏幕截图

#143 论坛新主题样式和功能讨论

播放时间:17:39

不要生气,但我不得不稍微向前跳跃一下,因为有一些令人疲惫的、漫长的、枯燥的、覆盖不同视图的工作,方法是在 Vanilla 论坛主题中的正确位置放置正确的文件。我们已经……

观看屏幕截图

#144 论坛分页样式和总结

播放时间:28:05

我们试图在这里结束论坛的样式设计。论坛上主要的导航机制之一是分页。在页面的底部,你可以转到下一页,也可以跳转到……

观看屏幕截图

#145 “小屋”(私人访问区域)简介

播放时间:7:02

我们已经为 CSS-Tricks 上的这个新的“私人访问区域”做了一些准备工作。我们已经查看了 WordPress 插件来帮助我们,我们甚至选择了一个插件并进行了设置。但现在我们需要开始实际构建……

观看屏幕截图

#146 “小屋”的自定义页眉

播放时间:17:27

在最后一个屏幕截图中,我们从 iStockPhoto 获取了雪山小屋和森林的照片。我们将其放置在背景中,位于 Photoshop 文档的主要内容区域和侧边栏的后面,它很好地适应了那里,在……

观看屏幕截图

#148 样式化“小屋”的注册按钮

播放时间:9:33

在上一段视频中,我们弄清楚了如何在模板中根据用户的登录和订阅状态提供不同的内容。我们在这个屏幕截图中使用这种能力来处理“销售页面”——也就是说,……

观看屏幕截图

#149 构建“小屋”的登录表单

播放时间:6:27

WordPress 很棒的原因之一是它带有自己的功能齐全的用户身份验证系统。如果你不打算带来大量的创新……,从头开始编写这些系统现在相当愚蠢。

观看屏幕截图

#153 样式化“小屋”注册表单

播放时间:13:34

“小屋”的注册页面非常重要,原因显而易见:这是收集资金并授予会员区域访问权限的页面。它需要看起来不错,并且运行得更好。

文本是……的一部分

观看屏幕截图

#155 预发布清单

时长: 32:34

我们马上就要发布这个东西了!现在是时候看看在发布之前需要解决的最后几个小问题了。请记住,网站还远没有完美。但已经足够接近了...

观看屏幕截图

#156 网站发布,第一部分

时长: 17:22

这是重要的时刻!我们有一个我们知道需要做的事情列表,我们只是要开始做,让这个网站上线。

也许最明显的改变(最后一秒的事情...

观看屏幕截图

#157 发布后的立即跟进

时长: 5:52

我在网站发布后大约10分钟就拍摄了这段视频。评论开始涌入,而我是在对其中一些进行反应。就像任何类似的事情一样,都会有正面和...

观看屏幕截图

#158 一个月后

时长: 33:21

在发布大约一个月后,我们讨论了 v10 发布的情况。

我们回顾了我们在这个过程的一开始就创建的文档,我们在文档中写下了所有关于重新设计目标的内容。...

观看屏幕截图