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

سرفصل های آموزش طراحی قالب با 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
• تکمیل نکات طراحی