網頁切版流程

網頁切版流程

1. 安裝安裝Brackets 1.8.0
1. 安裝外掛
   
2. 必裝擴充Emmet, Custom Working, Beautify
1. Emmet
1. 功能:提供Brackets快速輸入HTML與CSS的簡潔語法
2. Custom Work
1. 功能:提供Brackets檔案分頁標籤的功能
   
2. GrayScaleIcon取消勾選
3. reload with Extensions
3. Beautify
1. 功能:程式碼格式化擴充，可取代 Sublime 中HTML-CSS-JS Pretiffy
   
4. 按下閃電，可即時看到網頁呈現
   
2. 在chrome上安裝擴充
1. Emmet re:veiw，可以看到不同的瀏覽器上，顯示的畫面
   
2. Full Page screen Capture 可把整個網也的圖都照下來
   

3. 選定要切的版型，例如便當網站 http://www.bentomorikawa.com/tc/food/
4. 使用instant wirefram來查看該網站的版型
   
5. Wireframe可看出這個網頁設定有4個row，row裡面各自有column
   
   
6. 打開Brackets
1. 開啟專案資料夾「mockup」．內容如下，除了CSS/grid.css中已經設好網格12等分，其他內容都是空白．
   
2. 抓一些圖放到pic中，現在pic中有7張便當圖
   

7. 在index.html中切版
1. 劃分4個row
   
2. 把第1個row取名為nav，第2個row取名為file，第3個row取名為thumbnail，第4個row取名為footer．
   在head中引用css，並為以上4個row設定區段名稱，程式碼改為：
   
3. 回到Wireframe，可以看到第一個row中，有一個置中的container（在CSS中設定），裡面包了：圖片、四個超連結．
   CSS中設定
   
4. 在第一個row中切column，程式碼為
   
   網頁顯示
   
5. 接著編輯第2個row，網頁顯示
   
6. 加入字與圖
   
   網頁顯示
   
7. 素菜的圖太大了，來調整它的樣式
1. 改html
   <div class="veget"><img src="pic/vegetarian_W_logo.png" alt="">素菜</div>
2. css中加入

.veget img {

   width: 3%;

}

3. 網頁顯示
   
3. 切第3個row，由Wireframe可看出這裡放了很多便當圖，每張圖下面還有價目表．
1. html寫法，注意素菜要加葉子圖
   
2. 畫面顯示
   
4. 做第4個row
1. Wireframe顯示
   
2. 這裡面只有文字，在html中寫
   
3. 網頁顯示，切版大致完成，之後再調細部．
   
   
5. 為了在不同的行動裝置上都能使用，col-md開頭的切版，要再另外設定3種尺寸，並在html中使用．這樣不管螢幕大小，版型都不會亂掉．
1. 把<div class="col-md-12">取代成
   <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
2. 以此類推
3. 這是比較麻煩的方法，但先用這個來釐清觀念．
4. 如此一來螢幕縮在小，網頁版型也不會亂掉