سرفصل دوره آموزشی WEB DESIGN 1

1397/07/17

سرفصل دوره آموزش Web Design I (HTML5, CSS3 with Dreamweaver)

معرفی مباحث اولیه وب

  • آشنایی با مفهوم و تاریخچه وب و زیر ساختهای نرم افزاری و سخت افزاری لازم برای ایجاد، استقرار و نگهداری وب سایت ها
  • معرفی مفاهیم شبکه ای مرتبط با وب مانند Domain ،Host ،Web Server،DNS Server
  • معرفی مفاهیم نرم افزاری مرتبط با طراحی وب مانند HTML و CSS

سایر مباحث آموزشی

  • معرفی 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 در CSS3
  • بررسی نکات حرفه ای تر CSS3 مانند 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 و کاربرد آن