Download presentation
Presentation is loading. Please wait.
1
FrontPage 2003 網頁設計初階 國立臺灣師範大學 資訊中心(ITC) 陳 明 芳 先生
陳 明 芳 先生 VOIP: 8628 外線: 分機: 277 中華民國九十八年七月 2018/9/17 1
2
課程目標 WWW 網站架構概念 網頁設計工具簡介 網頁的組成和元件 網站腳本和網頁設計 Frontpage 2003 範本建立網站基本操作
各種超連結和網頁元件設計 Frontpage 2003 的一些特殊功能介紹 網站發佈和管理 2018/9/17 2
3
WWW 網站架構概念 使用者端 (Client) 網路 資料庫 Internet/ LAN Access SQL Server Oracle
Web 伺服器 (放網站的位置) 網路 資料庫 Internet/ LAN Access SQL Server Oracle Sybase MySQL DB2 瀏覽器(Browser) (IE、FireFox、Safari) TCP/IP 網路溝通的協定 IIS Apache Tomcat … 2018/9/17 3
4
網頁和影像設計工具 網頁設計工具 影像/繪圖處理 動畫處理 FrontPage 2003/2007 (全校授權)
Namo WebEditor 2006(全校授權) 2008 (未採購) Dreamweaver (電腦教室授權) 影像/繪圖處理 PhotoImpact (全校授權) 、Photoshop、 CorelDraw 、Illustrator 動畫處理 Flash(電腦教室授權) Microsoft GIF Animator (免費) Ulead GIF Animator (包含在 Photoimpact 授權中) 2018/9/17 4
5
網頁 vs 網站 vs 網址 vs 首頁 網頁：依照HTML(Hypertext Mark-up Language)標準編輯的文字檔，可在瀏覽器(IE、Firefox…)上正確顯示的檔案。 網站：許多網頁的集合，依照網站的設計，用超連結把網頁之間的關係，串聯起來，成為一個完整的網站，提供資訊給Internet上的使用者。 網址: 讓使用者在瀏覽器網址列輸入的網站識別位址，類似我們住家的住址 首頁: 進到一個網站第一個呈現的網頁，常見首頁名 index.htm或index.html，可以自定首頁(管理者在Web伺服器上設定) 2018/9/17 5
6
網頁內容(Content)的組成要素 使用語言 - HTML, HyperText Mark-up Language，W3C 聯盟制定的標準 網頁中常見的內容或元件 靜態的: 文字、圖片、表格(排版) 、超連結 動態的: Flash動畫、GIF 動畫 物件: 按鈕、選單、文字方格(表單)、計數器 影音: 影像(wmv、avi、mpg…)、音樂(mp3、wav、mid/midi、au…) 程式: JavaScript, VBScript, Java Applet, Active元件、程式語言(PHP、JSP、ASP/ASPX) 2018/9/17 6
7
網站腳本設計和資料收集 一般使用目錄架構方式安排腳本草稿 資料收集 各項資料文字檔案(txt, doc, …)
Image/Pics (圖示, 分格線, 背景, GIF89a動畫圖) 師大有全校授權的圖庫 程式/元件/樣版/樣式: Javascript、Java Applets、 HTML (Table, Frame) 、CSS 首頁 簡介 興趣 相關網站 訪客意見 2018/9/17 7
8
認識 Frontpage 2003 視窗(1/2) 功能表列 功能圖示工具列 網頁名稱標籤 網頁編輯區 Office 2003 工作模式
(另存新檔改名) 網頁編輯區 Office 2003 快速入門 工作窗格 工作模式 設計/分割/程式碼/預覽 建立新網頁 或網站 2018/9/17 8
9
認識 Frontpage 2003 視窗(2/2) 從功能表列 [檢視][資料夾清單] 資料夾清單在左側, 可方便檔案的拖曳
例如: 圖檔可可直接拖曳到網頁上排版
![認識 Frontpage 2003 視窗(2/2) 從功能表列 [檢視][資料夾清單] 資料夾清單在左側, 可方便檔案的拖曳](http://slidesplayer.com/slide/14001096/86/images/9/%E8%AA%8D%E8%AD%98+Frontpage+2003+%E8%A6%96%E7%AA%97%282%2F2%29+%E5%BE%9E%E5%8A%9F%E8%83%BD%E8%A1%A8%E5%88%97+%5B%E6%AA%A2%E8%A6%96%5D%EF%83%A0%5B%E8%B3%87%E6%96%99%E5%A4%BE%E6%B8%85%E5%96%AE%5D+%E8%B3%87%E6%96%99%E5%A4%BE%E6%B8%85%E5%96%AE%E5%9C%A8%E5%B7%A6%E5%81%B4%2C+%E5%8F%AF%E6%96%B9%E4%BE%BF%E6%AA%94%E6%A1%88%E7%9A%84%E6%8B%96%E6%9B%B3.jpg "例如: 圖檔可可直接拖曳到網頁上排版.")
10
使用範本建立新網站(1) 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: [瀏覽]
３設定網站位置（資料夾） 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: 2.選擇 [個人網站] 1.點選 [其他網站範本] [瀏覽] 建立D:\FP2003Web\ 2018/9/17 10
![使用範本建立新網站(1) 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: [瀏覽]](http://slidesplayer.com/slide/14001096/86/images/10/%E4%BD%BF%E7%94%A8%E7%AF%84%E6%9C%AC%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%B6%B2%E7%AB%99%281%29+%E5%BE%9E%7B%E5%8A%9F%E8%83%BD%E8%A1%A8%E5%88%97%7D%E9%81%B8%E6%93%87%5B%E9%96%8B%E6%96%B0%E6%AA%94%E6%A1%88%E2%80%A6%5D+%E6%88%96%7B%E5%B7%A5%E5%85%B7%E5%88%97%7D%E9%81%B8%E6%93%87%5B%E7%B6%B2%E7%AB%99%E2%80%A6%5D+%E5%8F%B3%E6%96%B9%E8%A6%96%E7%AA%97%E9%81%B8%E6%93%87%5B%E5%85%B6%E4%BB%96%E7%B6%B2%E7%AB%99%E7%AF%84%E6%9C%AC%5D%2C+%E6%AD%A5%E9%A9%9F%3A+%5B%E7%80%8F%E8%A6%BD%5D.jpg "３設定網站位置（資料夾） 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: 2.選擇 [個人網站] 1.點選 [其他網站範本] [瀏覽] 建立D:\FP2003Web\ 2018/9/")
11
使用範本建立新網站(2) 網站資料夾瀏覽 網頁內容編輯, 從[檢視]中可切換各種顯示畫面 請切換頁籤看看 – [導覽] 2018/9/17
11
![使用範本建立新網站(2) 網站資料夾瀏覽 網頁內容編輯, 從[檢視]中可切換各種顯示畫面 請切換頁籤看看 – [導覽] 2018/9/17](http://slidesplayer.com/slide/14001096/86/images/11/%E4%BD%BF%E7%94%A8%E7%AF%84%E6%9C%AC%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%B6%B2%E7%AB%99%282%29+%E7%B6%B2%E7%AB%99%E8%B3%87%E6%96%99%E5%A4%BE%E7%80%8F%E8%A6%BD+%E7%B6%B2%E9%A0%81%E5%85%A7%E5%AE%B9%E7%B7%A8%E8%BC%AF%2C+%E5%BE%9E%5B%E6%AA%A2%E8%A6%96%5D%E4%B8%AD%E5%8F%AF%E5%88%87%E6%8F%9B%E5%90%84%E7%A8%AE%E9%A1%AF%E7%A4%BA%E7%95%AB%E9%9D%A2+%E8%AB%8B%E5%88%87%E6%8F%9B%E9%A0%81%E7%B1%A4%E7%9C%8B%E7%9C%8B+%E2%80%93+%5B%E5%B0%8E%E8%A6%BD%5D+2018%2F9%2F17.jpg "11.")
12
使用範本建立新網站(3) 在[導覽]頁，點選欲修正標題的網頁，按滑鼠[右鍵] [重新命名] ，取一個適當的名字 2018/9/17 12
![使用範本建立新網站(3) 在[導覽]頁，點選欲修正標題的網頁，按滑鼠[右鍵] [重新命名] ，取一個適當的名字 2018/9/17 12](http://slidesplayer.com/slide/14001096/86/images/12/%E4%BD%BF%E7%94%A8%E7%AF%84%E6%9C%AC%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%B6%B2%E7%AB%99%283%29+%E5%9C%A8%5B%E5%B0%8E%E8%A6%BD%5D%E9%A0%81%EF%BC%8C%E9%BB%9E%E9%81%B8%E6%AC%B2%E4%BF%AE%E6%AD%A3%E6%A8%99%E9%A1%8C%E7%9A%84%E7%B6%B2%E9%A0%81%EF%BC%8C%E6%8C%89%E6%BB%91%E9%BC%A0%5B%E5%8F%B3%E9%8D%B5%5D+%EF%83%A0%5B%E9%87%8D%E6%96%B0%E5%91%BD%E5%90%8D%5D+%EF%BC%8C%E5%8F%96%E4%B8%80%E5%80%8B%E9%81%A9%E7%95%B6%E7%9A%84%E5%90%8D%E5%AD%97+2018%2F9%2F17+12.jpg "使用範本建立新網站(3) 在[導覽]頁，點選欲修正標題的網頁，按滑鼠[右鍵] [重新命名] ，取一個適當的名字 2018/9/17 12")
13
使用範本建立新網站(4):新增網頁 在導覽頁中，將滑鼠指標移到要新增子網頁的圖案上，按滑鼠[右鍵][新增][網頁] 新增網頁
新網頁預設檔名new_page_4.htm 可按右鍵 [重新命名] 2018/9/17 13
![使用範本建立新網站(4):新增網頁 在導覽頁中，將滑鼠指標移到要新增子網頁的圖案上，按滑鼠[右鍵][新增][網頁] 新增網頁](http://slidesplayer.com/slide/14001096/86/images/13/%E4%BD%BF%E7%94%A8%E7%AF%84%E6%9C%AC%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%B6%B2%E7%AB%99%284%29%3A%E6%96%B0%E5%A2%9E%E7%B6%B2%E9%A0%81+%E5%9C%A8%E5%B0%8E%E8%A6%BD%E9%A0%81%E4%B8%AD%EF%BC%8C%E5%B0%87%E6%BB%91%E9%BC%A0%E6%8C%87%E6%A8%99%E7%A7%BB%E5%88%B0%E8%A6%81%E6%96%B0%E5%A2%9E%E5%AD%90%E7%B6%B2%E9%A0%81%E7%9A%84%E5%9C%96%E6%A1%88%E4%B8%8A%EF%BC%8C%E6%8C%89%E6%BB%91%E9%BC%A0%5B%E5%8F%B3%E9%8D%B5%5D%EF%83%A0%5B%E6%96%B0%E5%A2%9E%5D%EF%83%A0%5B%E7%B6%B2%E9%A0%81%5D+%E6%96%B0%E5%A2%9E%E7%B6%B2%E9%A0%81.jpg "新網頁預設檔名new_page_4.htm. 可按右鍵 [重新命名] 2018/9/")
14
使用範本建立新網站(5): 調整網站架構 網站架構初步完成後，若發現”擺”錯位置，可用滑鼠拖曳到適當位置: 換一個新的爸爸
1. 點選要調整的網頁 2. 滑鼠 [左鍵]按著不放 3. 拖曳到新的 [父網頁] 再放開 2018/9/17 14
15
使用範本建立新網站(5): 編輯網頁 打開要編輯的網頁在檔名上用滑鼠左鍵快按兩下 ，使用工具列的編輯工具, 修改內容(對齊排列、字型顏色、大小、….) 加入圖片或物件: 方法一: [插入][圖片][從圖檔] 方法二: 從電腦資料夾或桌面, 拖曳到編輯網頁的適當位置 網頁存檔時，圖檔會匯入網站資料夾中，可選取儲存位置 1. 圖檔放到網頁中 2. 儲存時匯入並指定資料夾 2018/9/17 15
![使用範本建立新網站(5): 編輯網頁 打開要編輯的網頁在檔名上用滑鼠左鍵快按兩下 ，使用工具列的編輯工具, 修改內容(對齊排列、字型顏色、大小、….) 加入圖片或物件: 方法一: [插入][圖片][從圖檔]](http://slidesplayer.com/slide/14001096/86/images/15/%E4%BD%BF%E7%94%A8%E7%AF%84%E6%9C%AC%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%B6%B2%E7%AB%99%285%29%3A+%E7%B7%A8%E8%BC%AF%E7%B6%B2%E9%A0%81+%E6%89%93%E9%96%8B%E8%A6%81%E7%B7%A8%E8%BC%AF%E7%9A%84%E7%B6%B2%E9%A0%81%E5%9C%A8%E6%AA%94%E5%90%8D%E4%B8%8A%E7%94%A8%E6%BB%91%E9%BC%A0%E5%B7%A6%E9%8D%B5%E5%BF%AB%E6%8C%89%E5%85%A9%E4%B8%8B+%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7%E5%88%97%E7%9A%84%E7%B7%A8%E8%BC%AF%E5%B7%A5%E5%85%B7%2C+%E4%BF%AE%E6%94%B9%E5%85%A7%E5%AE%B9%28%E5%B0%8D%E9%BD%8A%E6%8E%92%E5%88%97%E3%80%81%E5%AD%97%E5%9E%8B%E9%A1%8F%E8%89%B2%E3%80%81%E5%A4%A7%E5%B0%8F%E3%80%81%E2%80%A6.%29+%E5%8A%A0%E5%85%A5%E5%9C%96%E7%89%87%E6%88%96%E7%89%A9%E4%BB%B6%3A+%E6%96%B9%E6%B3%95%E4%B8%80%3A+%5B%E6%8F%92%E5%85%A5%5D%EF%83%A0%5B%E5%9C%96%E7%89%87%5D%EF%83%A0%5B%E5%BE%9E%E5%9C%96%E6%AA%94%5D.jpg "方法二: 從電腦資料夾或桌面, 拖曳到編輯網頁的適當位置. 網頁存檔時，圖檔會匯入網站資料夾中，可選取儲存位置. 1. 圖檔放到網頁中. 2. 儲存時匯入並指定資料夾. 2018/9/")
16
美化網頁: 套用佈景主題 功能表列的[格式][佈景主題] 套用方式: 預設(全部網頁) 、選取的頁面(單一頁) 選取喜歡的 佈景主題
選取套用 的方式 2018/9/17 16
![美化網頁: 套用佈景主題 功能表列的[格式][佈景主題] 套用方式: 預設(全部網頁) 、選取的頁面(單一頁) 選取喜歡的 佈景主題](http://slidesplayer.com/slide/14001096/86/images/16/%E7%BE%8E%E5%8C%96%E7%B6%B2%E9%A0%81%3A+%E5%A5%97%E7%94%A8%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C+%E5%8A%9F%E8%83%BD%E8%A1%A8%E5%88%97%E7%9A%84%5B%E6%A0%BC%E5%BC%8F%5D%EF%83%A0%5B%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C%5D+%E5%A5%97%E7%94%A8%E6%96%B9%E5%BC%8F%3A+%E9%A0%90%E8%A8%AD%28%E5%85%A8%E9%83%A8%E7%B6%B2%E9%A0%81%29+%E3%80%81%E9%81%B8%E5%8F%96%E7%9A%84%E9%A0%81%E9%9D%A2%28%E5%96%AE%E4%B8%80%E9%A0%81%29+%E9%81%B8%E5%8F%96%E5%96%9C%E6%AD%A1%E7%9A%84+%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C.jpg "選取套用. 的方式. 2018/9/")
17
先賭為快: 瀏覽檢視網站 方法一: 功能表列[檔案][在瀏覽器中預覽]選擇IE和解析度(800x600)
方法二: 在網頁開啟的視窗，按[F12] 網頁 Index.htm 2018/9/17 17
![先賭為快: 瀏覽檢視網站 方法一: 功能表列[檔案][在瀏覽器中預覽]選擇IE和解析度(800x600)](http://slidesplayer.com/slide/14001096/86/images/17/%E5%85%88%E8%B3%AD%E7%82%BA%E5%BF%AB%3A+%E7%80%8F%E8%A6%BD%E6%AA%A2%E8%A6%96%E7%B6%B2%E7%AB%99+%E6%96%B9%E6%B3%95%E4%B8%80%3A+%E5%8A%9F%E8%83%BD%E8%A1%A8%E5%88%97%EF%83%A0%5B%E6%AA%94%E6%A1%88%5D%EF%83%A0%5B%E5%9C%A8%E7%80%8F%E8%A6%BD%E5%99%A8%E4%B8%AD%E9%A0%90%E8%A6%BD%5D%EF%83%A0%E9%81%B8%E6%93%87IE%E5%92%8C%E8%A7%A3%E6%9E%90%E5%BA%A6%28800x600%29.jpg "方法二: 在網頁開啟的視窗，按[F12] 網頁. Index.htm. 2018/9/")
18
發佈網站: 師大個人網站 發佈: 把網站的所有檔案(htm、gif/jpg、doc、swf、mp3…)，傳到Web伺服器主機指定的位置
方法一：使用FTP軟體 方法二：(IE7環境)使用檔案總管 參考網址: 登入後存到 WWW 的目錄下，預設之首頁為 index.html (不是 index.htm) ，上傳前先更名 2018/9/17 18
19
發佈網站: 以檔案總管為例(1/2) [開始]按滑鼠右鍵選[檔案總管] ftp://mfchen@web.ntnu.edu.tw
mfchen是個人 帳號 [開始]按滑鼠右鍵選[檔案總管] 輸入 密碼後按 [登入] 2018/9/17 19
![發佈網站: 以檔案總管為例(1/2) [開始]按滑鼠右鍵選[檔案總管]](http://slidesplayer.com/slide/14001096/86/images/19/%E7%99%BC%E4%BD%88%E7%B6%B2%E7%AB%99%3A+%E4%BB%A5%E6%AA%94%E6%A1%88%E7%B8%BD%E7%AE%A1%E7%82%BA%E4%BE%8B%281%2F2%29+%5B%E9%96%8B%E5%A7%8B%5D%E6%8C%89%E6%BB%91%E9%BC%A0%E5%8F%B3%E9%8D%B5%E9%81%B8%5B%E6%AA%94%E6%A1%88%E7%B8%BD%E7%AE%A1%5D.jpg "mfchen是個人 帳號. [開始]按滑鼠右鍵選[檔案總管] 輸入 密碼後按 [登入] 2018/9/")
20
發佈網站: 以檔案總管為例(2/2) 登入後，點選 [WWW] 資料夾
將我們設計的網站資料來 (如: D:\FP2003Web) 所有檔案[全選][複製][貼上]到 WWW 資料夾 網站所有檔案 複製到 WWW 資料夾 觀看我的網站: (mfchen是個人師大 帳號) 2018/9/17 20
![發佈網站: 以檔案總管為例(2/2) 登入後，點選 [WWW] 資料夾](http://slidesplayer.com/slide/14001096/86/images/20/%E7%99%BC%E4%BD%88%E7%B6%B2%E7%AB%99%3A+%E4%BB%A5%E6%AA%94%E6%A1%88%E7%B8%BD%E7%AE%A1%E7%82%BA%E4%BE%8B%282%2F2%29+%E7%99%BB%E5%85%A5%E5%BE%8C%EF%BC%8C%E9%BB%9E%E9%81%B8+%5BWWW%5D+%E8%B3%87%E6%96%99%E5%A4%BE.jpg "將我們設計的網站資料來 (如: D:\FP2003Web) 所有檔案[全選][複製][貼上]到 WWW 資料夾. 網站所有檔案. 複製到 WWW. 資料夾. 觀看我的網站: (mfchen是個人師大 帳號) 2018/9/")
21
素材收集: 圖片、影片、音樂 從網頁中收集/下載(小心智慧財產權的問題) 選取儲存的 位置/資料夾 確定檔名 按[儲存] 滑鼠移到要下
載的圖片上方 按滑鼠右鍵 選[另存圖片] 網路上搜尋圖片素材常用的關鍵字: Free GIF background images, banner Animated gifs, Cliparts 常用網頁圖檔格式: gif, jpg, png 影片/音樂: avi, mpg, mpeg, wmv, mp3, mid, midi, wav, … 2018/9/17 21
![素材收集: 圖片、影片、音樂 從網頁中收集/下載(小心智慧財產權的問題) 選取儲存的 位置/資料夾 確定檔名 按[儲存] 滑鼠移到要下](http://slidesplayer.com/slide/14001096/86/images/21/%E7%B4%A0%E6%9D%90%E6%94%B6%E9%9B%86%3A+%E5%9C%96%E7%89%87%E3%80%81%E5%BD%B1%E7%89%87%E3%80%81%E9%9F%B3%E6%A8%82+%E5%BE%9E%E7%B6%B2%E9%A0%81%E4%B8%AD%E6%94%B6%E9%9B%86%2F%E4%B8%8B%E8%BC%89%28%E5%B0%8F%E5%BF%83%E6%99%BA%E6%85%A7%E8%B2%A1%E7%94%A2%E6%AC%8A%E7%9A%84%E5%95%8F%E9%A1%8C%29+%E9%81%B8%E5%8F%96%E5%84%B2%E5%AD%98%E7%9A%84+%E4%BD%8D%E7%BD%AE%2F%E8%B3%87%E6%96%99%E5%A4%BE+%E7%A2%BA%E5%AE%9A%E6%AA%94%E5%90%8D+%E6%8C%89%5B%E5%84%B2%E5%AD%98%5D+%E6%BB%91%E9%BC%A0%E7%A7%BB%E5%88%B0%E8%A6%81%E4%B8%8B.jpg "載的圖片上方. 按滑鼠右鍵 選[另存圖片] 網路上搜尋圖片素材常用的關鍵字: Free GIF background images, banner. Animated gifs, Cliparts. 常用網頁圖檔格式: gif, jpg, png. 影片/音樂: avi, mpg, mpeg, wmv, mp3, mid, midi, wav, … 2018/9/")
22
網頁中進一步的設計 網頁中重要的元素 超連結: 連結到網站、網頁、檔案、FTP、EMAIL、網頁中的書籤、… 網頁的背景圖、背景音樂
按鈕、選單、動態選單、表單 表格和排版 圖像、影音、動畫….等物 框架頁 圖層、互動式按鈕、Web元件 …. 2018/9/17 22
23
超連結的建立(1/3) 新增一個[空白網頁]，在網頁中加入一個長篇文章(複製/貼上)，網頁套用[無佈景主題] 新增一個 空白網頁 貼上一個
長篇的文章 [無佈景主題] 恢復網頁 原始屬性
![超連結的建立(1/3) 新增一個[空白網頁]，在網頁中加入一個長篇文章(複製/貼上)，網頁套用[無佈景主題] 新增一個 空白網頁 貼上一個](http://slidesplayer.com/slide/14001096/86/images/23/%E8%B6%85%E9%80%A3%E7%B5%90%E7%9A%84%E5%BB%BA%E7%AB%8B%281%2F3%29+%E6%96%B0%E5%A2%9E%E4%B8%80%E5%80%8B%5B%E7%A9%BA%E7%99%BD%E7%B6%B2%E9%A0%81%5D%EF%BC%8C%E5%9C%A8%E7%B6%B2%E9%A0%81%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%B8%80%E5%80%8B%E9%95%B7%E7%AF%87%E6%96%87%E7%AB%A0%28%E8%A4%87%E8%A3%BD%2F%E8%B2%BC%E4%B8%8A%29%EF%BC%8C%E7%B6%B2%E9%A0%81%E5%A5%97%E7%94%A8%5B%E7%84%A1%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C%5D+%E6%96%B0%E5%A2%9E%E4%B8%80%E5%80%8B+%E7%A9%BA%E7%99%BD%E7%B6%B2%E9%A0%81+%E8%B2%BC%E4%B8%8A%E4%B8%80%E5%80%8B.jpg "長篇的文章. [無佈景主題] 恢復網頁. 原始屬性.")
24
超連結的建立(2/3): URL 網址連結 用滑鼠右鍵選取要建立連結的文字反白 2.點選超連 結工具圖示 1.選取要建連 3.輸入網址
4. 確定
25
超連結的建立(3/3): Email 連結 2.點選超連 結工具圖示 4. 輸入Email (前面自動加入 mailto:) 1.選取要建連
結的文字 5. 輸入信件的[主旨] 6. 確定 3. 點選[電子郵件地址] 2018/9/17 25
26
網頁內超連結的建立: 書籤連結(1/3) 在一篇長文章中，連結到網頁中間的段落 正常網頁連結 網頁書籤連結 顯示文章開頭的段落 長篇文章
Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee eeeeeeeeeeeeee Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee 正常網頁連結 顯示文章開頭的段落 網頁書籤連結 顯示文章設定書籤的段落 長篇文章
27
網頁內超連結的建立: 書籤連結(2/3) 2.功能表列 [插入][書籤] 1.滑鼠移到 要建立書籤 的位置 3.輸入標籤名稱 [aaa]
3.確定
![網頁內超連結的建立: 書籤連結(2/3) 2.功能表列 [插入][書籤] 1.滑鼠移到 要建立書籤 的位置 3.輸入標籤名稱 [aaa]](http://slidesplayer.com/slide/14001096/86/images/27/%E7%B6%B2%E9%A0%81%E5%85%A7%E8%B6%85%E9%80%A3%E7%B5%90%E7%9A%84%E5%BB%BA%E7%AB%8B%3A+%E6%9B%B8%E7%B1%A4%E9%80%A3%E7%B5%90%282%2F3%29+2.%E5%8A%9F%E8%83%BD%E8%A1%A8%E5%88%97+%5B%E6%8F%92%E5%85%A5%5D%EF%83%A0%5B%E6%9B%B8%E7%B1%A4%5D+1.%E6%BB%91%E9%BC%A0%E7%A7%BB%E5%88%B0+%E8%A6%81%E5%BB%BA%E7%AB%8B%E6%9B%B8%E7%B1%A4+%E7%9A%84%E4%BD%8D%E7%BD%AE+3.%E8%BC%B8%E5%85%A5%E6%A8%99%E7%B1%A4%E5%90%8D%E7%A8%B1+%5Baaa%5D.jpg "3.確定.")
28
網頁內超連結的建立: 書籤連結(3/3) 前二步驟同前: 選取欲建超連結的文字、按超連結圖示
1.先選有書籤 的網頁 2. 點[書籤] 按鈕 前二步驟同前: 選取欲建超連結的文字、按超連結圖示 書籤的連結形式(假設page.htm網頁中有一個aaa的書籤) 從網站到網頁中的書籤 從網頁到網頁中的書籤 page.htm#aaa 網頁本身內部的書籤 #aaa 3. 選網頁中設定 的[書籤] aaa
29
網頁背景圖和音樂 網頁要先取消佈景主題, 才能設定背景圖 在網頁編輯區, 按滑鼠[右鍵][網頁內容] [設定格式]頁籤 [背景圖片]
[一般]頁籤 [背景音樂] [網頁內容]
![網頁背景圖和音樂 網頁要先取消佈景主題, 才能設定背景圖 在網頁編輯區, 按滑鼠[右鍵][網頁內容] [設定格式]頁籤 [背景圖片]](http://slidesplayer.com/slide/14001096/86/images/29/%E7%B6%B2%E9%A0%81%E8%83%8C%E6%99%AF%E5%9C%96%E5%92%8C%E9%9F%B3%E6%A8%82+%E7%B6%B2%E9%A0%81%E8%A6%81%E5%85%88%E5%8F%96%E6%B6%88%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C%2C+%E6%89%8D%E8%83%BD%E8%A8%AD%E5%AE%9A%E8%83%8C%E6%99%AF%E5%9C%96+%E5%9C%A8%E7%B6%B2%E9%A0%81%E7%B7%A8%E8%BC%AF%E5%8D%80%2C+%E6%8C%89%E6%BB%91%E9%BC%A0%5B%E5%8F%B3%E9%8D%B5%5D%EF%83%A0%5B%E7%B6%B2%E9%A0%81%E5%85%A7%E5%AE%B9%5D+%5B%E8%A8%AD%E5%AE%9A%E6%A0%BC%E5%BC%8F%5D%E9%A0%81%E7%B1%A4+%5B%E8%83%8C%E6%99%AF%E5%9C%96%E7%89%87%5D.jpg "[一般]頁籤. [背景音樂] [網頁內容]")
30
表格應用: 網頁排版技巧 網頁內容對齊的常用技巧，和Word表格操作類似 [表格][插入][表格]
設定表格和儲存格背景色，表格框線 (0沒外框)
![表格應用: 網頁排版技巧 網頁內容對齊的常用技巧，和Word表格操作類似 [表格][插入][表格]](http://slidesplayer.com/slide/14001096/86/images/30/%E8%A1%A8%E6%A0%BC%E6%87%89%E7%94%A8%3A+%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E6%8A%80%E5%B7%A7+%E7%B6%B2%E9%A0%81%E5%85%A7%E5%AE%B9%E5%B0%8D%E9%BD%8A%E7%9A%84%E5%B8%B8%E7%94%A8%E6%8A%80%E5%B7%A7%EF%BC%8C%E5%92%8CWord%E8%A1%A8%E6%A0%BC%E6%93%8D%E4%BD%9C%E9%A1%9E%E4%BC%BC+%5B%E8%A1%A8%E6%A0%BC%5D%EF%83%A0%5B%E6%8F%92%E5%85%A5%5D%EF%83%A0%5B%E8%A1%A8%E6%A0%BC%5D.jpg "設定表格和儲存格背景色，表格框線 (0沒外框)")
31
透明背景的圖片 1.拖曳圖檔到 網頁編輯區 2. 工具列空白處 [右鍵][圖片] 開啟圖片工具列 3.點選圖片 5. 在圖片上要設透明
的顏色處點一下 圖片工具列 4. 選圖片工具 [設定透明色彩]
![透明背景的圖片 1.拖曳圖檔到 網頁編輯區 2. 工具列空白處 [右鍵][圖片] 開啟圖片工具列 3.點選圖片 5. 在圖片上要設透明](http://slidesplayer.com/slide/14001096/86/images/31/%E9%80%8F%E6%98%8E%E8%83%8C%E6%99%AF%E7%9A%84%E5%9C%96%E7%89%87+1.%E6%8B%96%E6%9B%B3%E5%9C%96%E6%AA%94%E5%88%B0+%E7%B6%B2%E9%A0%81%E7%B7%A8%E8%BC%AF%E5%8D%80+2.+%E5%B7%A5%E5%85%B7%E5%88%97%E7%A9%BA%E7%99%BD%E8%99%95+%5B%E5%8F%B3%E9%8D%B5%5D%EF%83%A0%5B%E5%9C%96%E7%89%87%5D+%E9%96%8B%E5%95%9F%E5%9C%96%E7%89%87%E5%B7%A5%E5%85%B7%E5%88%97+3.%E9%BB%9E%E9%81%B8%E5%9C%96%E7%89%87+5.+%E5%9C%A8%E5%9C%96%E7%89%87%E4%B8%8A%E8%A6%81%E8%A8%AD%E9%80%8F%E6%98%8E.jpg "的顏色處點一下. 圖片工具列. 4. 選圖片工具. [設定透明色彩]")
32
影像地圖(Image Map)製作 在一張影像/地圖上，製作多個超連結 2. 選取[多角形作用區] 3. 繪製多角形 作用區 1. 點選圖片
4. 輸入作用區的連結網址
![影像地圖(Image Map)製作 在一張影像/地圖上，製作多個超連結 2. 選取[多角形作用區] 3. 繪製多角形 作用區 1. 點選圖片](http://slidesplayer.com/slide/14001096/86/images/32/%E5%BD%B1%E5%83%8F%E5%9C%B0%E5%9C%96%28Image+Map%29%E8%A3%BD%E4%BD%9C+%E5%9C%A8%E4%B8%80%E5%BC%B5%E5%BD%B1%E5%83%8F%2F%E5%9C%B0%E5%9C%96%E4%B8%8A%EF%BC%8C%E8%A3%BD%E4%BD%9C%E5%A4%9A%E5%80%8B%E8%B6%85%E9%80%A3%E7%B5%90+2.+%E9%81%B8%E5%8F%96%5B%E5%A4%9A%E8%A7%92%E5%BD%A2%E4%BD%9C%E7%94%A8%E5%8D%80%5D+3.+%E7%B9%AA%E8%A3%BD%E5%A4%9A%E8%A7%92%E5%BD%A2+%E4%BD%9C%E7%94%A8%E5%8D%80+1.+%E9%BB%9E%E9%81%B8%E5%9C%96%E7%89%87.jpg "4. 輸入作用區的連結網址.")
Similar presentations
