動態網頁設計入門r92045/csieTrain/fp-slides/frontpage/fp… · •gif...

FrontPage & Flash動態網頁設計入門

網頁內容豐富化：超連結

講師：陳昭源CSIE, NTU September 15, 2007

Dept. of Computer Science & Information Engineering,National Taiwan University

September 15, 2007 Page 2

Outline

• 超連結– 規劃超連結– 超連結形式與目的– 插入超連結– 書籤– 超連結強化– 超連結管理



規劃超連結

• 超連結– 擺脫循序閱讀的模式，讓使用者選擇自己想瀏覽的部份– 網站內的超連結必須仔細規劃，避免組織雜亂無章

•使用 FrontPage 網站導覽模式建置網站架構



超連結形式與目的

• 網站內部連結– 連結網站資料夾內的其它網頁、檔案或書籤標記的位置– 通常使用相對路徑連結

• 網站外部連結– 可以連結別人的網頁、FTP 站台、Email 甚至是檔案位址– 使用絕對路徑連結

• FrontPage 預設超連結使用藍色有底線字體，若網站記錄存在於瀏覽器中則呈現紫色字體

• HTML tag：



插入超連結

• 插入超連結– 選取欲加入超連結的文字– 上方選單，插入超連結或點選工具列「插入超連結」



插入站內超連結

• 已存在網頁或檔案



插入站內超連結

• 直接透過檔案清單以拖曳方式加入目前編輯網頁中



設定超連結工具提示

• 選取要加入工具提示的文字或圖片或將插入點移至已設定超連結的位置點選工具列「插入超連結」點選「工具提示」在「工具提示文字欄」輸入提示文字，點選「確定」



插入外部超連結

• 進入「插入超連結」對話窗




• 亦可在對話框中自行輸入欲連結網址




• 直接從瀏覽器位址列將網址拖曳至正在編輯網頁中



超連結其他設定

• 設定圖片超連結– 點選圖片點選工具列「插入超連結」

• 移除超連結– 將插入點移至設定超連結的文字間或是選取已設定超連結的圖片按右鍵，選擇「超連結」命令，再點選「移除超連結」



超連結其他設定

• 點選超連結後開新視窗– 進入「插入超連結」– 點選「目標框架」– 屬性 target=‘_blank’



超連結至 Email

• 進入「插入超連結」對話窗



超連結至 Email

• 設定完成後，以瀏覽器預覽；點選 Email 設定文字或圖片，即會開啟預設 Email 應用程式



超連結至其他服務

• 如同插入外部連結的方式，但在網址欄輸入欲使用之服務的通訊協定與網路位址

– 連結至 FTP 站台• ftp://站台位址

– 連結至 BBS• telnet://BBS 位址



書籤

• 書籤的目的– 用來建立網頁內的連結點– 當網頁內容很多時，瀏覽者不必從頭看起，只要點選網頁的索引標題，就可以立即跳至網頁中已設定書籤的相關主題，省去在網頁中拉曳捲軸及尋找的麻煩

– 範例網站（F477）：拍攝技巧頁



書籤

• 加入書籤– 先在欲連結的位置擺放連結記號，即書籤

– 插入點移至欲連結位置上方選單，插入書籤



書籤

• 連結書籤– 點選要建立連結的文字或圖片，進入「插入超連結」視窗

• 【實做】運用書籤雖可以迅速跳到特定位置，但瀏覽者想回到網頁最頂端時，還是得慢慢地拉動捲軸；該怎麼解決？



連結至其他網頁的書籤

• 在其他檔案中已設定好書籤；點選欲建立連結的文字或圖片，進入「插入超連結」視窗




• 選擇檔案中已存在的書籤




• 網址列會出現完整位址



書籤設定

• 修改書籤內容– 將插入點移到已加入書籤的文字間或選取書籤圖按右鍵，「書籤內容」



書籤設定

• 刪除書籤– 利用書籤交談窗刪除網頁中的書籤

•先選取書籤名稱點選「到」（網頁會自動移至書籤的位置）點選「清除」

– 直接選取網頁上的書籤圖示按 [Delete] 鍵刪除– 當刪除的書籤數量很多時，利用書籤視窗會比較省事



超連結強化效果

• 超連結變色– CSS 效果，需使用有支援 CSS 的瀏覽器才會正確顯示



超連結變色設定

• 在編輯網頁上按右鍵網頁內容，「進階」– 在此設定的為「當滑鼠移至超連結上」時的效果




• 在編輯網頁上按右鍵網頁內容，「設定格式」– 在此可設定超連結原始顏色、連結中顏色及連結後之顏色




• CSS 程式碼– 擺在網頁 HTML 原始碼的之間

a:link { color:顏色碼; text-decoration:none; }a:visited { color:顏色碼; text-decoration:underline;}a:active { color:顏色碼; font-size:150%; }a:hover { background:顏色碼; color:顏色碼; text-

decoration:none; font-family:標楷體; }

• 注意！此種設定方式與 FrontPage 設定方式相同，皆會對網頁中所有的超連結生效，無法指定特定超連結；該如何指定特定超連結樣式？



管理超連結

• 網站「超連結」檢視模式



管理超連結－超連結檢視

• 變更檢視中心（方法一）




• 變更檢視中心（方法二）




• 在空白處按下滑鼠右鈕，可設定超連結的顯示方式




• 檢查超連結




• 若超連結失效，則會出現斷線的畫面

• 若超連結顯示異常，可使用上方選單，工具重整超連結



管理超連結

• 網站「報告」檢視模式



管理超連結－報告檢視




• 修復超連結– 選定中斷的超連結，按右鍵編輯超連結




• 偵測未知是否有效的超連結– 連結狀態顯示問號– 選定未知的超連結，按右鍵檢查超連結

FrontPage & Flash動態網頁設計入門

網頁內容豐富化：圖片

講師：陳昭源CSIE, NTUSeptember 15, 2007



Outline

• 圖檔格式簡介• 加入圖片• 圖片調整• 圖片效果• 圖文並列• 影像地圖• HW #03



網頁圖片基本概念

• 圖檔的格式有很多種，我們必須選擇體積小且能在網頁中以最佳狀態顯示的格式，這樣不但能讓網頁看起來更美觀，還能縮減圖片下載的時間

• 網頁中常用的圖檔格式包括 GIF、JPEG、PNG 三種– 皆屬於壓縮的圖檔格式– 檔案的資料量很小，適合用於網路傳輸– 適用於各種作業系統平台



圖檔格式簡介－GIF

• 適合儲存具有線條、大塊色彩或是含有文字的圖片– 例：卡通圖案、商標、按鈕等構圖簡單、顏色分明的圖片

• GIF 圖檔格式還具有以下幾個特點– 優秀的無損壓縮演算法在某一程度上保證圖片質量的同時將檔案大小變得很小

– 可設定透明背景– 可儲存動畫格式– 僅能處理 256 色（不適合照片）– 以交錯圖的形式顯示



圖檔格式簡介－JPEG

• JPEG（或稱為 JPG）圖檔格式可儲存圖片中的所有色彩，因此像是全彩的風景照、人物照等都很適合

• JPEG 具有下列兩項特點– 強大的壓縮率，尤其在色調變化平滑的相片或寫實繪畫的表現上比其他方法如 GIF 有更好的表現

– 採用破壞性的壓縮方式造成壓縮時會捨棄一些像素資料；若圖片中具有大塊的單一純色或是明顯的線條、文字，則不適合儲存成 JPEG 格式



圖檔格式簡介－PNG

• PNG，Portable Network Graphics 可攜式網路圖片；另有一說，PNG 的來源是 PNG is Not GIF

• PNG 圖檔格式的開發，主要是用來取代 GIF 格式• 大部分 GIF 格式的優點 PNG 都有，例如透明背景、交錯顯示、跨平台等；此外，PNG 採非破壞性的壓縮方式，可減少圖片的失真現像

• PNG 在網際網路上正逐漸被廣泛使用（1996 年 10 月 1 日成為W3C 標準，現行版本為 2003 年 11 月10 日發布的版本）



Outline




加入電腦中的圖檔

• 欲加入的圖檔已存在於電腦中

– 工具列，點選「從檔案插入圖片」或

– 上方選單，「插入」「圖片」，點選

「從檔案」

– HTML：



加入網路上的圖片

• 直接將瀏覽器顯示的圖片拖曳至編輯網頁中• 一旦原網站中圖片被刪除或網站消失，網頁中的圖片將無法顯示



加入多媒體藝廊圖片

• 上方選單，「插入」「圖片」「美工圖案」



下載更多美工圖案

• 微軟 Office 線上多媒體藝廊– http://tinyurl.com/ynd4wr

http://tinyurl.com/ynd4wr



儲存網頁中的圖檔

• 存檔編輯中網頁時會出現「儲存內嵌檔案」視窗



儲存網頁中的圖檔

• 變更儲存資料夾– 選定欲變更儲存資料夾的圖檔，點選「變更資料夾」



轉換圖檔類型

• FrontPage 會依據圖片的色彩決定圖片存檔格式– 當顏色少於 256 色，會存成 GIF 圖檔– 顏色多於 256 色時，則會存成 JPEG 圖檔

• 變更圖檔類型– 存檔，「儲存內嵌檔案」視窗點選「圖片檔案類型」



轉換圖檔類型

• 當選擇 GIF 或 JPEG 圖檔格式時，可由視窗下方設定相關選項



刪除圖片

• 點選圖片（圖片四周出現 8 個控點）按 [Delete]鍵刪除• 圖片存到網站以後, 即使將圖片從網頁中刪除, 圖檔仍存在於網站中, 隨時可以重新插入

• 雖然刪除了網頁上的圖片, 但是圖檔仍儲存在網站中。如果沒有將網站裡不需要的圖片刪除, 在日積月累後, 這些圖片會佔用掉許多網站空間。刪除不需要的圖片, 請切換到網站的資料夾模式, 或開啟資料夾清單來進行刪除



Outline




調整圖片大小

• 直接拉曳控點調整圖片的長與寬– 即使縮小了圖片的尺寸, 仍不會改變圖片的檔案大小！– 調整圖片大小僅影響瀏覽器的顯示結果，不影響原始檔案



調整圖片大小

• 精確調整大小– 點選圖片，按右鍵

圖片內容



調整圖片大小－重新取樣

• 將圖片重新取樣，以符合實際大小– 點選圖片（四周出現 8 個控點）右下角，「圖片動作」– 「圖片工具列」「重新取樣」– 經重新取樣縮小的圖檔，像素已經過重新排列，因此，若放大至原始大小也無法恢復原來圖檔品質



改變預設的連線速度

• FrontPage 預設以 56Kbps 的傳輸速率來計算網頁的下載時間，若想改變預設連線速度，如下操作：



調整圖片位置

• 圖片在 FrontPage 中如同一般字元，我們可以使用工具列上的「段落對齊」，調整圖片顯示位置– HTML：align 屬性– 插入網頁的圖片預設被視為一般字元，只能放在文字之間，不能擺放在頁面中的任意位置；因此，當頁面中沒有任何文字時，圖片就無法進行搬移

– 破解：「圖片工具列」「絕對位置」



圖片與文字的間距

• 點選圖片，按右鍵「圖片內容」「外觀」



圖片框線

• 點選圖片，按右鍵「圖片內容」「外觀」



替代文字

• 點選圖片，按右鍵「圖片內容」「一般」



設定圖片編輯器

• 點選「圖片內容/一般」視窗中的「編輯」，可直接在FrontPage 中開啟影像處理軟體來編輯圖片– 預設開啟Microsoft Office Picture Manager– 欲指定熟悉的影像處理軟體，請點選上方選單，「工具」「選項」



Outline




圖片上加入文字

• 點選圖片，點選「圖片工具列」的「文字」，此時圖片中會出現文字框，直接輸入即可

– 「文字」功能只能替 GIF 圖檔加上文字，若應用在其他格式檔案，會出現轉檔提示訊息

– 解決方案•使用影像處理軟體進行加入文字的動作•使用文字方塊（不改變原始圖檔）



圖片翻轉

• 圖片工具列



調整圖片的對比與亮度

• 圖片工具列



裁剪圖片

• 「圖片工具列」「裁剪」



特殊效果

• 色彩效果– 「圖片工具列」「色彩」

• 按鈕效果– 「圖片工具列」「按鈕形」



特殊效果

• 透明背景– 僅能對 GIF 圖檔造成透明背景，若使用於其他格式圖檔，則會出現轉檔提示訊息

– 建議使用其他影像處理軟體，先行將圖片背景透明化– PNG 與 GIF 皆支援透明背景



自動影像目錄標籤

• 影像目錄標籤的作用就是將大圖變成小圖，當瀏覽者在瀏覽網頁時，如果覺得看小圖不過癮，只要在小圖上按一下，就能看到原始的圖片

– 點選圖片，「圖片工具列」「自動影像目錄標籤」



設定「自動影像目錄標籤」

• 上方選單，「工具」「網頁選項」，切換到「自動影像目錄標籤」視窗



Outline




圖文並列

• 圖片和文字可以說是網頁中的兩大主角，但有時會因為大小及排列等問題，使網頁看起來不協調，此時得借助各種圖文並列的方式適當地應用於網頁中

• 點選圖片，雙擊「圖片內容」視窗「外觀」



圖文並列



圖文並列

• 由於圖片預設會被視為一般字元, 因此只能插入在文字之間, 而其右邊或左邊都只能顯示一行文字



圖文並列

• 利用圖片的對齊方式，讓圖片靠右或靠左對齊就能突破預設僅能顯示一行文字的限制！



Outline




製作影像地圖

• 圖片超連結– 點選圖片，按右鍵「超連結」

• 一般而言，一張圖片只能建立一個超連結；但是，若運用影像地圖（Image Map）的技術，則可以使同一張圖片包含多個超連結，也就是說，在圖片的不同位置按下就會分別連結到不同的內容。

• 範例網站編修技巧



製作影像地圖



製作影像地圖

• 製作影像地圖的方法, 是先將一張完整的圖片分割成幾塊區域, 再分別為每個區域指定超連結– 「圖片工具列」「矩形作用區」（視情況可自行選擇原圓形或多角形作用區），圈選欲建立連結的區域



製作影像地圖

• 劃分連結作用區時，若有作用區重疊的情況，則重疊區域的連結目標將以最先設定的為主

• 刪除作用區– 點選欲刪除之作用區按 [Delete] 鍵刪除

• 修改作用區位置– 點選作用區，直接拖曳至目的位置

• 調整作用區大小– 點選作用區，直接拖曳控點調整大小



製作影像地圖

• [實做] 製作影像地圖– 點選大門：進入台大資訊系統訓練班首頁– 點選建築物其他部分：進入台大資訊系首頁– 點選圖片其他地方：進入台大首頁



Outline




HW #03

• 製作 [我的相簿] 網頁（album.htm）– 相簿內容至少包含五張照片（最大 400px*300px）– 每張照片旁附加描述（拍攝時間、地點介紹、心情等）

• 修改 [自我介紹] 網頁（intro.htm）– 在自我介紹內容下方附加 [常用連結] 類別

•至少五個外部網站連結，並以條列式顯示，規定同 HW #02• 將 index.htm、intro.htm、album.htm 相互連結

– 超連結置於各網頁最上方• 各頁最下方附加 [Mail to Me] 連結

– 點選可開啟郵件軟體，寄信給作者



HW #03

• BONUS– 相簿上方製作縮圖索引

• Credits: +2 points•點選可連結至下方圖片位置（參考範例）

– 相簿照片旁附加 [Back to Top] 連結• Credits: +1 points•點選可回至最上方

– 在[自我介紹]（intro.htm）下方附加 [相簿索引地圖] • Credits: +2 points•點選地圖上某位置的照片可連結至相簿中該照片位置• [相簿索引地圖 ]僅為一張圖片！

http://csietrain.byethost18.com/144/FP08/album.htm

FrontPage & Flash�動態網頁設計入門Outline規劃超連結超連結形式與目的插入超連結插入站內超連結插入站內超連結設定超連結工具提示插入外部超連結插入外部超連結插入外部超連結超連結其他設定超連結其他設定超連結至 Email超連結至 Email超連結至其他服務書籤書籤書籤連結至其他網頁的書籤連結至其他網頁的書籤連結至其他網頁的書籤書籤設定書籤設定超連結強化效果超連結變色設定超連結變色設定超連結變色設定管理超連結管理超連結－超連結檢視管理超連結－超連結檢視管理超連結－超連結檢視管理超連結－超連結檢視管理超連結－超連結檢視管理超連結管理超連結－報告檢視管理超連結－報告檢視管理超連結－報告檢視管理超連結－報告檢視FrontPage & Flash�動態網頁設計入門Outline網頁圖片基本概念圖檔格式簡介－GIF圖檔格式簡介－JPEG圖檔格式簡介－PNGOutline加入電腦中的圖檔加入網路上的圖片加入多媒體藝廊圖片下載更多美工圖案儲存網頁中的圖檔儲存網頁中的圖檔轉換圖檔類型轉換圖檔類型刪除圖片Outline調整圖片大小調整圖片大小調整圖片大小－重新取樣改變預設的連線速度調整圖片位置圖片與文字的間距圖片框線替代文字設定圖片編輯器Outline圖片上加入文字圖片翻轉調整圖片的對比與亮度裁剪圖片特殊效果特殊效果自動影像目錄標籤設定「自動影像目錄標籤」Outline圖文並列圖文並列圖文並列圖文並列圖文並列Outline製作影像地圖製作影像地圖製作影像地圖製作影像地圖製作影像地圖OutlineHW #03HW #03

動態網頁設計入門r92045/csieTrain/fp-slides/frontpage/fp… · •gif...

Documents

Transcript of 動態網頁設計入門r92045/csieTrain/fp-slides/frontpage/fp… · •gif...