Day10 HTML 切版介绍(上)

切版是前端工程师必须要具备的技能，需要把设计师针对使用者需求所完成的设计稿，透过程序让它在网页中实际呈现出来。切版是很重要的，如果少了这个过程在网页中会没有画面，使用者也就没有办法获取我们想提供的资讯和服务。

在切版经验还不足时，拿到设计稿切版和开发时，很可能会发生以下几种情况：

1. 看到内容的丰富或版面的多元程度，认为自己不能完成，而过度紧张。
2. 有些区块的功能和版面设计没实作过，认为做不到。而否定自己的能力。
3. 因时间压力或一时的兴奋，立马撰写程序码。切版到一半，才发现可能无法实作出来。
4. 实作发现当前方式无法运作，在不清楚原因的情况下，就到网路上查找方法，无脑逐一套用直到可行为止。

开发前的心态准备与前置作业

确认开发目标
决定目标後，首先要全部打量一遍需求，从大方向到小细节一一确认哪些是需要完成的。如果等到开发完後才发现有少功能或效果需要增加，有些直接修改一下即可，但有些是需要调整架构，就会让开发效率降低。

将大问题切成小问题
有时开发所设定的目标太大或太复杂，可能会不知道如何下手。如果将大区块切成数多个小区块来思考，再一一击破，问题就不难了，例如说，在切割的过程中，发现许多重复性的区块，我们就能知道在程序码、命名上，有很多能重复使用的地方。这对於後续开发上的效率就能有所提升。

查找资料
以繁体中文为例，可参考以下

• 使用的套件或框架，例如：Bootstrap、Element、Materialize
• 使用的语言，例如：HTML 、CSS、JavaScript
• 使用的语法或组件，例如：Positioning absolute、input 元素、弹跳视窗元件
• 想要达成的目标，例如：背景图片满版、实作客制化 radio button
• 遇到的问题，例如：图片溢出、视窗无法开启、点击没有效果
• 特别想要参考的网站或类型，例如：CSS-tricks、MDN、范例、心得

什麽是切版?

切版，顾名思义是「切出版面」，也就是对设计图进行版面的切分，并使用程序码编写这些区块，及各区块的样(css)，将平面的静态设计图，转化成浏览器可阅读、使用者可互动操作的网站。

版面切分与设计

网页会有页首、页尾、页面内容，在设计图上是一体的，到了切版阶段就会各成一个区块，内部也有各自不同的按钮与功能。小项目是像标题、日期、作者、内文，以及右方侧栏等等元素，它们都有各自的html特性，可以让浏览器知道它是这个页面或区块的标题，与css属性，字体大小、字重、颜色等等。

互动效果

是在切版时会进行的细节处理，包含点击、页面滚动效果等，在网页上会进行到的互动操作，都是在切版阶段完成的。

RWD

RWD的处理是在切版时，透过编写各项css规则来达到跨浏览器、跨装置皆能正常浏览的目的。例如大萤幕下的标题字体大小一定需要小於手机上浏览的字体大小、右侧栏的内容在手机上会变成在下方，还有很重要的一部份是：解决跨浏览器可能遇到的问题。