week04.key - PDF Free Download

基礎網頁設計第四週老師 : 蔡承洋

大綱 HTML 的圖片使用 HTML5 播放音樂影片網站加上 favicon DOM(Document Object Model) 文件物件模型樹的概念念開始來來寫 CSS CSS 常用屬性

HTML 的圖片使用

html 使用 img 標籤顯示圖片圖片格式有 jpg : 不需用到透明底, 檔案容量量小 png: 可有透明底, 但檔案較大 gif: 可有透明底, 但顏色較少, 相對檔案小, 可做動畫

HTML5 播放音樂影片

<audio> http://www.w3schools.com/html/html5_audio.asp <audio src="media/ppap.mp3" controls> </audio> <audio src="media/ppap.mp3" controls autoplay loop> </audio> 顯示播放控制自動播放重複播放 <video> http://www.w3schools.com/html/html5_video.asp <video src="media/laughing.mp4" controls> </video> <video src="media/laughing.mp4" controls autoplay loop> </video> 顯示播放控制自動播放重複播放 PS. 影片需用 H.264 編碼影片格式, 且為.mp4 副檔名

youtube 嵌入影片下方找到分享 > 嵌入 > 複製下方 html 程式碼, 將複製的程式碼貼於網頁中 1 2 3 <h1> 嵌入 youtube 影片 </h1> <iframe width="560" height="315" src="https://www.youtube.com/embed/bx7npiesbpi" frameborder="0" allowfullscreen> </iframe> facebook 嵌入 2 進入影片原始貼文, 右下方找到嵌入影片 > 點擊後複製 html 程式碼並貼於網頁 1 <h1> 嵌入 facebook 影片 </h1> <div id="fb-root"></div><script>(function(d, s, id) { var js, fjs.

網站加上 favicon

網頁 google high quality favicon 關鍵字或到 http://www.consultsarath.com/public-utilities/favicon.aspx 上傳正方形的圖片, 大小建議 32x32 或 64x64 等比即可可上傳有透明的 png 圖線上製作後, 將 ico 檔下載放在網站的 images 資料夾中在 html 中的 <head></head> 裡面加入以下語法做設定 <link rel="shortcut icon" href="images/favicon.ico">

DOM(Document Object Model) 文件物件模型樹的概念念

<!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title>dom 程式碼 </title> <link rel="shortcut" content="favicon.ico"> <link rel="stylesheet" content="style.css"> <script src="main.js"> </script> </head> <body> <div class="top"> <div class="logo"> <img src="images/123.jpg" /> </div> <img src="images/ads.jpg" class="ads"/> </div> <div class="top"> 我是在中間層 <a href="http://google.com" target="_blank">google.com</a> </div> <div id="footer"> 頁底資訊 1 <p> 連結 <a href="http://tw.yahoo.com" target="_blank">yahoo 奇摩 </a> </p> </div> </body> </html>

html head body meta sctipt div class= top div class= top div id= footer title link rel= shortcut link rel= stylesheet class= logo div img class= ads text... text 1 img a p text a google.com

html head body meta sctipt div class= top div class= top div id= footer title link link rel= shortcut rel= stylesheet div img class= logo class= ads text text... 1 img a p text a google.com

開始來來寫 CSS

CSS 撰寫瀏覽器讀取 CSS 順序由是上往下選擇器可以同時選擇多個元素子元素會繼承父元素的設定子元素可以覆寫父元素的設定兩兩個以上的選擇器, 若若有選到同一個元素, 後者會覆寫前者的設定

CSS 撰寫 css 撰寫規則 html { : ; div, p{ background-color: #aaaccc; div, table a, span{ background-color: #aaaccc; #mydiv{ width:200px; height:100px;.mydiv2{ background-color: #aaaccc; div.mydiv3{ color: #aaaccc;

CSS 撰寫使用 style 屬性, 寫在 tag 中 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> 第五週直接把 css 語法寫在標籤中 </title> </head> <body> <h1 style='text-align:center;'> 直接把 css 語法寫在標籤中 </h1> <p style="color:red; font-size:14px;">google 剛發表了了兩兩款全新的 Nexus 智慧手機 Nexus 5X 和 Nexus 6P </p> </body> </html>

CSS 撰寫使用選擇器寫法, 寫在 <style></style> 元素中 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> 第五週 css 使用選擇器寫在 style 元素中, 並寫於 html 裡 </title> <style> h1{ text-align:center; p{ </style> </head> color:red; font-size:14px; <body> </body> </html> <h1>css 使用選擇器寫在 style 元素中, 並寫於 html 裡 </h1> <p>google 剛發表了了兩兩款全新的 Nexus 智慧手機 Nexus 5X 和 Nexus 6P </p>

CSS 撰寫獨立寫成 css 檔案, 讓 html 使用 <link> 引入 css2.html css 資料夾中的 style.css 檔 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> 第五週 css 獨立寫成一個.css 檔案, 讓 html 引入 </title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> <h1>css 獨立寫成一個.css 檔案, 讓 html 引入 </h1> <p>google 剛發表了了兩兩款全新的 Nexus 智慧手機 Nexus 5X 和 Nexus 6P </p> h1{ p{ text-align:center; color:red; font-size:14px;

CSS 常用屬性

CSS 常用語法參參考語法 http://www.w3schools.com/css/default.asp width min-width max-width height min-height max-height color 屬性功用範例例寬度高度文字顏色 width: 200px; min-width: 100px; // 最小寬度 max-width: 500px; // 最大寬度 height: 200px; min-height: 100px; // 最小高度 max-height: 500px; // 最大高度 color: #333333; color: blue; color: rgba(12,33,33,0.1); http://boohover.pixnet.net/blog/post/20556952 font 字型文字 font: 10pt " 微軟正黑體 ",'Lucida Sans Unicode', Helvetica, Arial, sans-serif; font-size 文字大小 background-color 背景顏色 font-size: 10pt; font-size: 10px; font-size: 1.2em; background-color: #333333; background-color:rgba(100,21,100,0.7); background-image 背景底圖 background-image: url(http://123.com.tw/123.jpg); 圖片重複方 background-repeat: no-repeat; /* 不重複 */ background-repeat 式 background-repeat: repeat-x; /* 往右重複 */ background-repeat: repeat-y; /* 往下重複 */ background 背景 background: url( img/123.jpg ) #ccc repeat-x; border 邊框 border: #cccccc solid 1px; /* 四邊 */ border-top: #cccccc solid 1px; /* 上邊 */ border-right: #cccccc solid 1px; /* 右邊 */ border-bottom: #cccccc solid 1px; /* 下邊 */ border-left: #cccccc solid 1px; /* 左邊 */

CSS 常用語法參參考語法 http://www.w3schools.com/css/default.asp padding 屬性功用範例例區塊內間隔 padding: 10px 5px 3px 20px; padding: 10px 5px; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin 區塊外元素間隔 margin: 10px 5px 3px 20px; margin: 10px 5px; margin: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; text-align 內容物水平對齊 text-align: center; /* 選項 :left center right justify( 左右對齊 ) */ vertical-align 內容物垂直對齊 vertical-align: middle; /* 選項 :top middle bottom */ float clear 浮動清除浮動 float: left; /* 選項 :left right */ float: right; /* 選項 :left right */ clear: left; /* 選項 :left right */ clear: right; /* 選項 :left right */ opacity 透明程度 0 ~ 1 (0.1, 0.2, 0.3 ) filter 透明程度 for IE alpha(opacity=0) 0~100 display 區塊顯示 display:none; // 不顯示 display:inline; // 行行內 http://blog.xuite.net/vexed/tech/29221717

CSS 常用語法參參考語法 http://www.w3schools.com/css/default.asp 屬性功用範例例 box-shadow 陰影 border-radius 圓角 box-shadow: 10px 10px 2px 1px #333; box-shadow: x 軸 y 軸模糊半徑散佈半徑顏色 ; 陰影產生器 :http://www.cssmatic.com/box-shadow border-radius: 10px; // 四角 border-top-left-radius: 10px; // 左上角 border-top-right-radius: 12px; // 右上角 border-bottom-right-radius: 30px;// 右下角 border-bottom-left-radius: 40px; // 左下角圓角產生器 :http://border-radius.com/ 事件效果說明範例例標籤元素 :hover 當滑鼠移動到該元素上時標籤元素 :active 當在該元素點擊時 ( 往下點的動作 ) a{ color: #aaaaaa; a:hover{ color: #333; a{ color: #aaaaaa; a:active{ color: red;