יסודות ב CSS Adobe Dreamweaver

html ו CSS בסיסי הדרכה ב Adobe Dreamweaver

הדרכה זו נועדה להציג את העקרונות של שימוש ב-CSS Adobe Dreamweaver ו html עבור מעצבי אינטרנט שאינם מכירים ב-CSS של עיצוב אתרים. CSS stands for cascading גיליון סגנונות והיא מערכת להוספת סגנון לדפי האינטרנט שלך ואת תוכנו של דף אינטרנט.

לאחר קריאת CSS של מורה זה יהיה לך תחושה בסיסית של אופן השימוש ב-CSS Dreamweaver. הדרכה זו אנו ליצור מסמך ריק, ליצור סגנון CSS, הכנס AA div לדף, להוסיף תמונה, ולאחר מכן ליצור תפריט ניווט מהיר והקצה CSS נכסים של אלמנטים בדף. התוכנית המשמש הדרכה זו היא ולכידות מסך Adobe Dreamweaver CS3.

אברהם chaffin CreativeCow.net, Cambria, קליפורניה, ארה"ב © 2007 CreativeCow.net. כל הזכויות שמורות.

html מסמכים:
ליצור מסמך ריק ולאחר מכן שמור אותו כדי להתחיל את העבודה שלך. אני נוטה תמיד לשמור מסמכים לפני שאני עושה משהו כל כך מהר אני יכול לשמור מפעם לפעם באמצעות קיצורי הדרך (cntrl + S). כאשר אתה יוצר מסמך ריק Dreamweaver דף האינטרנט שלך כבר יש בו תוכן, אתה פשוט לא יכול לראות את זה במצב 'עיצוב'. כדי להציג את התוכן ניתן להשתמש הקיצורים (cntrl + ~) כדי לעבור בין מצב עיצוב קוד מצב או עבור אל תפריט תצוגה קוד או תפריט תצוגה עיצוב.

אתה צריך לראות מה צריך להיראות משהו כזה:

זוהי תחילתה של מסגרת שלך html המסמך, אלא היא בנוי של רבים תגיות. ההתחלה של כל תג נראה זה ואת הסוף של כל תג נראה / זו. כל מסמך מורכב של html תג לעיל נראה html xmlns = " http://www.W3.org / 1999/xhtml " מאחר xmlns משנה בו. בסופו של דבר הוא תג מאוד בבית התחתון של המסמך / html. בין את ההתחלה ואת הסוף html תג הראשית יש שני תגים head את התגים ואת גוף. התג head לא ראיתי, אבל מספקת רבים וכן משני חלקים חיוניים עבור מה גוף תג אלמנטים ייראו. את התוכן של התג הוא גוף התוכן כי הוא למעשה גלוי באמצעות הדפדפן.

CSS אלמנטים:
לפני הכנס כל האלמנטים הבה ליצור סגנון CSS. לחיצה (SHIFT + F11) toggles סגנונות CSS את המסגרת או עבור אל תפריט שינוי CSS Styles. בחלקו התחתון הימני יש קצת סמל זה נראה כמו . זה מביא את œnew CSS € â € ruleâ תיבת דו שיח. כדי להתחיל הבה להקצות CSS הכלל עבור התג גוף ולהפוך את צבע הרקע של לבן במקום הנחה של כליל לבן. בחר "תג" של "בחירת סוג" רדיו. את "תג" התפריט הנפתח בחר את "הגוף" בורר. לבחור "מסמך זה רק" בשביל "על הגדר" רדיו ולחץ על "אישור".

לאחר לחיצה על "אישור" Dreamweaver מוסיף קוד שלך html הכנת קובץ שינוי תג גוף באמצעות CSS.

זה יהיה גם להעלות את "שלטון CSS הגדרה עבור הגוף" דיאלוג חלון המאפשר לך לבחור את הגדר של "רקע" מן סוג העמודה ולבחור מאוד אור צהוב עם צבע רקע או קוטף הקלד # ffffcc ולחצו "OK".

לחיצה על "אישור" הפועל Dreamweaver כדי לשנות את הגוף CSS בורר על ידי הוספת צבע רקע - נכס ו ערך של # ffffcc.

יש הרבה נכסים אחרים ניתן להקצות את הגוף בורר או אתה יכול לשנות אותו באמצעות CSS סגנון מסגרת:

Div תגים:
לחזור אל תצוגת עיצוב (cntrl + ~) ו הבה הכנס div תג על ידי לחיצה על תפריט הוספה פריסת אובייקטים div תג, זה יביא את â € œinsert div tagâ € תיבת דו שיח. (div תגיות הן הנפוץ ביותר תג להחזיק אלמנטים שונים בדף אינטרנט מעוצבים עם CSS; כגון תמונות, טקסט, או קטעי וידאו.)

בשדה הראשון של "הכנס תג div" תיבת דו שיח הוספה: שדה. זהו תחום שבו designates div תג יוכנס ב html דף. כברירת מחדל, היא מגדירה אותו "נקודת ההוספה ב" כלומר את תג div יוכנס בו את הסמן האחרון היה למקם את דף האינטרנט. אתה יכול גם לבחור "לאחר תחילת תג" או "לפני תג הסיום של" לשים את תג div בכל מיקום אחר.

הבא שתמצא את "הכיתה:"תחום שהוא תחום נוגע ישירות CSS את הכללים. בכיתה א CSS יש בורר עם תקופה מול זה כמו ".מחלקה". שיעורי משמשים להקצות נכס או נכסים רבים פריטים בדף אינטרנט. אין לנו עדיין שיעורים המוגדרים במסמך זה אין שום דבר, כך שאנחנו עדיין יכולים להקצות. את "תעודת הזהות:"שדה ריק כי הוא גם שם הם לא מוגדר זיהויי שלנו CSS. זיהויי משמשים להקצות נכס או נכסים אחת היא פריט בתוך דף אינטרנט ב CSS את הקוד יש בק"ג להתחבר לפני כגון "# ID". מאז יש לנו אף אחד משני אלה, לחץ על "הסגנון החדש CSS" ואנו להגדיר כלל חדש.

זה הזמן לבחור "הכיתה" כמו בחירת סוג, הקלד "Coolמחלקה" בתור, בחר "זה רק מסמך" ולחצו "אישור". הבה בחר את צבע הרקע של הכיתה זה מגניב עם צבע כחול על ידי בחירה באפשרות "רקע" תחת הקטגוריות ואת הגדרת את "צבע הרקע" # למשהו כמו 00ccff. כעת בחר את צבע המסגרת של קו שחור רזה על ידי לחיצה על "הגבול", כפי הקטגוריה ולאחר מכן בחר את הסגנון מוצק כמו מן הנפתחת ו 1 פיקסל כמו רוחב ו שחור (# 000000) כמו צבע. או שאתה יכול להיות יותר יצירתי אם תבחר. עכשיו הבה בחר קצת הריפוד שלנו כלל על ידי לחיצה על "התיבה" בקטגוריה עמודה והקלד "5" של "למעלה: הריפוד "זו תקצה את הריפוד לא רק על הדף, אבל עבור כל הצדדים, אם תשאיר את" זהה עבור כל "תיבת בדק. לחץ על "אישור" ו Dreamweaver תיצור מחלקה חדשה כלל ב CSS את סגנון תג עם שלושה נכסים.

את "הכנס תג div" תיבת דו שיח עכשיו יש גם את הכיתה השדה עם אוכלוסייה "cooltag" - לחצו על "אישור" ו Dreamweaver ירשום את הקוד לתוך דף האינטרנט עם בעל המקום בתוך הטקסט החדש div תג.

Div זה יהיה הכיתה שלנו כי יצרנו שהוקצתה div לתייג את כל האלמנטים בתוך תג.

תמונות:
עכשיו בואו הכנס תמונה והקצה הכיתה שלנו אליו.
להציב את הסמן מחוץ div ידי לחיצה בכל מקום מחוץ אותה בתוך דף אינטרנט. מתוך תפריט הוספה עבור אל התמונה (cntrl + ALT + I). בחר כל התמונה ייתכן שיהיה זמין במחשב ולחצו על "אישור". אתה יכול לעקוף את תיבת הדיאלוג הבא על ידי להכות על "אישור"; Dreamweaver תציב את התמונה לתוך דף האינטרנט שלך. לחץ לחיצה ימנית על התמונה ובחר מהתפריט CSS סגנונות Coolמחלקה. זו תקצה את הכיתה מוגדרים מראש על התמונה, נותן לו את צבע הרקע, רפוד, ואת הגבול אנחנו שהוקצתה ".Coolמחלקה". Adobe Dreamweaver צריך להכניס קוד זה דומה:

העוצמה של CSS:
מה עושה עוצמה CSS הוא היכולת לחזור ולבצע שינויים של הסגנון שלך ברגע זה ויש להם השפעה שהוקצו לך את כל האלמנטים של הסגנון ל. ב CSS סגנונות המסגרת אתה צריך לראות את "כל הכללים" ואת הסגנון שלך ".Coolמחלקה". לחץ על .בורר Coolמחלקה ולאחר מכן על הערך של צבע הרקע (# 00ccff). בעזרת הבחירה לבחור את צבע בצבע שונה, כמו (# 66ffff). בהצלחה, עכשיו אתה משתמש ב-CSS Dreamweaver. רק את הקוד זה היה שונה היה ב CSS והיא מיושמת גם div ואת img.

יצירת תפריט מהיר nav
כעת, עם התוכן של תג div נמשיך לשבור את זה לבד ולהפוך אותו לתוך רשימת הניווט.

לשים כל מילה בשורה נפרדת על ידי לחיצה להזין את הסמן inbetween עם כל מילה. הדגש את כל המילים ואת הזכות לחץ ולאחר מכן בחר רשימה רשימת unordered. כעת יש לך רשימה עם תבליטים, אבל אנחנו צריכים לפנות קצת סגנון כדי כך שאנחנו צריכים ליצור שלטון.

לחץ על כפתור הוסף CSS מכיוון CSS סגנונות מסגרת. יש הרבה דרכים להקצות את הסגנון לרשימת, אנחנו יכולים ליצור מחלקה לקרוא לזה משהו כמו ".Listמחלקה "ולהחיל אותו על כל תג Li ביצוע Li מחלקה="Listמחלקה" , אבל בדוגמה זו אנו ליצור כלל עבור כל Li תגיות. בחר באפשרות "מתקדם" רדיו והקלד "Li" של בורר שדה. "Li" משמעו רשימה. בחר "זה רק מסמך" ולחצו "אישור".

בואו להסיר את הכדור, להפוך את צבע הגופן לבן ואת משקל גופן מודגש. עם סוג הקטגוריה שנבחרה מודגש לבחור את "משקל" הנפתחת ובחר לבן (# FFFFFF) עבור צבע. מתוך הרשימה ללא קטגוריה בחר את "סוג" הנפתחת ולחץ על "אישור". Adobe Dreamweaver הקוד שנוצר ב CSS שמשפיעים עלLiתג.

כדי שיהיה ראוי nav הפריטים בתפריט צריך לשנות תוך כדי העכבר עליהם. לשם כך אנו זקוקים כדי להוסיף התנהגות. עבור אל תפריט חלון התנהגויות (SHIFT + F4). הצג את כל האירועים, על ידי לחיצה על "הצג את כל האירועים" כפתור . לוודא את הסמן נמצא אחד את רשימת הפריטים, כך ההתנהגות מוחל על פריט ברשימה ולא משהו אחר. ב onmouseover סוג שדה זה.Classname = 'Coolמחלקה'. "זה" מתייחס התג "Li" מחלקהname אומר את הדפדפן שאתה רוצה כדי לשנות את מחלקהname Coolמחלקה. ב onmouseout סוג שדה זה.Classname ='' (זה שני 'סימנים לא ציטוט). זה עושה את דפדפן חזור הכיתה שמו של Li Tag לראש כלום כאשר העכבר עובר את אלמנט. יש לך עכשיו כדי להחיל על התנהגות פריט אחד ברשימה.

כדי לקבל את אופן הפעולה יחולו על כל מרכיבי עליך לחזור על השלבים הקודמים עם הסמן שלך בכל רשימת האלמנטים או להעתיק ולהדביק את הקוד בתצוגת קוד. את התוצאה הסופית קוד לצפות צריך להיראות ככה:

לפני סוף הדרכה זו אנו צריכים להגדיר את הסמן של היד כפי שהוא עובר על רשימת הניווט היה כמו בדרך כלל.
ב CSS לבחור סגנונות מסגרת Li. בחלק התחתון של "נכסים עבור" Li "קיימת" הוסף נכס "לחץ על הקישור ובחרו" הסמן "מן הנפתחת. הקלד "מצביע" בתור הערך אם הוא לא נמצא presets.

מסקנה
הקש f12 ולבדוק מה שעשית. זה סביר להניח שלא נראה יותר מדי יפה, אבל היא צריכה לתת לך להרגיש על אופן ב CSS Dreamweaver עם עובד html ומה עושה את זה בדפדפן שלך.

לשחק מסביב וזיכרו להיות כיף!