جهت اطلاع از وضعیت دوره ها و دوره های جدید آکادمی برنامه نویسان در کانال تلگرام ما عضو شوید .
عضویت در کانال تلگرام آکادمی برنامه نویسان

دوره آموزش طراحی سایت مقدماتي تا پیشرفته

دوره آموزش طراحی سایت مقدماتي تا پیشرفته ثبت نام
توجه ! در کلاس از مطالب فیلم و صدا تهیه میشود و پایان هر جلسه در اختیار دانشجویان عزیر قرار داده خواهد .

شرایط اقساط

شرایط اقساط بدین صورت می باشد مبلغ 200/000 تومان در هنگام ثبت نام پرداخت میشود و ما بقی شهریه در هر جلسه مقداری پرداخت شود و تا جلسه 4 کلاس باید تسویه کامل انجام شود .

با ارائه چک معتبر شرایط اقساط طولانی تر نیز می تواند باشد .

شرح مختصری از دوره

در این دوره، شما طراحی سایت را از 0 تا 100 آموزش خواهید دیده. در ابتدا آشنایی کاملی با Html , Css , JavaScript خواهید داشت و در ادامه با امکانات جدید و پیشرفته HTML5 و CSS3 آشنا خواهید شد و تکنیک طراحی یک سایت Responsive و استفاده از زبان برنامه نویسی Less برای استایل نویسی را یاد خواهید گرفت. برنامه نویسی سمت کلاینت (Angular JS , jQuery) یکی دیگر از آموزش های این دوره می باشد که بصورت کامل به آن پرداخته خواهد شد.

مخاطبان دوره

  • دوستداراد طراحی سایت که هیچ اطلاعات اولیه درباره طراحی صفحات وب ندارند
  • افرادی كه دوست دارند ساخت صفحات وب را از 0 تا 100 آموزش ببینند
  • کسانی که سعی دارند ساخت صفحات وب را خودشان به عهده بگیرند
  • برنامه نویسان وب سایت
  • دوستداران برنامه نویسی سمت کلاینت (jQuery)
  • دوستداران یادگیری فرم ورک Angular JS
  • دوستداران استایل نویسی با کمک زبان برنامه نویسی Less
  • علاقه مندان به طراحی صفحات Responsive

پیشنیاز دوره

این دوره پیشنیاز ندارد

عناوین مهم دوره

  • طراحی صفحات وب بر اساس استانداردهای W3C
  • تکنیک های طراحی صفحات وب با استفاده از div و css
  • آموزش HTML و XHTML بصورت کامل و اصولی
  • استفاده از محیط های NotePade, Visual Studio, Dreamweaver برای کدنویسی
  • بررسی مزایای طراحی Div Based نسبت به متدهای منسوخ شده Table Based
  • طراحی منطبق با مرورگرهای مختلف (Cross Browser Compatibility)
  • آموزش CSS بصورت کامل و تخصصی
  • آشنایی با رنگ ها و بکارگیری آنها در صفحات HTML
  • تکنیک های طراحی منو و زیر منو با استفاده از CSS
  • ایجاد دکمه ها و برچسب های مختلف با استفاده از CSS
  • بررسی تکنیک های Positioning در CSS
  • بهینه سازی و کم حجم سازی فایل های CSS
  • آموزش Cross Browser Compatibility (تطبیق سایت با مرورگرهای مختلف)
  • بهینه سازی و کم حجم کردن (Optimization) تصاویر بدون تغییر در کیفیت آنها
  • بهینه سازی و کم حجم کردن (Optimization) سایت
  • آشنایی با زبان برنامه نویسی سمت کلاینت JavaScript
  • آشنایی با jQuery و نحوه کار آن
  • آشنایی با انواع دستورات و توابع در jQuery
  • آشنایی با Selector های jQuery
  • ایجاد انواع افکت توسط jQuery
  • استفاده از دستورات بهینه ی jQuery بجای JavaScript
  • آموزش طراحی با استفاده از Div و CSS (طراحی بدون Table)
  • طراحی یک سایت استاندارد
  • بررسی استاندارد بودن صفحات HTML و فایل های CSS توسط سایت W3C
  • آشنایی با المنت های جدید HTML5
  • آشنایی با امکانات جدید CSS3
  • معرفی انواع وروردی های جدید از قبیل date , time , email, color , range , ...
  • اعتبار سنجی فرم ها
  • بررسی CSS3 بصورت کامل و تخصصی
  • آشنایی و برنامه نویسی استایل ها (Less)
  • استفاده از ابزارهای jQuery
  • آموزش Angular JS
  • آشنایی با Bootstrap
  • قالب بندی صفحات با استفاده از بوت استراپ
  • طراحی یک سایت تک صفحه ای HTML5 ، CSS3 و Responsive


 

سرفصل دوره

  • مقدمه
    • آشنایی با صفحات وب
    • استانداردهای جهانی وب
    • زبان های برنامه نویسی
      • سمت سرور (server-side)
      • سمت کاربر (client-side)
  • آشنایی با HTML و XHTML
    • Tag ها و Element ها
    • جدا کردن Head ها از Body
    • Attribute چیست
    • یاد گرفتن از دیگران با نگاه به سورس کد آنها
    • آشنایی با عنصرهای Block و Inline
    • عناصری برای زیبا سازی متن
    • طراحی با <table> (منسوخ شده)
    • گروه بندی کردن عنصرها با استفاده از <div> و <span>
    • Comment ها
  • ساختار یک فایل HTML
    • اعلان XML
    • اعلان نوع Document
    • عنصر <html>
    • عنصر <head>
    • عنصر <title>
    • عنصر <body>
  • مبانی فرمت کردن متن
    • White Space و Flow
    • ایجاد سرصفجه ها با استفاده از عنصر <hn>
    • صفت Align (منسوخ شده)
    • ایجاد پاراگرف ها با استفاده از عنصر <p>
    • ایجاد خط فاصله با استفاده از عنصر ‎<br />‎
    • ایجاد متن از پیش فرمت شده با استفاده از عنصر <pre>
  • عنصرهای نمایشی
    • عنصر <b>
    • عنصر <i>
    • عنصر <sup>
    • عنصر <sub>
    • عنصر ‎<hr />‎
  • عنصرهای جمله ای
    • عنصر <em> برای افزودن تاکید
    • عنصر <strong> برای افزودن تاکید قوی
    • عنصر <address> برای افزودن آدرس
    • عنصر <acronum> برای افزودن اختصارها
    • عنصر <blockquote> برای نقل قول کردن
    • عنصر <q> برای نقل قول های کوتاه
    • عنصر <code> برای نمایش سورس کد
  • لیست ها
    • استفاده از عنصر <ul> برای ایجاد لیست های فاقد شمارش
    • لیست های دارای شمارش
    • لیست های Definition
    • لیست های تو در تو
  • کار با تصاویر
    • صفت Src
    • صفت Alt
  • پیوند ها
    • صفت Href
    • صفت Target
    • استفاده از Anchor
    • لینک کردن نام، تصویر و ...
  • فرم ها
    • آشنایی با فرم ها
    • ایجاد یک فرم با استفاده از عنصر <form>
      • صفت action
      • صفت method
      • صفت id
      • صفت name (منسوخ شده)
      • صفت onsubmit
      • صفت onreset
      • صفت enctype
      • صفت accept-charset
      • صفت accept
      • صفت target
      • White Space و عنصر <form>
    • کنترل های قابل استفاده در فرم ها
      • ورودی متن
      • دکمه ها
      • چک باکس ها
      • دکمه های رادیویی
      • باکس های انتخاب
      • باکس های انتخاب فایل
      • کنترل های مخفی
    • ایجاد لیبل برای کنترل های با استفاده از عنصر <label>
    • سازماندهی فرم ها با استفاده از عنصرهای <fieldset> و <legend>
    • فوکوس
      • ترتیب گردش Tab
      • Access Key ها
    • کنترل های غیرفعال و فقط خواندنی
  • Cascading Style Sheet
    • آشنایی با CSS
      • یک مثال ساده
      • ارث بری
    • روش های مختلف استفاده از CSS در صفحه
      • عنصر <link>
      • عنصر <style>
      • مزایای CSS های External
    • مشخصه های CSS
    • کنترل کردن متن
      • مشخصه font-family
      • مشخصه font-size
      • مشخصه font-weight
      • مشخصه font-style
      • مشخصه font-variant
      • مشخصه font-stretch
      • مشخصه font-size-adjust
    • فرمت کردن متن
      • مشخصه color
      • مشخصه text-align
      • مشخصه vertical-align
      • مشخصه text-decoration
      • مشخصه text-ident
      • مشخصه text-shadow
      • مشخصه text-transform
      • مشخصه letter-spacing
      • مشخصه word-spacing
      • مشخصه white-space
      • مشخصه direction
    • کلاس های شبه متن
      • شِبهِ کلاس first-letter
      • شِبهِ کلاس first-line
    • انتخابگر ها
      • انتخابگر Universal
      • انتخابگر Type
      • انتخابگر Class
      • انتخابگر ID
      • انتخابگر فرزند
      • انتخابگر Descendant
      • انتخابگر هم نوع مجاور
      • انتخابگر هم نوع عمومی
      • انتخابگر صفت
    • طول ها
      • واحدهای نسبی
      • واحدهای مطلق
      • درصدها
    • آشنایی با مدل Box
      • مثالی از کاربرد مدل Box
      • مشخصه های Border
      • مشخصه padding
      • مشخصه margin
      • ابعاد یک Box
  • مطالبی بیشتر در زمینه Cascading Style Sheet ها
    • لینک ها
    • پس زمینه ها
      • مشخصه background-color
      • مشخصه background-image
      • مشخصه background-repeat
      • مشخصه background-position
      • مشخصه background-attachment
      • مشخصه background (شکل کوتاه)
    • لیست ها
      • مشخصه list-style-type
      • مشخصه list-style-position
      • مشخصه list-style-image
      • مشخصه list-style (شکل کوتاه)
    • جدول ها
      • مشخصه های خاص جدول ها
      • مشخصه border-collapse
      • مشخصه border-spacing
      • مشخصه empty-cells
      • مشخصه caption-side
      • مشخصه table-layout
    • Outline ها
      • مشخصه outline-width
      • مشخصه outline-style
      • مشخصه outline-color
      • مشخصه oultine (شکل کوتاه)
    • شبه کلاس های ‎:focus و ‎:active
    • مشخصه های دیگر
      • مشخصه cursor
      • مشخصه display
      • مشخصه visibility
    • قواعد اضافی
      • قاعده ‎@Import : ماژولار کردن Style Sheet ها
      • قاعده ‎!important
      • قاعده ‎@charset
    • مختصات دهی و چینش با استفاده از CSS
      • Flow عادی
      • مشخصه Position
      • مشخصه های Box Offset
      • مختصات دهی بصورت Relative
      • مختصات دهی Fixed
      • مشخصه z-index
      • شناور کردن با استفاده از مشخصه float
      • مشخصه clear
  • واحد های اندازه گیری در CSS
    • بررسی و کاربرد واحد اندازه گیری px
    • بررسی و کاربرد واحد اندازه گیری em
    • بررسی و کاربرد واحد اندازه گیری ex
    • بررسی و کاربرد واحد اندازه گیری pt
    • بررسی و کاربرد واحد اندازه گیری pc
    • بررسی و کاربرد واحد اندازه گیری in
    • بررسی و کاربرد واحد اندازه گیری cm
    • بررسی و کاربرد واحد اندازه گیری mm
    • بررسی و کاربرد واحد اندازه گیری Percentage
    • کجا باید از چه واحدی استفاده کنیم
  • آشنایی با رنگ ها
    • استفاده از نام رنگ
    • استفاده از کد ترکیبی (عدد دهدهی) - RGB
    • استفاده از کد ترکیبی (عدد مبنای 16) - Hex
  • بررسی Box Model
    • Box Model چیست
    • بررسی Border
    • بررسی Margin
    • بررسی Padding
    • ابعاد Box
    • بررسی height
    • بررسی width
    • بررسی line-height
    • بررسی min-height
    • بررسی max-height
    • برسی min-width
    • بررسی max-width
  • Position ها CSS
    • بررسی و کاربرد Static Position
    • بررسی و کاربرد Absolute Position
    • بررسی و کاربرد Relative Position
    • بررسی و کاربرد Fixed Position
  • سازگاری صفحه با Browser های مختلف (Corss Browser Compatibility)
    • Cross Browser Compatibility چیست؟
    • رعایت اصول Cross Browser
    • چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
  • جمع بندی تمام مطالب فوق
  • طراحی قالب سایت با استفاده از Div و CSS
    • طراحی بخش های مختلف Layout با استفاده از div
      • تکنیک های طراحی Header
      • تکنیک های طراحی منو با استفاده از CSS
      • تکنیک های طراحی SubMenu با استفاده از CSS
      • تکنیک های طراحی Side Bar ها
      • تکنیک های طراحی محتوای صفحه
      • تکنیک های طراحی Footer
    • ایجاد صفحه اصلی
    • ایجاد صفحه تماس با ما
    • ایجاد صفحه درباره ما
    • ایجاد گالری تصاویر
  • مهاجرت از HTML4/XHTML به HTML5
    • تغییر doctype
    • تغییر Encoding
    • اضافه کردن اسکریپت برای پشتیبانی از HTML5
    • حذف کردن تگ head
    • آشنایی با المنت های معنی دار
      • header
      • nav
      • footer
      • article
      • section
  • قابلیت های جدید HTML5
    • وروردی های جدید
      • Date
      • Time
      • Email
      • Color
      • Range
      • Slide
    • اعتبار سنجی
  • نمایش و اجرای فایل های چند رسانه ای
    • Video
    • Audio
  • کار با CSS3 و قابلیت های جدید آن
    • Advanced Selectors
    • گرد کردن گوشه ها - Rounded Corners
    • حاشیه تصویری - Border Image
    • سایه ها - Box Shadow & Text Shadow
    • رنگ ها - Colors
      • RGBA
      • Gradient
    • Transform (چرخش ، جابجایی و ...)
    • قاب های چند ستونی - Multicolumn Layout
    • استفاده از فونت در وب - Web Fonts
    • متحرک سازی اجزای صفحه - Animations and Transitions
    • محاسبه مقدارها توسط calc()
    • ایجاد متن و شمارنده - Generated Content and Counters
    • Box Sizing
    • Media Queries
    • پس زمینه - Background
      • پس زمینه های متعدد - Multiple Backgrounds
      • background-size
      • background-clip
      • background-origin
    • خاصیت های جدید برای Text ها
      • text-overflow
      • word-wrap
      • word-break
  • زبان برنامه نویسی استایل ها (Less)
    • بیشتر بدانیم
    • تفاوت های Less و Sass
    • آشنایی و شروع کار با Less
      • تنظیمات اولیه برای استفاده از Less
      • متغیر ها در Less
      • استایل های ترکیبی در Less
      • استایل های تو در تو در Less
      • استفاده از اپراتورها در Less
      • استفاده از توابع در Less
      • محدوده در Less
      • ترکیب کردن چند فایل استایل در Less
    • کامپایل کردن فایل های Less
  • انجام چند تمرین
    • ایجاد نوار پیشرفت با CSS3
    • ایجاد منو و زیر منوهای شناور با CSS3
    • ایجاد دکمه و برچسب های مختلف
    • ساخت یک اسلایدشو تنها با استفاده از CSS3
    • نحوه طراحی سایت های Responsive و قابل اجرا در تبلت و موبایل و ...
    • طراحی یک سایت ساده Responsive
    • ساخت یک گالری تصویر
  • نکات مهم درباره استاندارد بودن کدهای HTML و CSS
  • آشنایی و استفاده از ابزارهای jQuery
    • مقدمه ای بر jQuery
      • jQuery چیست؟
      • jQuery چگونه کار می کند؟
      • اضافه کردن رفرنس های jQuery به صفحات
      • Syntax jQuery
      • نحوه ی کار با jQuery
      • هسته ی jQuery
  • انتخاب آیتم ها با jQuery
    • انتخابگرهای jQuery
    • Universal Selector
    • ID Selector
    • Element Selector
    • Class Selector
    • Selector های گروهی و ترکیبی
  • رویدادها / Events
    • رویدادهای فرم
      • متد .blur()
      • متد .change()
      • متد .focus()
      • متد .select()
      • متد .submit()
      • متد .scroll()
    • رویدادهای کیبورد
      • متد .keydown()
      • متد .keypress()
      • متد .keyup()
    • رویدادهای موس
      • متد .click()
      • متد .dblclick()
      • متد .hover()
      • متد .mousedown()
      • متد .mouseenter()
      • متد .mouseleave()
      • متد .mousemove()
      • متد .mouseout()
    • Effects
      • سفارشی
        • متد .animate()
        • متد .queue()
        • متد .dequeue()
        • متد .clearQueue()
        • متد .delay()
        • متد .stop()
        • متد .finish()
      • کشویی
        • متد .slideDown()
        • متد .slideUp()
        • متد .slideToggle()
      • محو شدن
        • متد .fadeIn()
        • متد .fadeOut()
        • متد .fadeTo()
        • متد .fadeToggle()
      • ساده
        • متد .hide()
        • متد .show()
        • متد .toggle()
      • CSS
        • متد .css()
        • متد .width()
        • متد .height()
        • متد .position()
        • متد .offset()
        • متد .scrollTop()
        • متد .scrollLeft()
        • متد .addClass()
        • متد .hasClass()
        • متد .removeClass()
        • متد .toggleClass()
      • ویژگی ها / Attributes
        • متد .attr()
        • متد .html()
        • متد .prop()
        • متد .removeAttr()
        • متد .removeProp()
        • متد .val()
      • انتخابگرها / Selectors
        • انتخابگرهای پایه
        • انتخابگرهای وراثتی
        • انتخابگرهای اصلی
        • انتخابگرهای فرزند
        • انتخابگرهای محتوی
        • فیلتر های فرم
  • آموزش Angular JS
    • مقدمه
    • معرفی Angular
    • توسعه دادن HTML توسط Angular
    • آشنایی با زبان Angular
      • دستور ng-init
      • اصطلاحات
      • کنترلرها
      • اعداد
      • رشته ها
      • اشیاء
      • آرایه ها
    • تکرار المنتهای HTML
    • متدها
    • متدهای خارجی
    • فیلتر ها
    • اضافه کردن فیلتر به دستورات جدید
    • XML
    • جدول ها
    • HTML DOM
    • رویداد ها
    • ماژول ها
    • زمان بارگزاری کد های Angular
    • ایجاد فایلها برنامه
    • فرم ها
    • اعتبار سنجی اعضای یک فرم
    • جمع بندی و بررسی مطالب بحث شده
  • معرفی bootstrap
    • معرفی
    • طراحی سریع
    • اولین صفحه سایتمان
    • محتویات
    • قرار دادن اسکریپت ها و استایل ها
    • مفاهیم مربوط به هسته ی بوت استرپ
    • خلاصه
    • شروع کار با بوت استرپ
      • معرفی
      • ساختار جدولی
      • ساختار ساده
      • جداول ثابت
      • جداول متحرک
      • طراحی responsive
      • قابلیت های طراحی responsive
      • چند ایده جدید
      • خلاصه
  • انجام پروژه عملی
    • طراحی سایت تک صفحه ای - Single Page Website
    • طراحی سایت چند صفحه ای با استفاده HTML5 و CSS3 - Multi Page Website
  • جمع بندی کلیه مباحث