אם אתה מפרסם באינטרנט או עוסק בשווק מוצרים או שירותים באמצעות האינטרנט, אתה חייב קודם דף נחיתה עם טופס יצירת קשר. טופס יצירת קשר שמקושר לאימייל שלך, שפרטי הגולש נשלחים אליך למייל וכמובן דף html פשוט ותקין. כדי לבנות דף נחיתה אתה קודם כל צריכים לבנות דף html פשוט ומעוצב בהתאם שנכניס בתוכו טופס יצירת קשר שכתובה בשפת PHP ומספר מילים המתארים את המוצר או את השירות שאתה רוצה לספק לגולש. כדי להתחיל בבניית דף נחיתה כדי להשתמש בעורך בשם Dreamwiever. הגרסה האחרונה של העורך זה הוא cs4 ובעוד מספר חודשים תצא גרסה החדשה שלה. באפשרותך להוריד Dreamwiever cs4 בחינם מאתר הרשמי של חברת Adobe ל-30 ימי ניסיון.
זה בהחלט יספיק לך כדי לבנות דף נחיתה.לפני שנתחיל אתה יכול לצפות בתמונה שבה מוצגת מה שאנחנו הולכים לבנות. דף נחיתה בדף html עם טופס יצירת קשר PHP שאשלח נתוני הגולש לאימייל שלך.
אז נתחיל….
בניית דף נחיתה
כדי שנתחיל בבניית דף נחיתה, עליך להדליק את העורך Dreanwiever cs4 ולבחור את Html בתפריט האפשרויות הראשי.
לאחר הבחירה נפתח לנו דף עבודה, בעצם דף ריק אבל מוכן לעבודה. הדף כבר כולל תגיות גוף הבסיסי של דף html כדי להתחיל בבניית דף נחיתה שלנו. עליך ללחוץ על כפור Split יציג לנו גם עיצוב וגם את הקוד שנכתב מאחורי האתר. נכון לעכשיו יש לנו דף ריק בעיצוב אבל שנתחיל לעצב את הדף נחיתה שלנו, ניראה את השינויים.
עלינו לפתוח קובץ נוסף בסיומת Css. זהו קובץ ההגדרות של העיצוב הדף האינטרנט שלנו. עליך ללחוץ על כפתור File ולבחור את New. לבחור את Css וללחוץ על Create. כעת, יש לנו 2 קבצים בשם Unitiled. כעת אליך לשמור את שני הקבצים אלה בתיקיה מסוימת במחשב לפני שנתחיל לעבוד עליהם. בוחרים File לוחצים על Save, אני ממליץ לפתוח תיקיה בשולחן עבודה לנוחות בלבד אבל אתה יכול לפתוח את התיקיה בכל מקום במחשב אשר תרצה. לאחר שפתחתה את תיקיה שמור את הקובץ html בשם Index.html. כנ"ל עם קובץ Css אך אותו עליך לשמור בשם Style.css באותה תיקיה.
כעת יש לנו 2 קבצים בתיקיה. index.html וקובץ Style.css . כעת אנחנו נרשום מספר הגדרות בקובץ Style.css שלנו כדי להתחיל בעיצוב הדף. כעת עליך להגדיר כברירת מחדל של הדף באמצעות הכנסת פקודות באלמנט Body.עליך להגדיר פונט כברירת מחדל של הדף, גודל של הפונט, תמונת רקע של הדף וכמובן קידוד של עברית כדי שדף יהיה מותאם לשפה העברית.פקודות כדי להשתמש להגדרות אלה הם מוצגות לתמונה הבא לפי הסדר.
כעת עלינו גם להגדיר גוף הדף כגון גבולות מיקום וגודל. עליך לקראו לו כך div.container אבל באפשרותך לקראו לו על פי רצונך. div מייצג אלמנט שבו מוגדר הקלאס container. אם כרגע דיברתי סינית בשבילך לא נוראה. לא לומדים תכנות תוך יום. פשוט מאוד תגדיר את הדברים כפי שמופיע בתמונה. עורך הגוף 800 פיקסלים, גובה על בסיס אוטומטי, מיקום של הגוף באמצע הדף ורווח בין אלמנט שלפני לגוף 80 פיקסלים. כעת אין לנו שום אלמנט לפני ולכן הוא יצור רווח מהתחלת הדף בדפדפן. אנחנו בהמשך נכניס לוגו וניראה איך זה בא לידי ביטוי ביצירת דף נחיתה ב-html ו-css.
אחרי שיצרנו בסיס לדף שלנו כעת אנחנו יכולים לחזור לדף html שלנו ולהתחיל לעבוד עליו. עלינו להכניס מספר פקודות בסיסיות לתוך הדף נחיתה שלנו. בין תגיות body עלינו להכניס תגיות פתיחה וסגירה של Div. ראה בתמונה למטה. יחד עם תגית div עלינו להכניס גם את קלאס שהגדרנו בקובץ ה-Css שלנו Container.
כעת לא תיראה שום שינוי בעיצוב מכוון שלא קישרנו את הדף נחיתה שלנו של html לקובץ העיצוב Css. כדי לקשר בין הקבצים עליך להכניס פקודה שקוראת את הקובץ Css בין התגיות head בראש הדף.
לאחר שקישרתי את קובץ העיצוב לדף html עלינו להמשיך להכניס פקודות נוספות כגון אלמנט שבתוכו ימוקם טופס יצירת קשר של דף נחיתה שלנו, ואלמנט נוסף המסביר על המוצר שאפשר להכניס בתוכה גם סרטון או כל דבר אחר. עלינו להכניס 2 אלמנטים נוספים בין התגיות div עם קלאס Container. אלה 2 אלמנטים של Div שימוקמו בתוך אלמנט הגוף Container. אני נותן להם שמות לקלאסים שעוד רגע נגדיר אותם בקובץ ה-Css שלנו.
יצירת הגדרות בתוך קובץ ה-Css של הקלאסים האלה כגול גודל ומיקום.
אוקיי כמעט סיימנו. כעת עליכם לפתוח תיקיה נוספת בתוך תיקיה שבו שמרתם את הקבצים של דף נחיתה שלך ולקראו לו "images". נא להוריד את שלוש את התמונות ולעתיק אותם לתוך תיקיית התמונות.
זוכרים שבשלבים הראשונים הגדרנו את הגוף body בתוך Css. יש שם קישור לתמונת רקע של הדף נחיתה שלנו. אז כעת מופיע התמונה של רקע בתיקיית images.
כעת עלינו להוסיף לוגו פשוט לראש הדף על ידי הכנסת קוד בקובץ Css ו-html של הדף נחיתה שלנו.
לאחר שהכנסנו את פרטי הקלאס החדש שלנו לתוך קובץ ה-Css עלינו להכניס שורה פשוטה כדי לקראו לה להתבצעה בדף נחיתה ה-html שלנו.זהו תג div עם קלאס בשם logo שהגדרנו ב-Css.
כעת עליך להוריד טופס יצירת קשר בפוסט שפרסמתי כאן: טופס יצירת קשר להורדה
לאחר שהורדתה את טופס יצירת קשר, עליך לפתוח קובץ ולעתיק את הקוד של טופס יצירת קשר המתחיל מפקודה <form> ומסתיימת ב- </form> לתוך דף ה-html שלנו בתוך אלמנט div עם קלאס form_left .
טוב הגעתה עד לכאן אז אני רוצה להגיד לך מזל טוב מכוון שאתה לקראת סוף. נישאר לנו לעשות עוד מספר דברים ממש קטנים ומהירים כדי שהכל יפעל כמו שצריך. קודם כל אנחנו חייבים לעתיק מתוך תיקיה של טופס יצירת קשר קובץ בשם Sendit.php לתיקיית דף נחיתה שלנו. לפתוח את קובץ ה-php ולשנות את כתובת האימייל לשלך.
אלמנט נוסף, עליך להכניס טקסט בין תגית div עם קלאס Sidebar. כאן יהיה התיאור של הדף דף נחיתה והסבר למה כדי לגולש להשאיר אצלך פרטים. אם הכנסתה מספר מילים ב-sidebar וגם סרטון מיוטוב בתוך הדף נחיתה שלך אז כעת דף נחיתה שלך ניראה כך.
במידה ומשהו לא הלך וקיבלת בשגיאה, אין דאגה. באפשרותך להוריד את הקובץ מסודר, תקין שבאפשרותך להשוות בין הקבצים וליראות איפה טעיתם.
הורדה דף נחיתה בחינם עם טופס יצירת קשר – [download id="19"]
מקווה שהצלחתם וזה עזר לכם להבין וללמוד משהו קטן. עם ידע נרחב ב-Css באפשרותכם לעצב את דף נחיתה שלכם הרבה יותר טוב ומהר. אם אהבתם בקשה על תמחקו או תתנו לי קישור חוזר מאתר שלכם כדי שגם אחרים יוכלו ללמוד ולהצליח.