آموزش صفر تا صد طراحی سایت - طراحی قالب وردپرس با کد نویسیReviewed by رضا on Apr 15Rating: 5.0آموزش صفر تا صد طراحی سایت - طراحی قالب وردپرس با کد نویسیامروزه برای هر کسب و کاری که ما داریم، به شدت احساس نیاز می شود که یک وبسایت داشته باشیم. برای داشتن یک وب سایت، وردپرس یکی از بهترین گزینه هاست که با توجه

آموزش صفر تا صد طراحی سایت - طراحی قالب وردپرس با کد نویسی

آموزش صفر تا صد طراحی سایت

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

مراحل طراحی قالب وردپرس

  • طراحی اولیه سایت
  • طراحی گرافیکی در فتوشاپ
  • تبدیل طرح گرافیکی به کد
  • تبدیل کد به قالب وردپرس

فرآیند آموزش طراحی قالب وردپرس

شما در این دوره آموزش یک پروژه را از ۰ تا ۱۰۰ یعنی از یک سند خالی در فتوشاپ تا یک قالب در وردپرس، طبق مراحل طراحی قالب اختصاصی (مراحلی که در بالا آورده شد) انجام می دهید و در جریان تمام مراحل و حتی مشکلات احتمالی قرار می گیرید. و در آخر اضافه کنیم که اگر زمان و حوصله ی تمرین کردن را دارید و پیگیر این هستید که طراح وب شوید ما این آموزش را به شما پیشنهاد می کنیم.

آموزش طراحی سایت از صفر تا صد

در انتهای این دوره قادر خواهید بود طرح زیر را طراحی گرافیکی، کدنویسی و تبدیل به قالب وردپرس نمائید:

پیش نمایش طرح دوره طراحی سایت صفر تا صد

پیش نمایش قالب طراحی شده در این دوره:

مشاهده تصویر اول

مشاهده تصویر دوم

مشاهده تصویر سوم

مشاهده تصویر چهارم

مشاهده تصویر پنجم

سر فصل های این دوره آموزشی

جلسه اول
  • موارد مورد نیاز برای راه اندازی یک وبسایت
  • مفاهیم کاکرد وبسایت های اینترنتی
  • دیتاسنتر و سرور چیست؟ تفاوت سرور اختصاصی و مجازی
  • هاست چیست؟
  • دامنه چیست؟
  • سیستم مدیریت محتوا چیست؟
  • طراحی وبسایت استاتیک و داینامیک
  • چرا از وردپرس استفاده می کنیم؟
  • چگونه هاست و دامنه را به هم متصل کنیم؟
  • مفاهیم دیتابیس و کنترل پنل های مدیریت هاست
جلسه دوم
  • چیدمان و طرح بندی استاندارد یک صفحه ی وب در فتوشاپ
  • مفهوم سند و ایجاد یک سند برای طرح گرافیکی یک صفحه وب
  • آشنایی با ابزارهای فتوشاپ برای طراحی یک صفحه وب
  • طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
  • مفاهیم ruler و guideline؛ تنظیم و استفاده از آن ها
  • مفهوم رزولوشن و انتخاب آن به درستی برای یک صفحه ی وب
  • معرفی واحد ها ی اندازه گیری و انتخاب اندازه مناسب برای یک سند گرافیکی صفحه وب
 جلسه سوم
  • ایجاد طرح گرافیکی صفحه ی وب در فتوشاپ ( فایل psd طرح وب سایت)
  • ایجاد بخش های footer ،header،content و ... در فایل psd
  • اضافه کردن استایل به بخش های ایجاد شده
  • توضیح میزان شفافیت و شفافیت داخلی یک صفحه ی وب
  • معرفی انواع border و inner shadow متن و تصویر
  • توضیح مفاهیم UX و UI برای طراحی صفحات وب
  • روانشناسی رنگ و انتخاب صحیح ست رنگی در طراحی قالب
 جلسه چهارم
  • استایل دادن به بخش های مختلف سند گرافیکی یک صفحه ی وب در فتوشاپ
  • بهینه سازی و ذخیره تصاویر برای استفاده در وب
  • پسوندهای ذخیره سازی تصویر براساس استفاده در وب
  • ابزارهای برش دهی تصاویر
  • معرفی ابزار lorem ipsum برای ایجاد متن تصادفی مورد نیاز برای یک صفحه وب
  • مفهوم طراحی سایت فلت یا تخت
جلسه پنجم
  • چگونگی تبدیل فایل PSD به فایل HTML
  • توضیح در مورد فایل های HTML و CSS
  • تفاوت فایل های HTML و CSS
  • چگونگی ایجاد فایل ها ی HTML و CSS
  • طرز نمایش، استایل بندی، چیدمان و رنگ بندی صفحه ی وب با CSS
  • توضیح چگونگی نمایش یک صفحه ی وب برای user ها
  • دلیل ایجاد فایل های header، footer،content ،slider و ... به صورت جداگانه برای ایجاد صفحات وب
  • توضیح چگونگی ایجاد قسمت های header، footer،content ، slider و ... برای ایجاد یک صفحه ی وب
  • توضیح ساختار فایل HTML شامل تگ های header و body
  • معرفی تگ های مختلف HTML
جلسه ششم
  • توضیح ساختار کلی فایل HTML و تگ ها ی HTML
  • توضیح چگونگی لینک کردن فایل CSS در فایل HTML
  • توضیح مسیردهی فایل ها در CSS
  • چه کدهایی باید در فایل style.css نوشته شود؟
  • توضیح مفهوم minify و مزیت استفاده از کدهای minify شده ی html و css
  • توضیح ساختارCSS به طور کامل
  • چگونگی ایجاد کلاس و آی دی در فایل CSS و فراخوانی آنها
  • تفاوت آی دی و کلاس در یک فایل CSS
  • معرفی انتخاب کننده های (سلکتورها) CSS
  • توضیح انواع انتخاب های سلکتورهای CSS
جلسه هفتم
  • تبدیل طرح گرافیکی به کد
  • معرفی نرم افزار Dream weaver
  • ایجاد یک سند Html برای یک صفحه ی وب
  • معرفی Css و استفاده از آن برای ایجاد افکت های گرافیکی و ایجاد سند Css
  • لینک کردن صفحه های Html و Css
  • کدنویسی قالب طراحی شده در فتوشاپ
  • استفاده از کدهای css reset
  • شروع کدنویسی بخش های مختلف صفحه ی وب
  • کدنویسی header
  • کدنویسی footer
  • کدنویسی navbar
  • کدنویسی search box
 جلسه هشتم
  • اضافه کردن فونت به یک فایل Html
  • اضافه کردن تصویر پس زمینه ی سایت
  • کدنویسی بخش header شامل کدنویسی لوگو
  • کدنویسی منوی اصلی سایت
  • مفهوم hover و استفاده از آن برای ایجاد منوها
  • طراحی منو و زیرمنو با Css
  • روش های انتخاب رنگ برای طراحی وب
  • ابزارهایی برای انتخاب رنگ های flat
جلسه نهم
  • کدنویسی صفحه داخلی
  • مشخص کردن نوع و اندازه فونت سایت با استفاده از Css
  • استایل دادن به بخش های مختلف با استفاده از دستور nth-child
  • استفاده از کلاس clear در style.css
  • فیکس کردن تصویر زمینه
  • کدنویسی قسمت footer
  • الویت بخشیدن به بخش های مختلف با استفاده از دستور important
  • Hover دادن به بخش های مختلف صفحه ی وب
جلسه دهم
  • کدنویسی content صفحات دیگر سایت
  • مفهوم breadcrumb و ایجاد آن در فایل Css
  • استایل دهی به پست های یک صفحه ی وب
  • کدنویسی سایدبار
  • تبدیل باکس های سایدبار به صورت widget
  • اضافه کردن hover به باکس های سایدبار
  • ایجاد بخش ادامه مطلب برای هر پست
  • معرفی مفهوم material-design
  • اتمام کدنویسی
 جلسه یازدهم
  • آشنایی با دیتاسنترهای محبوب دنیا
  • آموزش نصب وردپرس روی لوکال هاست و هاست اصلی
  • تبدیل قالب طراحی شده به وردپرس
  • آشنایی با پنل مدیریت وردپرس
  • نصب قالب وردپرس
  • توضیح چگونگی نصب و فعال سازی یک افزونه در وردپرس
  • تغییر زبان، ساعت، تاریخ و ... پنل مدیریت وردپرس
  • نصب و راه اندازی افزونه ووکامرس
  • آشنایی با ووکامرس
  • آشنایی با درگاه پرداخت در افزونه ووکامرس
جلسه دوازدهم
  • آشنایی با سیستم مدیریت محتوا
  • چرا سیستم مدیریت محتوای وردپرس؟
  • افزونه های مورد نیاز برای ساخت فروشگاه اینترنتی
  • افزونه های مورد نیاز براس ساخت انجمن های گفتگو
  • افزونه های مورد نیاز برای ساخت شبکه های اجتماعی
  • معرفی افزونه product-addons
  • قالب وردپرس چیست؟ چه کاربردی دارد؟
  • تبدیل قالب طراحی شده به قالب وردپرسی
  • داینامیک کردن بخش های مختلف یک صفحه ی وب
  • آشنایی با فایل های وردپرس
جلسه سیزدهم
  • تفاوت برگه و پست
  • ایجاد صفحات داخلی سایت
  • معرفی افزونه Yoast SEO
  • معرفی ابزارک ها و آموزش نحوه ی کار کردن با آنها
  • اضافه کردن امکان thumbnails به وردپرس
  • استایل دهی به کل text areaها، inputها، button ها و ...
  • توضیح اینکه چرا از سیستم مدیریت محتوا استفاده می کنیم؟
  • اضافه کردن استایل Css به نظرات وردپرس
جلسه چهاردهم
  • استایل، طرح بندی و رنگ بندی برای نمایش آرشیو مطالب سایت
  • آموزش اضافه کردن ادامه مطلب به یک پست سایت
  • اضافه کردن تاریخ انتشار، دسته بندی و نویسنده به هر پست
  • اضافه کردن پنل مدیریت به قالب وردپرس
  • اضافه کردن فایوآیکون به سایت
  • قابلیت تغییر فاوآیکون از طریق پنل مدیریت قالب
  • قابلیت تغییر آیکون سایت از طریق پنل مدیریت قالب
  • اضافه کردن استایل به پنل مدیریت قالب وردپرس
  • معرفی افزونه TablePress برای ساختن جدول
  • معرفی و اجرای افزونه ی ووکامرس
  • چگونه ووکامرس را با قالب سایت سازگار کنیم؟
  • افزودن محصولات به فروشگاه از طریق افزونه ووکامرس
  • اضافه کردن style.css به ووکامرس
 جلسه پانزدهم
  • معرفی مفاهیم ریسپانسیو و سایت های واکنش گرا
  • نحوه ی تست ریسپانسیو بودن سایت ها
  •  تست ریسپانسیو بودن سایت بدون موبایل و تبلت
  •  دستورهای موردنیاز برای ریسپانسیو کردن وب سایت
  •  ریسپانسیو کردن قالب به صورت عملی
  • نمایش یک بخش از وب سایت فقط در موبایل
جلسه شانزدهم
  • معرفی کاربرد عملی خاصیت z-index در طراحی وب
  • ساخت فیلد های سفارشی در پست وردپرس
  • ساخت بخش تنظیمات برای وارد کردن اطلاعات هر پست
  • اضافه کردن باکس دانلود به قالب طراحی شده
  • ثبت دامنه و خرید هاست (راه اندازی سایت بصورت عملی)
  • انتقال قالب طراحی شده از لوکال هاست به سایت اصلی

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

  1. در این دوره علاوه بر اصول طراحی سایت٬ راه اندازی یک سایت واقعی بصورت عملی توضیح داده شده.
  2. به جای ارائه مفاهیم تئوری٬ یک قالب را بصورت کاملا عملی طراحی خواهیم کرد.
  3. یادگیری شما در کمترین زمان ممکن صورت می‌گیرد.
  4. می توانید بصورت مستقیم با مدرس دوره طراحی سایت در ارتباط باشید.
گارانتی بازگشت وجه یکساله پشتیبانی و خدمات پس از فروش این دوره