آموزشگاه برنامه نویسان

کمپ آموزشی طراحی وب سایت ( پیاده سازی تاپلرن )

توضیحات این دوره

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

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

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

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

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

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

مزایای شرکت در این دوره

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

سرفصل این دوره

  • مقدمه
    • آشنایی با صفحات وب
    • استانداردهای جهانی وب
    • زبان های برنامه نویسی
      • سمت سرور (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

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

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

مشاور پروژه های برنامه نویسی و بازاریابی الکترونیکی

آیا نیاز به یک مشاور حرفه ای و مجرب در پروژه های برنامه نویسی و یا پروژه های بازاریابی الکترونیکی خود دارید ؟

مهندس ایمان مدائنی مدرس بین المللی و رسمی مایکروسافت، مدیر و موسس انجمن برنامه نویسان و آموزشگاه برنامه نویسان ، دارای مدارک رسمی Microsoft Certified Trainer - MCT و MCSD و MCP و MCSE و MCSA از مایکروسافت، مشاور چندین سازمان و ارگان دولتی و شرکت های خصوصی، می تواند در این مسیر شما را همراهی نماید.

آخرین مطالب بلاگ

مشاهده همه