Rollovers ב Adobe Dreamweaver CS3

Abraham Chaffin


	[Rollovers in Adobe Dreamweaver CS3] הדרכות : Adobe Dreamweaver הדרכות Rollovers ב Adobe Dreamweaver CS3

Untitled Document Image Rollovers in Adobe Dreamweaver CS3

הדרכה זו נועדה להעניק למשתמש שליטה רבה יותר וגמישות באמצעות Dreamweaver CS3 ממשק ליצור תמונה mouseovers. כמו כן, ילמד כיצד להקצות את העכבר על התמונה כדי לכוון למקום אחר בדף האינטרנט ולאחר מכן להקצות העכבר CSS סגנון למקור לחצן העכבר.

חלק 2 מראה כיצד לשלב קטעי וידאו pop up Swf לתוך דף האינטרנט שלך עם מספר הקטינים tweaks מבונה של התכונות Dreamweaver CS3.

אברהם chaffin
CreativeCow.net,
Cambria, קליפורניה, ארה"ב

© 2007 CreativeCow.net. כל הזכויות שמורות.

כמה תמונות של אותו גודל הנדרשת עבור הדרכה זו, כך כללתי כמה שאתה יכול להוריד כאן.

לפתוח את html מסמך שסופק Dreamweaver CS3 ו הבה נתחיל.

1) תחילה אנו תיצור כמה בסיסיים עם העכבר על התמונות. עבור אל תפריט הוספה תמונה אובייקטים תמונת Rollover. שם התמונה הוא מה JavaScript שייווצר יהיה להשתמש כדי למצוא את התמונה. Image1 הוא בסדר שם. 1 שימוש.Jpg של התמונה המקורית 1 ו-Over.GIF בתור תמונת Rollover. לשמור את תמונת Rollover preload תיבת בדק. את הטקסט החלופי ואת כתובת האתר arn't חשוב כפי שאנו arn't יהיה לשים את זה באינטרנט או לקחת אותך לדף אחר כך מיקום הקש אישור.

2) לחץ לצד החדש הוכנס Rollover התמונה וחזור על שלב 1 להכניס יותר / Rollover את כל התמונות. רק להחליף את 1s בשלב אחד עם 2s וכו '.

כעת יש לך כמה תמונות Rollover. שמור את התצוגה המקדימה html קובץ ותראה שהם Rollover יפה. אבל מה אם אתה רוצה באמת יש את התמונה שאתה גלגול מעל להופיע בתור תמונה גדולה יותר מעל?

נעשה את תמונת Rollover להופיע במיקום אחר בדף. ראשית אנחנו צריכים מקום התמונה טוען כי כאשר הדף נטען לפני כל rollovers להתעורר.

3) לשים מקום.GIF מעל Rollover תמונות שלנו על ידי לחיצה חוזרים עם הסמן את מול את התמונות ולאחר מכן הולך להכניס תמונה, בחר מקום.GIF ולחצו אישור.

Image Name

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

5) הקצאת היעד Rollover עבור תמונות היא פשוטה למדי. התנהגויות לפתוח את החלון על ידי לחיצה על התפריט לחלון התנהגויות.

6) לחץ על התמונה הראשונה (image1) ואתה אמור לראות שני התנהגויות שהוקצתה לה.
a onmouseout | להחליף תמונה לשחזר
a onmouseover | להחליף תמונה
אנחנו רוצים לשנות את אופן הפעולה להחליף תמונה של הצבע על התמונה אחר כך לחץ לחיצה כפולה על "להחליף תמונה". להחליף את התמונה בחלון בחר להגדיר את המקור על טקסט שאמור להיות "1-Over.GIF "ופצע אותו כך הוא מסיר את זה. בחר תמונה "היעד" והדבק "1-Over.GIF "בחר את המקור לתוך השדה ולחצו על אישור.

7) חזור על שלב 6 כל Rollover עבור תמונות אתה מוכנס כך היעד עבור כל אותם הוא בחר את התמונה בשם "יעד". תצוגה מקדימה ולאחר מכן שמור את העבודה שלך, כדי לראות את מה שעשית.

עכשיו מה אם אנחנו לא רוצים לשנות את התמונה אחרי מגולגל למעלה ואז הגיע ממני?

8) לחץ על "image1", התנהגויות של חלון לחץ על התמונה להחליף לשחזר ולחצו על מקש Delete. (אתה יכול לחזור על פעולה זו שוב את Rollover עבור כל התמונות)

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

9) ב CSS ליצור חלון הבה וחדשים CSS שלטון. בחירת סוג יהיה בכיתה, שם יהיה "כפתורים" ולהגדיר ב: מסמך זה בלבד. הבה בחר קטן הריפוד ואת נראית הגבול של 1 פיקסל. הריפוד הוא תחת הקטגוריה התיבה - כדי להגדיר את זה 10 עבור כל הצדדים. בחר את הגבול עם אותו לכל "סולידי : 1 פיקסל : צבע # FFFFFF ". הקש אישור. (הסיבה קבענו גבול בלתי נראה כל כך כאשר אנו יוצרים בדרך כלל זה יהיה מאוחר יותר ליצור גבול אנחנו לא רוצים לסלף את המיקום של אלמנטים.)

11) עבור כל כפתור Rollover לבחור את הכפתורים כמו "הכיתה" של נכסים חלון.

CSS Class Border

12) ליצור CSS כלל להיות שהוקצה כאשר Rollover כפתורים או מעל moused. זה פשוט ליצור זהה בשלב 9 רק קוראים לזה "buttonsover", הריפוד של 10 פיקסלים, וכן גבול "סולידי : 1 פיקסל : צבע # 990000 ".

13) בחר "image1" שוב התנהגויות של החלון לחץ לחיצה ימנית על "להחליף תמונה" ובחר "הוסף פריט רשימה חדש". עזבו קליק החדש a onmouseover שטח וסוג "image1.Classname = 'buttonsover' ". (זה גם יכול להיות שוב ושוב עבור כל שאר Rollover תמונות.)

14) בתוך החלון של התנהגויות a onmouseout השדה להקצות "image1.Classname = 'כפתורים' ". זו יהפכו את הכיתה לחזור כאשר העכבר מחוץ. לעשות את זה כל Rollover עבור תמונות.

On Mouseover and on Mouseout

זה אמור לתת לך את הרעיון הבסיסי של כמה דברים שאתה יכול לעשות עם פונקציות Rollover Dreamweaver CS3.

חלק 2

את החלק הבא של הדרכה זו היא קצת של Dreamweaver גרזן להציג Swf וידאו / Videos כאשר העכבר מעל אלמנט אחר. השתמשו בשילוב עם כמה פונקציות פשוטות אחרות אתה יכול לקבל קצת די מגניב אפקטים עבור אתר האינטרנט שלך. אתה יכול להשתמש כדי להציג את ההשפעה של גלריה קטעי וידאו כמו istockvideo האם.

ראשית יהיה עליך להוריד את קבצי הפרויקט כאן.

סרט 1 הסרט 2 הסרט 3

תוכן השיעור "movinvis" ממוקמת כאן

מטרת הדרכה זו היא להציג וידאו Rollover כאשר רכיב. אנחנו הולכים להתחיל על ידי יצירת כיתות CSS שאנחנו תקצה את זה בכל מקום div הדרכה.

1) ב-CSS את החלון לחץ על "חדש CSS הכלל" סמל. בחירת סוג יהיה "הכיתה", קוראים את שם הכיתה "movinvis" ועל זה יש ליצור מסמך זה בלבד.

2) ב CSS כלל הגדרה חלון בחר באפשרות "מיקום" קטגוריה בחר את המיקום ואת סוג מוחלטת, עד ראייה מוסתר, ו-Z כדי לאינדקס 999. (המיקום המוחלט עושה הכיתה לא לדחוף אלמנטים אחרים סביבו, ו-Z גבוה במדד יהיה שם את השיעור על גבי אלמנטים אחרים.) הקש אישור.

3) שוב ליצור CSS שלטון זהה בשלבים 1 ו 2 רק להגדיר את שם הכיתה "movvis" ולהגדיר את הנראות כדי גלוי.

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

5) בחר החדשה שנוצרה div וכן להגדיר את המאפיינים של חלון div מזהה "movtarget" ו הכיתה כדי "movinvis".

עכשיו, כי הוא מקום div לקבל את תוכנית ההתקנה של סרטים בואו ליצור את הכפתורים כי ישמש עבור rollovers. זה הזמן בפשטות אנו פשוט להשתמש בטקסט.

6) למקם את הסמן מעל נראית div והקלד "סרט 1", בחר את הטקסט, ולהפוך אותו hyperlink. שמו "#" כמו שם הקובץ או את כתובת האתר. (אתה יכול לחזור על שלב זה על תוכנית ההתקנה של rollovers עבור "סרט 2" ו "סרט 3"

הכנס הבא יהיה לנו את הסרטים שאנחנו רוצים להקצות את Rollover div באמצעות קישורים. אז נמשיך להקצות להם את div onmouseover שלנו קישורים. סוף סוף אנו מקצים את הכיתות onmouseover ו onmouseout div כך היא נראית רק כאשר הסרט המוצג עתה.

7) עבור אל תפריט הוספה מדיה Flash ולבחור rollover1.Swf. הקש אישור.

8) בחר את החדשות הוכנסה Flash וידאו עבור אל תפריט תצוגה קוד. בחר את הקוד בין noscript ו / noscript תגיות ולהעתיק אותו את הלוח כדי להדביק להיות מאוחר יותר.

9) נחזור להציג עיצוב על ידי לחיצה על תצוגה עיצוב. בחר את Flash וידאו ולמחוק את זה.

10) בחר את "סרט 1" וכן קישור של התנהגויות הקש את חלון (+) להוסיף כפתור התנהגות. בחר להגדיר טקסט בחר טקסט המכיל. בחר את מכיל div "movtarget" ולהדביק את הקוד לתוך מועתקים החדש html שדה.

11) לוודא את התנהגות נקבע על onmouseover אירוע זה על מנת ליצור אפקט. אם זה לא היה ניתן לשנות אותה על ידי לחיצה על האירוע ובחירת onmouseover מן הנפתחת.

12) עם "1 הסרט" הקישור עדיין נבחר (+) להוסיף התנהגות אחרת המכונה "שינוי נכס". לוודא את סוג האלמנט הוא "div", וכן הוא מזהה רכיב div "movtarget". בחר "Enter:"רדיו עבור נכס והזן" classname ". הזן "movvis" עבור הערך החדש ולחצו אישור. ודא התנהגות זו מוקצה ל onmouseover האירוע, אם לא ישנה את זה.

13) חזור על שלב 12 רק להקצות ערך חדש בשם "movinvis" והקצה הפעולה של האירוע onmouseout.

14) חזור על שלבים 7-13 כדי "סרט 2" ו "סרט 3".

כעת אנו מבצעים גרזן על JavaScript כי dw משתמש עבור נכס לשנות התנהגות כדי לגרום לזה לעבוד על הדרך שבה אנחנו משתמשים בו כדי לשנות את שיעורי.

15) עבור אל תפריט עריכה חיפוש והחלפה. למצוא ב "המסמך הנוכחי", חיפוש "קוד המקור", למצוא את "obj.סגנון.", החלף את "obj.", ולהחליף את שני המופעים של זה של קוד JavaScript.

אתה אמור להיות מסוגל לשמור את העבודה ו 'תצוגה מקדימה' כדי לראות את מה שעשית. טכניקה זו ניתן להשתמש בשילוב עם המיקום סקריפט Swf לקבל את מיקומו בדיוק איפה אתה רוצה את זה. Setup divs או אחר שבו אתה רוצה את הסרטים ספציפי ולכוון את האירוע ללכת לשם. יש דרכים אחרות להשיג את אותה השפעה, אבל זה מעט hacked דרך לקבל את זה פשוט עם תכונות בנוי ימין לתוך Dreamweaver CS3.

פורומים • הדרכות • מגזין • שירותים • קטעי וידאו • חדשות • בלוגים

© CreativeCOW.net כל הזכויות שמורות.

Creative קהילות של העולם

[מוביל]

English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español