W4

 第四堂

課程內容

  • 網頁外觀→CSS(教學網)、Materialize CSS(組合套件)
  • 網頁調整→RWD(縮放視窗時能自動調整頁面編排)
  • Navbor(頁首)、Footer(頁尾)
  • class→引用以定義好的CSS，ex：class="left hide-on-med-and-down"→when解析度降低(手機、平板)時，隱藏選單並改為下拉式
  • <li>→項目符號，ex：<ol>→1.2.3...<ul>→·
  • Grid→將頁面分成x等分；Card→ex：s12 m6 l3→始符合RWD
  • for迴圈(</body前>)→陣列(把卡片標題、圖片、內文等，以陣列表示)
    1. var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
    2. var text = ""; →宣告text為空字串
    3. var i;
    4. for (i = 0; i < cars.length; i++) →1st做的動作；條件判斷(守門人)；進入迴圈後要幹麻
    5. {text += cars[i] + "<br>";} = {text = text+ cars[i] + "<br>"} → 換行，ex：第一次(text = ""→text=""+"BMW<br>"，此時i=1)，第二次(text="BMW<br>"→(text="BMW<br>Volvo<br>")，以此類推，第六次(i不小於6→不符合條件判斷→進入document.getElementById)

                1.~5.為字串迴圈範例，接下來要將其套用在card的標題和圖片上 ↓

    1. var cars = ["標題", "", "", "", "", ""];→card標題1-6
    2. var pictures = ["網址","","","","",""];→圖片網址1-6
    3. text +='<img src=" ' + pictures[i] + ' ">'; →img src=後面本來就要接" "，但要把+ pictures[i] +當成一個字串常數，所以要在加' '
    4. text +='<span class="card-title">'+cars[i]+'</span>'; → 將原本標題名稱的位置改成一陣列，須以+連接，且在前後各自加上' '，作為一字串常數

課堂心得

        今天的課程目標是運用Materialize CSS的組合套件讓我們的網頁可以好看一點，一開始先去下載基本的網頁格式，接著再下載一些套件、改成我們希望變成的樣子就好。

        一開始加了Navbor和Footer，接著就在body區加入了曾經學過的簡單內文即card套件，好方便餒，拼拼湊湊就好，好難想像以前都要從0開始自己逐一建構。在使用card的過程中用到了之前學過的陣列，這次新學的部分是for迴圈的概念，目的是要讓我們的card中一些圖片或文字能夠依照我們所希望的順序自動生成，醬未來就有希望能做出像是一些購物平台瀏覽商品時的頁面，此外，這次還有提到RWD，也就是在縮放視窗時能自動調整頁面編排的神奇東西，與此相關的有像是li(項目符號)、Grid(將頁面分成x等分)和class="left hide-on-med-and-down"(when解析度降低時，隱藏選單並改為下拉式)之類的，因為現在真正用電腦瀏覽網頁的人數已經是少數，大部分人都用手機，所以要考慮的頁面大小不同時所會面臨到的問題。

        下次作業是要試著把其他網頁類似的card搬過來，把標題、內容、圖片等都用上課交的方式改好，記得要把最上面素材來源那邊改成全網路可用的，希望順利！


留言

張貼留言

這個網誌中的熱門文章

 穿戴式監控裝置利弊 "No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation Everyone has the right to the protection of the law against such interference or attacks." --Universal Declaration of Human Rights , Article 12. 前言 　　根據聯合國所頒布的 《世界人權宣言》中第十二條 明確指出，任何人皆有權享有私生活、家庭、住宅和通信等隱私保護，然今科技日新月異，在許多方面，科技往往走在法律之前，並逐漸威脅到人們的隱私甚至人身安全，其中隱含著高度風險的領域即為醫療與個人健康資訊，而其監控核心便是穿戴式裝置，我們又如何能斷定在成功獲取我們的心律、腦波後，未來不會藉此進一步分析我們的所思所想？本文我們將針對穿戴式裝置進行科技與隱私的深入探討與分析。 何謂 穿戴式裝置         在醫療保健領域中，穿戴式裝置意即消費者可以配戴的電子設備，目的是收集用戶的個人健康數據並即時傳送給醫療專業人士，最原始的穿戴技術用於健身方面，是配備了感測器的腕帶，能追蹤用戶的身體活動和心律，並與智慧型手機同步，提供用戶健康健身方面建議，此後隨者市場對於穿戴式監控裝置需求的日益增長，發展出了各式監控血壓、呼吸律抑或溫度的相關裝置，知名企業有如 Proteus 、 Neurotech 、 Augmedix 等( 2022 Top10穿戴式醫療裝置開發公司 )。 優點         在過去5年中，穿戴式健康監控裝置的使用率增加了兩倍之多，其於市場中的高接受度絕非毫無來由，對醫生來說，他的最大優勢為便利性，他提供了一個能自動紀錄並追蹤病人即時狀況的機會，這也使我們不難理解為何他能在近年的開發市場中有著爆炸性的成長，以下我們將探討穿戴式裝置在醫學領域帶來的助益： 1.  方便－ 穿戴式裝置通常穿戴簡便，能夠即時追蹤病人狀況，並回傳給醫療機構，對醫院來說減少了時間與成本，對病人來說也省下掛號及復診的時間、
閱讀完整內容

W2

 第二堂 課程內容 把上禮拜body上的字串換成照片呈現 注意""&''要成對出現 <img src=" 照片網址 " alt="Trulli" width="500" height="333">→ 絕對位置 用myFunction1.第一張、 myFunction2.第二張，對照各自照片網址→ not good 一按鈕對依照片效率差 字串常數變數 將照片網址用函數X替換對照                               <button onclick="myFunction1( ' 網址 ' )">上一張</button>                               myFunction1(x)                          '<img src="' + x + '" alt="Trulli" width="500" height="333">'→ +表連接                       💣字串常數必用一引號→變成 一字元                             變數 不可用引號 陣列(Javascript Array) 將var cars內各個網址對應到myFunction1的0、1                               <button onclick="myFunction1( '0' )">上一張</button>                               <button onclick="myFunction1( '1' )">下一張</button>                                myFunction1(x)                               
閱讀完整內容