הולך מן הטבלאות . (חלק 1 - יצירת פריסת שלך) תגובות 24 אוקטובר 2008 על ידי בריידי Feiereisel · 3 
באז זה פוסט 
Digg This Post 
Reddit 
למעוד פוסט
אישור, מה שאנחנו יהיה להשיג כאן הוא לוקח פריסת פוטושופ שלך ומיפוי אותו עם CSS - div של טבלאות, במקום ברירת המחדל של ה-HTML של פוטושופ -. כדי להצליח בשיעור זה אתה צריך כבר לדעת קידוד HTML ו-CSS קצת ניסיון הוא גם מועיל.
מאפשר להתחיל עם הבסיס. במקום להשתמש ב-HTML באמצעות תאי הטבלה להחזיק תמונות רקע שלנו כדי ליצור את הפריסה, נהיה באמצעות <div> זה אשר יכול לפעול באותה דרך, אבל הם הרבה יותר קל לערוך ולעצב לכל <div> נהיה מצרף מזהה את זה, אז הם אתר יודע איך לעצב את התא. אז את הפורמט של קידוד ה-HTML עכשיו id="idname <div here"> </ div>. עכשיו יש לנו כדי להגדיר את הפרמטרים עבור התא המתאים מזהה כי שם, זה נכנס פנימה של התג <head>.
החל אותה, אני מגדיר את צבע הרקע ואת התמונה. עבור זה אחד החלטתי להשתמש
הנמצא ב http://urbanm.net/blog/bg.jpg, את קידוד CSS עבור זה
הגוף (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
צבע רקע: # 010066;
)
מה זה עושה הוא הגדרת כל היבט HTML כי היה מקודד עם <body> לקבל את תמונת הרקע לחזור עליו עצמי אופקית עד ממלא את הדפדפן כולו, את תמונת הרקע להתאים התחתון של הגרדיאנט שמנו תמונה שלנו, כך יש להעביר את חלקה.
אתה צריך משהו כמו זה
עכשיו אנחנו צריכים לדאוג לתוכן הממשי של האתר. אני בדרך כלל לשמור על מרכז הכל מיושר, ולכן אתה צריך ישר למרכז הכל בתוך אלמנט <body> שלך. ניתן להוסיף <center> לאחר <body>. אז עכשיו הגוף שלך ב-HTML צריך להיראות כמו בצע:
<body>
<center>
</ center>
</ body>
זמן לשים את הבאנר שלנו על האתר. אנחנו צריכים ליצור את התא כי תקיים את הבאנר, בין ur <center> התגים מאפשר להזין התא הראשון שלנו על ידי הנחת <div id="banner"> </ div> שם. מבלי להגדיר את הפרמטרים כדי ID שכותרתו "באנר" שום דבר לא יופיע, ולכן אנחנו חייבים להגדיר את הפרמטר של התא זה עם CSS. אני יהיה באמצעות התמונה הבאה כבאנר שלי.
כרזה # (
background-image: url (http://urbanm.net/blog/banner.png);
גובה: 200px;
width: 800px;
)
מה האמור לעיל הוא אומר זה כל אובייקט HTML אשר מזהה את התווית של הבאנר יהיה את תמונת הרקע לעיל, והיא תצטרך גם את הגובה והרוחב של התמונה באנר אשר במקרה 200px על ידי 800px. האתר שלנו הוא מרים עכשיו, עכשיו הוא צריך משהו דומה כמו זה.
עכשיו אני בדרך כלל לשים את סרגל הניווט, אבל אני נדון זה צעד חלק 2 של מדריך זה.
דילוג על סרגל הניווט, עוברים את תיבות תוכן אשר יחזיקו כל המידע שלנו. כאשר אתה עושה התמונה שלך, זוכרת את הרצון שלך להיות שחבור זה ב 3 מקומות שונים, החלק העליון, אשר יכיל את הכותרת, לי אני מעריץ של פינות מעוגלות. אחוי 2 תהיה לך תהיה תמונה התוכן יהיה חוזר על עצמו בצורה אנכית על מנת למלא את החלל שמילאת את כל הפרטים שלך. חבור 3 התחתונה היא, שוב אני מעריץ של פינות מעוגלות. הנה שלוש תמונות השתמשתי בחלק זה. כותרת - תוכן Repeater - תחתונה.
כאשר היא כל להרכיב אותו בצורות תיבה זו. עכשיו צריך להגדיר את קידוד ה-HTML, כך שהוא מאפשר את התמונות כדי ליצור את תיבת כראוי. אנחנו תהיה באמצעות ארבעה תאים סה"כ לטופס תיבת התוכן שלנו. הראשון של ארבע הולך להחזיק את שלושת התאים בתוכו. מטרתו של התא הזה, אתה תבין מאוחר יותר עם יותר הבנה, אבל זה יהיה בעצם מאפשרים לך לשנות את סגנונות הטקסט על הדפים השונים אתה עושה אם יהיה צורך. כך מאפשר להפעיל את ה-HTML, זה ה-HTML חדשה.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
עכשיו יש לנו את התאים להגדיר כמו שאנחנו רוצים, אבל עכשיו אנחנו צריכים להגדיר את הפרמטרים מזהה עבור כל תווית. זה צריך להיראות משהו כזה.
indexcontent # (
display: block;
רוחב: 600px;
)
# # כותרת indexcontent (
גובה: 35px;
רוחב: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
# # contentbg (indexcontent
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
גובה: 150px;
רוחב: 600px;
)
# # תחתונה indexcontent (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
גובה: 37px;
רוחב: 600px;
)
וואו - זה הרבה כדי להיות עושה צעד אחד נכון? תן לי להסביר לך את זה ואת לעזור לך.
החל indexcontent #, אנו קובעים את רוחב אותו 600px וזה מה התמונות תוכן התיבה שלי. אנחנו לא להגדיר את גובה, כך שניתן להרחיב ולכווץ תלוי כמה תוכן יש לך בתאים שלך בתוכו. אנו מגדירים את התצוגה כדי לחסום, כך ירחיב את התא לסכום הנכון של פיקסלים על גובה שלה.
הבא לנו את indexcontent # # בכותרת, את הממדים מוגדרים להתאים את גודל התמונה ויש לנו להגדיר את תמונת הרקע על המיקום הנכון.
ממה שיש לנו indexcontent # # contentbg, יש לנו את התמונה הנכונה שנבחרה כתמונת רקע שלנו, ואנחנו צריכים להגדיר אותו repeat-y, כך שהוא חוזר על עצמו בצורה אנכית כדי להתאים את גודל התא. הרמתי 150px על גובה שלה, רק אז אתם יכולים לראות את ההשפעה חוזרת, לך תשנה את זה כדי להתאים את כל התוכן שיש לך בתוך זה.
לבסוף, יש לנו תחתונה indexcontent # #, וזה בדיוק כמו בכותרת.
עכשיו אתה צריך הפריסה הבסיסית שלך להגדיר לך לגמור!
Stay tuned for Part 2, כדי להסביר איך לעשות את סרגל הניווט.
תגובות
3 תגובות ל "יוצאים מן הטבלאות . (חלק 1 - יצירת פריסת שלך) "
תגובות 24 אוקטובר 2008 על ידי בריידי Feiereisel · 3 באז זה פוסט Digg This Post Reddit למעוד פוסט
אישור, מה שאנחנו יהיה להשיג כאן הוא לוקח פריסת פוטושופ שלך ומיפוי אותו עם CSS - div של טבלאות, במקום ברירת המחדל של ה-HTML של פוטושופ -. כדי להצליח בשיעור זה אתה צריך כבר לדעת קידוד HTML ו-CSS קצת ניסיון הוא גם מועיל.
מאפשר להתחיל עם הבסיס. במקום להשתמש ב-HTML באמצעות תאי הטבלה להחזיק תמונות רקע שלנו כדי ליצור את הפריסה, נהיה באמצעות <div> זה אשר יכול לפעול באותה דרך, אבל הם הרבה יותר קל לערוך ולעצב לכל <div> נהיה מצרף מזהה את זה, אז הם אתר יודע איך לעצב את התא. אז את הפורמט של קידוד ה-HTML עכשיו id="idname <div here"> </ div>. עכשיו יש לנו כדי להגדיר את הפרמטרים עבור התא המתאים מזהה כי שם, זה נכנס פנימה של התג <head>.
החל אותה, אני מגדיר את צבע הרקע ואת התמונה. עבור זה אחד החלטתי להשתמש
הנמצא ב http://urbanm.net/blog/bg.jpg, את קידוד CSS עבור זה
הגוף (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
צבע רקע: # 010066;
)
מה זה עושה הוא הגדרת כל היבט HTML כי היה מקודד עם <body> לקבל את תמונת הרקע לחזור עליו עצמי אופקית עד ממלא את הדפדפן כולו, את תמונת הרקע להתאים התחתון של הגרדיאנט שמנו תמונה שלנו, כך יש להעביר את חלקה.
אתה צריך משהו כמו זה
עכשיו אנחנו צריכים לדאוג לתוכן הממשי של האתר. אני בדרך כלל לשמור על מרכז הכל מיושר, ולכן אתה צריך ישר למרכז הכל בתוך אלמנט <body> שלך. ניתן להוסיף <center> לאחר <body>. אז עכשיו הגוף שלך ב-HTML צריך להיראות כמו בצע:
<body>
<center>
</ center>
</ body>
זמן לשים את הבאנר שלנו על האתר. אנחנו צריכים ליצור את התא כי תקיים את הבאנר, בין ur <center> התגים מאפשר להזין התא הראשון שלנו על ידי הנחת <div id="banner"> </ div> שם. מבלי להגדיר את הפרמטרים כדי ID שכותרתו "באנר" שום דבר לא יופיע, ולכן אנחנו חייבים להגדיר את הפרמטר של התא זה עם CSS. אני יהיה באמצעות התמונה הבאה כבאנר שלי.
כרזה # (
background-image: url (http://urbanm.net/blog/banner.png);
גובה: 200px;
width: 800px;
)
מה האמור לעיל הוא אומר זה כל אובייקט HTML אשר מזהה את התווית של הבאנר יהיה את תמונת הרקע לעיל, והיא תצטרך גם את הגובה והרוחב של התמונה באנר אשר במקרה 200px על ידי 800px. האתר שלנו הוא מרים עכשיו, עכשיו הוא צריך משהו דומה כמו זה.
עכשיו אני בדרך כלל לשים את סרגל הניווט, אבל אני נדון זה צעד חלק 2 של מדריך זה.
דילוג על סרגל הניווט, עוברים את תיבות תוכן אשר יחזיקו כל המידע שלנו. כאשר אתה עושה התמונה שלך, זוכרת את הרצון שלך להיות שחבור זה ב 3 מקומות שונים, החלק העליון, אשר יכיל את הכותרת, לי אני מעריץ של פינות מעוגלות. אחוי 2 תהיה לך תהיה תמונה התוכן יהיה חוזר על עצמו בצורה אנכית על מנת למלא את החלל שמילאת את כל הפרטים שלך. חבור 3 התחתונה היא, שוב אני מעריץ של פינות מעוגלות. הנה שלוש תמונות השתמשתי בחלק זה. כותרת - תוכן Repeater - תחתונה.
כאשר היא כל להרכיב אותו בצורות תיבה זו. עכשיו צריך להגדיר את קידוד ה-HTML, כך שהוא מאפשר את התמונות כדי ליצור את תיבת כראוי. אנחנו תהיה באמצעות ארבעה תאים סה"כ לטופס תיבת התוכן שלנו. הראשון של ארבע הולך להחזיק את שלושת התאים בתוכו. מטרתו של התא הזה, אתה תבין מאוחר יותר עם יותר הבנה, אבל זה יהיה בעצם מאפשרים לך לשנות את סגנונות הטקסט על הדפים השונים אתה עושה אם יהיה צורך. כך מאפשר להפעיל את ה-HTML, זה ה-HTML חדשה.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
עכשיו יש לנו את התאים להגדיר כמו שאנחנו רוצים, אבל עכשיו אנחנו צריכים להגדיר את הפרמטרים מזהה עבור כל תווית. זה צריך להיראות משהו כזה.
indexcontent # (
display: block;
רוחב: 600px;
)
# # כותרת indexcontent (
גובה: 35px;
רוחב: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
# # contentbg (indexcontent
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
גובה: 150px;
רוחב: 600px;
)
# # תחתונה indexcontent (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
גובה: 37px;
רוחב: 600px;
)
וואו - זה הרבה כדי להיות עושה צעד אחד נכון? תן לי להסביר לך את זה ואת לעזור לך.
החל indexcontent #, אנו קובעים את רוחב אותו 600px וזה מה התמונות תוכן התיבה שלי. אנחנו לא להגדיר את גובה, כך שניתן להרחיב ולכווץ תלוי כמה תוכן יש לך בתאים שלך בתוכו. אנו מגדירים את התצוגה כדי לחסום, כך ירחיב את התא לסכום הנכון של פיקסלים על גובה שלה.
הבא לנו את indexcontent # # בכותרת, את הממדים מוגדרים להתאים את גודל התמונה ויש לנו להגדיר את תמונת הרקע על המיקום הנכון.
ממה שיש לנו indexcontent # # contentbg, יש לנו את התמונה הנכונה שנבחרה כתמונת רקע שלנו, ואנחנו צריכים להגדיר אותו repeat-y, כך שהוא חוזר על עצמו בצורה אנכית כדי להתאים את גודל התא. הרמתי 150px על גובה שלה, רק אז אתם יכולים לראות את ההשפעה חוזרת, לך תשנה את זה כדי להתאים את כל התוכן שיש לך בתוך זה.
לבסוף, יש לנו תחתונה indexcontent # #, וזה בדיוק כמו בכותרת.
עכשיו אתה צריך הפריסה הבסיסית שלך להגדיר לך לגמור!
Stay tuned for Part 2, כדי להסביר איך לעשות את סרגל הניווט.
האם אנשים עדיין משתמשים בתג? למה לא להשתמש ב-CSS למרכז התוכן?
^ זה צריך להיות תג במרכז.
הפוסט באמת הגיוני לי ... אבל אם אתה מנסה לבדוק כמה מדריכי וידאו שלי בקשר ל-CSS ... זה בטוח תלמד ... יותר מזה ...