אחת השאלות שנשאלות הרבה פעמים בפורומים שונים היא, כיצד להתאים רזולוציות לאתר, גם אני נתקלתי בשאלה הזאת פעמים רבות, בעיקר באפליקציות שפיתחתי שהיו אמורות להחליף אפליקציות לגסי שרת-לקוח שהיו כתובות בשפות כמו VB ++VC וכדומה. אחת הטענות שהיו למתנגדי ההחלפה הייתה, אבל מה עם רזולוציות. האם מי שמסתכל על המסך ברזולוציה 800 X 600 יראה את האפליקציה כמו אחד שמשתמש ברזלוציה 1024 X 768.
הפתרון המקובל היה להכין את דף הווב לרזולוציה של 800 X 600 ואז כולם יוכלו לראות הכל. אלא אם הם משתמשים ב 640 X 480. אך הנחת היסוד היתה שמי שמשתמש היום ברזולוציה כזאת אין לו זכות קיום בעולם המחשבים.
אותי קומם טיפה העניין, אני משתמש ב 1024, ומרגיז אותי הקטע ששליש מסך שלי בכלל לא יהיה בשימוש, במיוחד כשאני יודע כמה כמות של מידע הייתי יכול לשים באותו שליש מסך, וחוץ מזה בגלל משתמשים שאינם מבינים שרזולוציה 1024 נותנת הרבה יותר, מכל הבחינות מאשר רזולוצית 800, אני צריך לסבול?, לא יקום ולא יהיה! (לפחות לא במערכות שאני כותב).
כמו שקורה בדרך כלל, תחת לחץ צריך למצוא פיתרון, באחת החברות שעבדתי הקימו אתר אינטרנט חדש לחברה, האתר נבנה בצורה קשיחה לעבוד בהתאמה לרזלוציית 800 X 600. ועמד לצאת לאוויר, כל מה שהיה צריך זה אישור של אחד מחברי ההנהלה. שלחו לו את הלינק לאתר, והתשובה הייתה, "על גופתי המתה יצא האתר הזה לאוויר, לא רואים בו כלום".
הלכתי לראות אצל אותו מנהל, למה לא רואים באתר כלום, וראיתי אותו יושב מול מסך flat screen 21 אינץ פלסמה נוזלית, והשד יודע מה היה עוד בפאר היצירה הזאת, ברזולוציה של 1600 X 1200, כל האתר נראה אצלו במחשב בפינתו הימנית של הבראוזר, כמו בול על מעטפה.
באותו רגע התחלתי לפתח שיטת התאמת רזולוציה.
אני לא אלאה אתכם על כל הדרכים שעשיתי, ואלך ישר לסוף.
הסוף אומר מסקנה ראשונית החלטית. כל הגולשים משתמשים ב 4 IE ומעלה. אם הם לא משתמשים בזה, שלא יכנסו לאתרים שלי.
ואחד הדברים הנפלאים שיש ב IE זה ה DOM OBJECT, אז בוא נשתמש בו.
בוא נלך על אסטרטגיה אחרת, היות וכולם משתמשים ב IE והיות ואני יכול להשתמש ב DOM OBJECT שיש בכל IE אצל כל לקוח שנכנס למערכת שלי, אני אבנה את האתר שלי בצורה דינאמית על הקליינט לפי הרזלוציה שקיימת אצלו במחשב.
במאמר הזה, אתאר אייך בניתי בשיטה הזאת את מסגרת האתר שלי http://www.ngs-corp.com
האתר ברזולוציה 1024 X 768
|
האתר ברזלוציה 800 X 600
|
אחד הדברים שה DOM נותן לנו זה לדעת איזה רזלוציה קיימת במחשב של הקליינט יש מספר תכונות למצוא את זה
ClientHeight ו clientWidth מחזירות את הגובה והרוחב של אובייקט ה DOCOMENT מבלי לקחת בחשבון שוליים, סקרולים, מרווחים וגבולות. נותנת לנו את שטח העבודה הנקי של האובייקט.
availHeight ו availWidth מחזירות את גודל העבודה של הקליינט כולל שורת המשימות של מייקרוסופט.
למסך עצמו יש גם תכונות של Height ו Width שמחזירות את הגודל האמיתי של המסך עליו המשתמש עובד.
השתמשתי בתכונות ClientHeight ו clientWidth כדי לבנות את המסגרת של האתר שלי.
פתחתי את האתר בזיהוי הרזולוציה של המשתמש
<![CDATA[
<BODY bgColor=#ffffff leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll=no>
<link rel="stylesheet" href="PortalTopMenus.css">
<SCRIPT language=javascript>
var dH= document.body.clientHeight;
var dW= document.body.clientWidth;
</script >
]]>
אם הייתי מוסיף את הקוד הבא מייד אחרי קביעת ה dH וה dW:
<![CDATA[
alert(dH + " X " dW)
]]>
והיות ואני עובד כאמור ברזולוציה 1024 X 768 הייתי מקבל את ההודעה הבאה:
שטח ה DOCUMENT שלי הוא: גובה 588 ורוחבו 1004 פיקסלים.
אחד הדברים שרציתי באתר זה כותרת קבועה שלא תזוז ממקומה אפילו אם הדף יהיה ארוך וירדו עם הסקרול בר, עדיין היה ברצוני שהכותרת העליונה תישאר ולא תזוז. נכון, אפשר לעשות את זה בפריימים, אבל היה לי עוד רצון אחד, רציתי תפריטים נפתחים, ואת זה כבר אי אפשר לעשות שיש פריימים שכן החלק הנפתח יעלם מתחת לפריים העליון, לכן קודם ב BODY, כפי שרואים למעלה, ביטלתי את כל השוליים וקבעתי שלא יהיה סקרול בר לדף. כך גם הגעתי לתוצאות הרזולוציה שמוצגות למעלה.
חלקתי את הדף הראשי ל 2 DIV-ים נתתי להם שמות TopMenuesDiv ו MainPageDiv כאשר את ה DIV הראשון כתבתי לדף ב HTML רגיל, כלומר
<![CDATA[
<div id=TopMenuesDiv></div>
]]>
לא קבעתי גדלים ל DIV הזה, לתוכו הכנסתי קובץ ב INCLUDE של ה TOPMENU עם טבלה ב HTML שרוחבה 100% משטח המסך ומספר שורות
שגובה כל שורה קבוע בפיקסלים. רציתי להגיע לגובה אחד של שטח התפריטים, שכן אחת הבעיות עם תמונות שאותן רציתי להכניס בתפריטים, זה שלא כל כך אפשרי לקבוע אותן דינאמי. ואני מציין "לא כל כך", כי הדבר אינו ממש נכון, הרי אפשר לקבוע גודל של תמונה כפי שרוצים ע"י שימוש ב height ו width של התמונה, אבל הדבר מעוות אותם, והדבר האחרון שרציתי זה שיהיו לי תמונות מעוותות באתר, לכן החלטתי על גובה קבוע של התפריט.
הערה: יש דרך לשנות תמונות בצורה דינאמית בלי שיתעוותו, אבל בצד הסרוור בלבד. הנה מאמר בנושא.
לאחר שהיה לי DIV ברוחב המסך, שנקבע ע"י הטבלה שבתוכו וגובה קבוע שנקבע ע"י גודל ה TD-ים וה IMAGES בתוכם, נותר לי ליצור את ה DIV השני ה MainPageDiv.
תחילה הייתי צריך לברר כמה שטח מסך נשאר לי אחרי קביעת ה DIV הראשון.
השתמשתי במתודה getBoundingClientRect שמחזירה אובייקט שמכיל את התחום של מלבן. כלומר, אם יש לי אובייקט מלבני כל שהוא בדף, (TABLE,DIV,IMAGE,TD וכן הלאה) המתודה מחזירה את כל התחומים שלו, כלומר איפה נקודת ה LEFT שלו, איפה נקודת ה RIGHT שלו, איפה נקודת ה TOP שלו ואיפה נקודת הBOTTOM שלו בהתאם למיקומו במסך.
הגדרתי אובייקט oBndRct שיכיל בתוכו את התחומים של ה DIV העליון, הפחתתי את ה BOTTOM שלו מה TOP וקיבלתי לתוך המשתנה TopMenuSize את גובה ה DIV העליון.
<![CDATA[
<script language=javascript>
var oBndRct=TopMenuesDiv.getBoundingClientRect();
var TopMenuSize=oBndRct.bottom-oBndRct.top;
]]>
עכשיו כתבתי לדף את ה DIV השני,
<![CDATA[
document.write("<DIV ID=MainPageDiv>");
</script >
]]>
בדף ה CSS שלי PortalTopMenus.css שלו קראתי מייד אחרי ה BODY הכנסתי STYLE ל TopMenuesDiv.
<![CDATA[
#MainPageDiv
}
width: expression(dW);
height: expression(dH – TopMenuSize);
overflow-y: auto;
overflow-x: auto;
scrollbar-base-color: #EEEEEE;
}
]]>
ה expression הנו ביצוע פעולת ביטוי על אובייקט, כלומר כאשר אני מבצע expression על המשתנה dW ומגדיר אותו כ width של ה DIV רוחב ה DIV יהיה (במקרה שלי) 1004 פיקסלים, במקרה של לקוח עם רזולוצית 800 רוחב ה DIV יהיה בסביבות 780 פיקסלים.
גובה ה DIV יהיה ה expression של גובה שטח העבודה של המסך שנקבע כזכור כ dH פחות הערך שבמשתנה TopMenuSize המכיל את גובה ה DIV העליון. בצורה זאת קבעתי שגודל ה DIV MainPageDiv יתאים בדיוק לשטח שנותר לי בחלון.
אבל עדיין, ומה קורה והדף שלי יהיה יותר ארוך או רחב מאשר הגובה והרוחב שנקבעו, אין בעיה, במקרה הזה ה DIV יגדל אוטומטי למרות שנקבע בסטייל שלו גודל קבוע. לפיכך הוספתי בSTYLE גם את ה OVERFLOW Y ו X שיהיו אוטומטים. כלומר אם הדף יצא יותר ארוך ממה שנקבע ב STYLE שיתווסף ל DIV גם scrollbar.
בצורה הזאת נוצר לי דף HTML הבנוי משני חלקים, החלק העליון קבוע, החלק התחתון דינאמי הכולל scrollbar רק עבורו, ובעצם שימוש ב scroll הזה נותן את האפקט של frames. הבעיה היחידה שנותרה לי היא מה יקרה עם האתר יפתח בחלון קטן והמשתמש ירצה להגדיל את החלון, הרי קביעת גודל ה DIV-ים כבר נעשתה ואם החלון יוגדל, הגדלים שלו יישארו כמו שהיו בזמן שהחלון נפתח.
הוספתי לטאג BODY בתכונה onResize את הפונקציה changeMaindivSize()
<![CDATA[
function changeMaindivSize(){
var dHR = document.body.clientHeight;
var dWR = document.body.clientWidth;
var oBndRct=TopMenuesDiv.getBoundingClientRect();
var TopMenuSize=oBndRct.bottom-oBndRct.top;
MainPageDiv.style.width= dWR + "px";
MainPageDiv.style.height= (dHR- TopMenuSize) + "px";
}
]]>
בזמן שה RESIZE נגמר העברתי את clientHeight וה clientWidth החדשים לתוך משתנים dHR ו dWR, העברתי את התחומים של ה TopMenuesDiv שוב לתוך המשתנה oBndRct מצאתי שוב את גודלו של המשתנה TopMenuSize ע"י הפחתה של ה bottom שלו מה top שלו, וקבעתי מחדש את ה width וה height של ה MainPageDiv. בצורה זאת בכל פעם שהחלון הוגדל או הוקטן כל האתר הסתדר בתוכו מחדש בהתאם לגדלים החדשים.
הרחבה של שימוש בתכונה clientWidth
מספר דברים נחמדים שאפשר לעשות עם הערכים שמקבלים מה clientWidth ושימוש ב expression.
הערה- expression מעיט קצת את הקליינט אבל יש לו יתרונות שבעזרתו בעצם אפשר לקבוע לכל אלמנט גודל דינאמי בתוך stylesheet.
גודל אותיות – אם אני רוצה שגודל האותיות באתר יקבע באופן דינאמי כך שמי שבא עם 1024 ומי שבא עם 800 יראה את אותו גודל יחסי של אותיות אני אקבע ב stylesheet משהו כמו FONT-SIZE: expression(dw * 0.01); בצורה כזאת אקבל את הפונט המסוים שלו קבעתי style בגודל 10 במסך 1024 ובגודל 8 במסך 800. הבעיה מתחילה כאשר החלון אינו חלון מלא ואז גודל הפונט יצנח מתחת לגודל 8. כדי למנוע את זה באפליקציות בהן השתמשתי בקביעת גודל הפונטים דינאמי הוספתי בפתיחת האפליקציה לאחר קביעת ה dH וה dW
<![CDATA[
var dW10 = dW * 0.01;
if (dW10 < 8){dW10 = 8;}
ואת גודל הפונט קבעתי ב stylesheet כ
.clsFont{
FONT-SIZE: expression(dW10)
{
]]>
אפשר לקבוע את הגדלים גם בצורה אחרת כ STYLE של אלמנט או ע"י שימוש במתודה setExpression על אלמנט, נגיד שאני רוצה לקבוע ל DIV של המסמך גודל פונט שיהיה 1% מרוחב המסך, אני יכול להוסיף ל style של ה DIV את התוספת הבאה:
<![CDATA[
<div style="font-size: expression(document.body.clientWidth * 0.01);">
]]>
או
<![CDATA[
<div id= MyDiv></div>
<script language=javascript<
MyDiv.style.setExpression("fontSize","document.body. clientWidth * 0.01");
</script >
]]>
כמובן שבשיטה הזאת אפשר לקבוע לכל אלמנט כולל TEXT,SELECTS,TEXTAREAS, BUTTONS, TABLES וכל מה שתרצו גדלים דינאמיים שיתאימו עצמם לרזולוציה של הבראוזר עימו נכנס המשתמש לאתר שלכם.
בהצלחה ו Happy Programming.
|
.png)
