Rollovers में Adobe Dreamweaver CS3

Abraham Chaffin


	[Rollovers in Adobe Dreamweaver CS3] ट्यूटोरियल : Adobe Dreamweaver ट्यूटोरियल Rollovers में Adobe Dreamweaver CS3

शीर्षकहीन दस्तावेज़ Image Rollovers in Adobe Dreamweaver CS3

इस ट्यूटोरियल उपयोगकर्ता का उपयोग कर अधिक नियंत्रण और लचीलापन देने के लिए डिज़ाइन किया गया है Dreamweaver CS3 इंटरफ़ेस छवि mouseovers बनाने के लिए. यह भी कैसे कहीं और वेब पेज पर और बाद में mouseover छवि लक्ष्य आवंटित करने के लिए मूल mouseover बटन करने के लिए एक mouseover सीएसएस शैली प्रदान सिखाऊँगी.

भाग 2 के कुछ छोटे tweaks के साथ अपने वेब पेज में Swf वीडियो को कैसे लागू करने के लिए पॉप शो की सुविधाओं में निर्मित Dreamweaver CS3.

इब्राहीम chaffin
Creativecow.net,
Cambria, कैलिफ़ोर्निया अमरीका

© 2007 Creativecow.net. सभी अधिकार सुरक्षित.

तो मैं एक है कि आप डाउनलोड कर सकते हैं कुछ शामिल है उसी आकार की कुछ तस्वीरें इस ट्यूटोरियल के लिए आवश्यक हैं यहां.

खुले html दस्तावेज़ में उपलब्ध कराई Dreamweaver CS3 और शुरू करते हैं.

1) पहले हम कुछ बुनियादी mouseover छवियों पैदा करेगा. इस डालने मेनू में जाना छवि वस्तुओं rollover छवि. छवि का नाम है कि उस छवि को खोजने के लिए इस्तेमाल करेगा बनाया होगा क्या जावास्क्रिप्ट है. Image1 एक अच्छा नाम है. प्रयोग 1.मूल छवि और 1 के लिए jpg-पर.इस rollover छवि के रूप में gif. इस प्रीलोड rollover छवि बॉक्स की जाँच रखना. वैकल्पिक पाठ और url arn't महत्वपूर्ण के रूप में हम वेब पर इस डाल करने या किसी अन्य पृष्ठ स्थान पर ले जा रहा arn't तो प्रेस ठीक है.

2) नव डाला rollover छवि और दोहराने कदम 1 बगल में क्लिक करें और अधिक डालने के लिए / सभी rollover छवियों की. बस 2s आदि के साथ 1s में कदम एक की जगह.

अब तुम कुछ rollover छवियाँ. सहेजें और पूर्वावलोकन आपके html फ़ाइल और आपको लगता है कि वे rollover अच्छी तरह से देख सकेंगे. लेकिन क्या अगर आप वास्तव में छवि है कि आप पर चल रही है चाहता था एक बड़े छवि के ऊपर के रूप में प्रकट?

चलो rollover छवि बना देना एक अलग स्थान में पृष्ठ पर दिखाई. पहले हम एक placeholder छवि की जरूरत है कि भार है जब पेज लोड करने से पहले किसी भी rollovers घटित.

3) Placeholder डाला.इस चित्र के सामने अपने कर्सर के साथ वापस दबाव के अनुसार हमारी rollover छवियों ऊपर gif और फिर डालने के लिए जा रही छवि, Placeholder चुनें.Gif और प्रेस ठीक है.

Image Name

4) अब हम इस छवि को नाम करने के लिए कि स्क्रिप्ट इसे प्राप्त कर सकते हैं की जरूरत है. इस placeholder छवि का चयन करें, इस चौड़ाई और ऊंचाई मापदंडों प्रकार की छवि को नाम के लिए "लक्ष्य" में छोड़ दिया करने के लिए गुण विंडो में.

5) इस rollover छवियों के लिए लक्ष्य बताए काफी सरल है. खिड़की मेनू करने के लिए जा रहा द्वारा behaviors खिड़की खुली behaviors.

6) पहली छवि (image1) पर क्लिक करें और आप दो behaviors इसे करने के लिए आवंटित देखना चाहिए.
a onmouseout | स्वैप छवि बहाल
a onmouseover | स्वैप छवि
हम दूसरे की छवि को 'स्वैप छवि "पर डबल क्लिक करें तो बात करने के लिए स्वैप छवि व्यवहार समायोजित करना चाहते हैं. इस स्वैप छवि विंडो में पाठ के लिए जो "1 होना चाहिए सेट स्रोत का चयन करना.इसलिए इसे हटा gif "और यह कटौती. चुनें छवि "लक्ष्य" और पेस्ट "1-पर.Gif "क्षेत्र और प्रेस करने के लिए सेट स्रोत में ठीक.

7) तुम इतना डाला सभी rollover छवियों के लिए दोहराने कदम 6 कि उन सभी छवि 'लक्ष्य' के नाम करने के लिए सेट कर दिया जाता है के लिए लक्ष्य. और फिर तुम क्या किया है देखने के लिए पूर्वावलोकन अपने काम को बचाने.

उसके बाद हम और फिर से अधिक लुढ़का हुआ अब क्या हुआ अगर हम बदलने के लिए छवि नहीं चाहता था उतर आया?

8) Image1 "पर क्लिक करें", स्वैप छवि पर क्लिक करें behaviors खिड़की में बहाल और चाबी को नष्ट प्रेस. (क्या आप फिर से अपने सभी rollover छवियों के लिए) इस कदम को दोहरा सकते हैं

अब यह है कि rollover छवि को rollover बटन देख रहे हैं और एक स्थान पर एक छोटा सा एकाकार हो रहा है. चलो कुछ सीएसएस styling आवंटित तो उन्हें और अधिक दिलचस्प बनाने लगते हैं.

9) इस सीएसएस खिड़की में है और नए CSS नियम बना देना. चयनकर्ता प्रकार कक्षा होगी, नाम "बटन" होगी और में परिभाषित: इस दस्तावेज़ को केवल. के एक छोटे से padding और 1 पिक्सेल का अदृश्य सीमा निर्धारित करते हैं. इस padding बॉक्स श्रेणी में है - 10 सभी पक्षों के लिए निर्धारित. इसी के साथ सभी "ठोस के लिए सीमा निर्धारित : 1 पिक्सेल : रंग # FFFFFF ". प्रेस ठीक है. (कारण हम एक अदृश्य सीमा सेट इतना जब हम जानते हैं कि बाद में हम अपने तत्वों की स्थिति बिगाड़ना नहीं चाहती एक सीमा बनाएगा एक नियम बना रही है.)

11) के लिए प्रत्येक rollover बटन गुण विंडो में "वर्ग" के रूप में बटन का चयन.

CSS Class Border

12) एक नए CSS नियम बनाने के लिए आवंटित किया जब rollover बटन या खत्म moused. बस उसी के रूप में कदम 9 इसे बनाने केवल इसे "buttonsover" कॉल, 10 पिक्सल की भराई, और एक सीमा "ठोस : 1 पिक्सेल : रंग # 990000 ".

13) "चुनें image1" फिर और behaviors खिड़की में ठीक क्लिक करें "स्वैप छवि" पर और चुन "" नई सूची आइटम जोड़ें. में बाएँ क्लिक करें नया a onmouseover अंतरिक्ष और प्रकार "image1.Classname = 'buttonsover' ". (यह भी अन्य सभी rollover छवियों के लिए दोहराया जा सकता है.)

14) इस a onmouseout क्षेत्र में behaviors विंडो में "image1 आवंटित.Classname = 'बटन' ". यह तब होता है जब आप माउस को कक्षा में उल्टा कर देगा. सभी rollover छवियों के लिए यह कर.

On Mouseover and on Mouseout

यह क्या आप rollover समारोह में साथ क्या कर सकते हैं और कुछ चीज़ें के बुनियादी विचार देना चाहिए Dreamweaver CS3.

भाग 2

इस ट्यूटोरियल के अगले भाग एक के एक सा है Dreamweaver एक Swf वीडियो प्रदर्शित करने के लिए हैक / वीडियो जब आप माउस एक और तत्व पर. संयोजन में कुछ अन्य साधारण कार्यों के साथ आप अपनी वेबसाइट के लिए कुछ अच्छा प्रभाव हो सकता है प्रयोग किया जाता. तुम्हें दिखाने के लिए istockvideo तरह एक गैलरी में आपका वीडियो इस प्रभाव का उपयोग कर सकते है.

पहले आप इस परियोजना फ़ाइलों को डाउनलोड करने की आवश्यकता होगी यहां.

फिल्म 1 फिल्म 2 फिल्म 3

वर्ग के लिए सामग्री "movinvis" यहाँ जाता है

इस ट्यूटोरियल के उद्देश्य जब तुम rollover एक तत्व एक वीडियो प्रदर्शित करने के लिए है. हम सीएसएस वर्गों है कि हम placeholder div इस ट्यूटोरियल में आवंटित करेगा बनाने से शुरू करने के लिए जा रहे हैं.

1) के सीएसएस खिड़की पर क्लिक करें "नए CSS शासन में" आइकॉन. चयनकर्ता प्रकार "वर्ग" हो जाएगा, कक्षा "movinvis के नाम कॉल" और यह इस दस्तावेज़ के लिए निर्मित किया जाना चाहिए ही.

2) के सीएसएस शासन परिभाषा विंडो में "श्रेणी में" स्थिति का चयन करने के लिए और स्थिति प्रकार सेट निरपेक्ष, दृश्यता को छुपाया, और z-सूचकांक करने के लिए 999. (निरपेक्ष स्थिति के वर्ग इसके आसपास अन्य तत्वों को धक्का नहीं देता है, और एक उच्च z-सूचकांक अन्य तत्वों के ऊपर के वर्ग रखा जाएगा.) प्रेस ठीक है.

3) फिर "एक नए CSS कदम 1 और 2 में केवल कक्षा" movvis के नाम सेट के रूप में एक ही नियम बनाने और दृश्य के लिए दृश्यता सेट.

4) के मेनू डालने जा रहा ने एक नया div डालने लेआउट वस्तुओं div टैग. अभी तक ठीक है और प्रेस को div लिए कोई गुण सेट नहीं है.

5) नव निर्मित div चुनें और गुण विंडो में "और" movinvis "करने के लिए कक्षा के div movtarget" करने के लिए चिह्न सेट.

अब यह है कि placeholder div हमारी फिल्मों है कि rollovers के लिए उपयोग किया जाएगा बटन बनाने हैं प्राप्त करने के लिए सेटअप है. हम सिर्फ पाठ का उपयोग करेगा सादगी के लिए इस बार.

6) जगह अदृश्य div और प्रकार के ऊपर अपने कर्सर "फिल्म 1" के पाठ का चयन करें, और यह एक हाइपरलिंक बनाना. "डाल #" फ़ाइल नाम या URL के रूप में. (आप स्थापना करने के लिए "फिल्म 2" के लिए और "फिल्म 3" के rollovers इस कदम को दोहरा सकते हैं

अगले हम कि हम div ने rollover लिंक्स का उपयोग करने के लिए प्रदान करना चाहते हैं फिल्मों डालने जाएगा. तो फिर हम अपने संपर्कों का div onmouseover करने के लिए उन्हें प्रदान करेगा. आखिर हम div केवल जब एक फिल्म का प्रदर्शन किया जा रहा है दिखता है तो कक्षाएं onmouseover और onmouseout प्रदान करेगा.

7) को डालें मेनू में जाना मीडिया Flash और rollover1 चुनें.Swf. प्रेस ठीक है.

8) चुनें नव डाला Flash वीडियो और दृश्य मेनू में जाना कोड. इस बीच कोड का चयन noscript और / noscript टैग और अपने क्लिपबोर्ड करने के लिए बाद में चिपकाया जा इसे कॉपी.

9) वापस देखने के लिए जा रहा द्वारा डिजाइन को देखने के लिए जाना डिज़ाइन. इस चुनें Flash वीडियो और इसे हटा.

10) को "फिल्म 1" लिंक और behaviors खिड़की में (+) व्यवहार बटन जोड़ने प्रेस चुनें. सेट पाठ का चयन कंटेनर के पाठ सेट. "movtarget" के कंटेनर div चुनें और में नकल कोड चिपकाएँ नए html मैदान.

11) के व्यवहार इस प्रभाव बनाने के लिए onmouseover घटना करने के लिए सेट किया गया सुनिश्चित करें. अगर आप घटना पर क्लिक और onmouseover ड्रॉपडाउन से चुन कर इसे बदल नहीं कर सकता था.

12) को "फिल्म 1" लिंक अभी भी चयनित साथ (+) "परिवर्तन संपत्ति" नामक एक और व्यवहार जोड़ें. बना "" div निश्चित तत्व के प्रकार है, और तत्व आईडी div "movtarget" है. इस "दर्ज चुनें:संपत्ति के लिए "रेडियो और प्रवेश" classname ". नए मूल्य और प्रेस के लिए ठीक है "movvis" दर्ज करें. यकीन है कि इस व्यवहार को onmouseover घटना को सौंपा है बनाना, अगर यह नहीं बदल.

13) "movinvis" और के रूप में onmouseout घटना करने के लिए कार्रवाई आवंटित केवल नए मूल्य प्रदान दोहराने कदम 12.

14) दोहराने कदम 7-13 को "फिल्म 2" और "फिल्म 3".

अब हम एक को जावास्क्रिप्ट पर कि परिवर्तन संपत्ति व्यवहार के लिए DW का उपयोग करता है वह रास्ते में है कि हम वर्ग बदलने के लिए इसे प्रयोग कर रहे हैं काम करने के लिए किराये का प्रदर्शन करेगा.

15) संपादन मेनू खोजने और बदलने के लिए जाना. में "" वर्तमान दस्तावेज़ ढूँढ़ने, खोज "स्रोत कोड", "obj खोज.शैली.", "obj की जगह.", और जावास्क्रिप्ट कोड में इस के दो उदाहरणों की जगह.

आप को बचाने के लिए और पूर्वावलोकन अपना काम अब तुम्हें क्या किया है देखने के लिए सक्षम होना चाहिए. इस तकनीक को एक पोजीशनिंग स्क्रिप्ट के साथ संयोजन के रूप में वहीं है जहाँ तुम चाहते हो Swf तैनात प्राप्त करने के लिए इस्तेमाल किया जा सकता है. या सेटअप अलग divs जहाँ आप विशिष्ट फिल्में चाहते हैं और जाने के लिए इस समारोह का लक्ष्य वहाँ. इस वही असर पाने के लिए अन्य तरीके हैं, लेकिन यह आसान सुविधाएँ सही में निर्माण के साथ इसे पाने के लिए एक से थोड़ा hacked रास्ता है Dreamweaver CS3.

मंचों • ट्यूटोरियल • पत्रिका • सेवाएँ • वीडियो • समाचार • ब्लॉग

© CreativeCOW.net सभी अधिकार सुरक्षित हैं.

क्रिएटिव समुदाय को दुनिया की

[चोटी]

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