Recomendados
Más contenido relacionado
Similar a 網頁教學課堂投影片
Similar a 網頁教學課堂投影片 (20)
Más de lys167
網頁教學課堂投影片
- 2. 本次研習內容大網本次研習內容大網 HTML、CSS 混亂的歷史源由，各方規格百家爭嗚 介紹網頁製作方式，及其優缺點 介紹本校教學網頁的使用方式 軟體使用介紹 8種 HTML 語法 8 分鐘快速上手 怎樣利用公版 並配合幾個語法製作網頁(參考實做 怎樣利用公版，並配合幾個語法製作網頁(參考實做 怎樣利用美工軟體切版，製作商業等級美工網頁(參 怎樣利用「雲端 不花錢製作分享網頁(含打造個 怎樣利用「雲端」，不花錢製作分享網頁(含打造個 基本綀習 與 Q&A 做範例 )做範例一) 參考實做範例二) 個人雲端相片牆範例)個人雲端相片牆範例)
- 3. HTML CSS 混亂的歷史源由HTML、CSS 混亂的歷史源由 從1990年代初HTML被發明開始，樣式表就以各種形式出現了 樣式語言 讀者可以使用這些樣式語言來調節網頁的顯示方式樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式 初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該 但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很 外來定義樣式的語言越來越沒有意義了。外來定義樣式的語言越來越沒有意義了 1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos 瀏覽器，他們決定一起合作設計CSS。 當時已經有過一些樣式表語言的建議了，但CSS是第一個含有 當時已經有過 些樣式表語言的建議了 但CSS是第 個含有 檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方 其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使 的設計，混合各人的愛好。 哈坤於1994年在芝加哥的 次會議上第 次展示了CSS的建議 哈坤於1994年在芝加哥的一次會議上第一次展示了CSS的建議 個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它 斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個專案的 經完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C內組織了專門管CSS的工作群組，其負責人是 論第一版中沒有涉及到的問題，其結果是1998年5月出版的第 還未完備。 由由 了，不同的瀏覽器結合了它們各自的 式 開始樣式表是給讀者用的 最式。一開始樣式表是給讀者用的，最 該怎樣被顯示。 很多顯示功能。隨著這些功能的增加 ）當時正在設計一個叫做「Argo」的 有「層疊」的主意的。在CSS中，一個有 層疊」的主意的 在CSS中 個 方可以使用他自己更喜歡的樣式，在 使作者和讀者都可以靈活地加入自己 議 1995年他與波斯 起再次展示這議，1995年他與波斯一起再次展示這 它為此組織了一次討論會。哈坤、波 的主要技術負責人。1996年底，CSS已 是克里斯·里雷。這個工作群組開始討 第二版要求。到2007年為止，第三版
- 4. 介紹網頁製作方式 及其優介紹網頁製作方式，及其優 HTML (列舉網站範例：台中家商商業經營科、 商幼兒保育科 台中家商國際貿易科 目前搜尋的商幼兒保育科、台中家商國際貿易科，目前搜尋的 HTML 網頁了) 優點：符合所有的瀏覽器，上手容易，圖形化編輯 缺點：無法層疊，語法樣式少，背景以單調色為佳 …………………………………………………… vs …………………… CSS (列舉網站範例：其它…任意網站) 優點：可以層疊，語法樣式多，背景可以複雜多樣 缺點：僅符合W3C新版瀏覽器，上手較不易，不易 優缺點優缺點 台中家商會計事務科、台中家 的結果大學網頁已經都沒有純的結果大學網頁已經都沒有純 輯容易(如FrontPage)。 佳。 ……………………………………………. 樣化。 易圖形化編輯(如Dreamweaver)。
- 6. 本校教學網頁的使用方式本校教學網頁的使用方式 利用本校網站進行連結，「首頁」「網頁維護教 利用上方引導列進行分頁切換 「軟體安裝」「HTML語法」「CSS語法」 「實做範例一」「實做範例二」「Google雲 實做範例 」 實做範例二」 Google雲 教學」 「CSS相容性」「GIMP範例」 雲端」雲端」
- 7. 軟體使用介紹軟體使用介紹 本網頁使用的工具，不採圖形化介面方式，原因如 1、目前網頁設計，是市面上，最快速是以模組化設 的方式來嵌入，故文字介面也有它很大的優勢。 2、圖形介面無法做到符合各種瀏覽器相容性。 2、圖形介面無法做到符合各種瀏覽器相容性。 3、圖形介面一但格式錯誤，難以察覺及修改。 相關軟體工具： 「http://www.wufai.edu.tw/information_technology_ 如下： 設計為主，但模組化是以文字 _center/index.html#top_1」
- 8. 以下正式進入以下正式進入入語法教學入語法教學 HTML 的 6種語法教學一頁搞定HTML 的 6種語法教學 頁搞定
- 9. 6種 HTML 語法 8 分鐘快速6種 HTML 語法 8 分鐘快速上手上手
- 10. 怎樣利用公版 並配合幾個怎樣利用公版，並配合幾個 (參考實做範例一)( ) 進入如下的網頁 htt // f i d t /i f ti t h lhttp://www.wufai.edu.tw/information_technolo 個語法製作網頁個語法製作網頁 t / l 1 ht logy_center/example_1.html
- 11. 怎樣利用美工軟體切版 製怎樣利用美工軟體切版，製 工網頁(參考實做範例二)( ) 進入如下的網頁 htt // f i d t /i f ti t h lhttp://www.wufai.edu.tw/information_technolo 製作商業等級美製作商業等級美 t / l 2 ht logy_center/example_2.html
- 12. 怎樣利用「雲端 不花錢怎樣利用「雲端」，不花錢 (含打造個性雲端相片牆範例( 自行架設主機需要支出的費用如下： 1 伺服器(S )的主機費用(費用依照實際需求而定 通常 1、 伺服器(Server)的主機費用(費用依照實際需求而定，通常 2、 軟體費用(至少需有作業系統及防毒軟體，如使用Window 3、 防火牆(分軟體型及硬體型防火牆，依實際需求而定，通常 4、 網路租用費用(所需頻寬依實際需求而定，通常每月租用費 5、 管理人員費用(通常伺服器需要有專人或MIS人員維護及管 6、 資料庫費用(視情況，不見得一定需要)( ) 7、 其它雜項費用(如不斷電系統、發電機…等) 以上 利用 Google Drive (雲端硬碟)來實現 通通不用錢。 以上，利用 Google Drive (雲端硬碟)來實現，通通不用錢。 詳情如下方連結： http://www.wufai.edu.tw/information_technology_center/how 錢製作分享網頁錢製作分享網頁 例)) 常費用為數萬元 數百萬元不等)常費用為數萬元~數百萬元不等)。 ws平台，費用約3萬元左右)。 常費用為數千元~數十萬元不等)。 費用介於數千元~數萬元不等)。 理，以因應各種突發狀況)。 wtouse_google.html
- 13. 課後小測驗(請將空白處依結果 <!DOCTYPE html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>__________ </title> </head> <body> <h1> </h1><h1>_______________</h1> <p>___________________________</p <ol> <li>_________</li> <li>Tea</li> <li>_________</li> </ol> <ul><ul> <li>Beef</li> <li>_________</li> <li>_________</li> / l</ul> <p> To break lines<br />_______ use the br element.use the br element. </p> </body> </html> 果填入應有的文字) p> ______<br />