大直高中網站設計營隊-(04) 前端網頁設計

## 前端網頁設計 ::: info :bulb: HTML5 簡介 ::: #### HTML5 標籤特徵 HTML5 網頁文件的開頭 DOCTYPE 宣告寫法格式如下： ```html= <!DOCTYPE html> ``` HTML5 將標準樣式定義成 CSS3 ，並且將標準的腳本語言定義為 JavaScript，因此省略 type 屬性也能直接使用 CSS3 和 JavaScript 。 * CSS3 ```css= <style></style> ``` * JavaScript ```js= <script></script> ``` #### HTML5 網頁文件格式 HTML5 支援 HTML 和 XHTML 兩種網頁文件格式。 * HTML5 網頁格式 ```html= <!DOCTYPE html> <html＞ <head> <meta charset="UTF-8"> <title>HTML5</title> </head> <body> 歡迎光臨我的 HTML5 網頁 </body> </html> ``` * XHTML 網頁格式 ```html= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <html> <head> <title>XHTML</title> </head> <body> 歡迎光臨我的 XHTML 網頁 </body> </html＞ ``` 更多關於 [XHTML](https://zh.wikipedia.org/zh-tw/XHTML) 的資料，請參考維基百科。 #### 認識 HTML5 新標籤 * 與網頁文件架構相關的新標籤這些新標籤雖然不會對 HTML5 網頁文件產生視覺化的效果，但是對於網頁文件本身的文字具有極大的意義，這些新標籤可以對於網頁文件產生區隔的功能，例如：\ 1. section 標籤能夠將網頁文件的整段文章加上標題，表示專題性的內容。 #### 範例(1) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <section> <h2>網站設計</h2> <div> 我也會前端網站設計( HTML5 + CSS3 + JavaScript )。 </div> <section> </body> </html> ``` 2. article 標籤能夠將網頁文件建立完整的文章區塊，適合於新聞報導、留言板等文章。 #### 範例(2) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <h1>頭條新聞</h1> <article> <h2>我學會寫 HTML5 標籤語言了。</h2> 經過了第一個課程的介紹，我學會了 HTML5 標籤語言，並且知道如何運用這個標籤語言來撰寫寫網頁文件了。 </article> <article> <h2>我學會寫 CSS3 排版語言了。</h2> 經過了第二個課程的介紹，我學會了 CSS3 排版語言，並且知道如何運用這個排版語言來美化網頁文件了。 </article> <article> <h2>我學會寫 JavaScript 程式語言了。</h2> 經過了第三個課程的介紹，我學會了 JavaScript 程式語言，並且知道如何運用這個程式語言來讓網頁文件動起來了。 </article> </body> </html> ``` 3. header 標籤能夠將網頁文件建立標頭內容，以利於章節目錄或是搜尋表單等。 #### 範例(3) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <article> <header> <h1>網站設計</h1> </header> <div> 我也會 HTML5 的語法。 </div> </article> </body> </html> ``` 4. footer 標籤能夠將網頁文件建立頁腳內容，以利於著作權相關資訊或是相關的網頁連結等。 #### 範例(4) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <article> <header> <h1>網站設計</h1> </header> <div> 我也會在 HTML5 網頁文件底下加上文字。 </div> </article> <hr> <footer> Copyright © All Rights Reserved </footer> </body> </html> ``` 5. nav 標籤能夠將網頁文件建立導航標籤，以利於網頁目錄或是項目清單等。 #### 範例(5) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <h1>網站設計</h1> <nav> <ul> <li>我知道什麼是 HTML5 </li> <li>我知道什麼是 CSS3 </li> <li>我知道什麼是 JavaScript </li> </ul> </nav> <hr> <footer> Copyright © All Rights Reserved </footer> </body> </html> ``` ::: info :bulb: CSS3 簡介 ::: #### 認識 CSS3 新語法 CSS3 可以在不使用圖片或是 JavaScript 腳本語言的情況下，直接製作出陰影或漸層的效果，充份提昇了網頁外觀的美化功能。 1. 調整區塊大小 CSS3 提供 resize 屬性可以建立具有調整大小功能的區塊在網頁文件中嵌入以下的 HTML5 標籤。 ```html= <div class=ZoneResize> "具有調整大小功能的區塊" </div> ``` 在網頁文件中嵌入以下的 CSS3 語法。 ```css= .ZoneResize { width: 300px; height: 200px; border:solid blue 1px; resize:both; } ``` #### 範例(6) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <style type="text/css"> .ZoneResize { width: 300px; height: 200px; border:solid blue 1px; resize:both; } </style> </head> <body> <h1>網站設計</h1> <div class=ZoneResize> "具有調整大小功能的區塊" </div> </body> </html> ``` 關於 resize 的屬性說明如下： | 屬性值 | 說明 | | -------- | -------- | | none | 無法調整區塊大小 | | both | 可以調整區塊大小 | | horizontal | 只能調整區塊寛度 | | vertical | 只能調整區塊高度 | 2. 為區塊加上陰影 CSS3 提供 box-shadow 屬性可以為區塊加上各式各樣的陰影在網頁文件中嵌入以下的 HTML5 標籤。 ```html= <div class=ZoneShadow> "具有陰影的區塊" </div> ``` 在網頁文件中嵌入以下的 CSS3 語法。 ```css= .ZoneShadow { width: 300px; height: 200px; border:solid blue 1px; box-shadow: blue 2px 2px 2px; } ``` - [x] box-shadow 屬性前3個參數是必要的:顏色, x偏移, y偏移, 後面的參數可以省略。 #### 範例(7) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <style type="text/css"> .ZoneShadow { width: 300px; height: 200px; border:solid blue 1px; box-shadow: blue 2px 2px 2px; } </style> </head> <body> <h1>網站設計</h1> <div class=ZoneShadow> "具有陰影的區塊" </div> </body> </html> ``` 3. 為文字加上陰影 CSS3 提供 text-shadow 屬性可以為文字加上各式各樣的陰影在網頁文件中嵌入以下的 HTML5 標籤。 ```html= <div class=TextShadow> "具有陰影的文字" </div> ``` 在網頁文件中嵌入以下的 CSS3 語法。 ```css= .TextShadow { text-shadow: blue 2px 2px 2px; } ``` #### 範例(8) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <style type="text/css"> .TextShadow { text-shadow: blue 2px 2px 2px; } </style> </head> <body> <h1>網站設計</h1> <div class=TextShadow> "具有陰影的文字" </div> </body> </html> ``` 4. 背景圖片位置 CSS3 提供 background-origin 屬性可以指定背景圖片的基準位置： - `border-box` 以外框盒邊緣為起始基準 - `padding-box` 以內距盒邊緣為起始基準(此為預設值) - `content-box` 以內容盒邊緣為起始基準效果如下表： |CSS|效果| |-|-| |<pre>background-origin: border-box;<br/>background-repeat: no-repeat;</pre>|![](https://hackmd.io/_uploads/H1HcciX8R.png)| |<pre>background-origin: border-box;<br/>background-repeat: no-repeat;</pre>|![](https://hackmd.io/_uploads/ry1ljsX80.png)| |<pre>background-origin: border-box;<br/>background-repeat: no-repeat;</pre>|![](https://hackmd.io/_uploads/S15eio7IC.png)| * 圖片出處：[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin) #### 範例(9) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <style type="text/css"> .test { width: 200px; height: 100px; margin-bottom: 5pt; background-repeat: no-repeat; border: 20pt dashed dimgrey; padding: 20pt; background-image: url('https://www.dcsh.tp.edu.tw/wp-content/uploads/logo.png'); } #test-border { background-origin: border-box; } #test-padding { background-origin: padding-box; } #test-content { background-origin: content-box; } </style> </head> <body> <h1>網站設計</h1> <div class="test" id="test-border">內容</div> <div class="test" id="test-padding">內容</div> <div class="test" id="test-content">內容</div> </body> </html> ``` <kbd>![image](https://hackmd.io/_uploads/r1icX3X8C.png)</kbd> * 參考資料：[FreeCodeCamp](https://www.freecodecamp.org/news/what-is-box-sizing-border-box-css/) 5. 背景圖片大小 CSS3 提供 background-size 屬性可以指定背景圖片的大小。在網頁文件中嵌入以下的 CSS3 語法。 ```css= background-size: contain; ``` - [x] contain 屬性值代表背景圖片的以原來的長寬比例顯示在區塊中。 ```css= background-size: cover; ``` - [x] cover 屬性值代表背景圖片的以原來的長寬比例填滿整個區塊。 ```css= background-size: auto; ``` - [x] auto 屬性值代表背景圖片的以原來的長寬比例顯示。 ```css= background-size: 200px 100px; ``` - [x] 指定大小顯示圖片。 ```css= background-size: 100px auto; ``` - [x] 指定的寬度和原始高度顯示圖片。 * 區塊四方修圓角 CSS3 提供 border-radius 屬性可以幫區塊的四方修圓角。在網頁文件中嵌入以下的 HTML5 標籤。 ```html= <div> class="myRadius" </div> ``` 在網頁文件中嵌入以下的 CSS3 語法。 ```css= .myRadius{ width: 400px; height: 300px; padding: 10px; border: solid 5px blue; background-color: yellow; border-radius: 10px 10px 10px 10px; } ``` - [x] border-radius 屬性值的設定有以下四種方式: 1. 四個值:左上右上右下左下 2. 三個值:左上右上及左下右下 3. 二個值:左上及右下右上及左下 4. 一個值:全部 #### 範例(10) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <style type="text/css"> .myRadius{ width: 400px; height: 300px; padding: 10px; border: solid 5px blue; background-color: yellow; border-radius: 10px 10px 10px 10px; } </style> </head> <body> <h1>網站設計</h1> <div> <p class="myRadius">歡迎光臨我的網頁</p> </div> </body> </html> ``` ::: info :bulb: JavaScript 簡介 ::: * 訊息視窗 #### 範例(11) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> </head> <body> <script language="javascript"> window.alert("親愛的朋友們，歡迎來到我的 JavaScript 網頁。"); </script> </body> </html> ``` #### 範例(12) * 小時鐘 ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <script language="JavaScript"> function showtime(){ 　 now=new Date() 　 with(now){ 　　　 hours=getHours() 　　　 minutes=getMinutes() 　　 seconds=getSeconds() 　 } 　 if(hours<10) 　 hours="0"+hours 　 if(minutes<10) 　 minutes="0"+minutes 　 if(seconds<10) 　 seconds="0"+seconds 　 document.time.clock.value=hours+":"+minutes+":"+seconds 　 setTimeout('showtime()',1000) } </script> </head> <body background = black onLoad="showtime();"> <form name=time> 現在時間： <input type=text name=clock size=10> </form> </body> </html> ``` * 跑馬燈 #### 範例(13) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <script language="JavaScript"> var msg="歡迎來到大直高中!!"; var space10=" 　　　　"; var interval1 = 15; var interval2=180; var seq=0; function Scroll1() { document.tmForm.tmText.value = msg.substring(0, seq+1); seq++; if ( seq >= msg.length ) { seq = 0; window.setTimeout("Scroll2();", interval2 ); } else window.setTimeout("Scroll1();", interval1 ); } function Scroll2() { document.tmForm.tmText.value = msg.substring(seq, msg.length) + space10 + msg.substring(0, msg.length); seq++; if ( seq > msg.length ) { seq = 0 }; window.setTimeout("Scroll2();", interval2 ); } </script> </head> <body onload="Scroll1();"> <form name="tmForm"> <input name="tmText" size="30"> </form> </body> </html> ``` * 線上測驗 #### 範例(14) ```html= <!DOCTYPE html> <html> <head> <title>網站設計專題</title> <script language="JavaScript"> function checkUid () { var i = 0; var results = ''; var score = 0; var theForm = document.forms['exam']; /* ★正確答案放在這裡 */ var answer = new Array(2, 1, 2, 1, 3); for(i=0;i<answer.length;i++) if (theForm.elements['q' + (i+1)][answer[i]-1].checked) score+=100/answer.length; else results += '第' + (i+1) + '題正確答案為: ' + answer[i] + '\n'; results += '\n您的總分為: ' + Math.round(score) + ' 分。' + '\n\n'; if (score==100) results += '哇！您出國比賽一定得第一！' + '\n'; else if (score >= 80) results += '嗯... 還不錯...' + '\n'; else if (score >= 60) results += '馬馬虎虎啦...' + '\n'; else if (score >= 40) results += '失敗為成功之母, 別灰心' + '\n'; else results += '你的名字是麥克真是遜！' + '\n'; window.alert(results); } </script> </head> <body> 命題者：高慧君 <br> <form name="exam" onsubmit="checkUid();"> <fieldset> <br> 第一題的題目 <BR> <input name="q1" value="1" type=radio> 答案一 <input name="q1" value="2" type=radio> 答案二 <input name="q1" value="3" type=radio> 答案三 <input name="q1" value="4" type=radio> 答案四 </fieldset> <fieldset> <br> 第二題的題目 <BR> <input name="q2" value="1" type=radio> 答案一 <input name="q2" value="2" type=radio> 答案二 <input name="q2" value="3" type=radio> 答案三 <input name="q2" value="4" type=radio> 答案四 </fieldset> <fieldset> <br> 第三題的題目 <br> <input name="q3" value="1" type=radio> 答案一 <input name="q3" value="2" type=radio> 答案二 <input name="q3" value="3" type=radio> 答案三 <input name="q3" value="4" type=radio> 答案四 </fieldset> <fieldset> <br> 第四題的題目 <BR> <input name="q4" value="1" type=radio> 答案一 <input name="q4" value="2" type=radio> 答案二 <input name="q4" value="3" type=radio> 答案三 <input name="q4" value="4" type=radio> 答案四 </fieldset> <fieldset> <br> 第五題的題目 <BR> <input name="q5" value="1" type=radio> 答案一 <input name="q5" value="2" type=radio> 答案二 <input name="q5" value="3" type=radio> 答案三 <input name="q5" value="4" type=radio> 答案四 </fieldset> <input type="submit" value="交卷" name="submit"> </form> </body> </html> ``` - [x] 試題參考 1. 為了救愛妾而引清兵入關的明末將領為： (1)吳一桂(2)吳二桂(3)0吳三桂(4)吳四桂 2. 東漢末年，劉備、關羽兩人與哪個人互有盟約，稱為兄弟： (1)岳飛(2)張菲(3)鳯飛飛(4)張飛 3. 發明萬有引力的是誰： (1)海頓(2)牛頓(3)立頓(4)毛盾 4. 唐朝貞觀之治的明君是那位？ (1)唐太宗(2)宋太宗(2)元太宗(4)明太宗 5. 中國歷史上第一位女皇帝為： (1)文則天(2)武則天(3)斌則天(4)我的天 6. 七七事變是指？ (1)蘆溝橋事變(2)蘆溝路事變(2)凱達格達大道事變(4)我愛菲變變變 7. 格林童話的作者是？ (1)萊特兄弟(2)格林兄弟(3)典農'兄弟(4)你是我的兄弟 8. 民國八十年代可以用來看病的是？ (1)卡輕鬆(2)打快通(3)卡健傈(4)健保卡 9. 中華民國國父孫中山先生出生於？ (1)翠亨村(2)六福村(3)八墓村(4)九族文化村 10. 曾經轟動影史票房座纪錄的「鐵達尼號」是下列哪位男星主演？ (1)迷你奧利多(2)李奧納多(3)歐樂納命(4)莞樂多 11. 秦代橫跨渭水雨岸的宮殿是： (1)白宮(2)子宮(3)阿房宮(4)克里姆林宮 12. 開創唐代貞觀之治的皇帝是： (1)陳為民(2)李世民(3)高天民(4)劉錫明 13. 宋代徽宗自創的書法體稱為： (1)漢體(2)天體(3)明體(4)瘦金體 14. 明代鄭和下西洋之原因是： (1)皇帝命令(2)參加旅行(3)盜採珊瑚(4)地方招待 15. 唐朝詩人，著有長恨歌描寫楊貴妃生平的是： (1)白居易(2)李居易(3)李嘉麗(4)白冰冰

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.