Transcript HTML＆CSS
網頁設計 Web Design 資管3B 0124006 陳則宏 一、網頁設計? Here comes your footer Page 2 Here comes your footer Page 3 一、網頁設計的劃分? 前端(html、css、javascript) 服務(php、asp、jsp) 資料庫(ms sql、mysql) 東大畢聯 http://134.208.20.58/web2014G/index.html 台大、台科、台師大選課模擬 https://www.crosslink.tw/ 2014 HTML TOP10 http://www.ebizmba.com/articles/best-html5websites Here comes your footer Page 4 Here comes your footer Page 5 二、HTML的基本架構 Here comes your footer Page 6 Here comes your footer Page 7 三、HTML基本元素 屬性 結尾標記 <a href=“http://www.nkfust.edu.tw/”>第一科大</a> 標籤名稱 屬性值 Here comes your footer 內容 Page 8 四、head標籤 標籤 說明 <title> 必須元素，可以顯示瀏覽器視窗上方標題列或標籤頁的標題文字 <meta> 提供HTML網頁的metadata資料，例如：網頁描述、關鍵字、作者和 最近修改日期等資訊 <script> 此標籤是用來定義客戶端的腳本程式碼，例如：JavaScript，HTML 4.0版需要指定type屬性；HTML5版可有可無 <style> 此標籤是用來定義HTML網頁套用的CSS樣式 <link> 此標籤是用來連接外部資源的檔案，主要是用來連接樣式表檔案 Here comes your footer Page 9 四、HTML5的共同屬性 屬性 說明 Id(#) 指定HTML元素唯一的識別名稱，在整頁HTML網頁中的名稱必 須是唯一，不能重複 accesskey 指定元素的快捷鍵來取得焦點(Alt+Shift+A~Z) Class(.) 指定元素套用的樣式類別 dir 指定元素內容的文字方向是從左至右，或從右至左，其值可以 是ltr、rtl或auto lang 指定HTML元素使用的語言 style 指定HTML元素套用的局部套用CSS tabindex 指定按下tab鍵移動元素取得焦點的順序 title 指定HTML元素的額外資訊 Here comes your footer Page 10 Class、id小遊戲 Select the plates http://flukeout.github.io/ Here comes your footer Page 11 五、本次使用的工具-Sublime Text •http://www.sublimetext.com/ •http://docs.emmet.io/cheat-sheet/ Here comes your footer Page 12 斷行(break) Hello~~~~<br>everyone. Here comes your footer Page 13 字體-斜體、粗體、刪除線 <b>ohhhhhh.</b> <i>wooooo.</i> <del>haaaaa.</del> 屬性 值 解釋 datetime YYYY-MM-DDThh:mm:ssTZD 刪除的時間 cite URL 用一個URL解 釋為何刪除 Here comes your footer Page 14 標題h1~h6 <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> Here comes your footer Page 15 標題h1~h6 <h1 align="center">This is heading 1</h1> <h2 align="left">This is heading 2</h2> <h3 align="right">This is heading 3</h3> 屬性 值 解釋 align center 置中 left 靠左 right 靠右 Here comes your footer Page 16 超連結 <a href=“http://www.nkfust.edu.tw/”>第一科大</a> <a href=“http://goo.gl/pIU0D1” download >第一科大</a> 屬性 值 解釋 download 檔案名字 下載該檔案 target _blank _parent 新分頁開啟 該分頁開啟 Here comes your footer Page 17 圖片 屬性 值 解釋 src URL 放入該圖片 align top bottom middle left right border pixels 圖片框線 height pixels 圖片高 width pixels 圖片寬 Here comes your footer Page 18 表格-1 <table> TR橫列 <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> TD直欄 Here comes your footer Page 19 表格-2 <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> <td>$200</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Here comes your footer Page 20 表格-3 <table rules="rows"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Rows、cols、all Here comes your footer Page 21 表格-4 屬性 值 解釋 border pixels 框線 align left center right width pixels bgcolor rgb(x,x,x) #xxxxxx colorname cellpadding pixels 設定表格內文與表格邊緣的距離 cellspacing pixels 設定表格中格子與格子間的距離 Col/rowspa n pixels 合併橫列/縱欄x格 寬 Here comes your footer Page 22 表格-5 大家試試看吧~~~~~ 補充：配色網站 http://paletton.com/#uid=71U0u0koVpleWxOk2s2rGknwHfl 訓練色彩： http://www.xrite.com/online-color-test-challenge Here comes your footer Page 23 項目-1 <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ul圖形 ol數字 Here comes your footer Page 24 項目-2 屬性 值 解釋 type Square circle 方型 空心圓 Here comes your footer Page 25 水平線 屬性 值 解釋 size pixels 尺寸 width pixels 寬 noshade noshade 陰影 align left center right 對齊 Here comes your footer Page 26 Here comes your footer Page 27 CSS效果： http://www.oxxostudio.tw/index.html?=2 強大Div+css效果 http://a.singlediv.com/ 字型篇 http://www.justfont.com/ 背景素材篇 http://www.dinpattern.com/category/patterns/ 按鈕 http://css-button-generator.com/ Here comes your footer Page 28