網頁製作入門 電算中心 – 蔡京甫
課程大綱 前言 網頁文件的重要概念 開始製作網頁 Q&A
什麼是網頁
什麼是網頁 網頁是由HTML呈現出來的文件
什麼是網頁 簡而言之 一種共通格式的文件，可以放到網路上， 讓大家利用瀏覽器去觀看內容。
網頁文件的重要概念 http://www.hit.edu.tw/student.jsp 網址 網路上一個網站或文件的位址(地址) http://www.hit.edu.tw/student.jsp 通訊協定 主機位址 (IP或domain name) 文件路徑 http://www.hit.edu.tw/images/hit.jpg
網頁文件的重要概念 超連結 - 以滑鼠按下網頁的某區域，可以切換到另一個網頁 超連結 指向網路上的一個網址 (文件)
製作網頁 就像打Word文件一般 新增： 多了超連結功能 檔案管理 網頁通常不會只有一個檔案 圖片與其他文件
製作網頁 常用的工具軟體 Microsoft Office Frontpage 2003 Dreamweaver 記事本 Microsoft Office Word ？
開始編輯 其實你會操作Word，就會編輯網頁了 再搭配上 對於網頁排版的熟析 超連結功能 檔案管理
Frontpage環境簡介 工具列 工作 / 編輯 區 切換檢視畫面
製作網頁 設計 程式碼 分割 預覽 所見即所得編輯，就像Word 只顯示HTML 同時顯示編輯畫面與HTML 以IE瀏覽器預覽文件 HTML 所見即所得編輯區塊
製作網頁 網頁常用到的元件 文字 超連結 圖片 表格 項目符號
製作網頁 – 文字 就如編輯Word文字編輯與字體變化 從工具列 選取文字後， 按右鍵 字型
製作網頁 - 超連結 2. 1. 網址 與 路徑
製作網頁 - 超連結 http://www.hit.edu.tw/student.jsp 網址 (URL) 路徑 (PATH) 通訊協定 主機位址 (IP或domain name) 文件路徑 網址 (URL) http://www.hit.edu.tw/map/map2.html http://www.edu.tw/list/list3_2.asp 路徑 (PATH) ../score/95.html /data/meeting.html
製作網頁 - 超連結 路徑(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
製作網頁 - 超連結 網址 路徑 簡單易懂 比較複雜 網站可移植性低 網站可移植性高 非自己的網站的連結，只能用網址 只能連結自己網站裡裡的連結 建議採用 路徑 較佳
製作網頁 - 超連結 正確的超連結 錯誤的超連結 http://www.hit.edu.tw/teacher.jsp http://www.hit.edu.tw/exam ../score/95.html /data/meeting.html 錯誤的超連結 file:///C:/Documents%20and%20Settings/Marty/Untitled.html file:///Z:/web/data.html Z:/秘書室/record.html
製作網頁 - 超連結
製作網頁 – 圖片
製作網頁 – 圖片
製作網頁 – 表格 編輯方式如同Word表格般 表格 插入表格 直接用下拉的
製作網頁 – 表格 表格內容 ? 與 儲存格內容 ?
製作網頁 – 表格 表格的其他用途 - 排版
製作網頁 – 項目符號 編輯方式與Word的一樣
其他觀念 複製貼上的問題？ 從Word、Excel複製到FrontPage Word、Excel另存新檔案為HTML 從IE另存網頁
Q&A