All Articles Dreamweaver
Dreamweaver CS5: एक सूची से एक नेविगेशन मेनू का निर्माण
Iain Anderson on Sat, January 7th | 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

जब सबसे अच्छा अभ्यास एक वेबसाइट का निर्माण, आप अपने नेविगेशन मेनू का निर्माण सूचियों का उपयोग यदि संभव हो तो चाहिए. 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

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: