CSS मूल में Adobe Dreamweaver

html और सीएसएस Basics में ट्यूटोरियल Adobe Dreamweaver

इस ट्यूटोरियल में सीएसएस का उपयोग करने की अवधारणा लागू करने के लिए डिज़ाइन किया गया है Adobe Dreamweaver और html जो जाल में सीएसएस के साथ डिजाइन परिचित नहीं हैं वेब डिजाइनरों के लिए. Cascading शैली पत्रक के लिए सीएसएस खड़ा है और अपने वेब पेज और वेब पेज सामग्री के styलीng जोड़ने के लिए एक प्रणाली है.

इस सीएसएस तुम कैसे में सीएसएस का उपयोग करने का एक मूल भावना होनी चाहिए ट्यूटोरियल पढ़ने के बाद Dreamweaver. में हम एक रिक्त दस्तावेज़ इस ट्यूटोरियल बनाएगा, सीएसएस styलीng बनाएँ, इस पृष्ठ पर डालने आ div, एक छवि डालने, और फिर एक त्वरित नेविगेशन मेनू बनाने और आवंटित सीएसएस गुण पृष्ठ के तत्वों को. कार्यक्रम इस ट्यूटोरियल और स्क्रीनशॉट है में प्रयुक्त Adobe Dreamweaver CS3.

इब्राहीम chaffin Creativecow.net, Cambria, कैलिफ़ोर्निया अमरीका © 2007 Creativecow.net. सभी अधिकार सुरक्षित.

html दस्तावेज:
अपना काम शुरू करने के लिए इसे बचाना और फिर एक नया रिक्त दस्तावेज़ बनाएँ. मैं इससे पहले कि मैं तो मैंने जल्दी से समय समय (cntrl + को शॉर्टकट का उपयोग करने से बचा सकता है कुछ भी कर हमेशा दस्तावेजों को बचाने के लिए हैं ओं). जब आप एक रिक्त दस्तावेज़ में पैदा Dreamweaver अपने वेब पेज पहले से ही में सामग्री है, तुम सिर्फ डिज़ाइन मोड में नहीं देख सकते. आप (cntrl + ~) डिजाइन मोड और कोड मोड या दृश्य मेनू में जाना कोड या दृश्य मेनू के बीच स्विच करने के लिए डिजाइन को शॉर्टकट का उपयोग कर सकते हैं सामग्री देखने के लिए.

आप इस तरह कुछ दिखना चाहिए क्या देखना चाहिए:

इस की शुरुआत रूपरेखा है और आपके html दस्तावेज, यह कई टैग के साथ बनाया गया है. प्रत्येक टैग की शुरुआत की तरह दिखता है यह और हर टैग के अंत जैसी दिखती है / इस. पूरे दस्तावेज से बना है html इसे ऊपर टैग की तरह लगती है html xmlns = " http://www.W3.org / 1999/xhtml " क्योंकि इसमें एक xmlns आपरिवर्तक है. अंत टैग दस्तावेज़ के बहुत नीचे पर है / html. के बीच में शुरू और समाप्त html टैग वहाँ दो प्राथमिक टैग के head और शरीर टैग कर रहे हैं. इस head टैग, देखा नहीं है, लेकिन कई आवश्यक भागों और संशोधक के शरीर टैग तत्वों कैसा दिखेगा के लिए आपूर्ति. इस शरीर टैग में सामग्री है कि वास्तव में दिखाई देता है कि सामग्री को अपने ब्राउज़र के माध्यम से होता है.

CSS तत्वों:
इससे पहले कि हम किसी भी तत्व के एक सीएसएस शैली बना दो डालने. दबाव (SHIFT + F11) के सीएसएस शैलियों फ्रेम या मेनू को संशोधित सीएसएस शैलियों में जाने toggles. नीचे में वहाँ एक छोटा सा आइकन है कि लगता है जैसे . यह एक € œnew ruleâ € संवाद बॉक्स CSS लाता है. चलो शरीर टैग के लिए एक CSS शासन प्रदान करते हैं शुरू करने के लिए और पृष्ठभूमि रंग एक दूर के बजाय सफेद बना एक सफेद निरा. इस "चयनकर्ता के प्रकार को चुनने के लिए" टैग "" रेडियो. इस "टैग" ड्रॉपडाउन मेनू से "चयनकर्ता को" शरीर चुनें. "केवल" के लिए "" रेडियो और क्लिक करें "ठीक है" को परिभाषित इस दस्तावेज़ का चयन करें.

"ठीक है" क्लिक एक बार आपके पास Dreamweaver कोड में कहते हैं आपके html इस शरीर टैग सीएसएस का उपयोग करते हुए संशोधित करने के लिए तैयारी कर फाइल.

यह भी तुम वर्ग कॉलम से "पृष्ठभूमि" में से चुनें आपके और पृष्ठभूमि रंग बीनने या के साथ एक बहुत ही हल्के पीले रंग का चयन को परिभाषित करने के लिए अनुमति देता है "बातचीत खिड़की शरीर के लिए" सीएसएस शासन परिभाषा को लाएगा # ffffcc और प्रेस में टाइप "ठीक है".

निष्पादित "ठीक है" दबाव Dreamweaver इस सीएसएस शरीर को संशोधित करने के लिए चयनकर्ता एक पृष्ठभूमि डालने से रंग संपत्ति और एक मूल्य के # ffffcc.

वहाँ तुम्हारे शरीर चयनकर्ता के लिए निर्दिष्ट कर सकते हैं या आप इसे सीएसएस शैलियों फ्रेम का उपयोग करते हुए संशोधित कर सकता है अन्य कई गुण हैं:

Div टैग:
वापसी (cntrl + ~) दृश्य डिजाइन करने के लिए है और डालने मेनू करने जा द्वारा एक div टैग डालने दो लेआउट वस्तुओं div टैग, यह â € œinsert div tagâ € संवाद बॉक्स को लाएगा. (div टैग्स एक वेब पेज सीएसएस के साथ डिजाइन में विभिन्न तत्वों को पकड़ने के लिए सबसे अधिक इस्तेमाल किया टैग; हैं छवियों जैसे, पाठ, या वीडियो.)

इस "डालने div टैग में पहली क्षेत्र" संवाद बॉक्स में सम्मिलित है: मैदान. यह है कि जहां div टैग इस में डाला जाएगा designates क्षेत्र है html पृष्ठ. डिफ़ॉल्ट रूप से इसे "करने के लिए जो जहाँ आपका कर्सर पिछले वेब पृष्ठ में रखा गया था डाला जाएगा div टैग मतलब घुसाव बिंदु" पर सेट. तुम भी "टैग के शुरू होने के बाद" या "टैग के अंत से पहले" एक अलग स्थान पर अपने div टैग जगह करने के लिए चुन सकते हैं.

अगले आप "वर्ग खोज:"क्षेत्र जो कि सीधे अपने सीएसएस के नियमों से संबंधित एक क्षेत्र है. एक CSS वर्ग ऐसी "के रूप में सामने एक अवधि के साथ एक चयनकर्ता है.वर्ग". कक्षा एक वेब पेज में कई मदों के लिए एक जायदाद या संपत्ति प्रदान करने के लिए उपयोग किया जाता है. इसलिए हम अभी तक प्रदान कर सकते हैं कुछ भी नहीं है हम नहीं कक्षाएं अभी तक इस दस्तावेज़ में परिभाषित किया है. इस "आईडी:क्योंकि वहाँ कोई आईडी हमारे सीएसएस में परिभाषित कर रहे हैं "क्षेत्र में भी खाली है. आईडी एक आइटम के लिए एक वेब पेज में एक जायदाद या संपत्ति प्रदान करने के लिए और सीएसएस कोड में एक पाउंड पर हस्ताक्षर किया है पहले यह ऐसी "के रूप में उपयोग किया जाता है# आईडी". इन पर क्लिक करें "नए सीएसएस शैली के बाद से हमारे पास न तो" का है और हम एक नया नियम परिभाषित करेगा.

इस बार का चयन इस प्रकार चयनकर्ता के रूप में "वर्ग", इस प्रकार के रूप में "Coolवर्ग", "" सिर्फ "और प्रेस" ठीक है इस दस्तावेज़ का चयन करें. एक शांत नीले रंग के साथ इस वर्ग की पृष्ठभूमि का रंग निर्धारित श्रेणियों के अंतर्गत "पृष्ठभूमि" का चयन और कुछ करने के लिए # 00ccff की तरह "पृष्ठभूमि रंग" सेटिंग द्वारा दो. अब एक पतली काला लाइन के लिए श्रेणी के रूप में "सीमा" पर क्लिक करके और फिर ड्रॉप डाउन और चौड़ाई और काले रंग (# 000000) रंग रूप के रूप में 1 पिक्सेल से शैली के रूप में ठोस चुन सीमा रंग सेट. यदि आप चुनते हैं या आप अधिक रचनात्मक किया जा सकता है. अब हमारे शासन में "शीर्ष के लिए श्रेणी के कॉलम और प्रकार में" बॉक्स "" 5 "पर क्लिक करके एक छोटी Padding सेट करते हैं: Padding "इस शीर्ष के लिए है, लेकिन अगर आप को छोड़ सभी पक्षों के लिए" सभी "बॉक्स के लिए जाँच उसी को गद्दी नहीं प्रदान करेगी. प्रेस "ठीक है" और Dreamweaver तीन गुणों के साथ अपने सीएसएस शैली टैग में एक नया वर्ग नियम बनाएगा.

अपने "अब भी अपने वर्ग क्षेत्र cooltag" के साथ बसा "है" संवाद बॉक्स div टैग डालें - प्रेस "ठीक है" और Dreamweaver अपने वेब पेज में नए div टैग अंदर जगह धारक पाठ के साथ कोड लिख देंगे.

इस div हमारी क्लास कि हम div टैग और टैग के अंदर सभी तत्वों को सौंपा बनाया होगा.

छवियाँ:
अब की एक छवि डालने और यह करने के लिए हमारे वर्ग प्रदान करते हैं.
इस div बाहर कहीं के वेब पेज के अंदर बाहर पर क्लिक करके अपने कर्सर डाला. इस डालने मेनू से छवि के लिए (cntrl + ALT + जाओ मैं). आप अपने कंप्यूटर और प्रेस पर "ठीक है" उपलब्ध हो सकता है किसी छवि का चयन. आप "ठीक है" मारकर अगले संवाद बॉक्स बायपास कर सकते हैं; Dreamweaver अपने वेब पेज में छवि जगह करेगा. छवि पर राइट क्लिक करें और मेनू सीएसएस शैलियों से चुनें Coolवर्ग. इस छवि को पूर्व परिभाषित वर्ग प्रदान करेंगे, यह रंग पृष्ठभूमि दे, Padding, और हम के लिए 'नियत सीमा.Coolवर्ग". Adobe Dreamweaver इस कोड डालने के समान होना चाहिए:

सीएसएस की शक्ति:
क्या सीएसएस शक्तिशाली बनाता है की क्षमता वापस जाने के लिए और एक बार अपनी शैली में परिवर्तन कर दें और यह आप की शैली में नियुक्त सभी तत्वों असर है. इस सीएसएस शैलियों फ्रेम में आप "" और अपनी शैली "सभी नियमों देखना चाहिए.Coolवर्ग". इस पर क्लिक करें .पृष्ठभूमि के लिए कीमत पर Coolवर्ग चयनकर्ता और फिर-(# 00ccff) रंग. एक अलग रंग का चयन रंग बीनने का उपयोग, (# 66ffff) जैसे. तुम अब सफलतापूर्वक में सीएसएस का प्रयोग कर रहे हैं Dreamweaver. बदल गया है कि एक ही कोड के सीएसएस में था और इसे करने के लिए आवेदन किया था दोनों div और img.

एक त्वरित मेनू नव निर्माण
हम दूर यह टूट जाएगा और इसे बनाने एक नेविगेशन सूची में div टैग में सामग्री अब के साथ.

अपनी ही पंक्ति पर आपके कर्सर inbetween प्रत्येक शब्द के साथ दर्ज करें दबाव द्वारा प्रत्येक शब्द डाल. तब चयन सूची सभी शब्दों और ठीक क्लिक करें उजागर unordered सूची. अब तुम एक बुलेटेड सूची है, लेकिन हम तो हम एक नियम बनाने की ज़रूरत है इसे करने के लिए कुछ styलीng लागू करने की आवश्यकता है.

इस सीएसएस बटन पर क्लिक करें जोड़ें इस सीएसएस शैलियों फ्रेम से. इस सूची के लिए शैली आवंटित करने के लिए कई तरीके हैं, हम एक नई श्रेणी की तरह कुछ "यह फोन का सृजन किया जा सकता."लीstवर्ग और प्रत्येक के लिए इसे लागू ली टैग ली बनाने वर्ग="लीstवर्ग" , लेकिन हम सभी के लिए एक नियम बना देगा इस उदाहरण के लिए ली टैग. चयनकर्ता के क्षेत्र में "उन्नत चुनें" रेडियो और प्रकार "ली". "सूची के लिए" ली है. "" सिर्फ "और प्रेस" ठीक है इस दस्तावेज़ का चयन करें.

की गोली निकाल देना, इस फ़ॉन्ट रंग सफेद और फ़ॉन्ट वजन बोल्ड कर. इस प्रकार की श्रेणी में "वजन" ड्रॉप डाउन और सफेद (# FFFFFF चुनने से बोल्ड चुन चयनित) रंग के साथ. से सूची श्रेणी "ठीक है" को "प्रकार" ड्रॉपडाउन और प्रेस से कोई नहीं चुनें. Adobe Dreamweaver यह है कि प्रभावित करता है कि सीएसएस में निर्मित कोडलीटैग.

इस आइटम के रूप में आप उन पर माउस बदलना चाहिए एक उचित नव मेनू है. हम एक व्यवहार जोड़ने की जरूरत है ऐसा करने के लिए. खिड़की मेनू में जाना behaviors (SHIFT + F4). इस "" बटन सभी घटनाओं दिखाने पर क्लिक करके सभी घटनाओं शो . सुनिश्चित करें कि आपके कर्सर एक सूची आइटम में व्यवहार सूची आइटम और न कुछ और करने के लिए लागू किया जाता है तो है. इस onmouseover क्षेत्र के प्रकार में यह.Classname = '' Coolवर्ग. "इस" टैग करने के लिए "ली" वर्गname उल्लेख आप वर्गname को बदलना चाहते हैं ब्राउज़र कहता है Coolवर्ग. इस onmouseout क्षेत्र के प्रकार में यह.Classname ='' (है कि दो 'के निशान नहीं एक बोली है). यह ब्राउज़र इस टैग को वापस ली जब माउस तत्व से बाहर कुछ भी नहीं करने के लिए कदम के वर्ग नाम वापसी बनाता है. अब तुम एक आइटम की सूची में एक व्यवहार लगाया है.

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

इससे पहले कि हम इस तरह इसे सामान्य नेविगेशन तरह की सूची के ऊपर चला जाता है हम एक हाथ करने के लिए कर्सर सेट चाहिए ट्यूटोरियल ख़त्म होगा.
इस सीएसएस शैलियों में चुन ली फ्रेम. "ली" के लिए "संपत्तियों के नीचे वहाँ एक" पर "लिंक पर क्लिक करें और संपत्ति को जोड़ने के लिए ड्रॉप डाउन से" कर्सर 'को चुना है. मूल्य के रूप में "सूचक" में टाइप अगर यह presets में नहीं है.

निष्कर्ष
प्रेस F12, और तुम क्या किया है की जाँच करें. शायद यह भी सुंदर नहीं लगेगा, लेकिन यह आप कैसे सीएसएस में महसूस एक देना चाहिए Dreamweaver के साथ काम करता है html और क्या यह आपके ब्राउज़र में है.

आसपास खेलने और मज़ा करने के लिए याद रखना!