دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ ۴

جلسه اول

• معرفی دوره BootStrap
• پیش نیازها
• تعریف Html
• بررسی قالب ساختاری Html
• معرفی تگ ها
• تنظیم صفحات وب و سازگاری با زبان فارسی

جلسه دوم

• ادامه بخش معرفی تگ های Html
• بررسی تگ لینک و اسکریپت
• بررسی تگ a و img
• بررسی تگ Table
• بررسی تگ Input  و خصوصیت های آن
• بررسی تگ Div

جلسه سوم

• معرفی استایل در تگ Html
• معرفی ویژگی رنگ پس زمینه
• معرفی ویژگی رنگ فونت
• معرفی ویژگی سایز فونت
• معرفی ویژگی وزن فونت
• معرفی ویژگی نوع فونت
• معرفی ویژگی Margin
• معرفی ویژگی Padding
• معرفی ویژگی تراز فونت

جلسه چهارم

• آشنایی با روش دوم استایل دهی
• معرفی تگ استایل
• معرفی حالت محل قرار گیر Position
• معرفی border
• معرفی border-radius
• معرفی animation
• معرفی ویژگی های اولیه animation
• معرفی webkit و خصوصیت آن

جلسه پنجم

• معرفی text-shadow
• معرفی box-shadow
• معرفی flex
• معرفی box-sizing
• معرفی background-image
• نحوه ساخت فایل css
• نحوه فراخوانی فایل css در صفحه html

جلسه ششم

• معرفی مقدماتی بوت استرپ
• بررسی نحوه فراخوانی فایل های بوت استرپ
• معرفی شبکه بندی در بوت استرپ
• معرفی خاصیت container
• معرفی خاصیت row

جلسه هشتم

• ادامه بحث شبکه بندی لایه ها
• نحوه تقسیم هر ستون داخل ستون دیگر
• معرفی چگونه واکشن گرایی صفحه
• تعریف شبکه ها برای هر وسیله نمایشی
• معرفی @Media در Responsive

جلسه هشتم

• معرفی واحد اندازه بوت استرپ rem
• معرفی کامپونت های بوت استرپ
• پنجره هشدار در بوت استرپ
• دکمه های ساده در بوت استرپ
• دکمه های گروهی در بوت استرپ
• دکمه های زیرمجموعه دار در بوت استرپ
• نمایش صفحات گذر شده در بوت استرپ
• نشان ها در بوت استرپ

جلسه نهم

• ادامه معرفی کامپونت های بوت استرپ
• معرفی carousel برای اسلایدر
• معرفی فرم های موجود و آپشن های آنها
• معرفی DropDown ها و ابزار آبشاری
• معرفی ابزار collapse
• معرفی ابزار Cards
• معرفی ابزار Modal

جلسه دهم

• ادامه بخش معرفی کامپونت های بوت استرپ
• معرفی Navbar
• معرفی Pagination
• معرفی Popovers
• معرفی Progress
• معرفی Spinners
• معرفی Toasts
• معرفی Tooltips

جلسه یازدهم

• شروع بخش عملی دوره
• ایجاد سند Html
• تعریف متاتگ پشتیبانی زبان فارسی
• دانلود نسخه بوت استرپ
• الحاق فایل های بوت استرپ به سند
• تعریف ناوبر و هدر سایت

جلسه دوازدهم

• ادامه طراحی هدر سایت
• نحوه اضافه کردن قلم فارسی
• نحوه اضافه کردن ایکون
• نمایش لینک ورود و ثبت نام
• نمایش اطلاعات ارتباطی سایت در هدر

جلسه سیزدهم

• ایجاد بخش منو
• تعریف و معرفی مگامنو
• بررسی فایل استایل و جوااسکریپت مگامنو
• ایجادبخش نمایش لگو
• ایجاد بخش اولیه منو و زیر منو

جلسه چهاردهم

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

جلسه پانزدهم

• ایجاد بخش منوی ریسپانسیو
• ایجاد لگوی ریسپانسیو برای موبایل
• ایجاد ایکون منو در حالت موبایل
• نمایش زیر مجموع منو در حالیت ریسپانسیو
• بررسی ریسپانسیو موبایل و تبلت  و…

جلسه شانزدهم

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

جلسه هفدهم

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

جلسه هجدهم

• ادامه بخش ریسپانسیو جدیدترین پزشکان
• ریسپانسیو کردن در نمایشگرهای کوچک
• خروجی گرفتن نهایی بخش چدیدترین پزشکان
• ایجاد بخش جستجو پزشکان
• خروجی ریسپانسیو جستجو

جلسه نوزدهم

• ادامه بخش ایجاد اسلایدر
• معرفی اسلایدر Owl-Carousel
• اضافه کردن فایل استایل و جاوااسکریپت اسلایدر
• تنظیم اسلایدر اتوماتیک
• نمایش و خروجی اسلایدر به صورت عادی و ریسپانسیو

جلسه بیستم

• ایجاد بخش نمایش پیام هشدار سایت
• امکان میانبر سازی ثبت پزشک و مرکز پزشکی
• ایجاد اسلایدر برای نمایش پزشکان متخصص هر بخش
• ریسپانسیو کردن اسلایدر

جلسه بیست و یکم

• ادامه بخش اسلایدر نمایش پزشکان براسا تخصص
• ایجاد قسمت اسلایدر برای نمایش مراکز درمانی
• تنظیم  حرکت دستی بعدی و قبلی کردن اسلایدر
• خروجی نهایی این قسمت
• تعریف بخش پزشکان پیشنهادی
• معرفی نحوه نمایش یا عدم نمایش قسمت مورد نظر در حالت های متلف

جلسه بیست و دوم

• ادامه بخش پزشکان پیشنهادی
• نمایش اطلاعات پزشکان داخل کادر
• تنظیم حالت نمایش ریسپانسیو
• ایجاد اسلایدر قسمت پزشکان فعال
• ایجاد بخش نمایش تصاویر راهنما

جلسه بیست و سوم

• ایجاد بخش فوتر سایت
• تنظیم فوتر به صورت کلی
• ایجاد بکگراند رنگی و تصویر با هم به صورت ترکیبی
• تقسیم فوتر به سه قسمت مساوی
• ایجاد بخش نمایش اخرین مطالب مجله روی فوتر

جلسه بیست و چهارم

• ادامه بخش فوتر سایت
• ایجاد قسمت نمایش اخرین پرسش  و پاسخ
• نمایش پرسش انجام شده
• نمایش پاسخ داده شده
• رنگ بندی و زیباسازی ظاهری

جلسه بیست و پنجم

• ادامه بخش فوتر
• ایجاد بخش اطلاعات تماس و راه های ارتباطی
• اضافه کردن شبکه های اجتماعی
• تکمیل فوتر و ایجاد بخش حق کپی رایت
• ایجاد مدال بخش ثبت نام

جلسه بیست و ششم

• ادامه مدال بخش ثبت نام
• ایجاد فرم ثبت نام روی مدال
• تکمیل بخش ثبت نام
• ایجاد مدال برای ورود
• ایجاد فرم ورود
• تکمیل بخش ورود

جلسه بیست و هفتم

• ایجاد صفحه جزئیات پزشکان
• معرفی شمایل کلی صفحه
• ایجاد بخش مسیر  breadcrumb
• ایجاد سایدبار سمت راست
• نمایش اطلاعات پزشک

جلسه بیست و هشتم

• ادامه بخش جزئیات پزشکان
• ایجاد اسلایدر با خود بوت استرپ
• تنظیم اسلایدر بعدی و قبلی
• ایجاد بخش معرفی مهارت های پزشک
• ایجاد بخش طرفین قرارداد پزشک

جلسه بیست و نهم

• ادامه بخش جزئیات پزشکان
• ایجاد بخشaccordion
• ایجاد accordion برای ثبت نوبت انلاین
• ایجاد فرم ثبت رزرو نوبت
• ایجاد accordion برای پرسش از پزشک
• ایجاد فرم پرسش از پزشک و نمایش اخرین پرسش و پاسخ ها

جلسه سی ام

• ادامه بخش جزئیات پزشکان
• ایجاد accordion برای ثبت نظرکاربران
• ایجاد فرم ثبت نظر ونمایش نظرات ثبت شده
• تکمیل بخش جزئیات
• ایجاد بخش صفحه اولیه ثبت نام پزشکان

جلسه سی و یکم

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

جلسه سی و دوم

• ادامه بخش ثبت نام پزشکان
• ایجادلیست انتخابی روزهای هفته
• ایجادلیست انتخابی ساعات حضور
• ایجاد لیست انتخابی رزرو انلاین فعال باشد یا خیر
• ایجاد لیست انتخابی پاسخگویی به بیماران

جلسه سی و سوم

• ادامه بخش ثبت نام پزشکان
• ایجاد قسمت ثبت ادرس مطب
• ایجاد قسمت ثبت شماره تماس و ایدی شبکه اجتماعی مطب
• تکمیل بخش ثبت نام پزشک
• ایجاد صفحه ثبت مرکز درمانی
• ایجاد ایتم انتخابی نوع فعالیت مرکز
• ایجاد بخش وارد سازی ادرس و شماره مرکز
• ایجاد بهش انتخاب بیمه طرف قراردادمرکز
• تکمیل صفحه ثبت مرکز درمانی

جلسه سی و چهارم

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

جلسه سی و پنچم

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

جلسه سی و ششم

• ایجاد صفحه ارتباط با ما
• ساخت فرم تماس با ما
• ساخت بخش عضویت در خبرنامه
• ایجاد تصویر نمایش مکان روی نقشه
• ایجاد بخش نمایش ادرس و شماره تماس دفتر

جلسه سی و هفتم

• ایجاد بخش بلاگ سایت
• تعریف چیدمان ایتم های وبلاگ
• ایجاد هدر متفاوت برا وبلاگ
• ایجاد سایدبار راست
• تعرف دسته بندی روی منو عمودی
• ایجاد نمایش اخرین نظرات وبلاگ
• ایجاد نمایش جستجو روی مطالب وبلاگ

جلسه سی و هشتم

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

جلسه سی نهم

• ادامه بخش طراحی وبلاگ
• ایجاد فوتر برای وبلاگ
• نمایش لینک ها روی فوتر
• نمایش عضویت در خبرنامه
• تکمیل صفحه اصلی وبلاگ

جلسه چهلم

• ایجاد بخش جزئیات خبر وبلاگ
• نمایش عنوان خبر
• نمایش تصویر خبر
• امکان اشتراگ کذاری خبر در شبکه های مجازی
• نمایش برچسب های خبر
• نمایش نظارت خبر
• امکان درج نظر برای خبر
• جمع بندی نهایی
• پایان دوره

دمو دوره آموزش پروژه محور بوت استرپ ۴

(در صورت عدم نمایش دمو فلش پلیر نصب نمایید)

تصاویری از پروژه وب سایت پزشک یاب با بوت استرپ ۴