עיצוב תבנית האתר
שיעור 3 -
התאמה ועריכת תבנית לאתר (website template)
הקדמה
בשיעור הראשון שעסק בהכנות לפני בניית האתר, היה עליכם להחליט איזה סוג של אתר אינטרנט אתם רוצים להקים. אתר פרטי, אישי או תדמיתי לעסק, האם יהיה בו בלוג, חנות מקוונת או האם הוא ישמש כאתר אינפורמטיבי או כמדריך לימודי כמו האתר הזה.
בשיעור זה נעסוק בחלק העיצובי של האתר שלכם. את העיצוב לאתר תוכלו לבחור מתוך תבניות עיצוב מקצועיות מוכנות המוצעות באתרים ייעודיים לכך בעלות של כמה עשרות דולרים לתבנית.
תהליך ההכנה כולל -
• מדוע לרכוש תבנית כבסיס לאתר.
1. התאמה ותיקונים בסיסיים של התבנית החדשה.
2. שינוי שמות הקישורים בסרגל העליון והצידי.
3. לוגו - יצירה והתאמת לוגו לתבנית האתר.
4. שכפול העיצוב הבסיסי על שאר עמודי האתר.
6. פיצול קבצי התבנית בהתאם לעמודים באתר המיועד.
עיצוב תבנית האתר (המדריך) ...
היתרון ברכישת תבנית לאתר
היתרון בהורדת תבנית עיצוב מקצועית לאתר - ללא ניסיון רב בבניית אתרים, העבודה על אתר המעוצב במקצועיות, עלול לקחת חודשים רבים. בנוסף לזאת, סביר יהיה להניח שלא נצליח להגיע לרמה של האנשים בעלי נסיון של שנים בבנייה ועיצוב אתרי אינטרנט, לכן עדיף יהיה לבנות את האתר על בסיס תבנית אתר מקצועית שהוכנה מראש ע"י מיטב מעצבי האתרים. התבניות מוצעות באתרי טמפלטים לאתרים המתמחים בכך כדוגמת טמפלט-מונסטר (Template Monster).
אך לפני חיפוש תבנית מתאימה - נסו קודם לדמיין את האתר המושלם בעיני רוחכם...
עכשיו הגיע הזמן לבחור תבנית עיצוב מקצועית לאתר. התבנית הנבחרת תשמש כ"שלד והקירות" של האתר שלכם.
השקיעו זמן ומחשבה בליקוט התבנית המתאימה ביותר לדעתכם.
ישנם מספר אתרים מצוינים המציגים אלפי תבניות שונות ומגוונות לרכישה. מומלץ לבחור מבין התבניות הרבות, מספר תבניות המתאימות ביותר לדעתכם לאתר המיועד. מבניהן, בסופו של דבר, תצטרכו לבחור את התבנית הטובה ביותר.
הפרק הבא יתן לכם רקע מעמיק על תבניות לאתרים וינחה אתכם בכל הקשור בבחירת התבנית, הורדתה למחשב ועריכה ראשונית שלה.
תהליך בחירת תבנית לאתר
בכדי לבחור תבנית עיצוב (website template) המתאימה ביותר לאתר שלכם, גשו למדריך מצוין זה הנמצא בפרק מדריך טמפלטים לאתרים, אשר נותן המלצות והנחיות ברורות מהיכן ואיך לבחור תבנית מתאימה לאתר האינטרנט אותו אנו רוצים לבנות.
ניתן לקבל כאן מידע מקיף על חברת Template Monster שהיא אחת מחברות הטמפלטים הגדולות והמפורסמות ברשת.
חזרו לכאן, להמשך המדריך לאחר שיש בידכם תבנית עיצוב לשביעות רצונכם.
לאחר שבחרתם רכשתם והורדתם את התבנית המועדפת עליכם.
טוב, בחרתם את התבנית. יש לכם שלד וקירות לאתר. עכשיו אפשר להתחיל בעבודת עיצוב ובניית האתר. בשלב הראשון אנו נסב את התבנית שהורדנו ונתאים אותה לאתר כפי שתכננתם אותו ע"י עריכת העמודים השונים בה והתאמתם לעמודי האתר המיועד.
עריכת התבנית
תבנית העיצוב לאתר היא בעצם מן שלד אתר, ללא תוכן ולרוב ללא פיצרים חשובים כטופס ליצירת קשר וקבלת אינפורמציה מהגולש, או גלריית תמונות שחשובים כמעט לכל אתר. לרוב יהיה עלינו להוסיף ולהגדיר אותם בעזרת תוכנה ייעודית המשמשת לבניית אתרים.
עריכת התבנית מתבצעת באמצעות עורך HTML או דרך תוכנה לבניית אתרים. התוכנה איתה נעבוד במדריך היא Adobe Dreamweaver שהיא התוכנה המובילה בשוק לבנייה ועיצוב אתרי אינטרנט, אשר גם נותנת חווית בניית אתר מהנה ובעלת יכולות ללא תחרות בהשוואה לתוכנות מקבילות.
• אפשרויות הורדה והתקנת התוכנה ניתן למצוא במדריך dreamweaver להורדה.
• לקבלת רקע מומלץ קצת לעבור על ההקדמה למדריך dreamweaver.
פתיחת תבנית העיצוב (טמפלט) בעזרת dreamweaver
• לאחר שהורדתם והתקנתם את Dreamweaver, פיתחו דרכה את תבנית האתר אותה בחרתם כמוסבר במדריך פתיחת טמפלט לעריכה.
למי שמעוניין לקבל מידע נוסף הקשור לשלבים אלה -
• מדריך יצירת אתר חדש ב draemweaver.
• לאחר הגדרת אתר חדש לתבנית שלנו בדרימוויבר תוכלו לראות אותה דרך מנהל הקבצים של dreamweaver.
• במידה ובהמשך תרצו לשנות או לערוך מחדש את הגדרות האתר שיצרתם בדרימוויבר, תוכלו להעזר במדריך ניהול האתר שלנו ב dreamweaver.
עיצוב התבנית של העמוד הראשי באתר (index.html)
בשלבים הבאים נבצע התאמה בסיסית של עיצוב התבנית שהורדנו למראה האתר הרצוי לנו לפי השלבים הבאים:
1. התאמה ותיקונים בסיסיים של התבנית החדשה שהורדנו -
הערה: חשוב לדעת שכל תבנית עיצוב שונה זו מזו. ישנן אלפי תבניות עיצוב שונות ומגוונות. בפרק זה תקבלו הדרכה ואת הכלים לעבודה, אך תצטרכו להפעיל את שיקול דעתכם כשאתם עובדים על התבנית היחודית שלכם.
גדולתה של תוכנת Dreamweaver שהיא מאפשרת עריכת האתר בצורה ויזואלית, כך שאם אתם רוצים להשמיט משהו מהאתר, כתמונה, קטע כתוב, שדה למילוי או אף חלק מהדף, אתם יכולים לעשות זאת די בפשטות דרך החלק הגרפי בתוכנה.
• במדריך התאמה ראשונית של התבנית לאתר תוכלו לקבל דוגמה לביצוע התאמות ראשוניות לתבנית של אתר זה לאחר רכישתה.
2. שינוי שמות הקישורים בסרגל העליון והצידי כפי שהיינו רוצים שיהיו באתר שלנו -
בסרגלי הקישורים בעמוד התבנית נבצע החלפת שמות הקישורים לשמות של עמודי האתר שלנו כפי שקבענו בשלב אפיון האתר.
מומלץ לשרטט בדף את רשימת הקישורים בעמודי האתר שלנו לפי מיקומם בסרגל הקישורים העליון והצידי.
נבצע החלפת השמות בסרגלי הקישורים בתבנית לשמות הקישורים הרצויים לפי ההנחיות במדריך קביעת שמות קישורים בעיצוב תבנית האתר.
נקודה חשובה: על שמות הקישורים להכיל רק מילה או שתיים, מפני שברוב האתרים (אך לא בכולם), לשונית סרגל הקישורים אינה יכולה להכיל יותר מזה.
לאחר ששינינו את שמות הקישורים בתפריטי האתר לעתים ישנו צורך להתאים את מיקום, גודל וצורת הכתב של הקישור בסרגל הניווט.
• למדריך שינוי מאפייני הטקסט בסרגל הקישורים באתר.
נוכל גם לשנות את תמונות קישורי ה rollover בתפריט הצידי לפי טעמינו. קישור rollover הוא קישור אשר משנה את מאפייניו (צבעו, צורתו) כאשר סמן העכבר עובר עליו.
• למדריך איך לשנות בטמפלט Rollover Button.
לקבלת מידע נוסף על יצירת קישורים (לינקים) תוכלו למצוא במדריך יצירת קישורים ב dreamweaver.
למידע על סוגים שונים של קישורים באתר ואיך ליצור אותם, ניתן לגשת לנושא הקישורים במדריך הוספה ועיצוב אובייקטים ב dreamweaver.
3. לוגו - התאמת הלוגו שלנו לתבנית האתר -
במידה וכבר יש לנו לוגו לעסק או לאתר, זה הזמן להתאים אותו לעמוד האתר. אם אין עדיין, מומלץ ללבצע זאת בשני שלבים - קודם ליצור לוגו שייצג את מהות העסק שלנו או האתר. לאחר מכן להתאים אותו לתבנית האתר שהורדנו, ולהחליף אותו עם לוגו התבנית.
שלבים אלה מוסברים במדריכים מעשיים בשלבים מתחת -
1. בשלב ראשון - לקבלת מידע על עיצוב לוגו, גשו למדריך המציג מספר דרכים מעשיות לאיך לעצב לוגו חדש לעסק או לאתר.
2. בשלב שני - נתאים את הלוגו שלנו לעיצוב של האתר בעזרת ההנחיות במדריך הטמעת לוגו באתר.
עיצוב התבנית בשאר עמודי האתר
עד כה התמקדנו בעמוד אחד, עמוד ה index.html שלנו. משלב זה נתחיל להתאים את שאר העמודי התבנית לאתר שלנו.
4. שכפול העיצוב הבסיסי על שאר עמודי האתר -
בשלבים הקודמים סיימנו לעצב את בסיסו של עמוד הבית שלנו index.html (סרגלי קישורים, תבנית התוכן והלוגו). עתה נעתיק את עיצוב זה גם אל כל שאר עמודי האתר שלנו.
ביצוע ההעתקה מצריכה קצת עבודה וניתן לעשותה ב 2 אופנים:
1. והיא בעצם חזרה על הפעולות אותם עשיתם על עמוד ה index בשלבים 1, 2 ו 3 בפרק זה אך על שאר עמודי האתר.
2. בכדי לחסוך עבודה מומלץ להעתיק חלק מסוים מעמוד אחד לשני באתר. הסבר על העתקת אזור/אובייקט מעמוד לעמוד באתר תוכלו למצוא במדריך העתקת אובייקט מעמוד לעמוד באתר הנותן דוגמא של העתקת התפריט העליון, התפריט הצידי או אזור התוכן מעמוד לעמוד. כמו כן בשלב 4 של המדריך התאמה ראשונית של התבנית לאתר תוכלו למצוא הסבר על העתקת מתחם התוכן הכתוב מעמוד לעמוד בעזרת Dreamweaver.
5. מתן שם לקבצי האתר -
בשלב זה נשנה את שמם של כל קבצי התבנית לשמות הנושא של העמודים הראשיים באתר שלנו בהתאם לאפיון האתר שהכנו בפרק הראשון ובהתאם לקישורים בסרגל הניווט באתר. שמות לעמודים המשניים נוכל לתת לאחר שנוסיף עוד עמודים לתבנית האתר כמוסבר בשלב הבא.
שם קובץ העמוד מומלץ שיהיה בשפה העברית במידה והאתר מופנה לגולשים מהארץ. השם אינו יכול להכיל רווחים ושמות קבצים בעלי מספר מילים יחוברו ע"י מקף או מקף תחתון בין המילים. לקבלת פרטים נוספים בנושא תוכלו לקבל במדריך חוקי כתיבת שמות לקבצים.
נקודה חשובה: אין לשנות את שמו של הקובץ index.html. קובץ זה הוא דף הבית שלנו, כן שמם של דפי בית בכל אתר אינטרנט הוא index. כאשר נכנסים לאתר זהו בעצם הדף הראשון שהדפדפן יציג ודרכו ניתן יהיה לגשת לשאר דפי האתר.
שינוי שמם של קבצי תבנית האתר אפשר לראות בדוגמה לשינוי שם קבצי האתר עם דרימוויבר.
6. פיצול קבצי התבנית בהתאם לעמודים באתר המיועד -
במידה ויש לאתר המתוכנן יותר עמודים מהתבנית שהורדנו לו, עלינו לפצל את העמודים של תבנית העיצוב לפי כמות העמודים שיהיו לנו באתר.
לדוגמה - אם בתבנית יש 7 עמודים שמהווים בעצם את הקטגוריות הראשיות באתר. אך לאתר המיועד יש 12 עמודים (5 עמודים יותר). עלינו להחליט לאילו קטגוריות להוסיף את העמודים הללו. למשל 2 עמודים נוספים יהיו תחת קטגורית "המוצרים שלנו" ו 3 עמודים נוספים יהיו תחת קטגורית "מאמרים". בהתאם לזאת יהיה עלינו לפצל את עמוד ה"מוצרים שלנו" לעוד 2 קבצים ואת עמוד ה"מאמרים" לעוד 3 קבצים.
להמחשת התהליך כנסו למדריך הוספת עמוד לאתר.
כל הכבוד! סיימתם את פרק עיצוב תבנית האתר. עתה תוכלו לגשת לפרק 4 אשר מסביר איך לבנות את שאר החלקים החשובים באתר.
המדריך להקמת אתר - העמוד הראשי
3. עיצוב תבנית האתר