如何開始一張設計圖？

04-26

從大學到研究生到工作，一路下來，我覺得總結規律是學習中最重要的，也是最有效的學習方法。在P1培養開發者思維中，我給自己的學習目標中有這麼一條：找到適合自己的開發模式，包括但不限於：找到適合自己的研發工具、解決問題的辦法、研發習慣、研發思維。一個多月的學習過程中，我也在有意無意的去尋找和達到這個目標。其中，大致總結了一下如何從0開始將一張設計圖用HTML和css表示出來。在完成P4的時候，我也有意迫使自己按此步驟進行。大致如下：

1.在計算機中構建存儲框架

即建立文件存儲目錄。包括：

項目所屬文件夾（如P4）：用來存放這個項目的所有相關文件。其中包含了：
文件夾CSS：用來存放樣式表文件；
文件夾img：用來存放項目圖片；
HTML文件（無內容，內容後面步驟再加）。

因為還沒用到js等，故先暫時沒考慮這些類型的文件

2.進行整體布局

即用盒裝模型思維，將設計稿分化成一個個框。具體可細分為如下幾步：

首先：將設計稿劃分成方框，這非常有利於了解和理順頁面結構。進行P4的時候，我是將設計稿列印出來，用鉛筆畫框。
其次，將分解的框轉換成樹狀結構，完成後，就知道了頁面包含哪些父節點，各父節點下有哪些子節點。我是用Visio快速畫了一個樹狀結構圖。
接下來，根據語義化標籤將樹狀結構轉化，並寫到已經建好的HTML文件。為避免出錯，寫好大框架後，應測試文件是否可以在瀏覽器準確顯示。寫的過程中，注意添加註釋，我是每個相對獨立的內容區域添加一個開始注釋，一個結束注釋（如頭部開始，頭部結束；主文章開始，主文章結束；作品集開始，作品集結束）。每部分內容，遵循「容器-行-列-內容元素」的組織方式，方便將每塊內容很好的放進12柵格中。最後，為了能預覽大致效果，將圖片、文本等最小元素用佔位符代替。
最後，設置布局。即將每個方框放在正確的位置。此時，可以選擇符合需求的框架。P4時，我用了bootstrap框架。將需要的文件下載下來，放在項目目錄里，並引入到HTML文件。為保證引入正確，每引入一個css文件，最好先測試一下引入是否有效。保證引入正確後，將需要的類添加到元素中。

整體布局完成後，即可開始細節的處理和完善。

3.細節處理

此時，需要引入自己的樣式文件。設置合適的字體、行間距、字體大小、圖片樣式等。

4.重複調試

此步驟貫穿整個編寫過程。包括在不同的瀏覽器中測試；在不同的設備上測試等。因為才開始學習，關注點還沒放在這個上面，所以，P4的時候，我也沒有去各種設備和瀏覽器上調試。但當真正開始做前端工作的時候，我覺得這是非常重要的。是保證自己的作品高質量的有效方式。

學習過程中，亂七八糟的記了這麼一張腦圖筆記，有文字，有截圖，哈哈：