היסודות של אתר מבוסס Div: 7 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:18

מדריך זה יראה לך את היסודות של בניית אתר עם divs. כי שולחנות המשמשים לפריסה הם רעים!: p כדי להבין את ההוראה הזו, תצטרך לדעת HTML בסיסי ו- CSS. אם אתה לא מבין משהו, אל תהסס לשאול. דף הבית האישי שלי משתמש גם במבנה div מסוג זה. Http://www.erwtje.net תהנה

שלב 1: צור את הקבצים הבסיסיים

ראשית צור את קובץ ה- HTML שלך. נוסיף לזה את היסודות הבסיסיים ביותר. קובץ ה- css יהיה ריק לקובץ now.html מכיל כעת: test שמור את קובץ ה- HTML שלך כמשהו.html. אתה יכול לבחור את השם בעצמך. יש לשמור את קובץ ה- css שלך כ-.css. הקפד לתת לו את אותו שם כפי שהוזכר בקובץ ה- html. במקרה זה "style.css". כעת יש לנו דף HTML ריק ריק בעת תצוגה מקדימה בדפדפן שלנו.

שלב 2: ערוך את תג הגוף לצבעים בסיסיים, גופנים, …

נשאיר את קובץ ה- HTML כפי שהוא, ונערוך את קובץ ה- css בלבד. הוסף את הקוד הבא לקובץ ה- css שלך: body {background: #444444; משפחת גופנים: ורדנה, אריאל, סאנס-סריף; צבע: #444444; גודל גופן: 12 פיקסלים; שוליים: 0px;} עם פיסת הקוד הזו נגדיר את כל המאפיינים של תג הגוף. מכיוון שכל התוכן נמצא בתג הגוף, הגדרות אלה ישפיעו על הדף כולו. הרקע וצבע הגופן (צבע) הוגדרו לאפור כהה. משפחת הגופנים (משפחת-גופנים) הוגדרה ל- verdana. אם במחשב המשמש לצפייה באתר שלנו אין את הגופן "ורדנה", הוא יציג את האתר שלנו בגופן "arial". תוכל להוסיף גופנים נוספים לרשימה. "Sans-serif" הוא הסוג הגנרי שישמש כאשר לא היה זמין גופן שסיפקת. גודל הגופן (גודל הגופן) נקבע ל -12 פיקסלים. זהו ערך מוחלט. אם ברצונך לערוך גדלי גופן אחרים (כמו כותרות, פסקאות, פריטי תפריט, …) תוכל להשתמש ביחידה היחסית "em" במקום "px". בדרך זו, אם ברצונך לשנות את גודל האתר שלך, יהיה עליך לשנות רק את גודל גופנו של הגוף. השוליים הוגדרו ל- 0 פיקסלים עבור כל ארבעת הצדדים של תג הגוף. זה נעשה כדי לוודא שהאתר ידבק לחלק העליון של החלון.

שלב 3: הוספת מיכל עם כותרת ותוכן

כעת נוסיף את המיכל. זוהי פשוט div מרוכז שיכיל את כל האתר שלנו. במיכל זה נוסיף עוד שתי divs; div תוכן וכותרת div. קובץ ה- html שלנו יראה כעת כך: test Header content נוסיף את הקוד הבא לקובץ css שלנו: div#container {width: 800px; שוליים: 0 פיקסלים אוטומטיים; רקע: #FFFFFF; ריפוד: 0px;} div#content {רוחב: 800px; ראש ריפוד: 100 פיקסלים; רקע: צהוב;} div#header {width: 800px; גובה: 100 פיקסלים; רקע: כחול; עמדה: מוחלטת; למעלה: 0px;}. clearfix: אחרי {content: "."; בלוק תצוגה; גובה: 0; תנקה את שניהם; visibility: hidden;}. clearfix {display: inline-block;}/* הסתר מ- IE Mac \*/. clearfix {display: block;} div#container פירושו שיש לנו תג div עם מזהה "container". נוסיף כמה צבעים ו"שוליים: 0 פיקסלים אוטומטיים; " כדי לוודא שהמיכל שלנו מרוכז בדף. עלינו לתת לתוכן ריפוד עליון ולכותרת ערך מוחלט עם "למעלה: 0 פיקסלים" כדי לוודא שהכותרת ממוקמת מעל התוכן האחר. לא אכפת לך הצבעים המכוערים. זה רק כדי להקל על קריאת הצבעים ולראות את המחלקות השונות. נזדקק לקוד התיקון המוזר הזה כדי לוודא שחלקי הניווט והתוכן שלנו (הוספו בשלב הבא) לא ייפלו מהחלק הסובב.

שלב 4: בצע שתי Divs ב- Div Content עבור ניווט ותוכן בפועל

כעת נוסיף שתי חטיבות נוספות בחטיבת התוכן. אחד לניווט ואחד לתוכן בפועל. בין תוכן התגים; תוסיף את הקוד החדש:

ניווט תוכן עיקרי נוסיף קוד css להצגת divs ניווט ותוכן ראשי; div#nav {width: 200px; לצוף: שמאל; רקע: כתום;} div#maincontent {width: 600px; לצוף: ימינה; רקע: ורוד;} שים לב לעובדה ששתי החטיבות הללו צפות. אם לא היינו שמים את קוד התיקון הנוסף הנוסף בשלב הקודם, החטיבות היו צפות מחוץ לחלק הסובב. בשיטת clearfix נוודא שזה לא יקרה.

שלב 5: הוסף כמה חטיבות נוספות למבנה בניווט

כעת נוסיף כמה divs נוספים לשני ה- "nav" כדי ליצור מבנה כלשהו בדף האינטרנט שלנו. שנה את פיסת הקוד הבאה:

• פו
• בָּר

כעת נפרסם פיסת קוד כדי להגדיר כיצד יש להציג את "navblock" div. שים לב של- navblock יש מחלקה, ולא מזהה. הסיבה לכך פשוטה; divs עם מזהה מוצגים פעם אחת בלבד (בלוק הניווט, הכותרת העליונה, התחתונה, …). ניתן להציג Divs עם שיעורים יותר מפעם אחת. כאן נשתמש בכיתה. למקרה שתרצה להוסיף בלוק ניווט נוסף מאוחר יותר on.div.navblock {width: 180px; שוליים: 5 פיקסלים אוטומטיים; border: 1px אדום מוצק;} אם נרצה להוסיף עוד בלוק ניווט, יהיה עליך להוסיף מבנה חדש … הקוד שלך ייראה כך;

• פו
• בָּר
• בו
• רָחוֹק

שלב 6: הוסף כמה חטיבות נוספות למבנה בתוכן הראשי

כעת נעשה את אותו הדבר עבור divcontent maincontent כעת נראה הקוד כך:

Lorem ipsum dolor sit amet,…

שוב, נוסיף פיסת קוד לקובץ ה- css שלנו כדי לקבוע כיצד יש להציג את div: div.contentblock {width: 580px; שוליים: 5 פיקסלים אוטומטיים; border: 1px white solid;} כעת נוכל להוסיף עוד גוש תוכן על ידי הוספת "…" נוספת בחטיבת maincontent כך;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

שלב 7: הפוך את האתר למעט פחות מכוער

עכשיו החלק המהנה; עכשיו שיש לנו את מבנה div הראשי, אנחנו יכולים לשנות את הצבעים למשהו קצת פחות כאוטי/מכוער/… פשוט שחקו עם הצבעים בקובץ css. להלן קובץ ה- HTML המלא של דף האינטרנט המוצג בתמונה: מבחן

• פו
• בָּר
• בו
• רָחוֹק

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Header וזה קובץ ה- css המלא: body {background: #444444; משפחת גופנים: ורדנה, אריאל, סאנס-סריף; צבע: #444444; גודל גופן: 12 פיקסלים; שוליים: 0px;} div#container {רוחב: 800px; שוליים: 0 פיקסלים אוטומטיים; רקע: #FFFFFF; ריפוד: 0px;} div#content {רוחב: 800px; ראש ריפוד: 100 פיקסלים; רקע: #FFFFFF;} div #header {width: 800px; גובה: 100 פיקסלים; רקע: #888888; עמדה: מוחלטת; למעלה: 0px;} div#nav {רוחב: 200px; לצוף: שמאל; רקע: #FFFFFF;} div #maincontent {width: 600px; לצוף: ימינה; רקע: #DDDDDD;} div.navblock {רוחב: 180 פיקסלים; שוליים: 5 פיקסלים אוטומטיים; גבול: 1px מוצק #DDDDDD;} div.contentblock {רוחב: 580px; שוליים: 5 פיקסלים אוטומטיים; border: 1px solid #FFFFFF;}. clearfix: אחרי {content: "."; בלוק תצוגה; גובה: 0; תנקה את שניהם; visibility: hidden;}. clearfix {display: inline-block;}/* הסתר מ- IE Mac \*/. clearfix {display: block;} אז עכשיו קיבלת את היסודות. כמובן שיש עדיין הרבה מה לערוך כמו צבעים, גדלי גופנים, בלוק ניווט שנראה טוב יותר … אבל ההנחיות האלה עוסקות רק במבנה div. אם אתה רוצה לראות הוראות קשורות אחרות, אתה תמיד יכול לשאול. נראה אם אוכל למצוא את הזמן.