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

cc-by-brig. flickr

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

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

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

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

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

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

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

עימוד
עיצוב
החלת פונקציונליות

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

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

בשלב העימוד, חשוב ליצור את מסמך ה 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 להשגת המטרה.

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

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

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

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

גם כאן הקוד ישקף אך ורק את המבנה הלוגי, תוך התעלמות מהעיצוב (חלוקה לעמודות במקרה שלנו). כל 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 ; }

לקישורים, אנחנו מעוניינים לתת את התמונה ליד כל קישור. במקום לשים תג <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.

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

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

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

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

סיכום

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

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

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

יאיר תבור

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

הגב

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

התחבר עם:

Photo and Image Files

Audio and Video Files

Other File Types

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

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

Guest

אלי

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