איך נהפוך עיצוב סטטי לעמוד HTML / מדריך

עימוד HTML זו משימה שהרבה מתכנתים יעדיפו להעביר למתכנת אחר. הם לא מעצבים, זה ממש לא בשבילם. איך הם אמורים לגרום לזה שהתפריט ישב מצד ימין ויגדל עם התוכן שלו ? ועוד בלי טבלאות ? אוי ואבוי. יאיר תבור מסביר כיצד להפוך עיצוב לעמוד HTML.

cc-by-brig. flickr

עימוד HTML זו משימה שהרבה מתכנתים יעדיפו להעביר למתכנת אחר. הם לא מעצבים, זה ממש לא בשבילם. איך הם אמורים לגרום לזה שהתפריט ישב מצד ימין ויגדל עם התוכן שלו ? ועוד בלי טבלאות ? אוי ואבוי. ובכלל, אם HTML ו- CSS היו חשובים היה על זה קורס באוניברסיטה.

אבל מה לעשות, כשהבוס רוצה הוא גם בדרך כלל מקבל.

הערה קטנה לפני שמתחילים

הפוסט הזה מדבר על עימוד בעזרת HTML 4 ו CSS 2. אין כאן התייחסות ל HTML 5 שמביא בשורה חדשה של משמעות אמיתית לכל תג ותג בטופס. אני מקווה לעשות מאמר על התגים החדשים של HTML 5 בקרוב, אבל העקרונות במעבר מעיצוב לעימוד נישארים זהים, גם אם התגים פחות סמנטיים.

אז איך בכל זאת מתמודדים עם זה בצורה נכונה, מובנית ולוגית ?

טעות נפוצה היא להתחיל בחלוקה מדוקדקת של כל אלמנט במסך בנפרד – קופצים ישר אל עומק העיצוב של הכותרת על כל מרכיביה ותפריטיה, ורק אחרי שהכל מושלם עוברים אל תפריט הצד (לפרטיו כמובן), התוכן של העמוד וכו’. גרוע מזה הוא כשהעימוד נעשה בצורה שיטתית בעזרת טבלאות מקוננות, בה לכל אלמנט יש השפעה ישירה על יתר האלמנטים במסך (כלומר, תזוזה או שינוי גודל של אלמנט אחד בהכרח משפיע על יתר האלמנטים, גם על כאלו שלא התכוונו שיושפעו). זה נכון שיותר קל לעמד בעזרת טבלאות, ויותר מזה, טבלאות מתנהגות בצורה הכי עקבית בין כל הדפדפנים כך שיש סיכוי טוב שהעימוד שלכם יעבוד טוב בכולם, אבל עמודים שבנויים בטבלאות מקוננות קשים מאד לתחזוקה, שוקלים יותר ומועדים לבאגים (רק הזזתי את התפריט! למה כל התוכן ברח הצידה?).

כדי לעשות את זה נכון ישנם מספר שלבים שצריך לבצע, והסדר שלהם הוא חשוב:

  1. עימוד
  2. עיצוב
  3. החלת פונקציונליות

את שלב העימוד נחלק לארבעה שלבים נוספים :

  1. חלוקה לוגית לאזורים ראשיים
  2. חלוקה לתתי אזורים
  3. הזנת כותרות
  4. הזנת תוכן

בשלב העימוד, חשוב ליצור את מסמך ה HTML בעזרת תגים סמנטיים, כלומר – לא לבחור אותם על פי איך שהם ניראים על המסך במצב ברירת המחדל שלהם, אלה על פי הערך שהם מייצגים. כל התגים, למעט תגים מיוחדים (כמו br למשל), מקבלים הגדרות עיצוביות כברירת מחדל. כך למשל התג Div שמטרתו לייצג אזור לוגי במסמך מקבל כברירת מחדל את הערך display:block. זה אומר, בין היתר, שהוא שובר את השורה שלפניו ואת השורה שאחריו. בשלבי העימוד הראשונים העובדה הזו לא צריכה לעניין אתכם בכלל. בעזרת CSS נוכל בשלב 5 למקם אותו איך שנרצה.

בנוסף, חשוב להמנע מתגים המייצגים עיצוב ולא תוכן.
הימנעו מהתגים :

  • <i> – קו נטוי
  • <u> – קו תחתון
  • <b> – הדגשה
  • <font> – שימוש בגופן
  • <pre> – שמירת ריווחים
  • ודומיהם

לימדו להכיר והשתמשו בתגים:

  • <address> – כתובת
  • <fieldset> – קבוצת שדות בטופס
  • <q> – ציטוט
  • <label> – טקסט תיאורי המשוייך לפקד קלט (שדה טקסט למשל)
  • <strong> – טקסט מובלט
  • ודומיהם

עימוד

חלוקה לוגית לאזורים ראשיים

ראשית יש להתבונן בעיצוב ולשאול את עצמנו “איזה אזורים ראשיים מופיעים בעיצוב?”. אזור ראשי הוא אזור שהתוכן שלו עומד פני עצמו ואינו קשור קשר ישיר לאזורים ראשיים אחרים מבחינה עיצובים או מבחינת התוכן. דוגמאות לאזורים ראשיים הם: כותרת (Header), תפריט צד, כותרת תחתונה (Footer), סל קניות, אזור פירסומי גדול (לא מהסוג שמשולב בתוך תוכן) וכו’. עבור כל אזור שכזה יש לצור Div נפרד ב HTML . ב HTML5 הוגדרו תגים מיוחדים לכל אחד מהאזורים המרכזיים ויש להשתמש בהם במקום בDiv.

חלוקה לתתי אזורים

לאחר החלוקה לאזורים ראשיים, נבצע חלוקה לתתי אזורים. למשל, בתפריט הצד יתכן שיופיעו גם תפריטים וגם קישורים שאינם בהכרח תפריט. אלו הם שני תתי אזורים שונים של האזור הראשי של תפריט הצד.

הזנת כותרות

בכל אזור ראשי ותת אזור נכניס כותרות ראשיות בתג H1, כותרות משניות בתג H2, תתי כותרות ב H3 וכן הלאה. שוב, נסו להתעלם מגודל הגופן כפי שהוא מופיע בברירת המחדל שלו, כל זה יתוקן בהמשך.

הזנת תוכן

בשלב זה נוסיף טקסטים (אפילו זמניים אם צריך) ותכנים נוספים כדי לתת מראה שלם יותר לעמוד.

עיצוב בעזרת CSS

רק לאחר שכל העמוד מוכן, ניתן להתחיל לעצב בעזרת CSS. עיצוב ב CSS הוא לא נושא לפיסקה אלא לספר שלם והמאמר לא יגע בנושא זה. קיראו בסוף טיפים בנושא זה.

החלת פונקציונליות

לאחר שהעמוד עומד איתן וניראה נהדר, הגיע הזמן להכניס את פונקציונליות. אם ניתן השתדלו להפריד את ה Javascript מדפי ה HTML. העיקרון הזה אומר שקובץ הJavascript לא יהיה חלק מדף ה HTML ובתוך וההרשמה למאורעות (Events) של כל אלמנט ירשמו מתוך ה Javascript ולא מתוך המאפיינים של האלמנט (בדף HTML לא תראו את המפאיינים onclick, onkeypress ודומיהם). תוכלו להעזר בספריות Javascript כמו jQuery להשגת המטרה.

jquery1

השלב הראשון הוא חלוקה לאזורים ראשיים. ניתן לזהות בתמונה שלושה כאלו:

jquery2

לכן, הקוד שנבנה יהיה:

<html>
<head>
</head>
<body>
<div id="header">
</div>
<div id="Content">
</div>
<div id="Footer">
</div>
</body>
</html>

השלב השני הוא חלוקה לאזורי משנה. ניתן לראות את זה הכי יפה באזור התוכן של האתר, שבו כל אזור משנה אחראי לאזור תוכן שונה:

jquery3

גם כאן הקוד ישקף אך ורק את המבנה הלוגי, תוך התעלמות מהעיצוב (חלוקה לעמודות במקרה שלנו). כל Div קיבל ID שמייצג את עולם התוכן של האזור שלו:

<div id="Content">
<div id="Intro"></div>
<div id="Download"></div>
<div id="whosUsing"></div>
<div id="Jobs"></div>
<div id="News"></div>
<div id="Books"></div>
</div>

נתמקד כעת באזור המשנה הראשון – אודות jQuery. שני השלבים הבאים הם הזנת כותרות והזנת תוכן. שימו לב לשימוש בקוד הסמנטי – כותרות בתוך תג <h2>, פיסקאות בתוך תג <p>, וטקסט מובלט בתוך תג <strong>.
<div id=" Intro ">
<h2> jQuery is a new kind of JavaScript Library. </h2>
<p>
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
<strong> jQuery is designed to change the way that you write JavaScript.</strong>
</p>
<a href=""> Lightweight Footprint</a>
<a href=""> CSS3 Compliant </a>
<a href=""> Cross-browser</a>
</div>

לאחר שסיימנו להזין את כל התוכן בצורה סמנטית, ניתן לעבור לעיצוב בעזרת CSS.

רוב הטקסט בעמוד הוא לבן על רקע שחור, לכן נגדיר (בתוך קובץ CSS נפרד) ברמה הגבוה ביותר שנוכל (body) את צבע הרקע ואת צבע הטקסט. הגדרות אלו יחלחלו מטה אל כל האלמנטים:

body {
color :white ;
background-color :black ;
}

באזור ה”אודות”, נתחיל בכותרת. לכותרות (וגם לאלמנטים רבים אחרים) יש בדרך כלל הגדרות ברירת מחדל של גודל גופן, ריווחים, צבע וכיו”ב. כדי לעצב את הכותרת, ניצור את הקלאס הבא:

#Intro h2
{
color : #5DB0E6 ;
font-size : 1.9em ;
font-weight : bold ;
padding : 0 ;
}

לקישורים, אנחנו מעוניינים לתת את התמונה jQuery4 ליד כל קישור. במקום לשים תג <img> נשתמש ב CSS. התמונה תשב ברקע של הקישור, ובעזרת Padding ניצור רווח שבו התמונה תוכל להיכנס:

#Intro a
{
background : transparent url(../images/icon_check_white.gif) no-repeat scroll left center ;
color : #5DB0E6 ;
padding : 0 30px 0 23px ;
}

דבר אחרון שנישאר לעשות, הוא למקם את כל האזור הזה כך שיופיע ליד האזור השני, ולא מעליו. לצורך זה נגדיר לו גובה ורוחב, ונציף אותו לימין:

#Intro
{
float : left ;
width : 515px ;
height : 200px ;
}

כפי שציינתי קודם, בכל הקשור בעיצוב מדובר פה רק בטעימה על קצה המזלג ולצערי לא אוכל להרחיב בנושא במאמר זה. באמת מדובר על עולם ומלואו.

השלב האחרון יהיה להוסיף פונקציונליות בעזרת Javascript.

איך יודעים באיזה תג נכון להשתמש ?

ראשית, חשוב וכדאי להכיר את כל התגים, אבל יש כמה כללי אצבע שיוכלו לעזור לכם:

  1. אם מדובר בתפריט, השתמשו בתגי רשימה (<ul>, <ol> או <dl>).
  2. אם תמונה היא עיצובית בלבד ואין לה משמעות סמנטית, אל תוסיפו תג תמונה (<img>). השתמשו ב- background-image במקום. לוגו הוא דוגמא לתמונה עם משמעות. טלפנית מחייכת ליד כותרת של שירות לקוחות היא דוגמא לתמונה לא משמעותית, זה אלמנט עיצובי בלבד.
  3. כפי שנאמר כבר, המנעו מתגים שיש להם משמעות עיצובית בלבד
  4. מותר להשתמש בטבלאות – כאשר מייצגים מידע טבלאי, למשל, טבלת חנויות עם הכתובות שלהם ושעות הפתיחה. המנעו מעיצוב או עימוד בעזרת טבלאות.
  5. אם רוצים לעצב טקסט שהוא חלק מפסקה, השתמשו בתג <span> ותנו לו קלאס מיוחד. בדרך כלל כאשר רוצים לעצב משפט בתוך פיסקה יש לזה משמעות – או שמדובר בטקסט חשוב (יש להשתמש בתג <strong>) או שמדובר בהערת שוליים (יש להשתמש בתג <sub>) או כל מקרה אחר. במידה ולא מצאתם תג מתאים, השתמשו ב<span>.

כמובן שיש עוד כללים, אבל הכירות טובה עם מערך התגים יכולה לסייע לכם להבין את זה בעצמכם.

סיכום

במאמר ראינו איך ניתן לגשת לעיצוב בגישה הסמנטית כדי להקטין את כמות הקוד ולייעל את המסמך. אני יודע שלא נגענו כלל בעיצוב אבל יש מספיק מאמרים ברשת שיכולים לכוון אתכם בכיוון הנכון לגבי ביצוע המשימות. לאחר תירגול של עמוד או שניים אתם תיראו שהשד לא כל כך נורא ושהקוד ניראה הרבה יותר טוב.

טיפ נוסף : נסו למחזר קוד. ממש כמו בפיתוח, גם ב HTML ו CSS ישנם Design Patterns בדוקים ומוכחים הפותרים כל מיני בעיות בעימוד כמו: איך מעצבים תגי Div בעמודות? איך גורמים לכותרת התחתית להיצמד לתחתית המסך? איך בונים כפתור עם פינות מעוגלות? איך הופכים רשימה (<ul>) לתפריט? ועוד.

פורסם במקור בבלוג You, I and UI

יאיר תבור

יאיר תבור הוא מתכנת UI שחשוב לו שאנשים ידעו ש-UI זה יותר מסתם HTML.

הגב

15 תגובות על "איך נהפוך עיצוב סטטי לעמוד HTML / מדריך"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
אלי
Guest

מדריך יפה מאוד :)
איפה אתה היית לפני 5 שנים? :P

לוטם
Guest

יופי של פוסט! תודה רבה

ששון
Guest

איזה פוסט נדיר
תורה שלמה כתבת פה
אבל איפה היית לפני 3, 4 שנים כשהייתי צריך את זה?
אבל בכל זאת תודה רבה :)

אריה
Guest
מאמר מוצלח – נותן כיוונים טובים. הערות כלליות כתוספת: 1. אין אף תרחיש לגיטימי שבו טקסט ישב בתוך DIV. במינימום כל פיסת טקסט צריכה להיות בתוך פסקה או בתוך תג שמסמן אותה בצורה מדוייקת יותר מאשר פסקה (יש שאלה כללית על האם טקסט בתוך LI צריך להיות בתוך פסקה – אבל זה כבר דיון אחר). 2. בכלליות – לדעתי יש לך שימוש מוגזה ב DIVים – לדוגמה – אם יש לך רשימה – (who’s using) – שהיא מראש אלמנט בלוקי – אין שום סיבה לעטוף אותה. 3. בכלליות – שימוש מוגזם בDIVים הוא רק טיפה פחות גרוע משימוש בטבלאות –… Read more »
אבי ברששת
Guest

מאמר מכובד מאוד, אבל למי שאין כוח לעשות את זה מוזמן לפנות אלי

משה
Guest

לא רלוונטי יותר , יש HTML5

רחל סעדיה
Member

נכון שיש HTML5 שם פשוט אתה נותן שמות ספציפיים לחלקי האתר השונים. עדיין חשוב לזכור גם את זה. במקום ה – DIV אתה נותן את התגיות של ה – HTML5. ויש לזכור שלא כל הדפדפנים תומכים ב – HTML5.

מרק קושניר
Member

מדריך מעולה, אבל באה באיחור…

יש הרבה פתרונות של אופטימיזציה – HTML5 לכל הדפדפנים.
דוגמא לפתרון באחד האתרים שבניתי לא מזמן:
http://www.lightbox.co.il

רחל סעדיה
Member

זה מדריך שימושי במיוחד – לפעמים צריך לחזור לזה. וטוב לשמור את זה במקום טוב או בתיקיה בולטת – עם הזמן זה כבר יבוא טבעי.

News
Guest

כל הכבוד ! מדריך 10

חי
Guest

אפשרי גם להשתמש בbootstrap, ספריה פשוטה וקלה.

fdsfds dsdsfds
Member

g

אמיר
Guest

ממליץ לאתר לשלב את קטעי קוד עם CSS שמיועד לכך, ולא ביישור מימין לשמאל בפונט רגיל.
בטח ובטח בכתבה על הנושא.

צחי הנחמד
Guest

תודה למי שהשקיע ביצירה הכתבה,
עוד לא קראתי אבל עוד חזון למועד…

ג'ו קאובוי
Guest

http://axelrod.co.il/
למי שלא מכיר היטב HTML וCSS מומלץ פשוט להיכנס לCDeditor ולהעתיק את קוד המקור שהאדיטור מייצר

wpDiscuz

תגיות לכתבה: