# 序文

> 嘿～你好! 我是Mizok
> 這是一篇為NEUX提供的課堂講義
> 講義內容主要是為了讓設計師/PM能夠快速對切版的常識有一些基本的理解
> 以便在工作過程中能夠對一些工序的難度有基本的判斷能力
> 在這篇講義中我們會使用[jsfiddle](https://jsfiddle.net/)來作為實際演練的平台

## 前言：前端是什麼？前端切版又是一份什麼樣的工作？

要理解前端是什麼，那就必須要先理解網頁的運作機制。

### 先來講講什麼是伺服器(Server)

而在理解網頁的運作機制之前，我們先講講什麼是所謂的**伺服器(Server)**。

伺服器(Server)其實就是一台**一直開著不關機的電腦**，
而我們在瀏覽網站的過程其實就是透過網路跟這台電腦索取**文字/圖片/影音**，然後再透過**瀏覽器**(Browser)來檢視這些資源。

很多人可能不知道，原則上其實任何的電腦，就算是一般的筆電，都可以作為**伺服器**來使用。

不過用筆電來作為伺服器的話,**效能**（Performance）會比較差，速度可能也沒有一般的伺服器專用機種來的快。

> 在影視作品中講到伺服器大多數人都會直接聯想到機房裡面的大型機台，那些機台其實也就是很多部電腦主機放在同一個櫃子裡

### 拆解網頁瀏覽的過程

你可能會好奇，既然瀏覽網頁只是跟伺服器(Server)索取資源來做檢視，那為什麼這些資源在網頁中會有這麼多變的呈現方式呢?

比方說像是圖片和文字的排列可能會有**左圖右文**，**上圖下文**...等不同的狀況，這些狀況又是根據什麼**腳本**出現的呢?

我們這邊講的**腳本**其實就是**HTML/CSS**。

**HTML/CSS**其實就是一種文字檔案，而這份文字檔案裡面規範了一個網站的**視覺排列邏輯**，而當我們有了**文字/圖片/影音檔案/HTML/CSS**，就可以形成一個基本的網頁

使用者打開瀏覽器連上網站的這個過程，其實可以簡單的看成下面幾個步驟：

- 瀏覽者會先跟伺服器索取**HTML文檔**
- **HTML文檔**上面會紀錄該網站到底需要哪些**文字/圖片/影音**，還有哪些**CSS**檔案
- 一個網站可能會需要超過一個**CSS文檔**
- 瀏覽器會透過HTML/CSS上面描述的規則來規劃一個網頁的各大**區塊**(Block)，做一些基本的填色/排列，並且把從伺服器上面取得的**文字/圖片/影音**檔案塞到這些區塊當中
- 最終就形成了我們看到的**網頁**

### 切版是一份什麼樣的工作？

所謂的切版其實就是根據**設計圖稿**來編寫**HTML/CSS**。
有些公司其實是把**設計**跟**切版**綁在一起的，也就是說**設計師**必須要懂**切版**。
但是在**NEUX**，我們是把**設計**和**切版**分開的，**切版**被劃分在**前端**的職務內容。

> 那切版這份工作需要其他人怎麼配合?

切版所需要的配合就是:

- 計較圖稿的細節，圖稿對切版來說就像是設計的藍圖，如果規格不清楚就會不好執行。
- 根據圖稿難易度適當的去規劃時程。