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

دسترسی به حق بیمه رایگان

دسترسی به کتابخانه تمام ما از مقالات توپی حق بیمه ، فایل های پروژه و اولین 10 ٪ از هر یک از مقالات ویدئو از کتابخانه خودآموز آنلاین.

ایجاد حساب کاربری رایگان شما در حال حاضر!

Dreamweaver را CS5 : ساختمان یک منوی ناوبری را از یک لیست
ترجمه شده توسط گوگل ترجمه

هنگامی که ساخت یک وب سایت بهترین عمل ، شما باید منو ناوبری با استفاده از لیست ها در صورت امکان ساخت. آنها معنایی دقیق (منو یک لیست است ، بعد از همه) و CSS باعث می شود آنها را به سبک آسان است. بیایید نگاهی به در چگونه یک لیست ناوبری این نسخهها کار میکند تحت هود. بیمار با استفاده از توان Dreamweaver را در نظر کد ، اما احساس به دنبال همراه با یک ویرایشگر متن راست اگر شما می خواهید.

مرحله 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 ، با فشار دکمه قانون جدید CSS در پایین پانل (سند با نماد به علاوه). ایجاد یک سبک ID با نام navlist و به ایجاد سبک جدید فایل جدول را انتخاب کنید. در گفت و گو که به نظر می رسد style.css فایل را ببندید. آن همیشه بهترین برای استفاده از CSS خارجی ، حتی زمانی که تجربه.

ما اصلا نیازی به تعریف هر چیزی را با استفاده از محاوره ای که به نظر می رسد آینده ، بنابراین فقط OK را فشار دهید. شما یک ورق سبک با یک پایه ، تعریف سبک و خالی ایجاد. از منظری دیگر به آن را با کلیک کردن بر روی Style.css را فقط در بالای سند خود را ، در کنار هایلایت کلمات کد منبع.

مرحله 3 -- اضافه کردن برخی از قوانین اساسی CSS

ما نیاز به مشخص می شود که این فهرست است navlist ID به طوری که ما می توانیم آن را مورد هدف قرار. در HTML ، با id=navlist navlist = به

در حال حاضر ما می توانید رفتن به CSS است. شما احتمالا می خواهید برای تنظیم رنگ پس زمینه ، عرض ، مرزها و حاشیه برای شروع ، و شما می خواهید به شما درباره نحوه ساخت انتخابگرهای CSS فکر می کنم. اگر شما با #navlist li navlist لی ، شما دسترسی به قلم دوم از اقلام لیست در لیست ناوبری. حتی بهتر ، هدف #navlist li a برای هدف قرار دادن لینک درون لیست شما. افزودن بالشتک به آنها باعث می شود یک هدف بزرگتر است ، در حالی که افزودن بالشتک به قلم دوم از اقلام لیست نمی. سعی کنید :

# navlist {

سبک لیست نوع هستند : هیچ کدام.

حاشیه : 0 ؛

بالشتک : 0 ؛

عرض : 200px ؛

}

# navlist لی {

حاشیه : 5px ؛

}

# navlist لی {

رنگ پس زمینه : # 222 ؛

رنگ : # EEE ؛

از Padding : 10px ؛

متن دکوراسیون : هیچ ؛

نمایش : بلوک ؛

}


#navlist li

در نهایت ،

گام 4 -- اضافه کردن برخی از قوانین CSS شناور

لیست واکنش پذیر تر ، اضافه کردن یک قانون شناور :

# navlist لی : شناور {

رنگ پس زمینه : # 444 ؛

رنگ : # ee2

}

گام 5 -- مارک صفحه فعال

رایج در این نوع از صفحات علامت گذاری به عنوان صفحه فعال با سبک کلاس متحرک ، به عنوان مثال برای کلاس = فعال ، که در صفحه جاری قرار می گیرد. با این حال ، این بدان معنی است که بلوک منو در هر صفحه متفاوت است. آن راحت تر به برچسب هر یک از لینک در HTML با یک کلاس متفاوت است ، و سپس یک کلاس صفحه ای خاص را به تگ body اضافه کنید ، و گرفتن همه آنها را با یک دستور CSS تنها. چیزی شبیه به این :

<body id="bodypage1">

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

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

CSS تطبیق :

# bodypage1. page1 ، # bodypage2 page2 ، # bodypage3 page3 ، # bodypage4 page4 ، # bodypage5 page5 {

رنگ پس زمینه : # 555 ؛

رنگ : # ee2

}

به این ترتیب ، شما فقط نیاز به تغییر کلاس در تگ body در هر صفحه است. اب زیر کاه است ، اما کار می کند.

هستند بسیاری ، بیشتر ترفندهای وجود دارد ، اما در حال حاضر به منم تمام می شود. همانطور که شما ممکن است در بررسی آموزش های ویدئویی CSS دیده می شود ، به فهرست افقی ، 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