מדריך למשתמש ביטול

עיצוב אתרים רספונסיביים באמצעות Bootstrap

 

 

לקבלת אתר אינטרנט מהיר תגובה המתרכז בהתקנים ניידים, השתמש בתבניות Starter של Bootstrap וגרור ושחרר רכיבי Bootstrap ב-Dreamweaver.

מסגרת Bootstrap‏, שניתנת ללא תשלום, היא מסגרת פופולרית של Javascript‏, HTML ו-CSS המיועדת לפיתוח אתרים מהירי תגובה לנייד. המסגרת כוללת תבניות מהירות תגובה של CSS ו-HTML לטבלאות, לחצנים, ניווט, קרוסלות תמונות ורכיבים אחרים שבהם ניתן להשתמש בדפי אינטרנט. לצד Bootstrap זמינים תוספים אופציונליים של JavaScript, שמאפשרים למפתחים עם ידע בסיסי לפתח אתרים מעולים ומהירי תגובה.

Dreamweaver מאפשר לך ליצור מסמכי Bootstrap וכן לערוך דפי אינטרנט קיימים שנוצרו באמצעות Bootstrap. ניתן לערוך ב-Dreamweaver קובצי Bootstrap שעוצבו במלואם, או קבצים שעדיין לא הושלמו, לא רק לצורך עריכת הקוד אלא גם לצורך שינוי העיצוב, באמצעות תכונות עריכה חזותיות כמו עריכה ב-Live View‏, Visual CSS Designer‏, Visual Media Queries ו-Extract.

הערה:

גרסאות Bootstrap הנתמכות כעת כוללות את גרסה 4.4.1 וגרסה 3.4.1.

שאלות נפוצות

אני משתמש בפריסות Fluid Grid ב-Dreamweaver. מה עליי לעשות כדי להתחיל בעבודה עם Bootstrap?

כאשר יצרת מסמכי Fluid Grid‏, Dreamweaver החיל עליהם את המחלקות המתאימות באופן אוטומטי כדי להפוך את דפי האינטרנט לדפים מהירי תגובה. אתה היית צריך רק להתמקד בתוכן ולהחליט כיצד תתבצע הזרמה מחדש של דפי האינטרנט בגורמי צורה שונים.

באופן דומה, במסמכי Bootstrap, עליך להתמקד רק בתוכן ובעיצוב ו-Dreamweaver, המשולב היטב במסגרת Bootstrap, יטפל במהירות התגובה של הדפים.

נכון לעכשיו, Dreamweaver תומך בגרסאות 3.4.1 ו-4.4.1 של Bootstrap:

"3.4.1 Bootstrap כולל מערכת Fluid Grid מהירת תגובה המתחילה מהתאמת התוכן לניידים ומתרחבת לפי הצורך עד ל-12 עמודות אם המסך של המכשיר או חלון התצוגה גדולים יותר. הוא כולל מחלקות מוגדרות מראש המספקות אפשרויות לביצוע פריסה בקלות, כמו גם שילובים רבי עוצמה ליצירת פריסות סמנטיות". - התיעוד של Bootstrap.

"Bootstrap 4.4.1, עם שינויים משמעותיים, כולל רשת Flexbox רבת עוצמה שנועדה בעיקר למכשירים ניידים המיועדת לבניית פריסות בכל הצורות ובכל קנה מידה, הודות למערכת של 12 עמודות, 5 שכבות מהירות תגובה המוגדרות כברירת מחדל, משתנים ומחלקות mixin של Sass ועשרות מחלקות מוגדרות מראש." - התיעוד של Bootstrap.

כדי להתחיל בעבודה עם מסמכי Bootstrap ב-Dreamweaver, מומלץ להשתמש בתבניות Starter של Bootstrap. ב-Dreamweaver נכללות כמה תבניות המיועדות לסוגים שונים של אתרים שייתכן שתרצה ליצור. לדוגמה, אתר מסחר אלקטרוני או תיק עבודות.

אם ברצונך ליצור מסמך Bootstrap מאפס, תוכל לעשות זאת בכל עת כפי שמתואר בסעיף יצירת מסמכי Bootstrap.

האם ניתן להעביר מסמכי Fluid Grid קיימים למסמכי Bootstrap ב-Dreamweaver?

לא, לא קיימת שיטה ישירה להמרת מסמכי Fluid Grid קיימים למסמכי Bootstrap. עם זאת, חוויית השימוש ב-Dreamweaver בעת יצירה ועיצוב של מסמכי Bootstrap דומה לחוויית השימוש בעת יצירת מסמכי Fluid Grid. לדוגמה, תוכל להתחיל בעבודה ליצירת מסמך Bootstrap ישירות מתיבת הדו-שיח New Document. בעוד שכשמדובר במסמכי Fluid Grid עליך ליצור שלושה גורמי צורה בסיסיים - Mobile‏, Tablet ו-Desktop, ב-Bootstrap העבודה מתחילה ביצירת מסמך המיועד לגדלים בסיסיים של מסכים – קטן, בינוני, גדול וגדול מאוד. אפשרויות העריכה של הפריסה המוצגות בעת לחיצה על רכיבים במסמכי Bootstrap גם הן דומות לאפשרויות המוצגות במסמכי Fluid Grid.

האם ניתן לייבא אתרים ישנים בגרסה העדכנית ביותר של Dreamweaver?

כן, ניתן לייבא אתרים ישנים בגרסה העדכנית ביותר של Dreamweaver. כשתעשה זאת, Dreamweaver יחפש את קובץ ה-CSS של Bootstrap בתיקייה site root/css/‎.

  • אם האתר כולל קובץ CSS של Bootstrap v3, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-3.4.1.
  • אם האתר כולל קובץ CSS של Bootstrap v4, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-4.4.1.
  • אם האתר אינו כולל קובץ CSS של Bootstrap בנתיב site root/css, גרסת Bootstrap ב-Manage Site >‏ Advanced Settings >‏ Bootstrap מוגדרת כ-4.4.1.

יצירת מסמכי Bootstrap

באפשרותך להתחיל לעצב את אתר האינטרנט של Bootstrap באמצעות אחת מהאפשרויות הבאות בתיבת הדו-שיח New Document:

  • תבניות starter של Bootstrap ‏(Starter Templates >‏ Bootstrap Templates) - השתמש באפשרות זו אם ברצונך להתחיל בעבודה במהירות ללא הטרחה של פריסת הדפים שלך מההתחלה. פשוט ערוך את הטקסט והחלף את המשאבים, במידת הצורך, והאתר מהיר התגובה שלך יהיה מוכן. לקבלת מידע נוסף, ראה שימוש בתבניות starter של Bootstrap.
  • יצירת מסמך HTML המבוסס על סביבת Bootstrap ‏(New Document > HTML > Bootstrap) - השתמש באפשרות זו אם ברצונך ליצור את אתר האינטרנט שלך באופן הדרגתי באמצעות רכיבי CSS ו-Bootstrap בתוך Dreamweaver. לקבלת מידע נוסף, ראה יצירת מסמכי HTML המבוססים על סביבת Bootstrap.

שימוש בתבניות starter של Bootstrap

תבניות starter של Bootstrap מאפשרות לך ליצור דפי אינטרנט עבור ערכות נושאים פופולריות בן רגע. כל הקבצים בעלי יחסי תלות במסגרת נשמרים באופן אוטומטי.

  1. לחץ על File >‏ New.

  2. בתיבת הדו-שיח New Document שמופיעה, לחץ על Starter Templates, ולאחר מכן בחר את התבנית הדרושה מרשימת Bootstrap Templates.

  3. לחץ על Create

    דף HTML המבוסס על התבנית שבחרת נוצר. כעת תוכל לשנות את הדף על-ידי הוספה או מחיקה של רכיבים, עריכת טקסט או משאבים, כנדרש.

יצירת מסמכי HTML המבוססים על סביבת Bootstrap

באפשרותך להתחיל ביצירת אתר האינטרנט מהיר התגובה שלך על-ידי יצירת מסמך HTML המבוסס על סביבת Bootstrap. באפשרותך לבחור ליצור קבוצה של קובצי סביבת Bootstrap או להשתמש בקבצים הקיימים. לאחר יצירת המסמך, באפשרותך להוסיף רכיבי Bootstrap כגון תפריטי אקורדיון וקרוסלות באמצעות החלונית Insert ב-Dreamweaver. לחלופין, אם יש לך רכיבי Photoshop, באפשרותך להשתמש ב-Extract להבאת תמונות, גופנים, סגנונות, טקסט ועוד למסמך Bootstrap שלך.

  1. לחץ על File >‏ New.

  2. בתיבת הדו-שיח New Document, לחץ על New Document >‏ HTML ולאחר מכן לחץ על הכרטיסיה Bootstrap.

  3. כדי ליצור קובץ חדש של bootstrap.css (ואת קובצי Bootstrap אחרים), בצע את הפעולות הבאות:

    ציין אם ברצונך ליצור Bootstrap CSS חדש או להשתמש ב-CSS קיים.

    אם תבחר ליצור CSS חדש, תיקיית "css" תיווצר בתיקיית השורש של האתר, והקובץ bootstrap.css יועתק אל התיקייה החדשה. אם תבחר להשתמש ב-CSS קיים, ציין את הנתיב או דפדף למיקום של ה-CSS.

    1. לחץ על Create New.

      יצירת מסמך Bootstrap חדש
      יצירת מסמך Bootstrap חדש

    2. (אופציונלי) אם ברצונך לצרף CSS אחר למסמך שלך, לחץ על  במקטע Attach CSS. תיבת הדו-שיח Attach External Style Sheet מופיעה. ציין את ההגדרות ולחץ על OK.

    3. האפשרות Include A Pre-built Layout מספקת מבנה מסמך בסיסי של Bootstrap.

      אם אינך רוצה את המבנה הבסיסי וברצונך להתחיל מהתחלה עם מסמך ריק, בטל את הבחירה באפשרות Include A Pre-built Layout.

    4. (אופציונלי) פריסת ברירת המחדל מכילה 12 עמודות עם מרווח עמודות של 30 פיקסלים. גודלי ברירת המחדל של המסך הם 576px‏, 768px‏, 992px ו-1200px. 

      אם ברצונך לשנות הגדרות אלה, לחץ על Customize. הקובץ bootstrap.css משתנה בהתאם.

      הערה:

      עבור Bootstrap v3.4.0, גודלי ברירת המחדל של המסך הם ‎768 px‏, 992‎ px ו-1200‎ px.

    5. בחר את האפשרות Use Extract to Build Your Page from Photoshop Comps אם ברצונך לפתוח את החלונית Extract ‏(במקרה שהיא סגורה). בדרך זו, תוכל להתחיל לחלץ משאבים ממבני שכבות של Photoshop באופן מיידי.

      כברירת מחדל, אתר חדש נוצר באמצעות גרסה 4.4.1 של Bootstrap. לאחר שתיצור את המסמך, תמצא את תיקיות ה-css וה-js בתיקיית השורש של האתר. עם זאת, אם ברצונך ליצור את האתר באמצעות גרסה 3.4.1 של Bootstrap, בחר Site > Manage Sites. בחר את תיקיית השורש של האתר. לחץ על Advanced Settings > Bootstrap. בשדה הנפתח Bootstrap Version, בחר 3.4.1. עבור גרסה 3.4.1 של Bootstrap, תראה את תיקיות ה-css, ה-js והגופנים בתיקיית השורש של האתר.

      בחירת גרסה 4.4.1 של Bootstrap
      בחירת גרסה 4.4.1 של Bootstrap

      כאשר אתה יוצר דף של Bootstrap 4.4.1, נתמכת גרסה 3.4.1 של jQuery. תבניות Starter של Bootstrap‬ מעודכנות לשימוש בגרסה 4.4.1 של Bootstrap.

      כאשר אתה מוסיף רכיבי Bootstrap לדף Bootstrap, תוכל לעדכן דפי Bootstrap 4.0.0 ל-Bootstrap 4.4.1 ולעדכן את גרסת jQuery ל-3.4.1. לחץ על Yes בתיבת הדו-שיח שמופיעה כאשר אתה מוסיף רכיבי Bootstrap לדף.

      תיבת דו-שיח לאישור תאימות לגרסאות
      תיבת דו-שיח לאישור תאימות לגרסאות

      תיבת דו-שיח לאישור Bootstrap 3.4.1
      תיבת דו-שיח לאישור Bootstrap 3.4.1

      תיבת דו-שיח מוקפצת של jQuery
      תיבת דו-שיח מוקפצת של jQuery

      כאשר אתה מייבא אתר של Bootstrap 4.0.0 או מעביר אתר מגרסאות קודמות לגרסה הבאה של Dreamweaver, הגרסה של Bootstrap תוגדר כ-4.4.1 ב-Site Setup > Advanced setting > Bootstrap.

    הערה:

    עם Bootstrap 4.3.1, הגובה של עמודה של שורה ברשת משתנה מ-‎1 px ל-‎0 px. לכן, כדי להפוך אותו לגלוי בתצוגה Live עליך להוסיף תוכן כלשהו לעמודה של שורה ברשת.

  4. כדי להשתמש בקובצי סביבת Bootstrap קיימים, בצע את הפעולות הבאות:

    1. לחץ על Use Existing וציין את הנתיב של הקובץ bootstrap.css. באפשרותך גם לעבור אל המיקום שבו שמור ה-CSS.

      יצירת מסמכי Bootstrap באמצעות קובצי סביבה קיימים
      יצירת מסמכי Bootstrap באמצעות קובצי סביבה קיימים

    2. (אופציונלי) אם ברצונך לצרף CSS אחר למסמך שלך, לחץ על  במקטע Attach CSS. בתיבת הדו-שיח Attach External Style Sheet, ציין את ההגדרות ולחץ על OK.

    3. האפשרות Include A Pre-built Layout מספקת מבנה מסמך בסיסי של Bootstrap. אם אינך רוצה את המבנה הבסיסי וברצונך להתחיל מהתחלה עם מסמך ריק, בטל את הבחירה באפשרות Include A Pre-built Layout.

  5. לחץ על Create.

הערה:

הקובץ bootstrap.css שנוצר הוא לקריאה בלבד. אם כך, אין באפשרותך לערוך את הסגנונות הללו באמצעות CSS Designer; החלונית Properties ב-CSS Designer מושבתת בקובצי Bootstrap.

אם ברצונך לשנות את עיצוב מסמך Bootstrap שלך, צור קובץ CSS אחר כדי לעקוף את הסגנונות הקיימים, ולאחר מכן צרף אותו למסמך.

פתיחת קובצי Bootstrap

הערה:

מומלץ לפתוח ולערוך מסמכים הנוצרים רק ב-Bootstrap גרסה 3 ואילך ב-Dreamweaver.

ניתן לפתוח קובצי Bootstrap באחת מהדרכים הבאות:

  • לחץ על File >‏ Open ועבור אל קובץ ה-HTML של Bootstrap.
  • (מומלץ) צור אתר Dreamweaver והפנה את תיקיית האתר אל התיקייה שמכילה את כל קובצי Bootstrap שלך.

בעת פתיחת קובץ HTML של Bootstrap ב-Dreamweaver:

  • השורות מודגשות בקווים מקווקווים אפורים עם פינות מעוגלות
  • העמודות מודגשות בפסים כחולים מקווקווים.

קובצי CSS המשויכים לקובצי HTML של Bootstrap מזוהים על-ידי Dreamweaver אם שם קובץ ה-CSS כולל את המילה "bootstrap". ההפניה לקובץ ה-CSS יכולה להיות אחת מההפניות הבאות:

  • נתיב מקומי:

    קובץ CSS מקומי שצומצם (עבר מיניפיקציה) או לא צומצם. לדוגמה:

    <link href="css/bootstrap.css" rel="stylesheet">‎‎ או
    ‎<link href="css/bootstrap.min.css" rel="stylesheet">‎

  • נתיב מרוחק:
  • קובץ CSS מרוחק שצומצם (עבר מיניפיקציה) או לא צומצם. לדוגמה:

    <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
    <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

  • CDN
  • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

הערה:

ב-Dreamweaver ישנה תמיכה בגליונות סגנונות של Bootstrap בתגי קישור ובתגי ייבוא. עם זאת, אין תמיכה בייבוא מקונן - קישור לגיליון סגנונות שמייבא גיליון סגנונות נוסף.

הסתרה, ביטול הסתרה וניהול של רכיבי Bootstrap מוסתרים

לעתים, עשוי להיות דרוש לך רכיב כדי להציג באזור תצוגה אחד, בעוד שבאזור תצוגה אחר, ייתכן שתרצה להסתיר את הרכיב למטרות עיצוב. 

כדי להסתיר רכיב Bootstrap, לחץ לחיצה ימנית ובחר Hide Element. רכיב זה יוסתר מהתצוגה באופן זמני.

הסתרת רכיבי Bootstrap ב-Dreamweaver
הסתרת רכיבי Bootstrap ב-Dreamweaver

כדי להציג רכיבים מוסתרים ולבטל את הסתרתם, לחץ לחיצה ימנית ובחר Manage Hidden Elements. הרכיבים המוסתרים מופיעים עם רקע אפור משובץ. לחץ על סמל העין כדי לבטל את הסתרת הרכיב.

ניהול של רכיבי Bootstrap מוסתרים
ניהול של רכיבי Bootstrap מוסתרים

הוספת רכיבי Bootstrap

האפשרות Bootstrap Components בחלונית Insert כוללת את רשימת רכיבי Bootstrap שאותם ניתן להוסיף לדף האינטרנט ב-Dreamweaver. בהתאם לגרסת Bootstrap בקובץ bootstrap.css המקושר לדף ה-HTML, הרכיבים המתאימים מפורטים בחלונית Insert.  לדוגמה, ב-Bootstrap v 4.0.0, תראה רכיבים נוספים כגון כרטיסים ותגים. בדומה, רכיבי סמלי גליף, חלונית, מעגנים ותמונה ממוזערת זמינים רק ב-Bootstrap v3.3.7. בהתאם לגרסת Bootstrap, תראה את הרכיבים המתאימים בחלונית Insert. בנוסף, רכיב גלגל מסתובב (Spinner) זמין רק ב-Bootstrap v4.4.1.

הרכיבים בחלונית Insert מאוכלסים בהתבסס על הקריטריונים הבאים:

  • המסמך במצב התמקדות: הרכיבים בחלונית Insert מאוכלסים בהתבסס על גרסת Bootstrap בקובץ Bootstrap המקושר למסמך. 
  • גרסה ב-Site Preferences: עבור מסמך שאינו של Bootstrap, ‏Dreamweaver מחפש את הגרסה ב-Site Preferences >‏ Advanced >‏ Bootstrap. בהתאם לגרסה באפשרות זו, הרכיבים המתאימים מאוכלסים. כברירת מחדל, עבור אתרים חדשים, הגרסה היא 4.4.1.
  • איפה הקבצים נשמרים: עבור מסמך שאינו של Bootstrap ואינו חלק מאתר, החלונית Insert משקפת רכיבים של 4.4.1.
רכיבים נתמכים ב-Bootstrap 4.0.0
רכיבים נתמכים ב-Bootstrap 4.4.1

כדי להוסיף רכיב, גרור אותו מהחלונית אל דף האינטרנט. לפני שחרור הרכיב, שים לב לעזרים חזותיים כמו מחווני Live Guide, ‏Precision Insert (באמצעות DOM) ו-Position Assist. באמצעות העזרים האלו תוכל למקם את הרכיבים בדף שלך במהירות ובצורה מדויקת. לקבלת מידע נוסף על הוספת רכיבים בדפי האינטרנט שלך, ראה סקירה של החלונית Insert.

הוסף שורות

לחץ על השורה שאחריה תרצה להוסיף שורה חדשה. לאחר מכן, לחץ על הסמל Add new row. פעולה זו תוסיף שורת Bootstrap, ולצידה שני רכיבי צאצא של עמודות שכוללים שש עמודות בכל רכיב.

זהו הקוד עבור השורה הנוספת:

‎<div class="row">‎
<div class="col-*-6"></div>‎
<div class="col-*-6"></div>‎
</div>‎

הכוכבית (*) מייצגת את גודל המסך הנוכחי ב-Dreamweaver.

הוסף עמודות

בחר את העמודה הנדרשת ולאחר מכן לחץ על הסמל Add new column. העמודה שנבחרה משוכפלת ללא הצאצאים שלה.

לכל העמודות הריקות מוקצה גובה מקסימלי של 20px. עם זאת, גובה זה אינו נוסף בפועל אל הדף אלא מוצג ב-Live View בלבד, לצורך הוספה נוחה יותר של רכיבים בתוך העמודות.

שכפול שורות ועמודות

לחץ על השורה או העמודה שברצונך לשכפל ולאחר מכן לחץ על סמל השכפול בפינה הימנית התחתונה. השורה או העמודה כולה משוכפלת יחד עם התוכן שלה.

הערה:

האפשרות להוסיף שורה או עמודה משכפלת את השורה או העמודה עם מחלקות, אך ללא התוכן.

הסטה ושינוי גודל של עמודות

פעולות ההסטה ושינוי הגודל של עמודות חשובות במיוחד לצורך יצירת עיצובים מגיבים עבור אזורי תצוגה שונים. 

שינוי גודל העמודות

לחץ על העמודה הרצויה, וגרור את נקודת האחיזה שמימין כדי לשנות את גודל העמודה. עבור מסמך Bootstrap v4.0.0, בעת שינוי הגודל של עמודה, מתווספת המחלקה col-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (sm‏, md‏, ld‏, xl) והאות n מייצגת את מספר העמודות שהשאילתה תופסת. עבור גודל המסך Extra small, המחלקה col-n מתווספת.

עבור מסמך Bootstrap v3.3.7, בעת שינוי הגודל של העמודה, מתווספת המחלקה col-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (xs‏, sm‏, md‏, או lg) והאות n מייצגת את מספר העמודות שהשאילתה תופסת.

גודל המסך הנוכחי מתגלה על-ידי Dreamweaver, ולאחר מכן מתווספת המחלקה המתאימה. כדי לשנות את גודל העמודות כך שיתאימו לאזורי תצוגה ספציפיים, עליך לשנות את גודל אזור התצוגה באמצעות כלי הניקוי או באמצעות האפשרויות שבפינה הימנית התחתונה. בשלב הבא ניתן לשנות את גודל העמודות לפי הצורך.

הסטת עמודות

לחץ על העמודה הרצויה וגרור את נקודה האחיזה שמשמאל כדי להסיט את העמודה. ההסטה מוצגת כאזור משובץ. עבור מסמך Bootstrap v4.0.0, בעת הסטת העמודה, מתווספת המחלקה offset-*-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (sm‏, md‏, ld‏, xl) והאות n מייצגת את מספר העמודות שהשאילתה תופסת.

עבור מסמך Bootstrap v3.3.7, בעת הסטת העמודה, מתווספת המחלקה col-*-offset-n, כאשר הכוכבית (*) מייצגת את שאילתת המדיה הנוכחית (xs, sm, md, or lg) והאות n מייצגת את מספר העמודות להסטה.

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

קבל עזרה במהירות ובקלות

משתמש חדש?