All Articles 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.

عند بناء موقع على شبكة الانترنت لأفضل الممارسات ، يجب بناء بلدكم القوائم الملاحة باستخدام قوائم إذا كان ذلك ممكنا. انهم دقيقة غويا (أ القائمة هي قائمة ، بعد كل شيء) والمغلق يجعلها سهلة الاسلوب. دعونا نلقي نظرة على كيف يمكن لقائمة الملاحة تعمل تحت غطاء محرك السيارة. سوء تستخدم دريمويفر في عرض المدونة ، ولكن لا تتردد في متابعة مع محرر النص مباشرة اذا كنت ترغب في ذلك.

الخطوة 1 -- بناء على قائمة

هذا الجزء من السهل : إنشاء ملف HTML جديد ، أي قالب ، واكتب ببساطة العناصر الموجودة في القائمة الخاصة بك. أرفق مع كل بند من بنود قائمة

يجب أن ينتهي مع شيء من هذا القبيل : <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

ومع ذلك ، كنت ترغب في التأكد من كل بند وصلات إلى شيء سيصبح مهمة ونحن نبني على CSS. لذا ، إضافة وصلات إلى الحرف # ، لخلق شيء من هذا القبيل :

<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 -- وصله إلى ملف CSS خارجي

في لوحة المغلق ، اضغط على الزر القاعدة CSS جديدة في أسفل لوحة (وثيقة مع رمز زائد). إنشاء نمط معرف بالاسم navlist واختر لإنشاء ورقة نمط جديد ملف. في مربع الحوار الذي يظهر ، اسم ملف style.css . في وسعها دائما لاستخدام ورقة أنماط خارجية ، حتى عندما يجرب.

نحن لا حاجة لتحديد أي شيء باستخدام مربع الحوار الذي يظهر بجانب ، لذلك فقط اضغط على موافق. خلقت يوول ورقة الاسلوب مع الأساسية ، وتحديد نمط فارغة. مشاهدته من خلال النقر على style.css فقط فوق المستند ، بجانب القانون وأبرز المصدر الكلمات.

الخطوة 3 -- إضافة بعض القواعد الأساسية CSS

نحن بحاجة إلى تحديد أن لديه قائمة navlist معرف حتى نتمكن من استهدافه. في HTML ، إضافة id=navlist لل

الآن يمكننا الحصول على الذهاب على CSS. فأنت تريد على الارجح الى تعديل لون الخلفية ، والعرض ، والحدود والهوامش لتبدأ ، ويوول ترغب في التفكير في كيفية بناء محددات CSS. إذا كنت تستخدم #navlist li ، فسوف الوصول إلى عنصر قائمة في قائمة الملاحة. حتى أفضل ، والهدف #navlist li a لاستهداف الروابط داخل القائمة. إضافة الحشو لهم يجعل هدف أكبر ، في حين اضاف الحشو إلى عنصر قائمة لا. محاولة :

{# navlist

قائمة على النمط من نوع : لا شيء ؛

هامش : 0 ؛

الحشو : 0 ؛

العرض : 200px ؛

}

# navlist لى {

هامش : 5PX ؛

}

# navlist لى {

لون الخلفية : # 222 ؛

اللون : # المعدات الكهربائية والإلكترونية ؛

الحشو : 10px ؛

النصوص الديكور : لا شيء ؛

عرض : كتلة ؛

}


و

و #navlist li

أخيرا ،

الخطوة 4 -- إضافة بعض القواعد تحوم CSS

لجعل القائمة أكثر تفاعلية ، إضافة قاعدة تحوم :

# navlist لى : {تحوم

لون الخلفية : # 444 ؛

اللون : # ee2 ؛

}

الخطوة 5 -- وضع علامات على الصفحة النشطة

مشروعها المشترك في هذه الأنواع من صفحات للاحتفال الصفحة النشطة مع نمط الطبقة المنقولة ، لفئة سبيل المثال = النشطة ، والتي يتم وضعها على الصفحة الحالية. ومع ذلك ، فإن هذا يعني أن كتلة القائمة مختلفة على كل صفحة. على نحو أكثر ملاءمة لوضع علامة كل ارتباط في HTML مع فئة مختلفة ، ثم تضاف طبقة صفحة معينة إلى العلامة الجسد ، وقبض عليهم جميعا مع قاعدة CSS واحد. شيء من هذا القبيل :

<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 A {

لون الخلفية : # 555 ؛

اللون : # ee2 ؛

}

بهذه الطريقة ، تحتاج فقط لتغيير الطبقة على هيئة علامة على كل صفحة. متستر ، ولكنه يعمل.

هناك الكثير ، العديد من الحيل أكثر من ذلك ، ولكن هذا كل الآن. كما كنت قد رأيت في البرنامج التعليمي استكشاف الفيديو المغلق ، لجعل قائمة أفقية ، كل ما عليك هو 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: