X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

मुफ्त प्रीमियम प्रवेश

हमारे प्रीमियम हब लेख, परियोजना फ़ाइलें और से प्रत्येक ट्यूटोरियल वीडियो के पहले 10% के पूरे पुस्तकालय प्रवेश ऑनलाइन ट्यूटोरियल पुस्तकालय .

अपने मुफ़्त खाता बनाएँ!

Dreamweaver CS5: एक सूची से एक नेविगेशन मेनू का निर्माण
  • Dreamweaver CS5: एक सूची से एक नेविगेशन मेनू का निर्माण

Google अनुवाद के द्वारा अनुवादित

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

चरण 1 - एक सूची बनाएँ

यह हिस्सा आसान है: एक नया HTML फ़ाइल, कोई टेम्पलेट बनाएँ, और बस अपने मेनू में आइटम लिखें. के साथ प्रत्येक सूची आइटम संलग्न करें

तुम इस तरह से कुछ के साथ समाप्त करना चाहिए: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

हालांकि, आप यकीन है कि कुछ करने के लिए प्रत्येक आइटम लिंक बनाने के लिए यह महत्वपूर्ण हो के रूप में हम सीएसएस निर्माण करना चाहते हैं. तो, # चरित्र के लिए लिंक जोड़ने के लिए, कुछ इस तरह बना:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

चरण 2 - एक बाहरी सीएसएस फ़ाइल करने के लिए लिंक

सीएसएस पैनल में, पैनल (प्लस प्रतीक के साथ दस्तावेज़) के नीचे नई सीएसएस नियम बटन दबाएँ. navlist नाम के साथ एक आईडी शैली बनाएँ और एक नई स्टाइल शीट फ़ाइल बनाने के लिए चुनते हैं. जो संवाद प्रकट में, फ़ाइल नाम style.css . इसका हमेशा के लिए एक बाह्य शैली पत्रक का उपयोग करने के लिए सबसे अच्छा है, यहाँ तक कि जब प्रयोग.

हम संवाद है कि अगले प्रकट होता है का उपयोग कर कुछ को परिभाषित करने की आवश्यकता नहीं है, तो बस ठीक दबाएँ. तुम एक बुनियादी, रिक्त शैली परिभाषा के साथ एक शैली पत्रक बनाया है. यह सिर्फ आपके दस्तावेज़ के ऊपर style.css पर क्लिक करके देखें, पर प्रकाश डाला शब्दों स्रोत कोड करने के लिए अगले.

चरण 3 - कुछ बुनियादी सीएसएस नियम जोड़ें

हम निर्दिष्ट करते हैं कि सूची आईडी navlist है कि हम इसे लक्षित कर सकते हैं की जरूरत है. HTML में, जोड़ने id=navlist = navlist

अब हम सीएसएस पर जा रहा प्राप्त कर सकते हैं. तुम शायद पृष्ठभूमि रंग, चौड़ाई, बॉर्डर्स, और हाशिये समायोजित शुरू करने के लिए चाहते हैं, और youll के बारे में सोचते हैं कि आप कैसे सीएसएस चयनकर्ताओं का निर्माण करना चाहते हैं. यदि आप का उपयोग करें #navlist li , आप नेविगेशन सूची में सूची आइटम का उपयोग करें. और भी बेहतर, लक्ष्य #navlist li a अपनी सूची के अंदर लिंक को लक्षित करने के लिए . जोड़ना उन्हें padding के एक बड़ा लक्ष्य नहीं बनाता है, जबकि एक सूची आइटम के लिए पैडिंग जोड़ने. प्रयास करें:

# Navlist {

सूची शैली - प्रकार: कोई नहीं;

मार्जिन: 0;

padding: 0;

चौड़ाई: 200px;

}

# Navlist ली {

मार्जिन: 5px;

}

# Navlist ली एक {

पृष्ठभूमि रंग: # 222;

रंग: # Eee;

padding: 10px;

पाठ - सजावट: कोई नहीं;

प्रदर्शन: ब्लॉक;

}


#navlist li

अंत में,

चरण 4 - कुछ मंडराना सीएसएस नियम जोड़ें

सूची प्रतिक्रियाशील बनाने के लिए, एक मंडराना नियम जोड़ें:

# Navlist ली एक: मंडराना {

पृष्ठभूमि रंग: # 444;

रंग: ee2 #;

}

चरण 5 - सक्रिय पृष्ठ चिह्नित

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

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

मिलान सीएसएस:

Bodypage1 # page1 एक, # bodypage2 page2 एक, # bodypage3 page3 एक, # bodypage4 page4 एक, # bodypage5 एक page5 {

पृष्ठभूमि रंग: # 555;

रंग: ee2 #;

}

इस तरह, आप केवल प्रत्येक पृष्ठ पर शरीर टैग पर कक्षा बदलने की जरूरत है. डरपोक है, लेकिन यह काम करता है.

वहाँ कई, कई तरकीबें हैं, लेकिन अब के लिए सभी thats. जैसा कि आप तलाश सीएसएस वीडियो ट्यूटोरियल में देखा हो सकता है, क्षैतिज सूची बनाने, तुम सब की ज़रूरत है display: inline करने के लिए लागू li तत्व, ताकि पता लगाने अगर तुम चाहो. अगली बार, अच्छी तरह से कुछ अधिक विदेशी विकल्पों को देखो.

समाप्त product.png

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link