WikiHow זה מלמד אותך כיצד להשתמש ב- Adobe Dreamweaver ליצירת תיבה נפתחת לדף אינטרנט. תיבות נפתחות הן תפריטים ה"נפתחים "כאשר לוחצים על פריט בדף האינטרנט שלך, ומציגים אפשרויות נוספות בתהליך.
צעדים
שלב 1. פתח פרויקט Dreamweaver
לחץ פעמיים על קובץ הפרוייקט לשם כך. אם ברצונך ליצור פרויקט חדש של Dreamweaver, במקום זאת תפתח את Dreamweaver, לחץ על קוֹבֶץ, לחץ חָדָשׁ, ופעל לפי כל ההנחיות שעל המסך.
שלב 2. צור רשימה מסודרת
על מנת ליצור תפריט נפתח, עליך להכיל לפחות פריט אחד של נקודות. אתה יכול ליצור נקודת קליע על ידי כיבוי CSS (לחץ על נוף בתפריט, בחר עיבוד סגנון ולחץ סגנונות תצוגה אם הוא מסומן), לחיצה על המיקום שבו ברצונך להוסיף את הנקודה, לחיצה על סמל נקודת הכדור בתחתית החלון והקלדת שם הנקודה. לאחר מכן עליך להפעיל מחדש את CSS לפני שתמשיך.
- שם הנקודה כאן ישמש כמפעיל התפריט הנפתח שלך (למשל, הכפתור שעליו מרחף או מקיש כדי לפתוח את התפריט הנפתח).
- דלג על שלב זה אם יש לך כבר פריט רשימה שברצונך להמיר לתפריט הנפתח.
שלב 3. קבע את שם הרשימה שלך
לחץ על קוד הכרטיסייה וודא שאתה נמצא ב- קוד מקור הגדרה ולאחר מכן גלול מטה אל קוד הרשימה שהוזמנת (זה יהיה בין"
"תג וא"
"tag) וחפש את התג" "מעל הדף"
tag. המילה במרכאות היא שם הרשימה שלך.
-
אם אינך רואה שם, הכנס את התג (שם השם מתייחס לשם המועדף עליך ברשימה) ישירות מעל
תָג.
שלב 4. הסר את נקודות הכדור
וודא שאתה נמצא במקום הנכון על ידי לחיצה על לְעַצֵב הכרטיסייה ולאחר מכן לחיצה על מעצב CSS הכרטיסייה בפינה השמאלית העליונה של החלון, ולאחר מכן בצע את הפעולות הבאות:
- נְקִישָׁה + מימין לכותרת "בוחרים".
- הקלד #name ul כאשר "שם" הוא שם הרשימה שלך.
- הקש ↵ Enter פעמיים.
- גלול למטה ולחץ סוג בסגנון רשימה בחלונית בתחתית מעצב CSS כרטיסייה.
- נְקִישָׁה אף אחד בתפריט המוקפץ שנוצר.
שלב 5. שנה את הרשימה המוזמנת שלך כך שתוצג בצורה אופקית
לשם כך:
- נְקִישָׁה + מימין לכותרת "בוחרים".
- הקלד #name li כאשר "שם" הוא שם הרשימה שלך.
- מצא את הכותרת "צף" בחלונית בתחתית מעצב CSS כרטיסייה.
- לחץ על שמאלה כפתור מיד מימין לכותרת "לצוף".
שלב 6. הוסף תג פעיל לרשימה שלך
לחץ על + כפתור מימין ל"בוררים ", הקלד #name a (שם" שם "הוא שם הרשימה שלך ולחץ על ↵ Enter פעמיים.
שלב 7. הוסף צבע רקע
בחר את #תן שם ל אם יש צורך, לחץ על הכרטיסייה בצבע "רקע" בצורת התיבה בחלק העליון של מעצב CSS בחלונית, בחר את צבע רקע ובחרו צבע רקע לשימוש.
זהו הצבע בו ישתמשו הפריטים הנפתחים של הרשימה הנפתחת
שלב 8. הפוך את פריטי הרשימה שלך לתבנית "בלוק"
פורמט זה מבטיח שכאשר מישהו הולך ללחוץ או להקיש על פריט ברשימה, הוא יכול לפתוח אותו על ידי בחירה מעט למעלה או מתחתיו במקום לבחור את הטקסט במדויק:
- ודא שלך #תן שם ל הפריט נבחר ב- מעצב CSS כרטיסייה.
- גלול מטה לכותרת "תצוגה" בחלונית.
- לחץ על הצד הימני ביותר של הכותרת "תצוגה" ולאחר מכן לחץ על לַחסוֹם בתפריט המתקבל.
שלב 9. הוסף ריפוד במידת הצורך
אם אתה מבחין שפריטי הרשימה שלך תקועים זה בזה, תוכל להציב מרווח ביניהם על ידי ביצוע הפעולות הבאות:
- ודא שלך #תן שם ל הפריט נבחר ב- מעצב CSS כרטיסייה.
- גלול מטה לכותרת "ריפוד" בחלונית.
- שנה את שדות הטקסט "פיקסלים" העליונים והתחתונים לקריאה של 5 לפחות.
- שנה את שדות הטקסט "פיקסלים" שמאלה וימינה לקריאה של 10 לפחות.
שלב 10. צור צבע רחף
זהו הצבע שיופיע כאשר תעביר את סמן העכבר מעל פריט בתפריט הנפתח:
- נְקִישָׁה + מימין לכותרת "בוחרים".
- הקלד #nave a: רחף (כאשר "שם" הוא שם הרשימה שלך ולחץ על ↵ Enter פעמיים.
- לחץ על הכרטיסייה "צבע רקע".
- בחר צבע רקע ולאחר מכן בחר צבע בהיר יותר מזה שהשתמשת בו לצבע הרקע.
שלב 11. כבה את CSS
לחץ על נוף בתפריט, בחר עיבוד סגנון ולחץ על סגנונות תצוגה אפשרות בחלון המוקפץ.
אם ה סגנונות תצוגה האפשרות אפורה, לחץ בכל מקום במסמך Dreamweaver שלך ונסה שוב.
שלב 12. צור את תוכן התפריט הנפתח
תוכל לעשות זאת על ידי הוספת נקודות משנה מתחת לנקודת הכדור בה ברצונך להשתמש ככפתור התפריט הנפתח:
- לחץ מימין לפריט הרשימה שברצונך להפוך לתפריט נפתח ולאחר מכן הקש על ↵ Enter.
- הקש Tab ↹.
- הקלד את שם הפריט הנפתח הראשון בתפריט הנפתח ולאחר מכן הקש על ↵ Enter.
- הקלד את שם התפריט הנפתח הבא ולאחר מכן הקש על ↵ Enter וחזור על פי הצורך.
שלב 13. קשרו את תכולת התפריט הנפתח לפריט כדור
לשם כך:
- נְקִישָׁה + ליד "בוחרים", הקלד #name ul ul ולחץ על ↵ Enter פעמיים.
- גלול למטה ולחץ לְהַצִיג ולאחר מכן לחץ על אף אחד בתפריט המוקפץ.
- מצא ולחץ עמדה ולאחר מכן לחץ על מוּחלָט בתפריט המוקפץ.
שלב 14. צור את התפריט הנפתח עצמו
יהיה עליך להוסיף בורר נוסף לשם כך:
- נְקִישָׁה + ליד "בוחרים", הקלד #name ul li: רחף> ul ולחץ על ↵ Enter פעמיים.
- מצא ולחץ לְהַצִיג ולאחר מכן לחץ על לַחסוֹם בתפריט המוקפץ שנוצר.
שלב 15. הצג את תכולת התפריט הנפתח בצורה אנכית
כברירת מחדל, תוכן התפריט הנפתח יוצג בסרגל אופקי, אך תוכל לכפות אותם לעמודה אנכית על ידי ביצוע הפעולות הבאות:
- נְקִישָׁה + ליד "בוחרים", הקלד #name ul ul li ולחץ על ↵ Enter פעמיים.
- מצא את הכותרת "לצוף".
- לחץ על "אין" () אפשרות מימין לכותרת "לצוף".
שלב 16. שמור את הפרויקט שלך
הקש Ctrl+S (Windows) או ⌘ Command+S (Mac) כדי לעשות זאת.
