網頁製作入門 電算中心 – 蔡京甫.

Presentation on theme: "網頁製作入門 電算中心 – 蔡京甫."— Presentation transcript:

1 網頁製作入門 電算中心 – 蔡京甫

2 課程大綱 前言 網頁文件的重要概念 開始製作網頁 Q&A

3 什麼是網頁

4 什麼是網頁 網頁是由HTML呈現出來的文件

5 什麼是網頁 簡而言之 一種共通格式的文件，可以放到網路上， 讓大家利用瀏覽器去觀看內容。

6 網頁文件的重要概念 http://www.hit.edu.tw/student.jsp 網址
網路上一個網站或文件的位址(地址) 通訊協定 主機位址 (IP或domain name) 文件路徑

7 網頁文件的重要概念 超連結 - 以滑鼠按下網頁的某區域，可以切換到另一個網頁 超連結  指向網路上的一個網址 (文件)

8 製作網頁 就像打Word文件一般 新增： 多了超連結功能 檔案管理 網頁通常不會只有一個檔案 圖片與其他文件

9 製作網頁 常用的工具軟體 Microsoft Office Frontpage 2003 Dreamweaver 記事本
Microsoft Office Word ？

10 開始編輯 其實你會操作Word，就會編輯網頁了 再搭配上 對於網頁排版的熟析 超連結功能 檔案管理

11 Frontpage環境簡介 工具列 工作 / 編輯 區 切換檢視畫面

12 製作網頁 設計 程式碼 分割 預覽 所見即所得編輯，就像Word 只顯示HTML 同時顯示編輯畫面與HTML 以IE瀏覽器預覽文件 HTML
所見即所得編輯區塊

13 製作網頁 網頁常用到的元件 文字 超連結 圖片 表格 項目符號

14 製作網頁 – 文字 就如編輯Word文字編輯與字體變化 從工具列 選取文字後， 按右鍵  字型

15 製作網頁 - 超連結 2. 1. 網址 與 路徑

16 製作網頁 - 超連結 http://www.hit.edu.tw/student.jsp 網址 (URL) 路徑 (PATH)
通訊協定 主機位址 (IP或domain name) 文件路徑 網址 (URL) 路徑 (PATH) ../score/95.html /data/meeting.html

17 製作網頁 - 超連結 路徑(path)符號： 符號 代表意義 . 本層目錄 .. 上一層目錄 / 根目錄 範例： /list/L1.html
../member/95/95-1/m1.html ../../member/95/95-1/m1.html ./95/95-1/m1.html 95/95-1/m1.html

18 製作網頁 - 超連結 網址 路徑 簡單易懂 比較複雜 網站可移植性低 網站可移植性高 非自己的網站的連結，只能用網址
只能連結自己網站裡裡的連結 建議採用 路徑 較佳

19 製作網頁 - 超連結 正確的超連結 錯誤的超連結 http://www.hit.edu.tw/teacher.jsp
../score/95.html /data/meeting.html 錯誤的超連結 file:///C:/Documents%20and%20Settings/Marty/Untitled.html file:///Z:/web/data.html Z:/秘書室/record.html

20 製作網頁 - 超連結

21 製作網頁 – 圖片

22 製作網頁 – 圖片

23 製作網頁 – 表格 編輯方式如同Word表格般 表格  插入表格 直接用下拉的

24 製作網頁 – 表格 表格內容 ? 與 儲存格內容 ?

25 製作網頁 – 表格 表格的其他用途 - 排版

26 製作網頁 – 項目符號 編輯方式與Word的一樣

27 其他觀念 複製貼上的問題？ 從Word、Excel複製到FrontPage Word、Excel另存新檔案為HTML 從IE另存網頁

28 Q&A