HTML的基本架构和语法.ppt

網頁語言  教科書 ： Dreamweaver CS3 網頁設計應用集,? 博 碩文化, 鄭苑鳳著? 課程要求 1. 考試 　70% 期中考　35% 期末考　35% 2. 課堂參與　15% 3. 作業或報告 　15% 網頁設計教學進度 HTML網頁設計 (三週) Dreamweaver網頁設計(靜態) (四週) 期中考 Dreamweaver網頁設計(動態) (三週) 4. VBScript, JavaScript, ASP設計 (三週 ) 5. Flash動畫設計 (三週 ) 期末考 網頁相關技術介紹 網際網路應用服務(Web Service)因為資訊科技的成熟 ，無數伺服器網站與客戶端瀏覽器建構而成的全球資訊網(WWW)，並且產生了許多新興的網頁相關技術。因此本節中，我們將先為各位介紹流行的網頁相關技術 。 網頁相關技術 網頁類型區分 如果依照網頁與使用者之間的互動性來區分，我們可將網頁技術劃分成靜態網頁與動態網頁兩種： 靜態網頁 靜態網頁的執行結果 動態網頁 動態網頁的執行結果 網站建置流程簡介 網站的流程大致如下圖所示 網頁動畫設計軟體－Flash Flash是一套由Macromedia所推出的動畫設計軟體，因為是採用向量圖案來產生動畫效果，所以具有檔案容量小的優點，非常適用於網路上的傳輸，只要各位的瀏覽器有安裝Flash Player的話就能直接觀賞Flash的動畫影片。 更重要的關鍵在於軟體中的ActionScript程式語言，設計者可以利用程式替Flash影片加入與使用者的互動式效果。 Flash動畫設計軟體 專業型網頁設計軟體－Dreamweaver Dreamweaver是由Macromedia公司發展的一套網頁設計與編輯器軟體。從Dreamweaver推出到現在，就一直是專業網站設計者心目中最理想的開發工具，而網頁三劍客(Dreamweaver、Flash、Fireworks)的名號更是在軟體業界赫赫有名。 Dreamweaver採「所見即所得」的設計方式，讓有志於從事網頁設計的人能輕易擺脫HTML等原始碼的限制，以最少的時間就能做出具有專業水準的網站。 Dreamweaver的操作環境 1. 網頁語言 HTML簡介  第一課: HTML簡介 第二課: HTML 語法細述 第一課 認識 HTML HTML簡介 HTML 的基本架構和語法 快速建立 HTML 網頁 美化您的網頁 在網頁中加入超連結 第二課: HTML 語法細述 文字格式 (Text Formatting) 插圖 (Images) 排版 (Page Layout) 連結 (Link) 目錄 (Lists) 表格 (Tables) 架構 (Frames) 表單 (Forms) 多媒體 (Multimedia) 程式語言 (Scripts) 第一課 認識 HTML HTML簡介 HTML 的基本架構和語法 快速建立 HTML 網頁 美化您的網頁 在網頁中加入超連結 HTML簡介 何謂 HTML HTML 文件的組成元素 編輯 HTML 的工具 何謂伺服器？(補充材料) 伺服器一詞係譯自英文的 Server, 原意代表服侍者、提供服務的人, 例如：旅館、餐廳裏的服務生。若套用到電腦環境, 通常是指提供服務的電腦, 例如：網路上有 A、B、C 三部電腦, 其中 C 電腦提供自己的印表機與硬碟給 A、B 兩部電腦使用, 於是 C 電腦便扮演了印表機伺服器與檔案伺服器兩種角色；至於 A、B 這兩部享受服務的電腦,則稱為用戶端 (Client)。 主從式網路 主從式網路例證 - internet 何謂 HTML 一般我們在瀏覽器中所看到的網頁, 不但具有圖片、文字、還可以顯示動畫、聲音…等多媒體效果；然而, 這些物件究竟是如何正確地顯示在瀏覽器中呢？這就得靠 HTML 的幫忙了。其實您所看到的網頁是由一些文字及符號所組成的 HTML 文件： 何謂 HTML 何謂 HTML 在 IE 中只要執行『檢視/原始檔』命令, 就可以看到網頁的廬山真面目： 何謂 HTML 這些網頁的原始碼就是 HTML (HyperText Markup Language), 中文翻譯為『超文字標記語言』。它可說是網頁的根本, 主要用來告訴瀏覽器應該如何呈現網頁的內容, 例如：圖片擺在何處、文字顯示何種字型、顏色、網頁背景的顏色、框架的切割…等等。只要經過瀏覽器的解讀, 密密麻麻的 HTML 碼便轉變為圖文並茂的網頁。 HTML 文件的組成元