我是以照片为中心的网站设计的忠实拥护者...今天，我很高兴推出一个针对摄影师，插画家和其他视觉创意的新“完整网站”教程。 在第一天，我们使用一些特殊的技巧和技术在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的内部阴影叠加。 它不是一个精灵，因为它很大（这意味着它会不必要地增加精灵的大小）。
顶部和底部的圆角：由于以下几个原因，它们不是精灵：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。
第2天结束：回顾
此时，我们现在应该准备好开始HTML / CSS转换了。 我们已经设计了站点模板，对我们需要使用的所有图像进行了切片，并收集了使站点按其期望的功能所需的所有第三方脚本。 在下一阶段，我们将进行实际的编码...因此，请做好第三天的准备！