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

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   תכנות - מדריכים, code snippets (https://hosts.co.il/forums/forumdisplay.php?f=68)
-   -   [מדריך] קידוד אתר ב-DIVים, חלק [1] (https://hosts.co.il/forums/showthread.php?t=44907)

Daniel 05-05-07 08:59
[מדריך] קידוד אתר ב-DIVים, חלק [1]
 
[מדריך] קידוד אתר ב-DIVים, חלק [1]

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

המדריך נכתב על ידי בלבד D:
מקווה שתצליחו P:.

#נדרש#:
ידע ב-CSS
ידע ב-HTML
היגיון

הקדמה
קידוד אתר, מתחלק ל-2 חלקים.
חיתוך->וסידור החלקים, ממש כמו בפאזל.

מה ההבדל בין קידוד ב-DIV, לקידוד בטבלאות?

זמן הטעינה, תפיסת המשאבים, ונוחות הקוד.

טוב, אני מעוניין, מה לעשות?

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

שלבים ראשוניים->

[1] לעצב את העיצוב.
[2] לחתוך את העיצוב(חשוב לעשות את זה מדוייק).
[3] שמירת קבצי העיצוב.

ואני אסביר טיפה יותר מפורט על [3]:
אני הייתי ממליץ לכם לשמור את זה, אם זה רק צבע אחד, JPEG, עיצוב נורמאלי, GIF, ועיצוב הממולא בצבעים, PNG.
GIF היא ההעדפה שלי, גם מכיוון שאפשר להשתמש בו גם לאנימציה.

העיצוב שלי מורכב מ-3 תמונות.

לוגו
Logo.png
http://www.img-il.com/up/k4qmzkfnyzmd.gif

תפריט ניווט
Navi.png
http://www.img-il.com/up/mutmjjyzotzn.gif

שטח הטקסט, גוף המסמך.
Body.png
http://www.img-il.com/up/zyrz2ryq0hth.gif

שאותם חתכתי בפוטושופ.


חלק 1 נגמר,
עכשיו הגיע חלק הקידוד.

כשמשתמשים בדיבים, נהוג להשתמש גם ב-CSS, ואתם תראו דוגמה.

אבל בו נעזוב את העיצוב, את ה-CSS,
ונחשוב לעצמנו, איך דף אינטרנט צריך להיראות.

אני אומר תיקני, ואתם?

הנה מבנה של דף אינטרנט תיקני.

HTML קוד:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="he">
<head>
        <title> Page title </title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
        <link rel="stylesheet" href="Css File" type="text/css" media="screen"/>
</head>
<body>

Code is here

</body>
</html>
הממ, אני מניח שאתם מבינים בערך, אבל לא מבינים למה הסלאש בחלק מהתגים.

כשיש תג, שאין לו תג סגירה->צריכים לשים לו רווח+/ בסוף.
לדוגמה:
HTML קוד:
<img src="Body.gif" alt="Body IMG" />
הממ, אז יאללה, נתחיל :).
פתחתי קובץ CSS, בשם Default.css.

הממ, דבר ראשון, מן הסתם->צריך לעשות תג של DIV.

(מעכשיו אני לא אראה את ההתחלה והסוף, אלא רק את הקוד עצמו.

HTML קוד:
<div>

</div>
עכשיו צריכים להכניס לו את -כל- הפרמטרים.

הקלאס שלו יהיה "div_Logo".
למה "div_Logo", ולא פשוט "Logo"?
כי אם במקרה בעתיד, תרצו להוסיף דברים, לעשות טבלה מתחת, עם "היכל התהילה", ותעשו לזה Logo, שזה לא יתנגש(סתם נתתי דוגמה).


HTML קוד:
<div class="div_Logo">
&nbsp;
</div>
למה ה-&nbsp;?
&nbsp; הוא בשביל לעשות רווח.
דיב ללא תוכן->דיב שלא יוצג.

ונעבור לקובץ CSS.

רוחב: 638.
אורך: 213.

יש מעט אנשים, שיכתבו ככה:

HTML קוד:
.div_Logo {
width:638;
height:213;
}
הבעייה היא, שיש כמה מידות ל-width ו-height.
בסוף המספר, ברוחב, ואורך, ובעוד כמה תגים, מוסיפים את יחידת המדידה.
HTML קוד:
.div_Logo {
width:638px;
height:213px;
}
עכשיו, נעשה גם את תמונת הלוגו.

HTML קוד:
.div_Logo {
width:638;
height:213;
background-image:url(Logo.gif);

}
תזכרו את זה, משתמשים בזה כדי לעשות תמונת רקע ב-CSS.
(ד"א, התגית background ב-TD היא לא חוקית, משתמשים ב-CSS).



סופי:
HTML קוד:
.div_Logo {
width:638px;
height:213px;
background-image:url(Logo.gif);
}
זהו, תמונת הלוגו הסתיימה :).
זה לא היה -כל כך- קשה, נכון?

עכשיו נעבור ל-2 החלקים השניים.
כפי שרובכם יודעים, DIV מוריד שורה.
מה נעשה? :).
בשביל זה יש את אלמנט Float, הגורם "לרחף".
ל-float יש 2 אפשרויות שונות מהברירת מחדל.
right ו- left

נעבוד ביחד על שני התמונות האחרונות.
HTML קוד:
<div class="div_Logo">
&nbsp;
</div>
<div class="div_Navi">
<a href="index.html">עמוד הבית</a>
</div>
<div class="div_Body">
שלום, זהו מדריך ללימוד קידוד אתרים באמצעות DIVים, שנכתב על ידי MasterT.
</div>

ונעבור ל-CSS.
HTML קוד:
.div_Body {
width:213px;
height:567px;
background-image:url(Navi.gif);
float:right;
}

.div_Body {
width:425px;
height:567px;
background-image:url(Body.gif);
float:right;
}
ולהלן הדף במלואו:

HTML:
HTML קוד:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="he" dir="rtl">
<head>
        <title> Page title </title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
        <link rel="stylesheet" href="Default.css" type="text/css" media="screen"/>
</head>
<body>

<div class="div_Logo">
&nbsp;
</div>

<div class="div_Navi">
<a href="index.html">עמוד הבית</a>
<br />
<a href="links.html">החלפת לינקים</a>
</div>

<div class="div_Body">
שלום, זהו מדריך ללימוד קידוד אתרים באמצעות DIVים, שנכתב על ידי MasterT.
</div>


</body>
</html>
CSS:

HTML קוד:
.div_Logo {
width:638px;
height:213px;
background-image:url(Logo.gif);

}
.div_Navi {
width:213px;
height:567px;
background-image:url(Navi.gif);
float:right;
}

.div_Body {
width:425px;
height:567px;
background-image:url(Body.gif);
float:right;
}
טריק נחמד שרבים משתמשים בו, הוא לא לציין גובה ( height) במקומות שיש בהם תוכן.
ככה שהדף יהיה בדיוק מתאים לטקסט.

(CSS חדש)
HTML קוד:
.div_Logo {
width:638px;
height:213px;
background-image:url(Logo.gif);

}
.div_Navi {
width:213px;

background-image:url(Navi.gif);
float:right;
}

.div_Body {
width:425px;

background-image:url(Body.gif);
float:right;
}

אני מקווה שעזרתי לכם,
לכל שאלות/טענות/הארות/הערות, אני כאן

לדף "למה כדאי להשתמש ב-DIV",

לחצו כאן

תירגום חופשי לדף:

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

הדף הוא בתירגום חופשי שלי, עם הסברים קטנים.

אני ממש מקווה שלא תאכלו אותי אם יש לי טעות כלשהי ><.


בחלק הבא: אלמנטים חשובים ב-CSS,
clear,
כתיבה תיקנית,
הצעות לתחליפים לדברים שאין ב-DIV ויש בטבלאות,
וכל מיני עזרים קטנים בטפסים.


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

nevo 05-05-07 09:14
יש לך טעות בCSS אני זוכר שפעם ראיתי שאסור לכתוב
קוד:
.div_logo
אלה אתה צריך לכתוב
קוד:
div.div_logo

DmN 05-05-07 09:47
לא הבנתי שום דבר.
שום כלום.
אני מתחיל בעסק הזה , חתכתי 3 תמונות מה הלאה ?
מה זה Default.css ? איך יוצרים אותו ? מה שמים בו ?
כל הכבוד על הרצון,אבל אני לא מבין כלום.

Daniel 05-05-07 09:55
ציטוט:
נכתב במקור על ידי nevo (פרסם 472230)
יש לך טעות בCSS אני זוכר שפעם ראיתי שאסור לכתוב
קוד:
.div_logo
אלה אתה צריך לכתוב
קוד:
div.div_logo
אם איני טועה, כשאתה כותב "div.div_logo", זה יהיה שמיש רק ב-DIV.
זה אינו חובה.

DmN:
Default.css זה קובץ שאתה יוצר בפנקס רשימות, ושומר כ-Default.css

nevo 05-05-07 10:03
נו נכון,
בקייצור אני ממליץ שתבדוק את עצמך ב css vaildator

DmN 05-05-07 10:05
בסדר יצרתי מה אח"כ ? המדריך שלך לא מובן בגרוש.
תסלח לי אם אני מעליב אותך כן,
אבל אני לא מבין כלום.

Gold-System 05-05-07 10:23
לדעתי מדריך מצויין למתחילים, תודה רבה :rolleyes:

Daniel 05-05-07 10:30
תודה גולד-סיסטם P:.

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

דרוש ידע ב-CSS ו-HTML, וזה יקל עליכם את קריאת המדריך

pal 05-05-07 10:38
אוקיי אז תעשה גם מדריך לממש מתחילים וגם למתקדמים...
וככה מי שממש מתחיל יקרא את המדריך הראשון ויעבור אחר כך למתקדמים...
ומי שכבר יודע חלק ילך ישר למתקדמים..

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

mlnn 05-05-07 10:50
תודה, נראה מדריך טוב.

Udi 05-05-07 11:06
אשמח אם תוכל לפרט יותר בשהשוואה בין "קידוד" בטבלאות לבין DIV.

ציינת רק הבדלים, אבל לא לטובת מי וממה זה נובע.

Kfir.G 05-05-07 13:43
ציטוט:
נכתב במקור על ידי Udi (פרסם 472282)
אשמח אם תוכל לפרט יותר בשהשוואה בין "קידוד" בטבלאות לבין DIV.

ציינת רק הבדלים, אבל לא לטובת מי וממה זה נובע.
לדף "למה כדאי להשתמש ב-DIV",

לחצו כאן

לפעמים כל כך קשה לקרוא את הכל...
________________________
דניאל יש לי שאלה למה אתה יוצר סתם מחלקות? לפי איך שכתבת את זה לא נראה לי שתשמש במחלקה div_Logo למשל בדברים נוספים אז למה פשוט לא לעשות ככה:
HTML קוד:
<div id='div_Logo'>
&nbsp;
</div>
ובתגית הstyle \ קובץ הCSS שלך תכתוב
HTML קוד:
#div_Logo{something}
זה יותר נוח לדעתי כי ככה למשל אם אתה עושה כפתורים בעזרת רשימה אתה יכול לעשות פשוט
HTML קוד:
#div_Nav ul{something}
ואם אתה עושה את זה עם מחלקה אתה לא יכול לעשות את זה (לפחות לפי מה שידוע לי) ככה שהקוד שלך יוצא יותר פשוט ונוח לקריאה

בכל מקרה קבל ח"ח על המדריך יוזמה יפה |קוול! קטן|

Dman 05-05-07 13:45
תודה רבה

Noam 05-05-07 15:08
תודה רבה
מדריך טוב מובן ומסודר

Daniel 05-05-07 17:13
ציטוט:
נכתב במקור על ידי kfir_dnd (פרסם 472351)
לדף "למה כדאי להשתמש ב-DIV",

לחצו כאן

לפעמים כל כך קשה לקרוא את הכל...
________________________
דניאל יש לי שאלה למה אתה יוצר סתם מחלקות? לפי איך שכתבת את זה לא נראה לי שתשמש במחלקה div_Logo למשל בדברים נוספים אז למה פשוט לא לעשות ככה:
HTML קוד:
<div id='div_Logo'>
&nbsp;
</div>
ובתגית הstyle \ קובץ הCSS שלך תכתוב
HTML קוד:
#div_Logo{something}
זה יותר נוח לדעתי כי ככה למשל אם אתה עושה כפתורים בעזרת רשימה אתה יכול לעשות פשוט
HTML קוד:
#div_Nav ul{something}
ואם אתה עושה את זה עם מחלקה אתה לא יכול לעשות את זה (לפחות לפי מה שידוע לי) ככה שהקוד שלך יוצא יותר פשוט ונוח לקריאה

בכל מקרה קבל ח"ח על המדריך יוזמה יפה |קוול! קטן|
תודה רבה :).
אבל אני שומר את ה-ID בשביל JS תמיד.



אני אפרסם בקרוב מדריך ל-CSS.

Illusion 05-05-07 17:41
תודה

Nadav 05-05-07 20:40
וואו, מדריך מושקע מאוד.
הבנתי פה הכל, ננסה את זה בהזדמנות =]
תודה רבה:)

Kfir.G 05-05-07 22:10
ציטוט:
נכתב במקור על ידי MasterT (פרסם 472435)
תודה רבה :).
אבל אני שומר את ה-ID בשביל JS תמיד.

אני אפרסם בקרוב מדריך ל-CSS.
אני בד"כ משתמש ב this וזהו ב js אבל אתה תמיד יכול להשתמש בid של תגית מסויימת גם בשביל CSS וגם בשביל JS;P
עריכה:
אם אתה רוצה עזרה עם המדריך אני אשמח לעזור =]

WebProject 06-05-07 09:46
אחלה מדריך, רק אני הייתי מסביר על כל סוגי ה Doctype, לא תמיד צריך לעבוד עם Strict :)

Udi 06-05-07 10:40
ציטוט:
נכתב במקור על ידי kfir_dnd (פרסם 472351)
לדף "למה כדאי להשתמש ב-DIV",

לחצו כאן

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

חוצמזה, באמת לא שמתי לב לזה.

iDan | Gold-host 11-05-07 16:13
מסטר , באמת שניסיתי להבין ויש לי ידע ב-HTML וב-CSS.
עכשיו אתה פותח תבנית HTML עם הקוד: XML .
אחרי זה אתה עושה עוד כמה דברים, היה יותר טוב אם היית מסביר כל קוד בפני עצמו וכל אות מה היא עושה.
תודה רבה !

eldare1 12-05-07 15:14
תודה

PrizeeHeb 20-06-07 15:08
תודה רבה

DaMbO 20-06-07 22:28
תודה חבל שהתמונות לא עובדות לי

HagaiA 21-06-07 11:05
זה ברור מאליו,זה לא כלכך קשה אם אתה יודע CSS,
וכבר רשמת שהנושא הזה מיועד ליודעי HTML אז למה רשמת את זה:
"הממ, אני מניח שאתם מבינים בערך, אבל לא מבינים למה הסלאש בחלק מהתגים.

כשיש תג, שאין לו תג סגירה->צריכים לשים לו רווח+/ בסוף."

זה די מעצבן ואפ' מעליב :\

אבל כל הכבוד על היוזמה =]

Daniel 21-06-07 12:24
><
הממ, יכול להיות שאני פותח נושא חדש ומסודר עם חלק [2].

תודה בכ"מ.

Nati_Man 21-06-07 14:49
ציטוט:
נכתב במקור על ידי MasterT (פרסם 503599)
><
הממ, יכול להיות שאני פותח נושא חדש ומסודר עם חלק [2].

תודה בכ"מ.
מחכה לראות את זה :)

DefSites 18-06-12 13:03
חובה לתקן את התמונות!
__________________
קידוד אתרים

Ori The Man 18-06-12 13:20
ציטוט:
נכתב במקור על ידי DefSites (פרסם 847784)
חובה לתקן את התמונות!
__________________
קידוד אתרים
אתה מודע לזה שהקפצת נושא מלפני 5 שנים? (נכתב ב 2007)

SwfIt 18-06-12 13:26
ציטוט:
נכתב במקור על ידי Ori The Man (פרסם 847786)
אתה מודע לזה שהקפצת נושא מלפני 5 שנים? (נכתב ב 2007)
נראה כמו ניסיון נואש לקדם את האתר שלו בגוגל? שם קישור ל"קידוד אתרים" בהודעה בלי קשר.
כנראה חושב שלשים את זה באשכול עם ותק של 5 שנים יעשה לו משהוא.

בוגר ומקצועי, אני רץ לקבל ממנו קידוד לאתר!

SubMovie 18-06-12 14:26
ציטוט:
נכתב במקור על ידי SwfIt (פרסם 847789)
נראה כמו ניסיון נואש לקדם את האתר שלו בגוגל? שם קישור ל"קידוד אתרים" בהודעה בלי קשר.
כנראה חושב שלשים את זה באשכול עם ותק של 5 שנים יעשה לו משהוא.

בוגר ומקצועי, אני רץ לקבל ממנו קידוד לאתר!
זה משהוא מנסה לעשות.. אבל זה לא ממש יעזור לו

Meir Rafaelov 16-01-15 20:40
מי מרים את הכפפה ועושה מדריך על קידוד ריספונסיבי?


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

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