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

توضیحات دوره

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

شما در دوره فشرده طراحی سایت آموزش خواهید دید که چگونه یک قالب وب سایت ریسپانسیو (Responsive) را طراحی کنید.

پیش نیازها

آشنایی با مبانی کامپیوتر

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

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

سرفصل دوره

مقدمه
- آشنایی با صفحات وب
- استانداردهای جهانی وب
- زبان های برنامه نویسی
  - سمت سرور (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
مقدمه ای بر 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
- چگونه صفحات وب ما در تمام مرورگرها یکسان نمایش داده شود
طراحی قالب سایت (شروع پروژه)

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

طراحی صفحات وب بر اساس استانداردهای 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
آموزش Cross Browser Compatibility (تطبیق سایت با مرورگرهای مختلف)
بهینه سازی و کم حجم کردن (Optimization) تصاویر بدون تغییر در کیفیت آنها
آشنایی با زبان برنامه نویسی سمت کلاینت JavaScript
آشنایی با jQuery ، نحوه کار و استفاده از انواع دستورات و توابع با آن
آشنایی با Selector های jQuery
ایجاد انواع افکت توسط jQuery
استفاده از دستورات بهینه ی jQuery بجای JavaScript
آشنایی با Bootstrap
قالب بندی صفحات با استفاده از بوت استراپ
آموزش طراحی با استفاده از تگهای جدید HTML5
طراحی یک سایت Responsive
نحوه بررسی استاندارد بودن صفحات HTML و فایل های CSS

https://barnamenevisan.info/c/Dx

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