第7次作業

1.題目：建立一個簡易網站，並上傳到網站空間。完成項目如下：

（1）下載響應式網頁模板網站(Bootstrap 4)

來源：模板王

（2）修改網站的title，編碼，標題，版權聲明，

（3）建立網站的6個超連結：

（3-1）首頁index.htm

（3-2）第1題：隨機亂數

注意：因為模板是bootstrap 4版本，所以必須到Bootstarp 4網站查詢指令

產生0～1之間亂數：Math.random()

產生1～10之間亂數(1)：Math.ceil(Math.random()*10)

產生1～10之間亂數(2)：Math.floor(Math.random()*10) + 1

Bootstrap的空間排版的參數設定：container—row—col-n（1～12）

<div class="container">

<div class="row">

< div class=" col-5">產

<div col-6 offset-1">  

</div>

注意：一列row最多的欄位col為12個（col-12），

每個元件所佔寬度col-3（代表佔據3個空間）

每個元件距離前面一個元件的空間offset-3（代表與前面一個元件距離3個空間）

Bootstrap4如何設定空間排版

（3-3）第2題：抽撲克牌

下載撲克牌圖片

（3-4）第3題：玩家莊家比撲克牌

排版設定

1.兩個row:

<div class=”row”>

<div class=”row”>

2.控制圖片位置

<img class=”col-3 offset-1“

<img class=”col-3 offset-4“

col-3：表示元件寬度3格

offset-1：表示與前面偏移1格

3.javascript的變數有2種：

區域變數n1

全域變數 var n1

（3-5）第4題：製作多個折疊訊息

參考：Bootstrap折疊元件

參考一個折疊元件的做法，然後把它做成2個折疊訊息元件

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">

台灣人口數？

</a>

</p>

<div class="collapse" id="collapseExample1">

<div class="card card-body">

台灣人口有2300萬人

</div>

（4）把網站上傳到自己的google雲端硬碟網站空間

你目前的google雲端硬碟，只是硬碟，不是網站空間，

必須經過2步驟轉換，才能變成網站空間：

1步驟1：將你做好的網站(含目錄)上傳到google雲端硬碟

並且滑鼠右鍵➜共用➜一般存取權➜知道網址的任何人

2步驟2：使用轉換工具drw.tw（可以把雲端硬碟轉成網站）

網址drv.tw：https://www.drv.tw/

選擇goole帳號，即完成轉換

你的個人網站：https://xvjnbud2edusyypwayaabw.on.drv.tw/web/

3.步驟3：若嫌網址太長，可以用短網址工具，

例如gg.gg：http://gg.gg/

（可以自訂網址名稱）

（5）把網址，貼到zuvio

將網址，貼在zuvio的作業區，完成作業