بازدید: ٢۴١

ایجاد نوارهای پیمایش(آموزش HTML & CSS)

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

 

1- پوشه ای به نام Travel West در درون پوشه HTML Files ایجاد کنید.

2- در برنامه نت پد، یک صفحه خانگی به نام Traveling West on Vacation ایجاد کنید.

3- آن را به یک شیوه نامه (Format.css) لینک دهید.

4- صفحه خانگی را در پوشه Travel West خود ذخیره کنید.

5- بین تگ های body، یک لیست نامرتب ایجاد کنید:

 

نوار پیمایش

 

6- فایل format.css را از پوشه Travel باز کنید. آن را در پوشه Travel West ذخیره کنید.

7-در شیوه نامه format.css، یک قالب بندی را برای ناحیه جدیدی به نام topnav با خصوصیات background و Width ایجاد کنید.

 

قالب بندی topnav

 

8- فایل format.css را ذخیره کرده و فایل index.html را باز کنید.

9-یک لیست نامرتب در درون ناحیه topnav قرار دهید:

 

لیست نامرتب

 

10- فایل index.html را ذخیره کرده و سپس آن را در درون مرورگر باز کنید (از درون پوشه Travel west). باید شبیه به شکل زیر به نظر برسد:

 

بارگذاری مجدد ایندکس فایل

 

خصوصیت background:#cccccc در ناحیه topnav، پس زمینه لیست را به رنگ خاکستری در می آورد.

11- در فایل format.css یک قالب بندی را برای ناحیه جدید navbar اضافه کنید:

 

ناحیه جدید navbar

 

12- فایل format.css را ذخیره کنید.

13- فایل index.html را در نت پد باز کنید و لیست نامرتب موجود در navbar را تغییر شکل دهید:

 

لیست نامرتب موجود

 

14- فایل index.html را ذخیره کرده و مجددا در مرورگر بارگذاری کنید. باید شبیه به شکل زیر به نظر برسد:

 

نوارهای پیمایش

 

خصوصیت list-style:none در ناحیه navbar بولتها را از کنار گزینه های لیست حذف می کند. توجه داشته باشید که خصوصیات float:left و width:100% برای برخی از مرورگرهای وب مورد نیاز هستند تا پس زمینه خاکستری نوار را در کل راستای صفحه نشان دهند. در غیر اینصورت اگر از آن استفاده نکنیم ممکن است بصورت زیر نمایش داده شوند:

 

خصوصیات float

 

15- در شیوه نامه format.css، قالب بندی زیر را برای آیتم های لیست (li) درون لیست navbar اضافه کنید:

 

لیست li

 

16- فایل format.css را ذخیره کنید. مجددا فایل Index.html را در مرورگر بارگذاری کنید. باید شبیه به شکل زیر به نظر برسد:

 

نوارپیمایش بعد از اجرا

 

خصوصیت display:inline در قالب بندی navbar li آیتم های لیست را به صورت افقی (به جای عمودی) مرتب می کند.

17- در فایل Index.html، کلمات California، The Rockies و The Midwest را به فایلهای California.html، rockies.html و Midwest.html لینک دهید.

 

کلمات لینک داده شده

 

18- در فایل format.css، یک قالب بندی را برای این لینک ها در درون برچسبهای li اضافه کنید:

 

قالب بندی برای لیست

 

19- فایل format.css را ذخیره کنید. مجددا index.html را در مرورگر بارگذاری کنید. باید شبیه به شکل زیر به نظر برسد:

 

بارگذاری مجدد و نهایی نوار پیمایش

 

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

طراحی سایت و سئو توسط ضابط