Class 6

Class 6
**********

今天老師教我們建構網站的"框架(framework)"，並介紹一個加入CSS套件的好網站Materializecss，有個吸引人的套件會使的使用者更樂意去使用去推薦給他人~

首先先到Getting Started 頁面，下載 Materialize!
然後開壓縮檔，新增一個文件，就可以開始進行 Materialize css的初始設定了。

➜➜初始設定是為了引用資料夾中的 CSS和JS檔，或是引用網路上的CSS和JS檔

➜➜我們可以在剛剛下載的頁面下方找到  HTML setup ，接下來把程式碼複製到剛才新增的文件貼上並存檔就行了~

1.
例:
<div  class="        ">
           ↳已定義好的框架

2.
將之前所做的BMI作業以更加美觀的方式呈現，首先到Materializecss➜點選左邊的Component➜Forms➜HTML5 Range，接下來會把BMI會用到的數值以數線來呈現，而不用再輸入數字了

<p class="range-field">
        身高 : <input type="range" id="height" min="20" max="250" />
</p>
<p class="range-field">
        體重 : <input type="range" id="weight" min="1" max="800" />
</p>

3.
如何把身高體重的數值輸出給JavaScript Function呢? 
首先到Materializecss➜點選左邊的Component➜Button➜Submit button

<button class="btn waves-effect waves-light" type="submit" name="action" onclick="javascript:f()">Submit
          <i class="material-icons right">send</i>
</button> 

然後，改成onclick=“javascript : f()”即可

4.

想把圖片以一個的方塊來顯示，首先到Materializecss➜點選左邊的Component➜Cards➜Image card

      <div class="row">
        <div class="col s12 m7">
          <div class="card">
            <div class="card-image">
              <img src="images/sample-1.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>

5.
怎麼讓圖片先不出來，搜尋w3school➜display

➜程式改成<div class="row" style= "display:none" id="c"> 

6.
讓畫面的最上方有顏色和一些字:到Materializecss➜點選左邊的Component➜Breadcrumbs➜Basic
讓畫面的最下方有顏色和顯示版權所有:到Materializecss➜點選左邊的Component➜ Footer

7.
最終成果