iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
1
Modern Web

從零開始的網頁設計系列 第 9

Day08 : 切版(ㄧ)_基本框架_1

相關文章


大概就是命中註定我一定得今天寫切版所以才會手誤按下發送(擦淚

好我們大概在第4天的時候有簡單提過切版這件事,那今天我們就要來深入了解他
何謂切版?
我們將設計師已經設計好的Mockup(忘記的人可以點我查看昨天)製作成網頁
那怎麼切版?
我個人的話我會先把設計圖先區塊化分好,以期區塊內的元件標籤都分析好才會開始寫html的架構
我將昨天那張設計稿大致上切成這樣
https://ithelp.ithome.com.tw/upload/images/20171222/201044239tRERJXuhI.png

黑色框框的部分主要為大框架的部分
粉紅色框框則是裡面的小區塊,綠色框框則是我分析出來要使用li去製作的區塊
所以大大小小區塊初步分析起來大概是8塊

那我們在這裡開始所有關於css的部分都是會以引入的方式做使用
附上語法 <link rel="stylesheet" href="css位置">
主要是為了可讀性,所以我喜歡把檔案都分清楚
css檔裡面的寫法跟你在style標籤裡的寫法一樣

開始

1.先建立專案資料夾、建立檔案

  • 建立資料夾
    我自己的習慣,我會在主要目錄底下再分成四個資料夾
    css sass js images
    那因為我們目前大概只會使用css 以及 images 所以就只建這兩個資料夾
    那在之後所有的圖片都會整理到images這個資料夾,css也都是整理到css這個資料夾
  • 建立index.html
    https://ithelp.ithome.com.tw/upload/images/20171222/20104423vtFwhr2Bho.png
  • css資料夾內建立main.css
    這邊的css名稱並沒有限制說要取什麼
  • css資料夾內建立reset.css
    因為每個瀏覽器所預設的的css預設值都不太一樣,所以我們常常會為了要讓每個平台一樣,要根據瀏覽器去做各種不同樣式的調整,也就是所謂的破版(在chrome看正常,去了ie就壞掉了)
    這一支css會將所有的預設值通通歸0;
    讓你在切版的時候可以省比較多的功夫,那我使用的reset是CSS大師Eric A. Meyer整理出的Reset CSS
    使用方法
    • 點我開啟下載頁面
    • 將裡面的內容通通複製到我們剛剛開的reset.css
      或是直接另存網頁到我們css資料夾
  • main.cssreset.css 引進來 @import './reset.css';
    main.css 的最上頭將這一行加入就可以了

2.建立html架構

  • 建立基本的html架構
  • 建立框架
    • 我們使用div先建立兩個區塊並且給他class的名稱
      • 左側選單 class="menu";
      • 右側內容 class="content";
<div class="menu"></div>
<div class="content"></div>

這樣目前比較沒有感覺

  • main.css新增樣式.menu 製作左側選單
    • 製作側邊選單的樣式,那在這裡先簡單分析他會需要有的屬性
      • 固定於左側浮動不變
      • 高度為整個畫面的高度
 .menu {
     height: 100vh;
     width: 300px;
     background-color: #7C7C7C;
     float: left;
 }

height : 使用算是比較新一點點的新屬性vh,讓我們的左側選單的高度可以跟著視窗高度做改變
width : 選單的寬度設定為300px
background-color : 設定背景顏色
float : 將視窗浮動於左側

結果

https://ithelp.ithome.com.tw/upload/images/20171222/201044239dSZk8hp9z.png

  • main.css新增樣式.content 製作左側選單
    • 站滿右側區塊
.content {
     width: 100vw;
     height: 100vh;
     background-color: rgb(226, 129, 129);
 }

width:vh是跟著視窗高度,所以vw就是跟著視窗寬度,讓我們右側的內容區塊能視窗寬度做改變
height : 這邊為了配合之後的頁面所以也使用vh,那其實也可以不用設定這一個區域的高度
background-color : 為了讓大家看區塊所以加上背景色,我們版型設計是底色是白色,所以這個屬性會拿掉

結果

https://ithelp.ithome.com.tw/upload/images/20171222/201044230RnKAjg6Lw.png

那我們主要的大框架就好了,明天我們就來把剩下的所有小區塊塞進去


想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O


上一篇
Day07_2 : 版型設計
下一篇
Day09 : 切版(一) _ 基礎架構2 & 圖片的顯示方法
系列文
從零開始的網頁設計22

尚未有邦友留言

立即登入留言