Dreamweaver מקל ליצור תפריטים נפתחים עבור אתר האינטרנט שלך. אבל כמו כל צורות HTML הם יכולים להיות קצת מסובך. הדרכה זו תנחה אותך בשלבים ליצירת תפריט נפתח ב- Dreamweaver.
קפיצה תפריטים
Dreamweaver 8 מספק גם אשף כדי ליצור תפריט קפיצה עבור ניווט באתר האינטרנט שלך. שלא כמו תפריטים בסיסיים הנפתחים, תפריט זה יהיה ממש לעשות משהו כאשר אתה מסיים. אתה לא צריך לכתוב כל JavaScript או CGIs כדי לקבל את הנפתח טופס לעבוד. הדרכה זו גם מסבירה כיצד להשתמש באשף Dreamweaver 8 כדי ליצור תפריט קפיצה.
ראשית, צור את הטופס
הערה חשובה אודות טופסי HTML ו- Dreamweaver:
מלבד מכשפים מיוחדים כמו תפריט קפיצה, Dreamweaver לא עוזר לך לעשות טפסים HTML "עבודה". בשביל זה אתה צריך CGI או JavaScript. עיין בערכת הלימוד של יצירת טפסים של HTML לקבלת מידע נוסף.
כאשר אתה מוסיף תפריט נפתח לאתר האינטרנט שלך, הדבר הראשון שאתה צריך הוא טופס להקיף אותו. ב- Dreamweaver, עבור לתפריט Insert ולחץ על Form, ולאחר מכן בחר באפשרות Form.
02 מתוך 20תצוגות טופס בתצוגת עיצוב
Dreamweaver מציג את מיקום הטופס באופן ויזואלי בתצוגת העיצוב, כך שאתה יודע היכן לשים את רכיבי הטופס שלך. דבר זה חשוב, מכיוון שתגי תפריט נפתח אינם תקפים (ולא יעבדו) מחוץ לאלמנט הטופס. כפי שניתן לראות בתמונה, הטופס הוא הקו המנוקד האדום בתצוגת העיצוב.
03 מתוך 20בחר רשימה / תפריט
תפריטים נפתחים נקראים "רשימה" או "תפריט" פריטים ב- Dreamweaver. אז כדי להוסיף אחד לטופס שלך, אתה צריך להיכנס לתפריט טופס בתפריט הוספה ובחר "רשימה / תפריט." ודא כי הסמן שלך היה בתוך הקו מנוקד אדום של תיבת הטופס שלך.
04 מתוך 20חלון אפשרויות מיוחד
באפשרויות Dreamweaver, יש מסך על נגישות. אני בוחר ש- Dreamweaver יראה לי את כל תכונות הנגישות. וזה המסך הוא תוצאה של זה. טפסים הם מקום שבו אתרי אינטרנט רבים נופלים נגישות על ידי מילוי אלה חמש אפשרויות תפריטים הנפתח שלך יהיה מיד נגיש יותר.
05 מתוך 20טופס נגישות
אפשרויות הנגישות הן:
תווית
זהו השם של השדה. הוא יופיע כטקסט לצד אלמנט הטופס שלך.כתוב את מה שאתה רוצה לקרוא לתפריט הנפתח שלך. זה יכול להיות שאלה או ביטוי קצר כי התפריט הנפתח יענה. HTML כולל תג תווית כדי לזהות את תוויות הטופס שלך לדפדפן. הבחירות שלך הן לעטוף את התפריט הנפתח ואת טקסט התווית עם התג, כדי להשתמש בתכונה "for" בתג התווית כדי לזהות איזה תג טופס הוא מפנה, או לא להשתמש בתג התווית בכלל.אני מעדיף להשתמש בתכונה עבור, כמו אז אם אני צריך להזיז את התווית מסיבה כלשהי זה עדיין יהיה מחובר לשדה הטופס הנכון. תוכל למקם את התווית לפני או אחרי התפריט הנפתח. זהו המפתח שניתן להשתמש בו יחד עם המקשים Alt או Option כדי להגיע ישירות לשדה הטופס. זה עושה את הטפסים שלך מאוד קל לשימוש ללא צורך בעכבר. זהו הסדר שבו יש לגשת לשדה הטופס בעת השימוש במקלדת כדי לעבור בין דפי האינטרנט. לאחר שתעדכן את אפשרויות הנגישות שלך, לחץ על אישור. ברגע שיש לך את התפריט הנפתח מציג בתצוגת עיצוב Dreamweaver, אתה צריך להוסיף את הרכיבים השונים אליו. ראשית בחר את התפריט הנפתח על ידי לחיצה עליו. Dreamweaver יוסיף שורה מנוקדת מסביב לתפריט הנפתח בלבד, כדי להראות שבחרת אותה. תפריט המאפיינים ישתנה למאפייני הרשימה / התפריט בתפריט הנפתח. שם אתה יכול לתת את התפריט שלך מזהה (איפה זה אומר "בחר"), להחליט אם אתה רוצה שזה יהיה lis או תפריט, לתת לו מחלקה בסגנון גיליון הסגנון שלך, ולהקצות ערכים הנפתחת. Dreamweaver קורא תפריט נפתח של התפריט כל תפריט נפתח המאפשר בחירה אחת בלבד. "רשימה" מאפשרת מספר אפשרויות בתפריט הנפתח ויכולה להיות יותר מפריט אחד. אם אתה רוצה תפריט נפתח להיות שורות מרובות גבוה, לשנות אותו לסוג "רשימה" ולהשאיר את התיבה "בחירות" מסומנת. כדי להוסיף פריטים חדשים לתפריט שלך, לחץ על הלחצן "ערכי רשימה …". פעולה זו תפתח את החלון לעיל. הקלד את תווית הפריט בתיבה הראשונה. זה מה שיוצג בדף. אם תשאיר את הערך ריק, זה גם מה ישלחו את הטופס. לחץ על סמל הפלוס כדי להוסיף פריטים נוספים. אם אתה רוצה להזמין אותם מחדש בתיבת הרשימה, השתמש בחצים למעלה ולמטה בצד שמאל. כפי שציינתי בשלב 8, אם תשאיר את הערך ריק, התווית תישלח לטופס. אבל אתה יכול לתת את כל הפריטים פריטים - לשלוח מידע חלופי לטופס שלך. תוכלו להשתמש זה הרבה דברים כמו קפיצה תפריטים ו היפר. ברירת המחדל של דפי אינטרנט להצגת הפריט הנפתח ברשימה הראשונה מופיעה כברירת המחדל. אבל אם אתה רוצה לבחור אחד אחר, סמן אותו בתיבה "שנבחרה תחילה" בתפריט מאפיינים. לאחר שתסיים לערוך את המאפיינים, Dreamweaver יציג את הרשימה הנפתחת עם ערך ברירת המחדל שנבחר. אם תעבור לתצוגת קוד, תוכל לראות ש- Dreamweaver מוסיף את התפריט הנפתח בקוד נקי מאוד. התכונות הנוספות היחידות הן אלה שהוספנו עם אפשרויות נגישות. הקוד הוא כל indented וקל מאוד לקרוא ולהבין. זה אפילו מכניס את המאפיין הנבחר "נבחר" כי אמרתי Dreamweaver כי אני ברירת המחדל לכתיבת XHTML. אם תשמור את המסמך ותציג אותו בדפדפן אינטרנט, תוכל לראות שהתפריט הנפתח שלך נראה בדיוק כפי שהיית מצפה לו. התפריט שיצרנו לעיל נראה בסדר, אבל זה לא עושה כלום. כדי לקבל את זה לעשות משהו, אתה צריך להגדיר טופס פעולה על הטופס עצמו. למרבה המזל, Dreamweaver יש מובנית טופס נפתח התפריט שבו אתה יכול להשתמש מיד באתר שלך ללא צורך ללמוד על צורות, CGIs, או scripting. זה נקרא תפריט קפיצה. תפריט Jumpweaver של Jumpweaver מגדיר תפריט נפתח עם שמות וכתובות אתר. לאחר מכן תוכל לבחור פריט בתפריט, ודף האינטרנט יעבור לאותו מיקום, בדיוק כמו אם לחצת על קישור. עבור אל התפריט הוספה ובחר באפשרות טופס ולאחר מכן לחץ על תפריט. שלא כמו בתפריט הנפתח הסטנדרטי, תפריט הקפיצה פותח חלון חדש עבורכם לתת שם לפריטי התפריט שלכם ולהוסיף פרטים על אופן הפעולה של הטופס. עבור הפריט הראשון, לשנות את הטקסט "untitled1" למה שאתה רוצה לקרוא אותו ולהוסיף כתובת האתר כי הקישור צריך ללכת. לחץ על פריט הוספה כדי להוסיף פריט חדש לתפריט הקפיצה שלך. הוסף פריטים רבים ככל שתרצה. לאחר שתוסיף את כל הקישורים שאתה רוצה, עליך לבחור את האפשרויות הבאות: אם יש לך ערכת מסגרות, תוכל לפתוח את הקישורים במסגרת אחרת. לחלופין, באפשרותך לשנות את האפשרות של חלון ראשי ליעד מיוחד, כך שכתובת האתר תיפתח בחלון חדש או במקום אחר. תן לתפריט מזהה ייחודי עבור הדף. פעולה זו נדרשת כדי שהסקריפט יפעל כהלכה. זה גם מאפשר לך לקבל מספר תפריטים לקפוץ בצורה אחת - פשוט לתת להם את כל השמות. אני אוהב לבחור את זה כי לפעמים את התסריט לא עובד כאשר התפריט משתנה. זה גם נגיש יותר. בחר באפשרות זו אם יש לך הנחיה כגון "בחר אחד" כפריט התפריט הראשון. זה יבטיח כי פריט זה נשאר ברירת המחדל בדף. בדיוק כמו עם התפריט הראשון שלך, Dreamweaver מגדיר את תפריט הקפיצה שלך בתצוגת עיצוב עם פריט ברירת המחדל גלוי. לאחר מכן תוכל לערוך את התפריט הנפתח כמו שאתה עושה כל האחרים. אם אתה עורך את זה, הקפד לא לשנות את כל המזהים על הפריטים, אחרת סקריפט לא יכול לעבוד. שמירת הקובץ ופגיעה ב- F12 תציג את הדף בדפדפן המועדף עליך. שם אתה יכול לבחור אפשרות, לחץ על "עבור" ואת תפריט קפיצה עובד! סגנון
עמדה
מפתח גישה
אינדקס Tab
בחר בתפריט
תפריט מאפיינים
מה ההבדל בין רשימה ותפריט?
הוסף פריטים חדשים
הוסף עוד וסדר מחדש
תן את כל הפריטים ערכים
בחר ברירת מחדל
ראה את הרשימה שלך בתצוגת עיצוב
ראה את הרשימה שלך בתצוגת Code
שמור והצג בדפדפן
אבל זה לא עושה שום דבר …
חלון תפריט קפיצה
הוסף פריטים תפריט קפיצה שלך
אפשרויות תפריט קפיצה
פתח כתובות אתרים ב-
שם תפריט
הכנס לחצן אחרי תפריט
בחר פריט ראשון לאחר שינוי כתובת האתר
קפיצה תפריט תצוגת עיצוב
תפריט קפיצה בדפדפן
