אחת השאלות הנפוצות ביותר היא איך הופכים קובץ PSD לעיצוב וורדפרס. בגלל שהשאלה הזאת כלכך נפוצה, החלטתי להתחיל בסידרת מדריכים אשר תסביר את התהליך.
במדריך הראשון, אסביר כיצד הופכים עיצוב PSD ל HTML. בהמשך אסביר כיצד הופכים את קובץ ה HTML לעיצוב וורדפרס לכל דבר.
שימו לב שהמדריך יוצא מתוך נקודת הנחה שהקוראים אותו מנוסים לפחות קצת ב HTML, מדריך זה איננו נועד למתחילים גמורים. בנוסף לצורך המדריך כדאי שתוכנת פוטושופ תיהיה מותקנת.
לצורך המדריך, הכנתי עיצוב שאותו אנו נהפוך לאתר HTML, והינה העיצוב:
יש להוריד את העיצוב בקובץ PSD (לפוטושופ) מכאן.
כמו שניתן לראות העיצוב הוא מאוד פשוט, אבל הוא דיי טוב בתור התחלה, הוא מחולק בצורה סטנדרטית לאתרים לכמה חלקים בסיסים:
- ה header – האזור העליון של האתר, בו כתוב השם של האתר (או לחלופין הלוגו של האתר) והסלוגן של האתר, בנוסף במקרה הזה יש גם תופס חיפוש.
- תפריט הניווט – לכל אתר יש תפריט ניווט, חלק מהאתרים (כמו זה למשל) בוחרים לשים את תפריט הניווט בחלק העליון של האתר, לצורך המדריך החלטתי לשים את תפריט הניווט בצידו הימני של האתר (כנהוג באתרים עבריים).
- החלק האמצעי – החלק של התוכן, פה יהיה כתוב התוכן של העמוד, בעיצוב הזה החלק מאוד מגובל במקום ובגבולות, אבל שוב זה רק לצורך המדריך.
- ה footer – החלק התחתון של האתר, החלק הזה נשאר תמיד בכל דפי האתר בתחתיו של הדף.
תחילת העבודה:
אז בואו
ונתחיל לעבוד, לצורך העבודה בואו וניצור תקייה חדשה ונקרא לה בשם כלשהו באנגלית (למשל MyDemoSite) ונפתח בתוכה קובץ HTML בסיסי ריק (ניתן להיעזר במדריך הזה).
כזכור קוד של HTML בסיסי נראה כך:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" dir="rtl" lang="he-IL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> כאן הכותרת</title></head>
<body>
<p> כאן יש תוכן </p>
</body>
</html>
כרגע, אמור להיות לכם עמוד HTML ריק שנראה כך.
עכשיו בו ונתחיל לעצב אותו, בגלל שמדובר על עיצוב בסיסי, שבין כה וכה לא יגדל מעבר לדף אחד (לפני המעבר לוורדפרס) אנו נעשה את ה style באותו העמוד ולא בקובץ עיצובי נפרד (css). מתחת ל <head> נוסיף את הדבר הבא:
<style>
</style>
למי שלא יודע בין התגיות הללו יכנס העיצוב שלנו. כלומר כך נראה כרגע הקוד שלנו:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" dir="rtl" lang="he-IL">
<head>
<style></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> כאן הכותרת</title></head>
<body>
<p> כאן יש תוכן </p>
</body>
</html>
הדבר הראשון שנעשה, יהיה לתת רקע לאתר שלנו. כדי שנידע בידיוק איזה צבע של רקע יש בעיצוב, נכנס לקובץ שלו בפוטושופ ונשתמש ב Eyedropper tool .
הקוד שכתוב למטה הוא הקוד של הצבע.
נוסיף את השורה הבאה לקוד שלנו בתוך התגיות של סטייל:
body {
background-color:#8f8f8f;
}
עכשיו יהיה לנו רקע אפור כמו פה עמוד ריק עם רקע אפור.
הערה כדי לראות את הקוד של הקובץ, ראו את קוד המקור שלו. אני לא אמשיך לכתוב כאן את הקוד, פשוט תסתכלו בדוגמא ותראו את קוד המקור.
עוד משהו שכבר אפשר לשנות הוא את ה title, בין התגיות <title></title> רישמו מה שבא לכם.
החלקים של האתר
האתר בעצם מחולק מבחינת הקוד לשלושה חלקים:
- חלק עליון – החלק שבו מופיע הלוגו, הסלוגן ותיבת החיפוש.
- חלק מרכזי – החלק שבו מופיע התוכן של האתר, החלק הזה בעצם מחולק בעצמו לשני חלקים: תפריט ותוכן (כתבות וכו…).
- החלק התחתון – ה footer של האתר.
כל חלק וחלק יהיה נמצא בתוך div – תיבה של תוכן (מצטער שאני לא מפרט יותר מדיי, שוב זה לא בידיוק מדריך למתחילים ב HTML).
אנחנו נתחיל מלעבוד על ה header ונתקדם משם אלה.
עבודה על ה header
ראשית בו וניצור div אחד גדול אשר כל האתר שלנו יכנס לתוכו (אני אוהב לעשות את זה) ל div הזה נקרא main.
אחרי ה <body> נכתוב:
<div id="main">
ולפני </body> נכתוב
</div>
בעצם יצרנו div שמתחיל מתחילת ה body ועד סופו.
עכשיו ניצור עוד div בתוכו ונקרא לו main-header (שאני אומר "נקרא לו" אני מתכוון שניתן לו id בשם הזה)
ובתור ה div הזה ניצור עוד div שנקרא inside-header.
הסיבה שאני עושה את כל זה היא שאני רוצה ש header שלי ימתח לאורך כל המסך, אך שהתוכן שלו יהיה ממורכז תמיד. למי שלא מבין ב CSS, זה עלול להשמע קצת מסובך, אבל על דאגה זה לא.
בקיצור העמוד שלנו כרגע אמור להראות כמו העמוד הזה (אגב מחקתי את ה <p> כאן יש תוכן </p> ). בגלל שהDiv'ים ריקים הוא ריק, אבל הסתכלו בקוד שלו ותראו שהקוד שלכם זהה.
עכישו נתחיל לעבוד על main-header שלנו. נכנס לפוטושופ ונראה מה הוא הגבוה שלו, כאשר נראה שהגובה הוא 170 פיקסלים, נרשום זאת בצד (או נזכור) עכשיו נבדוק מה הוא קוד הצבע הפנימי שלו #185367.
עכישו נחזור לקוד ונוסיף את החלק הבא לפני השורה שמסיימת את style (כלומר </style>) נוסיף:
#main-header {
position:absolute;
right:0;
top:0;
margin-top:10px;
height:170px;
width:100%;
background-color:#185367;
border-top:2px white solid;
border-bottom:2px white solid;}
אוקיי, אז מה בעצם יש לנו כאן? שוב המדריך הזה איננו נועד למי שאין ידע בכלל ב HTML, אבל בכל זאת אני אסביר מההתחלה.
- #main-header { בעצם אומר שעכשיו אנחנו מתחילים לעבוד על איבר שלו id בשם main-header.
- position:absolute; אומר שהמיקום של האיבר יהיה אבסולטי, כלומר, כזה שאינו תלוי בדבר. הסיבה שאני נותן לו מיקום שכזה הוא כי אני רוצה שהאיבר ימתח לאורך כל המסך, בהתאם לגודל של המסך (לא משנה כמה גדול או קטן הוא).
- right:0; אומר שהאיבר יתחיל מהפינה הימנית ביותר (נסו להוריד שורה זו והראו שיהיה רווח קטן בצד ימין).
- top:0; אומר לו לתהחיל מלמעלה.
- margin-top:10px אומר לו לקחת רווח של 10 פיקסלים מלמעלה (בדומה לעיצוב, שם ה header לא מתחיל מלמעלה).
- width:100% אומר שהרוחב של האיבר יהיה כ 100 אחוז מגודל המסך (כפי שאנו רוצים).
- border-top:2px white solid אומר מסגרת עליונה לבנה בגודל 2 פיקסלים.
- border-bottom:2px white solid אותו דבר עם מסגרת תחתונה.
- } סוגר את הפקודה (כאן מפסיקים לעבוד על האיבר)
וזהו, עכשיו העמוד שלנו יראה כך
המלצה שלי – במידה ומשהו לא מובן, שחקו קצת עם הקוד, קחו הפסקה וחיזרו למדריך אחרי כמה דקות. כאשר משחקים עם הקוד מבינים הכי טוב.
עכשיו הגיע הזמן לעבוד על החלק הפנימי של ה header, כלומר ה inside-header שלנו.
אם כך, בו ונכניס לתוכו את הכותרת ואת הסלוגן שלנו, כלומר אחרי <div id="inside-header"> :
<h1> חדד.נט</h1>
<h2> האתר המגניב של גל חדד </h2>
- h1 פירשו כותרת ראשית
- h2 פירשו כותרת משנית
הדף עכשיו אמור להראות כך
כמו שאתם רואים, כרגע הכותרת מאוד לא מעוצבת, לא בצבע, לא בפונט (תלוי בדפדפן, מייד אסביר) והיא גם לא במקום הנכון (במרכז).
כל דפדפן בעצם יציג את הכותרת בצורה שונה קצת, בצורה שהיא בשבילו ברירת המחדל שבה כותרת אמורה להראות, אנחנו כמובן לא רוצים את זה.
ראשית, בו ונגדיר כבר עכשיו, שכל האתר יהיה כתוב בפונט אריאל, כדי לעשות זאת נוסיף ל body { שלנו בסטייל את השורה הבאה font-family:arial; .
כלומר עכשיו זה יראה כך:
body {
background-color:#8f8f8f;
font-family:arial;
}
עכשיו כל האתר שלנו יהיה עם טקסט אריאל.
עכשיו בו ונעצב את הכותרות שלנו, ראשית כנסו לפוטושופ ובדקו את הצבע של הכותרת המשנית (הראשית היא כמובן לבן), הצבע הוא: #60d2ff.
נוסיף לסטייל את הקוד הבא:
h1 {
color:white;
font-size:50px;
}
h2 {
color:#60d2ff;
font-size:30px;
}
ועכשיו הכותרות שלנו יהיו בצבעים הנכונים ובגודל הנכון, עם זאת עדין ישנה בעיה – יש רווח גדול בין הכותרות. הסיבה שרווח זה קיים הוא, שבברית המחדל הדפדפן נותנת לכל כותרת רווח בינה לבין האלמנט שמעלייה ומתחתיה.
כדי לפתור בעיה זו נוסיף בשניהם את השורה הבאה: margin:0;
כאן אנחנו בעצם אומרים לדפדפן לא לקחת רווח בין כותרות. עכשיו העמוד שלנו יראה כך.
עכשיו נמרכז את החלק הפנימי (זה שיש בו תוכן) של ה header, כלומר את ה inside-header שלנו.
כדי לעשות את זה נוסיף לסטייל את השורה הבאה:
#inside-header {
position:relative;
top:30px;
width:50%;
margin:0 auto;
}
אז מה בעצם עשינו פה? קודם כל אמרנו ל inside-header לקחת 30 פיקסלים מלמעלה (כלומר, לרדת 30 פיקסלים). אח"כ אמרנו לו שהרוחב שלו יהיה כ-50 אחוז מהגודל של האיבר שבה הוא נמצא (כלומר ה main-header שהרוחב שלו הוא 100 אחוז מהמסך) ואז אמרנו לו שיהיה במרכז.
לא מובן? אוקיי נסו לשחק עם הקוד, תורידו פה שורה ושם שורה ותראו מה קורה…
עוד משהו שאני ממליץ עליו, הוא לתת מסגרת ע"י הוספת השורה border:1px solid black; , עכישו תוכלו לראות בידיוק אך ה inside-header ניראה. נסו לשנות את ה 50% למספר מוגדר של פיקסלים, שחקו עם גודל החלון של הדפדפן בשני המקרים וראו את ההבדל.
הסיבה שעדיף לעבוד עם אחוזים היא שזה יתאים לכל מסך.
כרגע, הדף שלנו אמור להראות כך.
זה סוף החלק הראשון. בקרוב אפרסם את ההמשך.