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

   
|!|

השב
 
כלים לאשכול תצורת הצגה
ישן 05-05-07, 08:59   # 1
Daniel
אחראי פורום
 
מיני פרופיל
תאריך הצטרפות: Mar 2007
הודעות: 2,875

Daniel לא מחובר  

[מדריך] קידוד אתר ב-DIVים, חלק [1]

[מדריך] קידוד אתר ב-DIVים, חלק [1]

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

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

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

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

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

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

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

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

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

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

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

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

לוגו
Logo.png


תפריט ניווט
Navi.png


שטח הטקסט, גוף המסמך.
Body.png


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


חלק 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-דניאל, אין להעתיק חלק מהמדריך ו/או את הסבריו, או את כולו, ו/או לפרסם במקום אחר ללא הסכמתי המפורשת.

Last edited by Daniel; 05-05-07 at 09:55..
  Reply With Quote
ישן 05-05-07, 09:14   # 2
nevo
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 33
הודעות: 1,217

nevo לא מחובר  

יש לך טעות בCSS אני זוכר שפעם ראיתי שאסור לכתוב
קוד:
.div_logo
אלה אתה צריך לכתוב
קוד:
div.div_logo
  Reply With Quote
ישן 05-05-07, 09:47   # 3
DmN
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Jul 2006
מיקום: הרצליה
הודעות: 1,231
שלח הודעה באמצעות MSN אל DmN

DmN לא מחובר  

לא הבנתי שום דבר.
שום כלום.
אני מתחיל בעסק הזה , חתכתי 3 תמונות מה הלאה ?
מה זה Default.css ? איך יוצרים אותו ? מה שמים בו ?
כל הכבוד על הרצון,אבל אני לא מבין כלום.
  Reply With Quote
ישן 05-05-07, 09:55   # 4
Daniel
אחראי פורום
 
מיני פרופיל
תאריך הצטרפות: Mar 2007
הודעות: 2,875

Daniel לא מחובר  

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

DmN:
Default.css זה קובץ שאתה יוצר בפנקס רשימות, ושומר כ-Default.css
  Reply With Quote
ישן 05-05-07, 10:03   # 5
nevo
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
גיל: 33
הודעות: 1,217

nevo לא מחובר  

נו נכון,
בקייצור אני ממליץ שתבדוק את עצמך ב css vaildator
  Reply With Quote
ישן 05-05-07, 10:05   # 6
DmN
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Jul 2006
מיקום: הרצליה
הודעות: 1,231
שלח הודעה באמצעות MSN אל DmN

DmN לא מחובר  

בסדר יצרתי מה אח"כ ? המדריך שלך לא מובן בגרוש.
תסלח לי אם אני מעליב אותך כן,
אבל אני לא מבין כלום.
  Reply With Quote
ישן 05-05-07, 10:23   # 7
Gold-System
Permanently Banned
 
מיני פרופיל
תאריך הצטרפות: Mar 2007
הודעות: 401

Gold-System לא מחובר  

לדעתי מדריך מצויין למתחילים, תודה רבה
  Reply With Quote
ישן 05-05-07, 10:30   # 8
Daniel
אחראי פורום
 
מיני פרופיל
תאריך הצטרפות: Mar 2007
הודעות: 2,875

Daniel לא מחובר  

תודה גולד-סיסטם P:.

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

דרוש ידע ב-CSS ו-HTML, וזה יקל עליכם את קריאת המדריך
  Reply With Quote
ישן 05-05-07, 10:38   # 9
pal
חבר וותיק
 
מיני פרופיל
תאריך הצטרפות: Dec 2005
הודעות: 1,161

pal לא מחובר  

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

בכל מקרה יוזמה נהדרת...
למרות שבגלל שאני לא יודע מה זה css או לפחות אין לי ידע בזה אז לא הבנתי כל כך...
__________________
צילום וידאו , עריכת סרטים,במאות,הפקה
After Effects,flash,Premiere Pro,Avid Xpress ,avid fx,
מסנגר-itay_baz@hotmail.com
פלאפון-0543003739
  Reply With Quote
ישן 05-05-07, 10:50   # 10
mlnn
משתמש - היכל התהילה
 
mlnn's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: בחדר של חני
גיל: 34
הודעות: 4,417

mlnn לא מחובר  

תודה, נראה מדריך טוב.
__________________
.

בחורות ערומות
  Reply With Quote
השב

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)
 

Tags
חיתוך, מדריך css, מדריך html, מדריך למתחילים, קידוד

כלים לאשכול
תצורת הצגה

חוקי פירסום
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is מופעל
סמיילים הם מופעל
[IMG] קוד מופעל
קוד HTML מכובה

קפיצה לפורום


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

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