طراحی سایت و استفاده از فریمورکهای css


توسط : روابط عمومی رشدانا در ۸ مرداد ۱۳۹۸

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

فریمورک چیست؟

فریموورکها چکیده کدهایی از پیش نوشته شده هستند که برای راحتی کدنویسی مورد استفاده قرار میگیرند که قابل تغییر توسط برنامه نویس بصورت انتخابی خواهد بود. فریمورکها دارای یک ساختار از پیش طراحی شده هستند که معمولا به عنوان ساختار اصلی در پروژه های مختلف مورد استفاده قرار میگیرد.

آموزش طراحی سایت با استفاده از فریمورکهای css

انواع فریمورک

فریمورکها به دو نوع فریمورکهای back-end و فریمورکهای front-end تقسیم می شوند.

فریمورکهای back-end

فریمورکهایی هستند که عموما از زبان برنامه نویسی PHP مشتق شده اند و جهت برنامه نویسی در پشت صحنه وب سایتها مورد استفاده قرار میگیرند و نتیجه آن به کاربر نمایش داده می شود. از مهمترین این فریمورکها میتوان به Laravel , React , Django و Ruby on Rails اشاره کرد.

آموزش طراحی سایت با استفاده از فریمورکهای css

فریمورکهای front-end

فریمورکهای front-end فریمورکهایی هستند که طراحان وب سایت برای استایل دادن به وب سایت از آنها استفاده می کنند. از مهمترین فریمورکهای front-end می توان به Vue.js ، Angular نام برد. فریمورکهای css نوعی از فریمورکهای front-end هستند که طراحان وب سایت از آنها استفاده می کنند.

از مهمترین ان نوع فریمورکها میتوان به Bootstrap , UIKIT , Foundation , Bulma , Semantic UI اشاره کرد که در ایران فریمورک بوت استرپ محبوبیت بالایی دارد و اکثر برنامه نویسان از آن برای طراحی سایت استفاده می کنند.

آموزش طراحی سایت با استفاده از فریمورکهای css

نحوه کار با فریمورکهای CSS

قبل از شروع استفاده از فریمورک ابتدا باید آنرا در پروژه خود وارد کنیم. برخی از فریمورکها فقط دارای فایلهایی با پسوند css هستند که برای استایل دادن به پروژه مورد استفاده قرار میگیرند.

این فایلهای css به دو صورت فشرده و معمولی وجود دارند که نسخه معمولی جهت استفاده توسعه دهندگان وب مورد استفاده قرار میگرد و فایل فشرده بیشتر برای طراحان استفاده میشود.

برخی دیگر از فریمورکهای css حاوی فایلهایی با فرمتهای css و js هستند که علاوه بر استایل دادن به وب سایت جهت اضافه کردن از اسلاید شو و انیمیشن به وب سایت مورد استفاده قرار میگیرند که این نوع فایلها هم شامل دو مدل فشرده و معمولی هستند.

آموزش طراحی سایت با استفاده از فریمورکهای css

نحوه اضافه کردن فریمورک به پروژه:

به دو روش می توان یک فریمورک را به پروژه اضافه کرد:

۱) روش اول بدین صورت است که فایل مربوط به پروژه را از وبسایت ن دریافت کرده و بسته به نوع پروژه از میان دو نوع فایل فشرده و معمولی یکی را انتخاب کرده پروژه آدرس دهی کنیم.

۲) روش دوم بدین صورت می باشد که آدرس فالهای css و js مربوط به فریمورک را از وبسایت cdnjs پیدا کرده و پروژه اافه میکنیم. فرق این روش با روش قبل این است که هربار فایلهای فریمورک مربوطه در هر لود شدن وبسایت دانلود خواهند شد.

دوره آموزشی پیشنهادی

آموزش کدنویسی HTML5 و CSS

HTML5 - CSS Markup

اولین گام برای ورود به دنیای برنامه نویسی

کدنویسی HTML5 و CSS

  • کدنویسی چیست و آشنایی با کدنویسی
  • کدنویسی واکنشگرا (responsive)
  • آشنایی با layout قالب ها
  • کدنویسی مقرون به صرفه
  • تکنیک های افزایش سرعت در کدنویسی
  • انواع تگ های HTML و HTML5
  • روش صحیح بکارگیری تگ ها
  • انواع تگ های CSS و CSS3
  • اجرای کامل یک قالب در HTML
  • کدنویسی بهینه و تمیز

  • زمان: 13 و 14 و16 و 20 آبان ماه 98 ساعت 16:30 الی 20:30
  • مدت زمان دوره : 4 جلسه 4 ساعته
توضیحات بیشتر و ثبت نام

ورود به دنیای حرفه‌ای کارآموزی

درخواست کارآموزی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *





دوره های پیشنهادی:
سایر دوره ها