קידוד זה אחד הנושאים המרתקים לדעתי בפיתוח אתר, מהסיבה הפשוטה שקידוד הוא יצירת העיצוב בעזרת קודים וכמה שפחות תמונות, מה שתמיד נותן צורך במחשבה עבור כל עיצוב מחדש.
במקום להשתמש בצייר ולעשות ריבוע, המקודד צריך להכיר אלמנטים שונים, הוא צריך להכיר את התקנים, ולדעת לחשוב תמיד מעבר לקופסא, אחרת האתר יהיה מרובע, פשוט, ולעיתים לא ישדר את המקצועיות אותה רצה האתר לשדר.
פרק 1 - ראשית דברבעבר כבר אמרתי שלפני קידוד מומלץ להיות מוכנים עם מה שרוצים ליצור, אחרי שזרמנו עם הסירטוט על הדף או תמונה שהוכנה בפוטושופ, ולקידוד ניגש כשאנו יודעים מה אנחנו רוצים, ולא לפני.
כדי שלא תיקחו את זה לא נכון, אני אגיד כבר עכשיו שניתן לבוא לקידוד ולתת לקוד לזרום ולראות בעיניים איך הכל משתנה, אבל ברוב המקרים התוצאה תיהיה פחותה, כי אתם מעצבים כפי שאתם רואים בעיניים, ולא כפי שאתם רוצים כמו שעושים על דף.
במדריך אני הולך להדגים יצירה פשוטה מאוד של חלוקה לדף, בה משתמשים בלא מעט אתרים, כאשר לכל אחד מהצעדים אני אוסיף הערות חשובות לדעתי.
שלב 2 - יצירת תבנית בסיסיתבשלב הזה מכינים את הדברים הבסיסיים בקידוד:
תבנית ה-HTML הכללית, בה אנו הולכים להשתמש, תיהיה הצעד הראשון, כאשר אם יש תקן בו אנו רוצים להשתמש, כבר עתה אנו נכניס אותו כחלק ממבנה ה-HTML ולא בסוף (כמו שלעיתים אני רואה שאנשים נזכרים, ואז קצת מאוחר מידי).
בקוד אנו נכניס תג meta המספק מידע על סוג התווים (לדוגמא: UTF8) ודף CSS חיצוני שיכיל את קוד ה-CSS (יחסוך בהמשך קפיצה בין מיקומים בדף, ובנוסף יעזור להגדיל את כמות התוכן בדף ביחס לקוד).
בקובץ ה-CSS אנו נכתוב כבר עתה ערכים לתגית body שנרצה שיהיו בסיס בדף, אם זה צבע הרקע מאחורה (או שאולי תמונה?!), אם זה הורדת המסגרת הפנימית (padding) של הדף, אם זה קביעות הקשורות לטקסט כמו גודל פונט, וכל קביעה כללית אותה אנו נרצה.
דוגמה לדפים משלב 2:
HTML Document (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>
<body>
<!-- Text -->
</body>
</html>
CSS Document (global.css):
body
{
direction: ltr;
padding: 0px;
margin: 0px;
font-size: 14px;
font-family: arial,verdana,sans-serif;
}
שלב 3 - אלמנט גלובאליהערה לפני: מעתה קוד ה-HTML עליו אני אכתוב בא במקום ההערה במסמך ה-html שהצגתי קודם.לאחר שיש בידינו את מה שאנו רוצים לעשות (שלב 1) ואת הקוד הכללי של הדף (שלב 2), אנו יוצרים אלמנט גלובאלי, שבתוכו יכנסו כל שאר האלמנטים (אלא אם במקרה חריג נחליט ליצור אלמנט מתחתיו שיכיל מידע אחר שאנו רוצים כביכול מחוץ לעיצוב).
האלמנט הזה יהיה div, כיוון ש-div הוא אלמנט מסוג block, ואין לו שום מאפיין עיצובי אחר.
HTML Document (index.html):
<div id="global">
</div>
כעת לאחר שיצרנו אלמנט גלובאלי, אנו נגדיר לו כיצד יראה, ותכונות הקשורות אליו.
CSS Document (global.css):
#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}
שימו לב: כבר עכשיו רצוי לבדוק בולידטור אם הינכם עומדים בתקנים, לפחות של CSS, כדי למנוע בעיות עתידיות בהמשך.
שלב 4 - יצירת מבנה כללילאחר שיש בידינו את הבלוג המרכזי, אליו יכנסו רוב הדברים, אנו נחלק אותו לחלקים, בהתאם למבנה אותו אנו רוצים לאתר.
מבנה פשוט בו אני אשתמש הוא חלק עליון כל הרוחב, מתחתיו שני חלקים אחד ליד השני שביחד תופסים את הרוחב, ומתחתיהם יהיה חלק שתופס הכל.
יש תמיד שאלה בנוגע לכמה רוחב לאלמנטים האלו, וכתשובה חד משמעית הייתי אומר לכם להכריע באחוזים, מהסיבה הפשוטה שלאחר מכן תוכלו לשנות את האלמנט המכיל אותם, והם יושפעו בלי לעשות לכם הרבה בעיות.
HTML Document (index.html):
<div id="global">
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
</div>
כעת בעזרת CSS אנו דואגים שכל דבר יהיה במקומו, ניתן לעשות זאת בעזרת float, בעזרת margin, בעזרת padding, שימוש ב-clear, או בכל אלמנט אחר שיכול לעזור בקביעת המבנה.
ניתן ואף רצוי לתת רקע שונה לכל אחד מהאלמנטים, כדי שנוכל לזהותם.
מה שאני לא ממליץ לעשותו הוא קביעה של גובה לאלמנטים, כי אנו רוצים אותם גמישים בלי הגבלה לגובה מסויים (ברוב המקרים).
CSS Document (global.css):
#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}
#left
{
float: left;
width: 30%;
margin: 0;
padding: 1em;
}
#right
{
border-left: 1px solid gray;
margin-left: 32%;
padding: 1em;
}
לאחר שראיתם כי הגדלים מתאימים וכי האלמנטים מסתדרים כפי שרציתם (אפשר להוסיף תוכן זמני כדי להיות בטוחים שיציגם), מומלץ לעצבם (ניתן לראות בדוגמא עיצוב פשוט).
בידקו שוב את ה-CSS בולידטור כדי לוודא שהינו עומד בתקנים.
שלב 5 - תוכן ואלמנטים נוספיםכעת לאחר שיש בידינו מבנה, אנו לא נשתמש ב-div אלא אם נצטרך את התכונות שלו (אלמנט מסוג block ללא תכונות עיצוביות נוספות), אלא באלמנטים לפי הצורך:
- נשתמש בתגי ה-H עבור כותרות.
- נשתמש ברשימה (UL) עבור תפריטי קישורים.
- בתגית P עבור פסקאות.
- בכל אלמנט אחר בעת הצורך.
כאשר יש בידינו את המסמך הכללי, אנו ניצור תגית H1 לכותרת העליונה, ורשימה ב-DIV השמאלי עבור לינקים (הכוללת בתוכה כבר לינקים לצורך העניין), אשר מעליה נוסיף תגית H2 לכותרת של הרשימה.
ניתן כבר להוסיף תוכן בשביל שנידע סדר גודל של דברים, ובכדי שנוכל לעצב הכל בהתאם.
HTML Document (index.html):
<div id="global">
<div id="top">
<h1>iBlog</h1>
</div>
<div id="left">
<h2>Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="right">
<p>
text text text text text text text text text text text<br />
text text text text text text text text text text text<br />
text text text text text text text text text text text<br />
text text text text text text text text text text text
</p>
<p>
text text text text text text text text text text text<br />
text text text text text text text text text text text
</p>
</div>
<div id="bottom">
(c) Copyright
</div>
</div>
כעת נבטל כמה תכונות עיצוביות של מספר אלמנטים כדי שנוכל להמשיך לעבוד.
CSS Document (global.css):
h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}
אלמנטים נפוצים שהייתי ממליץ להשתמש בהגדרות עיצוב אלו כדי לבטל את שלהן:
ul, dl, dt, dd, form, h1, h2, h3, h4, h5, h6, h7, pלאחר שביטלנו את התכונות העיצוביות שמפריעות לנו, נוכל לעבוד על האלמנטים.
לתגיות h1 אנו נגדיר מרכוז, את הקישורים שבתוך הרשימה שב-DIV השמאלי, אנו נגדיר כאלמנטי block בשביל שנוכל לעצבם.
ואז נוכל לשנותם כעולה על רוחנו.
CSS Document (global.css):
h1
{
text-align: center;
}
#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}
בנוסף, נוכל להגדיר לקישורים אלו מצב שיפעל בעת שעוברים מעליהם, נניח לשנות את צבע הרקע לשחור.
CSS Document (global.css):
#left ul a:hover
{
background-color: black;
color: white;
}
שימו לב: חובה לבדוק אם ה-HTML וה-CSS תקינים בעזרת ולידטור.
שלב 6 - בהצלחהכעת המשיכו לעצב את הדף ככל העולה על רוחכם, כאשר הקפידו לבדוק לעיתים תכופות בולידטור אם הכל תקין, ואם לא רצוי לשנות זאת מיד.
למרות שלא עשיתי זאת בגלל שמדובר בקוד יחסית קצר, אני ממליץ לאנשים להוסיף הערות HTML ו-CSS בהתאם, בשביל שתוכלו להתמצאות בדף בהמשך.
בנוסף המיזוח של הטקסט נורא חשוב, ועליכם להקפיד לעשות זאת על מנת שתוכלו להתמצא ולערוך שינויים בקלות.
אני מקווה שכמה אנשים העוסקים במלאכת הקידוד הפנימו רעיונות מסויימים, וראו כיצד ניתן לקודד ללא שימוש בטבלאות, ובעזרת אלמנטים נוספים מלבד DIV ו-SPAN.
קודים מלאיםHTML Document (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>
<body>
<div id="global">
<div id="top">
<h1>iBlog</h1>
</div>
<div id="left">
<h2>Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="right">
<p>
text text text text text text text text text text text<br />
text text text text text text text text text text text<br />
text text text text text text text text text text text<br />
text text text text text text text text text text text
</p>
<p>
text text text text text text text text text text text<br />
text text text text text text text text text text text
</p>
</div>
<div id="bottom">
(c) Copyright
</div>
</div>
</body>
</html>
CSS Document (global.css):
body
{
direction:ltr;
padding: 0px;
margin: 0px;
font-size:14px;
font-family: arial,verdana,sans-serif;
}
#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}
#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}
#left
{
float: left;
width: 20%;
margin: 0;
padding: 1em;
}
#right
{
border-left: 1px solid gray;
margin-left: 22%;
padding: 1em;
}
h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}
h1
{
text-align: center;
}
#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}
#left ul a:hover
{
background-color: black;
color: white;
}
בהצלחה, והמשך גלישה מהנה.