# 114330 彭莉婷的網頁設計隨堂筆記:zzz: --- [老師的筆記](https://hackmd.io/@iamfefe) --- :::info - **自我介紹** 哈囉老師，我是資二三的彭莉婷～ 當初是覺得網頁設計會對未來有幫助，所以選擇了這門課！ 畢竟現今的網絡很發達，很多有關商業的介面也要讓大眾覺得吸引才會有效果。 ::: :::info - **本學年在這堂課設定的目標** 我希望能夠學習到也關網頁設計的程式，以及如何把版面排版的好看，讓自己兼具一些技能。 也希望自己能熟練這些技巧，打字速度再快一點。 ::: ### 擷取全網頁功能 ==F12 Ctrl+Shift+P 打full== var event = new KeyboardEvent('keydown', { key: 'g', ctrlKey: true }); setInterval(function(){ for (i = 0; i < 100; i++) { document.dispatchEvent(event); } }, 0); 連點模式 <h1 style="color:rgb(155,155,255);background-color:blue;">大標題顏色</h1> <h1>My First Heading</h1> <h2>My First Heading</h2> <h3>My First Heading</h3> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first paragraph.</p> <p>My first<br> paragraph.</p> ## Lorem Ipsum 自動填字功能 Feather Icons圖示 ![](https://hackmd.io/_uploads/rkLZG_0Ja.png) 1920x1080 blobs # 語法練習 :::info index.html檔案名稱 html5 基本頁面 h1…h6 大標題 p 段落 lorem 假字 br 換行 pre 預設排版 a 超連結 href 放連結,或是#段落命名 target _self 在同一個標籤頁跳轉 _blank 另開標籤頁 b 粗體 em 斜體 span 段落裏的小片段 ul>li5 項目符號 ol>li3 項目編號 < !-- 註解 - - > 中間無空格，ctrl+/ table 表格 tr 列 td 欄 (colspan跨欄,rowspan跨列) img 圖片 div 盒子 ::: ### 網頁程式練習（要記得檔案打index.html） #### 要看網頁的話按右下角go live "editor.formatOnSave": true, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode", } ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <title>昀澤好物</title> <link rel="icon" href="https://picsum.photos/100/100" /> <style> * { transition: all 0.5s ease; } body { background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); } h1 { color: #2543a8; text-shadow: 0.5px 0.5px 0.5px rgba(43, 43, 43, 0.8); } /* 動作練習 */ h1:hover { color: rgb(18, 173, 166); font-size: 30pt; } body:hover { background-color: rgb(6, 135, 158); } img:hover { margin-left: 100px; border: 10px dashed rgba(62, 16, 121, 0.5); box-shadow: 0 0 10px rgba(43, 43, 43, 0.5); } </style> </head> <body> <!-- 選單列 --> hello <h1 id="home">我是大標題1</h1> <h2>我是大標題2</h2> <h3>我是大標題3</h3> <h4>我是大標題4</h4> <h5>我是大標題5</h5> <h6>我是大標題6</h6> <h1>昀澤農場</h1> <img src="https://picsum.photos/900/200" alt="" /> <hr /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque libero fugiat sit aliquid ut veniam, tempora a deleniti itaque repellendus! Facilis ratione sequi consectetur atque placeat cupiditate eius dolor distinctio! Hic esse assumenda ab minus nisi, quo aliquam corrupti necessitatibus natus quasi consequatur! Adipisci voluptatum placeat porro dignissimos consequatur ea quasi, beatae reprehenderit voluptates consequuntur nobis temporibus sapiente sunt nam. Quasi ipsum ut quo esse. Molestias architecto odio in voluptates, doloremque omnis nihil cumque suscipit vel. Dolores unde, atque consequuntur sit ratione sed quo, fugit voluptatibus nulla voluptatum quas ut. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque libero fugiat sit aliquid ut veniam, tempora a deleniti itaque repellendus! Facilis ratione sequi consectetur atque placeat cupiditate eius dolor distinctio! Hic esse assumenda ab minus nisi, quo aliquam corrupti necessitatibus natus quasi consequatur! Adipisci voluptatum placeat porro dignissimos consequatur ea quasi, beatae reprehenderit voluptates consequuntur nobis temporibus sapiente sunt nam. Quasi ipsum ut quo esse. Molestias architecto odio in voluptates, doloremque omnis nihil cumque suscipit vel. Dolores unde, atque consequuntur sit ratione sed quo, fugit voluptatibus nulla voluptatum quas ut. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque libero fugiat sit aliquid ut veniam, tempora a deleniti itaque repellendus! Facilis ratione sequi consectetur atque placeat cupiditate eius dolor distinctio! Hic esse assumenda ab minus nisi, quo aliquam corrupti necessitatibus natus quasi consequatur! Adipisci voluptatum placeat porro dignissimos consequatur ea quasi, beatae reprehenderit voluptates consequuntur nobis temporibus sapiente sunt nam. Quasi ipsum ut quo esse. Molestias architecto odio in voluptates, doloremque omnis nihil cumque suscipit vel. Dolores unde, atque consequuntur sit ratione sed quo, fugit voluptatibus nulla voluptatum quas ut. </p> <b>design by 彭莉婷 </b> <hr /> <!-- 產品介紹 --> <h3>特色產品</h3> <ul> <li>魚腥草</li> <li>雞蛋</li> <li>蔥油餅</li> </ul> <h3>寄送方式</h3> <ol> <li>郵寄</li> <li>冷凍貨運</li> <li>自取</li> </ol> <a href="http://yahoo.com.tw" target="_blank">連到yahoo</a> <a href="mailto:114330@clvsc.tyc.edu.tw">寫信給Li Ting</a> <a href="#home">回首頁</a> </body> </html> ``` ### 假圖連結https://picsum.photos/800/200 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { transition: all 0.5s ease; } body { background-color: rgb(132, 190, 241); } nav { width: 80%; height: 100px; background-color: rgb(222, 229, 231); } nav ul { display: flex; justify-content: center; } nav li { width: 200px; height: 50px; background-color: #fff; list-style: none; border-radius: 20px; margin: 10px; /* df jcc aic */ display: flex; justify-content: center; align-items: center; letter-spacing: 5px; } #liting { filter: blur(3px); } nav li:hover { transform: scale(2) rotate(20deg); } </style> </head> <body> <header> <nav> <ul> <li>選單1</li> <li>選單2</li> <li>選單3</li> <li>選單4</li> <li>選單5</li> </ul> </nav> </header> <!-- 選單1內容在這裡 --> <section> <img src="https://picsum.photos/400/200" alt="" /> </section> <!-- 選單1內容結束 --> <!-- 選單2內容在這裡 --> <section> <img src="https://picsum.photos/300/200" id="liting" alt="" /> </section> <!-- 選單2內容結束 --> <!-- 選單3內容在這裡 --> <section></section> <!-- 選單3內容結束 --> <!-- 選單4內容在這裡 --> <section></section> <!-- 選單4內容結束 --> <!-- 選單5內容在這裡 --> <section></section> <!-- 選單5內容結束 --> <footer></footer> </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; height: 100px; background-color: aliceblue; border: 1px solid black; margin: 20px; } #box1 { background: color #5aa9e6; width: 50%; transition: 0.5s ease; height: 200px; } #box1:hover, #box2:hover, #box3:hover, #box4:hover, #box5:hover { margin-left: 300px; } #box2 { background-color: #7fc8f8; width: 50rem; transition: 0.5s ease-in; } #box3 { background-color: #f9f9f9; width: 50vw; transition: 0.5s linear; } #box4 { background-color: #ffe45e; width: 30vw; transition: 0.5s ease; } #box5 { background-color: #ff6392; width: 20vw; transition: 0.5s linear; } </style> </head> <body> <!-- div#box*5 --> <div id="box1"> <img src="https://picsum.photos/300/140" alt="" /> <p> <!-- lorem*1 --> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut perspiciatis veritatis labore, amet iusto unde! Enim culpa aperiam quas aliquid non neque hic facere assumenda voluptatem obcaecati, vel dolorum odio! </p> </div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> </body> </html> ``` 不用委屈口慾的蔬菜饗宴 ### 快速鍵 :::info 選取狀態下shift+alt+往下是快速複製 按住ctrl+滑鼠點選，會變超級大游標 ctrl+/ 註解 ::: ## 老師的重要提示！！ * 每個區塊開始建議先加 div.container * 如果要浮動設計,再加 div.row * 浮動設計 col-lg-大視窗數字 col-md-中視窗數字 col-sm-小視窗數字 例： col-lg-4 col-md-6 col-sm-12 =>總數12格 > 圖解 ![image](https://hackmd.io/_uploads/Bk7AOYo_6.png) 大標題 h1.display-1 固定上方選單列作法— nav裏加fixed-top ![image](https://hackmd.io/_uploads/Byoe0FsOT.png) * 上方加空格 mt-5 * 圖片寬度自動佔滿 w-100 * 可利用前面教的圖示當插圖或按鈕 ### 常用結構 :::info * 元件-navbar導覽列 * 元件-carousel輪播 * 排版-container容器 * 排版-欄-獨立column class * 排版-網格-混合和匹配 * 內容-table表格 * 元件-card卡片 * 元件-accordion手風琴 * 表單-排版 * 範例-footer ::: ### 廣告加動畫寫法 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .adv { right: 0px; position: absolute; border-radius: 20px; overflow: hidden; animation: adv_move 3s ease infinite; } @keyframes adv_move { 0% { right: -10px; } 30% { right: 0px; } 100% { right: -10px; } } @media (max-width: 1200px) { } @media (max-width: 992px) { } @media (max-width: 768px) { } @media (max-width: 480px) { h1 { font-size: 50px; } } </style> </head> <body> <h1>hello</h1> <div class="adv"> <!-- Image Map Generated by http://www.image-map.net/ --> <img src="img/123.gif" usemap="#image-map" /> <map name="image-map"> <area target="_blank" alt="到yahoo" title="到yahoo" href="https://tw.yahoo.com" coords="99,0,0,198" shape="rect" /> </map> </div> </body> </html> ``` ### 留言板 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .board { background-color: azure; display: flex; justify-content: center; align-items: center; flex-direction: column; } </style> </head> <body> <div class="board"> <h1>留言板</h1> <form action=""> <label>班級</label> <select id="gender" name="gender"> <option value="male">資二一</option> <option value="female">資二二</option> <option value="other">資二三</option> </select><br /> <label>座號</label> <input type="text" name="sno" id="sno" /><br /> <label>姓名</label> <input type="text" name="sname" id="sname" /><br /> <label>性別</label> <input type="radio" name="sex" id="sex" value="男">男 <input type="radio" name="sex" id="sex" value="女">女<br /> <label>疫苗</label> <input type="checkbox" name="drag" value="第1劑" checked />第1劑 <input type="checkbox" name="drag" value="第2劑" />第2劑 <input type="checkbox" name="drag" value="第3劑" />第3劑<br /> <input type="button" value="運費說明" /> <input type="reset" value="重設" /> <input type="submit" value="送出表單" /> </div> </form> </body> </html> ``` ## 老師寫的迷你留言板 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>迷你留言板</title> <style> .board { display: flex; /*打這三個可置中df*/ justify-content: center; /*jcc*/ align-items: center; /*aic*/ flex-direction: column; /*排列方向為欄*/ } </style> </head> <body> <!-- 留言板的長相區--> <div class="board"> <h1>迷你留言板</h1> <form id="myForm"> <label for="username">使用者名稱:</label><br /> <input type="text" id="username" name="username" /><br /> <label for="message">留言:</label><br /> <textarea id="message" name="message"></textarea><br /><br /> <button type="submit">送出</button> </form> </div> <!-- 留言板的長相區結束--> <!-- 留言板的程式區--> <script> document .getElementById("myForm") //注意表單的id .addEventListener("submit", function (event) { event.preventDefault(); var formData = new FormData(this); var queryString = new URLSearchParams(formData).toString(); // 發送資料到 Google Apps Script 的URL var url = "https://script.google.com/macros/s/AKfycbydAI8qYvsPBroIbk5PZR_U5nr3ZDNtinsW40GKjfkb2IIhRhy4FuKhG5ydogMVEm-dvQ/exec?" + queryString; // 發起 GET 请求 fetch(url); alert("已寫入資料庫"); }); </script> <!-- 留言板的程式區結束--> </body> </html> ``` google文件新增excel檔:雲端硬碟/+/google試算表 幫文件命名 擴充功能/Apps script 貼入以下程式,注意一個欄位一個parameter,new Date()會自動抓日期 ``` function doGet(e) { var username=e.parameter.username; var message=e.parameter.message; SpreadsheetApp.getActiveSheet().appendRow([username,message,new Date()]); } ``` ### 按鍵效果寫法 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> #box1, #box2 { width: 300px; height: 300px; display: block; } #box1 { background-color: rgb(141, 218, 253); } #box2 { background-color: rgb(0, 132, 255); } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body> <div id="box1" class="animate__animated"></div> <div id="box2" class="animate__animated"></div> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" ></script> <script> $(document).ready(function () { $("#box1,#box2").click(function () { $("#box1,#box2").removeClass("animate__bounceIn"); var t1 = $("#box1").css("background-color"); var t2 = $("#box2").css("background-color"); $("#box1").css("background-color", t2); $("#box2").css("background-color", t1); $(this).addClass("animate__bounceIn"); }); }); </script> </body> </html> ```