網頁程式設計

--- slideOptions: transition: fade tags: 資管營網頁程式設計教學投影片 --- # 網頁程式設計講師：資管三郭子麟 --- ## 流程 - Visual Studio Code 介紹及安裝 - 網頁程式設計簡介 - HTML 基礎教學 - CSS 基礎教學 - 個人網頁實作 --- ## Visual Studio Code ### 酷酷的程式編輯器 ---- ### 簡介 * 由微軟開發且跨平台的免費原始碼編輯器 * 支援Windows、Linux 和 macOS 作業系統 * 超級多擴充、延伸模組可以用 ---- ### 安裝非常簡單，只要到官網 (https://code.visualstudio.com/) 選擇符合自己電腦版本即可下載。 ---- ### 建立你的第一份 HTML 檔 ![](https://i.imgur.com/7RFAjAD.png) ---- * 先在桌面建立一個資料夾用作後續的開發 (想取甚麼名稱都可以) * 點擊開啟資料夾，並選擇剛剛在桌面新增的資料夾 * 到左側的 Active Bar 選擇新增檔案並建立一個 html 檔 ![](https://i.imgur.com/v3WxzcG.png) * 這樣就完成第一個檔案的建立啦！ * myFirstWeb：檔名 * html：副檔名 (讓 VS Code 知道你現在正在編輯的檔案類型) --- ## 網頁程式設計簡介 - 所以網頁程式設計到底在幹嘛？ - HTML / CSS / JavaScript 又是什麼？ ---- ### 網頁程式設計透過網頁的形式建立包含前後端的系統，提供一種以網站形式存在並能夠與使用者互動、回應的應用程式。 ---- #### 前端建立美觀、流暢的使用者介面，並將使用者需求傳達給後端，並在拿到回傳資料時適當呈現在頁面上 * 考量內容、影像如何呈現 * 與 UI (User Interface) / UX (User Experience) 息息相關 * 包含互動、特效 (下拉選單、彈跳視窗等 ...) * 建立與後端的連線 ---- #### 後端負責從前端接收使用者請求，並透過與資料庫連接回傳適當的內容、資料給前端供使用者查看、編輯 * 與資料庫連線，完成資料的搜尋、查看、更新與刪除 * 進行較為複雜的資源運算 * 建立與前端的連線 (能夠接收請求並回傳資料) ---- #### 前後端的概念就像 ![](https://i.imgur.com/hnWQR5e.png =80%x) ---- #### 前後端的概念就像 ![](https://i.imgur.com/pn2lzpp.png =80%x) ---- ### HTML / CSS / JavaScript 究竟是何方神聖？網頁三大基本元素！ ![3 poles of front-ent](https://cdn-images-1.medium.com/max/800/1*QjuXtByLQg0o6E-bB6Uw7A.png) ---- #### HTML * 一種標記語言 * 網頁就像一份文件，HTML 則告訴網頁有那裡標題？標題放在哪裡？圖片又放在哪裡？ ---- #### CSS * HTML 描繪了網頁的骨架，CSS 則像是替網頁穿上衣服，變得鮮艷，美觀。 * 可以自訂網頁字體、顏色、背景 * 主要替網頁進行排版、對齊等功能 ---- #### JS (JavaScript) * 負責描述網頁如何與使用者互動 * 能夠接收到使用者的各種行為 (移動滑鼠、點擊按鈕、輸入文字等 ...) ---- #### 他們之間的關係就像 ![](https://i.imgur.com/Vuo3Ox2.gif) --- ## HTML 基礎介紹 HTML 最基本的語法由角括號與斜線構成，像是 <標籤>...</標籤>。 ```htmlembedded= <h1>hello world</h1> <p>Welcome to the web tutorial!</p> ``` ---- ### HTML 的骨幹 ```htmlembedded= <!DOCTYPE html>  <html lang="en">  <head> <meta charset="UTF-8">  <title>Document</title>  </head> <body>  </body> </html> ``` ---- **使用註解** ```htmlembedded= <!DOCTYPE html>  <html lang="en">  <body>  </body>  </html> ``` ---- ## 關於文字 ```htmlembedded= <h1>這是H1</h1> <h2>這是H2</h2> <h3>這是H3</h3> ``` <h1>這是H1</h1> <h2>這是H2</h2> <h3>這是H3</h3> ---- ### br *br* : break，換行 ---- ### p vs span *p* : paragraph 段落，是用作文字的通稱<br> *span* : 行內元素，本身並無特別屬性，通常用作排版、調整外觀 ```htmlmixed= <p>I <span style="color: red;">love</span> you.</p> ``` <p>I <span style="color: red;">love</span> you.</p> ---- ### 來實作看看吧！ * 新增一份 html 檔 (檔名你自己喜歡就 ok!) * 在第一行，打一個驚嘆號 ![](https://i.imgur.com/AT4XI9f.png) * 按下 Enter，應該就會自動產生一個漂亮的 HTML 骨幹啦～ * 接著，在 body 的地方，打下 ```htmlembedded= <h1>Learning HTML is fun!</h1> ``` * 接下來 ... ---- * ctrl + s 進行存檔 * 進入你建立的資料夾，並找到你編輯的這份檔案 * 點擊右鍵並按開啟 * 看看自己的頁面長怎樣吧！ ---- ### 練習 1 請製作一段簡單的自我介紹，要有標題及內文。其中內文需要除了黑色以外的顏色凸顯你的特質！ ![](https://i.imgur.com/XTFY9zw.png) * Hint: H1, span, style, p * 想想看，如果我今天想要讓全部的文字都變成灰色呢？ (div) ---- ### div * 用於包裝一大堆標籤 * 包裝後，可以同時賦予標籤們相同的屬性 (顏色，大小 ...) ---- ### a #### 超連結 ```htmlembedded= <a href="https://ntu.im/course.intro/">點擊以查看更多</a> <a href="https://google.com">Website</a> <a href="mailto:b08705038@ntu.im">Email</a> ``` <a href="https://ntu.im/course.intro/">點擊以查看更多</a> <a href="https://google.com">Website</a> <a href="mailto:b08705038@ntu.im">Email</a> ---- ### 條列式資料，清單 * ul --> Unordered List 未排序清單 * ol --> Ordered List 排序清單 ```htmlembedded= <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> ``` ---- ### 條列式資料，清單 <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul><br/> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> ---- ### 練習 2 ![](https://i.imgur.com/4HjNw3Z.png) * 連結要真的能導到 Facebook, YouTube * 標題：H1 * 試著把某個 list item 變換顏色，但不要影響到前面的圓點或編號 ---- ### 表格 ### *tr*: table row，宣告一個表格的一列 ### *th*: table headers，表頭的內容 ### *td*: table body data，表格的內容 - #### 可以包裝 *th* *td* ---- ```htmlmixed= <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> ``` ---- ### 表格 ![](https://i.imgur.com/azH1p8f.png) ---- ### 圖片 *img* : image 圖片標籤 ```htmlembedded= <img src="nike.jpg" alt="Nike white logo" width="100%"> ``` ![image alt](https://static.zumiez.com/skin/frontend/delorum/default/images/Nike-brand-banner-winter17-v2-750x150.jpg) - *src*: - 可填入圖片路徑 - 也可以使用圖片連結 (如何取得？) - 可透過 *width* 調整大小 - 如果只改動寬或高，會怎麼樣？ - 同時改高 (*height*) 跟寬，又會是甚麼情況呢？ (see demo) - alt: 當圖片顯示錯誤時會展示的文字 ---- ## 休息 10 分鐘！(歡迎大家踴躍發問～) --- ## CSS 來了！ #### 如果剛剛的 style 就可以進行顏色、文字的改動，那 CSS 要幹嘛？ * Code Reusability ---- ### 我們要如何分開 HTML 及 CSS 呢？ * link 標籤就是在這裡派上用場 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head>  <link rel="stylesheet" href="style.css">  </head> <body></body> </html> ``` ---- #### 解釋一下 link ```htmlmixed= <link rel="stylesheet" href="style.css"> ``` * *rel*: relationship, 代表這個連結的目標檔案 (CSS)，跟HTML (自己) 有什麼關係。 * *href*: hyper reference，超連結的縮寫，功能：超連結 - 可以是檔案路徑或網址 ----  ### css 的語法 ```css= .div { color: red; } ``` css 的主要用法就如前面替畫布著色的概念，需要==先指定一個區塊==(用標籤)，==再幫那個區塊加上屬性==(你想要什麼樣風格的裝飾)，以及屬性對應的值。 ---- ### class and id **class** : 幫HTML 的tag 掛上類別 * 可以有很多種不同的類別? 合理嗎? **id** : 幫HTML 的 **某個** tag 取名字 * 一個人可以有很多名字嗎? 合理嗎? ---- 每個HTML的標籤可以有<span style='color:red;'>很多個</span> class 每個HTML的標籤只能夠有<span style='color:red;'>一個</span> id ---- HTML範例 ```htmlmixed= <div id='paragraph1' class='articles'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore natus, mollitia accusamus. </div> <div id='paragraph2' class='articles'> dolorem nihil magni. Quia repellendus mollitia, tempore quam aliquid consectetur. </div> ``` ---- HTML錯誤範例 ```htmlmixed= <div id='paragraph1'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore natus, mollitia accusamus. </div> <div id='paragraph1'> dolorem nihil magni. Quia repellendus mollitia, tempore quam aliquid consectetur. </div> ``` ---- ### CSS selectors（CSS選擇器） - 點"."代表選取 **class** - 井字"#"代表選取 **id** - 直接書寫則是選取 **標籤tag** ```css=1 .articles { property: value; } #paragraph1 { property: value; } #paragraph2 { property: value; } div { property: value; } ``` ---- ### background 讓我們先從 CSS 的 background 講起！ ---- #### background-color 背景顏色可填入[色碼](https://htmlcolorcodes.com/)、基本顏色名稱(red, gray, white...)，預設是transparent(透明) ==VS Code 有酷酷的選顏色功能喔！== ```css=1 h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } ``` ---- #### background-image 背景圖片可填入圖片連結、圖片檔的位置，預設是none ```css=1 body{ background-image: url|none|initial|inherit; background-image: url('https://source.unsplash.com/random/1024x1024'); background-image: url('filepath') } ``` ---- #### background-size 背景大小可填入長度大小、cover（撐滿整個區塊）、contain（顯示整張圖片），預設是auto（原尺寸顯示） ```css=1 body{ background-size: auto|length|cover|contain|initial|inherit; background-size: cover; background-size: 300px 100px; /* 順序是先寬後長 */ } ``` ---- #### background-repeat 背景重複常用的有repeat（預設）, no-repeat（不重複顯示） ```css= body{ background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; background-repeat: no-repeat; } ``` ---- #### background demo ![](https://i.imgur.com/67BpLEg.jpg) ---- ### 關於 CSS 的大小單位 px (pixel: 像素)，沒有一個絕對的寬度，反映的是相對於螢幕大小的一個基本單位 vw & vh，v 是 viewport (視口)，因此它是根據 viewport 寬度、高度做百分比伸縮的單位 (see demo) ---- ### Display ```css= .ex1 {display: none;} /* 不顯示 */ .ex2 {display: inline;} /* 行內元素 */ .ex3 {display: block;} /* 塊元素 */ .ex4 {display: inline-block;} /* 行內-塊元素 */ .ex4 {display: flex;} /* 酷酷的東東，we will cover it later */ ``` ---- #### display: block 塊元素該元素會佔據整行，是大多數的 tag 的預設值 ---- #### display: inline 行內元素該元素會與其他元素顯示在同一行，也是\<span>, \<a>, \<img>的預設值無法設定長寬！ (要的話要用 inline-block) ---- #### display: inline-block 該元素同時擁有 inline 及 block 的屬性，也就是說： inline-block 與 inline 的差別為其可以設定寬與高 (height, width) inline-block 與 block 的差別為其可以與其他元素顯示在同一行 ---- #### display: none 就 ... 讓它消失，而且完全不留痕跡 (不會佔空間) ---- #### display demo! ![](https://i.imgur.com/XvHq9ju.png) ---- ### Display: flex 一種排版的模型，具有主軸起點、終點、尺寸與交錯軸起點、終點、尺寸的特性可以進行布局規畫，因此非常彈性。 ![](https://i.imgur.com/O7oS1xz.png) ---- ### Display: flex Flex 中分為外容器與內元件，下方這張圖就是解釋這兩個的差異。 ![](https://i.imgur.com/k2tFZt9.png) ---- #### flex-direction (資料的流向) 透過給 flex 容器設定 flex-direction 即可調整主軸方向，預設的是 row，也就是由左往右排，而 column 則是由上往下排，若加上 -reverse 則倒轉過來的意思。 ---- ##### row ![](https://i.imgur.com/Cvrl5H8.png) ---- ##### row-reverse ![](https://i.imgur.com/wlfquL5.png) ---- ##### column ![](https://i.imgur.com/5j3uilZ.png) ---- #### flex-wrap (要不要換行) flex 子元素預設會填滿主軸的寬度，而不會自動換行 (nowrap)。 ```css= flex-wrap: nowrap | wrap | wrap-reverse ``` ---- ##### nowrap ![](https://i.imgur.com/Ovm6TII.png) ---- ##### wrap ![](https://i.imgur.com/h6JbQHe.png) ---- ##### wrap-reverse ![](https://i.imgur.com/M0WDKBZ.png) ---- #### justify-content 定義 flex 子元素怎麼在主軸上面排列 ```css= justify-content: flex-start | flex-end | center | space-between | space-around; ``` ---- ##### flex-start 把 flex 子元素從主軸起始點一個個接著排 ![](https://i.imgur.com/yZL17C7.png) ---- ##### flex-end 把 flex 子元素的尾端貼著主軸尾端，並把其他 items 照順序排好 ![](https://i.imgur.com/U7JZkf8.png) ---- ##### center ![](https://i.imgur.com/ZuvzQ2s.png) ---- ##### space-between 把多餘的空間平分在每個 flex 子元素之間 (兩端都種) ![](https://i.imgur.com/hZuRYbn.png) ---- ##### space-around 除了把多餘的空間分配給每個 flex 子元素之間外，整個資料流的主軸兩側也分配空間 (兩端都不種) ![](https://i.imgur.com/Mn4e4vy.png) ---- ##### space-evenly 每兩個 flex 物件之間的空間都相等 ![](https://i.imgur.com/VxkvxlD.png) ---- #### flex 練習請實作一個導覽列(navbar） ![](https://i.imgur.com/IswYp7L.png) ---- #### display: flex 辛苦大家了，這真的非常抽象！但好在網路上有很多很棒的資源可以讓我們以輕鬆易懂的方式學習這些複雜的觀念喔！推薦網站：https://codepen.io/peiqun/pen/WYzzYX (感謝六角學院) ---- ## 休息 10 分鐘！(歡迎大家踴躍發問～，大家也可以去玩玩看六角學院提供的 flex 教材喔！！) ---- ### flex navbar demo ![](https://i.imgur.com/Lul2rzv.png) ---- ### hover 可以用在任何 element 上，並定義當 hover 到這個 element 時，它該有甚麼效果。 ```css= a:hover { text-decoration: line-through; } ``` 試看看用在剛剛的導覽列上吧！ ---- ### Margin, Padding, Border margin 是負責調整元素與元素之間的邊界間距，屬於元素外部的邊界調整。 padding 是負責調整元素內所有內容與元素自身的邊界間距，屬於元素內部的邊界調整。想像是一個盒子（盒模型） ![Margin border padding](https://i.imgur.com/4hvjwnR.png) ---- ### Margin, Padding, Border ![MBP 2](https://www.pluralsight.com/content/dam/pluralsight/blog/dt/wp-uploads/2015/02/examples.jpg) ---- #### Margin 外距一個盒子外面的距離，也就是外距 ```css= body { margin: length|auto|initial|inherit; margin: 30px; /* 也可以分別設定上下左右的外距 */ margin-top: 25px; margin-bottom: 10px; margin-left: 5px; margin-right: 0px; } ``` ---- #### Padding 內距一個盒子裡面的距離，也就是內距 ```css= body { padding: length|auto|initial|inherit; padding: 30px; /* 也可以分別設定上下左右的內距 */ padding-top: 25px; padding-bottom: 10px; padding-left: 5px; padding-right: 0px; } ``` ---- #### Margin, Padding Demo ![](https://i.imgur.com/yjoZqJc.png) ---- ### border-radius 定義元素角落的半徑，讓元素有滑順的圓角 The border-radius property defines the radius of the element's corners. ---- 考慮下圖： <style> .example_MBP{ background: lightblue; } .example_MBP p{ background: white; margin: 30px; border: 10px; border-style: solid; border-color: pink; color: black; } </style> <div class='example_MBP'> <h1>aaa </h1> <p class='paragraph1' > This is par 1 </p> <p class='paragraph2' > This is par 2. </p> <h1>aaa </h1> </div> ---- 新增 `border-radius: 15px;` <style> .example_MBP{ background: lightblue; } .example_MBP p{ background: white; margin: 30px; border: 10px; border-style: solid; border-color: pink; color: black; } .round { border-radius: 15px; } </style> <div class='example_MBP'> <h1>aaa </h1> <p class='paragraph1 round' > This is par 1 </p> <p class='paragraph2 round' > This is par 2. </p> <h1>aaa </h1> </div> ---- ### Position *position* 定義一個標籤他的"定位\位置"特質 - static：預設的，不指定。此屬性的元素不可被定位。 - relative：根據原本應該出現的位置，往**某個方向**移動**某個距離** - absolute：絕對位置，起點為上一個可被定位層，往**某個方向**移動**某個距離** - fixed：固定在瀏覽起的某一點，起點為螢幕左上角，定位後不會因為你滑動頁面，而有所移動 ---- #### position: fixed 固定可以把它想成漂浮的概念固定在瀏覽起的某一點，**起點為螢幕左上角**，定位後不會因為你滑動頁面，而有所移動 ```css= div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; } ``` ---- #### position: relative 相對根據原本應該出現的位置，往**某個方向**移動**某個距離** 該元素會以**原本應該出現的位置**做移動，且應加入移動屬性(top, left, right, bottom) ```css= div.relative { position: relative; top: 10px; left: 30px; border: 3px solid #73AD21; } ``` 另外，relative是**可以被定位**的 ---- #### position: absolute 絕對同樣可以把它想成漂浮的概念起點為上一個可被定位層（除了static以外的都是可被定位層），往**某個方向**移動**某個距離** ```css= div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } ``` ---- #### online position tutorial [Position 定位](https://www.youtube.com/watch?v=k4s6ynrkw6A&ab_channel=GrandmaCan-%E6%88%91%E9%98%BF%E5%AC%A4%E9%83%BD%E6%9C%83) Practice this also in practice_position.html (practice folder) ---- # 實作時間請試著自己寫出包含導覽列、個人照片、簡短自我介紹及表格的網頁。盡量揮灑你們的創意吧～！ (讓大家練習 20 - 30 分鐘！有問題請儘管發問～助教及我都會幫忙大家製作屬於自己獨一無二的網頁～) 範例請看：[About Me!](https://brian-konr.github.io) --- ## 結語 1. 網路服務是很深的領域，今天介紹的只是前端的靜態頁面！ 2. 對製作網頁有興趣的同學，可以繼續鑽研 HTML, CSS，並學習 JavaScript 實現動態頁面！ 3. 儘管使用網頁三大元素即能完成前端製作，但透過各種前端框架 (React.js, Vue.js, Angular) 可以使前端製作變得更有架構及完整！ (有興趣的同學可以自己搜尋喔～) ---- 4. 如同學對網路服務設計 (前後端，資料庫 ...) 感興趣，請保持你的熱情，並與同伴一同實現[令你們驕傲的網路服務！](https://campinghelper.dodofk.xyz/) ---- ## 感謝大家今天的參與！

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.