ראשי > מבוא > מיקום דינמי

מיקום דינמי

מפתח אינטרנט יכול לחבוש מספר כובעים—כותב, עורך, מתכנת ואומן. כאומנים, אכפת לנו כיצד ממוקם התוכן בעמוד, בין אם משיקולי אסתטיקה או משיקולים של קלות בניווט. ע"י שימוש ב-DHTML, תוכל להגדיר בלוק של תוכן שנכתב ב-HTML, ולמקם אותו במקום מדויק בעמוד.  

יש 2 דרכים למקם בלוק של תוכן: בעזרת תג ה-<layer> של נטסקייפ או בעזרת גיליונות סגנון מדורגים (CSSP). למרות שהשימוש בתג של נטסקייפ הוא פשוט יחסית, הוא נתמך רק ע"י הדפדפן של נטסקייפ. האלטרנטיבה היא שימוש בגיליונות סגנון מדורגים, שנתמכים ע"י נטסקייפ וגם ע"י מיקרוסופט, לכן נעסוק במיקום תוך שימוש בתחביר של גיליונות סגנון. אין  הבדל אמיתי בתפקוד, מכיוון שרבדים (layers) וגיליונות סגנון מתנהגים בצורה כמעט זהה.

בדרך כלל, בלוק של תוכן נמצא בין תגי ה-<div>. תאר לעצמך, שתרצה ליצור בלוק קטן של תוכן—תמונה וקישור היפרטקסט:

<DIV>
<A HREF="mailto:me@myhouse.com">Mailme!</A><BR>
<IMG SRC = "mailbox.gif"
width = 30
height = 15
alt = 'Mailbox'
>
</DIV>

ניתן ללחוץ כאן כדי לראות את הקוד בפעולה

כדי למקם את הבלוק, אתה מוכרח לומר לבלוק ה-<div> לעשות שימוש בגיליון סגנון. גיליון סגנון, כמו שאתה אולי יודע, מגדיר מאפייני תצוגה. גיליונות סגנון יכולים להיות מוגדרים מראש, ומיושמים לתוך תגים כמחלקות, או שניתן להגדירם במקום. בדרך כלל, כאשר ממקמים תוך שימוש בגיליונות סגנון, יש להגדיר את עיצוב הבלוק במקום. נעשה זאת ע"י שימוש בתכונה style של התג <div>. התכונה style מכילה מחרוזת שרושמת כל תכונת עיצוב והערך שמוצמד אליה. לדוגמה:

<DIV ID="mailblock"
STYLE="position:absolute;
width:auto;
height:auto;
left:400px;
top:50px;
background-color:white;">

<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>

<IMG SRC = "mailbox.gif"
width = 30
height = 15
alt = "Mailbox"
>

</DIV>

ניתן ללחוץ כאן כדי לראות את הקוד בפעולה

בדוגמה למעלה, הוספנו בתחילה את התכונה ID, כדי להקצות מזהה עבור הבלוק. זה יכול להיות לעזר בהמשך, כאשר נרצה לתפעל את הבלוק ע"י שימוש ב-JavaScript. בהמשך, התכונה style כוללת רשימה של פרמטרים וערכים. שים לב שנקודותיים מפרידות בין הפרמטרים (משמאל) לבין ערכיהם (מימין), ונקודה פסיק (;) מפרידה כל זוג של פרמטר וערך מהזוג הבא אחריו. במקרה שלנו, קבענו ש-mailblock ימוקם בעמוד בצורה אבסולוטית ( כלומר, מיקומו לא יהיה יחסי לאלמנטים אחרים בעמוד), עם גובה ורוחב אוטומטיים, 400 פיקסלים מימין לקצה השמאלי של חלון הדפדפן ו-50 פיקסלים למטה מהקצה העליון של חלון הדפדפן.

פשוט מאוד, חוץ מבעיה קטנה אחת: לא ידוע לנו גודל המסך של המשתמש או גודל חלון הדפדפן!. כך, לא נדע באמת היכן ימוקם הבלוק באופן יחסי לשאר העמוד. זה יכול ליצור סידור מכוער של העמוד. הפתרון הוא להשתמש במיקום יחסי על מנת להגיע לסידור מדוייק. דמיין, למשל, שאנו רוצים ש-mailblock יופיע קצת מרוחק לשמאל מהפינה הימנית העליונה של העמוד. כדי להשיג מיקום זה, ניצור 2 רמות של בלוק <div>-- הורה וילד:  

<DIV ID="mailblock"
STYLE="position:absolute;
width:auto;
height:auto;
left:400px;
top:50px;
background-color:white;">

<A HREF="mailto:me@myhouse.com">Mail me!</A><BR>

<IMG SRC = "mailbox.gif"
width = 30
height = 15
alt = "Mailbox"
>

</DIV>

ניתן ללחוץ כאן כדי לראות את הקוד בפעולה

בדוגמה זו, בלוק <div> ההורה מכיל, כמו שמכיל בלוק <div> הילד, את התוכן עבור הקישור והתמונה. בלוק ההורה מיושר לפינה הימנית העליונה של העמוד. בלוק הילד, שמכיל את התוכן הממשי, ממוקם דינמית באפן יחסי להורה, 10 פיקסלים משמאל לקצה השמאלי של בלוק ההורה.   

נראה דוגמה נוספת למיקום דינמי בעמוד: השתמש בכפתורים כדי להזיז את התמונה!

לעמוד הקודם      לעמוד הראשי        לעמוד הבא