网页制作与网站建设.ppt

淡江大學資訊工程學系 第20章 網頁製作與網站建置 網頁製作語言 網頁製作語言 資訊共享的目的 WWW使用了超文件傳輸協定(Hypertext Transfer Protocol，簡稱HTTP) 超文件(Hypertext)即是在WWW上傳送的主要文件 根據超文件描述語言(Hyper Text Markup Language，或簡稱HTML) Web Pages開發技術用來使網頁的功能更加的強大與完整 JavaScript、Jscript、VBScript、JSP、ASP與PHP 網頁製作語言 瀏覽Web Pages的流程 網頁製作語言 網頁製作語言 標記語言 Hyper Text Markup Language (HTML) Dynamic HTML (DHTML) eXtensible Markup Language (XML) 網頁製作語言-HTML HTML(Hyper Text Markup Language) 在Web Pages設計中，所使用的最基本也是相當易學易懂的標記語言 HTML版本是4.01 附檔名為htm或是html 描述了這個Web Page資料的呈現方式 包含文字的顏色與大小以及標示資料的種類 網頁製作語言-HTML 描述方式 使用標籤(Tag)將欲進行格式化的資料包含起來 以刮號『』與『』將包含Tag名稱包含起來 網頁製作語言-HTML HTML文件的架構 不同的Tag互相包含而成 最外層的Tag為『HTML』 部分使用Tag『HEAD』與『BODY』包含起來 兩者各有適用的標記 如『TITLE』只可出現於『HEAD』部分 網頁製作語言-HTML HTML 文件的基本組成格式 網頁製作語言-HTML 超連結(Hyperlink) 使得HTML文件可以的WWW中互相連結 以文字、圖形、影像地圖的方法呈現 網頁製作語言-HTML 網頁製作語言-HTML 網頁製作語言-DHTML Web Site開發人員在開發Web Pages時，常常需要考慮到Web Pages互動性與瀏覽速度 互動效果愈多，就重複地在瀏覽器和Web Server之間傳送資料來更新Web Pages的內容 瀏覽速度因此較慢 互動效果愈少，瀏覽速度雖可因此提升 貧乏的互動會使得瀏覽者覺得無趣 網頁製作語言-DHTML DHTML可以適時的解決這個問題 動態效果的執行由Web Server轉換到每個使用者的瀏覽器上 一方面可以顧及Web Pages的聲光效果，一方面又兼顧瀏覽的速度 網頁製作語言-DHTML Dynamic HTML (DHTML) 『動態網頁』 是一些現有Web Pages技術與標準的整合 不是新技術或標準 結合 HTML 4.0 連(串)接樣式表(Cascading Style Sheet，簡稱CSS) 描述語言(Script Language) Java Script及VBScript 網頁製作語言-DHTML DHTML提供了下列HTML無法做到的功能 元件存取 樣式與樣式表：使描述語言存取元件的能力更完備 動態樣式：使Web Pages的元件產生動態效果，而不必重新載入Web Pages 多媒體控制：包含有3D動畫、影像圖片之間的轉換與Web Pages元件過濾器的使用 由於Script Language的特殊性，故將在之後介紹 網頁製作語言-DHTML Cascading Style Sheet (CSS) 編輯Web Pages時，會希望我們的Web Pages有一體的特色與功能 傳統的HTML可能會有遭遇以下的問題 設定：需要一一針對每個Web Pages元件的形狀、大小與顏色進行設定，這是相當繁瑣的工作 修改：要針對個別元件去修改每一項設定，相當沒有效率 功能不足：HTML無法提供特別的顯示效果 網頁製作語言-DHTML 淡江大學的首頁使用了CSS的功能 首頁的Scroll Bar 的顏色嗎 至於狀態列的『最佳觀賞解析度….』 使用Script Language JavaScript所製造出來的效果。 網頁製作語言-DHTML CSS有三種定義方式 Inline Style Sheet Embedding Style Sheet Linking Style Sheet 網頁製作語言-DHTML Inline Style Sheet 最簡單 相關的排版設定完全在同一個控制標籤中來設定完成 網頁製作語言-DHTML 範例-針對文字的大小(font-size)、顏色(color)、裝飾(text-decoration)與形式(font-style)進行設定 網頁製作語言-DHTML Embedding Style Sheet 在HTML的文件He