افزودن چارچوب W3.CSS به صفحات وب سایت

قبل از هر چیز، باید چارچوب W3.CSS را در صفحات وب سایت ذکر نماییم.

با توجه به اینکه چارچوب (Framework) مورد نظرمان تنها یک فایل css می باشد، باید از همان شیوه عادی افزودن فایل های css به یک صفحه از وب سایت ( کلید شماره 531 ) استفاده کنیم.

ابتدا آخرین نسخه فایل w3.css را از صفحه زیر از وب سایت w3schools.com دانلود نمایید :

سپس آن را در کنار فایل مربوط به صفحه ای که می خواهید فایل css در آن ذکر شود، کپی کنید (بنده یک صفحه با پسوند html را به عنوان صفحه وب سایت در نظر گرفته ام که نام آن برابر index.html می باشد) :

فایل index.html را باید با یک نرم افزار ویرایشگر متن (مثل Adobe Dreamweaver یا Notepad) باز کرده و کدهای مورد نظرمان را در آن بنویسیم.

اکنون با توجه به اینکه فایل css در کنار فایل صفحه مورد نظر قرار گرفته است، با کد زیر می توانیم در صفحه به آن ارجاع بدهیم (بر اساس آدرس نسبی) :

البته دقت کنید که امکان ارجاع به فایل قرار گرفته در اینترنت (بر روی وب سایت w3schools.com) نیز وجود دارد و اجباری برای دانلود فایل نیست :

اما با توجه به اینکه ما می خواهیم وابسته به اینترنت نباشیم، فایل مورد نظر را دانلود کرده و به صورت محلی از آن استفاده می کنیم.

کدهای چارچوب (ساختار) HTML صفحه به صورت زیر می باشد (یک صفحه HTML خالی) :

اکنون کدهای چارچوب HTML صفحه به همراه کد ارجاع به فایل css ، به صورت زیر خواهد بود :

برای اینکه متوجه شویم فایل w3.css به درستی در صفحه ذکر شده است یا نه، باید کمی کد مربوط به چارچوب W3.CSS را در صفحه ذکر کنیم :

فعلا که شناختی از عملکرد چارچوب W3.CSS ندارید، تنها در همین حد بدانید که اگر کلاس (class) مربوط به یک عنصر از صفحه را برابر w3-green قرار بدهیم، آنگاه رنگ پس زمینه آن عنصر از صفحه، برابر رنگ سبز خواهد بود و متن درون آن نیز به رنگ سفید نوشته می شود (پس اگر در خروجی صفحه، رنگ پس زمینه عنصر برابر رنگ سبز باشد، متوجه می شویم که چارچوب W3.CSS در صفحه ذکر شده است و به درستی عمل می کند).

بنابراین کل کدهای صفحه index.html به صورت زیر خواهد بود :

با اجرای صفحه، خروجی به صورت زیر می باشد (چون صفحه با پسوند html است، تنها کافی می باشد که بر روی فایل index.html ، دابل کلیک کنید تا توسط مرورگر اینترنت پیش فرض ویندوز، اجرا شود) :

مشاهده می کنید که کدها به درستی توسط چارچوب W3.CSS اجرا شده اند، یعنی هم رنگ پس زمینه عنصر برابر رنگ سبز می باشد و هم متن آن با رنگ سفید نوشته شده است (در غیر این صورت، تنها یک خروجی ساده و بدون رنگ پس زمینه، نمایش داده می شد).