לבוני אתרים: טיפים ב-Dreamweaver
אתר טוב נמדד לא רק ברושם הויזואלי שהוא מותיר, אלא גם בקלות הניווט בו ופשטות הגישה מעמוד לעמוד. לשם כך כל אתר צריך להכיל תפריט ברור, לא מסורבל שנמצא במקום בולט וכמובן יפה לעין. הנה כמה טיפים ושיטות ליצירת תפריטים ב-Dreamweaver שיהפכו את האתר שלכם לנגיש יותר ולבעל יכולת ניווט טובה יותר
לא צריך להיות מעצב דגול בכדי לבנות תפריט אפשרויות. הדרך הקלה יותר היא להיעזר בטבלה בת מספר שורות או מספר עמודות, תלוי אם מדובר בתפריט אנכי או אופקי. בכל תא יש למקם טקסט ולהפוך אותו לקישור לדף הרצוי.
להוספת צבע, אין צורך להשתמש בתמונות, אפשר פשוט לצבוע את רקע התאים בטבלה, ואם תגדיר לטבלה ערך של מספר פיקסלים בודדים למאפיין cell spacing, תקבל מרווח יפה בין תאי התפריט.
תפריט תמונות
אם בחרת בתפריט טבלאי תוכל להשתמש בתמונה כתחליף לטקסט. את התמונה יש להכין בתוכנת עריכה חיצונית ולהגדיר עבורה קישור. אם אתה מעצב תפריט של כפתורים בפוטושופ, אפשרויות העיצוב שלך הן רבות.
תוכל לבנות כל כפתור בנפרד, או לבנות סטריפ של כפתורים ולאחר מכן להשתמש בכלי ה-slice tool כדי לחלק אותו לקבצים נפרדים. לאחר מכן יש לבחור בפקודה file>save for web, לבחור בפורמט הרצוי והתמונות יישמרו כקבצים נפרדים בתיקיה אחת. אפשרות לא פחות טובה, היא ליצור תמונת רקע ואת המלל לכתוב ב-Dreamweaver, מה שיקל על עריכה מאוחרת יותר.
מי שמתקשה עם עבודת החיתוך, יוכל להשאיר את הקובץ כתמונה אחת, להוסיף אותו לאתר שלכם ב-Dreamweaver ולהגדיר hotspots, שהם אזורים רגישים על גבי התמונה, שיכולים להוות לינקים.
כדי לבצע זאת, יש לסמן את התמונה ולבחור בחלון המאפיינים באחד מכלי ה-hot spot: לאחר שבחרנו בצורה הרצויה לנו (במקרה זה מלבן), נתחום את השטח הרצוי על גבי התמונה ונגדיר במאפיינים את הקישור לדף הרצוי, בעת לחיצה על המשטח שהגדרנו.
באופן דומה נגדיר אזורים רגישים נוספים לשאר חלקי התפריט. השימוש ב-hotspot נוח לעבודה, כאשר התפריט הוא מורכב מבחינה גרפית ולאו דווקא מורכב ממלבנים. יכולת השליטה שלנו על אזור הלחיצה הוא רב יותר כאשר משתמשים באפשרות זאת, לעומת שימוש ב-slice בפוטושופ, שיוצר חלקים מלבניים בלבד.
תמונות מתחלפות
לרוב ובייחוד כשתפריט מכיל מספר רב של אפשרויות, נרצה שהגולש ייראה באופן ברור יותר, באיזו אופציה הוא נמצא כרגע בתפריט. לשם כך נוכל להרכיב תפריט מתמונות בנות שני מצבים (Rollover Image).
מצב אחד הוא המצב הסטטי של התמונה והמצב השני הוא בעת מעבר עכבר. המצב השני יכול להכיל את אותה תמונה בשינוי צבע רקע, צבע טקסט או בשינוי הטקסטורה של הרקע. לשם כך במקום לבחור בהוספת תמונה רגילה, יש לבחור מהסרגל ב-Image -> rollover Image ובחלון שייפתח לבחור בשתי התמונות, לשני המצבים השונים (אותן יש להכין מראש כמובן ולהגדיר אותן באותם ממדים).
השימוש בתמונות אלו הוא פשוט מאד בעזרת התוכנה ויוצר רושם ויזואלי רב. דוגמה לשימוש בתפריט כזה ניתן למצוא באתר הכנסת.
תפריט נפתח (Popup Menu)
תפריט נפתח לא מציג מראש את כל האפשרויות שטמונות בו. משתמשים בו כשיש לכל קטגוריה סעיפי משנה ולא מעוניינים, משיקולי גודל, להציג את כולן בהתחלה. תפריט זה שדי מורכב לבניה בפלאש, למשל, יכול להיבנות בקלות ב- Dreamweaver. התוכנה מאפשרת בנייה פשוטה של תפריט כזה באמצעות Behavior מיוחד שנבנה בשפת Javascript.
לשם כך יש ליצור טקסט או תמונה כלינק, ולהוסיף את ההתנהגות מהתפריט Window -> Behaviors. יש ללחוץ על סימן ה-+ ולבחור באפשרות: Show popup menu. בהמשך תוכל להגדיר את הטקסטים שיכיל תת התפריט הנפתח, הגדרות עיצוב במצב רגיל ובעת מעבר עכבר, מיקום וגודל התפריט.
אפשרות זו היא נוחה ומהירה יותר ליישום, אולם לא מאפשרת שימוש בתמונת רקע לתפריט (רק בצבע רקע) , ולא נראית טוב אם היא משולבת בתוך מסגרת. הסיבה היא שתפריט נפתח אינו יכול לעלות על תוכן של מסגרת אחרת ובכך האפקט הרצוי של תפריט שעולה על טקסט קיים יכול להיות ממומש רק אם התפריט ושאר התוכן מוגדרים באותו דף.
תפריט קופץ (Jump Menu)
תפריט זה בדומה לתפריט נפתח אינו מציג מראש את כל האפשרויות, אולם הוא בנוי בתיבה נפתחת (כמו בטופס). השימוש בו נועד גם לחיפוש באתר ואפשרויות העיצוב שלו דלות יותר מאשר תפריט נפתח. הבנייה שלו נעשית דרך תפריט form-> jump menu.
שימוש בתפריט זה ניתן למצוא באתר של מיקרוסופט . תפריט זה בניגוד לתפריט נפתח כן יכול לעלות על תוכן שמוגדר במסגרת אחרת.
קיבוע תפריטים
היות שתפריט הוא כלי הניווט שלך באתר, תרצה להציג אותו בכל דף ובאותו מקום. Dreamweaver מספקת לך כלים כדי שלא תצטרך להעתיק אותו בכל פעם מדף לדף. דרך אחת היא לחלק את הדף למסגרות ובאחת מהן למקם את התפריט.
התוכן של מסגרת זו יישאר קבוע והקישורים השונים ייפתחו במסגרות האחרות. דרך זו נחשבת למיושנת מעט משום שהיא קשה ליישום מבחינת שמירת הקבצים ובעייתית מעט בנוגע למנועי חיפוש.
דרך נוספת היא להשתמש בתבניות (Templates). בעזרת תבנית שאותה נשמור כ- file -> save as templates, נוכל ליצור דפים מאותה תבנית. היתרון הגדול בשיטה זו, היא יכולת העדכון; עדכון התבנית יגרום לעדכון אוטומטי של הדפים הבנויים עליה. אולם שימוש בתבניות מצריך הגדרת אזורי עריכה, פעולה שמקשה קצת על העיצוב ומהווה בעיה בשימוש בתפריט נפתח.
היות שתבנית נשמרת בתוך תיקיית templates ושאר הדפים לא נמצאים שם, הרי שמסלול הקישורים בתוך התפריט יהיה שונה בין אם דף נמצא בתיקיה זו ובין אם לאו. פעולת עדכון אוטומטית של קישורים לא מתבצעת כאן, להבדיל ממקרים אחרים ולכן במקרה זה יש להגדיר בזמן בניית התפריט את הקישורים באופן ידני (ולא להשתמש ב-browse) ולהתייחס למסלול כאילו הוא לא דרך תיקיית templates.
דבר חשוב נוסף! אם רוצים ליצור תפריט נפתח בתוך template יש להגדיר אותו לפני שמירת הדף כ-template, משום שברגע שהדף מוגדר כתבנית לא ניתן להוסיף אליו תפריט נפתח.
תפריט פלאש לעומת HTML
אם שלל האפשרויות שהצגנו לך לא קורץ לך ואתה מעדיף בכל זאת לבנות תפריטים בפלאש, הרי שאין גבול ליכולות העיצוב שלך, התפריט ישמור על עיצוב בגופן קבוע בכל מחשב שהוא והגדרת הקישורים בתפריט שתעשה דרך הפלאש, תהיה תקפה גם אם הקישורים מופנים לדפים שבנית ב- HTML.
אולם שינוי פרטים בתפריט, מסורבל יותר בפלאש, כמו כן אם לגולש לא מותקנת תוכנת Flash player הוא לא יוכל לצפות בתפריט שבנית. ולהבדיל מבאנר או כל אפקט אחר של אנימציה, שגולש יוכל להסתדר באתר בלעדיהם, היעדר תפריט ישתק לחלוטין את הגלישה בו ולכן כדאי לבחון היטב את השימוש בדרך עבודה זו, בייחוד אם התפריט שלך משתנה באופן תכוף.
אחרי שיש תפריט ברור, אפשר למצוא בקלות מה רוצים להזמין, בתאבון!
כתבו: דקל מועלם ותמיר מואב. יום עיון בנושא התוכנות של "אדובי" ייערך בשישה ביולי בתל אביב. לפרטים נוספים לחצו כאן.
הכתבה פורסמה במקור בגיליון מספר 11 של "זמן דיגטלי", מגזין ברזולוציה גבוהה. לחצו כאן לרכישת מנוי .
לפנייה לכתב/ת 
