مجموعه آموزش های وب > آموزش مقدماتی

آموزش بوت استرپ4 وطراحی قالب وردپرس

بعد از نزدیک به ۲ سال ارتقا و کدنویسی نسخه بوت استرپ ۴ توسط Mark otto و Jacob Thornton منتشر شد. نسخه ای که تغییرات اساسی به ویژه در ریسپانسیو سایت داشته است. Bootstrap 4 سایزبندی ریسپانسیو تغییرات اساسی داشته و بازه ۰ تا 576 پیکسل برای گوشی های همراه به آن اضافه شده که مشکلات بسیاری از طراحان وبسایت را برطرف خواهد کرد.
در این دوره آموزشی به مباحث فریم ورک بوت استرپ (‌Bootstrap) به طور کامل خواهیم پرداخت و بعد از بررسی تمام مباحث فریم ورک از جمله اسکریپت ها – المان ها (شامل جداول – فرم ها – تایپوگرافی – تولتیپ – لایت باکس – تب ها و …) به طراحی یک تم میپردازیم.

باتوجه به این که در این دوره یک پروژه حرفه ای پیاده سازی خواهد شد، شما در انتهای دوره با زیر و بم کار آشنا خواهید شد و انتظار ما این هست که بتونید بعد از گذروندن این دوره، تفاوت کاملا محسوسی در سطح کاری تون از لحاظ تخصصی ببینید.
و اینکه خیلی از عزیزان درخواست یک اموزش مبنی بر تبدیل قالب html به وردپرسی رو داشتن ،ما پس از اموزش ساخت قالب با بوت استرپ ، قالب نهاییو رو به وردپرس تبدیل میکنیم تا یک اموزش کاربردی در اختیارتون قرار بگیره

قیمت این دوره آموزشی : 96,000 تومان
پیش نیاز(ها) :
  • آشنایی با htmlوcss
  • آشنایی با جاوا اسکریپت
33جلسه آموزش کامل
مبتدی
10 امتیاز بگیرید
شامل : 8 فایل

به دوستان خود بگوئید

1
معرفی دوره  و آماده سازی محیط پروژه
MP4 0.00 MB

معرفی دوره و آماده سازی محیط پروژه

در این دوره آموزشی به مباحث فریم ورک بوت استرپ (‌Bootstrap) به طور کامل خواهیم پرداخت و بعد از بررسی تمام مباحث فریم ورک از جمله اسکریپت ها – المان ها (شامل جداول – فرم ها – تایپوگرافی – تولتیپ – لایت باکس – تب ها و …) به طراحی یک تم میپردازیم. در این جلسه یادمیگیریم با چه روش هایی بوت استرپ را به پروژه خود اضافه کنیم و نرم افزارها مورد نیاز جهت انجام پروژه را نصب کنیم و نحوه کامپایل فایل sass را یاد میگیریم.

2
تغییرویژگیها فایل sassوشروع قسمت هدروnavigation
MP4 0.00 MB

تغییرویژگیها فایل sassوشروع قسمت هدروnavigation

در این جلسه آموزشی ادامه فایل ها مورد نظر را اضافه میکنیم و نحوه کدنویسی را یاد میگیریم و یاد میگیریم که navbar چطور استفاده میشود.

3
کار کردن همراه منوهاو navigation و ایجاد آن.
MP4 0.00 MB

کار کردن همراه منوهاو navigation و ایجاد آن.

در این جلسه یاد میگیریم کلاس ها مورد استفاده در بحث navigation سایت چه کلاس هایی هستندو چطور میتوانیم یک منو برا سایت خودمان ایجاد کنیم

4
کار کردن همراه منوهاو navigation و ایجاد آن قسمت دوم .
MP4 0.00 MB

کار کردن همراه منوهاو navigation و ایجاد آن قسمت دوم .

در این جلسه منو خود را کاملتر میکنیم یاد میگیریم چطور آیتم dropdown به منو خود اضافه کنیم همینطور یاد میگیریم چطور فرم جستجو به منو خود اضافه کنیم .

5
ریسپانسیو کردن منو و گرید سیستم
MP4 0.00 MB

ریسپانسیو کردن منو و گرید سیستم

در این جلسه منو که طراحی کردیم رو به صورت ریسپانسیو پیاده سازی میکنیم و با مفهوم گرید سیستم و المان ها آن آشنا میشویم

6
سایر مدل ها navbar
MP4 0.00 MB

سایر مدل ها navbar

در این جلسه آموزشی به کمک بوت استرپ 4 به طراحی انواع منوها موجود میپردازیم هرکدام این حالت ها میتوانند در بخشی از سایت مورد استفاده قرار گیرند

7
کارکردن با تصاویر و کامپوننت card
MP4 0.00 MB

کارکردن با تصاویر و کامپوننت card

در این جلسه آموزشی یاد میگیریم چطور تصاویر را به صورت ریسپانسیو در سایت خود قرار دهیم و با کلاس ها آن آشنا میشویم همین طور یاد میگیریم چطور به کمک کلاس ها card صفحه را تقسیم بندی کنیم

8
مثال کاربردی آیتم cardو img
WMV 0.00 MB

مثال کاربردی آیتم cardو img

در این جلسه با توجه به موارد گفته شده در مورد card و img یک صفحه بروفایل طراحی میکنیم و یاد میگیریم چطور از کلاس ها در کنار هم استفاده کنیم.

آموزش بوت استرپ4 وطراحی قالب وردپرس

پیش نمایش این آموزش
مدرسمریم یگانه
مریم یگانه
سطح آموزش
مبتدی
33جلسه

مدت آموزش

قیمت این دوره آموزشی : 96,000 تومان

بعد از نزدیک به ۲ سال ارتقا و کدنویسی نسخه بوت استرپ ۴ توسط Mark otto و Jacob Thornton منتشر شد. نسخه ای که تغییرات اساسی به ویژه در ریسپانسیو سایت داشته است. Bootstrap 4 سایزبندی ریسپانسیو تغییرات اساسی داشته و بازه ۰ تا 576 پیکسل برای گوشی های همراه به آن اضافه شده که مشکلات بسیاری از طراحان وبسایت را برطرف خواهد کرد.

سرفصل های این آموزش

این دوره آموزشی با 33جلسه آموزش کامل مشتمل بر سرفصل های زیر می باشد :

  •  1 - ساخت بخش فروشگاه
  •  2 - استفاده از بخش در صفحه اصلی
  •  3 - ساخت سایدبارو استایل دهی
  •  4 - قرار دادن خدمات در tap /collapse
  •  5 - اضافه کردن گالری
  •  6 - ساخت صفحه خدمات
  •  7 - اضافه کردن جدول ساعت کاری
  •  8 - اضافه کردن قسمت محتوا و تصاویر
  •  9 - ساخت صفحه درباره ما
  •  10 - اضافه کردن چارچوب اصلی صفحه
  •  11 - انتقال فایل به سرور محلی xampp , و جدا کردن بعضی بخش ها با پسوند php برا استفاده در صفحات دیگر
  •  12 - قسمت منو شبکه های اجتماعی و fontawsome
  •  13 - ایجاد فوتر
  •  14 - کارکردن با قسمت بازدید و استایل آن
  •  15 - قسمت محصولات و استایل آن
  •  16 - اضافه کردن جدول
  •  17 - کارکردن با بخش زمان ها کاری و استایل آن
  •  18 - اضافه کردن css3 Transition
  •  19 - کارکردن با قسمت لینک تصاویر و استایل آن
  •  20 - کار با قسمت بخش ها جدید سایت و استایل آن
  •  21 - اضافه کردن گوگل فونت
  •  22 - ایجاد navigation اصلی و استایل ها آن
  •  23 - کار کردن با Header
  •  24 - ساخت صفحه اصلی
  •  25 - بخش دوم-پروژه
  •  26 - اضافه کردن tooltip و اضافه کردن dropdown
  •  27 - کار کردن همراه منوهاو navigation و ایجاد آن.
  •  28 - کامپوننت ScrollSpy و آشنایی با کامپوننت Jumbotron و نحوه کار با آن
  •  29 - اضافه کردن modal داخلی گرید
  •  30 - کارکردن با modal و ایجاد آن
  •  31 - اضافه کردن متن به Carousel
  •  32 - اضافه کردن کنترل به Carousel
  •  33 - نصب نرم افزارها و اضافه کردن فایل ها بوت استرپ به پروژه
  •  34 - معرفی دوره
  •  35 - اولین گام مفهوم گرید و کار با آن
  •  36 - کارکردن با تایپوگرافی ها
  •  37 - کلاس ها بیشتر تایپوگرافی
  •  38 - کارکردن با تصاویر و حالت ها ریسپانسیو آن
  •  39 - کارکردن با جداول
  •  40 - کارکردن با دکمه ها و کلاس های آن
  •  41 - کارکردن با کامپوننت جدید card
  •  42 - کامپوننت اسلایدر Carousel
  •  43 - ایجاد صفحه محصولات اصلی و فروشگاه
  •  44 - اضافه کردن صفحه Single Page برا نمایش تک تک محصولات پنل سایت به قالب سایت
  •  45 - ساخت قسمت تماس با ما
  •  46 - ساخت فرم تماس با ما و استایل دهی آن
  •  47 - ایجاد دیتابیس برا نمایش محصولات
  •  48 - اضافه کردن منو ریسپانسیو همبرگرمنو
  •  49 - قسمت تبدیل قالب به قالب وردپرسی
  •  50 - نصب وردپرس محلی با xampp
  •  51 - ایجاد قالب ما
  •  52 - اضافه کردن style اصلی
  •  53 - کارکردن با قسمت هدر
  •  54 - اضافه کردن منو اصلی و شبکه ها مجازی
  •  55 - نمایش منو در قالب ساخته شده
  •  56 - ایجاد همه صفحات و اضافه کردن منو اصلی
  •  57 - کار کردن با قسمت فوتر
  •  58 - ایجاد فایل فوترو قراردادن آن در قالب
  •  59 - اضافه کردن widgets در فوتر
  •  60 - اضافه کردن فایل ها جاوا اسکریپت
  •  61 - کار کردن با صفحه درباره ما
  •  62 - اضافه کردن الگو برای درباره ما
  •  63 - اضافه کردن گالری برا درباره ما
  •  64 - سازگاری گالری با بوت استرپ
  •  65 - اضافه کردن زمان ها کاری و سایدبار به قالب
  •  66 - ایجاد widget در ساید بار
  •  67 - کار کردن با صفحه خدمات
  •  68 - اضافه کردن الگو خدمات و ثبت فیلدها
  •  69 - نمایش اطلاعات مربوط به خدمات داخل قالب
  •  70 - نمایش قسمت خدمات در سایدبار
  •  71 - کارکردن با صفحه محصولات
  •  72 - اضافه کردن محصولات
  •  73 - ایجاد صفحه single page برا نمایش یک محصول
  •  74 - ایجاد صفحه تماس با ما
  •  75 - ساخت صفحه اصلی قالب
  •  76 - اضافه کردن نوشته ها برا اسلایدر
  •  77 - نمایش پست ها در اسلایدر
  •  78 - نمایش slogan
  •  79 - اضافه کردن اطلاعات اصلی
  •  80 - نمایش ساعت های کاری
  •  81 - نمایش محصولات
  •  82 - نمایش بازدیدها
  •  83 - اضافه کردن عناوین دینامیک صفحه برا سئو بهتر
  •  84 - ایجاد اسکرین شات
مبتدی

10 امتیاز بگیرید

اولین نفری باشید که به این آموزش نظر می دهد!

نظرات کاربران
IP : 54.145.83.79 ساعت : 12:08:22
CAPTUA
  ورود به سایت
نام کاربری :
رمز عبور :

در صورتیکه ثبت نام نکرده اید،اینجا کلیک کنید