Dreamweaver מקל ליצור תפריטים נפתחים עבור אתר האינטרנט שלך. אבל כמו כל צורות HTML הם יכולים להיות קצת מסובך. הדרכה זו תנחה אותך בשלבים ליצירת תפריט נפתח ב- Dreamweaver.
קפיצה תפריטים
Dreamweaver 8 מספק גם אשף כדי ליצור תפריט קפיצה עבור ניווט באתר האינטרנט שלך. שלא כמו תפריטים בסיסיים הנפתחים, תפריט זה יהיה ממש לעשות משהו כאשר אתה מסיים. אתה לא צריך לכתוב כל JavaScript או CGIs כדי לקבל את הנפתח טופס לעבוד. הדרכה זו גם מסבירה כיצד להשתמש באשף Dreamweaver 8 כדי ליצור תפריט קפיצה.
01 מתוך 20
ראשית צור את הטופס
הערה חשובה אודות טופסי 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 כדי להגיע ישירות לשדה הטופס. זה עושה את הטפסים שלך קל מאוד לשימוש ללא צורך בעכבר. כיצד להגדיר מפתח גישה ב - HTML
אינדקס Tab
זהו הסדר שבו יש לגשת לשדה הטופס בעת השימוש במקלדת כדי לעבור בין דפי האינטרנט. הבנת Tabindex
לאחר שתעדכן את אפשרויות הנגישות שלך, לחץ על אישור.
06 מתוך 20
בחר בתפריט
ברגע שיש לך את התפריט הנפתח להציג בתצוגת עיצוב, אתה צריך להוסיף את הרכיבים השונים אליו. ראשית בחר את התפריט הנפתח על ידי לחיצה עליו. Dreamweaver יוסיף שורה מנוקדת מסביב לתפריט הנפתח בלבד, כדי להראות שבחרת אותה.
07 מתוך 20
תפריט מאפיינים
תפריט המאפיינים ישתנה למאפייני הרשימה / התפריט בתפריט הנפתח. שם אתה יכול לתת את התפריט שלך מזהה (איפה זה אומר "בחר"), להחליט אם אתה רוצה שזה יהיה lis או תפריט, לתת לו מחלקה בסגנון גיליון הסגנון שלך, ולהקצות ערכים הנפתחת.
מה ההבדל בין רשימה ותפריט?
Dreamweaver קורא תפריט נפתח של התפריט כל תפריט נפתח המאפשר בחירה אחת בלבד. "רשימה" מאפשרת מספר אפשרויות בתפריט הנפתח ויכולה להיות יותר מפריט אחד.
אם אתה רוצה תפריט נפתח להיות שורות מרובות גבוה, לשנות אותו לסוג "רשימה" ולהשאיר את התיבה "בחירות" מסומנת.
08 מתוך 20
הוסף פריטים חדשים
כדי להוסיף פריטים חדשים לתפריט שלך, לחץ על הלחצן "ערכי רשימה ...". פעולה זו תפתח את החלון לעיל. הקלד את תווית הפריט בתיבה הראשונה. זה מה שיוצג בדף. אם תשאיר את הערך ריק, זה גם מה ישלחו את הטופס.
09 מתוך 20
הוסף עוד וסדר מחדש
לחץ על סמל הפלוס כדי להוסיף פריטים נוספים. אם אתה רוצה להזמין אותם מחדש בתיבת הרשימה, השתמש בחצים למעלה ולמטה בצד שמאל.
10 מתוך 20
תן את כל הפריטים ערכים
כפי שציינתי בשלב 8, אם תשאיר את הערך ריק, התווית תישלח לטופס. אבל אתה יכול לתת את כל הפריטים פריטים - לשלוח מידע חלופי לטופס שלך. תוכלו להשתמש זה הרבה דברים כמו תפריטים לקפוץ.
11 מתוך 20
בחר ברירת מחדל
ברירת המחדל של דפי אינטרנט להצגת הפריט הנפתח ברשימה הראשונה מופיעה כברירת המחדל. אבל אם אתה רוצה לבחור אחד אחר, סמן אותו בתיבה "שנבחרה תחילה" בתפריט מאפיינים.
12 מתוך 20
ראה את הרשימה שלך בתצוגת עיצוב
לאחר שתסיים לערוך את המאפיינים, Dreamweaver יציג את הרשימה הנפתחת עם ערך ברירת המחדל שנבחר.
13 מתוך 20
ראה את הרשימה שלך בתצוגת Code
אם תעבור לתצוגת קוד, תוכל לראות ש- Dreamweaver מוסיף את התפריט הנפתח בקוד נקי מאוד. התכונות הנוספות היחידות הן אלה שהוספנו עם אפשרויות נגישות. הקוד הוא כל indented וקל מאוד לקרוא ולהבין. זה אפילו מכניס את המאפיין הנבחר "נבחר" כי אמרתי Dreamweaver כי אני ברירת המחדל לכתיבת XHTML.
14 מתוך 20
שמור והצג בדפדפן
אם תשמור את המסמך ותציג אותו בדפדפן אינטרנט, תוכל לראות שהתפריט הנפתח שלך נראה בדיוק כפי שהיית מצפה לו.
15 מתוך 20
אבל זה לא עושה שום דבר
התפריט שיצרנו לעיל נראה בסדר, אבל זה לא עושה כלום. כדי לקבל את זה כדי לעשות משהו, אתה צריך להגדיר טופס פעולה על הטופס עצמו, שהוא לגמרי אחר הדרכה.
למרבה המזל, Dreamweaver יש מובנית טופס נפתח התפריט שבו אתה יכול להשתמש מיד באתר שלך ללא צורך ללמוד על צורות, CGIs, או scripting. זה נקרא תפריט קפיצה.
תפריט Jumpweaver של Jumpweaver מגדיר תפריט נפתח עם שמות וכתובות אתר. לאחר מכן תוכל לבחור פריט בתפריט, ודף האינטרנט יעבור לאותו מיקום, בדיוק כמו אם לחצת על קישור.
עבור אל התפריט הוספה ובחר באפשרות טופס ולאחר מכן לחץ על תפריט.
16 מתוך 20
חלון תפריט קפיצה
שלא כמו בתפריט הנפתח הסטנדרטי, תפריט הקפיצה פותח חלון חדש עבורכם לתת שם לפריטי התפריט שלכם ולהוסיף פרטים על אופן הפעולה של הטופס.
עבור הפריט הראשון, לשנות את הטקסט "untitled1" למה שאתה רוצה לקרוא אותו ולהוסיף כתובת האתר כי הקישור צריך ללכת.
17 מתוך 20
הוסף פריטים תפריט קפיצה שלך
לחץ על פריט הוספה כדי להוסיף פריט חדש לתפריט הקפיצה שלך. הוסף פריטים רבים ככל שתרצה.
18 מתוך 20
אפשרויות תפריט קפיצה
לאחר שתוסיף את כל הקישורים שאתה רוצה, עליך לבחור את האפשרויות הבאות:
פתח כתובות אתרים ב-
אם יש לך ערכת מסגרות, תוכל לפתוח את הקישורים במסגרת אחרת. לחלופין, באפשרותך לשנות את האפשרות של חלון ראשי ליעד מיוחד, כך שכתובת האתר תיפתח בחלון חדש או במקום אחר.
שם תפריט
תן לתפריט מזהה ייחודי עבור הדף. פעולה זו נדרשת כדי שהסקריפט יפעל כהלכה. זה גם מאפשר לך לקבל מספר תפריטים לקפוץ בצורה אחת - פשוט לתת להם את כל השמות.
הכנס לחצן אחרי תפריט
אני אוהב לבחור את זה כי לפעמים את התסריט לא עובד כאשר התפריט משתנה. זה גם נגיש יותר.
בחר פריט ראשון לאחר שינוי כתובת האתר
בחר באפשרות זו אם יש לך הנחיה כגון "בחר אחד" כפריט התפריט הראשון. זה יבטיח כי פריט זה נשאר ברירת המחדל בדף.
19 מתוך 20
קפיצה תפריט תצוגת עיצוב
בדיוק כמו עם התפריט הראשון שלך, Dreamweaver מגדיר את תפריט הקפיצה שלך בתצוגת עיצוב עם פריט ברירת המחדל גלוי. לאחר מכן תוכל לערוך את התפריט הנפתח כמו שאתה עושה כל האחרים.
אם אתה עורך את זה, הקפד לא לשנות את כל המזהים על הפריטים, אחרת סקריפט לא יכול לעבוד.
20 מתוך 20
תפריט קפיצה בדפדפן
שמירת הקובץ ופגיעה ב- F12 תציג את הדף בדפדפן המועדף עליך. שם אתה יכול לבחור אפשרות, לחץ על "עבור" ואת תפריט קפיצה עובד!