Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

網頁教學課堂投影片

網頁教學課堂投影片

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

網頁教學課堂投影片

  1. 1. 網頁維護教學網頁維護教學學課堂教材學課堂教材 講解:王弘奇講解:王弘奇 104.03.18
  2. 2. 本次研習內容大網本次研習內容大網  HTML、CSS 混亂的歷史源由,各方規格百家爭嗚  介紹網頁製作方式,及其優缺點  介紹本校教學網頁的使用方式  軟體使用介紹  8種 HTML 語法 8 分鐘快速上手 怎樣利用公版 並配合幾個語法製作網頁(參考實做 怎樣利用公版,並配合幾個語法製作網頁(參考實做  怎樣利用美工軟體切版,製作商業等級美工網頁(參  怎樣利用「雲端 不花錢製作分享網頁(含打造個 怎樣利用「雲端」,不花錢製作分享網頁(含打造個  基本綀習 與 Q&A 做範例 )做範例一) 參考實做範例二) 個人雲端相片牆範例)個人雲端相片牆範例)
  3. 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. 4. 介紹網頁製作方式 及其優介紹網頁製作方式,及其優  HTML (列舉網站範例:台中家商商業經營科、 商幼兒保育科 台中家商國際貿易科 目前搜尋的商幼兒保育科、台中家商國際貿易科,目前搜尋的 HTML 網頁了)  優點:符合所有的瀏覽器,上手容易,圖形化編輯  缺點:無法層疊,語法樣式少,背景以單調色為佳 …………………………………………………… vs ……………………  CSS (列舉網站範例:其它…任意網站)  優點:可以層疊,語法樣式多,背景可以複雜多樣  缺點:僅符合W3C新版瀏覽器,上手較不易,不易 優缺點優缺點 台中家商會計事務科、台中家 的結果大學網頁已經都沒有純的結果大學網頁已經都沒有純 輯容易(如FrontPage)。 佳。 ……………………………………………. 樣化。 易圖形化編輯(如Dreamweaver)。
  5. 5. 哆啦A夢來教你CSS樣式表哆啦A夢來教你CSS樣式表
  6. 6. 本校教學網頁的使用方式本校教學網頁的使用方式  利用本校網站進行連結,「首頁」「網頁維護教  利用上方引導列進行分頁切換  「軟體安裝」「HTML語法」「CSS語法」 「實做範例一」「實做範例二」「Google雲 實做範例 」 實做範例二」 Google雲 教學」 「CSS相容性」「GIMP範例」 雲端」雲端」
  7. 7. 軟體使用介紹軟體使用介紹  本網頁使用的工具,不採圖形化介面方式,原因如  1、目前網頁設計,是市面上,最快速是以模組化設 的方式來嵌入,故文字介面也有它很大的優勢。  2、圖形介面無法做到符合各種瀏覽器相容性。 2、圖形介面無法做到符合各種瀏覽器相容性。  3、圖形介面一但格式錯誤,難以察覺及修改。  相關軟體工具: 「http://www.wufai.edu.tw/information_technology_ 如下: 設計為主,但模組化是以文字 _center/index.html#top_1」
  8. 8. 以下正式進入以下正式進入入語法教學入語法教學 HTML 的 6種語法教學一頁搞定HTML 的 6種語法教學 頁搞定
  9. 9. 6種 HTML 語法 8 分鐘快速6種 HTML 語法 8 分鐘快速上手上手
  10. 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. 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. 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. 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 />

×