دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ 4Reviewed by صابر بوستانی on Jan 4Rating: 5.0
دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ 4

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

در خدمت شما دوستان عزیز هستیم با دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ ۴ از وب سایت سورس باران. دوره آموزش پروژه محور BootStrap شده در سه بخش ارائه شده است. بخش اول مربوط به مباحث مقدماتی و پیش نیازها؛ بخش دوم مربوط به مباحت اولیه بوت استرپ و در بخش سوم پیاده سازی یک پروژه با موضوعیت سایت پزشک یابی به صورت صفر تا صد با بوت استرپ می باشد. این دوره به گونه ای ارائه گردیده است که افراد مبتدی و افرادی که آشنایی چندانی با طراحی ندارند به راحتی می توانند با این موضوع آشنا و طراحی وب سایت را فراگیرند همچنین دانشجویانی که علاقه به طراحی صفحات وب دارند هم به راحتی بعد از این دوره توانایی این امر را خواهند داشت.

البته لازم به ذکر است که در واقع این پکیج شامل ۴ دوره می باشد که عبارتند از: ۱- دوره آموزش Html CSS برای پیشنیاز. ۲-آموزش کامل موضوع محور بوت استرپ ۳- آموزش پروژه محور بوت استرپ در قالب پیاده سازی وب سایت شرکتی و ۴- آموزش طراحی وب سایت پزشک یاب با بوت استرپ ۴ که در ادامه معرفی می شوند.

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

بوت استرپ در حقیقت فریم وورکی است که از سه زبان HTML ، CSS ، JQuery ‌ تشکیل شده است. فراهم آوردن فضایی ساده برای طراحی وب سایت برای کسانی که حداقل با HTML ‌و ‌CSS ‌آشنایی دارند از مزایای بوت استرپ ‌می‌باشد. در کنار تما‌می‌این موارد، طراحی با بوت استرپ امکان تفکیک بخش‌های مختلف سایت جهت افزودن کدها را فراهم آورده است. بوت استرپ کاملا open source ‌بوده و قابلیت بهینه‌سازی دارد. همچنین در هنگام نصب ‌می‌توان آن را به صورت کاملا سفارشی نصب کرد و با کاهش حجم موارد قابل نصب ، از حجم نهایی آن کم کرد.

دوره آموزش پروژه محور بوت استرپ ۴ شده در سه بخش اموزش داده شده است. بخش اول مربوط به مباحث مقدماتی و بخش دوم مربوط به مباحت اولیه بوت استرپ و در بخش سوم پیاده سازی یک پروژه با موضوعیت سایت پزشک یابی به صورت صفر تا صد با بوت استرپ می باشد. این دوره به گونه ای ارائه گردیده است که افراد مبتدی و افرادی که آشنایی چندانی با طراحی ندارند به راحتی می توانند با این موضوع آشنا و طراحی وب سایت را فراگیرند همچنین دانشجویانی که علاقه به طراحی صفحات وب دارند هم به راحتی بعد از این دوره توانایی این امر را خواهند داشت.

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

جلسه اول

  • معرفی دوره 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 برای ثبت نظرکاربران
  • ایجاد فرم ثبت نظر ونمایش نظرات ثبت شده
  • تکمیل بخش جزئیات
  • ایجاد بخش صفحه اولیه ثبت نام پزشکان

جلسه سی و یکم

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

جلسه سی و دوم

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

جلسه سی و سوم

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

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

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

جلسه سی و پنچم

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

جلسه سی و ششم

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

جلسه سی و هفتم

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

جلسه سی و هشتم

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

جلسه سی نهم

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

جلسه چهلم

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

جهت مشاهده دمو ویدئویی از دوره+مشاهده اسکرین شات از پروژه نهایی کلیک نمایید

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

 

 

 

 

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

 

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

حجم : ۴٫۹۵ گیگابایت

مدت زمان : ۳۱ ساعت

مدرس : مهندس بهارلو

پشتیبانی : ۰۷۱۳۶۴۷۲۸۰۸ – ۰۹۱۰۷۰۱۱۱۸۰

قیمت : خرید دانلودی ۹۳ هزارتومان

دانلود جلسه ۱ دانلود جلسه ۲ خرید دانلود با قیمت ۹۳ هزارتومان