HTML & CSS 簡介 By WM 張鎮衡 wandererm@gmail.com 本講義採用 WMGFL 授權 其實是 CC 創用 XD
說在前頭 首先, 今天這份講義的重點是簡介不是教學 希望大家聽完之後有個概念, 網頁寫作其實不容易 但很有趣 最後. 請愛用 Firefox, 這是今天的教學工具
工欲善其事 必先利其器 ~ 客官 ~ 挑件稱手的兵器吧! Notepad++ http://notepadplus.sourceforge.net/tw/site.htm 向他們說不 Dreamweaver FrontPage.
大綱 HTML 話從頭 HTML 概觀 HTML 標籤與使用 CSS 介紹 CSS 性質與使用 網頁寫作問題 目前的網頁技術 延伸討論與問題
最開始是怎麼來的? Tim Berners-Lee WWW (WorldWideWeb) 的發明人 W3C 的成立網站 :http://w3.org 致力於推動網頁標準
WWW 歷史 1960:Hypertext 觀念 1989:Tim Berners-Lee WWW 1990:Tim Berners-Lee HTTP 1994:W3C 1994:Netscape 1995:Internet Explorer 1996:Opera 2004:Mozilla Firefox 2008:Google Chrome
HTML 簡介 Hypertext Markup Language 有翻譯為 超文本標記語言 基本架構 <html> <head> xxx </head> <body> xxx </body> </html> 巢狀層疊的標籤容器 不同的標籤定義不同的內容 參考 :http://www.w3.org/markup/
W3C HTML 標準 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> 標題 </title> </head> <body>hello </body> </html>
WHATWG HTML5 Web Hypertext Application Technology Working Group 2012 年完備 2022 年啟用 <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>ccca</title> </head> <body> hello </body> </html>
DTD Document Type Declaration 說明這份文件的資料型態 分為 : 嚴謹 寬鬆 框架三種 參考資料 : http://www.w3.org/qa/2002/04/valid-dtdlist.html
標籤 成對, 有始有終 標籤會附帶一些屬性 < 標籤起始屬性 = 屬性值 >.. </ 標籤結束 >
文件標頭 <head>. </head> 裡面還有 <title> 我是文件標題 </title> 主要定義一些文件的屬性
文件 <body>.. </body> 裡面放網頁的主要內容, 文件的主體 屬性 : background bgcolor 背景圖片背景顏色
標頭 <hn> 我是標頭 </hn> N=1,2,3,4,5,6 數字越小, 等級越大 <h1> 我是大標題 </h1> <h2> 我是次要標題 </h2>
區塊 <div>.. 可以視為是一個容器 </div> 屬性 : id 單一的名稱 ( 不能有同樣 id 的元素 ) class 共用的群組 ( 可以有相同 class 的標籤 ) width 寬度 height 高度 在 CSS 的應用上非常氾濫
段落 <p> </p> 屬性 : align 水平對齊 :left center right
樣式 強調 : <strong> 粗體 : <b> 斜體 :<i> 加大字級 :<big> 縮小字級 :<small> 插入 ( 底線 ):<ins> 刪除 ( 劃掉 ):<del> 斷行 :<br /> 水平線 :<hr />
圖片 <img /> 屬性 : 包含之前提過的 width height src 來源, 注意相對路徑 alt 替代文字顯示 title 圖片的說明文字 border 框線大小 (= N,N=1,2,3 ) <img src= haha.png alt= 哈哈 title= 這就是哈哈 />
超鏈結 <a>.. 作用的文字或圖片等 </a> 屬性 : href title target 連結的網址連結的說明作用的目標
無序清單 (unordered list) <ul> <li> 項目一 </li> <li> 項目二 </li> </ul> <li> 項目文字 </li>
有序清單 (ordered list) <ol> <li> 項目一 </li> <li> 項目二 </li> </ol> 屬性 : start type A a I 1 起始數字編號樣式 大寫字母小寫字母大寫羅馬數字阿拉伯數字
巢狀清單 兩種清單可以層疊混用 <ol> <li> 項目一 </li> <li> 項目二 </li> <ul> <li> 項目一 </li> <li> 項目二 </li> </ul> </ol>
表格 <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> 1 2 3 4
表格屬性 width height colspan 寬度 高度 合併欄 rowspan 合併列 align valign 水平對齊 垂直對齊 (top middle bottom)
很簡單, 對吧? 用標籤描述性質 由上而下的排列 純粹內容取向, 無關排版定位 等等, 那視覺上的排版呈現呢?
CSS 來啦! Cascading Style Sheets 有人翻譯為 串接樣式表, 特性是各性質所定義的樣式會有繼承關係 在網頁的排版美化和風格建立上起了很大的作用
使用 CSS 的好處 將樣式與 HTML 分離, 使得 HTML 的標籤更為簡潔, 不需要設一大堆的屬性值 可以讓我們更精確地操控網頁中各項元素的視覺呈現 只要改動 CSS 檔案, 便可以使得整個網頁的風格完全改觀
CSS 是在唬弄些什麼? 選擇器 (Selector) 通常為網頁檔中的元素 (element), 如 <body>,<p>,<strong> 等標籤, 多個選擇器可以半形逗號 (,) 隔開 屬性 (property) 控制選擇器的樣式 值 (value) 指屬性接受的設定值, 可由各種關鍵字 (keyword) 組成, 多個關鍵字時大都以空格隔開
CSS 的長相.blah{height:50px;width:150px;background :#399} #blah{background:#c33;height:50px;width: 150px}.tabs{position:relative;top:-20px;left:30px; background:#f60;height:50px;width:150px} table{text-align:right} 前面是選擇器, 定義樣式作用的元素大括號裡面則是樣式的各項屬性, 分號隔開各項屬性, 冒號後設定值
文件內定義 <head> <style type="text/css"> H3, H5{color : #999999 ; font-family : verdana,sans-serif} </style> </head> 在 <head> 標籤裡面定義這個頁面所使用的樣式表
直接定義標籤的樣式 使用 style 屬性 <div style= text-align:center;float:left >. </div> 當需要快速固定一個標籤的外觀時, 十分好用, 不過會造成 HTML 標籤雜亂, 寫在同一網頁中更有更動不易的缺點
連結樣式表 <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> 將樣式表另存成一個 *.css 檔案後連結進來
匯入樣式表 <head>. <style type="text/css"> @import url("style.css"); </style>. </head> 特色是可在 CSS 檔案中再匯入另一份 CSS 檔案
選擇器的使用 #blah{ } 作用在 <div id= blah > 的區塊元素上.blah{ } 作用在 <div class= blah > 的區塊元素上 td.blah{...} 作用在 <td class= blah > 的表格元素上 table.blah td{..} 作用在每個 <table class= blah > 裡面的 <td>
容器的概念與模型 margin: 外邊界距 padding: 內邊框距 Content 的內容才是 width 和 height 的作用對象
文字樣式 color:#000 ;(#fff #fa30b9) 文字色彩 font-family: 細明體,sans-serif; 字型 font-size : 9pt; (1.5em) 字體大小 font-style:italic; 文字斜體 font-weight:bold; 文字粗體 line-height : 200%; 設定行高 letter-spacing : 1pt; 字間距離
文字對齊 text-align: left 靠左 right 靠右 center 置中 vertical-align: top 靠頂 middle 置中 bottom 靠底 水平對齊 垂直對齊
背景樣式 background-color:#f5e2ec; 背景色彩 background:transparent; 透視背景 background-image : url(image/bg.gif); 背景圖片 background-attachment : fixed; 浮水印固定背景 background-repeat: repeat no-repeat repeat-x repeat-y 重複排列 - 網頁預設不重複排列在 x 軸重複排列在 y 軸重複排列
連結樣式 a a:link a:visited a:active a:hover 所有超連結超連結文字格式瀏覽過的連結文字格式按下連結的格式滑鼠移至連結 廣泛被使用在按鈕的製作上
框線樣式 bordertop : 上框線 bottom : 下框線 left : 左框線 right : 右框線 border-top : 1px solid #6699cc; 其它框線樣式 solid 實線框 dotted 虛線框 double 雙線框 groove 立體內凸框 ridge 立體浮凸框 inset 凹框 outset 凸框
邊界邊框 padding-top:10px; 上邊框留空白 padding-right:10px; 右邊框留空白 padding-bottom:10px; 下邊框留空白 padding-left:10px; 左邊框留空白 margin 用法同上 快速設定 padding: 0px 四個值都設為一樣 margin:0px 10px; 左右 0px 上下 10px padding:0px 5px 10px 20px; 依序為上右下左繞一圈
物件定位 position: static absolute relative 預設無定位以網頁左上角為起始點以物件左上角為起始點 搭配 top 和 left 屬性使用 div#blah {position:absolute;top:100px;left:100px} 叫 blah 的這個區塊會出現在離上面 100px, 距左邊界 100px 的地方
相對位置 float: clear: none left right none left right both 預設無漂移向容器的左邊靠向容器的右邊靠預設無排除元素左靠 排除右邊元素右靠 排除左邊元素的兩邊都不能有
奇技淫巧 大觀園! 非常有名的 css Zen Garden: CSS 設計之美 http://www.csszengarden.com/tr/chinese/ CSS 選單 按鈕變換 替身娃娃 雜七雜八 blahblah 族繁不及備載
Acid2 測試 其實不過就是個笑臉 但讓很多人笑不出來 其實各家瀏覽器對 CSS 的支援.. 還不是很完整 Orz 參考閱讀 : http://zh.wikipedia.org/wiki/acid2
寫網頁給誰看? 這是個要先想清楚的問題 考慮 : 1. 需求 2. 功能 3. 視覺傳達 別忘了是要寫給人看的 ~
網頁呈現的親和力 放棄 開新頁面 這種寫法吧! 圖片的替代說明 字體大小的考量 選單的擺放 整體的易讀性
他們用什麼來看我的網頁? 廢話, 除了瀏覽器還能有什麼? 可是瀏覽器也有很多種啊 ~ 在什麼機器上的瀏覽器? 電腦 手機 遊樂器? 什麼樣的瀏覽器程式? 顯示的效果如何?
瀏覽器大戰 Internet Explorer 8 - 因為很多人沒看到那個大大的 e 就不會上網 XD Mozilla Firefox - 輕巧 自訂性最高 Opera - 速度最快的瀏覽器之王 - 目前 Windows 平台上最符合標準 Wii 上也有喔!
更進一步的網頁花樣 更方便地更新網頁內容 PHP & MySQL 會動 會跟人互動 JavaScript Shockwave Flash
總結 CSS 就像是魔法一樣規則很少, 技巧很多, 但很難實現 網頁設計要考慮的東西很多 謝謝大家! 希望各位都能多少得到一些心得 ~
學習參考 好孩子的網頁設計 XHTML (Firefox) http://jedi.org/blog/archives/005444.html OECSpace (CSS 教學 ) http://www.hsiu28.net/ 網頁之翼 ( 各大網誌樣式表 ) http://hit1205.ispaz.blogdns.org/
延伸閱讀 HTML http://zh.wikipedia.org/wiki/html CSS http://zh.wikipedia.org/wiki/css XHTML http://zh.wikipedia.org/wiki/xhtml