جلسه 1: مقدمه دوره
- توضیحاتی در رابطه با دوره
- معرفی مدرس
- کارهایی که در این دوره انجام خواهیم داد.
جلسه 2: روش های کسب درآمد از طریق طراحی سایت
- روش های کسب در آمد از طریق طراحی سایت
- آزادکاری یا فریلسنری از طریق سایت های انجام پروژه
- نحوه طراحی سایت برای افراد و شرکت ها
- نحوه قیمت گذاری پروژه های طراحی سایت
- نحوه عقد قرارداد طراحی سایت با مشتری و مواردی که باید رعایت کنید
- کسب در آمد از طریق پشتیبانی وبسایت مشتریان
- ساخت محصول و فروش آن در مارکت های آنلاین و شرایط کار با تم فارست
- کسب در آمد از طریق آموزش به دیگران
جلسه 3: معرفی و آموزش کار با Adobe XD
- معرفی ابزار طراحی سایت
- اسکتچ و استفاده از آن برای طراحی سایت
- محیط کار با Adobe XD
جلسه 4: طراحی سایت در Adobe XD بصورت عملی
- ساخت یک صفحه فرود در Adobe XD
جلسه 5: تست ریسپانسیو Adobe XD با موبایل و تبلت
- تست ریسپانسیو با موبایل و تبلت
- تست عملی ریسپانسیو
- اتصال Adobe XD به موبایل و تبلت
جلسه 6: کار با بخشهای مختلف فتوشاپ برای طراحان سایت
- چیدمان و طرح بندی استاندارد یک صفحه ی وب در فتوشاپ
- مفهوم سند و ایجاد یک سند برای طرح گرافیکی یک صفحه وب
- آشنایی با ابزارهای فتوشاپ برای طراحی یک صفحه وب
- معرفی واحدهای اندازه گیری و انتخاب اندازه مناسب برای یک سند گرافیکی صفحه وب
- کار با بخشهای مختلف Blending Options
- ایجاد یک بنر تبلیغاتی برای شروع کار با فتوشاپ بصورت عملی
جلسه 7: شروع طراحی وبسایت در فتوشاپ - قسمت اول
- روانشناسی رنگ و انتخاب صحیح ست رنگی در طراحی قالب
- طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
- مفاهیم ruler و guideline؛ تنظیم و استفاده از آن ها
- ایجاد طرح گرافیکی صفحه ی وب در فتوشاپ ( فایل psd طرح وب سایت)
- ایجاد بخش هدر سایت در فایل psd
- اضافه کردن استایل به بخش های ایجاد شده
- توضیح میزان شفافیت و شفافیت داخلی یک صفحه ی وب
- معرفی انواع border و inner shadow متن و تصویر
- ساخت گرادینتها در طراحی وب به سبک جدید
- استایل دادن به بخش های مختلف سند گرافیکی یک صفحه ی وب در فتوشاپ
- توضیح مفاهیم UX و UI برای طراحی صفحات وب
- ساخت منوی وبسایت در فتوشاپ
- طراحی بخش سبدخرید سایت در هدر
- طراحی لوگو ساده و شیک برای مشتری در فتوشاپ
- طراحی مگامنو و هدر کامل وبسایت در فتوشاپ
جلسه 8: شروع طراحی وبسایت در فتوشاپ - قسمت دوم
- طراحی بخش محتوای وبسایت در فتوشاپ
- طراحی نمایش لیست محصولات وبسایت در فتوشاپ
- طراحی صفحه اصلی وبسایت در فتوشاپ بصورت کام
- معرفی ابزار lorem ipsum برای ایجاد متن تصادفی مورد نیاز برای یک صفحه وب
جلسه 9: شروع طراحی وبسایت در فتوشاپ - قسمت سوم
- طراحی فوتر وبسایت در فتوشاپ
- تکمیل طرح اصلی وبسایت و افزودن مواردی برای زیباسازی بیشتر سایت
جلسه 10: شروع طراحی وبسایت در فتوشاپ - قسمت چهارم
- طراحی صفحه مقالات در فتوشاپ بصورت کامل
- طراحی صفحه تماس با ما و درباره ما و … در فتوشاپ
- طراحی صفحه ۴۰۴ یافت نشد در فتوشاپ
جلسه 11: شروع طراحی وبسایت در فتوشاپ - قسمت پنجم
- طراحی صفحه محصولات در فتوشاپ بصورت کامل
- طراحی صفحه آرشیو محصولات در فتوشاپ بصورت کامل
- اتمام طراحی سایت در فتوشاپ
- دریافت خروجی برای ارائه به مشتری
جلسه 12: شروع یادگیری HTML و معرفی تگهای آن
- توضیح در مورد فایل های HTML و CSS
- تفاوت فایل های HTML و CSS
- چگونگی ایجاد فایل ها ی HTML و CSS
- طرز نمایش، استایل بندی، چیدمان و رنگ بندی صفحه ی وب با CSS
- توضیح چگونگی نمایش یک صفحه ی وب برای user ها
- توضیح ساختار فایل HTML شامل تگ های header و body
- معرفی تگ های مختلف HTML
جلسه 13: شروع یادگیری CSS و معرفی تگهای آن
- توضیح ساختار CSS به طور کامل
- چگونگی ایجاد کلاس و آی دی در فایل CSS و فراخوانی آنها
- تفاوت آی دی و کلاس در یک فایل CSS
- آموزش CSS بصورت کامل و آشنایی با خصوصیتهای سی اس اس
جلسه 14: شروع کار با HTML و CSS بصورت عملی
- معرفی نرم افزار های مختلف برنامه نویسی
- ایجاد یک فایل HTML ساده
- توضیح ساختار کلی فایل HTML و تگ های HTML
- معرفی Selectorها در CSS و انواع آنها
- دلیل ایجاد فایل های header، footer،content ،slider و … به صورت جداگانه برای ایجاد صفحات وب
- توضیح مفهوم minify و مزیت استفاده از کدهای minify شده ی html و css
- توضیح مسیردهی فایل ها در CSS
- توضیح چگونگی اضافه کردن فایل CSS به فایل HTML
- کامنت گذاری در HTML
- کامنت گذاری در CSS
جلسه 15: ساخت هدر وبسایت با زبان HTML و CSS
- تبدیل طرح گرافیکی به کد
- ایجاد یک سند Html برای یک صفحه ی وب بصورت عملی
- معرفی Css و استفاده از آن برای ایجاد افکت های گرافیکی و ایجاد سند Css بصورت عملی
- لینک کردن صفحه های Html و Css بصورت عملی
- کدنویسی قالب طراحی شده در فتوشاپ
- استفاده از کدهای css reset بصورت عملی
- شروع کدنویسی بخش های مختلف صفحه ی وب
- کدنویسی هدر سایت بصورت کامل
- معرفی کاربرد عملی خاصیت z-index در طراحی وب
- اضافه کردن فونت به یک فایل Html
- اضافه کردن تصویر پس زمینه ی سایت
- کدنویسی بخش header شامل کدنویسی لوگو
- کدنویسی منوی اصلی سایت
- مفهوم hover و استفاده از آن برای ایجاد منوها
- طراحی منو و زیرمنو با Css
- آشنایی با پسوند SVG و استفاده از آن در وبسایت
- مشخص کردن نوع و اندازه فونت سایت با استفاده از Css
جلسه 16: ساخت مگامنو و محصولات صفحه اصلی با HTML
- ساخت مگامنو حرفهای در HTML
- افکت دادن به مگامنو با استفاده از CSS
- استفاده از تگ img بصورت عملی
- استایل دهی به سلکتور مختلف last-child و first child
- شروع ساخت صفحه اصلی وبسایت
- استفاده از کلاس clear در style.css
- Hover دادن به بخش های مختلف صفحه ی وب
- استایل دهی به هدینگها
- توضیح کاملتر خاصیت float بصورت عملی
- استایل دادن به بخش های مختلف با استفاده از دستور nth-child
جلسه 17: ساخت ستون کناری وبسایت با HTML و CSS
- ساخت ستون کناری وبسایت در HTML
- قرار دادن تصویر تبلیغاتی در ستون کناری وبسایت
- برنامهنویسی سایدبار وبسایت
- اضافه کردن hover به باکس های سایدبار
- ساخت آخرین مطالب با HTML در سایدبار
- ساخت فرم خبرنامه در HTML
- ساخت اسلایدر موبایل در HTML
جلسه 18: ساخت اسلایدر در HTML و CSS
- ساخت اسلایدر موبایلی در صفحه اصلی سایت
- آموزش کار با Owl Slider
- اضافه کردن جاوا اسکریپت به سایت طراحی شده
- استفاده از اسلایدر اسکرولی در وبسایت
جلسه 19: ساخت فوتر وبسایت با HTML و CSS
- ساخت فوتر وبسایت در HTML
- آموزش عملی کار با گرادینتها در CSS
- ساخت پس زمینه فوتر وبسایت با CSS
- قرار دادن اینماد و لوگو ساماندهی در فوتر وبسایت
- اتمام HTML صفحه اصلی و کپی گرفتن برای استفاده در دیگر صفحات وبسایت
جلسه 20: ساخت صفحات داخلی و صفحه 404
- کپی گرفتن از فایلها برای ساخت صفحه جدید HTML
- ساخت فایل صفحات درباره ما، تماس با ما و … در HTML
- ساخت صفحه ۴۰۴ یافت نشد با HTML
- آموزش سازگار کردن سایت با مرورگرهای مختلف
جلسه 21: ساخت سایر صفحات HTML و توضیح ساختار قالب وردپرس
- ساخت صفحات دیگر در html
- اتمام نشانه گذاری html و تکمیل قالب در html
- توضیح ساختار کلی قالب وردپرس
- آموزش ساخت فایلهای مختلف در قالب وردپرس
جلسه 22: ساخت قالب وردپرس و شروع برنامه نویسی وردپرس
- ساخت یک قالب ساده خام برای وردپرس
- توضیح ساختار قالب وردپرس بصورت عملی
- شروع تبدیل قالب HTML به وردپرس
- داینامیک کردن Title صفحات
- آدرس دهی بصورت داینامیک برای فایلهای JS و CSS
- Include کردن هدر و فوتر در صفحات سایت
- آموزش ساخت فهرست متغیر در وردپرس
- سازگار کردن قالب وردپرس با افزونههای مختلف
جلسه 23: ساخت مگامنو و سایدبار قالب وردپرس
- ساخت مگامنو عریض بدون استفاده از افزونه
- آموزش ساخت سایدبار قابل ویرایش از بخش ابزارکها
- ساخت ابزارک اختصاصی برای قالب وردپرس
- آموزش افزودن قابلیت تصویر شاخص به وردپرس
- افزودن سایزهای مختلف تصویر شاخص در وردپرس
- مدیریت سایدبار وبسایت با ابزارکها
- مدیریت تبلیغات وبسایت با استفاده از ابزارکها
- نمایش آخرین مقالات وبسایت در ستون کناری
جلسه 24: ساخت فوتر و صفحه ۴۰۴ و صفحات آرشیو
- انتقال کدهای بخش سایدبار به فایل مجزا
- ساخت پست تایپ سفارشی در وردپرس
- نمایش پست تایپ سفارشی در بخش اسلایدر
- ساخت فوتر وبسایت در وردپرس
- ساخت محل ابزارک برای فوتر
- مدیریت فوتر از پنل وردپرس
- برنامه نویسی صفحه ۴۰۴ در قالب وردپرس
- ساخت سایز تصویر شاخص برای بخش آرشیو
- برنامه نویسی صفحه آرشیو در قالب وردپرس
- نمایش شماره صفحات در بخش آرشیو بدون نصب افزونه
- استایل دهی CSS به بخش شماره صفحات
جلسه 25: ساخت صفحه برگهها و نوشتهها در وردپرس
- نمایش برگهها در وردپرس
- نمایش نوشته تکی در وردپرس
- نمایش برچسبها در قالب وردپرس
- نمایش نام نویسنده در قالب وردپرس
- نمایش دسته بندی های نوشته در قالب وردپرس
- نمایش محتوای پست در قالب وردپرس
- نمایش نظرات در قالب وردپرس
- ویرایش سی اس اس برای سفارشی سازی نظرات سایت
- سفارشی کردن برنامه نویسی comments.php
جلسه 26: ساخت صفحه محصول در فروشگاه
- روش سازگار کردن قالب ساخته شده با ووکامرس
- استفاده از تصاویر شاخص در صفحه محصول
- ویرایش بخش های مختلف ووکامرس در قالب طراحی شده
- سفارشی کردن صفحه نمایش محصول در ووکامرس
- افزودن بخش مقایسه محصول در قالب طراحی شده
- ساخت بخش افزودن به لیست خرید آینده
- سفارشی سازی دکمه افزودن به سبد خرید
جلسه 27: ساخت صفحه محصول در فروشگاه - بخش دوم
- ادامه ساخت صفحات محصول در ووکامرس
- ساخت بخش معرفی کامل محصول
- نمایش مشخصات فنی محصول در صفحه محصول
- سفارشی سازی بخش های مختلف صفحه محصول ووکامرس
جلسه 28: ساخت صفحه آرشیو محصولات، سبد خرید و حساب کاربری
- ساخت صفحه آرشیو محصولات
- سفارشی کردن صفحه دسته بندی محصولات ووکامرس
- سفارشی کردن صفحه سبد خرید ووکامرس
- سفارشی سازی پیامهای نمایش داده شده در صفحه تسویه حساب ووکامرس
- سفارشی سازی صفحه حساب کاربری ووکامرس
جلسه 29: نمایش محصولات ووکامرس در صفحه اصلی سایت
- استفاده از WP_Query برای نمایش پست تایپها
- نمایش محصولات ووکامرس در صفحه اصلی سایت
- افزودن دکمه افزودن به سبد خرید به صفحه اصلی
- نمایش عنوان محصولات در صفحه اصلی سایت
جلسه 30: ساخت پنل مدیریت برای قالب وردپرس
- بهترین روش برای ساخت پنل تنظیمات قالب وردپرس
- چرا از روشهای قدیمی استفاده نمیکنیم؟
- افزودن فیلد متنی به پنل تنظیمات قالب وردپرس
- افزودن فیلد انتخاب رنگ به پنل تنظیمات قالب وردپرس
- افزودن فیلد آپلود تصویر به پنل تنظیمات قالب وردپرس
- مدیریت بخشهای سایت قالب با پنل تنظیمات قالب وردپرس
- تغییر لوگوی سایت از پنل تنظیمات قالب وردپرس
- مدیریت تبلیغات سایت از پنل تنظیمات قالب وردپرس
- انتخاب دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب
جلسه 31: اضافه کردن رنگبندی و استایل به پنل مدیریت قالب
- کوتاه کردن عنوان محصولات صفحه اصلی برای جلوه بهتر
- انتخاب عنوان دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب
- ساخت رنگبندی و انتخاب رنگ سایت از طریق پنل تنظیمات قالب
- افزودن رنگبندی سبز، قرمز و آبی به پنل تنظیمات قالب
جلسه 32: ریسپانسیو کردن قالب طراحی شده
- آموزش کامل ریسپانسیو کردن بخشهای مختلف سایت
- کار با شرط @media and screen در سی اس اس
- جلوگیری از اسکرول افقی در حالت موبایل
جلسه 33: ساخت منوی ریسپانسیو برای موبایل و تبلت
- ساخت منوی همبرگری در موبایل
- اتصال منوی همبرگری به فهرست وردپرس
- ساخت منو ریسپانسیو بدون نیاز به نصب افزونه (بصورت اختصاصی)
- ساخت منو ریسپانسیو با استفاده از افزونه
- استفاده از جاوا اسکریپت برای ساخت منو موبایلی
جلسه 34: اسلایدی کردن تصاویر محصولات ووکامرس و حل مشکل عنوان
- آموزش حل مشکل عنوان در تگ Title
- آموزش اسلایدی کردن تصاویر محصولات ووکامرس
- آموزش افزودن LightBox به تصاویر محصولات ووکامرس
- آموزش حل حذف شدن استایل hover منوی اصلی موقع hover کردن روی submenu
جلسه 35: لینک دادن به عنوان دستهبندیها و اضافه کردن Preloader
- لینک کردن دسته بندی های موجود در صفحه اصلی
- اضافه کردن Preloader به کل صفحات سایت
جلسه 36: ساخت فرم جستجو و نمایش عنصر فقط در ساعات خاص
- ساخت فرم جستجوی سفارشی
- نمایش عناصر سایت در ساعات خاص
جلسه 37: آموزش ریسپانسیو کردن مگامنو و ساخت منوهای باز شونده
- آموزش ریسپانسیو کردن مگامنو
- ساخت منوهای باز شونده در حالت موبایلی
جلسه 38: افزودن تنظیمات به ابزارک اختصاصی ساخته شده
- افزودن تنظیمات تغییر عنوان به ابزارک
- افزودن تغییر تعداد نمایش پست به ابزارک
جلسه 39: قرار دادن پس زمینه جدا برای مگامنوهای مختلف
- قرار دادن تصویر پس زمینه سفارشی برای هر مگامنو بصورت مجزا
- روشهای دیگر سفارشی کردن مگامنوها
جلسه 40: ساخت مینی سبد خرید برای هدر سایت
- نمایش تعداد محصولات سبد خرید در هدر سایت
- نمایش سبد خرید سریع در هدر سایت
جلسه 41: نمایش مسیر کاربر در سایت و ساخت فرم ورود کاربر
- نمایش مسیر کاربر در سایت
- ساخت فرم ورود اختصاصی برای ورود کاربر در قالب
جلسه 42: شرطی کردن نمایش دسته بندی و استفاده از زمینههای دلخواه
- استفاده از if_category
- استفاده از is_category
- استفاده از فیلدهای سفارشی وردپرس
- شرطی کردن فیلدهای سفارشی وردپرس
جلسه 43: طراحی شبکه پست، مسیر راهنما، افزودن Arrow به اسلایدر و آیکون کنار منو
- ساخت شبکه پست شبیه تلویزیون میهن وردپرس
- افزودن فلش به مسیر راهنما در سایت
- افزودن Arrow به اسلایدر سایت
- اضافه کردن آیکون فلش به منوهای دارای زیرمنو
جلسه 44: پاسخ به سوالات شما و چند زبانه کردن قالب وردپرس
- کار با فایلهای استایل rtl.css و ltr.css
- چپ چین کردن قالب وردپرس
- راست چین کردن قالب وردپرس
- افزودن قابلیت ترجمه به قالب
- ساخت فایلهای ترجمه برای قالب
- استفاده از تابع e_
- سازگار کردن قالب با افزونههای چند زبانه وردپرس
- کار با نرم افزار Poedit
جلسه 45: اسکرول صفحه با کلیک روی یک یا چند دکمه
- استفاده از خاصیت Smooth Scroll در CSS
- ساخت نوار ثابت پیمایش در صفحه محصول
- کلیک روی دکمه و اسکرول به بخش دلخواه از صفحه
جلسه 46: سازگار کردن قالب با المنتور و ساخت المنت جدید
- معرفی افزونه المنتور
- بررسی مستندات المنتور برای توسعهدهندگان
- سازگار کردن قالب با المنتور
- ساخت افزونه مکمل قالب برای المنتور
- ساخت المنت اختصاصی جدید برای المنتور
جلسه 47: ادغام پلاگین با قالب وردپرس و نمایش تاریخ آپدیت مطالب
- ادغام کردن پلاگین با قالب ساخته شده
- نمایش تاریخ آپدیت مطالب سایت
- نمایش تاریخ آپدیت جایگزین با تاریخ انتشار
جلسه 48: Ajax کردن سبد خرید و بستن منوی موبایل با کلیک خارج از کادر
- ایجکس کردن سبد خرید مینی
- بستن منوی موبایلی با کلیک خارج از کادر منو
جلسه 49: ساخت فرم جستجوی تمام صفحه
- آموزش کار با جی کوئری
- نمایش و مخفی کردن یک المنت با کلیک روی المنت دیگر
- ساخت فرم تمام صفحه برای جستجو
- ساخت دکمه بستن جستجو
برای ارسال سوال یا نظر خود باید وارد سایت شوید.