HTML與CSS簡介

Size: px

Start display at page:

Download "HTML與CSS簡介"

甫鬼满
5 years ago
Views:

1 HTML & CSS 簡介 By WM 張鎮衡本講義採用 WMGFL 授權其實是 CC 創用 XD

2 說在前頭首先, 今天這份講義的重點是簡介不是教學希望大家聽完之後有個概念, 網頁寫作其實不容易但很有趣最後. 請愛用 Firefox, 這是今天的教學工具

3 工欲善其事必先利其器 ~ 客官 ~ 挑件稱手的兵器吧! Notepad++ 向他們說不 Dreamweaver FrontPage.

4 大綱 HTML 話從頭 HTML 概觀 HTML 標籤與使用 CSS 介紹 CSS 性質與使用網頁寫作問題目前的網頁技術延伸討論與問題

5 最開始是怎麼來的? Tim Berners-Lee WWW (WorldWideWeb) 的發明人 W3C 的成立網站 : 致力於推動網頁標準

6 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

7 HTML 簡介 Hypertext Markup Language 有翻譯為超文本標記語言基本架構 <html> <head> xxx </head> <body> xxx </body> </html> 巢狀層疊的標籤容器不同的標籤定義不同的內容參考 :

8 W3C HTML 標準 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> 標題 </title> </head> <body>hello </body> </html>

9 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>

10 DTD Document Type Declaration 說明這份文件的資料型態分為 : 嚴謹寬鬆框架三種參考資料 :

11 標籤成對, 有始有終標籤會附帶一些屬性 < 標籤起始屬性 = 屬性值 >.. </ 標籤結束 >

12 文件標頭 <head>. </head> 裡面還有 <title> 我是文件標題 </title> 主要定義一些文件的屬性

13 文件 <body>.. </body> 裡面放網頁的主要內容, 文件的主體屬性 : background bgcolor 背景圖片背景顏色

14 標頭 <hn> 我是標頭 </hn> N=1,2,3,4,5,6 數字越小, 等級越大 <h1> 我是大標題 </h1> <h2> 我是次要標題 </h2>

15 區塊 <div>.. 可以視為是一個容器 </div> 屬性 : id 單一的名稱 ( 不能有同樣 id 的元素 ) class 共用的群組 ( 可以有相同 class 的標籤 ) width 寬度 height 高度在 CSS 的應用上非常氾濫

16 段落 <p> </p> 屬性 : align 水平對齊 :left center right

17 樣式強調 : <strong> 粗體 : <b> 斜體 :<i> 加大字級 :<big> 縮小字級 :<small> 插入 ( 底線 ):<ins> 刪除 ( 劃掉 ):<del> 斷行 :<br /> 水平線 :<hr />

18 圖片 <img /> 屬性 : 包含之前提過的 width height src 來源, 注意相對路徑 alt 替代文字顯示 title 圖片的說明文字 border 框線大小 (= N,N=1,2,3 ) <img src= haha.png alt= 哈哈 title= 這就是哈哈 />

19 超鏈結 <a>.. 作用的文字或圖片等 </a> 屬性 : href title target 連結的網址連結的說明作用的目標

20 無序清單 (unordered list) <ul> <li> 項目一 </li> <li> 項目二 </li> </ul> <li> 項目文字 </li>

21 有序清單 (ordered list) <ol> <li> 項目一 </li> <li> 項目二 </li> </ol> 屬性 : start type A a I 1 起始數字編號樣式大寫字母小寫字母大寫羅馬數字阿拉伯數字

22 巢狀清單兩種清單可以層疊混用 <ol> <li> 項目一 </li> <li> 項目二 </li> <ul> <li> 項目一 </li> <li> 項目二 </li> </ul> </ol>

23 表格 <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table>

24 表格屬性 width height colspan 寬度高度合併欄 rowspan 合併列 align valign 水平對齊垂直對齊 (top middle bottom)

25 很簡單, 對吧? 用標籤描述性質由上而下的排列純粹內容取向, 無關排版定位等等, 那視覺上的排版呈現呢?

26 CSS 來啦! Cascading Style Sheets 有人翻譯為串接樣式表, 特性是各性質所定義的樣式會有繼承關係在網頁的排版美化和風格建立上起了很大的作用

27 使用 CSS 的好處將樣式與 HTML 分離, 使得 HTML 的標籤更為簡潔, 不需要設一大堆的屬性值可以讓我們更精確地操控網頁中各項元素的視覺呈現只要改動 CSS 檔案, 便可以使得整個網頁的風格完全改觀

28 CSS 是在唬弄些什麼? 選擇器 (Selector) 通常為網頁檔中的元素 (element), 如 <body>,<p>,<strong> 等標籤, 多個選擇器可以半形逗號 (,) 隔開屬性 (property) 控制選擇器的樣式值 (value) 指屬性接受的設定值, 可由各種關鍵字 (keyword) 組成, 多個關鍵字時大都以空格隔開

29 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} 前面是選擇器, 定義樣式作用的元素大括號裡面則是樣式的各項屬性, 分號隔開各項屬性, 冒號後設定值

30 文件內定義 <head> <style type="text/css"> H3, H5{color : # ; font-family : verdana,sans-serif} </style> </head> 在 <head> 標籤裡面定義這個頁面所使用的樣式表

31 直接定義標籤的樣式使用 style 屬性 <div style= text-align:center;float:left >. </div> 當需要快速固定一個標籤的外觀時, 十分好用, 不過會造成 HTML 標籤雜亂, 寫在同一網頁中更有更動不易的缺點

32 連結樣式表 <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> 將樣式表另存成一個 *.css 檔案後連結進來

33 匯入樣式表 <head>. <style url("style.css"); </style>. </head> 特色是可在 CSS 檔案中再匯入另一份 CSS 檔案

34 選擇器的使用 #blah{ } 作用在 <div id= blah > 的區塊元素上.blah{ } 作用在 <div class= blah > 的區塊元素上 td.blah{...} 作用在 <td class= blah > 的表格元素上 table.blah td{..} 作用在每個 <table class= blah > 裡面的 <td>

35 容器的概念與模型 margin: 外邊界距 padding: 內邊框距 Content 的內容才是 width 和 height 的作用對象

36 文字樣式 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; 字間距離

37 文字對齊 text-align: left 靠左 right 靠右 center 置中 vertical-align: top 靠頂 middle 置中 bottom 靠底水平對齊垂直對齊

38 背景樣式 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 軸重複排列

39 連結樣式 a a:link a:visited a:active a:hover 所有超連結超連結文字格式瀏覽過的連結文字格式按下連結的格式滑鼠移至連結廣泛被使用在按鈕的製作上

40 框線樣式 bordertop : 上框線 bottom : 下框線 left : 左框線 right : 右框線 border-top : 1px solid #6699cc; 其它框線樣式 solid 實線框 dotted 虛線框 double 雙線框 groove 立體內凸框 ridge 立體浮凸框 inset 凹框 outset 凸框

41 邊界邊框 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; 依序為上右下左繞一圈

42 物件定位 position: static absolute relative 預設無定位以網頁左上角為起始點以物件左上角為起始點搭配 top 和 left 屬性使用 div#blah {position:absolute;top:100px;left:100px} 叫 blah 的這個區塊會出現在離上面 100px, 距左邊界 100px 的地方

43 相對位置 float: clear: none left right none left right both 預設無漂移向容器的左邊靠向容器的右邊靠預設無排除元素左靠排除右邊元素右靠排除左邊元素的兩邊都不能有

44 奇技淫巧大觀園! 非常有名的 css Zen Garden: CSS 設計之美 CSS 選單按鈕變換替身娃娃雜七雜八 blahblah 族繁不及備載

45 Acid2 測試其實不過就是個笑臉但讓很多人笑不出來其實各家瀏覽器對 CSS 的支援.. 還不是很完整 Orz 參考閱讀 :

46 寫網頁給誰看? 這是個要先想清楚的問題考慮 : 1. 需求 2. 功能 3. 視覺傳達別忘了是要寫給人看的 ~

47 網頁呈現的親和力放棄開新頁面這種寫法吧! 圖片的替代說明字體大小的考量選單的擺放整體的易讀性

48 他們用什麼來看我的網頁? 廢話, 除了瀏覽器還能有什麼? 可是瀏覽器也有很多種啊 ~ 在什麼機器上的瀏覽器? 電腦手機遊樂器? 什麼樣的瀏覽器程式? 顯示的效果如何?

49 瀏覽器大戰 Internet Explorer 8 - 因為很多人沒看到那個大大的 e 就不會上網 XD Mozilla Firefox - 輕巧自訂性最高 Opera - 速度最快的瀏覽器之王 - 目前 Windows 平台上最符合標準 Wii 上也有喔!

50 更進一步的網頁花樣更方便地更新網頁內容 PHP & MySQL 會動會跟人互動 JavaScript Shockwave Flash

51 總結 CSS 就像是魔法一樣規則很少, 技巧很多, 但很難實現網頁設計要考慮的東西很多謝謝大家! 希望各位都能多少得到一些心得 ~

52 學習參考好孩子的網頁設計 XHTML (Firefox) OECSpace (CSS 教學 ) 網頁之翼 ( 各大網誌樣式表 )

53 延伸閱讀 HTML CSS XHTML

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05