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

אסביר על:

  1. יצירת פרוייקט חדש בDreamweaver.
  2. כתיבה נכונה של HTML ומרכיבי הדף.
  3. חיתוך גרפיקה מקובץ PSD (פוטושופ) והטמעה בHTML.
  4. הבדלים בין טבלאות (TABLE) לדיבים (DIV) ושימושיהם.
  5. העלאת הדף לאינטרנט.

1. יצירת פרוייקט חדש בDreamweaver

כרגע אני עובד עם גרסת CS3 אך שיטת העבודה זהה לגרסת CS4 החדשה ואף לCS2. אם מצאתם טעות אשמח לעדכן.

  • נפתח את חלונית הFiles שלנו (במידה והיא סגורה יש ללחוץ בתפריט העליון על Window > Files, או קיצור מקשים F8).
  • על מנת ליצור פרוייקט חדש, נלחץ על הכפתור בחלונית ה Files, נבחר Site ואז New Site כמו בדוגמה הבאה:

dreamweaverHTML1

  • ייפתח מולנו חלון הגדרות אתר:

dreamweaverHTML2

  • לתוכו נזין את שם האתר פרוייקט ומיקום תיקיית האתר במחשב שלנו (אני נוהג לקרוא לתיקייה שתופיע ברשת בשם "web" מכיוון שכל מה שהיא תכיל, נעלה אחד לאחד לשרת שלנו, בד"כ אני נותן עוד שירותים ללקוחות שלי כמו דפוס ופלאש אינטראקטיבי, לכן בתיקיית הלקוח שלהם יופיעו תיקיות שונות וביניהן תיקיית "web".)
  • שאר ההגדרות אינן חשובות כרגע ונוכל להגדיר אותן בהמשך כשנעלה את האתר שלנו לאינטרנט.
  • נלחץ OK ונתחיל לעבוד.

*(שימו לב שבתוך חלונית Files יופיעו קבצים ותיקיות בהתאם לתיקיית היעד שקבעתם במחשב שלכם, במידה והתיקיה ריקה, תופיע רק תיקיית השורש).