第三章 圖文並茂的網頁.

分隔線

  經過前兩章的學習,你應該可以寫出一個最基本的網頁了。但是要讓你的網頁看起來更吸引人,則必須加入圖檔才行哦!你可以上網去下載免費共享的圖檔,當然也可以自己動手製作圖檔哦!

網頁圖檔的基本知識

  在網頁中所運用的圖片必須符合清晰資料量小的基本需求,因為圖片「清晰」才能使瀏覽者一目了然,而「資料量小」的圖檔才不會佔用太多的下載時間。
  圖片的格式有很多種,適合放在網頁上的只有Gif格式( .gif)和Jpg格式( .jpg)兩種。另外在「小畫家」所製作出來的圖檔,是屬於Bmp格式( .bmp),不適合放在網頁中喔!
製作圖檔的軟體相當多,本章僅介紹現在最受歡迎的繪圖影像處理軟體Paint Shop Pro,簡稱(PSP)。它的介面簡單、功能超卓齊備!它不但可以支援掃描器和數位相機以及繪圖壓力板來增強繪製圖檔的功力,並且有圖檔格式轉換、螢幕抓圖以及瀏覽圖檔等功能。但是本章只教導你如何將圖檔轉成適合網頁顯示的圖檔、將已經製作好的圖檔加到網頁中及操作視窗功能文字說明。至於詳細繪圖功能的使用方法請參考相關書籍或有任何疑問可到溫普敦公司網(http://www.winpreton.com.tw)查閱。

Paint Shop Pro(PSP)簡介

 安裝PSP
 啟動PSP
  點選「開始」/ 「程式集」,再以滑鼠左鍵點選「Paint Shop Pro 5」,就啟動了「Paint Shop Pro」。
 操作視窗簡介1  操作視窗簡介2  工具列簡介  工具欄簡介

轉換圖檔格式

 轉換成GIF格式
  GIF格式是使用無失真壓縮法來減少資料量,要存成GIF格式的圖檔,是要轉換成256色的色彩模式,利用Paint Shop Pro特殊「圖檔格式轉換 」功能的話,就可以直接轉換格式了啦!
  實作練習
   請啟動「Paint Shop Pro 5」,並準備好想要轉換格式的圖檔
 轉換成JPG格式
  JPG格式是採用失真壓縮法來減少資料量,也就是說:壓縮資料量越多,圖像失真的情形就越明顯,它是屬於全彩的色彩模式。
  實作練習
   請啟動「Paint Shop Pro 5」,並準備好想要轉換格式的圖檔,操作方式和轉換成GIF格式一樣,只要記得輸出設定」的「類型」裡要選*.jpg
插入圖檔的語法
  為了使瀏覽器讀取方便,縮短展示網頁的時間,請把所有使用到的圖檔與網頁程式放在同一資料夾中喔!
  插入圖檔的語法是:
<img src=”美少女.jpg” height=200 width=300>
img 宣告圖檔
src= 用雙引號括起的是圖檔名
height 定義圖檔的高度
width 定義圖檔的寬度
  實作練習

UP網頁設計篇第一章第二章第四章第五章第六章