關於本報

網頁研習室【網頁製作系列報導】
報主:李文能
創刊日期:2002-06-25
發報頻率:月刊
訂閱人數:6,166
官網:
http://www.webpage.idv.tw/maillist/

近期電子報


訂閱便利貼


將貼紙語法置入您的網站或部落格當中, 訪客可以輸入mail取得認證信,並按下確認連結後, 快速訂閱您的報紙。
預覽圖
訂閱網頁研習室【網頁製作系列報導】報
網頁研習室【網頁製作系列報導】
-----------------------------------------------------------------------------------------------------
Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

網頁研習室【網頁製作系列報導】
發報時間: 2010-07-30 11:00:00 / 報主:李文能
[公益聯播]捐款芳名錄
本期目錄
壹、報導前言:
貳、解決網頁內容縮放問題:
參、可隨螢幕自動縮放的圖片:
肆、彈出視窗的控制:
伍、圖片自動縮放運用:
陸、線上縮圖或最佳化處理:
柒、圖片自動縮放外掛程式:
捌、圖片相關軟體運用:
玖、如何完整取得所有資料:
拾、結論與建議:
壹、報導前言:
我們之前提過,製作網頁面臨的困擾之一,要用什麼方式去判斷(適合)訪客所使用的螢幕尺寸大小問題 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
玖、如何完整取得所有資料:
關於本篇更多詳細教學說明與運用技巧,教材或教學會員請打開 pro/02/say.txt 自行參考。
您需要這份完整報導資料嗎?學習上有困難嗎?您想永久長期取得網頁研習室有關網頁製作教材嗎?
如果您想完整取得電子報內所有檔案資料,我們提供燒錄光碟片給您 Go
凡加入教學會員者,可獲得半年期線上指導及所有報導完整的資料光碟乙片。
詳細內容:語法教學第一電子報第二電子報第三期電子報第四期電子報網頁圖窟
為讓您學習不終斷,即日起推出凡購買教材,可加選是否於第四期電子報報導完閉後補送完整教材一片!
已購買教材或教學會員,如需本報導資料歡迎寫信註明編號免費索取,您也可加價 100 元,於本期報導完畢後一次完整取得。
特別聲明:以上檔案全部取自網路綠色軟體其版權均屬原創公司所有,完全免費,不含於教學(材)費用內。
拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。
推薦訂閱
<數位之牆>國際化,是台灣網際網路產業的最後活路@【數位之牆】
「邊看電視,邊購物」的電視互動應用程式@【資策會 FIND科技報】
轉寄『介紹幾款可隨螢幕視窗調整的技巧』這期電子報

寄信人暱稱  寄信人email
收信人暱稱  收信人email

  • 社群留言
  • 留言報主