دوره جامع آموزش طراحی وب سایت

توضیحات دوره

یک وب سایت تشکیل شده است از تعدادی فایل با فرمت های مختلف که توسط مرورگرهایی همچون 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

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

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

https://barnamenevisan.info/c/Op

توضیحات دوره
پیش نیازها
مخاطبان این دوره
سرفصل دوره
اهداف این آموزش