آکادمی برنامه نویسان

لوگو

توضیحات دوره

یک وب سایت تشکیل شده است از تعدادی فایل با فرمت های مختلف که توسط مرورگرهایی همچون Firefox , Chrome و ... توسط کامپیوتر های شخصی، موبایل و یا تبلت بازدید می شوند. برای  پیاده سازی یک وب سایت دو بخش کلی برای کد نویسی وجود دارد که به یک بخش، سمت سرور (Server Side) و دیگری سمت کلاینت یا کاربر (Client Side)  گفته می شود. برای طراحی یک قالب، نیاز به دانستن موضوعاتی مانند: Html, Css, Js می باشد.

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

پیش نیازها

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

مخاطبان این دوره

  • دوستداران طراحی سایت
  • کسانی که سعی دارند ساخت صفحات وب را خودشان به عهده بگیرند
  • دوستداران برنامه نویسی سمت کلاینت (jQuery)
  • دوستداران استایل نویسی با کمک زبان های برنامه نویسی Less

سرفصل دوره

  • آشنایی باHTMLوXHTML
    • Tagها وElementها
    • جدا کردنHeadها ازBody
    • Attributeچیست
    • یاد گرفتن از دیگران با نگاه به سورس کد آنها
    • آشنایی با عنصرهایBlockوInline
    • عناصری برای زیبا سازی متن
    • طراحی با <table> (منسوخ شده)
    • گروه بندی کردن عنصرها با استفاده از <div>و <span>
    • Commentها
  • ساختار یک فایلHTML
    • اعلانXML
    • اعلان نوعDocument
    • عنصر <html>
    • عنصر <head>
    • عنصر <title>
    • عنصر <body>
  • مبانی فرمت کردن متن
    • float
    • ایجاد سرصفحه ها
    • ایجاد پاراگرف ها با استفاده از عنصر <p>
    • ایجاد خط فاصله با استفاده از عنصر‎<br />‎
    • ایجاد متن از پیش فرمت شده با استفاده از عنصر <pre>
  • عنصرهای نمایشی
    • عنصر <b>
    • عنصر <i>
    • عنصر <sup>
    • عنصر <sub>
    • عنصر‎<hr />‎
  • عنصرهای جمله ای
    • عنصر <em>برای افزودن تاکید
    • عنصر <strong>برای افزودن تاکید قوی

عنصر <q>برای نقل قول های کوتاه

  •  
    • عنصر <code>برای نمایش سورس کد
  • لیست ها
    • استفاده از عنصر <ul>برای ایجاد لیست های فاقد شمارش
    • لیست های دارای شمارش
    • لیست هایDefinition
    • لیست های تو در تو
  • کار با تصاویر
    • صفتSrc
    • صفتAlt
  • پیوند ها
    • صفتHref
    • صفتTarget
    • استفاده ازAnchor
    • لینک کردن نام، تصویر و...
  • فرم ها
    • آشنایی با فرم ها
    • ایجاد یک فرم با استفاده از عنصر <form>
      • صفتaction
      • صفتmethod
      • صفتid
      • صفتonsubmit
      • و عنصر <form>
    • کنترل های قابل استفاده در فرم ها
      • ورودی متن
      • دکمه ها
      • چک باکس ها
      • دکمه های رادیویی
      • باکس های انتخاب
      • باکس های انتخاب فایل
      • کنترل های مخفی
    • ایجاد لیبل برای کنترل های با استفاده از عنصر <label>
    • سازماندهی فرم ها با استفاده از عنصرهای <fieldset>و <legend>
    • فوکوس
      • ترتیب گردشTab
      • Access Keyها
    • کنترل های غیرفعال و فقط خواندنی
  • مهاجرت ازHTML4/XHTMLبهHTML5
    • حذف کردن تگhead
    • آشنایی با المنت های معنی دار
      • header
      • nav
      • footer
      • article
      • section
    • قابلیت های جدیدHTML5
    • اعتبار سنجی فرم ها
  • Cascading Style Sheet
    • آشنایی باCSS
      • یک مثال ساده
      • ارث بری
    • روش های مختلف استفاده ازCSSدر صفحه
      • عنصر <link>
      • عنصر <style>
      • مزایایCSSهایExternal
    • مشخصه هایCSS
      • کنترل کردن متن
        • مشخصهfont-family
        • مشخصهfont-size
        • مشخصهfont-weight
        • مشخصهfont-style
        • مشخصهfont-stretch
      • فرمت کردن متن
        • مشخصه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
      • باگ مدلBoxدرInternet Explorer
    • مطالبی بیشتر در زمینه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
        • مشخصهtable-layout
      • شبه کلاس های‎:focusو‎:active
      • مشخصه های دیگر
        • مشخصهcursor
        • مشخصهdisplay
        • مشخصهvisibility
      • مختصات دهی و چینش با استفاده ازCSS
        • مشخصهPosition
        • مختصات دهی بصورت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
  • کار باCSS3و قابلیت های جدید آن
    • Advanced Selectors
    • گرد کردن گوشه ها- Rounded Corners
    • حاشیه تصویری- Border Image
    • سایه ها- Box Shadow & Text Shadow
    • رنگ ها- Colors
      • RGBA
      • Gradient
    • Transformچرخش ، جابجایی و...
    • قاب های چند ستونی- Multicolumn Layout
    • استفاده از فونت در وب- Web Fonts
    • متحرک سازی اجزای صفحه - Animations and Transitions
    • ایجاد متن و شمارنده - Generated Content and Counters
    • Box Sizing
    • Media Queries
    • پس زمینه- Background
      • پس زمینه های متعدد- Multiple Backgrounds
      • background-size
      • background-clip
      • background-origin
    • خاصیت های جدید برایTextها
      • text-overflow
      • word-wrap
      • word-break
  • زبان برنامه نویسی استایل ها(Sass)
    • بیشتر بدانیم
    • تفاوت هایLessوSass
    • آشنایی و شروع کار sass
      • تنظیمات اولیه برای استفاده sass
      • متغیر ها sass
      • استایل های ترکیبی درsass
      • استایل های تو در تو sass
      • استفاده از اپراتورها sass
      • استفاده از توابع sass
      • محدوده sass
      • ترکیب کردن چند فایل استایل sass
    • کامپایل کردن فایل هایLess
  • مقدمه ای برjQuery
    • jQueryچیست؟
    • jQuery چگونه کار می کند؟
    • اضافه کردن رفرنس هایjQueryبه صفحات
    • Syntax jQuery
    • نحوه ی کار باjQuery
    • هسته یjQuery
    • انتخاب آیتم ها باjQuery
      • انتخابگرهایjQuery
      • Universal Selector
      • ID Selector
      • Element Selector
      • Class Selector
      • Selectorهای گروهی و ترکیبی
    • استفاده از متدهایCSSدرjQuery
      • متدcss(name, value)‎
      • متدcss(name)‎
      • متدcss(properties)‎
      • متدaddClass
      • متدremoveClass
      • متدtoggleClass
    • ایجاد افکت باjQuery
      • متدshow‎
      • متدhide
      • متد toggle
      • متدslideDown
      • متدslideUp
      • متدslideToggle
      • متدfadeIn
      • متدfadeOut
      • متدfadeTo
      • متدanimate
  • سازگاری صفحه باBrowserهای مختلف(Corss Browser Compatibility)
    • Cross Browser Compatibilityچیست؟
    • رعایت اصولCross Browser
    • چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
  • پیاده سازی پروژه عملی ( صفحه ی landing قدیمی سایت تاپ لرن )

 

اهداف این آموزش

یادگیری کد های Html, Css , javascripts , jQuery  و less

نحوه استفاده و پیاده سازی کد ها در طراحی یک سایت

طراحی و پیاده سازه یک قالب وب سایت