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

توضیحات دوره

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

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