PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

浈陌苏
6 years ago
Views:

1 1. 網頁入門

2 全球資訊網 (World Wide Web) 全球資訊網是由眾多的 WWWServer 相連而成 WWW Server WWW Server WWW Server WebDesign 網頁入門 2

3 網站 (Website) 存放網頁文件與資料的電腦主機, 或稱網頁伺服器 (Web Server) 網頁客戶端 (Client) HTTP 協定伺服器端 (Server) WebDesign 網頁入門 3

4 網頁 HTML 文件瀏覽器 WebDesign 網頁入門 4

5 網頁的類型網頁靜態網頁 ( 純 HTML) 動態網頁客戶端處理 HTML + (JavaScript VBScript) 伺服器端處理 HTML + (ASP PHP JSP) WebDesign 網頁入門 5

6 伺服器端處理動態網頁運作原理 WebDesign 網頁入門 6

7 網址的組成網址 (Universal Resource Locator, 簡稱 URL) 存取方式 :// 完整主機網域名稱 / 目錄路徑 / 網頁文件檔名存取方式 : 指 URL 存取資料的方式或通訊協定協地名稱功能範例 http WWW 的存取 https 電腦與伺服器間的資料加密傳遞 ftp 連接到 ftp 伺服器進行檔案傳輸 ftp://home.cyut.edu.tw telnet 連接遠端主機進行遠端登入 telnet://bbs.ntu.edu.tw Gopher 存取 gopher 伺服器的資料 gopher://gopher.ntu.edu.tw mailto 發送 mailto://yllo@cyut.edu.tw WebDesign 網頁入門 7

8 例如資訊學院選課手冊的 URL: 主機名稱機構名稱機構型態機構型態.com.gov.org.edu.net.idv 公司行號政府機構代表機構民間組織單位教育機構 ISP 服務商個人文件檔名目錄路徑國碼 WebDesign 網頁入門 8

9 國碼.tw.cn.hk.jp.kr.us ( 可不寫 ).eu.uk.de.fr 國別台灣中國香港日本韓國美國歐洲英國德國法國 WebDesign 網頁入門 9

10 規劃網站架構與內容樹狀結構概念 : 從首頁開始, 往下一層一層畫出樹狀圖 WebDesign 網頁入門 10

11 規劃網站參考方向網站主要的內容 : 設定主題與內容設定瀏覽的對象 : 設定主要瀏覽網站的對象網頁包含的元素 : 豐富多元, 可包括文字圖片聲音多媒體超連結 WebDesign 網頁入門 11

12 文字蒐集相關資料素材蒐集方式檔案格式網頁上將用到的文字可經由網路書籍或雜誌來蒐集, 建議您不妨先將文字輸入成文字檔, 製作網頁時只要複製到網頁上就可以了 txt doc 圖片可以自己繪圖拍照攝影掃描或從網路上蒐集等方式將圖片儲存成圖檔 jpg gif png 多媒體超連結影片音樂或動畫, 可透過錄音設備數位攝影機網路多媒體工具等方式蒐集錄音設備數位攝影機網路多媒體工具從網路蒐集相關的網站, 再利用超連結來連結到該網站 mid wav mov rm swf WebDesign 網頁入門 12

13 網頁製作相關軟體類別製作網頁軟體文字編輯工具軟體名稱 FrontPage DreamWeaver 記事本 EditPlus CoffeeCup HTML Editor BlueGriffon 繪圖及影像處理軟體 PhotoImpact Photoshop GIF Animator 影音多媒體工具 Sound Forge Flash VideoStudio WebDesign 網頁入門 13

14 網頁常見的圖片格式圖檔格式特性適用時機 GIF JPEG PNG 非失真壓縮格式最多 256 色支援透明圖交錯圖可製作動畫全彩失真的壓縮格式圖檔小不支援透明背景的功能支援 RGB 全彩, 索引色, 灰階與黑白模式支援交錯圖與透明圖圖檔體積大有些瀏覽器與繪圖軟體不支援標題文字符號動態圖形按鈕等色彩要求不高的小圖形需要透明背景的圖片動畫圖圖檔小圖檔小色彩較為豐富的圖片相片適用時機與上述兩種圖檔格式大致相同, 但不能製作動畫圖檔較大 WebDesign 網頁入門 14

15 網頁檔案命名規則檔名可以使用 a ~ z A ~ Z 0~9 減號 - 及底線 _ 等字元禁止使用特殊字元或其他符號, 例如 :@ # $ % & * 檔名間不能有空白首頁檔名是網頁伺服器預設好的, 所以首頁檔名必須依照網頁伺服器定義來命名, 通常是 index.htm index.html 或 default.htm 大部分的網頁伺服器大小寫都會視為不同, 最好習慣統一使用小寫英文, 尤其是關鍵的網頁檔案, 例如 index.htm, 應該一律使用小寫 WebDesign 網頁入門 15

16 網頁寬度固定式網頁 : 優點是網頁排版可以固定位置, 文字與圖形不會隨著螢幕解析度而產生位移缺點是超出螢幕水平寬度的部份會被截斷, 必須拖曳水平捲軸才能瀏覽完整網頁相對式網頁網頁寬度以百分比大小來做設定優點是網頁內容的寬度會隨著螢幕寬度而調整缺點是文字與圖形可能會隨著螢幕解析度調整而產生位移 WebDesign 網頁入門 16

17 2. HTML5 入門

18 HTML5 HTML 是 HyperText Markup Language( 超文件標記語言 ) 的縮寫 HTML5 與 HTML4 的差異語法簡化統一網頁內嵌影音的語法新增 <header> <footer> <section> <article> 等語意標記 HTML5 廢除一些舊有標記全新的表單設計利用 <canvas> 標籤繪出圖形提供 API 開發網頁應用程式 WebDesign HTML5 入門 2

19 HTML5 廢除的標記 * 盡量避免使用標記描述替代標記 <applet> 內嵌 Java Applet 改用 <embed> 或 <object> 標記 <acronym> 縮寫字詞, 例如 : 改用 <abbr> 標記 WWW=World Wide Web <dir> 符號清單改用 <ul> 標記 <frame> <frameset> <noframes> 頁框設定頁框宣告瀏覽器不支援框架時顯示改用 CSS 搭配 <iframe> 標記 WebDesign HTML5 入門 3

20 HTML5 廢除的標記標記描述替代標記 <basefont> 指定基本字體 <big> 放大字體 <center> 置中 <font> 文字格式設定 <marquee> 跑馬燈文字 <s> 刪除線改用 CSS <strike> 刪除線 <spacer> 插入空白 <tt> 等寬字體顯示 <u> 加底線 <bgsound> 插入背景音樂改用 <audio> 標記 WebDesign HTML5 入門 4

21 建立 HTML 文件 HTML 是標準的文件格式, 任何一種純文字編輯軟體都可以編輯 HTML 文件, 如 : 記事本範例 :index.txt ; index.htm HTML 文件裡的標記是不分大小寫, 都有同樣效果不過有些程式語言有大小寫的區別, 為了養成良好習慣, 建議盡量採用小寫為宜 WebDesign HTML5 入門 5

22 HTML 的標記型態 <!doctype html> 宣告讓瀏覽器進入標準模式, 也可以說是完整支援 CSS/HTML 的模式圍堵標記 (Container Tags): 必須有起始標記 (start tag) 與終止標記 (end tag) < 起始標記 > </ 終止標記 > <title>... 網頁標題 </title> 單一標記 (Single Tag) <hr> <img> 加入分隔線插入圖片 WebDesign HTML5 入門 6

23 HTML 的組成 <!DOCTYPE html> <html> <head> <title> 這裡是網頁標題 </title> </head> <body> 這裡是網頁的內容 </body> </html> 宣告使用標準網頁開始網頁標頭 (head) 網頁身體 (body) 網頁結束 WebDesign HTML5 入門 7

24 標記屬性的運用標記可以加上屬性 (Attributes), 來改變其在網頁呈現的方式如果超過一個以上的屬性, 則以空白隔開不同的屬性例如 : <html lang="zh-tw"> <! 指繁體中文 > <meta charset="big5" name="keywords"> <! meta 標記是用來描述網頁, 有利於搜尋與分類 > <! big5 是指用 big5 繁體中文編碼 > utf-8 為國際碼, 支援多國語言, 但網頁要儲存實時, 以記事本為例, 編碼必須選擇 UTF-8 儲存 GB2312 為簡體中文 WebDesign HTML5 入門 8

25 語系設定 zh-cn zh-tw Zh-HK en-gb en-us en-ca en-in fr de ja 中國簡體中文台灣繁體中文香港繁體中文大不列顛英國英語美國英語加拿大英語印度英語法語德與日語 WebDesign HTML5 入門 9

26 HTML5 結構與呈現網頁結構 (structure) 網頁開發人員負責, 專注於網頁結構與內容, 可以用 HTML5 語法建構網頁網頁呈現 (presentation) 網頁設計師負責, 可以用 CSS 語法將網頁美化, 增加可讀性動態網頁 (dynamic) 與互動網頁 (active) 程式設計師負責, 用以 JavaScript 讓 HTML 增加動態網頁與互動效果 WebDesign HTML5 入門 10

27 常見的語意標記標籤 <header> <nav> <aside> <article> <section> <footer> 說明顯示網站名稱主題或主要資訊網站的連結選單使用於側邊欄用於定義主內容用於章節或段落位於頁尾, 用來版權宣告著作等資訊 WebDesign HTML5 入門 11

28 結構化的語意標記 <section> <header> <nav> <article> <aside> <footer> WebDesign HTML5 入門 12

29 範例背包客旅行札記.htm 背包客旅行札記 -CSS 版.htm WebDesign HTML5 入門 13

30 建立首頁程序說明個人首頁網址預設於 public_html 子目錄下建立步驟 : 開起 Windows 的檔案總管, 輸入 ftp 網址 : ftp://home.cyut.edu.tw 以之帳號密碼登入建立一 "public_html" 子目錄將首頁檔 index.htm, 以及其他網頁檔案複製貼於 public_html 目錄下個人網頁網址我的 : 你的 : WebDesign 14

31 3. 文字變化與排版技巧

32 段落效果使用排版標記設定段落樣式的標記 <p>.</p> 段落的開始與結束 <br> 或 <br/> 換行 HTML5 不僅符合 HTML 標準, 也遵循 XHTML(Extensible Hypertext Markup Language, 可擴展超文件標記語言 ) 標準在 XHTML 語法規定, 不成對的單一標記, 必須在標記加上 / 符號, 例如 :<br /> <img /> HTML5 規範也建議使用這樣的標記方式範例 :ch03_01.htm, ch03_01_1.htm WebDesign 文字變化與排版技巧 2

33 設定對齊與縮排的標記 <pre> </pre> 標記之間的文字會按照原始碼的排列方式來顯示範例 : ch03_02.htm <blockquote> </ blockquote > 是用來表示引用文字, 會將標記內的文字換行並縮排範例 : ch03_03.htm WebDesign 文字變化與排版技巧 3

34 加入分隔線 <hr> 或 <hr /> 標記的作用是加入分隔線範例 : ch03_04.htm 設定段落標題 <h1~6> </h1~6> 設定段落標題的大小級數,<h1> 最大,<h6> 最小所標記的文字會獨佔一行範例 :ch03_05.htm WebDesign 文字變化與排版技巧 4

35 文字效果使用文字標記設定字型樣式的標記 <font>..</font> <u> </u> 將廢止 <b> </b> 粗體字 HTML5 建議用 <strong> </strong> 取代 <i> </i> 斜體字範例 :ch03_06.htm ch03_06_2.htm 設定上標下標 <sup> </sup> 上標 <sub> </sub> 下標範例 :ch03_06_1.htm WebDesign 文字變化與排版技巧 5

36 項目符號與編號使用清單標記符號清單 <ul> <li>...</li> </ul> 範例 : ch03_07.htm WebDesign 文字變化與排版技巧 6

37 編號清單 <ol type="i" start="4"> <li>...</li>... </ol> 屬性設定值說明 type 設定值有五種, 請參考下表設定數目樣式, 預設值 : type="1" start 等整數值設定編號起始值, 預設值 :start=1 reversed reversed 反向排序, 數字改為由大到小 (IE9 不支援 ) WebDesign 文字變化與排版技巧 7

38 type 設定值項目編號樣式說明 1 1, 2, 3,... 阿拉伯數字 A A, B, C,... 大寫英文字母 a a, b, c,... 小寫英文字母 I I, II, III,... 大寫羅馬數字 i i, ii, iii,... 小寫羅馬數字範例 : ch03_08.htm WebDesign 文字變化與排版技巧 8

39 定義清單 <dl> <dt>.. <dd>.. </dl> 定義開始定義主題定義內容範例 : ch03_09.htm ch03_09_1.htm WebDesign 文字變化與排版技巧 9

40 註解與特殊符號加入註解  文字不會出現在網頁上範例 :ch03_10.htm 使用特殊符號使特殊符號出現於網頁範例 :ch03_11.htm 不管編輯時留多少空格, 網頁只會呈現一個如果要多個空格, 則用特殊符號 HTML 表示法 < < > > " " & & 半形空白 WebDesign 文字變化與排版技巧 10

41 中繼標記 <meta> <meta> 標記必須置放於 <head> 與 </head> 之間, 其功能大多與瀏覽器設定相關, 不會直接顯示於網頁上 meta 功能包括設定網頁編碼重新整理網頁自動轉頁等等 meta 標記語法分兩大類 <meta http-equiv="http 表頭資訊 " content=" 資訊內容 "> 用於定義 http 表頭資訊, 如 : 網頁編碼方式自動轉頁等 <meta name=" 網頁資訊 " content=" 資訊內容 "> 描述網頁的資訊, 如 : 關鍵字作者等 WebDesign 文字變化與排版技巧 11

42 meta 標記的 http-equiv 屬性 http-equiv 屬性是用來定義 HTML 文件 HTTP 表頭, 常用屬性有 : content-type: 網頁文件的格式 <meta http-equiv="content-type" content="text/html; charset=big5"> Content 屬性裡設定網頁文件的格式內容, 每一項以分號 ; 分開 text/html 表示以 text 或 html 標準來編譯網頁 charset 是指定網頁的編碼字集 (character set),big5 表示使用繁體中文範例 : 指定編碼為繁體中文 (big5) 之 ch03_01_1.htm 指定簡體中文 (gb2312) 編碼之 ch03_01_2.htm ch03_01_3.htm WebDesign 文字變化與排版技巧 12

43 refresh: 重新整理網頁 <meta http-equiv="refresh" content="10; url= 新網址 "> content 裡的 10, 表示預設 10 秒後重新整理網頁 content 裡的 url, 表示重新整理網頁時, 轉址到 url 指定的網頁 content 裡若無 url, 則原網頁重新整理範例 : ch03_12.htm expires: 設定網頁到期時間瀏覽器通常會從暫存區讀取看過的網頁, 當超過到期時間時, 就會從伺服器重新讀取如設為過去的時間, 每次都會從伺服下載網頁 <meta http-equiv="expires" content="sun, 14 Mar :20:00 GMT"> Content 值必須用 GMT(Greenwich Mean Time 格林威治標準時間 ) WebDesign 文字變化與排版技巧 13

44 pragma: 設定快取 (cache) 的模式 <meta http-equiv="pragma" content="no-cache"> no-cashe 表示禁止瀏覽器從暫存區讀取網頁, 使用者也將無法離線瀏覽 set-cookie: 設定 cookie 到期的時間, 到期 cookie 會被刪除 <meta http-equiv="set-cookie" content="sun, 14 Mar :20:00 GMT"> windows-target: 限制網頁顯示的目標視窗 <meta http-equiv="windows-target" content="_top"> "_top" 是強制將網頁顯示於最上層, 可以防止他人在框架裡顯示您的網頁 WebDesign 文字變化與排版技巧 14

45 meta 標記的 name 屬性 meta 標記的 name 屬性是用來宣告網頁的相關資訊, 常用的屬性種類有 : keywords: 設定網頁的關鍵字搜尋引擎可以根據所設定關鍵字, 更容易搜尋到相關網頁 <meta name="keywords" content="animal, dog, 動物, 狗 "> 關鍵字可輸入中英文, 以逗號 (,) 分隔 description: 用來說明網頁主要內容應簡潔明瞭, 建議不要超過 100 個字 <meta name="description" content=" 網頁簡要說明 "> WebDesign 文字變化與排版技巧 15

46 author: 用來說明網頁的作者 <meta name="author" content=" 羅有隆 "> creation-date: 用來標註網頁的製作時間 <meta name="creation-date" content="sun, 14 Mar :20:00 GMT"> WebDesign 文字變化與排版技巧 16

47 div 標記 <div> </div> 屬於獨立區塊標記 (block-level), 類似群組功能, 標記後會自動換行區塊裡的所有元件, 都會被視為單一物件通常用來做對齊的功能 <div align="center" style="font-size: 13pt; "> <div> 的屬性 : align: 用來設定 <div> </div> 標記裡的元件對齊方式設定值有 center left right, 為置中左右對齊 style: 屬 CSS 語法, 用來設定元件的樣式範例 : ch03_13.htm WebDesign 文字變化與排版技巧 17

48 span 標記 <span> </span> 標記與 div 有點類似, 但 <span> 屬行內標記 (inline-level), 可與其他元件顯示於同一行 <span style="font-size: 13pt; "> 範例 : ch03_14.htm WebDesign 文字變化與排版技巧 18

49 4. 多媒體素材的運用

50 網頁圖片使用太多或太大的圖片會使網頁顯示的速度變慢建議的圖片格式 :JPEG 或 GIF 靜態圖片用 JPEG, 動態圖片用 GIF 建議的圖片解析度 :72dpi 建議的圖片大小 : 不超過 30KB WebDesign 多媒體素材的運用 2

51 圖片的使用 <img> 嵌入圖片 <img src="images/photo.jpg" alt=" 這是圖片 " /> <img> 標記的屬性 : 屬性設定值說明 src 圖片位置指定圖片的路徑及檔名 title 說明文字滑鼠移到圖片時顯示的文字 alt 說明文字 * 圖片無法顯示時的替代文字 height 圖片高度以像素 (pixels) 為單位 width 圖片寬度以像素 (pixels) 為單位範例 :ch04_01.htm, ch04_01_1.htm ( 找不到圖的狀況 ) WebDesign 多媒體素材的運用 3

路徑表示法絕對路徑 (Absolute Path) 指定 URL 表示 <img src="http://

52 路徑表示法絕對路徑 (Absolute Path) 指定 URL 表示 <img src=" 網址 / 圖檔.jpg" /> 相對路徑 (Relative Path) WebDesign 多媒體素材的運用 4

53 網頁與檔案位於同一個資料夾假設網頁位於 travel 資料夾, 想要加入 a.jpg <img src="a.jpg" /> 圖檔位於上層資料夾假設網頁位於 animal 資料夾, 想要加入 b.gif <img src="../b.gif" />* 上上層 <img src="../../travel/a.jpg" /> 圖檔位於下層資料夾假設網頁位於 flower 資料夾, 想要加入 c.jpg <img src="animal/c.jpg" /> WebDesign 多媒體素材的運用 5

54 加入影音特效 <audio> </audio> 標記, 網頁中加入音樂 < audio src="music.mp3" type="audio/mpeg" controls> </ audio> <audio> 可設定屬性 : src="music.mp3" 設定音樂檔名與路徑支援 mp3 wav ogg (vorbis 編碼 ) wav 檔案太大, 不建議使用 autoplay 自動播放 controls 顯示播放面板 loop 表示循環播放 width / height 播放面板的寬 / 高, 單位 pixels type="audio/mepg" 指定播放類型 WebDesign 多媒體素材的運用 6

55 preload 是否預先載入, 減少等待時間屬性有 : auto : 網頁開啟時即載入 metadata: 只載入 meta 資訊 none: 網頁開啟時不載入當設有 autoplay 時,preload 會被忽略如果要讓大部份瀏覽器都能支援, 最好能準備 mp3 ogg 兩種格式 <audio controls autoplay> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> 您的瀏覽器不支援此音樂播放模式! </audio> 範例 : ch04_02.htm ch04_02_1.htm ( 自動播放 ) ch04_02_2.htm ( 無播放面板 ) WebDesign 多媒體素材的運用 7

56 <video> </video> 標記, 加入影音檔支援 mp4 ogg(theora 編碼 ) WebM(VP8 編碼 ) <video src="multimedia/butterfly.mp4" controls="controls"> </video> 如果要讓大部份瀏覽器都能支援, 最好能準備 mp4+ogg 或 mp4+webm 兩種格式與 <audio> 一樣, 標記內的文字, 只有在瀏覽器都不支援影片播放模式時才會顯示範例 : ch04_03.htm WebDesign 多媒體素材的運用 8

57 <embed> 標記, 可加入 Flash 動畫可播放的格式為 swf 檔 <embed src= "xxx.swf" width="100" height="100" > 範例 : ch04_03_1.htm <iframe> </iframe> 標記, 可嵌入 YouTube 影片 iframe 屬於框架語法, 能將要連結的網頁與元件內嵌在目前網頁中 <iframe name= "f1" src= "new_page.htm" width="300" height="400" > </iframe> 範例 :ch04_04.htm ch04_04_1.htm ch04_04_2.htm( 自動播放 ) WebDesign 多媒體素材的運用 9

58 嵌入 Youtube 影片 1. 使用電腦, 前往您要嵌入的 YouTube 影片觀賞頁面 2. 按一下影片下方的 [ 分享 ] 3. 按一下 [ 嵌入 ] 4. 複製方塊中的 HTML 程式碼 5. 把程式碼貼到您網誌或網站的 HTML 中 WebDesign 多媒體素材的運用 10

59 5. 表格與表單

60 製作基本表格表格的基本架構列 (row) 欄 (column) 儲存格 (cell) 表格 (table) <table border= "1" > </table>, 設定表格 border 為設定框線與粗細 <tr> </tr>, 設定列, 置於 <table> 標記裡面 <td> </td>, 設定欄, 置於 <tr> 標記裡面 <td nowrap> </td>, 預設文字太長時會自動換行, 但 nopwrap 可強制不換行範例 : ch05_01.htm ch05_01_1.htm WebDesign 表格與表單 2

61 設定表格標題 <caption> 表格標題 </caption> <th> 欄的標題 </th> 會以粗體呈現範例 : ch05_02.htm ch05_02_0.htm ( 設表格寬與高 ) WebDesign 表格與表單 3

62 表格的編輯技巧合併儲存格 <td colspan="2" > 合併左右欄 </td> <td rowspan="3" > 合併上下列 </td> 範例 : ch05_02_1.htm ch05_02_2.htm WebDesign 表格與表單 4

63 利用表格組合圖片範例 : ch05_03_1.htm ch05_03.htm( 以 CSS 處理無縫隙 ) WebDesign 表格與表單 5

64 表單表單 (Forms) 能做什麼網頁搜尋 : 輸入文字做為搜尋用各式申請表單 : 可讓使用者填寫資料送到伺服器端做處理線上投票 : 製作投票介面, 進行投票活動線上購物 : 選擇商品與輸入數量 WebDesign 表格與表單 6

65 建立表單 <form>...</form> 標記 <form method="post" action="abc.asp"> method: 設定傳送資料的方式設定值有 : get: 預設值資料直接加在 URL 之後傳送, 安全性較差, 且限制不超過 255 個字元 post: 將資料封裝後再傳送, 不限制字串長度, 安全性較高適合需要保密資料, 如 : 帳號密碼身份證號. action: 指定表單處理程式的 URL, 若沒指定, 則表單不會被處理也可以指定發送 mail, 用 action="mailto:abc@mail.cyut.edu.tw?subject=xxxx" WebDesign 表格與表單 7

66 enctype: 表單傳送的編碼方式, 只有 method="post" 才有效有三種模式 : enctype="application/x-www-form-urlencoded": 為預設值, 一般的使用方式 enctype="multipart/form-data": 用於上傳檔案時 enctype="text/plain": 表單內容要傳送到電子信箱時用, 否則會呈現亂碼 target: 指定提交到那個視窗, 屬性值有五種 : _blank: 開新視窗 _self: 目前的視窗 _parent: 上一層 ( 父 ) 視窗 _top: 最上層視窗頁框名稱 : 直接指定視窗或頁框 WebDesign 表格與表單 8

67 autocomplete: 用來設定 input 元件是否使用自動完成, 值有 on( 使用 ) 與 off( 不使用 ) 兩種例如 : 不希望瀏覽器記錄下所輸入的帳號密碼, 有 2 種寫法 <form> <input type="password" name="password" autocomplete="off"> </form> 或 <form autocomplete="off"> <input type="password" name="password"> </form> novalidate: 設定送出表單時是否要驗證若不需要驗證, 則 novalidate="novalidate" 例如不要驗證送出時有沒有輸入或錯誤 WebDesign 表格與表單 9

68 輸入元件 : 一般網頁常用的文字元件有文字方塊 (text) 文字區域欄位 (textarea) 密碼欄位 (password) 三種 HTML5 新增的輸入元件有 date number color range 等, 則必須 JavaScript 才能發揮功能文字方塊 (text) <input type="text" name="username" value="guest" size="10" maxlength="10" /> type="text": 輸入方式為 text name="username" : 文字方塊的名稱, 大小寫有別 value="guest": 文字方塊裡的預設值為 guest size="10": 文字方塊長度, 若不寫, 預設為 20 maxlength="10": 限制文字方塊輸入字數 autofocus: 網頁載入後, 自動將游標移到文字欄內 WebDesign 表格與表單 10

69 文字區域欄位 (textarea) <textarea name= "memo" cols= "20" rows="2" wrap="virtual" ></textarea> name= "memo" : 文字區域欄位的名字, 大小寫有別 cols= "20" : 文字區域寬度 rows= "2" : 文字區域的列數 wrap= "off" 時, 輸入文字超過長度會出現水平捲軸 wrap="virtual" 或 "hard" 時, 輸入文字超過長度會自動換行 ; 送出之資料, 只有在按 Enter 鍵處換行 wrap="physical" 或 "soft" 時, 輸入文字超過長度會自動換行 ; 會依照螢幕所見到的樣式, 送出資料 WebDesign 表格與表單 11

70 密碼欄位 (password): 輸入資料時, 會以 * 或來取代 <input type="password" name="t1" size="20" /> 範例 : ch05_04.htm(post) ch05_04_0.htm(get) submit 為按鈕元件, 稍後介紹阻止輸入 (readonly): 在 <input> 或 <textarea> 裡加入 readonly 屬性, 可以阻止使用者輸入, 只能接受預設值例如: 訪客帳號 (guest) 商品價格 <input type="text" name="username" value="guest" readonly /> 日期欄位 (date): 會跳出日期選單供使用者選擇 <input type="date" name="selectdate" /> WebDesign 表格與表單 12

71 數字欄位 (number): 提供數字讓使用者選擇 <input type="number" name="setnumber" values="5" min="3" max="20" /> value="5": 為預設值 min="3" max="20": 為限制最小值與最大值色彩欄位 (color): 會產生顏色表單, 讓使用者選擇 <input type="color" name="selectcolor" value="#ff00ff" /> 範圍欄位 (range): 顯示水平捲軸供使用者選取 <input type="range" name="selectrange" value="5" min="3" max="20" /> WebDesign 表格與表單 13

72 搜尋欄位 (search): 外觀與 text 同, 但多了一個符號, 可以清除搜尋欄裡的文字 <input type="search" name="searchword" /> 範例 :ch05_04_1.htm WebDesign 表格與表單 14

73 清單元件 select 元件是由 <select></select> 與 <option> 標記組成範例 :ch05_04_2.htm size="1" : 只列出一列 multiple: 選取時按 Ctrl 或 Shift, 可以複選 datalist 元件 : 是由 <datalist></datalist> 與 <option> 組成, 主要是讓使用者只要輸入第一個字元, 就可以從清單中找出符合的字詞範例 :ch05_04_3.htm id="browsers" :datalist 必須先指定 id 屬性的名稱, 如此,input 元件的 list 屬性與 id 相同, 即可以取得 datalist 的清單資料 WebDesign 表格與表單 15

74 核取元件單選核取圓鈕 (radio) <input type="radio" name="gender" value=" 女 " checked /> checked: 預設選取的項目範例 :ch05_05.htm 複選核取方塊 (checkbox): 可以多重選擇 <input type="checkbox" name="interest" value=" 看電影 " checked /> 範例 :ch05_06.htm WebDesign 表格與表單 16

75 按鈕元件 submit 按鈕 : 送出 <input type="submit" name="s1" value=" 送出 " > value=" 送出 " : 顯示於按紐上的文字 reset 按鈕 : 重設 <input type="reset" name="r1" value=" 重設 " /> button 按鈕 : 一般的按鈕, 通常搭配 Script 語法來設定其功能 <input type="button" name="back" value=" 回上頁 " /> 範例 :ch05_07.htm WebDesign 表格與表單 17

76 表單分組 <fieldset> </fieldset> 標記 : 當表單內容太長太多時, 可以將問題分類, 讓使用者輸入資料時不會眼花撩亂標記內以 <legend></legend> 設定分組標題 <fieldset> <legend> 分組標題 </legend> 分組內容 </fieldset> 實作範例 :ch05_08.htm WebDesign 表格與表單 18

77 6. 建立超連結

78 超連結 (Hyperlink) 超連結是指在 HTML 文件上的圖片或文字加上連結標記, 當使用者點取該圖片或文字時, 會被導引到另一個位置, 可能是網頁圖片檔案 E- mail 信箱通常游標移動到有超連結的位置時, 會變成小手的形狀製作網頁前, 應該先規劃出網站的最佳瀏覽路徑, 然後在網頁適當位置加入超連結大型網站通常會提供網站地圖或網站導覽, 讓使用者對網站一目了然範例 : WebDesign 建立超連結 2

79 加入超連結超連結的用法 <a href=" "> </a> 為超連結標 <a href="index.htm" target="_top"> href="index.hm": 設定該連結所要連到的網址或檔案與路徑 target="_top":target 屬性是設定連結網頁的開啟方式 _top: 開啟在瀏覽器視窗, 如果網頁有框架的話, 所有框架會被移除 _blank: 在新的視窗中開啟 _parent: 開啟在目前的視窗中, 如果在框架式網頁中, 則會在上一層頁框開啟目標網頁 _self: 開啟在目前執行的視窗中這是預設值視窗名稱 : 開啟在有指定名稱的視窗或框架中 WebDesign 建立超連結 3

80 以文字產生連結 <a href= "index.htm" > 回首頁 </a> 以圖片產生連結 <a href= "index.htm" ><img src= "images/home.jpg" border= "0" /></a> 範例 :ch06_01_1.htm 站外網頁連結 <a href= " 網址 " > </a> <a href= 朝陽科技大學 </a> 範例 : ch06_01.htm WebDesign 建立超連結 4

81 站內網頁連結 <a href= " 連結目標相對路徑 " > </a> 範例 : ch06_02.htm 連結到信箱使用 "mailto: 帳號 " <a href= "mailto:yllo@cyut.edu.tw" > 寫信給導ㄟ </a> 收件者不只一人, 以分號 (;) 分開 <a href= "mailto:yllo@cyut.edu.tw;im@cyut.edu.tw" > 寫信給兩人 </a> WebDesign 建立超連結 5

82 預設主旨 <a href= 我的建議 " > 預設主旨 </a> 郵件副本 <a href= > 郵件副本 </a> 密件副本 <a href= > 密件副本 </a> WebDesign 建立超連結 6

83 預設郵件開頭文字 <a href= here." > 預設郵件開頭文字 </a> 範例 : ch06_02_1.htm 連結至檔案 <a href= "abc.pdf" > 下載 </a> <a href= " > 下載 </a> WebDesign 建立超連結 7

84 7. 認識 CSS 樣式表

85 何謂 CSS 樣式表 CSS (Cascading Style Sheet, 串接樣式表 ), 主要是用來彌補 HTML 在樣式排版功能上的不足 CSS 可以豐富網站的視覺效果, 又有網頁美容師之稱 CSS3 為各瀏覽器所支援,CSS4 草案雖已公佈, 但尚未被瀏覽器支援 W3C(World Wide Web Consortium, 全球資訊網組織 ) 提供 CSS 語法檢測網頁, 只要通過 W3C 標準檢測, 就可相容於大部份的瀏覽器檢測網址 WebDesign 認識 CSS 樣式表 2

86 CSS 的優勢語法簡單撰寫容易增加網頁設計彈性, 讓網頁更容易維護加快網頁載入的速度統一網站風格 WebDesign 認識 CSS 樣式表 3

87 建立 CSS 樣式表 CSS 基本格式 :CSS 樣式表是由選擇器 (selector) 與樣式規則 (rule) 所組成選擇器 h1{color: red;} 樣式規則選擇器 (selector):css 樣式套用的目標可以是 HTML 標記 class 屬性或 id 屬性, 最常套用的目標是 HTML 標記如圖 :h1 是 HTML 標記, 則 h1 就是個選擇器, 只要網頁文件套用了 <h1> 標記, 就套用了 h1 選擇器的樣式規則可以多個標記用相同樣式規則, 以 (;) 分開 WebDesign 認識 CSS 樣式表 4

88 樣式規則 (rule): 在大括號 {} 裡, 由屬性與設定值組成一個選擇器裡, 可以設定多個規則 h1 { } font-size: 12px; /* 文字大小 */ line-height: 16px; /* 設定行高 */ border: 1px # solid; /* 設定框線 */ HTML 語法裡的註解是  CSS 樣式表的註解是 /* */ WebDesign 認識 CSS 樣式表 5

89 當  遇到 CSS 一個 CSS 語法與 HTML 網頁結合可能會類似下方這樣, 通常會放在 <head></head> 標籤之間 <style type="text/css">  </style> 這個 CSS 語法嵌入在 HTML 網頁中, 但是由於有 <style type="text/css"> 以及 </style> 的標示, 瀏覽器就會將裡面的 Code 判斷為 CSS Code, 所以那兩個看似 HTML 註解的符號就不受影響, 其間的 CSS Code 依然有效果 WebDesign 認識 CSS 樣式表 6

90 套用 CSS 樣式表行內宣告 (Inline): 將 CSS 樣式寫在 HTML 的標記裡範例 : ch07_01.htm 內嵌宣告 (Embedding): 將 CSS 樣式寫在 HTML 文件的標頭區域 <head></head> 裡面範例 : ch07_02.htm 連結外部樣式檔 (Linking): 將 CSS 樣式表儲存在獨立的檔案 (*.css), 然後在 HTML 文件裡以連結的方式宣告 <link rel="stylesheet" type="text/css" href="test.css"> rel 屬性指示被鏈接的文檔是一個樣式表 rel="stylesheet" 範例 : ch07_03_1.htm WebDesign 認識 CSS 樣式表 7

91 當上述三種宣告樣式重複使用在 HTML 文件裡時, 優先順序為行內宣告 > 內嵌宣告 > 連結外部樣式檔 * 若有多個樣式表被匯入, 越後被匯入的越有優先權範例 : ch07_03.htm ch07_03_2.htm ( 事實上連結外部樣式檔 > 內嵌宣告 ) HTML5/CSS3 後, 行內宣告 (Inline) 已建議停用, 內嵌宣告 (Embedding) 也已不建議經常使用 WebDesign 認識 CSS 樣式表 8

92 認識 CSS 選擇器標記名稱 : 使用 HTML 標記名稱當作選擇器, 可以將 HTML 文件裡所有相同的標記都套用同一種樣式 div { font-size: 16px; color: #FFFFFF;} 表示將 HTML 文件中所有的 div 標記都套用 {} 內的樣式範例 :ch07_03_3.htm 通用選擇器 (*): 使用 * 字元來選擇所有標記 * { font-size: 16px; color: #ff0000;} 如果希望樣式可以套用到不同標記裡, 可以利用 HTML 標記的 class 屬性名稱與 id 名稱範例 :ch07_03_4.htm WebDesign 認識 CSS 樣式表 9

93 class 選擇器 : class 的宣告法, 是先放一個句點 (.), 之後再列出選擇器名稱語法如下 :.class 名稱 { 屬性 : 設定值 ;... } 將以上 class 選擇器的樣式套用在 HTML 裡 <font class="class 名稱 "> 例如 :. cstyle{font-size: 16px; color:#ffffff} 使用以下的 HTML 碼套用樣式 : <font class="cstyle"> 範例 :ch07_04.htm WebDesign 認識 CSS 樣式表 10

94 如果希望只在某一種標記上套用 class 選擇器, 可以在 class 選擇器前加上標記名稱 font.txt{font-size } 範例 : ch07_05.htm 雖然 <font> 標記與 <id> 標記都加入了 class 屬性, 並命名為 txt, 但因 CSS 樣式宣告已經指明 font.txt 選擇器, 只有 <font> 標記裡的文字會受到影響 WebDesign 認識 CSS 樣式表 11

95 ID 選擇器 : 要套用 id 選擇器樣式前, 必須先在 HTML 標記裡加入 id 屬性接著在 CSS 樣式裡加入 id 選擇器宣告 HTML 裡 : <font id="id 名稱 "> <font id="font_bold"> CSS 裡 : #id 名稱 { 樣式規則 ;} #font_bold{font-size:..} 範例 : ch07_06.htm ch07_06_1.htm (color:red) 屬性 (attribute) 選擇器 : 用來篩選標記裡的屬性例如要指定超連結標記 <a> 的背景顏色為黃色, 但只套用在有 target 屬性的元件, 以下述套用 a[target] { background-color:yellow; } WebDesign 認識 CSS 樣式表 12

96 e[att]: 屬性選擇器 (Simple attribute selector) 當元素為 e, 且具有 att 屬性, 則套用樣式 <style type="text/css"> div[width]{ color: Red; } </style> <div> <div>black</div> <div width="50px">red</div> </div> 註 : 元素 e 和 [ 中間不可以有空白字元範例 : ch07_06_2.htm WebDesign 認識 CSS 樣式表 13

97 e[att="val"]: 準確屬性選擇器 (Exact attribute value selector) 當元素為 e, 並具有 att 屬性, 且 att 屬性的值為 val 時, 則套用樣式 <style type="text/css"> div[width="50px"]{ color: Red; } </style> <div> <div width="40px">black</div> <div width="50px">red</div> </div> 範例 : ch07_06_3.htm WebDesign 認識 CSS 樣式表 14

98 部份屬性選擇器 (Partial value attribute selector) e[att~="val"]: 當元素的屬性值, 可用空白隔開設定多個值時, 若其中有一個值為 val, 則套用樣式 <style type="text/css"> div[class~="red"]{ color: Red; } </style> <div> <div class="wrapper Big">Black</div> <div class="wrapper Red Big">Red</div> </div> 範例 : ch07_06_4.htm WebDesign 認識 CSS 樣式表 15

99 e[att^="val"]: 當元素 e 具 att 屬性, 且其值以 val 開頭, 則套用樣式 <style type="text/css"> div[class^="sec"]{ color: Red; } </style> <div> <div class="seccontent">red</div> <div class="bigger SecContent">Black</div> <div class="sec">red</div> </div> 範例 : ch07_06_5.htm WebDesign 認識 CSS 樣式表 16

100 e[att$="val"]: 當元素 e 具 att 屬性, 且其值以 val 結尾, 則套用樣式 <style type="text/css"> div[class$="end"]{ color: Red; } </style> <div> <div class="contentend">red</div> <div class="contentend Bigger">Black</div> <div class="end">red</div> </div> 範例 : ch07_06_6.htm WebDesign 認識 CSS 樣式表 17

101 e[att*="val"]: 當元素 e 具 att 屬性, 且其值含有子字串 val, 則套用樣式 <style type="text/css"> div[class*="img"]{ color: Red; } </style> <div> <div class="contentimg">red</div> <div class="contentimg Bigger">Red</div> </div> 範例 : ch07_06_7.htm WebDesign 認識 CSS 樣式表 18

102 e[att ="val"]: 特定屬性選擇器 (Particular attribute selector) 當元素為 e, 並具有 att 屬性, 且 att 屬性的值為 val val- 或以 val- 開頭時, 則套用樣式 <style type="text/css"> div[class ="Img"]{ color: Red; } </style> <div> <div class="img">red</div> <div class="img-">red</div> <div class="img-content">red</div> <div class="imgcontent">black</div> </div> 若具 att 屬性, 且值不為 val, 但以 val 開頭, 不會套用樣式範例 : ch07_06_8.htm WebDesign 認識 CSS 樣式表 19

103 反向選擇如果整份 HTML 文件, 除了某個標記外, 其他所有標記都要用同樣的一種樣式時, 可以採用 :not( 標記 ){ 樣式規劃 } p:not(.classy) { color: red; } body:not(p){color:green} <p> 標記, 除了 class 為.classy 以外, 都用紅色除了 <p> 標記外, 所有標記都用綠色範例 : ch07_06_9.htm WebDesign 認識 CSS 樣式表 20

104 8. CSS 基本語法

105 控制文字樣式字型屬性屬性屬性名稱設定值 color 字體顏色顏色名稱 16 進位碼 RGB 碼 font-family font-size font-style 指定字型樣式字型名稱字體大小文字斜體數值 + 百分比 (%) 數值 + 單位 (pt,px,em,ex) normal( 普通 ) italic( 斜體 ) oblique( 斜體 ) font-weight 文字粗體 normal( 普通 ) bold( 粗體 ) bolder( 超粗體 ) lighter( 細體 ) CSS Property WebDesign CSS 基本語法 2

106 color: 字體顏色色碼表 /RGB Color Code Ex. <style type= "text/css" > h1{color:red;} </style> RGB HSL Hex 網頁色彩碼解說 font-family: 指定字型樣式網頁常用字型 1 2 Ex. <style type= "text/css" > h1{font-family: "Arial Black", " 標楷體 ";} </style> 可以同時列出多個字型, 當瀏覽器沒有第一種字型的時候, 會自動顯示第二種字型, 以此類推 WebDesign CSS 基本語法 3

107 font-size: 字體大小 Ex. <style type= "text/css" > h1{font-size: 20pt;} </style> font-size 常見單位單位說明範例 cm 公分 font-size=1cm mm 公釐 font-size=10mm px 螢幕像素 (pixel), 大小隨解析度變 font-size=10px pt 點數 (point), 大小固定, 印刷用 font-size=12pt em 目前字型大小, 若為 10px,1em=10px font-size=2em % 目前字型大小的百分比 font-size=80% WebDesign CSS 基本語法 4

108 font-style: 文字斜體 Ex. <style type= "text/css" > h1{font-style: italic;} </style> font-weight: 文字粗體 Ex. <style type= "text/css" > h1{font-weight: bold;} </style> WebDesign CSS 基本語法 5

109 段落屬性屬性屬性名稱設定值 text-align text-indent 設定文字水平對齊首行縮排 letter-spacing 設定字元間距 left center right justify px, pt, 數值 + 百分比 (%), 數值 + 單位 normal 數值 + 單位 (pt, px, em) line-height 設定行高數值 + 單位 Word-wrap 設定是否換行 break-word WebDesign CSS 基本語法 6

110 text-align: 對齊方式 Ex. <style type= "text/css" > h1{text-align:center;} </style> 範例 :ch08_01.htm text-indent: 首行縮排 Ex. <style type= "text/css" > h1{text-indent:15px;} </style> 範例 : ch08_01_1.htm WebDesign CSS 基本語法 7

111 letter-spacing: 設定字元間距 Ex. <style type= "text/css" > h1{letter-spacing:5px;} </style> 可以輸入負值, 使字元間距變緊密另有 word-spacing 是用來設定英文單字的間距範例 : ch08_02.htm line-height: 設定行高 Ex. <style type= "text/css" > h1{line-height:140%;} </style> 範例 : ch08_02_1.htm WebDesign CSS 基本語法 8

112 文字效果屬性屬性屬性名稱設定值 vertical-align 垂直對齊 baseline ( 一般位置 ), super( 上標 ), sub( 下標 ), top( 對齊頂端 ), middle( 垂直置中 ), bottom( 對齊底部 ) textdecoration 增加裝飾樣式 none( 無 ), underline( 文字下方線 ), line-through( 刪除線 ), overline( 文字上方線 ) text-transform 轉換字母大小寫 none, lowercase, uppercase, capitalize( 原狀 ) text-shadow 增加陰影效果 WebDesign CSS 基本語法 9

113 vertical-align: 垂直對齊 Ex. <style type= "text/css" > h1{vertical-align: middle;} </style> 範例 : ch08_03.htm text-decoration: 增加裝飾樣式 Ex. <style type= "text/css" > h1{text-decoration: underline;} </style> 範例 : ch08_03_1.htm WebDesign CSS 基本語法 10

114 text-transform: 轉換字母大小寫 Ex. <style type= "text/css" > h1{text-transform: uppercase;} </style> 範例 : ch08_03_2.htm text-shadow: 設定陰影效果 Ex. 格式 : text-shadow: h-shadow v-shadow blur color; h-shadow: 水平 (horizontal) 方向陰影大小 v-shadow: 垂直 (vertical) 方向陰影大小 blur: 模糊淡化程度 ( 不寫表示不使用 ) color: 陰影顏色範例 :ch08_03_3.htm text-shadow: 10px 10px 10px #ff0000 WebDesign CSS 基本語法 11

115 控制背景設定背景顏色 : 可用在網頁表格儲存格等的背景 <style type= "text/css" > td{background-color: #FFFF66;} </style> 範例 : ch08_04.htm Ex. 設定背景圖案 background-image: 背景圖案 <style type= "text/css" > td{background-image: url(images/a.jpg);} </style> 範例 : ch08_05.htm ch08_05_1.htm WebDesign CSS 基本語法 12

116 background-repeat: 設定背景圖案的重複顯示 Ex. <style type= "text/css" > body{background-repeat: no-repeat;} </style> repeat: 重複併排顯示, 為預設值 repeat-x: 水平方向的重複顯示 repeat-y: 垂直方向的重複顯示 no-repeat: 不重複顯示範例 : ch08_05_2.htm WebDesign CSS 基本語法 13

117 background-attachment: 設定背景圖案是否跟捲軸一起捲動 <style type= "text/css" > body{background-attachment: fixed;} </style> fixed: 當網頁捲動時, 背景圖案固定不動 scroll: 當網頁捲動時, 背景圖案跟著捲動為預設值範例 : ch08_06.htm WebDesign CSS 基本語法 14

118 background-position: 設定背景圖案位置 Ex. <style type= "text/css" > body{background-position: 20px 50px;} </style> 20px 與 50px 分別代表圖案左上角的座標也可以用 %, 如 : 20px 50%, 左上角水平方向為 20px, 垂直方向為 50% 也可以輸入位置, 水平位置有 left( 左 ) center( 中 ) right( 右 ) ; 垂直方向有 top( 上 ) center( 中 ) bottom( 下 ) 範例 : ch08_07.htm WebDesign CSS 基本語法 15

119 background 綜合設定背景圖案 <style type= "text/css" > body{background: url(images/dot.gif) repeat-x fixed 100% 100%;} </style> 範例 : ch08_07_1.htm background-size: 設定背景尺寸 Ex. <style type= "text/css" > body{background-size: "60px 80px";} </style> 值可以是 : 長寬百分比 (%) cover 或 contain 範例 : ch08_07_2.htm WebDesign CSS 基本語法 16

120 設定背景漸層 :linear-gradient( 線性漸層 ) 屬性語法 : linear-gradient( 漸層方向, 色彩 1, 位置 1, 色彩 2, 位置 2, ) 漸層方向 :top( 上至下 ) left( 左至右 ) top left ( 左上至右下 ) 也可以用角度,45deg( 左下至右上 ) -45( 左上至又下 ) Gradient 尚未成為 CSS 標準, 各瀏覽器處理稍有不同 : Firefox: 以 -moz- 識別 Google Chrome / Safari: 以 -webkit- 識別 Opera: 以 -o- 識別 IE9+: 以 -ms- 識別範例 : ch08_08.htm Ex. WebDesign CSS 基本語法 17

121 線上快速產生漸層語法 : 方便產生漸層的工具 Ultimate CSS Gradient Generator 設定完在將 CSS 語法複製到 HTML 文件裡面 WebDesign CSS 基本語法 18

122 9. CSS 排版技巧

123 控制邊界與邊框 Margin( 邊界 ) Border( 邊框 ) Padding( 邊界留白 ) HTML 元件 WebDesign CSS 排版技巧 2

124 邊界 (margin): 在邊框 (border) 外圍, 用來設定元件的邊緣距離有四屬性 :margin-top( 上邊界 ) margin-right( 右 ) margin-bottom( 下 ) margin-left( 左 ) 單位 :px pt % auto( 預設 ) div { margin-top: 20px; margin-right: 40pt; margin-bottom: 120%; margin-left: auto; } 範例 :ch09_01.htm WebDesign CSS 排版技巧 3

125 也可寫為 div{ margin:5px, 10px, 15px, 20px;} 預設順序為上右下左 div{ margin:5px;} 上右下左皆為 5px div{ margin:5px, 10px;} 上 =5px 右 =10px 下 =5px 左 =10px div{ margin:5px, 10px, 15px;} 上 =5px 右 =10px 下 =15px 左 =10px 範例 : ch09_01_1.htm WebDesign CSS 排版技巧 4

$div{border-style: solid double groove ridge;} /* 上右下左 */ 設定四邊各別樣式 :border-top-style border-left-style border-bottom-style border-right-style 範例 :ch09_02.htm ch09_02_1.$

126 邊框 (border) border-style ( 邊框樣式 ): 設定值有 none( 預設值 ) solid( 實線 ) dashed( 虛線 ) double( 雙實線 ) dotted( 點線 ) groove(3d 凹線 ) ridge(3d 凸線 ) inset(3d 嵌入線 ) outset(3d 浮出線 ) 樣式如下 : div{border-style: solid double groove ridge;} /* 上右下左 */ 設定四邊各別樣式 :border-top-style border-left-style border-bottom-style border-right-style 範例 :ch09_02.htm ch09_02_1.htm WebDesign CSS 排版技巧 5

127 border-width ( 邊框寬度 ) div{border-width: 5px 10px 20px 25px;} /* 上右下左 */ 各別邊框 : border-top-width border-right-width borderbottom-width border-left-width, 預設順序範例 : ch09_03.htm ch09_03_1.htm border-color ( 邊框顏色 ) div{border-color: green red rgb(255, 255, 0) #FF00FF;} 各邊框顏色 :border-top-color border-right-color borderbottom-color border-left-color, 預設順序範例 :ch09_03_2.htm ch09_03_3.htm WebDesign CSS 排版技巧 6

128 border ( 邊框綜合設定 ): 如果邊框的屬性都要設一樣, 可以一次宣告邊框樣式寬度以及顏色因單位值不同, 沒有先後順序, 只要以空格隔開即可 div{border: #0000FF 5px double;} 範例 : ch09_03_4.htm border-radius ( 邊框導圓角 ): 設定邊框的圓角 border-radius: 25px; border-radius: 25px 10px 15px 30px; 各別設定四邊圓角, 可以用 border-top-left-radius border-topright-radius border-bottom-right-radius border-bottom-leftradius 範例 : ch09_03_5.htm WebDesign CSS 排版技巧 7

129 border-image ( 花樣邊框 ) :IE 不支援語法 : border-image: source slice width repeat; source: 指定的圖片與路徑 slice: 切出圖片使用的界線 ( 必填 ) repeat: 三種值 stretch: 把圖片拉伸至整個邊框區域 repeat: 重覆填滿 round: 重覆填滿並自動調整圖片大小四周界線距離不同, 可如下表示 : 上右下左 border-image: url(border.png) ; 範例 : ch09_04.htm ch09_04_1.htm WebDesign CSS 排版技巧 8

130 padding( 邊界留白 ): 是指邊框 (border) 內側與 HTML 元件邊緣的距離四邊屬性 :padding-top padding-right paddingbottom padding-left div{ padding-top: 10px; padding-right: 20pt; padding-bottom: 120%; padding-left: auto; } 或 padding: 10px 20px 25px 30px; 範例 : ch09_05.htm ch09_05_1.htm WebDesign CSS 排版技巧 9

131 網頁元件的定位一般定位屬性屬性名稱設定值 position 設定元件位置的排列方式 absolute relative static width 指定元件寬度寬度數值 height 指定元件高度高度數值 left 指定元件與左邊界的距離 (X 座標 ) 距離數值 top 指定元件上邊界的距離 (Y 座標 ) 距離數值 overflow 超出邊界的顯示方式 visibility 設定是否顯示距離數值 visible hidden inherit WebDesign CSS 排版技巧 10

132 position: 設定元件位置的排列方式通常與 <div> 標記搭配使用, 定位方式有兩種 : absolute( 絕對位置 ): 以上一層元件 ( 父元件 ) 的左上角為原點來定位 relative( 相對位置 ): 以元件本身的左上角為原點來定位 static: 預設值, 是照著瀏覽器預設的配置自動排版在頁面上範例 : ch09_06_1.htm overflow: 設定超出邊界的顯示方式, 有四種設定值 : visible: 不管元件長寬, 內容完全呈現 hidden: 超出長寬的部份不顯示 scroll: 無論會不會超出長寬, 都加入捲軸 auto: 依狀況決定是否顯示捲軸範例 : ch09_06.htm WebDesign CSS 排版技巧 11

$float: 設定文繞圖屬性有 left right none img{float:left} 範例 : ch09_06_2.$

133 float: 設定文繞圖屬性有 left right none img{float:left} 範例 : ch09_06_2.htm 圖層定位 : 可以達到疊圖疊字等效果利用 z-index 屬性來設定元件的層次,z-index 值越大, 越在上層 <img src="sample.gif" style="position:absolute; top:30; left:30; z-index:1;"> 範例 : ch09_07.htm ch09_07_1.htm WebDesign CSS 排版技巧 12

134 超連結與滑鼠游標特效超連結特效超連結有四種狀態 :link visited hover active <style type= "text/css" > a {border: 1px red solid;} a.link {color: black;} a.visited {color: blue; border: 0px;} a.active {color: yellow;} a.hover {border: 1px green solid; text-decoration: none;} </style> a: 宣告超連結的樣式 a.link: 未連結前超連結文字樣式 a.visited: 已連結過的超連結文字樣式 a.active: 執行中超連結文字樣式 WebDesign CSS 排版技巧 13

135 a.hover: 滑鼠移到連結時的文字樣式範例 :ch09_08.htm 除了文字超連結外, 圖片也可以做為超連結的樣式範例 :ch09_09.htm ch09_09_1.htm 滑鼠游標特效 : 游標不一定要箭頭, 也可以是其它圖形 <style type= "text/css" > a{ cursor: crosshair;} </style> cursor: 滑鼠的游標樣式也可以用圖形當游標 cursor: url{ 游標圖檔與路徑 } 游標檔必須為.cur, 但有些瀏覽器不支援.cur, 支援其他圖檔 WebDesign CSS 排版技巧 14

136 範例 : ch09_10.htm ch09_10_1.htm ch09_10_2.htm WebDesign CSS 排版技巧 15

137 10. HTML5+CSS3 綜合實作

138 實作網頁內容實作網站架構內容包括 : 標題圖片文字超連結表單元件嵌入影音最新消息 ( 首頁 ) (index.htm) flash 動畫 (flash.htm) 短片欣賞 (movie.htm) 音樂欣賞 (music.htm) 留言板 (message.htm) WebDesign HTML5+CSS3 綜合實作 2

139 未美化前 HTML 網頁 index.htm WebDesign HTML5+CSS3 綜合實作 3

140 使用語意標記排版版面安排 : 通常網頁版面可以劃分為標題區選單區主內容區頁尾區標題區選單區主內容區頁尾區 WebDesign HTML5+CSS3 綜合實作 4

141 完全網頁首頁 : index.htm 標題區 : <header> 標記左側選單區 : <aside> 標記定義出側邊欄 <nav> 標記定義連結選單 <aside> <nav> WebDesign HTML5+CSS3 綜合實作 5

142 主內容區 : <article> 標記定義主內容區, 內又分兩區塊 <section> 標記定義最新消息的區塊 <div> 標記定義圖片區 <article> 頁尾區 : <footer> 標記 <section> <div> WebDesign HTML5+CSS3 綜合實作 6

143 套用 CSS 語法 : 版面規劃與尺寸 WebDesign HTML5+CSS3 綜合實作 7

144 一般來說, 一個網頁需要套用 CSS 的元件很多, 如果與 HTML 文件寫在一起, 會讓程式看起來很冗長雜亂所以, 建議將 CSS 語法存成 CSS 檔, 再用外部連結樣式檔的方式, 將 CSS 檔連結進來實作 CSS 檔 : color.css index.htm 檔中在 <head></head> 裡的連結語法 : <link rel=stylesheet type="text/css" href="color.css"> <body> 中的 <div id="main">: 連結至 CSS 檔的 #main, 設定網頁內容的寬度 (800px), 並且水平置中 (auto) WebDesign HTML5+CSS3 綜合實作 8

145 疊字標題利用 CSS 裡定義兩個 <h1> 的文字格式 h1#text1 h1#text2, 應用不同字體大小與位置, 可以達到疊字效果 Class(.) 與 ID(#): 功用近似, 基本上 Class 可以在一頁面中反覆使用, 而 ID 僅能被使用一次但是大部分瀏覽器中, 反覆使用同一個 ID 並不會出現問題後方文字 (id=text1) 前方文字 (id=text2) WebDesign HTML5+CSS3 綜合實作 9

146 網頁背景和滑鼠游標將選擇器 body 定義於 CSS 檔裡滑鼠遊標指定圖檔 my.cur 背景使用特定圖檔 bg.jpg 滑鼠游標網頁背景圖 WebDesign HTML5+CSS3 綜合實作 10

147 選單超連結特效 CSS 檔裡定義選單超連結區塊的樣式 nav{}: 區塊格式 nav ul{}: 不顯示清單項目符號 nav li a{}: 超連結樣式 nav li a:hover{}: 滑鼠移到超連結時的樣式原始狀態圖檔名 :btn.png 滑鼠移到連結時圖檔名 :btn_hover.png WebDesign HTML5+CSS3 綜合實作 11

148 主內容區樣式分最新消息區圖片展示區.consection{}: 設定區塊樣式 display.block: 區塊固定, 文字會自動換行 display.inline: 區塊大小會隨著內容變動最新消息區 section (class="consection") 圖片展示區 div (class="consection") WebDesign HTML5+CSS3 綜合實作 12

149 <fieldset> 標記, 設定最新消息方框的樣式 <legend> 標記, 設定方框標題範例 :index1.htm (article 有背景圖,background:transparent) WebDesign HTML5+CSS3 綜合實作 13

150 11. 認識 JavaScript

151 甚麼是 JavaScript 希望網頁上的元件, 如 : 按鈕或圖片, 能夠動態的變換, 就可以利用 JavaScript 語法來實現 JavaScript 架構 : 用 <script> 標記, 嵌入 JavaScript 的程式碼 <script type= "text/javascript" > <!.. --> </script> type: 常用的 Script 語言有 JavaScript 與 VBScript 兩種, 但大多數瀏覽器預設的都是 JavaScript, 所以可以省略 WebDesign 認識 JavaScript 2

152 用註解包住 JavaScript 程式碼 : 有些舊版瀏覽器無法支援 JavaScript, 以 HTML 的註解 <! > 及 JavaScript 註解 //, 可以避免程式碼顯示出來 JavaScript 程式碼可以放在 HTML 的 <head></head> 標記中, 也可以放在 <body></body> 標記中 JavaScript 放在 <head></head> 標記裡一開始顯示網頁, 就執行 JavaScript 程式範例 : ch11_01.htm ( 先顯示歡迎光臨彈出視窗 ) JavaScript 放在 <body></body> 標記裡可依網頁內容依序執行顯示範例 : ch11_02.htm ( 先顯示 JavaScript 好簡單網頁 ) ch11_02_1.htm ( 先顯示歡迎光臨彈出視窗 ) WebDesign 認識 JavaScript 3

153 JavaScript 物件與函數 W3C 發佈了標準物件模型 (Document Object Model, DOM), 讓各家瀏覽器能遵守此一模型來開發 DOM 定義了網頁文件結構 (representation), 以 window 為頂層,window 內包含許多的物件 (object), 例如 : 窗框 (frame) 文件 (document) 等, 文件中有圖片 (image) 表單 (form) 按鈕 (button) 等物件每一物件有屬於自己的事件 (event) 方法 (method) 與屬性 (property) 物件名稱. 屬性 : 可用來設定或取得物件的屬性內容 document.bgcolor="yellow"; 設定文件背景顏色為黃色 WebDesign 認識 JavaScript 4

154 函數 (function): 一段可以被重覆呼叫執行的程式碼 function 函數名稱 ( 輸入引數 ) { JavaScript 敘述 return( 傳回值 ) // 有傳回值時才需要 } 範例 : ch11_03.htm alert 物件的功能是跳出訊息框來顯示括號 () 內的內容 onclick: 按一下鈕會呼叫函數 WebDesign 認識 JavaScript 5

155 JavaScript 事件 : 事件是由使用者的動作或系統所引發的訊號如 : 按下按鈕送出訊號的動作, 就產生一個事件接著要有特定的程式來處理此事件, 此程式稱為事件處理程序 (event handler) 不同的物件會支援不同的事件處理程序,JavaScript 常用的事件處理程序如表列 WebDesign 認識 JavaScript 6

156 onclick onmouseover onmouseout onload onunload onerror onabort onfocus onblur onselect onchange onreset onsubmit 事件處理程序 (Event Handler) 滑鼠點選物件時滑鼠經過物件時滑鼠離開物件時網頁載入時離開網頁時載入發生錯誤時停止載入影像時視窗或表單元件取得焦點時視窗或表單元件失去焦點時選取表單元件內容時改變欄位的資料時重設表單時送出表單時參考 : WebDesign 認識 JavaScript 7

157 JavaScript 流程控制運算符號比較運算子比較運算子說明範例 > 左邊值大於右邊值則成立 a > b < 左邊值小於右邊值則成立 a < b == 兩者相等則成立 a == b!= 兩者不相等則成立 a!= b >= 左邊值大於或等於右邊值則成立 a >= b <= 左邊值小於或等於右邊值則成立 a <= b WebDesign 認識 JavaScript 8

158 算術運算子算術運算子說明範例 + 加 a+b - 減 a-b * 乘 a*b / 除 a/b % 取餘數 a%b -- 遞減 a--( 先傳回 a, 然後 a 減 1) --a(a 先減 1, 然後傳回 a) ++ 遞增 a++( 先傳回 a, 然後 a 加 1) ++a(a 加 1, 然後傳回 a) WebDesign 認識 JavaScript 9

159 邏輯運算子邏輯運算子說明範例 && AND 運算 ( 左右兩邊都成立時才傳回真 ) a && b OR 運算 ( 只要左右兩邊有一邊成立就傳回真 ) a b 指派運算子 a = 5; a += 5; // 相當於 a = a + 5 a -= 5; // 相當於 a = a 5 字串 : + 符號可以連接兩字串 a = "abc" + "def"; //a 等於 abcdef var a = "abc"; //a 等於 13abc var b = "abc" ; //b 等於 abc310 WebDesign 認識 JavaScript 10

160 If else 條件式 if(a==b){ // 如果 a==b, 就執行這裡面的敘述 } else if(a>b) { // 如果 >b, 就執行這裡面的敘述 } else { // 其他 (a>b), 就執行這裡面的敘述 } WebDesign 認識 JavaScript 11

161 For 迴圈 for (i=1; i<=10; i++) { document.write( i + "<br>"); } 範例 : ch11_04.htm ch11_04_1.htm JavaScript 語法裡, 單引號 (' ') 與雙引號 (" ") 的功能完全一樣, 只要成對出現即可連結外部 JavaScript 檔案 <script type="text/javascript" src="scriptname.js"></script> 範例 : ch11_04_2.htm WebDesign 認識 JavaScript 12

162 好用的編輯介面 : 下載檔案 : Tools/Download/ single HTML or ZIP file WebDesign 認識 JavaScript 13

163 12. Canvas 線上繪圖

164 認識 canvas <canvas> 標記, 可以利用 JavaScript 在 canvas 上繪圖組合影像做簡單動畫基本 canvas 語法建立繪圖區 <canvas id="mycanvas" width="200" height="100"> </canvas> 範例 : ch12_01.htm <canvas> 若沒有設定寬 (width) 與高 (height), 則預設為 300px 與 150px 想要使用 JavaScript 取得 HTML 文件中的元素, 首先必須指定元件的 ID, 之後可以用 getelementbyid( ) 取得 <canvas id="mycanvas"></canvas> WebDesign Canvas 線上繪圖 2

165 JavaScript 取得 canvas 元素 var canvas = document.getelementbyid('mycanvas'); 為避免不支援 canvas 的瀏覽器執行 script 時出現錯誤, 以 if 判斷式測試是否取得 canvas 的 getcontext if (canvas.getcontex){ } getcontext() 方法傳回一個用于在畫布上繪圖的環境目前只支援 2D context 物件 var ctx = canvas.getcontext('2d'); 指定圖形的顏色 ctx.fillstyle = "#FF0000"; 指定第二個矩形為半透明的藍色 ctx.fillstyle= "rgba(0, 0, 200, 0.5)"; /* a 為透明度 0~1 */ 繪製矩形並且指定繪製方向及大小 ctx.fillrect(0,0,150,75); WebDesign Canvas 線上繪圖 3

166 繪製各種圖形 : 有四步驟一. 開始新路徑 beginpath( ); 二. 設定路徑 moveto(x,y) 移動起始點到 x,y lineto(x,y) 繪出目前端點到 x,y 的直線 arc(x,y, r, startangle, endangle, 繪出圓形或圓弧 anticlockwise) fillrect(x,y,width,height) 繪出填滿矩形 strokerect(x,y,width,height) 繪出輪廓矩形 ( 只有邊框, 不填色 ) 三. 將路徑頭尾相連 closepath( ); // 關閉路徑 WebDesign Canvas 線上繪圖 4

167 四. 將路徑繪製到 canvas 繪圖區 stroke( ); // 繪製邊框 fill( ); // 填滿圖形繪製直線 : ch12_02.htm strokestyle="#ff0066"; // 設定邊框顏色繪製圓形 : ch12_03.htm ctx.linewidth=10; // 設定線條寬度 x, y = 100, 100: 圓心座標 r = 50: 半徑 startangle=0: 圓弧的起點 endangle=math.pi*2: 圓弧的終點,Math.PI 代表圓周率 π anticlockwise=true: 是否以逆時針方向繪圖,true/false 繪製矩形刪除圖形 : ch12_04.htm clearrect(x, y, width, height): 清除矩形區域 WebDesign Canvas 線上繪圖 5

168 設定圖形樣式指定圖形顏色常用顏色名稱與代碼顏色名稱代碼黑 black # 綠 green # 淺綠 lime #00FF00 藍 blue #0000FF 紫 purple # 灰 gray # 紅 red #FF0000 黃 yellow #FFFF00 白 white #FFFFFF WebDesign Canvas 線上繪圖 6

169 加上透明度 (alpha) rgba(red, green, blue, alpha); red, green, blue: 值為 0~255 的數值 ( 相當於 00~FF) alpha( 透明度 ): 值為 0.0~1.0,0 為完全透明,1 為完全不透明 Color picker 網頁 : 好用的顏色選擇器 ColorPic 軟體工具 : 免費的顏色選擇軟體 WebDesign Canvas 線上繪圖 7

170 指定線條粗細線條寬度 ( 粗細 ) context.linewidth="10"; 線條端點樣式 butt: 對齊端點, 為預設值 round: 半圓形 square: 端點處突出線條一半的寬度範例 :ch12_05.htm WebDesign Canvas 線上繪圖 8

171 漸層填色線性漸層 (linear gradient): 先以 createlineargradient() 建立線性漸層物件, 再用 addcolorstop() 加入漸層顏色, 並指定給 fillstyle 或 strokestyle 屬性來使用 context.createlineargradient(xs, ys, xe, ye); xs, ys: 漸層起點座標 xe, ye: 漸層終點座標 WebDesign Canvas 線上繪圖 9

172 gradient.addcolorstop(stop, color); stop: 值介於 0.0~1.0, 圖形中變換顏色的位置 0.5 為中間 color: 漸層的顏色至少兩個顏色, 多色漸層, 可以依序增加 addcolorstop() 範例 : ch12_06.htm ch12_06_1.htm WebDesign Canvas 線上繪圖 10

173 圓形漸層 (radial gradient): 改用 createradialgradient() 建立漸層, 其餘與線性漸層相同 context.createradialgradient(xs, ys, rs, xe, ye, re); rs, re: 起點與終點的半徑範例 : ch12_07.htm ch12_07_1.htm WebDesign Canvas 線上繪圖 11

174 Canvas 動畫 setinterval(code, millisec) 方法 : 可按照指定的週期, 重覆不斷的執行函式 (function) 會傳回 setinterval 的 ID 值 code: 要執行的函式名稱 millisec: 執行週期, 以毫秒為單位範例 : ch12_08.htm WebDesign Canvas 線上繪圖 12

175 clearinterval(id): 清除週期, 可以終止 setinterval 的執行 id 為 setinterval 傳回的 ID 值 addeventlistener(type, listener[, usecapture]): 對事件的偵聽 type: 事件類型 load 當事件載入時 ; click 當被按一下時 listener: 事件發生時, 通知的對像 usecapture: true/falae 範例 : ch12_08_1.htm 使用 KineticsJS: 為 HTML5 Canvas Library. 範例 : ch12_08_2.htm WebDesign Canvas 線上繪圖 13

176 13. 網頁資料儲存 Web Storage

177 認識 Web Storage Web Storage 概念 Web Storage 與 cookie 差別 : 儲存大小不同 :cookie 只允許每個網站在用戶端儲存 4KB 的資料 HTML5 的規範裡,Web Storage 容量是由用戶端的瀏覽器決定, 通常是 1MB~5MB 左右安全性不同 :cookie 每次處理請求, 都會傳送 cookie 值給伺服器, 安全性較低 Web Storage 只運作於用戶端, 安全性較高都是以一組 key-value 對應保存資料, 兩者相同 Web Storage 用兩物件類型儲存資料 : Web Storage 類型生命週期有效範圍 localstorage 執行刪除指令才會消失同一網站的網頁可跨視窗及分頁 sessionstorage 瀏覽器視窗或分頁關閉就會消失只對當前瀏覽器視窗或分頁有效 WebDesign Web Storage 2

178 偵測瀏覽器是否支援 Web storage: 利用如下語法 if(typeof(storage)=="undefined") { alert(" 您的瀏覽器不支援 Web Storage") }else{ //localstorage 及 sessionstorage 程式碼 } WebDesign Web Storage 3

179 local Storage 及 session Storage 存取 localstorage 關閉瀏覽器後, 除非執行清除, 否則資料會一直存在只有來自相同來源的網頁才能取得同一個 localstorage 協定要相同 : 與不同主機 (domain) 要相同 : 網址要相同傳輸埠 (port) 要相同 : abc.com:8000 與 abc.com:8080 不同 Web Storage 只允許儲存字串, 直接存取或透過 API: 直接存取存值 : localstorage.username = value; 取值 : var value=localstorage.username; WebDesign Web Storage 4

180 透過 API 存取有三種方法一. setitem 及 getitem 方法存值 :window.localstorage.setitem(key, value); 取值 :var value=window.localstorage.getitem(key); window.localstorage.setitem("userdata", "Hello"); var data=window.localstorage.getitem("userdata"); 二. 陣列索引存值 : window.localstorage["data"] = value; 取值 : var value = window.localstorage["data"]; WebDesign Web Storage 5

181 三. 屬性存值 : window.localstorage.data= value; 取值 : var value = window.localstorage.data; 以上前面的 window 可以不寫範例 : ch13_01.htm ch13_01_1.htm ch13_01_2.htm JavaScript 裡的加號 +, 也可以當做字串相加功能 ( 串接字串 ) 若遇到字串與數字相加, 會全部轉為字串處理例如 : " abc " +123, 會得到 " abc123 " innerhtml: 屬於 HTML DOM 的一種功能, 透過 innerhtml 可以取得或設定 HTML Code 中的元素, 也可以單純的將字串寫入 HTML Code 的某一個部分例如 : show_localstorage.innerhtml, 即可將想要寫入的字串或 HTML Code 寫入至 div 裡 WebDesign Web Storage 6

182 刪除 localstorage: 刪除某筆資料有兩方式呼叫 removeitem() window.localstorage.removeitem("userdata"); 用 delete 屬性 delete localstorage.userdata; delete localstorage["userdata"] 刪除全部資料 localstorage.clear(); 範例 : ch13_02.htm WebDesign Web Storage 7

183 存取 Session Storage 瀏覽器或分頁關閉, 資料就會消失用於保存臨時性的資料操作方法與 localstorage 相同直接存取存值 : sessionstorage.username = value; 取值 : var value=sessionstorage.username; 透過 API 存取儲存 window.sessionstorage.setitem("userdata", " Hello!"); window.sessionstorage ["userdata"] = "Hello!"; window.sessionstorage.userdata= "Hello!"; WebDesign Web Storage 8

184 讀取 var value1 = window.sessionstorage.getitem("userdata"); var value1 = window.sessionstorage["userdata"]; var value1 = window.sessionstorage.userdata; 清除 window.sessionstorage.removeitem("userdata"); delete window.sessionstorage.userdata; delete window.sessionstorage ["userdata"] 清除全部 sessionstorage.clear(); 範例 :ch13_02_1.htm WebDesign Web Storage 9

185 Web Storage 實例練習操作步驟 1. 當使用者按下登入鈕時, 出現請輸入姓名的文字方塊讓使用者輸入姓名 2. 按下送出鈕之後, 將姓名儲存於 localstorage 3. 重新載入頁面, 將進入網站次數儲存於 localstorage, 並將使用者姓名及進站次數顯示於 <div> 標記 4. 按下登出鈕之後,<div> 標記顯示已登出, 並清空 localstorage 實例 :ch13_03.htm WebDesign Web Storage 10

186 1. 按下登入鈕 2. 出現輸入框 3. 填好姓名之後按下送出鈕按此鈕即可登出這裡顯示姓名及進站次數 WebDesign Web Storage 11

187 未按下登入前, 輸入框可能隱藏 inputspan.style.display='none'; 登入後, 輸入框就再次隱藏 btn_login.style.display='none'; 按下送出後, 會呼叫 sendok(), 姓名存入 username, 並重新載入網頁 function sendok(){ localstorage.username=inputname.value; location.reload(); /* 重新載入網頁 */ } 每次重新載入網頁時計數器加 1 if (!localstorage.counter) { /* 可檢查瀏覽器是否支援 */ localstorage.counter = 1; /* 初始值設為 1*/ } else { localstorage.counter++; /* 遞增 */ } WebDesign Web Storage 12

188 登出, 清除 localstorage 裡的資料, 並將登入按鈕姓名輸入框送出鈕顯示出來 function clearlocalstorage(){ localstorage.clear(); /* 清空 localstorage*/ show_localstorage.innerhtml=" 已成功登出!!"; btn_login.style.display=''; /* 顯示登入按鈕 */ inputspan.style.display=''; /* 顯示姓名輸入框及送出鈕 */ } WebDesign Web Storage 13

189 14. Web Storage 實作 - 購物車

190 購物車使用者將選擇的商品放到暫存區, 選好之後再進行結帳, 暫存區就稱為購物車使用者的帳號密碼也必須暫存, 才能夠進入網站的任一網頁 WebStorage 暫存使用者選購的商品 : 關閉網頁, 購物車要繼續保留, 使用 localstorage 關閉網頁, 購物車不要保留, 使用 sessionstorage WebDesign Web Storage 實作 2

191 當使用者希望購物車未結帳的資料繼續保留, 以供下次進入網站使用, 則應該選用 localstorage 如果使用者下次進入網站時, 希望自動顯示帳號, 則也應該選用 localstorage, 才能保留帳號但為安全考量, 離開網站或關閉視窗, 應該將密碼刪除則 sessionstorage 較為適當範例 : ch14_01.htm 表單 <form></form> 裡 action 屬性指定為 ch14_02.htm, 當按下送出 (submit) 時, 資料會傳到 ch14_02 網頁處理 onsubmit: 按下 submit 時,sendok() 會檢查是否有輸入帳號與密碼, 有則傳回 true,onsubmit 才會將 form 資料送出 WebDesign Web Storage 實作 3

192 WebDesign Web Storage 實作 4

193 範例 :ch14_02.htm 網頁包含下列動作商品列表勾選商品放入購物車並顯示於購買清單清空購物車登出 new Array( ) 是 JavaScript 用來宣告陣列有三種用法 : 宣告陣列名稱, 不指定內容值 var array_name = new array(); WebDesign Web Storage 實作 5

194 宣告陣列名稱和長度, 不指定內容值 var array_name = new array(length); 宣告陣列名稱長度與內容值 var array_name = new array(data1, data2, data3,., datan); var sale_item=new Array(" 水果蛋糕 ", " 葡萄 ", " 奇異果 ", " 檸檬 ", " 蘋果派 ", " 鳳梨 ", " 水果組合 ", " 蘋果 ", " 水果茶 "); array_name[index]: 指陣列資料的位置,index 值從 0 開始 sale_item[4] 指的是第 5 筆 " 蘋果派 " WebDesign Web Storage 實作 6

195 var div_list=""; for (i in sale_item) { div_list=div_list+"<div class='fruit'>" div_list=div_list+"<img class='img_fruit' src='images/fruit"+i+".png'><br/>" div_list=div_list+"<font style='color:#ff0000'>" + sale_item[i] +"</font><br />" div_list=div_list+"<input type='checkbox' name='chkitem' value='" + sale_item[i] + "'>" div_list=div_list+" 我要選購 </div>" } document.getelementbyid("div_sale").insertadjacenthtml("beforeend", div_list); 解碼 : 當 i=0 時 <div class='fruit'> <img class='img_fruit' src='images/fruit0.png'><br/> <font style='color:#ff0000'> 水果蛋糕 </font><br /> <input type='checkbox' name='chkitem' value=' 水果蛋糕 '> 我要選購 </div> WebDesign Web Storage 實作 7

196 JavaScript 動態增加元件內容 insertadjacenthtml 可以在 <div> 元件動態增加內容 element.insertadjacenthtml(position, html); element: 指元件 position: 指插入 html 的位置, 有下列四種參數 : 參數說明 beforeend 原內容之後加入新 html( 在 </div> 之前 ) beforebegin <div> 之前加入新 html afterbegin 原內容之前加入新 html( 在 <div> 之後 ) afterend </div> 之後加入新 html WebDesign Web Storage 實作 8

197 document.getelementbyid("div_sale").insertadjacenthtml("beforeend", div_list); id 為 div_sale 的 <div> 並沒有內容, 所以用 beforeend 或 afterbegin 結果是一樣的 WebDesign Web Storage 實作 9

198 15. jquery

199 認識 jquery jquery 是一套開放原始碼的 JavaScript 函式庫 (library), 它簡化了 HTML 與 JavaScript 之間複雜的處理程序 jquery 特色 : 簡化 DOM(Document Object Model) 文件的操作, 輕鬆選取物件, 並以簡潔的程式完成想做的事情透過 jquery 指定 CSS 屬性值, 達到想要的特效與動畫效果強化非同步傳輸 (AJAX -- Asynchronous JavaScript and XML) 以及事件 (Event) 功能, 輕鬆存取遠端資料網路上有許多開放原始碼的 jquery 外掛程式, 可以輕鬆的應用到自己設計的網站上 WebDesign jquery 2

200 引用 jquery 函式庫下載 jquery, 網址 : jquery 1.x jquery 2.x: 不支援 IE8 或更早版本將 js 檔加入網頁 HTML 的 <head> 標記之間 <script type="text/javascript" src=" 路徑 /xx.js"></script> 使用 CDN 載入 jquery CDN(Content Delivery Ntwork) 是內容分派服務網, 是將要載入的內容, 透過這個網路系統來分派 ( 只要將網址加入網頁 HTML 的 <head> 標記之間 <script src=" 當瀏覽器已經快取過此 jquery 檔案, 就不會再重新下載, 速度較快 WebDesign jquery 3

201 jquery 基本架構 jquery 必須等到瀏覽器載入 HTML 的 DOM 物件後才能執行可以透過.ready( ) 方法來確認 DOM 已經全部載入 jquery ( document ).ready(function() { // 程式碼 }); 或 $ ( document ).ready(function() { // 程式碼 }); WebDesign 或更簡潔用法 $ (function() { // 程式碼 }); jquery 4

202 jquery 基本語法 $( 選擇器 ).( 動作 ) $("p").hide(); // 找出 HTML 中所有的 <p> 物件並且隱藏起來 jquery 選擇器 : 是用來選擇 HTML 元件, 可以透過 HTML 標記名稱 id 屬性及 class 屬性等等來取得元件標記名稱選擇器, 直接取用 HTML 標記例如想要選擇所有的 <p> 元件 : $("p") id 選擇器 (#), 透過元件的 id 屬性來取得元件在屬性前面加上 # 例如想要選擇 id 屬性為 test 的元件 : $("#test") class 選擇器 (.), 透過元件的 class 屬性來取得元件在屬性前面加上. 例如想要選擇 class 屬性為 test 的元件 : $(".test") WebDesign jquery 5

203 上述三種選擇器也可以組合使用例如想要找出所有 <P> 標記 class 屬性為 test 的元件 : $("p.test") WebDesign jquery 6

204 常用的選擇器及搜尋法表示法 $("*") 選取所有元件 $(this) $("p:first") $("[href]") $("tr:even") $("tr:odd") $("div p") $("div").find("p") $("div").next("p") $('li').eq(2) 選取目前作用中的元件選取第一個 <p> 元件選取有 href 屬性的元件選取偶數 <tr> 元件選擇奇數 <tr> 元件說明選擇 <div> 元件裡面包含的 <p> 元件搜尋 <div> 元件裡的 <p> 元件搜尋 <div> 元件之後的第一個 <p> 元件搜尋第 3 個 <li> 元件,eq() 裡是輸入元件的位置, 只能輸入整數, 最小為 0 WebDesign jquery 7

205 設定 CSS 樣式屬性可以使用 css() 方法來改變 CSS 樣式例如指定 <div> 元件的背景色為紅色 : $("div").css("background-color", "red"); 範例 : ch15_01.htm ch15_01_1.htm 將第 3 個 <li> 元件的背景顏色改為紅色 jquery 語法與 JavaScript 語法一樣並不限定使用單引號和雙引號, 只不過必須要成對出現, 例如 "div" 'div' 都是對的, 而 "div' 是不被接受的 WebDesign jquery 8

206 表格排序套件 -tablesorter 透過 tablesorter 套件, 就能夠輕鬆美化表格, 讓表格靈活呈現下載與套用下載網址 : Download jquery.tablesorter.zip, 解壓縮通常只需要用到 jquery.tablesorter.js 與 themes 資料夾 Themes 資料夾裡有 blue 與 green 兩種主題樣式 Tablesorter 是 jquery 的外掛程式 (plugin), 需先載入 jquery library 再載入 tablesorter 語法則加入 <head> 裡 <link rel="stylesheet" href="tablesorter/blue/style.css" type="text/css" /> <script src=" <script type="text/javascript" src="tablesorter/jquery.tablesorter.js"> </script> WebDesign jquery 9

207 套用 : 首先要製作一個基本的表格 (table),tablesorter 必須套用在標準的 HTML 裡自訂 table 的 id,class 則必須指定為 tablesorter 表格必須有表頭標記 <THEAD><th>, 與表身標記 <TBODY> <table id="mytable" class="tablesorter"> <thead> <tr> <th>***</th> </tr> </thead> <tbody> <tr> <td>***</td> </tr> </tbody> </table> WebDesign jquery 10

208 接著在網頁載入時, 告訴 tablesorter 要將那一個表格排序 $(function () { $("#mytable").tablesorter(); }) 排序鈕 WebDesign jquery 11

209 進階應用預設排序 : 設定 sortlist 參數 sortlist:[[columnindex, sortdirection], ] columnindex: 第一個欄位為 0, 第二為 1. sortdirection: 0 為升序排列 ( 由小到大 ),1 為降序 ( 由大到小 ) $("#mytable").tablesorter({sortlist: [[0,1], [1,0]]}); 進入網頁看到第一欄位降序排列, 第二欄位升序排列 WebDesign jquery 12

$tablesorter({widgets: ['zebra']}); 範例 : ch15_02.htm ch15_02_1.$

210 奇偶數排分色 : 將 tablesorter 的參數 widgets, 指定為 zebra $("#mytable").tablesorter({widgets: ['zebra']}); 範例 : ch15_02.htm ch15_02_1.htm headers: {1: {sorter: false} }: 欄位 1 不排序 WebDesign jquery 13

211 行事曆套件 -FullCalendar FullCalendar 是一個功能強大的 jquery 行事曆套件下載與套用下載網址 : HTML 檔案同樣需要引入 jquery 與 fullcalendar 程式通常只需要引入 fullcalendar.css 與 fullcalendar.js 檔即可需要結合 Google 行事曆才需要引入 gcal.js <link href='fullcalendar/fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='fullcalendar/lib/jquery.min.js'></script> <script src='fullcalendar/lib/jquery-ui.custom.min.js'></script> <script src='fullcalendar/fullcalendar/fullcalendar.min.js'></script> WebDesign jquery 14

212 接下來需要建立用來放置行事曆的 div 元件 : <div id='calendar'></div> 最後將 fullcalendar 套用在 div 元件 $(function() { $('#calendar').fullcalendar(); }); 範例 :ch15_03_1.htm WebDesign jquery 15

213 進階應用 :fullcalendar 常用參數相關參數說明 editable 行程是否可編輯, 預設值 :true draggable 行程是否可拖曳, 預設值 :true weekends 是否顯示假日, 值為 True/flase, 預設值 :true defaultview 預設顯示的模式, 值有 month( 月 ) basicweek( 周 ) basicday( 日 ) agendaweek( 周 ) agendaday( 日 ) 預設值 :month height 行事曆高度 header 設定標題樣式 buttontext 設定按鈕文字 aspectratio 設定行事曆高度比率 ( 比率越小, 高度越高 ) weekmode 周顯示模式, 值有 fixed( 固定六周 ) liquid( 實際周數 ) variable( 整體以實際周數統一高度 ) titleformat 標題格式,timeFormat: 'H(:mm)' monthnames 月份名, 預設為英文, 可改成中文, 例如 : monthnames: [' 一月 ',' 二月 ',' 三月 ',' 四月 ',' 五月 ',' 六月 ',' 七月 ',' 八月 ',' 九月 ',' 十月 ',' 十一月 ',' 十二月 '] WebDesign jquery 16

214 相關參數說明 monthnamesshort 短月份名, 預設為英文, 可改成中文, 例如 : monthnamesshort: ['1 月 ','2 月 ','3 月 ','4 月 ','5 月 ','6 月 ','7 月 ','8 月 ','9 月 ','10 月 ','11 月 ','12 月 '], daynames 日期名, 預設為英文, 可改為中文, 例如 : daynames: [' 星期日 ',' 星期一 ',' 星期二 ',' 星期三 ',' 星期四 ',' 星期五 ',' 星期六 '] daynamesshort 短日期名, 預設為英文, 可改為中文, 例如 : daynamesshort:[' 周日 ', ' 周一 ', ' 周二 ', ' 周三 ',' 周四 ', ' 周五 ', ' 周六 '] slotminutes 時間間隔, 預設為 30 alldaytext 整日顯示名稱 mintime 開始時間, 預設值為 0, 例如 : 日從 5 點開始顯示, 值可輸入 5, 如果從 5:30 開始可輸入 5:30 或 5:30am maxtime 結束時間, 預設值為 24, 例如 : 輸入 22 表示時間只顯示到晚上 10 點, 也可以輸入 '22:30' '10:30pm' 範例 : ch15_03.htm ch15_03_2.htm ( 如果出現亂碼 ) WebDesign jquery 17

215 指定資料來源 : 想要將行程顯示在行事曆上, 必須使用 fullcalendar 的 event 物件指定資料來源例如 : events: [ { title: ' 研討會 ', start: ' ' }, { title: ' 旅遊 ', start: ' :30:00', end: ' :30:00', allday : false }] WebDesign jquery 18

216 常用的 event 物件屬性屬性 allday start end color bordercolor backgroundcolor textcolor title url editable 說明是否為整日事件, 值為 true/false 事件的開始日期時間事件的結束日期時間背景和邊框顏色邊框顏色事件的背景顏色事件的文字顏色事件顯示的標題使用者按下事件時要開啟的 url 是否可拖曳範例 : ch15_04.htm ch15_04_1.htm 時間格式參考 (titleformat) WebDesign jquery 19

217 start 與 end 參數必須指定日期時間, 也可以用 new Date( ) 不加參數取得目前的日期時間 var date=new Date( 年, 月, 日, 時, 分, 秒, 毫秒 ) 取得個別日期與時間資訊 : 方法說明 getyear() 舊法, 取得兩位數年份, 取得的年減 1900 getfullyear() 新法, 取得四位數的年份 getmonth() 取得月份, 值 0~11, 代表 1~12 月 getdate() 取得一個月的一天 getday() 取得一個星期的一天, 值 0~6, 代表星期日 ~ 六 gethours() 取得鐘頭, 值 0~23 getminutes() 取得分鐘, 值 0~59 getseconds() 取得秒數, 值 0~59 gettime() 取得時間, 單位 : 微秒 WebDesign jquery 20

218 取得三天前的日期兩天後的日期當月 10 日的日期, 方法如下 : start: new Date(y, m, d-3, 16, 0) start: new Date(y, m, d+2, 16, 0) start: new Date(y, m, 10) var date = new Date(); var d = date.getdate(); var m = date.getmonth(); var y=date.getfullyear(); WebDesign jquery 21

219 16. 開發跨平台行動裝置網頁 jquery Mobile

220 jquery Mobile 基礎 jquery Mobile: 建立於 jquery 與 jquery UI(user interface, 使用者介面 ) 的基礎, 提供行動裝置跨平台的使用者介面函式庫所設計出的網頁, 能夠讓大多數行動裝置的瀏覽器支援 jquery Mobile 優點 : 跨平台容易學習提供多種函式庫多樣的佈景主題及 ThemeRoller 工具 jquery Mobile 作業流程新增 HTML 文件宣告 HTML5 document 載入 jquery mobile css jquery 與 jquery mobile 程式庫使用 jquery mobile 所定義的 HTML 標準, 撰寫網頁架構及內容 WebDesign jquery Mobile 2

221 行動裝置模擬器 - Mobilizer 下載網址 : WebDesign jquery Mobile 3

行動裝置模擬器 - Opera Mobile Emulator 下載網址 : http://www.

222 行動裝置模擬器 - Opera Mobile Emulator 下載網址 : WebDesign jquery Mobile 4

223 第一個 jquerymobile 網頁開發 jquery Mobile 網頁, 也是必須引用 JavaScript 函式庫 (.js) CSS 樣式表 (.css) 及搭配 jquery 函式庫檔案引用 jquerymobile 方式有兩種, 一種是到 jquery Mobile 官網直接下載引用, 另一種是使用 CDN(Content Delivery Network) 來載入程式庫 CDN 方式引用, 網址 : 官網有提供引用語法, 將其複製到 HTML 文件的 <head> 標記區塊裡就可以了 WebDesign jquery Mobile 5

224 <head> <title>jquery Mobile 建立的第一個網頁 </title>  <link rel="stylesheet" href=" min.css" /> <script src=" <script src=" min.js"></script> </head> 接下來就可以在 <body> 標記區內撰寫程式碼 jquery Mobile 的網頁是由 header content 與 footer 三個區域組成利用 <div> 標記加上 data-role 屬性用來定義行動裝置的頁面架構 WebDesign jquery Mobile 6

225 <div data-role="page">  <div data-role="header"> 標題 (header) </div> <div data-role="content"> 網頁內容 (content) </div> <div data-role="footer"> 頁尾 (footer) </div> </div> WebDesign jquery Mobile 7

226 範例 : ch16_01.htm 每一頁 data-role="page" 都有 id 屬性, 使用 <a> 超連結, 即可連結到對應的 page <a href="#second"> 按我到第二頁 </a> WebDesign jquery Mobile 8

227 使用 viewport 這個 meta 標記, 可以調整頁面畫面與字體的比例, 以免行動裝置因解析度不同影響字體大小語法與參數 : <meta name="viewport" content="width=device-width, initial-scale=1"> width: 控制寬度, 可以指定的一個寬度數值或輸入 devicewidth 表示寬度隨著設備寬度自動調整 width:[ 數字 ] 或 device-width height: 控制高度, 或輸入 device-height initial-scale: 初始縮放比例, 最小 0.25, 最大 5 minimum-scale: 允許使用者縮放的最小比例, 最小 0.25, 最大 5 maximum-scale: 允許使用者縮放的最大比例, 最小 0.25, 最大 5 user-scalable: 是否允許使用者手動縮放, 可以輸入 1 或 0, 也可以輸入 yes 或 no WebDesign jquery Mobile 9

228 jquery Mobile 的 UI 元件認識 UI 元件文字方塊 (text input) <input type= "text" name="uname" id="uid" value="hi~" /> 範圍滑動欄位 (range slider) <input type="range" name="rangebar" id="rangeid" value= "41" min="0" max="100" data-highlight="true" /> WebDesign jquery Mobile 10

229 單選 (Radio button) <fieldset data-role="controlgroup"> <legend> 最喜歡的水果 :</legend> <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> 蘋果 </label> <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> 香蕉 </label> <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> 檸檬 </label> </fieldset> <fieldset> 標記是用來建立群組 WebDesign jquery Mobile 11

230 核取方塊 (Check box) /* 第一種寫法 */ <label><input type="checkbox" name="checkbox-0" checked /> 我同意 </label> /* 第二種寫法 */ <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1"> 我同意 </label> WebDesign jquery Mobile 12

231 選擇清單 (Select menu) <label for="select-choice-0" class="select"> 每天上網時數 :</label> <select name="select-choice-0" id="select-choice-1" datamini="true" > <option value="standard"> 少於 1 小時 </option> <option value="standard">1 小時 </option> <option value="rush">2 小時 </option> <option value="express">3 小時 </option> <option value="overnight">3 小時以上 </option> </select> data-mini="true" 屬性可以讓字體小一號範例 : ch16_02_1.htm WebDesign jquery Mobile 13

232 按鈕 (button) 連結按鈕 (link button) <a href="#second" data-role="button"> 第二頁 </a> 表單按鈕 (form button): 不需使用 data-role="button" <input type="button" value="button" /> <input type="submit" value="submit Button" /> <input type="reset" value="reset Button" /> WebDesign jquery Mobile 14

233 data-icon 圖示按鈕也可以用 data-icon 屬性再加入小圖示 <a href="#" data-role="button" data-icon="delete"> 刪除 </a> data-icon 圖示樣式 WebDesign jquery Mobile 15

234 data-icon 小圖示預設顯示在按鈕左邊, 用 data-iconpos 可指定上 (top) 下 (bottom) 右 (right) 不出現文字 (notext) <a href="#" data-role="button" data-icon="arrow-u" dataiconpos="top"> 向上箭頭 </a> <a href="#" data-role="button" data-icon="arrow-d" dataiconpos="bottom"> 向下箭頭 </a> <a href="#" data-role="button" data-icon="arrow-r" dataiconpos="right"> 向右箭頭 </a> <a href="#" data-role="button" data-icon="info" dataiconpos="notext"> 資訊 </a> WebDesign jquery Mobile 16

按鈕寬度預設為螢幕寬度, 可以用 data-inline=true 製作緊實按鈕 <a href="#" data-role="button" data-icon="arrow-u" dataiconpos="top" data-inline="true"> 向上箭頭 </a> <a href="#" data-role="button" data-icon="arrow-d"

235 按鈕寬度預設為螢幕寬度, 可以用 data-inline=true 製作緊實按鈕 <a href="#" data-role="button" data-icon="arrow-u" dataiconpos="top" data-inline="true"> 向上箭頭 </a> <a href="#" data-role="button" data-icon="arrow-d" dataiconpos="bottom" data-inline="true"> 向下箭頭 </a> <a href="#" data-role="button" data-icon="arrow-r" dataiconpos="right" data-inline="true"> 向右箭頭 </a> 範例 : ch16_02_2.htm ch16_02.htm WebDesign jquery Mobile 17

236 群組化按鈕 (Grouped buttons) 當我們想把按鈕排在一起, 例如 : 導覽列一整排的按鈕, 可以先用 data-role= "controlgroup" 屬性定義為群組, 再將按鈕放在 <div> 裡 <div data-role="controlgroup"> <a href="news.htm" data-role="button"> 新聞 </a> <a href="sport.htm" data-role="button"> 運動 </a> <a href="movie.htm" data-role="button"> 電影 </a> </div> WebDesign jquery Mobile 18

237 讓按鈕水平顯示 <div data-role="controlgroup" data-type="horizontal"> 範例 : ch16_02_3.htm WebDesign jquery Mobile 19

238 列表 (List View) List View 是行動裝置最常見的元件, 因為螢幕小, 所以資料適合以列表來顯示無序清單用 <ul>, 有序清單用 <ol> <ul data-role="listview"> <li><a href="chinese.htm"> 國文 </a></li> <li><a href="math.htm"> 數學 </a></li> <li><a href="english.htm"> 英文 </a></li> </ul> WebDesign jquery Mobile 20

239 設 data-inset= "true", 可以使 listview 與螢幕同寬, 並加上圓角必須加入 <div> 區塊標記, 不然不 work <div data-role="content" id="content"> <ol data-role="listview" data-inset="true"> <li><a href="chinese.htm"> 國文 </a></li> <li><a href="math.htm"> 數學 </a></li> <li><a href="english.htm"> 英文 </a></li> </ol> </div> 範例 : ch16_02_4.htm WebDesign jquery Mobile 21

240 加入圖片及說明 <li> <a href="chinese.htm"> <img src="images/chinese.jpg" /> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> </a> </li> WebDesign jquery Mobile 22

241 列表分割按鈕 (Split button list):<li> 中加入兩組 <a> <li> <a href="chinese.htm"> <img src="images/chinese.jpg" /> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> </a> <a href="#taking" data-icon="gear"></a> </li> WebDesign jquery Mobile 23

242 計數泡泡 (Count bubble) <li> <a href="chinese.htm"> <img src="images/chinese.jpg" /> <h3> 國文 </h3> <p> 時間 : 星期一人數 :15 人 </p> <span class="ui-li-count">12</span> </a> <a href="#taking" data-icon="gear"></a> </li> 範例 : ch16_02_5.htm WebDesign jquery Mobile 24

網頁導向與佈景主題 jquery Mobile 網頁導向 jquery Mobile 初始頁面透過 http 載入, 之後的頁面透過 Ajax 載入並加到 DOM 如果連結的頁面是單一網頁多重頁面, 或是非同一網域的網頁, 就會發生 ajax 載入失敗, 就會顯示錯誤訊息這時候我們可以停用 Ajax,

243 網頁導向與佈景主題 jquery Mobile 網頁導向 jquery Mobile 初始頁面透過 http 載入, 之後的頁面透過 Ajax 載入並加到 DOM 如果連結的頁面是單一網頁多重頁面, 或是非同一網域的網頁, 就會發生 ajax 載入失敗, 就會顯示錯誤訊息這時候我們可以停用 Ajax, 改用傳統的 http 來載入網頁可以在連結元素中加入下面其一屬性來停用 : rel="external" 或 data-ajax="false" <a href="page2.htm" data-icon="gear" rel="external"> WebDesign jquery Mobile 25

244 回上頁 <a data-rel="back"> 回上頁 </a> 範例 :ch16_03.htm 以彈出新視窗連結網頁 <a href="#second" data-rel="dialog"> 第二頁 </a> 範例 : ch16_04.htm ch16_04_1.htm WebDesign jquery Mobile 26

245 ThemeRoller 套用佈景主題套用網址 : 使用說明 : 套用的主題樣式 : data-theme 屬性例如套用主題 a: data-theme= "a",a 要小寫範例 : ch16_05.htm ch16_05_1.htm (data-theme= "c") WebDesign jquery Mobile 27

246 ThemeRoller 編輯器用法選擇 A 為要調整的主題點選顏色時會出現色盤所選顏色會直接套用 WebDesign jquery Mobile 28

247 也可將主題面板上方的色塊直接拖曳到元件上 WebDesign jquery Mobile 29

248 17. Google Maps API

249 Google Maps API Google 開放了許多 API(Application Programming Interface, 應用程式介面 ), 藉由這些 API 可以將 Google 服務放入使用者的網頁中, 如 :Gmail Google 雲端硬碟 Google Maps Google Maps API 可以應用在依地址顯示地圖, 或取得兩地間的距離等等使用 Google Maps 三個步驟 : 載入 Google Maps API 指定地圖 DOM 元素 ( 使用 div 標記 ) 設定地圖屬性, 建立地圖範例 :ch17_01.htm WebDesign Google Maps API 2

250 載入 Google Maps API: 有兩種方式透過 HTTPS 載入 API: 資料可以受到 HTTPS(HTTP over SSL) 通訊協定保護安全, 但可能有延遲較慢的現象 <script src=" type="text/javascript"></script> 以非同步方式載入 JavaScript API:( 範例採用 ) window.onload = loadscript; function loadscript() { var script = document.createelement("script"); script.type = "text/javascript"; script.src=" &callback=initialize"; document.body.appendchild(script); } WebDesign Google Maps API 3

251 指定地圖 DOM 元素 ( 使用 div 標記 ) <div id="map_canvas" style="width: 100%; height: 100%"></div> 設定地圖屬性, 建立地圖 google.maps.latlng 是 Google Maps API 專用的座標物件, 以緯度 (Latitude) 與經度 (Longitude) 兩參數來定出位置語法 :var mylatlng = new google.maps.latlng(latitude, Longitude); var mylatlng = new google.maps.latlng( , ); Google Map 初始化 : 語法 : var map = new google.maps.map(div 元件, Options); Options 包含三個必填參數 : 縮放比例 (zoom) 中心點 (center) 地圖類型 (maptypeid) zoom: 設定地圖的縮放比例, 設定值為 0~20,0 代表縮到最小, 數值越大比例也越放大 WebDesign Google Maps API 4

252 center: 設定地圖顯示的中心點, 範例中是指定 LatLng 物件所取得的座標 maptypeid: 設定地圖類型, 有下列幾種 : MapTypeId.ROADMAP: 顯示一般地圖 MapTypeId.SATELLITE: 顯示衛星圖 MapTypeId.HYBRID: 顯示地圖與衛星混合 MapTypeId.TERRAIN: 顯示地形圖 var myoptions = { zoom: 18, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map (document.getelementbyid ("map_canvas"), myoptions); WebDesign Google Maps API 5

253 地圖控制項 : 可以控制縮放地圖使用街景等服務 scalecontrol, 預設為不顯示外, 其他預設都會顯示出來值設定 false 為不顯示,true 為顯示 maptypecontrol streetviewcontrol scalecontrol WebDesign Google Maps API 6

254 var myoptions = { zoom: 18, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: false, scalecontrol: true, streetviewcontrol: false } var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); } 範例 : ch17_01_1.htm WebDesign Google Maps API 7

255 依地址顯示地圖地址定位是利用 google.maps.geocoder 物件來存取 Google Maps API 的地理編碼服務, 再利用 geocoder.geocode() 將地址轉化為經緯度座標語法 : geocoder.geocode(geocoderequest, GeocoderResults) GeocodeRequest 物件參數 : Address: 地址轉換成地圖位置, 寫法 {"address" : address} LatLng: 地圖位置轉換成地址 ( 反向地理編碼 ) GeocoderResults: 使用回傳函數來傳送兩個參數 results( 結果 ) 和 status( 狀態 ) geocoder.geocode({"address": address}, function(results, status){ }) results 傳回為陣列, 值不只一個, 最相符的會排在第一個, 因此取第一個值就可以 results[0].geometry.location WebDesign Google Maps API 8

256 當編碼成功 status 會傳回 google.maps.geocoderstatus.ok status 的傳回值有下列幾種狀態 : google.maps.geocoderstatus.ok: 編碼成功 google.maps.geocoderstatus.zero_results: 編碼成功, 但未傳回結果 google.maps.geocoderstatus.over_query_limit: 已超過配額, 免費的一天只能查 2500 個地址 google.maps.geocoderstatus.request_denied: 編碼要求被拒絕 google.maps.geocoderstatus.invalid_request: 資料無效 WebDesign Google Maps API 9

257 geocoder = new google.maps.geocoder(); if (geocoder) { geocoder.geocode( { 'address': address},function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); } else { alert(" 編碼失敗, 原因 :" + status); } }); } 範例 :ch17_02.htm ( 可輸入地址做查詢 ) WebDesign Google Maps API 10

258 圖示標記 : 加入類似圖釘的功能圖示標記是 google.maps.marker 物件, 可以疊加圖示在地圖上 Marker 有三個參數 position ( 必要 ): 用來指定一個 LatLng 物件的識別標記位置 map ( 選用 ): 用來指定要將標記放到哪一個 Map 物件若不指定, 還是可以建立標記, 但是不會顯示在地圖上 title ( 選用 ): 用來指定提示文字 var marker = new google.maps.marker({ position: mylatlng, map:map, title:" 我在這!!" }); WebDesign Google Maps API 11

259 也可以用 setmap() 方法來指定標記加到哪一個圖層, 或移除標記 marker.setmap(map); // 添加圖示標記 marker.setmap(null); // 移除圖示標記範例 : ch17_03.htm WebDesign Google Maps API 12

260 定位目前所在地 if(navigator.geolocation) { // HTML5 的 navigator.geolocation 判斷瀏覽器是否支援 navigator.geolocation.getcurrentposition(function(position) { // 取得座標位置的方法 latitude=position.coords.latitude; longitude=position.coords.longitude; //position 擷取經緯度座標 }, function( ) { handlenogeolocation(browsersupportflag); // 處理瀏覽器不支援定位的函數 }); WebDesign Google Maps API 13

261 HTML5 提供 navigator.geolocation 函數, 會回傳一個唯讀的 geolocation 物件, 透過這個物件可以存取設備的位置訊息同時也允許網站或應用程式根據使用者的位置提供客製化的結果 navigator.geolocation.getcurrentposition(successfulfunct ion, errorfunction) 會嘗試取得定位點的經緯度座標 navigator.geolocation.getcurrentposition(successfulfunct ion(position), errorfunction()); position.coords.latitude: 緯度座標 position.coords.longitude: 經度座標範例 :ch17_03_1.htm WebDesign Google Maps API 14

262 18. 行動裝置版網頁實作

263 網站架構範例 : index.htm WebDesign 行動裝置版網頁實作 2

展开

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