網站實用程式

第二篇
介紹幾款可隨螢幕視窗調整的技巧

適合程度: 初學者 一般程度 進階者 以上均宜
壹、報導前言:
我們之前提過,製作網頁面臨的困擾之一,要用什麼方式去判斷(適合)訪客所使用的螢幕尺寸大小問題 Go
使用不同解析度螢幕去觀看同一個網頁時,會因螢幕寬度或高度不同,造成顯示結果上極大差別問題的困擾。
製作網頁最常會遇到的是表格、圖片及視窗問題,本次報導專門為大家蒐集與整理一些這類的程式給你參考。
如何讓網頁內容可隨螢幕大小自動調整,讓不同大小的圖片自動變成一樣的等比尺寸,還有彈出視窗的控制。
常見解決這些問題所使用的辦法,除了使用一點技巧外,大多需要借用 CSS、JavaScript、DTHML 等網頁程式。
使用表格標籤可解決網頁內容隨螢幕大小自動調整問題,使用 CSS 或 JavaScript 也能解決圖片與彈出視窗問題。
如果你是初學者,建議你學習本篇報導之前,最好具備基本的 HTML 觀念及 CSS、JavaScript 等網頁程式運用。
聲明:本報導程式或技術資料,大都取自網路分享資源,其版權與著作權均為當事者所有,特此感謝與聲明。

貳、解決網頁內容縮放問題:
第一種狀況:
最簡單的方式為使用表格標籤的寬度相對值(%),基本上這樣就不怕遇到不同解析度產生不相容的問題 Go

第二種狀況:
使用 CSS 樣式表單的區塊 (DIV) 功能,就可以達到隨螢幕視窗自動調整的效果 Go

第三種狀況:
讓 iframe 依內容多寡,自動調整框架高度,不用配合螢幕視窗事先設定 Go

參、可隨螢幕自動縮放的圖片:
如果你想在一個網頁內放一張圖片,並且希望它寬度可貼滿這個網頁,重點是它要能適用於任何螢幕解析度。
我們知道每張圖片都有固定的寬與高度,雖然可以使用 JavaScript 程式來判斷使用者的螢幕解析度大小。
但是,確無法準備齊全各種不同螢幕解析度的圖片尺寸,以適合所有需要,就算你願意這樣做應該很辛苦。
很幸運的我幫各位找到幾隻錯的 JavaScript 程式,只要一張圖檔加上這組 JavaScript 程式,一切都解決。

想要了解更多 Go

肆、彈出視窗的控制:(可自動適合瀏覽器窗口大小的圖像)
如果你對網頁視窗不是很瞭解,請先參考柴惠敏 - 認識網頁的視窗 JavaScript 程式簡介 Go
提供一個彈出網頁視窗產生器 Popup Window Generator - Dynamic Drive DHTML Scripts Go
彈出小視窗,並自動調整成適合圖片的視窗大小 (一)
彈出小視窗,並自動調整成適合圖片的視窗大小 (二)
彈出小視窗,並自動調整成適合圖片的視窗大小 (三)
彈出小視窗,並自動調整成適合圖片的視窗大小 (四)
彈出小視窗,並自動調整成適合圖片的視窗大小 (五)
只要進入這網頁,視窗就會自動顯示設定值的大小,固定視窗的大小 (六)
彈出小視窗,並自動調整成適合圖片的視窗大小 (七)
Quick Tip – Resizing Images Based On Browser Window Size (八)

伍、圖片自動縮放運用:
在處理大量網頁圖片列表時,很難確保所有圖片大小一致。
直接強迫設定圖片大小寬度與高度,將會導致圖片不等比率伸縮造成變形模糊或失真。
如果使用 PhotoImpact、 Adobe Photoshop,Corel 等繪圖軟體處理,還蠻費工的。
我們可以使用 JavaScript 程式或 CSS 串接樣式表單,讓圖片載入時,就自動按比例調整圖片大小。
以下就介紹幾組用 JavaScript 或 CSS 讓圖片自動縮放大小功能,或許你以後也會用的到。
注意:此功能運用在大量圖片列表時,有實質效益,但載入速度不會因縮小而加快。

用 CSS 讓圖片自動縮放大小 (一)
用 CSS 讓圖片自動縮放大小 (二)
用 CSS 讓圖片自動縮放大小 (三)
用 CSS 讓圖片自動縮放大小 (四)
用 CSS + JavaScript 讓圖片自動縮放大小 (五)

用 JavaScript 讓圖片自動縮放大小 (一)
用 JavaScript 讓圖片自動縮放大小 (二)
用 JavaScript 讓圖片自動縮放大小 (三)
用 JavaScript 讓圖片自動縮放大小 (四)
用 JavaScript 讓圖片自動縮放大小 (五)

點圖即可放大與縮小 (一)
點圖即可放大與縮小 (二)
點圖即可放大與縮小 (三)
按一下即可自動縮圖 Go
用滑鼠滾輪來縮放圖片 Go
自動影像調整,建立影像縮圖 Go

使用 MooTools 的比例調整圖像 Go
使用 JavaScript 來調整較小或較大的圖像 Go
液體圖像(Liquid Image) Go

陸、線上縮圖或最佳化圖片處理:
我特別幫各位蒐集至少 20 幾個相關網站,值得你參考看看 Go

柒、圖片自動縮放外掛程式:
圖片滑入自動縮放預覽外掛 MagicToolBox - 有點類似放大鏡 範例預覽

捌、圖片相關軟體運用:
縮放圖片不失真 PhotoZoom Pro 2.1.4 繁中免安裝 Go
圖片批量縮放/加邊框、水印、圓角等/百吉縮圖 Go
按滑鼠右鍵即可縮圖,輕巧型縮圖軟體 Go
超簡單的免費縮圖製作軟體 Go
可批量的照片大小縮放 Go
批量縮放大師 Go
以簡單右鍵調整圖像圖 Powertoy Go
Batch Image resizing made easy Go
Free image resizer to resize and convert images Go

玖、如何取得:

拾、結論與建議: