網頁切版流程
- 安裝安裝Brackets 1.8.0
- 安裝外掛
- 必裝擴充Emmet, Custom Working, Beautify
- Emmet
- 功能:提供Brackets快速輸入HTML與CSS的簡潔語法
- Custom Work
- 功能:提供Brackets檔案分頁標籤的功能
- GrayScaleIcon取消勾選
- reload with Extensions
- Beautify
- 功能:程式碼格式化擴充，可取代 Sublime 中HTML-CSS-JS Pretiffy
- 按下閃電，可即時看到網頁呈現
- 在chrome上安裝擴充
- Emmet re:veiw，可以看到不同的瀏覽器上，顯示的畫面
- Full Page screen Capture 可把整個網也的圖都照下來
- 使用instant wirefram來查看該網站的版型
- Wireframe可看出這個網頁設定有4個row，row裡面各自有column
- 打開Brackets
- 開啟專案資料夾「mockup」．內容如下，除了CSS/grid.css中已經設好網格12等分，其他內容都是空白．
- 抓一些圖放到pic中，現在pic中有7張便當圖
- 在index.html中切版
- 劃分4個row
- 把第1個row取名為nav，第2個row取名為file，第3個row取名為thumbnail，第4個row取名為footer．
在head中引用css，並為以上4個row設定區段名稱，程式碼改為： - 回到Wireframe，可以看到第一個row中，有一個置中的container（在CSS中設定），裡面包了：圖片、四個超連結．
CSS中設定
- 在第一個row中切column，程式碼為
網頁顯示 - 接著編輯第2個row，網頁顯示
- 加入字與圖
網頁顯示 - 素菜的圖太大了，來調整它的樣式
- 改html
<div class="veget"><img src="pic/vegetarian_W_logo.png" alt="">素菜</div> - css中加入
.veget img {
width: 3%;
}
- 網頁顯示
- 切第3個row，由Wireframe可看出這裡放了很多便當圖，每張圖下面還有價目表．
- html寫法，注意素菜要加葉子圖
- 畫面顯示
- 做第4個row
- Wireframe顯示
- 這裡面只有文字，在html中寫
- 網頁顯示，切版大致完成，之後再調細部．
- 為了在不同的行動裝置上都能使用，col-md開頭的切版，要再另外設定3種尺寸，並在html中使用．這樣不管螢幕大小，版型都不會亂掉．
- 把<div class="col-md-12">取代成
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"> - 以此類推
- 這是比較麻煩的方法，但先用這個來釐清觀念．
- 如此一來螢幕縮在小，網頁版型也不會亂掉
