יש לתת כותרת לדף - במקום המיועד לכך Titleזאת אינפורמציה חשובה המשמשת את רובוט מנועי החיפוש.

יש להכניס במקום המיועד לכך מילות מפתח-אלו המילים אותן
יקליד המשתמש במנוע החיפוש ולפיהן יאתר רובוט מנוע החיפוש
את האתר.
נכניס מילים אלה מופרדות בפסיק בתפריט:
Html----Head>Keywords

יש להכניס במקום המיועד לכך ,תיאור האתר.
מספר שורות -4 המתארות את האתר. לצרכי מנוע החיפוש.
נכניס פסקה זו בתפריט:
Html----Head>Description

לסיום נבצע Save לכל הדפים.
נעלה לשרת את כל תוכן ספריית Html .

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

נטפל בשלב ראשון במרכוז האתר.
נסמן את הטבלה החיצונית של הדף, ובתפריט Properties מטה... נסמן:
Align----center

רקע האתר:
נוכל להשאיר את רקע האתר לבן.
במקרה ונרצה לשנות את צבעו של רקע האתר לצבע אחיד אחר או לתמונה
מסוימת, נוכל לעשות זאת לכל דף בנפרד דרך תפריט Properties
Page properties.....Appearance…
Background color/Background Image
יש אפשרות לטפל ברקע עבור כל דפי האתר במרוכז, זה יעשה דרך קובץ Css , יוסבר בהמשך.

הכנסת תמונות, טקסט, אנימציות, סרטוני פלאש לתא המיועד לכך בדף האתר
בשלב ראשון נמחק את כל התמונות הממוקמות בתאים בתוכם נרצה למקם
כל אחד מהפריטים הנ“ל.
בכדי למקם אלמנט מסוים בתא, התמונה שלו חייבת להפוך לרקע ורק אז נוכל
למקם מעליה אלמנט מסויים.
נסמן את התמונה למחיקה, נבדוק מה השם שלה למטה בתפריט Properties
ונלחץ Del במקלדת.
כאשר אנחנו עומדים בתוך התא ממנו מחקנו את התמונה, נאתר בספריית
Images את התמונה שמחקנו ונמתח אליה קישור כ-Background .....
מתוך תפריט: Properties>BG----Point to file .
כרגע תמונת התא נמצאת ברקע ועליה נוכל למקם את האלמנט שרצינו.
נעמוד בתוך התא, נאתר את האלמנט שרצינו בתוך ספריית Images>files
ופשוט נגרור אותו אל תוך התא.
נוכל למקם את האלמנט בתוך התא במיקום הרצוי ע“י שימוש בתפריט
Properties----Cell: Horz/vert

יצירת קובץ Css
קובץ זה אשר נבנה כתוספת לשפת ה-Html ומטפל בעיצוב.
כאן נקבע גודל/סוג גופן/צבע טקסט חי שיופיע באתר, עיצוב הקישורים באתר
הוראה לכתיבה בעברית, צבע רקע(בדרך אחרת ממה שהוזכר מעלה) ועוד...
אנחנו יוצרים את חוקי ה-Css פעם אחת לכל הדפים ומקשרים את כל אחד
מדפי האתר לקובץ זה.
ישנם סוגים שונים של חוקי Css , נעבור על כמה מהחשובים והשכיחים לשימוש.
מצד ימין פלטת Css .
עבור כל חוק חדש נבחר בתחתית הפלטה: New Css Rule .
ייפתח חלון שבו למעלה:Selector type
לאפשרות זו 3 מצבים: Advanced ,Tag ,Class
נבחר אחד המצבים האלה בהתאם לסוג החוק אותו נרצה לקבוע.
את המלבן האמצעי נמלא בהתאם לסוג החוק שבחרנו.
באפשרות מטה: in Define נשאיר את ברירת המחדלStyles.css , שזה יהיה
הקובץ אליו נרצה לצרף את כל החוקים לשימוש כל דפי האתר.
* גם דרך תפריט Properties , ניתן להגדיר רבים מחוקי העיצוב לדף, אולם
החיסרון בשיטת עבודה זו הוא שיש להגדיר מחדש עבור כל דף בנפרד, בעוד
שכאשר יצרנו פעם אחת קובץ חוקים styles.css , נוכל בלחיצה לצרף אותו
לכל דפי האתר.
חוק לשינוי רקע האתר: מסוג Tag
נסמן את האפשרות Tag , מתחת body :Tag , ואז ייפתח חלון Category
נבחר: Back ground: background color/background image
חוק לקביעת צורת הטקסט החי:גופן, גודל,צבע. מסוג Class
נסמן את האפשרות Class , מתחת Name:Hebrew_text , ניתן שם לחוק
למשל:Hebrew_text .
בהיפתח חלון Category נבחר באפשרות : Type .
נבחר סוג פונט: ,Font: Arial,Helvetica,sans-serif , עבור טקסט חי זו הבחירה
הטובה ביותר, אפשר כמובן לבחור אופציה אחרת.
נבחר Size , גודל הגופן. יש לשים לב באילו יחידות אנחנו נמצאים:
...points ,Pixels וכו‘...
נבחר את צבע הטקסט באפשרות Color .
באופציה Decoration , נסמן None . לסיום נאשר.
נפתח את הקובץ styles.css ב-Dreamweaver , ונוסיף לחוק  שורה עבור
כתיבת עברית מימין לשמאל: rtl:direction .
חוק לתצורה של כל הקישורים באתר: מסוג Advanced
חוק זה מתחלק לארבע הגדרות שונות: אחת לכל מצב אפשרי של העכבר.
כיצד ייראה קישור לפני שלחצנו עליו(ברירת מחדל כחול) a:link
כיצד ייראה קישור אחרי שלחצנו עליו(ברירת מחדל סגול) a:visit
מצב Rollover , a:hover
כיצד ייראה קישור כאשר העכבר לחוץ(בד“כ לא בשימוש) a:active
לכל אחד מן המצבים נקבע גופן, גודל, צבע, משקל וכו‘...ובאפשרות
Decoration , נבחר באופציה underline , שזוהי התצורה המקובלת באינטרנט
לקישור.
יש לשים לב! כל הקשור להגדרות הקישורים שהגדרנו ב-Css מופיע בראש הדף
תחת תגית Head . במקרה והוגדרו במקרים מסוימים הגדרות לקישורים בשלב
הפוטושופ, הן תופענה מאוחר יותר תחת תגית Body , ולכן אם יישארו שם יבטלו
את הגדרות ה-Css . יש לדאוג לנקות הגדרות אלה אם קיימות.
הערות כלליות לכל חוקי Css
כאשר סיימנו להגדיר חוק בתחתית החלון שורת מקשים. יש ללחוץ ok ואח“כ
במקרה של חוק מסוג class להוסיף אותו. אם נלחץ Apply לא יקרה השינוי.
תפקידו של ה-Apply , במקרה של חזרה לחוק קיים ועריכתו-יתווסף השינוי.
תזכורת: רק בעת יצירת החוק הוא יקושר ישירות לדף ה-Hml בו אנחנו
נמצאים. לכל הדפים הבאים יש לבצע קישור יזום לקובץ styles.css,בתפריט
Properties-----styles-----attach style sheet

הכנסת טקסט חי לתא בדף.
כמו שהוזכר מעלה, במקרה של הכנסת אלמנט כלשהו לתא, יש להפוך את
התמונה שבתא למצב Background (ראה הסבר מעלה, הכנסת תמונות וכו‘...
לתא). לאחר סידור התמונה כרקע נוכל לשים מעליה את הטקסט.
נמצאים למעלה על תפריט Common ובוחרים באפשרות של יצירת טבלה.
מגדירים מספר שורות ועמודות עפ“י הצורך וקובעים את רוחב הטבלה בד“כ
באחוזים, המתייחסים לאחוז מגודל התא בו אנחנו נמצאים.
לאחר יצירת הטבלה מוסיפים לה הגדרת Css לטקסטים אותה קבענו מראש
בקובץ styles.css . ההוספה תעשה מתפריט style ------properties . לא
לשכוח לסמן את הטבלה. כעת נקבע את כיוון התחלת כתיבת הטקסט ונעתיק
את הטקסט אל הטבלה.
הטקסט בעברית יוצג בתוך ה-dreamweaver כאשר הוא נכתב משמאל לימין
אבל המילים עצמן כתובות מימין לשמאל. באינטרנט זה יוצג כראוי.

יצירת Rollover מסוג תמונה:
בשלב הפוטושופ יצרנו את המצבים השונים ושמרנו כתמונות מסוג: jpeg,gif,png
אותן שמרנו בספריית  Images>files .
כעת מתמקמים בתא בו יופיע התפריט, קובעים את תמונת התא כרקע ומוסיפים לתא טבלה עם עמודות כמספר המקשים ועוד מספר הרווחים ביניהם.
לכל אחד מהמקשים בתפריט מבצעים:
מתפריט Common בוחרים: Image ---Rollover -Image , ובחלון השיח
ושנפתח ממלאים:
שם הכפתור(אין לזה חשיבות אבל כדאי תמיד שם רלוונטי) Image name
התמונה המקורית שתוצג Original Image
התמונה שתוצג כאשר המשתמש יעבור עם העכבר Rollover Image
בכדי שגם תמונות ה-rollover ייטענו מראש נסמן וי באפשרות:
preload rollover image
לטקסט חלופי שיופיע בעת מעבר העכבר:text Alternate
הקישור/שם דף ה-Html אליו יגיע המשתמש עם לחיצה על הכפתור
When clicked, go to url

יצירת קישור לתמונה/טקסט חי.
נסמן את התמונה/הטקסט אליהם אנחנו רוצים לבצע קישור.
בתפריט ה- Properties מטה בחלון Link נמלא את הכתובת הרצויה. אם מדובר
בדף בתוך האתר שלנו נרשום רק את שם הדף נקודה Html , אין צורך בכל
הכתובת. במקרה של דף חיצוני לאתר שלנו, נרשום כתובת מלאה.
אם המדובר בקישור לדף חיצוני לאתר תמיד נסמן מתחת את האפשרות blank אשר תפתח את הדף בחלון חדש.

יצירת קישור לתיבת דואר לתמונה/טקסט חי.
הפעולה תיעשה בדיוק כפי שנעשתה בקישור רגיל, רק שלפני שם תיבת הדואר
אליה אנו מבצעים קישור נוסיף: :mailto
לדוגמא: .mailto:info@louistudio.co.il