第八章、網頁圖片設計
第八章內容重點：
- 常用的圖片格式中，瀏覽器幾乎肯定支援的有：gif 與 jpeg 兩種。但常用的格式尚有：
- GIF：使用八個位元來儲存顏色(28)，所以顏色最高僅達 256 色。但 GIF 可以設計動畫小圖示、底色為透明等。
不過如果用在照片圖檔方面時，可能失真的情況會較嚴重；
- JPEG：JPEG 的副檔名為 .jpg，由於可以容納 16 百萬色，色彩與畫質會比 GIF 檔案好很多。
- 插入圖片的方法使用 >img< 這個標籤，這個標籤為獨立標籤，因此最後面要加上 / 來結束較佳。
詳細的標籤屬性有：
- src="圖檔路徑"
- alt="圖片說明" title="圖片說明"
- width="調整圖片寬度" (不要用！)
- height="調整圖片高度" (不要用)
- border="有沒有外框的外框寬度，預設為 0"
- align="top, middle, bottom, left, right" ，設定圖片在頁面的那個位置上；
- hspace="像素寬度" 設定圖片與文字的水平間隔；
- vspace="像素寬度" 設定圖片與文字的垂直間隔；
- usemap="#地圖名稱" 這個較難，底下會持續講解。
- 實際練習：請下載 08_chap_08-1.txt 及 08_chap_08-1.jpg
來進行課本 page 8-5 的範例，建立的檔案檔名為 chap08-1.html
注意將圖檔給他貼到該頁面上！。之後依序加入各項屬性參數！包括 alt, title...
- 繼續練習：承上題，請查閱 align 的 top, bottom 及 middle 有何作用？然後再看看 left 及 right 有何作用？
同時將 left, right 配合 hspace 及 vspace 來調整圖與文字的間距！(參考 word 設計時，有一種是加圖到一行上面，
一種是讓圖『浮』在字上面的感覺！就是文繞圖的樣式啦！)
- 再接再厲的練習：承上題，參考 page 8-19 的說明，新建立一個檔案，內容如 08_chap_08-2.txt 所示，
而你在原本的 chap08-1.html 畫面中，只要按下圖片，就能夠連結到 chap08-2.html ，要如何做？
- 表格與圖片的合併處理：如課本 page 8-28 所示，請下載 08_chap_08-3.txt
來進行課本的需求。
- 動畫設計：請利用 photoimpact 設計一系列的動畫來增加你網頁的精彩度！
- 讓圖片變成有多種可按鈕的方式。參考課本 page 8-20 的說明，一張圖檔就是一面『地圖』，你可以在地圖上面按下按鈕！
可以參考 http://www.dic.ksu.edu.tw/index.html
最右上方的黃色連結小按鈕，參考他的原始碼(搜尋 map )，你會發現到這個功能的！
- 那如何定位呢？注意網頁都是：由上而下，由左而右，因此你可以使用任何影像編輯軟體來開啟該影像，
根據左上角定位為 0,0 ，右下角定位為最大範圍，就能夠定義出你所需要的位置了！
請參考實作題的資料。
本章習題：
- 參考 page 8-34 的內容，設計出四個學校的連結！相關資料為：台灣圖檔
08_chap_08-01.txt ，檔名為 chap08-01.html
- 參考 page 8-33 的內容第1題，下載實際的檔案：08_chap_08-02.txt, 08_chap_08-02-big.jpg, 08_chap_08-02-small.jpg
，建立的檔名為 chap08-02.html 。
- 請自行使用 photoimpact 之類的軟體設計如下的資料，並請將圖檔直接顯示到網頁 chap08-03.html 中。
- 類似 資傳系首頁 的那個橫幅畫面，大小約為 800x300 左右。
- 類似 中央氣象局 左邊的按鈕列！至少五個以上！(可自行設定風格)，
大小約為 100 寬度內， 50 高度內！(按鈕請不要太大！)
- 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！
|
