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

لوگو

توضیحات دوره

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

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

پیش نیازها

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

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

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

سرفصل دوره

  • مقدمه
    • آشنایی با صفحات وب
    • استانداردهای جهانی وب
    • زبان های برنامه نویسی
      • سمت سرور (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
    • ایجاد سرصفحه ها
    • ایجاد پاراگرف ها با استفاده از عنصر <p>
    • ایجاد خط فاصله با استفاده از عنصر<br />‎
    • ایجاد متن از پیش فرمت شده با استفاده از عنصر <pre>
  • عنصرهای نمایشی
    • عنصر <b>
    • عنصر <i>
    • عنصر <sup>
    • عنصر <sub>
    • عنصر<hr />‎
  • عنصرهای جمله ای
    • عنصر <em> برای افزودن تاکید
    • عنصر <strong> برای افزودن تاکید قوی
    • عنصر <address> برای افزودن آدرس
    • عنصر <blockquote> برای نقل قول کردن
    • عنصر <q> برای نقل قول های کوتاه
    • عنصر <code> برای نمایش سورس کد
  • لیست ها
    • استفاده از عنصر <ul> برای ایجاد لیست های فاقد شمارش
    • لیست های دارای شمارش
    • لیست های Definition
    • لیست های تو در تو
  • کار با تصاویر
    • صفت Src
    • صفت Alt
  • پیوند ها
    • صفت Href
    • صفت Target
    • استفاده از Anchor
    • لینک کردن نام، تصویر و ...
  • فرم ها
    • آشنایی با فرم ها
    • ایجاد یک فرم با استفاده از عنصر <form>
      • صفت action
      • صفت method
      • صفت id
      • صفت onsubmit
      • و عنصر <form>
    • کنترل های قابل استفاده در فرم ها
      • ورودی متن
      • دکمه ها
      • چک باکس ها
      • دکمه های رادیویی
      • باکس های انتخاب
      • باکس های انتخاب فایل
      • کنترل های مخفی
    • ایجاد لیبل برای کنترل های با استفاده از عنصر <label>
    • سازماندهی فرم ها با استفاده از عنصرهای <fieldset> و <legend>
    • فوکوس
      • ترتیب گردش Tab
      • Access Key ها
    • کنترل های غیرفعال و فقط خواندنی
  •   مهاجرت از HTML4/XHTML به HTML5
    • تغییر doctype
    • تغییر Encoding
    • اضافه کردن اسکریپت برای پشتیبانی از HTML5
    • حذف کردن تگ head
    • آشنایی با المنت های معنی دار
      • header
      • nav
      • footer
      • article
      • section
    • قابلیت های جدید HTML5
    • اعتبار سنجی فرم ها
      • نمایش و اجرای فایل های چند رسانه ای
        • Video
        • Audio
  • 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
      • باگ مدل 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
        • مشخصه empty-cells
        • مشخصه caption-side
        • مشخصه table-layout
      • شبه کلاس های:focus و:active
      • مشخصه های دیگر
        • مشخصه cursor
        • مشخصه display
        • مشخصه visibility
      • مختصات دهی و چینش با استفاده از CSS
        • مشخصه 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
  • کار با 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
  • زبان برنامه نویسی استایل ها (Less)
    • بیشتر بدانیم
    • تفاوت های Less و Sass
    • آشنایی و شروع کار با Less
      • تنظیمات اولیه برای استفاده از Less
      • متغیر ها در Less
      • استایل های ترکیبی در Less
      • استایل های تو در تو در Less
      • استفاده از اپراتورها در Less
      • استفاده از توابع در Less
      • محدوده در Less
      • ترکیب کردن چند فایل استایل در Less
    • کامپایل کردن فایل های 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
    • چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
  • طراحی قالب سایت ( شروع پروژه عملی سایت TopLearn.com )

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

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

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

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