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

الوصول الحر بريميوم

وصول إلى مكتبة والمواد برمتها محور بريميوم ، ملفات المشاريع ، وأول 10 ٪ من كل فيديو تعليمي من دروس المكتبة على الانترنت .

إنشاء حسابك المجاني الآن!

دريمويفر 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

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