12308 מאמרים - מנוע לחיפוש מאמרים - פרסום מאמרים חינם

נושא המאמר: הבסיס בקידוד האתר. בשביל לקודד טוב צריך לדעת xhtml וcss כדי שהאתר לא יעלה לאט מאוד.
מאת: נמרוד רותם    שמור מאמר למועדפים

מהו קידוד?
בשביל אתר צריך עיצוב. אבל עיצוב הוא תמונה, ועל תמונה אי אפשר לעבוד! ולכן יש את הקידוד. פירוק התמונה לחלקים, התאמה באתר, סידור יעילות וכדומא.
מה צריך לדעת
בשביל לקודד טוב צריך לדעת xhtml וcss כדי שהאתר לא יעלה לאט מאוד.
מה לעשות?
קודם כל ניצור לנו עמוד css ונפנה אליו מהעמוד שלנו:

מובן שצריך לשנות אתר כתובת העמוד. עכשיו, לאחר שכתבנו את כתובת העמוד נגדיר מאפיין לכל הdiv שבאתר (אנו נשתמש בdiv שהוא שיטת הקידוד הטובה והיעילה ביותר). ובכן, אנו נגדיר שכל הdiv שבעמד יזוזו לצד ימין.
div{
float:right;
}
עכשיו, נוכל לסדר div בשורות אחת ליד השני, אך יש חיסרון למהלך - אי אפשר יהיה למרכז את העמוד לאמצע, הוא תמיד יהיה בימין. בשביל זה, ניצור div שבתוכו יהיה כל האתר.
div.page{
float:none;
width:90%;
}
שימו לב שאת אורכו חשוב לציין, אך זה אינו ממש חשוב. עכשיו אנו צריכים להכניס אותו לדף:
ניצוד דיב שהclass שלו הוא page
פה נכניס כמה אותיות
ופה נסגור את הdiv( מצטער שאני לא כותב קוד, המערכת לא מאפשרת..)

עכשיו ניצור פס ימין - טקסט - פס שמאל לדוגמא. בתוך הcss שלנו ניצור כמה דברים, הינה הם:
div.pasR{
width:10px;
backgrpund-color:red;
height:450px;
}
div.text{
width:450px;
height:300px;
}
div.pasL{
width:10px;
background-color:blue;
height:450px;
}
עכשיו עשינו css לאתר של ליצנים :). בהתחלה הגדרנו את הפס הימיני באובי 10 פיקסלים, גובה 450 פיקסלים וצבע אדום. אחרי זה הגדרנו את המקום של הטקסט, שאינו ממש משנה. לאחר מכן יצרנו את הפס השמאלי באובי 10 פיקסלים, גובה 450 פיקסלים וצבע כחול. עכשיו ניצור לנו עוד חלק אחד, לצורך ההבנה.
div.pasC{
width:100%;
background-color:green;
height:100px;
}
ועכשיו נחזור לעמוד html שלנו, ונכניס את כל הdiv שיצרנו.



כאן הטקסט של האתר.






התוצאה תהיה:
פס כחול - הטקסט שבאתר [ירידת שורה] פס ירוק גדול - פס כחול.

זה אינו מעניין כל כך, אח זה מכיל את כל עקרונות העבודה! עכשיו, כל מה שאתה צריך לעשות זה ליצור div בתוך div עד שיצא לך העיצוב הרצוי.
שימוש בתמונות
השימוש בתמונות פשות מאוד! בעזרת כלי הslice שבתוכנה imageradi אשר מגיע עם הפוטושופ תוכל לחתוך לחלקים את העיצוב. חתוך רק את החלקים החשובים! צבעים אחידים אין צורך לחתוך. במקום בו יש לך pattren כלומר אותה דוגמא חוזרת על עצמה, כך רק חלק קטן מהדוגמא. עכשיו שמור בעזרת sava optinaze as אך בחר בselected slices כדי לשמור את את הskice שיצרתה. עכשיו תיבצר לך תיקיה המכילה את התמונות. בcss צריך לשנות את:
background-color
ל:
background-image:url(IMAGEURL.gif);
ואת הwidth והheight לשנות לממדי התמונה. עכשיו לאחר סידור והרבה div יבצר העיצוב! שיומ לב שחלקים רקים אין צורך למלא בתמונה, אפשר למלא בצבע רגיל.
בהצלחה!
נ.ב - לא יצליח לצאת יפה בפעם הראשונה, אבל לומדים!

אודות הכותב:
נמרוד .ר. מפתח אתרים ומקודד אתרים. מנהל האתר http://www.fun-il.com ומשתתף בתחרות האתר Hen and Stag Night seocontest - http://www.henandstagnightseocontest.net המאמר פורסם לראשונה בבלוג שלי.