جلسه اول

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

جلسه دوم

• چیدمان و طرح بندی استاندارد یک صفحه ی وب در فتوشاپ
• مفهوم سند و ایجاد یک سند برای طرح گرافیکی یک صفحه وب
• آشنایی با ابزارهای فتوشاپ برای طراحی یک صفحه وب
• طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
• مفاهیم 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. یادگیری شما در کمترین زمان ممکن صورت می‌گیرد.
5. می توانید بصورت مستقیم با مدرس دوره طراحی سایت در ارتباط باشید.