高二資訊科技應用

單、雙數班適用

學習目標

1.以HTML寫出靜態網頁。

2.將CSS套用至HTML元素內。

3.使用JavaScript更動HTML元素內容。

4.撰寫互動式網頁。

2024/2/20 第一周

1.以記事本編輯網頁。

2.以VS 2012編輯網頁。

建立自己的資料夾，進入該資料夾。

按右鍵新增一個文字檔，將名稱改為：11202_index.html。

開啟VS 2012、開啟檔案11202_index.html。

於「設計」輸入標題：112學年度網頁設計，設定文字置中對齊。

切換至「程式碼」，了解CSS的宣告，以及套用方式：class="auto-style1"。

自行修改.auto-style1成為 .textalign，html標籤同時也要更正。

2024/2/27 第二周

在VS 2012內自行撰寫、修改程式碼。

1.元素CSS屬性宣告及自動套用。

2.宣告自己的CSS表格樣式。

3.表格螢幕上置中，使用CSS。(難)

2024/3/5第三周

產生表格的標籤

表格框線、儲存格對齊方式

CSS套用兩種不同表格的方式

2024/3/12第四周

table CSS 樣式表設定

th 當成標題列：底色、文字顏色、字型、字體大小、線粗。

td 為儲存格

CSS

table {

            width: 60%;

            border-collapse: collapse;

            border: 3px solid #006400; /* 外圍框線深綠色、線粗3px */

}

/*把th當成標題列儲存格*/

        th {

            border: 2px solid #FFA500; /* 內框橘色、線粗2px */

            padding: 20px;

            font-family: "標楷體";

            font-size: 30px;

            color: #ffffff; /*白色*/

            background-color: #123456;

        }

        /*把td當成表格內儲存格*/

        td {

            border: 1px solid #FFA500; /* 內框橘色、線粗1px */

            padding: 20px;

            font-size: 14px;

            color: blue;

        }

2024/3/19第五周

JavaScript初體驗

2024/3/26第六周

Button onclick 觸發JS讀取input value。

var id = document.getElementById("id").value;

var pw = document.getElementById("pw").value;

document.getElementById("result").textContent = "ID:" + id + " PW:" + pw;

2024/4/2第七周

輸入密碼屬性，隱藏與顯示。

參考文獻：https://www.youtube.com/watch?v=T5HRpIqvKt8 (教學影片: 使用VS Code)

2024/4/9第九周

延續上周主題，使用VS Code編輯。

※必須注意Font-Awesome版本(最新6.5.2)，否則另一隻眼睛不會切換：請使用5.15.3、5.15.4版本

5.15.3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>

this.classList.toggle('fa-eye-slash');

5.15.4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>

this.classList.toggle('fa-eye-slash');

6.5.2 未找到語法內的class

2024/4/23第十周

<head>

<!-- 連結Font Awesome -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>


<body>

<h2>利用Checkbox顯示密碼</h2>

    <p>請輸入密碼</p>

    <label>密碼：</label>

    <input type="password" id="cbpassword">

    <br>

    <input type="checkbox" onclick="cbshow()">顯示密碼

    <br>

    <br>


    <hr>

    <h2>利用小圖示Icon顯示密碼</h2>


    <br>

    <br>



    <form>

        <label>使用名稱</label>

        <input type="text" name="username" id="iconname">

        <label>密碼：</label>

        <input type="password" name="password" id="iconpassword"><i style="margin-left:-30px;" class="far fa-eye" id="togglePassword"></i>

        <button type="submit">登入</button>


    </form>

</body>

    <script>

        //checkbox顯示密碼

        function cbshow(){

            var x=document.getElementById("cbpassword");

            if(x.type==="password"){

                x.type="text";

            } else {

                x.type="password";

            }

        }


        //小圖示顯示密碼


        // 抓小圖示id

        const togglePassword = document.querySelector("#togglePassword");

        // 抓輸入密碼的id

        const password = document.querySelector("#iconpassword");

        // 監聽事件

        togglePassword.addEventListener('click', function(){

            // 判斷password還是text

            const type = password.getAttribute('type') === 'password' ? 'text':'password';     

            // 設定

            password.setAttribute('type', type);

            this.classList.toggle('fa-eye-slash');

        });

    </script>
2024/4/30第十一周

畫面分割 div

參考文獻：https://www.w3schools.com/html/html_div.asp

2024/5/7第十二周

2024/5/21 第十五周

Div 上、下各50%，背景色不同。