اگر طراح وب سایت باشید، به احتمال زیاد تاکنون با وب سایت آموزشی w3schools.com آشنا شده اید. وب سایتی که آموزش های بسیار مفیدی در زمینه طراحی وب سایت دارد.

وب سایت w3schools.com ، یک فایل CSS با عنوان W3.CSS ارائه کرده است که می تواند برای طراحی وب سایت های واکنش گرا (Responsive) و سازگار با مرورگرهای اینترنت مختلف و همچنین طراحی گرافیکی آنها به کار رود.

این فایل، چارچوبی (Framework) بر اساس CSS می باشد. بنابراین شما تنها با کدهای CSS سر و کار خواهید داشت و نیازی به فایل حاوی کدهای javascript یا jQuery نخواهید داشت (کتابخانه هایی بر اساس javascript یا jQuery ندارد) (یک فایل js حاوی کدهای javascript یا jQuery ارائه نخواهد شد، اما در برخی از امکانات آن، ممکن است به استفاده از کمی کد javascript در صفحه نیاز داشته باشد، اما مواردی مثل واکنش گرا (Responsive) کردن سایت در آن، کاملا بدون javascript قابل اجرا می باشند).

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

بنده هنگامی که قصد داشتم وب سایت کلیدستان را از حالت سنتی به حالت واکنش گرا (Responsive) تبدیل کنم، با گزینه های مختلفی (چارچوب ها و کتابخانه های مختلفی) روبرو بودم. با توجه به تجربه بالای افرادی که در وب سایت w3schools.com فعالیت می کنند، استفاده از W3.CSS را ترجیح دادم. دقت کنید که اولین اولویت شما برای انتخاب، بخش کدنویسی برای واکنش گرا (Responsive) کردن وب سایت باشد. یعنی مستقیما به این بخش رفته و ببینید که مطابق آنچه نیاز دارید می باشد یا نه. اگر از گرافیک یک چارچوب (Framework) خوشتان نمی آید، اما بخش مربوط به واکنش گرا (Responsive) کردن آن قوی است، می توانید آن را در وب سایت به کار ببرید، اما تنها برای واکنش گرا (Responsive) کردن و برای گرافیک وب سایت هم می توانید از یک کتابخانه دیگر استفاده کنید که گرافیک آن مطابق سلیقه شما باشد.

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

البته خود وب سایت w3schools.com نیز آموزش هایی در مورد آن دارد که می توانید آنها را در لینک زیر بیابید :

برای یادگیری بهتر چارچوب W3.CSS ، باید کمی با مباحث HTML و CSS آشنایی داشته باشید که در این زمینه، می توانید به بخش های آموزشی زیر از وب سایت کلیدستان مراجعه نمایید (در صورت تمایل برای مطالعه آنها، قبل از خواندن آموزش های مربوط به W3.CSS در کلیدستان) :

آموزش HTML

آموزش CSS