Daniel
05-05-07, 08:59
[מדריך] קידוד אתר ב-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,
ונחשוב לעצמנו, איך דף אינטרנט צריך להיראות.
אני אומר תיקני, ואתם?
הנה מבנה של דף אינטרנט תיקני.
<?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>
הממ, אני מניח שאתם מבינים בערך, אבל לא מבינים למה הסלאש בחלק מהתגים.
כשיש תג, שאין לו תג סגירה->צריכים לשים לו רווח+/ בסוף.
לדוגמה:
<img src="Body.gif" alt="Body IMG" />
הממ, אז יאללה, נתחיל :).
פתחתי קובץ CSS, בשם Default.css.
הממ, דבר ראשון, מן הסתם->צריך לעשות תג של DIV.
(מעכשיו אני לא אראה את ההתחלה והסוף, אלא רק את הקוד עצמו.
<div>
</div>
עכשיו צריכים להכניס לו את -כל- הפרמטרים.
הקלאס שלו יהיה "div_Logo".
למה "div_Logo", ולא פשוט "Logo"?
כי אם במקרה בעתיד, תרצו להוסיף דברים, לעשות טבלה מתחת, עם "היכל התהילה", ותעשו לזה Logo, שזה לא יתנגש(סתם נתתי דוגמה).
<div class="div_Logo">
</div>
למה ה- ?
הוא בשביל לעשות רווח.
דיב ללא תוכן->דיב שלא יוצג.
ונעבור לקובץ CSS.
רוחב: 638.
אורך: 213.
יש מעט אנשים, שיכתבו ככה:
.div_Logo {
width:638;
height:213;
}
הבעייה היא, שיש כמה מידות ל-width ו-height.
בסוף המספר, ברוחב, ואורך, ובעוד כמה תגים, מוסיפים את יחידת המדידה.
.div_Logo {
width:638px;
height:213px;
}
עכשיו, נעשה גם את תמונת הלוגו.
.div_Logo {
width:638;
height:213;
background-image:url(Logo.gif);
}
תזכרו את זה, משתמשים בזה כדי לעשות תמונת רקע ב-CSS.
(ד"א, התגית background ב-TD היא לא חוקית, משתמשים ב-CSS).
סופי:
.div_Logo {
width:638px;
height:213px;
background-image:url(Logo.gif);
}
זהו, תמונת הלוגו הסתיימה :).
זה לא היה -כל כך- קשה, נכון?
עכשיו נעבור ל-2 החלקים השניים.
כפי שרובכם יודעים, DIV מוריד שורה.
מה נעשה? :).
בשביל זה יש את אלמנט Float, הגורם "לרחף".
ל-float יש 2 אפשרויות שונות מהברירת מחדל.
right ו- left
נעבוד ביחד על שני התמונות האחרונות.
<div class="div_Logo">
</div>
<div class="div_Navi">
<a href="index.html">עמוד הבית</a>
</div>
<div class="div_Body">
שלום, זהו מדריך ללימוד קידוד אתרים באמצעות DIVים, שנכתב על ידי MasterT.
</div>
ונעבור ל-CSS.
.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:
<?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">
</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:
.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 חדש)
.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",
לחצו כאן (http://www.hotdesign.com/seybold/03overview.html)
תירגום חופשי לדף:
נטען יותר מהר
->מוריד את התעבורה.
->מוריד את מחירי האכסון.
->עוזר לשמור על מראה דומה בכל הדפדפנים.
->תוצאות חיפוש יותר טובות.
->כל הצופים, וכל מנועי החיפוש יכולים בקלות למצוא מידע באתרך.
->כל העולם כבר עובר לזה, "יותר נוח לך".
הדף הוא בתירגום חופשי שלי, עם הסברים קטנים.
אני ממש מקווה שלא תאכלו אותי אם יש לי טעות כלשהי ><.
בחלק הבא: אלמנטים חשובים ב-CSS,
clear,
כתיבה תיקנית,
הצעות לתחליפים לדברים שאין ב-DIV ויש בטבלאות,
וכל מיני עזרים קטנים בטפסים.
ושוב פעם,
כל הזכויות שמורות ל-MasterT-דניאל, אין להעתיק חלק מהמדריך ו/או את הסבריו, או את כולו, ו/או לפרסם במקום אחר ללא הסכמתי המפורשת.
כל הזכויות שמורות ל-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,
ונחשוב לעצמנו, איך דף אינטרנט צריך להיראות.
אני אומר תיקני, ואתם?
הנה מבנה של דף אינטרנט תיקני.
<?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>
הממ, אני מניח שאתם מבינים בערך, אבל לא מבינים למה הסלאש בחלק מהתגים.
כשיש תג, שאין לו תג סגירה->צריכים לשים לו רווח+/ בסוף.
לדוגמה:
<img src="Body.gif" alt="Body IMG" />
הממ, אז יאללה, נתחיל :).
פתחתי קובץ CSS, בשם Default.css.
הממ, דבר ראשון, מן הסתם->צריך לעשות תג של DIV.
(מעכשיו אני לא אראה את ההתחלה והסוף, אלא רק את הקוד עצמו.
<div>
</div>
עכשיו צריכים להכניס לו את -כל- הפרמטרים.
הקלאס שלו יהיה "div_Logo".
למה "div_Logo", ולא פשוט "Logo"?
כי אם במקרה בעתיד, תרצו להוסיף דברים, לעשות טבלה מתחת, עם "היכל התהילה", ותעשו לזה Logo, שזה לא יתנגש(סתם נתתי דוגמה).
<div class="div_Logo">
</div>
למה ה- ?
הוא בשביל לעשות רווח.
דיב ללא תוכן->דיב שלא יוצג.
ונעבור לקובץ CSS.
רוחב: 638.
אורך: 213.
יש מעט אנשים, שיכתבו ככה:
.div_Logo {
width:638;
height:213;
}
הבעייה היא, שיש כמה מידות ל-width ו-height.
בסוף המספר, ברוחב, ואורך, ובעוד כמה תגים, מוסיפים את יחידת המדידה.
.div_Logo {
width:638px;
height:213px;
}
עכשיו, נעשה גם את תמונת הלוגו.
.div_Logo {
width:638;
height:213;
background-image:url(Logo.gif);
}
תזכרו את זה, משתמשים בזה כדי לעשות תמונת רקע ב-CSS.
(ד"א, התגית background ב-TD היא לא חוקית, משתמשים ב-CSS).
סופי:
.div_Logo {
width:638px;
height:213px;
background-image:url(Logo.gif);
}
זהו, תמונת הלוגו הסתיימה :).
זה לא היה -כל כך- קשה, נכון?
עכשיו נעבור ל-2 החלקים השניים.
כפי שרובכם יודעים, DIV מוריד שורה.
מה נעשה? :).
בשביל זה יש את אלמנט Float, הגורם "לרחף".
ל-float יש 2 אפשרויות שונות מהברירת מחדל.
right ו- left
נעבוד ביחד על שני התמונות האחרונות.
<div class="div_Logo">
</div>
<div class="div_Navi">
<a href="index.html">עמוד הבית</a>
</div>
<div class="div_Body">
שלום, זהו מדריך ללימוד קידוד אתרים באמצעות DIVים, שנכתב על ידי MasterT.
</div>
ונעבור ל-CSS.
.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:
<?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">
</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:
.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 חדש)
.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",
לחצו כאן (http://www.hotdesign.com/seybold/03overview.html)
תירגום חופשי לדף:
נטען יותר מהר
->מוריד את התעבורה.
->מוריד את מחירי האכסון.
->עוזר לשמור על מראה דומה בכל הדפדפנים.
->תוצאות חיפוש יותר טובות.
->כל הצופים, וכל מנועי החיפוש יכולים בקלות למצוא מידע באתרך.
->כל העולם כבר עובר לזה, "יותר נוח לך".
הדף הוא בתירגום חופשי שלי, עם הסברים קטנים.
אני ממש מקווה שלא תאכלו אותי אם יש לי טעות כלשהי ><.
בחלק הבא: אלמנטים חשובים ב-CSS,
clear,
כתיבה תיקנית,
הצעות לתחליפים לדברים שאין ב-DIV ויש בטבלאות,
וכל מיני עזרים קטנים בטפסים.
ושוב פעם,
כל הזכויות שמורות ל-MasterT-דניאל, אין להעתיק חלק מהמדריך ו/או את הסבריו, או את כולו, ו/או לפרסם במקום אחר ללא הסכמתי המפורשת.