הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)
-   -   קידוד ראשון שלי.. [שימוש בdivים וcss] (https://hosts.co.il/forums/showthread.php?t=45280)

FreakBox 12-05-07 12:14

קידוד ראשון שלי.. [שימוש בdivים וcss]
 
טוב אז זה הקידוד הראשון שלי,
ולפי מה שהבנתי שימוש בdivים הרבה יותר טוב אז הקידוד נעשה בdivים וcss.

טוב אז הינה הקידוד:
http://www.freakbox.co.il/ais/ais.html

*קידוד תקני.
**אגב אני יודע שקידוד זו לא מילה נכונה יותר נכון לומר **העמדה** (:

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

Daniel 12-05-07 14:57

ואוו! זה הקידוד הראשון שלך ב-DIVים?
ואוו! אתה מצויין.

X-T 12-05-07 15:05

נחמד, בהצלחה.

eldare1 12-05-07 15:20

נחמד

Hanan 12-05-07 15:21

כל הכבוד.

omercnet 12-05-07 15:22

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

סה"כ יפה מאד :)
keep up the good work

FreakBox 12-05-07 15:38

זה הקידוד הראשון שלי בכלל..
ותודה רבה לכולם (:

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

שוב תודה לכם (:

omercnet 12-05-07 15:54

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

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

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

* {
  
margin0;
  
padding0;
}
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
כי זה פשוט יוצא מהקשר, ואז שאתה עובר על הקוד אתה כל פעם צריך לקפוץ בין האתר לבין הקוד בשביל להבין מה זה מה


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

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

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

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

FreakBox 12-05-07 16:33

אוקיי תודה רבה לך!

אגב הקוד הבא:

קוד:

* {
  margin: 0;
  padding: 0;

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

שוב תודה רבה וזה יעזור לי בעתיד אני בטוח.

omercnet 12-05-07 16:35

ציטוט:

נכתב במקור על ידי FreakBox (פרסם 476452)
אוקיי תודה רבה לך!

אגב הקוד הבא:

קוד:

* {
  margin: 0;
  padding: 0;

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

שוב תודה רבה וזה יעזור לי בעתיד אני בטוח.

different strokes.. :)


כל הזמנים הם GMT +2. הזמן כעת הוא 02:52.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ