# 基础页面开发

「基础页面开发」的能力可以定义为：

依据设计稿（PSD 或 Sketch）及交互要求，利用 JavaScript、HTML 和 CSS 等技术将设计稿高保真转换为网页的能力。

该能力是前端开发工程师的立业之本，自然也是「H5 开发」最最基础的要求。然而虽然是最基础的能力要求，平时我们却会发现身边的前端同学对它掌握十分到位的却是为数不多，要知道「做出一个页面」和「做好一个页面」是两码事。

当然，偏脚本开发方向的前端开发工程师可能不会要求精通「基础页面开发」，但至少也需要了解一个网页的基础构成，熟悉 HTML、CSS 在网页开发中各自所承担的角色及其相应用处。

除了熟练使用 JavaScript、HTML 和 CSS 等基础的网页技术，「基础页面开发」另一个非常重要的技能是「切图」，不会「切图」意味着我们无法将设计稿中的图层元素转换成为网页中所需要的图片，将设计稿高保真转换成为网页也就成了天方夜谭。

接下来通过一个案例说明「基础页面开发」是如何涵盖「切图、HTML 和 CSS」这些技能点的，JavaScript 在本小节不是核心故不做阐述。

通常我们会从视觉设计师手中拿到 PSD 设计稿，然后根据设计稿及设计师提供的相关视觉规范说明，一步步将其还原成真实网页。

例如这样一个 PC 站点的设计稿案例（点击放大图片，首屏的 MM 是不是很赞(✿◡‿◡)）：

我们分 5 个步骤来完成这个案例设计稿的页面开发。

# 步骤1 - 设计稿审查

看到帅锅美驴，不要急着瞪眼流口水，拿到一个设计稿，也不要急于动手。

我们需要站在开发者的角度，先做一个初步的设计稿审查，其目的及意义主要有两个：

• 了解设计稿的开发友好性

  帮助视觉设计师发现并指出有哪些地方的设计对开发不友好，例如是否存在展示缺陷（缺乏经验的视觉设计师一个常见的问题是没有考虑按钮或标签文字数量的溢出情况）？是否开发成本高或者根本无法实现？

• 了解设计稿的排版布局及内容构成

  帮助自己全局理解页面的设计细节，特别是排版布局及内容构成。利用模块化的思想将设计稿解构成一个个组件，并明确每一个组件的可复用性，包括可复用的范围。

这里着重说下第 2 点，为了更快更直观地帮助自己「了解设计稿的排版布局及内容构成」，可以先将网页的排版布局及内容构成抽象成线框图。

我们上面的设计稿案例可大体上抽象成（点击放大图片）：

# 跨页面可复用组件

参考上述的设计稿线框图，我们可以提取出如下的「跨页面可复用组件」：

1. Header - 顶部导航

2. Footer - 底部信息

# 当前页面可复用组件

除去跨页面可复用的组件，剩余的区域，我们可以进一步抽出当前页面可复用的组件，以减少后续重复性的开发工作。

参考上述的设计稿线框图，我们可以提取出如下「当前页面可复用组件」：

1. Billboard - 信息公告牌

2. Ad-board - 商品广告位

设计稿审查的过程中，如何将内容模块按照合适的颗粒度抽离成为组件，并确定其可复用性及复用范围？这是需要在日常工作中逐步培养的能力。

事实上，设计稿的审查流程一般都比较固定，我们可以将其整理成为团队内通用的审查清单：

• 确定设计稿的开发友好性（是否有还原成本高或无法还原的地方）
• 确定一些特殊的元素是否有合理的边界处理（如文案超出外层容器的边界怎么办）
• 确定页面的框架结构（Layout）
• 确定跨页面可复用的组件（Site Component）
• 确定当前页面可复用的组件（Page Component）
• …

# 步骤2 - 编写页面骨骼框架

设计稿审查完毕后我们就可以着手准备进行页面编码的工作啦。

我们可以把页面想象成一套房子，HTML 可以决定网页的框架结构（房子有几间房，各个区域的用途是什么），CSS 可以决定网页的样式（房子该如何装修，房间具体的尺寸是多少），而 JavaScript 则可以决定网页的具体交互和功能的实现（门如何打开，空调如何启动）。

在正式编写页面骨骼框架之前，我们需要了解以下几个重要的网页开发概念。

# 盒模型

HTML 文档中的每个元素都可以被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为标准盒模型。盒模型通过四个边界来呈现元素的大小：margin（外边距）、border（边框）、padding（内边距）、content（内容区域），如下图所示：

那么计算一个盒子的宽高，是不是可以用以下公式呢？

盒子总宽度 = width + padding + border + margin

No~ 在 IE 浏览器下，IE 没有使用标准盒模型。它们认为的元素宽度 width 计算公式如下：

元素宽度 = width + padding + border
盒子总宽度 = 元素宽度 + margin

为了解决这个问题，CSS3 中新增了一个盒模型的计算方式：box-sizing

box-sizing: content-box | padding-box | border-box;
默认值：content-b