網站規劃與設計上課補充教材

第六堂課： 網頁影像的處理

一般來說，網頁都是圖文並茂的模樣，現在也有很多網頁圖片可以讓你點擊，這是相當有趣的功能。不過一般來說，我們會希望影像檔案放置於 images/ 目錄下來統一管理， 同時，網頁上的圖片解析度不要太大，否則會佔用很大的頻寬，會有點問題。因此，你需要處理過你的影像後才上傳到伺服器上，以避免用戶端與你的伺服器流量爆表～
本章重點目標：
  1. 常用的圖片格式中，瀏覽器幾乎肯定支援的有：gif 與 jpeg 兩種。但常用的格式尚有：
    • GIF：使用八個位元來儲存顏色(28)，所以顏色最高僅達 256 色。但 GIF 可以設計動畫小圖示、底色為透明等。 不過如果用在照片圖檔方面時，可能失真的情況會較嚴重；
    • JPEG：JPEG 的副檔名為 .jpg，由於可以容納 16 百萬色，色彩與畫質會比 GIF 檔案好很多。

  2. 插入圖片的方法使用 <img> 這個標籤，這個標籤為獨立標籤，因此最後面要加上 / 來結束較佳。 詳細的標籤屬性有：
    • src="圖檔路徑"
    • alt="圖片說明" title="圖片說明"
    • width="調整圖片寬度" (不要用！)
    • height="調整圖片高度" (不要用)
    • border="有沒有外框的外框寬度，預設為 0"
    • align="top, middle, bottom, left, right" ，設定圖片在頁面的那個位置上；
    • usemap="#地圖名稱" 這個較難，底下會持續講解。
    • 可以透過 figure + figcaption 將標題與圖片整合成為一個喔！

  3. 實際練習：請下載 這個檔案 及 這個檔案，讓圖示可以正確的展示在文字左方喔！ 注意將圖檔給他貼到該頁面上！。之後依序加入各項屬性參數！包括 alt, title...

  4. 再接再厲的練習：承上題，新建立一個檔案，內容如 這個檔案 所示， 而你在原本的畫面中，只要按下圖片，就能夠連結到上述的檔案，要如何做？

  5. 動畫設計：請利用 photoimpact 設計一系列的動畫來增加你網頁的精彩度！

  6. 讓圖片變成有多種可按鈕的方式，一張圖檔就是一面『地圖』，你可以在地圖上面按下按鈕！ 可以參考 http://www.dic.ksu.edu.tw/intro_1.html 最右上方的黃色連結小按鈕，參考他的原始碼(搜尋 map )，你會發現到這個功能的！
    • map name="mapname"
    • area shape="rect" coords="x1,y1,x2,y2" href="url" /
    • area shape="circle" coords="x1,y1,R" href="url" /
    • area shape="poly" coords="x1,y1,x2,y2,x3,y3...xn,yn" href="url" /
    • /map

  7. 那如何定位呢？注意網頁都是：由上而下，由左而右，因此你可以使用任何影像編輯軟體來開啟該影像， 根據左上角定位為 0,0 ，右下角定位為最大範圍，就能夠定義出你所需要的位置了！ 請參考實作題的資料。

  8. 實做：設計四個學校的連結！相關資料為：台灣圖檔 解釋文件！ ，請依據相關的 URL 來處理連結的問題喔！

  9. 實做：如果想要點選文字時，圖畫的內容會有資料顯示怎辦！？需要用到 display 這玩意兒喔！如同上一題，可以這樣做看看：
    • 先做出一個固定的方塊，大小大約是 600px * 600px ，並且 padding 與 margin 都先設定為 0，記得要有 position 為 relative 等字樣
    • 讓圖片浮在右上角固定，並算出每個學校在這個上面的大方塊當中的 X, Y 位置點
    • 先做出四個學校名稱的清單項目，不要有連結，直接是 ul li 即可！位置或 margin, padding 請自行調配
    • 在 ul li 裡面，透過使用 b 或者其他的非區塊標籤，將所需要出現的文字帶入文中
    • 透過 ul li b.name 去設定好四個學校的定位點會出現在哪個地方，確定好之後，代入 display: none 取消顯示 (position: absolute; top, left 等等)
    • 使用 li:hover b {display: block} 來顯示
    • 視情況，有可能會使用到 z-index 這個顯示的順序項目喔！
本章練習與習題：
  1. 如同實做的資料，請將原圖內成大附近再加一個崑山，然後連結到崑山的首頁去！
  2. 請自行使用 photoimpact 之類的軟體設計你所需要的網頁 header 項目的橫幅！
  3. 將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！