תהליכי עבודה ברמה גבוהה המתארים את שלבי העיצוב והפיתוח של אתרים באמצעות Dreamweaver

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

הערה:

מאמר זה מניח שיש לך הבנה ברמה של משתמש מתחיל או משתמש ברמה בינונית בתחום האינטרנט, וגם בנושאי HTML ,CSS ו- JavaScript.

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

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

    בהנחה שיש לך הבנה ברורה של אתר האינטרנט שברצונך לפתח ואת האופן והמיקום שבו ברצונך לארח אותו, ולאחר שבחרת את Dreamweaver ואת Creative Cloud עבור תהליך פיתוח אתר האינטרנט, המשך לשלב הבא.

  2. בדוק אם יש לך כל המשאבים הדרושים עבור אתר האינטרנט שלך. אסוף וארגן אותם יחד בתיקיות המקומיות שלך או ב- Adobe Creative Cloud Libraries.

  3. יצירה של מסמך חדש ב- Dreamweaver באמצעות:

    • מסמך חדש וריק,
    • חבילת תבניות Starter להתחלת העבודה עם Dreamweaver, או
    • קובצי תבנית (dwt.*) שנוצרו על-ידי מישהו אחר

    הערה:

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

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

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

  5. הגדר אתר האינטרנט שלך ב- Dreamweaver. התחל ביצירת מבנה תיקייה עם קבצים ומשאבים. לאחר ארגון המידע וקביעת המבנה, ניתן להתחיל בבניית האתר. (ראה את אודות אתרי Dreamweaver).

    בשלב זה, מומלץ גם להגדיר חיבורים לשרתים מרוחקים, ולהגדיר שרת בדיקה (אם יש לך תוכן דינמי). 

  6. התחל לקדד את דפי האינטרנט בתצוגה Code או לעצב אותם בתצוגה Design / Live.

    אם בכוונתך להשתמש ברכיבי Photoshop, באפשרותך לחלץ אותם לתוך Dreamweaver ולעבוד גם איתם. לקבלת מידע נוסף על עבודה עם רכיבי Photoshop, ראה Extract in Dreamweaver CC.

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

  7. עצב את המראה של דף האינטרנט באמצעות CSS.

    עומדות לרשותך מגוון דרכים לעבודה עם CSS ב-Dreamweaver:

    • תוכל לקודד בצורה ידנית את ה- CSS. לקבלת מידע על תכונות הקידוד של Dreamweaver היכולות לסייע לך לקודד ידנית את ה- CSS, ראה את סביבת קידוד ב- Dreamweaver.
    • אם אינך מכיר היטב את עבודת היצירה של דפי CSS, ניתן להשתמש בחלונית CSS Designer כדי לסייע לך בבניית CSS. לקבלת מידע נוסף על CSS Designer, ראה פריסת עמודים באמצעות CSS Designer.
    • אם אתה מעדיף לעבוד עם קובצי Sass ו- Less, ‏Dreamweaver תומך גם באפשרות זו, ומאפשר לך לייבא קובצי Sass ו- Less לאתר Dreamweaver ולעבוד איתם. לאחר מכן, Dreamweaver מבצע קומפילציה אוטומטית של הקבצים (תוכל לבחור לבצע קומפילציה ידנית) ולראות את תוצאות השינויים ב- CSS בזמן אמת. לקבלת מידע על השימוש בקובצי Sass ו- Less עם Dreamweaver, ראה ‏‫כלים לעיבוד מקדים של CSS‬.
  8. הגדר יישום אינטרנט ליצירת תוכן דינמי.

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

  9. יצירת דפים דינמיים.

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

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

  10. בדיקה, תצוגה מקדימה ופרסום אתר האינטרנט שלך. 

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

    ניתן גם להציג בתצוגה מקדימה דפי אינטרנט בזמן אמת בהתקן (אם אתה יוצר דפי אינטרנט רספונסיביים), או בדפדפן.

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

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

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת