מדריך לבניית טופס יצירת קשר ב dreamweaver

 

בנייה ועיצוב השדות לטופס (contact form) בעמוד האתר - חלק 5

עמוד 5 לעמוד הראשון במדריך לעמוד הקודם במדריך

 

 

כפתור "נקה טופס"

נגדיר את הכפתור באותה הדרך. לאחר הוספתו, נערוך את הטקסט עבורו באותו האופן, ונזין את הטקסט "נקה טופס".

נגדיר את פעולת הכפתור כ- Reset Form.

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 29

בניית הטופס שלנו הושלמה. כל שנותר לנו הוא לעצב את הטקסט שבו. נעשה זאת באמצעות תבנית עיצוב.

נסמן טקסט מתוך הטופס ונקליק על לחצן New CSS Rule.

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 30

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

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 31

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

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 32

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

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

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 33

כך יראה הטופס בדפדפן האינטרנט.

מדריך לעיצוב טופס יצירת קשר בדרימוויבר - Dreamweaver Contact Form Design - 34

בכדי "להחיות" את הטופס ולגרום להודעות להישלח אל תיבת המייל שלכם, עליכם להוסיף קובץ נוסף בשם 'contact.php' (או כל שם שתבחרו עם סיומת php) כפי שמוסבר במדריך איך להגדיר טופס יצירת קשר באתר.

 

עמוד 5 לעמוד הראשון במדריך לעמוד הקודם במדריך

 

למעונינים - להלן מדריך וידאו ליצירת טופס מתקדם יותר:

 

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

 

חזרה למדריך הוספת אובייקטים לעמוד האתר ב Dreamweaver

 

טפסים

1. מה זה טופס?

2. יצירת טופס.

3. עיצוב הטופס.

4. הגדרות הטופס.

 

חזרה למעלה

הכנות לבניית האתר עם Dreanweaver

CSS ב Dreamweaver

כלי בדיקה לאתר ב Dreamweaver

 

 

 

 

צעצועים לילדים Fotolia