ShutterPress：设计和编码照片作品集网站（第2天：切片和代码准备）

daique1908

关注

翻译最新推荐文章于 2026-11-10 00:57:14 发布 435 阅读 AI 写同款· GEO 优化 ›

我是以照片为中心的网站设计的忠实拥护者...今天，我很高兴推出一个针对摄影师，插画家和其他视觉创意的新“完整网站”教程。在第一天，我们使用一些特殊的技巧和技术在Photoshop中设计了模板。今天，在第2天，我们将完成最后的设计阶段，然后为编码阶段做一些“飞行前”准备，在第3天我们将详细介绍。在第4天，我们将展示您如何使用相同的原始HTML创建三个完全不同的网站。

简介：第二天，“飞行前”准备

就技术技巧而言，今天的会议将相对较快...但是我们将大量关注“工作流程”技巧，因此，如果您对在设计之后和之前发生的项目阶段感到好奇，请注意编码开始。

让我们从今天的会议开始，讲一些关于“ 飞行前 ”的一般说明：当您完成网站的设计后，在开始实际的编码过程之前，有一些关键的步骤应理想地进行。第一步是开始划分我们的设计。

下面是完整的书面分步指南。我们将从第一天创建的Photoshop文档开始，但是您也可以下载演示PSD来检查您的工作是否符合我的要求。

好的，现在我们的目标已经明确定义，让我们开始吧！

步骤01：图像切片和全能CSS Sprite

确定我们需要切片的图像

第一步是切分编码模板中所需的任何图像。在我们的案例中，此过程非常简单：仔细查看模板，并指出所有CSS或其他编码技巧无法复制的设计元素。这是我们的清单：

徽标
背景图片
页脚阴影
手风琴+/-图形
滑块左/右选项卡
网格分页
社交媒体图标
搜索栏+放大镜
内容照片（滑块图像+网格缩略图）
圆角图像（是的，我们可以使用CSS3重新创建此图像，但是暂时保留图像是安全的）
主页幻灯片叠加层（内部阴影）

让我们在设计上标注这些位置（单击以查看完整尺寸的图片）：

“>

切片这些并不是难事，所以我不会太深入，但是在开始之前，值得考虑一下是否可以将其中一些图像组合成一个CSS Sprite 。

什么是CSS Sprite？ 简而言之，子画面是一种使用单个图像作为存储多个较小图像的方法。例如，看一下Webdesigntuts上使用的sprite：

当我们开始编码时，我们可以简单地使用CSS定位和图像裁剪来显示我们想要的精灵。

为什么要使用CSS Sprite？ 速度！使用精灵存储图像将减少加载整个网页所需的时间...当图像在多个页面上反复使用时，这可能意味着节省大量时间。

精灵最好与较小的图像反复使用。例如，上面讨论的大多数资产实际上都可以简化为以下内容：

在单个Sprite中，我们已经准备好了大部分设计用于编码...而所有这些都不足19kb ！还不错吧？

要创建自己的Sprite，只需创建一个空白文档（以任意大小开始，最终将其裁剪为勉强适合Sprite上的每个元素），然后在设计元素中添加适当的填充量元件。以下是一些其他技巧：

设计中均匀间隔的元素应在精灵中均匀间隔（例如社交媒体图标）
如果某个元素是透明的（例如我们的滑块选项卡），请确保该元素在精灵中显示为正确的透明
将最终的精灵图片另存为透明的PNG-24 ...然后您就可以摇滚了！

对于其余图像，我们可以简单地创建自己的通用切片。我将在下面列出它们并描述每一个（以及为什么它不是一个精灵）：

Slidedown的内部阴影叠加。 它不是一个Sprite，因为它很大（这意味着不必要地会增大Sprite的大小）。

顶部和底部的圆角：由于一些原因，它们不是精灵：1）像上面的示例一样，它们很大且笨拙； 2）这些可能会在以后重新调整外观或调整大小，这意味着将它们加载到sprite中只是为了进行额外的工作，并且3）将来我们很有可能决定放弃这些图像以用于CSS方法。

背景图片：这不是一个精灵，因为1）它很可能会与另一张BG图像交换出去； 2）它需要无限期地重复，而这些精灵表现得并不好。

其他“非精灵”：显然，我们不会将缩略图或其他任何内容图像作为精灵加载。主要原因是实用性... Sprites适用于可以快速加载并加速网站的基本UI和品牌元素...如果将每个图像都加载到单个Sprite中，则将导致额外的加载时间，即使它在加载后加快了速度。想想几年前那些大型Flash网站的预加载器;）

另一个明显的原因是，每次有人更新站点时，这些内容图像可能都会更改。只要站点设计保持不变，Sprite图像就打算保持几乎不变。

最终切片注意事项：可能不言而喻，但是还有其他切片该特定设计的方法。对于您自己的这种设计变化，不同的方法可能很有意义...因此，请勿将自己局限于上述想法。如果您想使用CSS3，z-index属性和透明的PNG来攻击圆角和背景阴影，一定要这么做！

步骤02：收集我们需要使用的脚本/插件/附加组件

现在我们已经准备好使用所有图像资产，现在该将脚本集中一处了，以便当我们坐下来进行硬编码时，就可以采取行动了。再次看一下我们的设计，让我们确定需要其他脚本或插件的关键区域：

灯箱： prettyPhoto

每个优秀的摄影师模板都需要一个灯箱...目前，还没有比prettyPhoto更好的灯箱。它易于安装/自定义，并且将提供其他灯箱无法提供的许多其他功能-例如缩略图导航，自定义共享加载项等。

手风琴菜单

使用一些基本的jQuery，这是一个非常简单的问题...因此，我们实际上将为此使用一个自定义的轻量级脚本。回顾第三天，看看它是如何工作的！

滑块： jQuery循环

jQuery Cycle将处理我们图像滑块的繁重工作。这是一个文档记录非常丰富的插件，这意味着可以轻松地设置（和自定义）以满足模板的需求。

字体替换：

我在设计中使用了Museo字体，因此我们需要找到一种在编码版本中使用此字体的方法。最快的设置方法是使用@ font-face。因此，我们通过Font Squirrel（http://www.fontsquirrel.com/fontface/generator）来运行字体，以创建可在第3天使用的字体文件。

确保下载了prettyPhoto插件并将必要的资源复制到它们各自的文件夹（“ js”文件夹中的javascript，样式表到“ css”文件夹等），可以从Github链接到Cycle插件，并且可以链接到jQuery来自Google API。