بازدید: ۴٠٨

انجام صفحه بندی (آموزش HTML & CSS)

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

 

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

2- در درون برنامه نت پد، یک صفحه خانگی(index.html) با عنوان Traveling Down South ایجاد کنید. توجه داشته باشید که صفحه خانگی(Home) جدید شما حاوی تمامی تگ های مورد نیاز باشد:

 

ناحیه صفحه بندی

 

3- آن را در پوشه Travel دخیره کنید.

4- در زیر تگ body، تگ div را اضافه کنید:

 

تگ div

 

5- خصوصیت جدید id=”link” را به آن اضافه کنید:

 

خصوصیت id=link

 

6- تگ div را ببندید:

 

بستن تگ div

 

7- کلمه Links را در بین تگ های div قرار دهید:

 

link در تگ div

 

8- صفحه را به شیوه نامه ای(Style Sheet) به نام format.css لینک دهید. دستورات شما باید شبیه به شکل زیر به نظر برسند:

 

شیوه نامه فایل format

 

در این صفحه ناحیه ای برای لینکهای پیمایشی وجود خواهند داشت. همچنین ناحیه ای برای محتویات صفحه وجود دارند.

 

صفحه لینکها

 

شما ناحیه ای برای لینکها ایجاد کرده اید:

 

ناحیه ای برای لینکها

 

9- ناحیه ای را ایجاد کنید که حاوی محتویات صفحه باشد:

 

ناحیه برای محتویات صفحه

 

10- فایل Index.html را ذخیره کنید.

11- در برنامه نت پد، فایل format.css را از پوشه Dogs باز کنید. سپس آن را در پوشه Travel ذخیره کنید.

12- در فایل format.css، یک قالب بندی را برای ناحیه Links اضافه کنید و رنگ پس زمینه آن را خاکستری کنید:

 

قالب بندی برای نایحه links

 

13- حال قالب بندی را برای ناحیه content اضافه کنید. رنگ پس زمینه را سفید کنید:

 

قالب بندی برای ناحیه content با رنگ پس زمینه سفید

 

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

15- حال فایل index.html از پوشه Travel را در مرورگر خود باز کنید. باید شبیه به شکل زیر به نظر برسد:

 

پوشه travel

 

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

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