קידוד ראשון שלי.. [שימוש בdivים וcss]

[omercnet]

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

שמתי לב אצלך שאתה יוצר SPAN כמעט לכל שורה, במקום לעשות SPAN לכל אזור/פסקה/קטע או משהו כזה
חבל על הבלאי של המקלדת שלך

דבר שני זה הזחה
הCSS יותר קריא שעושים אותו באופן הבא

PHP קוד:

* {
  margin: 0;
  padding: 0;
}
body {
  background: #FFEEFF url('images/bg.png') repeat-x;
} 


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

אותו דבר לגבי הHTML עצמו

PHP קוד:

<DIV id='Site'>
  <SPAN id='MainNav'>
    <UL>
      <LI id='NavHome'><A href='/' alt='Home'>w00t</A></LI>
      <LI id='NavNews'><A href='?a=news' alt='News'>w00t</A></LI>
    </UL>
  </SPAN>
</DIV> 


בנוסף גם לתת שמות הגיוניים לדברים, ולא body1 body2 header1 menu2 menu3
כי זה פשוט יוצא מהקשר, ואז שאתה עובר על הקוד אתה כל פעם צריך לקפוץ בין האתר לבין הקוד בשביל להבין מה זה מה


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

זה מה שעלה לי בריפרוף ראשוני

מקווה שזה עוזר

נ.ב
אני אוהב לשים שני רווחים בהידור שלי, יש אנשים ששמים טאבים.
הכל הולך העיקר שהעבודה בסוף נוחה