آموزش طراحی قالب با HTML و CSS به صورت پروژه محور (قالب دیجی کالا)

فیلم آموزش طراحی قالب با HTML و CSS (قالب فروشگاه اینترنتی دیجی کالا)

در این بخش فیلم آموزش طراحی قالب با HTML و CSS را به صورت پروژه محور با هدف طراحی قالب فروشگاه اینترنتی دیجی کالا آماده کرده ایم که در ۴۴ قسمت و ۳۶ ساعت با کیفیت بالا و به زبان فارسی تهیه شده است. در ادامه به معرفی دوره و پروژه ساخته شده در این آموزش پرداخته و سرفصل ها به همراه پیش نمایشی از بخش های مختلف آموزش و تصاویری از قالب طراحی شده قرار داده شده است.

معرفی دوره

در این دوره ابتدا به این موضوع پرداخته ایم که برای یادگیری طراحی قالب سایت به چه چیزی هایی نیاز داریم و به صورت مقدماتی تگ های موجود در HTML و CSS را می آموزیم. سپس به صورت یک پروژه در قالب سایت دیجی کالا به صورت HTML ، CSS و JavaScript قالب را پیاده سای می کنیم و در انتها به بحث طراحی قالب سایت با بوت استرپ (Bootstrap) می پردازیم و یک قالب ساده را با آن پیاده سازی می کنیم. در این دوره سعی شده که طراحی بر پایه کد نویسی انجام شود تا فراگیر بتواند طراحی قالب را درک کند. همچنین نرم افزار طراحی قالب سایت این دوره آموزشی، نرم افزار دریم ویور (Dreamweaver) می باشد که در این دوره با این ابزار طراحی نیز آشنا خواهید شد.

سرفصل های آموزش طراحی قالب با HTML و CSS

فصل اول

  • معرفی دوره
  • معرفی نرم افزار مورد استفاده
  • معرفی تگ های HTML
  • شناخت قالب کلی HTML
  • شناخت سند HTML5
  • معرفی لایه های اصلی HTML

فصل دوم

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

فصل سوم

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

فصل چهارم

  • معرفی تگ div
  • معرفی ویژگی های تگ div
  • معرفی CSS داخلی
  • کلاس استایل دهی
  • شناسه استایل دهی
  • نحوه فراخوانی کلاس و شناسه

فصل پنجم

  • معرفی ساخت یک style css
  • نحوه ارتباط دهی فایل CSS با صفحه HTML
  • معرفی ویژگی heigh
  • معرفی ویژگی width
  • معرفی ویژگی float

فصل ششم

  • معرفی ویژگی margin
  • معرفی ویژگی padding
  • معرفی ویژگی position
  • نحوه نوشتن استایل تو در تو

فصل هفتم

  • معرفی تگ های پرکاربرد
  • تگ تصویر
  • تگ لینک
  • تگ دکمه
  • تگ فرم
  • تگ لیست
  • معرفی بوت استرپ
  • معرفی ویژگی های پایه بوت استرپ

فصل هشتم

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

فصل نهم

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

فصل دهم

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

فصل یازدهم

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

فصل دوازدهم

  • ایجاد بخش اصلی بدنه
  • ایجاد باکس سمت راست
  • نمایش تبلیغات تصویری سمت راست
  • نمایش ویدئوهای سمت راست
  • استفاده از ترفند display

فصل سیزدهم

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

فصل چهاردهم

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

فصل پانزدهم

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

فصل شانزدهم

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

فصل هفدهم

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

فصل هجدهم

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

فصل نوزدهم

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

فصل بیستم

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

فصل بیست و یکم

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

فصل بیست و دوم

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

فصل بیست و سوم

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

فصل بیست و چهارم

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

فصل بیست و پنجم

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

فصل بیست و ششم

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

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

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

فصل بیست و هشتم

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

فصل بیست و نهم

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

فصل سی ام

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

فصل سی و یکم

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

فصل سی و دوم

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

فصل سی و سوم

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

فصل سی و چهارم

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

فصل سی و پنجم

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

فصل سی و ششم

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

فصل سی و هفتم

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

فصل سی و هشتم

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

فصل سی و نهم

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

فصل چهل ام

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

فصل چهل و یکم

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

فصل چهل و دوم

  • ادامه بخش طراحی بابوت استرپ
  • معرفی کلاس های margin و padding
  • امکان تغییر رنگ زمینه با کلاس ها
  • امکان تنظیم فضای بین آیتم ها

فصل چهل و سوم

  • ادامه بخش طراحی قالب با بوت استرپ (Bootstrap)
  • ایجاد بخش نمایش محصولات در یک سطر
  • نمایش سه محصول در یک سطر
  • نمایش دو محصول در یک سطر
  • ایجاد بخش بدنه اصلی و سایدبار
  • ایجاد محصولات در بدنه اصلی

فصل چهل و چهارم

  • قسمت آخر
  • جمع بندی بخش بوت استرپ
  • جمع بندی بخش HTML
  • تکمیل نکات طراحی

نوشته آموزش طراحی قالب با HTML و CSS به صورت پروژه محور (قالب دیجی کالا) اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

درباره نویسنده: administrator

ممکن است دوست داشته باشید

دیدگاهتان را بنویسید

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