|
|
---|
壹、報導前言: 我們之前提過,製作網頁面臨的困擾之一,要用什麼方式去判斷(適合)訪客所使用的螢幕尺寸大小問題 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。 |
玖、如何取得: |
拾、結論與建議: |