FrontPage 2003 網頁設計初階 國立臺灣師範大學 資訊中心(ITC) 陳 明 芳 先生 陳 明 芳 先生 Email: mfchen@ntnu.edu.tw VOIP: 8628 外線: 7714-8628 分機: 277 http://140.122.65.69:8080/fp2003/ 中華民國九十八年七月 2018/9/17 1

課程目標 WWW 網站架構概念 網頁設計工具簡介 網頁的組成和元件 網站腳本和網頁設計 Frontpage 2003 範本建立網站基本操作 各種超連結和網頁元件設計 Frontpage 2003 的一些特殊功能介紹 網站發佈和管理 2018/9/17 2

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

網頁和影像設計工具 網頁設計工具 影像/繪圖處理 動畫處理 FrontPage 2003/2007 (全校授權) Namo WebEditor 2006(全校授權) 2008 (未採購) Dreamweaver (電腦教室授權) 影像/繪圖處理 PhotoImpact (全校授權) 、Photoshop、 CorelDraw 、Illustrator 動畫處理 Flash(電腦教室授權) Microsoft GIF Animator (免費) Ulead GIF Animator (包含在 Photoimpact 授權中) 2018/9/17 4

網頁 vs 網站 vs 網址 vs 首頁 網頁：依照HTML(Hypertext Mark-up Language)標準編輯的文字檔，可在瀏覽器(IE、Firefox…)上正確顯示的檔案。 網站：許多網頁的集合，依照網站的設計，用超連結把網頁之間的關係，串聯起來，成為一個完整的網站，提供資訊給Internet上的使用者。 網址: 讓使用者在瀏覽器網址列輸入的網站識別位址，類似我們住家的住址 http://www.ntnu.edu.tw http://140.122.65.150/ 首頁: 進到一個網站第一個呈現的網頁，常見首頁名 index.htm或index.html，可以自定首頁(管理者在Web伺服器上設定) 2018/9/17 5

網頁內容(Content)的組成要素 使用語言 - HTML, HyperText Mark-up Language，W3C 聯盟制定的標準 http://www.w3.org/ 網頁中常見的內容或元件 靜態的: 文字、圖片、表格(排版) 、超連結 動態的: Flash動畫、GIF 動畫 物件: 按鈕、選單、文字方格(表單)、計數器 影音: 影像(wmv、avi、mpg…)、音樂(mp3、wav、mid/midi、au…) 程式: JavaScript, VBScript, Java Applet, Active元件、程式語言(PHP、JSP、ASP/ASPX) 2018/9/17 6

網站腳本設計和資料收集 一般使用目錄架構方式安排腳本草稿 資料收集 各項資料文字檔案(txt, doc, …) Image/Pics (圖示, 分格線, 背景, GIF89a動畫圖) 師大有全校授權的圖庫 http://ftp.itc.ntnu.edu.tw:8080/softwareDL/ 程式/元件/樣版/樣式: Javascript、Java Applets、 HTML (Table, Frame) 、CSS 首頁 簡介 興趣 相關網站 訪客意見 2018/9/17 7

認識 Frontpage 2003 視窗(1/2) 功能表列 功能圖示工具列 網頁名稱標籤 網頁編輯區 Office 2003 工作模式 (另存新檔改名) 網頁編輯區 Office 2003 快速入門 工作窗格 工作模式 設計/分割/程式碼/預覽 建立新網頁 或網站 2018/9/17 8

認識 Frontpage 2003 視窗(2/2) 從功能表列 [檢視][資料夾清單] 資料夾清單在左側, 可方便檔案的拖曳 例如: 圖檔可可直接拖曳到網頁上排版

使用範本建立新網站(1) 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: [瀏覽] ３設定網站位置（資料夾） 從{功能表列}選擇[開新檔案…] 或{工具列}選擇[網站…] 右方視窗選擇[其他網站範本], 步驟: 2.選擇 [個人網站] 1.點選 [其他網站範本] [瀏覽] 建立D:\FP2003Web\ 2018/9/17 10

使用範本建立新網站(2) 網站資料夾瀏覽 網頁內容編輯, 從[檢視]中可切換各種顯示畫面 請切換頁籤看看 – [導覽] 2018/9/17 11

使用範本建立新網站(3) 在[導覽]頁，點選欲修正標題的網頁，按滑鼠[右鍵] [重新命名] ，取一個適當的名字 2018/9/17 12

使用範本建立新網站(4):新增網頁 在導覽頁中，將滑鼠指標移到要新增子網頁的圖案上，按滑鼠[右鍵][新增][網頁] 新增網頁 新網頁預設檔名new_page_4.htm 可按右鍵 [重新命名] 2018/9/17 13

使用範本建立新網站(5): 調整網站架構 網站架構初步完成後，若發現”擺”錯位置，可用滑鼠拖曳到適當位置: 換一個新的爸爸 1. 點選要調整的網頁 2. 滑鼠 [左鍵]按著不放 3. 拖曳到新的 [父網頁] 再放開 2018/9/17 14

使用範本建立新網站(5): 編輯網頁 打開要編輯的網頁在檔名上用滑鼠左鍵快按兩下 ，使用工具列的編輯工具, 修改內容(對齊排列、字型顏色、大小、….) 加入圖片或物件: 方法一: [插入][圖片][從圖檔] 方法二: 從電腦資料夾或桌面, 拖曳到編輯網頁的適當位置 網頁存檔時，圖檔會匯入網站資料夾中，可選取儲存位置 1. 圖檔放到網頁中 2. 儲存時匯入並指定資料夾 2018/9/17 15

美化網頁: 套用佈景主題 功能表列的[格式][佈景主題] 套用方式: 預設(全部網頁) 、選取的頁面(單一頁) 選取喜歡的 佈景主題 選取套用 的方式 2018/9/17 16

先賭為快: 瀏覽檢視網站 方法一: 功能表列[檔案][在瀏覽器中預覽]選擇IE和解析度(800x600) 方法二: 在網頁開啟的視窗，按[F12] 網頁 Index.htm 2018/9/17 17

發佈網站: 師大個人網站 發佈: 把網站的所有檔案(htm、gif/jpg、doc、swf、mp3…)，傳到Web伺服器主機指定的位置 方法一：使用FTP軟體 方法二：(IE7環境)使用檔案總管 參考網址: http://webmail.ntnu.edu.tw/wmail/faq/mailfaq.htm#Q15 登入後存到 WWW 的目錄下，預設之首頁為 index.html (不是 index.htm) ，上傳前先更名 2018/9/17 18

發佈網站: 以檔案總管為例(1/2) [開始]按滑鼠右鍵選[檔案總管] ftp://mfchen@web.ntnu.edu.tw mfchen是個人Email帳號 [開始]按滑鼠右鍵選[檔案總管] 輸入Email密碼後按 [登入] 2018/9/17 19

發佈網站: 以檔案總管為例(2/2) 登入後，點選 [WWW] 資料夾 將我們設計的網站資料來 (如: D:\FP2003Web) 所有檔案[全選][複製][貼上]到 WWW 資料夾 網站所有檔案 複製到 WWW 資料夾 觀看我的網站: http://web.ntnu.edu.tw/~mfchen (mfchen是個人師大Email帳號) 2018/9/17 20

素材收集: 圖片、影片、音樂 從網頁中收集/下載(小心智慧財產權的問題) 選取儲存的 位置/資料夾 確定檔名 按[儲存] 滑鼠移到要下 載的圖片上方 按滑鼠右鍵 選[另存圖片] 網路上搜尋圖片素材常用的關鍵字: Free GIF background images, banner Animated gifs, Cliparts 常用網頁圖檔格式: gif, jpg, png 影片/音樂: avi, mpg, mpeg, wmv, mp3, mid, midi, wav, … 2018/9/17 21

網頁中進一步的設計 網頁中重要的元素 超連結: 連結到網站、網頁、檔案、FTP、EMAIL、網頁中的書籤、… 網頁的背景圖、背景音樂 按鈕、選單、動態選單、表單 表格和排版 圖像、影音、動畫….等物 框架頁 圖層、互動式按鈕、Web元件 …. 2018/9/17 22

超連結的建立(1/3) 新增一個[空白網頁]，在網頁中加入一個長篇文章(複製/貼上)，網頁套用[無佈景主題] 新增一個 空白網頁 貼上一個 長篇的文章 [無佈景主題] 恢復網頁 原始屬性

超連結的建立(2/3): URL 網址連結 用滑鼠右鍵選取要建立連結的文字反白 2.點選超連 結工具圖示 1.選取要建連 3.輸入網址 4. 確定

超連結的建立(3/3): Email 連結 2.點選超連 結工具圖示 4. 輸入Email (前面自動加入 mailto:) 1.選取要建連 結的文字 5. 輸入信件的[主旨] 6. 確定 3. 點選[電子郵件地址] 2018/9/17 25

網頁內超連結的建立: 書籤連結(1/3) 在一篇長文章中，連結到網頁中間的段落 正常網頁連結 網頁書籤連結 顯示文章開頭的段落 長篇文章 Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee eeeeeeeeeeeeee Aaaaaaaaaaaaaa Bbbbbbbbbbbbbb Ccccccccccccccc Ccccccccccccccc Dddddddddddddd Eeeeeeeeeeeeee 正常網頁連結 顯示文章開頭的段落 網頁書籤連結 顯示文章設定書籤的段落 長篇文章

網頁內超連結的建立: 書籤連結(2/3) 2.功能表列 [插入][書籤] 1.滑鼠移到 要建立書籤 的位置 3.輸入標籤名稱 [aaa] 3.確定

網頁內超連結的建立: 書籤連結(3/3) 前二步驟同前: 選取欲建超連結的文字、按超連結圖示 1.先選有書籤 的網頁 2. 點[書籤] 按鈕 前二步驟同前: 選取欲建超連結的文字、按超連結圖示 書籤的連結形式(假設page.htm網頁中有一個aaa的書籤) 從網站到網頁中的書籤 http://www.abc.edu.tw/page.htm#aaa 從網頁到網頁中的書籤 page.htm#aaa 網頁本身內部的書籤 #aaa 3. 選網頁中設定 的[書籤] aaa

網頁背景圖和音樂 網頁要先取消佈景主題, 才能設定背景圖 在網頁編輯區, 按滑鼠[右鍵][網頁內容] [設定格式]頁籤 [背景圖片] [一般]頁籤 [背景音樂] [網頁內容]

表格應用: 網頁排版技巧 網頁內容對齊的常用技巧，和Word表格操作類似 [表格][插入][表格] 設定表格和儲存格背景色，表格框線 (0沒外框)

透明背景的圖片 1.拖曳圖檔到 網頁編輯區 2. 工具列空白處 [右鍵][圖片] 開啟圖片工具列 3.點選圖片 5. 在圖片上要設透明 的顏色處點一下 圖片工具列 4. 選圖片工具 [設定透明色彩]

影像地圖(Image Map)製作 在一張影像/地圖上，製作多個超連結 2. 選取[多角形作用區] 3. 繪製多角形 作用區 1. 點選圖片 4. 輸入作用區的連結網址