טוב, אז יש לנו עיצוב שווה שעשינו בפוטושופ

מה עכשיו? ישבנו מול הפוטושופ, עיצבנו, השקענו, הקדשנו תשומת לב לצבעוניות. בחרנו תמונות נפלאות וטיפלנו בהן. עימדנו דף יפהפה לפי כל חוקי הטיפוגרפיה והקומפוזיציה שאנחנו מכירים וגם חשבנו על המשתמש שיגיע אל האתר שלנו וימצא אותו מובן ושימושי בנוסף על אסטטי ומכירתי.
מה עכשיו? איך נהפוך את מסמך הפוטושופ המהמם הזה לאתר אינטרנט?
איך נעשה את זה לפי הסטנדרטים החדשים? עם CSS בתור מקבע העימוד שלנו במקום טבלאות?
איפה בכלל להתחיל?
הדבר הראשון שנעשה זה להסתכל על העיצוב שלנו ולנתח אותו לצורך תכנון האתר. אני רואה שיצא לי עיצוב שמתאים ליישור מרכזי לעניין הזה יש טריק נחמד ב CSS.
מצד שני ה”הדר” וה”פותר” שלי, החלק העליון והתחתון יושבים בתוך פסים שמתאים להם להמשיך ולהמתח לכל רוחב הדף - לא משנה באיזה רזולוציה.
מה שאנחנו צריכים לעשות אם כך זה להכיל את הטריק של היישור המרכזי לDIV שמכיל את כל האתר (מלבד ה”פותר” שיהיה מחוץ לו, אבל על זה אחר כך) ואת הפס האדום שלמעלה להוסיף כרקע של הדף כולו (כלומר לתגית BODY).
אז בואו נחתוך לנו פיסה מאחד הצדדים של הבאנר העליון - לא במרכז איפה שישנה הצללה ותמונות מהאזור הזה נגזור תמונת רקע ל”הדר” בלבד - רק מהצדדים - פיסה דקה וארוכה מספיק כדי להחיל את כל הרקע מהלק העליון של הדף ועד מעט מתחת לפס הצבע. עוד על העימוד בפרק סידור הדף.

רגע, מה אם אין לנו עיצוב שווה שעשינו בפוטושופ?

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