בעת תכנון אתרים, לעתים קרובות עליכם לפתור שאלה מהותית: מה תהיה התנהגות הדף כאשר הוא נפתח ברזולוציות מסך שונות? יש כאן שתי אפשרויות - דפי אתר "גומי" (מתיחה) או סטטי. האפשרות הראשונה תידון. לא משנה מה העדפתך לפריסה, עיקר העיצוב של מתיחה הוא מדרגיות יחסית.
זה הכרחי
- - ידע ב- HTML;
- - תוכנית לעריכת קוד HTML.
הוראות
שלב 1
בחר את הקובץ הראשי עבור תבנית האתר שלך, אשר ישקף את הסימון הראשי. זה יכול להיות קובץ index.html או index.php. אחת התוכנות הטובות ביותר לעריכת תבניות אתרים חזותיים היא Macromedia Dreamweawer. העריכה הדרושה תעשה על בסיס תוכנית זו.
פתח את קובץ התבנית או צור קובץ חדש לפי הפקודה "קובץ" - "חדש", קטגוריה - "דף בסיס" - "HTML" או קטגוריה "דף דינמי" - "PHP". כאן אנו רואים את המקרה הכללי כאשר מבנה האתר מתועד בדיוק באחד משני הקבצים.
שלב 2
זה זמן רב לא היה סוד שיש סוגים שונים של פריסה - על שולחנות, על בלוקים div ומשולבים (טבלאות ובלוקים בו זמנית). תג ה- html אחראי על פריסת הטבלה
ציין אחוז (100%) עבור כל נכס. זה ישיג את ההשפעה של מתיחה אוטומטית של תאי שולחן על מסכים עם כל גאומטריה. זה יכול להיות צג 19 אינץ 'או טלפון חכם - כל אחד מהם ישחזר נכון את התוכן.
שלב 3
אם עליך לציין בדיוק את ההתאמה בין תאי הטבלה, השתמש בדוגמה הבאה:
| … … תוכן התא 1. … | … … תוכן התא 2. … |
כאן תראה שאחד התאים מוגדר עם רוחב של 30% מכל מה שמוגדר לטבלה עצמה. חישוב פשוט מראה ש- 100% -30% = 70% נשארים לתא השני. זכור שבמקרה זה אסור לקבוע את אחד המאפיינים של תאי הטבלה. הדפדפן יבצע את כל החישובים בכוחות עצמו וימתח נכון את הטבלה בתאים. תוכן בתוך טבלאות גם יתמתח ויתכווץ כראוי על פני מסכים שונים.
שלב 4
במצב עם פריסת div, גושי התגים נמתחים כברירת מחדל לרוחב המסך המלא ועוקבים בזה אחר זה משמאל לימין, מלמעלה למטה. כדי לחדד את הגיאומטריה שלהם, צור מחלקה או מזהה CCS (ID), שבו אתה מציין, למשל, את התכונות ו / או עבור קטגוריית הגודל והמיקום של התיבה (תיבה). אל תשכח לקשר את הסגנון שצוין לקובץ הסימון לאתר ולקשור את הכיתה (ID) לתג הרצוי. בדרך כלל הוא ממוקם בתחילת התסריט, ומגדיר את כל הגיאומטריה העתידית של האתר:
… … תוכן האתר. …
או ככה:
… … תוכן האתר. …
הקוד לכלל CSS יהיה כדלקמן:
… הכיתה שלי {
רוחב: 30%;
גובה: 50%;
}
#התעודת זהות שלי {
רוחב: 30%;
גובה: 50%;
}
