Web Design 1&2 (Pack) – HTML & CSS & Bootstrap
- (80 ساعت)
- پیش نیاز:
معرفی این دوره
HTML و CSS برای توسعه وب سایت های انعطاف پذیر ، جذاب و کاربر پسند دست به دست می دهند. از HTML (Hyper Text Markup Language) برای نشان دادن محتوا در صفحه استفاده می شود در حالی که CSS برای ارائه صفحه استفاده می شود. HTML ساختار یک وب سایت را به صورت معنایی همراه با نشانه های ارائه توضیح می دهد ، و آن را به جای زبان برنامه نویسی ، به یک زبان نشانه گذاری تبدیل می کند. HTML اجازه می دهد تا تصاویر و اشیا تعبیه شوند و می توانند برای ایجاد فرم های تعاملی استفاده شوند.
طراحی وب سایت ریسپانسیو / واکنشگرا (نمایش صحیح و بهینه صفحات وب در کامپیوتر ، تبلت ، موبایل و … )با کدهای CSS3 پیشرفته خالص و همچنین به کمک Bootstrap ، اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایتUX، پیاده سازی وبسایت بر اساس هارمونی در طرح ، رنگ و چیدمان.در گردش اطلاعات، سهولت بيشتر در طراحي اينترفيس و قابليت‌هاي نرم‌افزار، و تمركز زدايي از مهمترين جنبه‌هاي غير تکنيکي هستند كه در فرآيند تكوين و تحول موج وب2 به مراتب مهم‌تر و اثرگذارترند.
سرفصل های این دوره
web design 1:
- معرفی DOCTYPE
- آموزش روش آماده سازی بستر طراحی وب و نرم افزارهای مربوطه
- معرفی Project Structure در طراحی وب
- ارائه طبقه بندی تگ ها مانند Test Level و Block Level و …
- بررسی نکات مربوط به List ها
- بررسی پاراگراف ها، Span و کلیه تگ های طبقه بندی شده
- معرفی مفهوم Attribute
- معرفی مفهوم Comment و دلائل استفاده از آن
- معرفی و ارائه مثال از تگ های مربوط به هر طبقه بندی
- بررسی استانداردهای نامگذاری المان ها
- بررسی مفهوم Validation در اسناد Html
- معرفی CSS
- بررسی نقش CSS در آرایش تگ ها
- بررسی نکات مربوط به فونت مانند Size و Weight و …
- معرفی انواع فونت ها و پسوندهای مربوطه
- بررسی Icon ها و فونت های گوگل
- بررسی روش استفاده از کاراکترهای خاص در سند HTML
- معرفی مفهوم Hyper Link و نکات مربوط به Navigation
- آشنایی با مفهوم Anchor و Hash
- ایجاد Shortcut برای لینک ها
- بررسی Site Map و روش ایجاد آن
- بررسی روش ایجاد منو و انواع آن
- بررسی روش های مختلف آدرس دهی لینک ها مثلا Internal و External
- بررسی نکات جدید HTML5 در مورد لینک ها مانند Download
- بررسی تگ Table و اجزا مختلف آن
- بررسی معایب و مزایای Table
- بررسی نحوه استفاده از Table برای چیدمان
- بررسی نحوه اختصاص اندازه به المانها
- معرفی قابلیت های Design Envirement مانند منوها و قسمت های مختلف Dream Weaver
- بررسی روش های مختلف اعمال Style روی تگ ها مانند Inline، Internal، External
- معرفی انواع Selector ها در CSS
- بررسی نحوه استفاده از تصاویر در سند HTML
- بررسی انواع File Path
- بررسی مفهوم Save/Export For Web
- بررسی نحوه Load شدن تصاویر
- بررسی پسوندهای مختلف تصاویر
- بررسی تصاویرPNG و مشکلات نمایشی مرورگرها
- بررسی نکات مربوط به تصاویر مانند Transparency
- بررسی Image Map
- بررسی نحوه ویرایش و بهینه سازی تصاویر برای وب با نرم افزارهای مربوطه
- بررسی نحوه استفاده از تصاویر در Background
- بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
- بررسی نحوه استفاده از صدا و تصویر در Background
- معرفی IFrame و روش استفاده از آن
- بررسی روش استفاده از Google Map و سایر موارد مرتبط با IFrame
- ایجاد انیمیشن با تصاویر و ابزارهای مربوطه
- بررسی نحوه استفاده از رنگ
- بررسی نحوه استفاده از فونت
- بررسی نکات مربوط به Formatting در Table
- بررسی نکات جدید HTML5 در جداول
- بررسی مفهوم Layout های Tableless
- بررسی Div و نکات مربوطه در حیطه Positioning
- بررسی روش های تقسیم بندی صفحه
- بررسی مفهوم Margin و Padding
- بررسی Border و نکات مربوطه
- بررسی نکات مربوط به Text مانند Direction ، Decoration، Align و …
- بررسی نکات مربوط به Positioning در css
- بررسی نکات حرفه ای تر css مانند Animation و Translation
- بررسی انواع Effect ها در CSS3
- بررسی انواع Layout ها
- بررسی Localization برای زبانهای RTL
- معرفی مفهوم Float و Absolute و…
- معرفی مفاهیم مرتبط با Boxing
- بررسی Form و انواع Input ها
- معرفی تگ های مفهومی HTML5 مانند مفاهیم موارد زیر
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
- و بررسی نقش هر یک
- بررسی امکانات مرتبط با شبکه های اجتماعی
- طرح مشکل نمایش وب سایت در مرورگرهای متفاوت و نکات مربوطه
- بررسی Drag & Drop
- بررسی Canvas و نحوه استفاده از آن
- بررسی SVG و نحوه استفاده از آن
- معرفی Edge و Illusttator و کاربرد آنها
- معرفی Mute و کاربرد آن
web design 2:
- طراحی وب سایت با کد های css و bootstrap
- طراحی وی سایت ریسپانسیو / واکنشگرا ( نمایش صحیح و بهینه صفحات وب در کامپیوتر ، تبلت ، موبایل و …) با کدهای css و
همچنین به کمک bootstrap
- اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایت ( ux)
- پیاده سازی وب سایت بر اساس هارمونی در طرح ، رنگ و چیدمان
مخاطبین این دوره
هر مبتدی که می خواهد به عنوان طراح وب شغل خود را ایجاد کند ، می تواند در این دوره شرکت کند.
- علاقمندان به طراحی سایت
- پشتیبان کننده های سایت
- طراحان و توسعه دهندگان وب
آنچه در این دوره خواهید آموخت
- HTMLبسیار انعطاف پذیر است و در همه مرورگرها پشتیبانی می شود.
- کاربر پسند و یک فناوری باز.
- عملکرد بهتری می دهد.
- CSS کنترل قدرتمندی بر ارائه یک سند HTML فراهم می کند.
- CSS چندین بار صرفه جویی می کند زیرا می تواند در بسیاری از صفحات HTML مورد استفاده مجدد قرار گیرد.
- از CSS می توان برای ایجاد صفحات وب پاسخگو استفاده کرد ، که در چندین دستگاه سازگار هستند. بسته به اندازه صفحه یا دستگاهی که در آن مشاهده می شود ، می توان به صفحه های وب اجازه نمایش متفاوت داد.
- اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایتUX، پیاده سازی وبسایت بر اساس هارمونی در طرح ، رنگ و چیدمان
- طراحی وب سایت ریسپانسیو / واکنشگرا (نمایش صحیح و بهینه صفحات وب در کامپیوتر ، تبلت ، موبایل و … )با کدهایCSS3پیشرفته خالص و همچنین به کمکBootstrap، اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایتUX
درخواست مشاوره رایگان یا رزرو دوره
"*" indicates required fields
