אם אתה מפרסם באינטרנט או עוסק בשווק מוצרים או שירותים באמצעות האינטרנט, אתה חייב קודם דף נחיתה עם טופס יצירת קשר. טופס יצירת קשר שמקושר לאימייל שלך, שפרטי הגולש נשלחים אליך למייל וכמובן דף 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 באפשרותכם לעצב את דף נחיתה שלכם הרבה יותר טוב ומהר. אם אהבתם בקשה על תמחקו או תתנו לי קישור חוזר מאתר שלכם כדי שגם אחרים יוכלו ללמוד ולהצליח.
יפה מאוד
הי יוסי,
אני מחפש סקריפט שמבקש שם ודוא"ל לפני שהוא מעביר את הגולש אל האתר המבוקש.
ז"א, הסקריפט מופעל בעת לחיצה על קישור, ואז עולה חלון שמבקש מהגולש להזין את שמו וכתובת הדוא"ל שלו. לאחר הזנת הנתונים, כאשר הגולש לוחץ על לחצן "שלח", המידע נשמר בבסיס הנתונים של האתר והגולש מועבר אל הכתובת של הקישור המבוקש.
כמו-כן צריך סקריפט קטן שבודק את אמיתות הנתונים (Validation)
אשמח אם תוכל לתת לי כיוון כלשהו..
בתודה מראש,
עמית
.-= בבלוג של עמית כהן פוסט אחרון הוא: ..באנג’י בדרום אפריקה =-.
זה בס"כ Validation שאפשר לעשות באמצעות Css או ג'אווהסקריפט. בהקשר ללחיצה על כפתור ואז עולה חלון אפשר להשתמש בלייטבוקס – Lightbox שיציג טופס למילוי. כדי לשמור פרטים בבסיס נתונים עליך לקשר את השדות לעמודים באמצעות סקריפט של php אשר מבצעה POST ואז להגדיר Redirect.
זה לא כזה מסובך אבל לא מכיר משהו מוכן ספציפי לזה. אבל להכין את זה לא כזה סיפור.
בכל מקרה מקווה נתתי לך רעיון איך זה אמור לפעול.
היי
השתמשתי לניסיון בלינק:
http://webist.co.il/wp-content/plugins/download-monitor/download.php?id=19
הכל עובד יפה מלבד זה שמילוי הטופס בעברית שלוח לי במייל ג'יבריש במקום עברית.
מספרים ואנגלית נשלח יפה מאוד
תודה
גיל
גיל, נסה את טופס צור קשר מעמוד הבא:
http://webist.co.il/טופס-יצירת-קשר-להורדה/
זה אכן אותו טופס והוא עובר בצורה תקינה לחלוטין.
ליוסי
תודה על התשובה המהירה.
גם בטופס השני אותה בעייה – כניראה משהו אצלי באתר שהוא לא מקבל את קבציי ה php ו css
בכל מיקרה אני מחפש מישהו שיבנה לי עמוד html כדוגמת העמוד :
http://dafdefet.com/yoursamples/Daf_HTML.pdf
מדובר בעמוד אחד כבמעבר עכבר על הריבועים עולה תמונה המתארת את המוצר
אין מעבר לעמודים נוספים.
אם אתה או מישהו אחר רוצה לתת הצעה אשמח
בתודה
גיל גואטה
טל. 052-2457230
יוסי שלום
בעיית העיברית בטופס צור קשר ניפתרה(חלקית)
המייל שנשלח ניראה בעברית היטב בתיבת הgmail וגיבריש בתיבת ה outlook
כניראה בעייה בהגדרות של הoutlook
שוב תודה אבל עדיין מחפש מישהו לבניית דף hrml הפרטים נמצאים בפוסט הקודם שלי
אתה מעוניין בעיצוב דומה לזה, או העיצוב מוכן ומדובר על אותו עמוד שאכן צירפת כאן ואותו אתה רוצה להפוך ל-Html עם כל התוספות ?
ליוסי
ה העיצוב המוכן שאותו אני רוצה להפוך לhtml
גיל
גיל, מתנצל על תגובה המאוחרת, יומיים אחרונים היו די צפופים בשבילי,
שלח לי PSD בקשה למייל ונמשיך משם
היי מקסים
כל הכבוד לך על האינפורמציה והנתינה שלך 🙂
אבל אני נתקעתי בשלב שצריך את הפורם , לא מצליחה למצוא את ה form במסמך
כמעט הגעתי לסוף..ועוד איך אני מעלה את הלוגו והתמונות
לא ברור לי 🙁
יפה מאוד
יוסי,
מה אתה אומר על פתיחת דף נחיתה על מערכת האתרים של גוגל- גוגל סייטס? האם כדאי?
אני היתי מציע לעשות משהו מקצועי ולא בגוגל סייטס.
גוגל סייטס נחמד אבל לא מספיק מקצועי בעיקר מההגבלות.
תמיד עדיף משהו שיש לך שליטה מלאה עליו ולא מה שנותנים לך. אבל בכל מקרה, זה פתרון חינמי ופתרון השני הוא בתשלום. אז השאלה היא במה תבחרי… 🙂
ושוב תלוי לאיזו מטרה.
דף נחיתה צריכה להיות ממירה, זאת שיודעת להפוך את הגולש ללקוח פוטנציאלי או לכסף.
היי יוסי.
רציתי לשאול שתי שאלות:
1. במידה ולקוח שכבר יש לו אתר ביקש שאבנה לו דף נחיתה – האם עליי להטמין את דף הנחיתה כחלק מהאתר שלו ?
2. מה המחיר הממוצע לדף נחיתה ?
תודה,
אורן
מחיר לדף נחיתה נעה בין 600 – 1500 שקלים.
לדוגמה, אנחנו (בחברה שלי) מבצעים עבודות שמעל 1000 ש"ח בלבד לדף נחיתה. לא עושים פחות מהמחיר הזה מכיוון שדף נחיתה שעולה 600 ש"ח הוא גם נראה כך.
דף נחיתה זה אומר עיצוב וחיתוך ל-xhtml.
בקשר לשאלה הראשונה שלך, תלוי מה לקוח רוצה.
אם הוא רוצה שתעלה לו דף נחיתה לשרת או שרק תביא לו את הקבצים ותיקיה מסודרת והוא כבר יסדר את זה. אני לא יודע מה רמת הנגישות שלך לשרת שלו ולמערכת לכן קשה לי לומר.
בדרך כלל דף נחיתה זה משהו נפרד מהאתר כולו. ז"א דף נחיתה זה עמוד סטטי אלא אם מדובר בדף נחיתה דינמית שהוא יכול לשלוט עליה ורוצה לקשר למערכת. אז עליויות גדלות בהתאם משמעותית
אני חושב (יש לי הרגשה) במקרה שלך מדובר פשוט לעלאות תיקיה עם דף נחיתה בשרת.
אם זה המצב אז אלו המחירים.
תודה על הפוסט.
לא הבנתי איך ממשיכים משם.. אחרי שבניתי דף ועיצבתי אותו
איך אני מעלה אותו לפייסבוק?
לא יודע עם אני משוחח עם גבר או אישה לכן אתיחס בתשובתי אליך בתור זכר, אם טעיתי אז תקני אותי …
אז ככה, אתה צריך לפתוח אפליקציה בעמוד האפליקציות של פייסבוק.
באפליקציה להגדיר את העמוד שבה נמצא הטופס. ז"א אתה חייב שיהיה לך שרת אחסון פעיל עם דומיין.
אחרי שהגדרת את הכתובת איפה שמופיע התופס המעוצב, עליך לשייך את אותה האפליקציה ל"טאב" של עמוד העיסקי (עמוד fans) שלך.
בגדול לא קשה, עיניין של דקות ספורות לעשות את כל זה, אבל נשמע מסובך למי שלא מכיר.
תראי מדריך לפתיחת עמודים עיסקיים בפייסבוק כדי לקבל כיוון על מה אני מדבר.
מקווה שנתתי לך כיוון…
יוסי שלום,
הכנתי דף נחיתה בעזרת הפוטושופ. ואני רוצה לעכשות לו חיתוך לHTML. יש לי את תוכנת הDREAMWAVER אבל אני לא יודע איך לקודד את זה.
אני בסה"כ רוצה כשאני ילחץ על כפתור "שלח" זה ישלח למייל זה הכל. רציתי לדעת איך אני עושה את זה.
תודה רבה
יצרתי דף בhtml שיהיה בעצם אמירה ללקוחות שהאתר בבניה ואני לא מצליחה להפוך אותו לרספונסיבי האם תוכל לעזור לי עי קוד או סקריפט