1、網頁製作基礎研習 講師：翁凌志 24網頁製作基礎研習教材(2)三、使用 FrontPage 編輯網頁(五) 超連結1. 建立內部超連結 ( 連到網站裡的其他網頁 )a. 先建立超連結用的文字，使用圖片也可以b. 選取文字或圖片c. 點選工具列的超連結：d. 選取要連結的網頁，按確定即完成超連結。網頁製作基礎研習 講師：翁凌志 252. 建立外部超連結 ( 連到其他網站 )a. 先建立超連結用的文字，使用圖片也可以b. 選取文字或圖片c. 點選工具列的超連結：d. 在URL 輸入網址 (記得開頭要有http:/) ，再按確定即完成。3. E-Mail 的超連結a. 先建立超連結用的文字，使用圖片
2、也可以b. 選取文字或圖片c. 點選工具列的超連結：d. 點選郵件小圖示：網頁製作基礎研習 講師：翁凌志 26e. 輸入 E-Mail，按確定f. 再按一次確定 ，即完成 E-Mail 的超連結4. 網頁裡的超連結(書籤 )a. （建立書籤）在想要放置書籤的地方選取文字，或是讓文字游標停在該行網頁製作基礎研習 講師：翁凌志 27b. 【插入】【書籤】c. 輸入書籤名稱 ，再按確定即完成書籤的建立d. 建立超連結用的文字，使用圖片也可以(也就是按了這個超連結，會跳到書籤所在的位置)e. 選取文字或圖片f. 點選工具列的超連結：g. URL不需要變動，請在下方的書籤挑選剛才建立好的書籤，再按確定網
3、頁製作基礎研習 講師：翁凌志 28Q：如果要連結其他網頁，而且同時讓該網頁跳到特定的書籤位置，可不可以？A：可以。1. 連結的網頁裡，已經有建立書籤。2. 依照建立內部超連結的步驟，選取這個要連結的網頁，但先不要按確定 。3. 在URL的網址後面加上# 書籤的名稱 ，再按 確定即可。例如：超連結.htm#Bookmark1【補充】E-Mail 超連結E-Mail 超連結可以附加其他參數，改變 Outlook 新郵件視窗開啟時的狀態：(1) subject=信件主旨：新郵件的視窗會自動填入信件主旨例如：Mail Me改成 Mail Me(2)Cc=副本的收件人：新郵件的視窗會自動填入副本收件人的
4、 E-Mail例如：Mail Me改成 Mail Me(3)Bcc=密件副本的收件人：新郵件的視窗會自動填入密件副本收件人的 E-Mail例如：Mail Me改成 Mail Me(4)Body=預設的信件內容：新郵件的視窗會自動填入預設的內容例如：Mail Me改成 Mail Me以上的參數也可以用&來連接使用，例如：Mail Me網頁製作基礎研習 講師：翁凌志 29【補充】 絕對路徑與相對路徑一般來說，檔案的位置或完整的網址，稱作絕對路徑。例如：c:documentprofile.doc 、 http:/.tw/index.htm然而在網頁中製作超連結，為了避免填寫過長的路徑，例如：http
5、:/.tw/myprofile/mydata/profile1.htmhttp:/.tw/myprofile/mydata/profile2.htm會將完整的路徑簡化成相對於自己的路徑，例如 profile1.htm 連向 profile2.htm 的超連結可以寫成：Link to profile2，而瀏覽器會自動把 profile1.htm 之前的路徑http:/.tw/myprofile/mydata/加到 profile2.htm 之前，找到正確的 profile2.htm 的路徑。簡單來說：重複的路徑可以省略不寫。Q：絕對路徑如何換成相對路徑？A：假設有二個檔案-http:/.tw/m
6、yprofile/mydata/profile1.htmhttp:/.tw/myprofile/mydata/images/myface.jpeg如果要在 profile1.htm 製作超連結到 myface.jpeg，則可以把 myface.jpeg 的絕對路徑：http:/.tw/myprofile/mydata/images/myface.jpeg扣掉 profile1.htm 之前的路徑：http:/.tw/myprofile/mydata/ images/myface.jpeg超連結就可以寫成My Facehttp:/.tw/myprofile/mydata/Profile1.htm
7、Profile2.htm之前的路徑都一樣http:/.tw/myprofile/mydata/Myprofile1.htmImages/Myface.jpeg網頁製作基礎研習 講師：翁凌志 30Q：如果二個檔案的絕對路徑不完全相同，怎麼換算？A ：假設有二個檔案- http:/.tw/myprofile/mydata/profile1.htmhttp:/.tw/myprofile/myimage/images/myface.jpeg它們的相同路徑只到http:/.tw/myprofile/ 在路徑的表示法中可使用/ 來代表上一層目錄 profile1.htm(在 mydata 裡)的上一層目錄
8、 = myprofile 目錄 = http:/.tw/myprofile/所以， http:/.tw/myprofile/myimage可以寫成 /myimage 而 myface.jpeg 相對於 myprofile.htm 的路徑就是/myimage/images/myface.jpeg 如何變更超連結文字的顏色？1. 點選【格式】【背景】2. 可以改變超連結 、 瀏覽過的超連結 、 使用中的超連結的文字顏色變更後，按確定 ，則所有的超連結文字就會變成你所設定的顏色。http:/.tw/myprofile/Mydata/ Myimage/images/Myprofile.htm Myfa
9、ce.jpeg/ = 上一層網頁製作基礎研習 講師：翁凌志 31(六) 影像地圖 (在同一個圖片裡建立許多超連結)1. 開啟圖片工具列：【檢視】【工具列】【圖片】2. 插入圖片之後，選取圖片，圖片工具列會呈現可以使用的狀態：其中超連結的工具是 ： (矩形、圓形、角形)3. 點選其中一項工具的圖示（例如：圓形） ，將滑鼠移到選取的圖片上（滑鼠圖示變成鉛筆形狀）4. 按下滑鼠左鍵，拖曳出一個範圍（一個圓形、一個長方形或一個多邊形）網頁製作基礎研習 講師：翁凌志 325. 放掉滑鼠左鍵，會跳出超連結的設定視窗，後續的步驟跟一般超連結的設定相同。(七) 聲音 (背景音樂 )網頁的背景音樂可以使用的檔案
10、格式有：(1) Midi (*.mid) (2) Wave (*.wav)網頁製作基礎研習 講師：翁凌志 33而在檔案容量的比較上，Wave 檔的容量比 Midi 檔大很多。不建議使用檔案很大的音樂當作背景音樂，因為這會拖慢網頁下載瀏覽的速度！1. 背景音樂的設定a. 先把 Midi 檔或 Wav 檔複製到 Web 站台的目錄裡b. 【格式】【背景】c. 切換到一般頁籤，點選背景聲音右方的瀏覽鍵去開啟音樂檔，再按確定就完成背景音樂的設定。(八) 影片網路可直接觀賞的影片格式有：(1) Wmv / Wma (Windows Media Vedio / Audio)：Microsoft 制定的線上
11、影音格式對應的播放程式：Windows Media Player 7 or 9網頁製作基礎研習 講師：翁凌志 34下載：http:/ 作業平台有無內建：有 (其中 Windows XP 內建 Media Player 9)(2) RA (Real Audio)：Real 制定的線上影音格式對應的播放程式 ：RealPlayer 7 or RealOne下載：http:/Windiws 作業平台有無內建：無，需自行下載安裝(3) Mov (Movie)：Apple 制定的影音格式對應的播放程式：QuickTime 4下載：http:/ 作業平台有無內建：無，需自行下載安裝使用者如果點選以上的影音
12、檔案，而且電腦中已有安裝播放程式，會自動播放影片。1. 影片的超連結 (使用者點選連結後，開啟播放程式播放影片)a. 將影片檔複製到 Web 站台的資料夾裡b. 依照建立超連結的方式，建立此檔案的超連結c. 如果是提供他人下載觀賞，可加上按滑鼠右鍵，選擇另存新檔的訊息2. ActiveX 控制項 (直接在網頁中顯示播放程式介面，播放影片) (Media Player 適用)a. 【插入】【進階】【ActiveX 控制項】b. ActiveX 控制項的選項中，選擇Windows Media Player的項目，按確定插入元件網頁製作基礎研習 講師：翁凌志 35c. 選取插入的 ActiveX 控
13、制項，按滑鼠右鍵，選擇ActiveX 控制項內容d. Media Player 的設定中，至少要選擇檔案來源如何製作影片檔案？影片格式 轉檔程式 支援的檔案來源路徑必須修正成相對路徑，否則上傳之後將無法正常使用，最快的做法是：1. 將網頁跟影片檔放在同一個目錄中2. 將 Media Player 控制項的檔案名稱直接填入影片檔的檔名，例如：back_flip1.wmv網頁製作基礎研習 講師：翁凌志 36Wmv / Wma Windows Media Encoder 7 / 9 AVI, MPG, MP3, WAVE, CCDRA Real Encoder AVI, MOV, WAVMov Qu
14、ickTime Broadcaster(需要 QuickTime 6.0.2 以上 ) MPG, WAV, CCDQ：如果使用者的電腦安裝的是 Media Player 7，而網頁使用的是 Media Player 9，使用者的網頁會無法顯示 ActiveX 控制項？A：(1)請在 FrontPage 中切換到 HTML 畫面(2) 在 與 之間貼上以下內容網頁製作基礎研習 講師：翁凌志 38網頁製作基礎研習 講師：翁凌志 39(3) 切換回一般畫面後，可以看到 Media Player 7 的 ActiveX 控制項(4) 檔案來源的設定，請參照 HTML 語法：填入影片檔案的相對路徑(例如
15、：back_flip1.wmv)即可。Wmv 影片網站參考：http:/.tw/music/329book/hamster_record/(九) 其他 ：Flash在網頁中放置 Flash 檔案(*.swf) 的方式有二種：(1) 在 Micromdeia Flash 中發佈(Publish)Flash 檔案時，一併產生網頁檔。(2) 手動輸入 HTML 語法：只需要更改： (1) Width (寬度) (2) Height (高度) (3) movie / src (Flash 檔案來源)【補充】著作權議題1. 文字著作的引用：(1) 約 100 字以內，且有加註出處。 （合理使用） （博碩
16、士論文的資料引用方式）(2) 已獲得作者的授權使用。(參考網站)( 參考網站 2)2. 圖片、音樂、影片的使用：(1) 已申明為自由使用（通常限非商業用途） 。(2) 已獲得作者的授權使用。沒有著作權爭議的文字、圖片：(1)具普遍性、無獨特創意：例如單一顏色、花樣的底圖。(2)其智慧財產權的歸屬為公共財，例如：年代久遠的民俗歌謠（作者亡故已超過 50 年） 。最理想且無著作權爭議的方式是：自己製作的具有獨創性的圖片、音樂、影片。著作權法第六十五條 ：著作之合理使用，不構成著作財產權之侵害。著作之利用是否合於第四十四條至第六十三條規定或其他合理使用之情形，應審酌一切情狀，尤應注意下列事項，以為判
17、斷之基準：一、利用之目的及性質，包括係為商業目的或非營利教育目的。二、著作之性質。三、所利用之質量及其在整個著作所占之比例。四、利用結果對著作潛在市場與現在價值之影響。著作權人團體與利用人團體就著作之合理使用範圍達成協議者，得為前項判斷之參考。前項協議過程中，得諮詢著作權專責機關之意見。四、網頁視窗分割1. 視窗分割 (框架頁網頁 )a. 點選【檔案】【開新檔案】【網頁】網頁製作基礎研習 講師：翁凌志 41b. 切換到框架頁頁籤，選擇橫幅和目錄 ，再按確定c. 框架頁一共分割成三個視窗，可以分別設定網頁如果想要放置已經製作好的網頁，選擇設定起始網頁 ，若沒有，則選擇開新網頁網頁製作基礎研習 講
18、師：翁凌志 42d. 新網頁的存檔：當按下儲存檔案時會出現以下畫面：深藍色的區域代表要儲存的網頁所在的位置。網頁製作基礎研習 講師：翁凌志 43網頁製作基礎研習 講師：翁凌志 44最後一個網頁，則是包含住上面三個網頁的框架網頁 。開啟框架頁 = 同時開啟橫幅 、 選單 、 內容三個網頁橫幅選單 內容框架頁網頁製作基礎研習 講師：翁凌志 452. 框架網頁以及個別網頁的相關設定a. 點選其中一個網頁，按滑鼠右鍵，點選框架內容b. 可以更改名稱 、 寬度 / 高度及其他設定；按框架頁 ，則進入框架頁的設定。Q：框架名稱的用途？A：當網頁視窗被分割成好幾個個別的視窗時，為了要讓超連結的網頁可以出現在
19、指定的個別視窗裡，因此，個別的視窗都需要有一個名稱 。網頁製作基礎研習 講師：翁凌志 46c. 當按下框架頁之後，會出現以下設定畫面：d. 可以將框架間距設為，不勾選顯示框線 ，如此框架會變成隱形狀態。網頁製作基礎研習 講師：翁凌志 473. 超連結之目標視窗（框架） 當網頁是框架式網頁時，可以依照以下步驟，讓連結網頁出現在指定個別視窗裡：a. 選取文字或圖片，點選超連結：b. 選擇要連結的網頁，點選目標框架右方的圖示：c. 可以在使用中的框架頁點選指定的位置，或是在常用的目標框架中挑選超連結的目標框架。d. 如果不是在框架頁模式下的網頁，則直接手動輸入目標設定 ，填入目標框架的名稱就可以。網
20、頁製作基礎研習 講師：翁凌志 48五、網頁架構理論介紹一般來說，網頁(站)至少可區分成三個部份：(1) 網站名稱：純文字，或是圖片(Banner)。會固定出現在網頁視窗的上方。(2) 連結選單：各個網頁的超連結，通常也代表網站所包含的內容分類。多半在網頁視窗的左方、右方，或是左、右兩方都有。(3) 網頁內容：扣除掉網站名稱、連結選單的其他視窗區域，就是用來顯示網頁內容的部份。網站名稱超連結 1超連結 2超連結 3超連結 4網頁內容而建構的方式可以分為以下幾種：(1)採視窗分割方式代表性網站：http:/www.eclipse.org/http:/140.127.45.25/3d/3d/(2)單
21、一網頁+表格排版：(多數國外網站的做法) 代表性網站：http:/http:/.tw/http:/www.uddi.org/http:/www.und.edu/(3)Flash 網頁代表性網站：http:/ 美工規劃 製作的難易度 版面規劃的自由度視窗分割 容易 複雜 容易 低單一網頁 複雜 容易 容易 高Flash 網頁 複雜 容易 複雜 中網頁製作基礎研習 講師：翁凌志 49六、簡易的網頁美工設計1. 先決定採用視窗分割或單一網頁模式來進行設計。如果是視窗分割，要先決定好彼此之間的寬度、高度，避免以後再去變更寬度 / 高度。如果是單一網頁，則要先分配好各個內容的區域大小。2. 可運用 Ph
22、otoImapct 等簡易使用的美工軟體，製作網站標題的 Banner 圖案。標題圖案的顏色最好可以跟網頁背景顏色相互搭配。3. 背景底圖可在網路中尋找色調柔和、花樣不會太過複雜的圖檔。使用原則是 ：內容文字可以清楚的看見。4. 運用三到五種可互相搭配的顏色，做為網頁外觀的基礎顏色。5. 文字顏色、背景底圖的顏色或表格的框線、背景顏色應以上述顏色來進行搭配。6. 文字、圖片、表格的位置排版，也會影響美觀。範例網站：http:/inservice.org.tw/http:/.tw/fred1219.tw/index2.htmhttp:/datas.ncl.edu.tw/theabs/1/7. 購
23、買圖庫光碟 ，直接當作背景底圖。或是以 PhotoImpact、Photoshop 加工製作標題 Banner、背景底圖。螢幕解析度的考量使用者的螢幕解析度可能是800 * 600 、 1024 * 768或是更高 / 更低的解析度如果要讓網頁在以上解析度的情況下都可以美觀的呈現，可以注意以下部份的設計：(1) 大型的圖示 (例如網站標題的 Banner 圖案)，應該以最低限度的寬度來製作以現今的使用者來說，大部份的使用者皆以 800 * 600 的解析度為主，因此，圖示的寬度應該在 800 pixel 以內，而高度應該在 600 pixel 以內。如果是大型的背景底圖，圖案右方或下方的設計可
24、以使用淡出的技巧，讓圖案跟網頁背景顏色可以融合。範例網站：http:/www.eclipse.org/(2) 內容文字方面，不要使用強迫斷行將內容分成一行一行當你以為多少字數恰好是一行時，使用者也許使用較低的解析度，或是放大字體，使你的一行變成二三行。(3) 表格的寬度應儘可能在最低限度的寬度內(800 pixel)過寬的表格，使用者會看不到部份的內容。Q：如果真的只能設計成在特定解析度下觀看的網頁？A：那麼就在網頁中最明顯的位置提醒使用者瀏覽的最佳解析度。網頁製作基礎研習 講師：翁凌志 50七、網頁可用資源搜尋有專門的網站提供網頁製作的資源，例如：背景底圖、可愛的小圖示、背景音樂，此外，特殊
25、的字型也可以利用在美工設計上，使你設計出來的圖示具有創意。以下提供可以用來搜尋的關鍵字：關鍵字 用途網頁 素材 背景底圖或小圖示 (素材為日語用法)網頁 圖庫 背景底圖或小圖示web background 背景底圖 (搜尋英文網站用)web texture 背景底圖 (搜尋英文網站用)免費 字型 搜尋可免費使用的字型Free font 搜尋可免費使用的字型在使用搜尋到的網路資源時，要注意：1. 確定沒有著作權的問題。2. 先掃毒，再使用，免費的檔案也可能代表免費的病毒。方便瀏覽的網頁比花俏的網頁更受人喜愛，適度的裝飾網頁才不會適得其反。八、視覺設計簡介背景底圖或是背景顏色將決定整體網站的色系走
26、向，而決定了此一色系之後，文字、表格、搭配的小圖示等等的顏色、色調就應該要與背景相互配合，讓整體網站的網頁內容美觀且令人愉悅深色系列的背景顏色往往給人一種沈重鬱悶的感覺，而明亮的淺色則是給人輕鬆、活潑的觀感，無論選擇那一種走向，重點是：網頁的主體應該是文字內容，而不是花俏的背景底圖 ，而背景的顏色與文字的顏色若能搭配適當，則文字便能夠清楚的呈現在使用者的眼前。附帶一提，背景底圖選用的重要事項：底圖的容量是否過大 ，如果網頁的背景底圖容量很大，則使用者在瀏覽網頁時，會覺得速度很慢，甚至連網頁內容也不看，就把網頁關掉。顏色搭配的選擇上，可以用下列的原則來進行配色：1. 相近色：例如深淺明暗不同的二
27、種綠色、藍色，紅色與粉紅色，藍色與紫色2. 互補色：紅色與綠色，藍色與橙色，黃色與紫色3. 連續色：白色 / 灰色 / 黑色，黃色 / 綠色 / 藍色4. 白色或黑色搭配其他顏色：白色與粉紅色，白色與紅色，黑色與藍色5. 冷色系或暖色系：冷色系如藍色、白色、綠色，暖色系如紅色、橙色、棕色此外，深色背景最好使用淺色、亮色的文字，淺色背景則用深色、暗色的文字最恰當。網頁製作基礎研習 講師：翁凌志 51範例網站：http:/ F09A84 ED9DAD E98587 D3AD9A D2AEA8 D16B90 B68BB4 ACA0B2 9E62589999B0 8F8FBE 744283 64527
28、F 62629FFFF6C7 FDD6B3 FAC186 F8C5B8 F7C5C8 F4AA29 F09A84 E36D4A E1E54E DB535ABEE1F6 BDD1EA BCC0DD 9AB6C6 9AA8BB 8F8FBE 76A6D4 62629F 4378B6 0089BE00468BFFF6C7 FFEA9A FDD6B3 FAC186 F8C5B8 F0F1C6 EAEAEA D6BDA3 D3AD9A D1AEB6B47551 A7925DFFFFFF FFF6C7 FFEA9A FDD6B3 FAC186 F8C5B8 F0F1C6 F09A84 D8E9D6 D6B
29、DA3D3AD9A D2AEA8 D1C9DF D1AEB6 BEA7B4 BCC0DD B2BDAA ACCB9A ACCB39 9DB4A89CB5B7 95A967FFF6C7 FFEA9A FDD6B3 FAC186 F0F1C6 EAEAEA D6BDA3 A7925DFFFFFF FFF6C7 FDD6B3 F7C5C8 F0F1C6 F09A84 ED9DAD E9BFD4 E98587 E2BFD4網頁製作基礎研習 講師：翁凌志 52D1C9DF 75C1DDFFF6C7 FFEA9A FDD6B3 FAC186 F8C5B8 F7C5C8 F0F1C6 ED9DAD E2BF
30、D4 D1C9DFD16B90 C6DA87 96C8AC 62629F 40A471FFFFFF FFF6C7 FDD6B3 F8C5B8 F7C5C8 F0F1C6 EAEAEA E2BFD4 D8E9D6 D1C9DFFFFFFF D8E9D6 C0E0E6 BEE1F6 BDD1EA 9CB5B7 9AB6C6 76A6D4 4378B6 0089BEFFF6C7 FDD6B3 F8C5C8 F7C5C8 F0F1C6 ED9DAD E2BFD4 D1C9DF C6DA87 C0E0E6BDD1EA 9999B0 96C8AC 93CACF 8F8FBE 75C1DD 744283 6
31、2629FF8C5B8 F7C5C8 F09A84 ED9DAD E98587 E2BFD4 D16B90 C5003F B68BB4 9A0058890037 720049 64527FFFEA9A FFDF00 EC9800 E98587 D953A D16B90 C5003F 9A0058 96C8AC 77B6A40A471 008955FFF6C7 FFE54E FDD6B3 F4AA29 F0F1C6 D6BDA3 B2BDAA A7925D 95A967FFF6C7 FDD6B3 F8C5B8 F7C5C8 F4AA29 F0F1C6 E36D4A E1E54E D3AD9A D
32、2AEA8B2BDAA ACCB39 9DB4A8 9CB5B7 006777 00A5D網頁製作基礎研習 講師：翁凌志 51FFFFFF FFF6C7 F7C5C8 EAEAEA E2BFD4 D8E9D6 D2AEA8 D1AEC0 C0E0E6 BEA7B49AB6C6活動主題：請製作框架式網頁，分割形式使用橫幅和目錄 ，並把框架隱形化：1. 框架頁命名為 index.htm2. 上方橫幅命名為 banner.htm(1) 一個網站主題(2) 背景音樂3. 左方選單命名為 menu.htm放置五個超連結一個可以連結到原本的內容網頁（超連結文字：觀看內容 ）三個可以連結到外面的網站（例如：高雄市教育局、高雄市政府、其他相關網站）一個用來讓使用者可以寄 E-Mail 給你（超連結文字： 問題詢問 ）4. 右方內容網頁命名為 main.htm請隨意找內容填入，至少五個段落，每個段落二十行（可使用無障礙網頁開發規範.doc ）每個段落的主題請製作為書籤並在內容網頁的最上方放置五個可以跳到書籤位置的超連結5. 請在上面配色表中挑選其中一組顏色，使用在：banner.htm 的背景顏色menu.htm 的背景顏色main.htm 的背景顏色及內容文字的顏色
