دپارتمان کامپیوتر و نرم افزار

آموزش طراحی سایت استاتیک

۰۹ شهریور
ثبت نام در دوره

طراحی سایت استاتیک (HTML, CSS, HTML5, CSS3, Dreamweaver, Bootstrap)

  در انتهای اين دوره دانشجويان قادر خواهند بود:
  • با مبانی طراحی وب آشنا شوند.
  • گرافیک های طراحی شده را به وب سایت استاتیک تبدیل نمایند.
  • اسلایدرها را طراحی و ایجاد نمایند.
  • با طراحی ریسپانسیو آشنا شده و با استفاده از bootstrap سایت های ریسپانسیو طراحی نمایند
  • وب سایت طراحی شده را بر روی اینترنت بارگذاری نمایند.
    سرفصل‌ها و مطالب اين دوره آموزشی:
  • آشنایی با مفهوم و تاریخچه وب و زیرساختهای نرم افزاری و سخت افزاری لازم برای ایجاد، استقرار و نگهداری وب سایت ها
  • معرفی مفاهیم شبکه ای مرتبط با وب مانند Domain ،Host ،  Web Server،DNS Server
  • معرفی مفاهیم نرم افزاری مرتبط با طراحی وب مانند HTML و CSS
  • بررسی مفهوم Markup Language
  • بررسی مفهوم Cascading Style Sheet
  • تشریح نحوه عملکرد Web Browser ها
  • بررسی مفهوم Search Engine
  • بررسی مفهوم SEO
  • بررسی مفهوم UI (واسط کاربری)
  • بررسی مفهوم UX
  • بررسی مفهوم Responsive (واکنش گرا)
  • بررسی مفهوم Tag و ساختار یک سند HTML استاندارد
  • معرفیDOCTYPE
  • آموزش روش آماده سازی بستر طراحی وب و نرم افزار های مربوطه
  • ارائه طبقه بندی تگ ها مانند Text Level و Block Level ، List و …
  • بررسی نکات مربوط به List ها
  • بررسی پاراگراف ها، span و کلیه تگ های طبقه بندی شده
  • معرفی مفهوم Attribute
  • معرفی مفهوم Comment و دلائل استفاده از آن
  • معرفی و ارائه مثال از تگ های مربوط به هر طبقه
  • بررسی استاندارد های نامگذاری المانها
  • بررسی مفهوم Validation در اسناد HTML
  • معرفی CSS
  • بررسی نقش CSS در آرایش تگ ها
  • بررسی روشهای مختلف اعمال Style روی تگها مانند Inline،  Internal،External
  • معرفی انواع Selector ها در CSS
  • بررسی نحوه استفاده از تصاویر در سند HTML
  • بررسی انواع File Path
  • بررسی Image Map
  • بررسی نحوه استفاده از تصاویر در Background
  • بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
  • بررسی نحوه استفاده از صدا و تصویر در Background
  • معرفی IFrame و روش استفاده از آن
  • ایجاد انیمیشن با تصاویر و ابزار های مربوطه
  • بررسی نحوه استفاده از رنگ
  • بررسی نحوه استفاده از فونت
  • بررسی نکات مربوط به فونت مانند Size و Weight و …
  • معرفی انواع فونت ها و پسوندهای مربوطه
  • بررسی روش استفاده از کاراکترهای خاص در سند HTML
  • معرفی مفهوم Hyper Link و نکات مربوط به Navigation
  • آشنایی با مفهوم Anchor و Hash
  • بررسی روش ایجاد منو و انواع آن
  • بررسی روشهای مختلف آدرس دهی لینکها مثلا Internal و External
  • بررسی تگ Table و اجزاء مختلف آن
  • بررسی معایب و مزایای Table
  • بررسی نحوه استفاده از Table برای چیدمان
  • بررسی نحوه اختصاص اندازه به المانها
  • بررسی نکات مربوط به Formatting در Table
  • بررسی نکات جدید HTML5 در جداول
  • بررسی مفهوم Layout های Table Less
  • بررسی DIV و نکات مربوطه در حیطه Positioning
  • بررسی روش های تقسیم بندی صفحه
  • بررسی مفاهیم Margin و Padding
  • بررسی Border و نکات مربوطه
  • بررسی نکات مربوط به Text مانند Direction ،  Decoration، Align و …
  • بررسی نکات مربوط به Positioning در CSS3
  • بررسی نکات حرفه ای تر در CSS3 مانند Animation و Transition Bottom of Form
  • بررسی انواع Effect ها در CSS3
  • بررسی نکات مربوط به Transform در CSS3
  • بررسی انواع Layout ها
  • معرفی مفهوم Float و Absolute و …
  • معرفی مفاهیم مرتبط با Boxing
  • بررسیForm و انواع Input ها
  • معرفی تگ های مفهومی HTML5
  • بررسی Canvas و نحوه استفاده از آن
  • بررسیSVG و نحوه استفاده از آن
  • بررسی و نحوه استفاده از وب فونت ها Font Face
  • معرفی Media Query
  • معرفی و پیاده سازی Responsive Layout
Visual Studio Code (VS Code)
  • آشنایی با رابط کاربری VS Code
  • نحوه ایجاد پروژه و فایل
  • نحوه نصب Extentions و معرفی extention های مورد نیاز
  • چگونگی شخصی سازی محیط
  • چگونگی استفاده از LiveServer جهت نمایش سایت
  • چگونگی دیباگ کردن در vs code
  • نحوه ساخت و استفاده از Task
Bootstrap
  • معرفی مفهوم CSS Framework
  • معرفی و بررسی تاریخچه Bootstrap
  • بررسی روش استفاده از Bootstrap در یک سند HTML
  • معرفی Grid System
  • معرفی انواع سایزها و کلاسهای مرتبط و روش تشخیص Resolution کاربر
  • معرفیResponsive Layout در  Bootstrap
  • بررسی Typography با Bootstrap
  • بررسی روش ایجاد فرم و کلاسهای مرتبط
  • بررسی روش پنهان سازی بخش هایی از سند
  • بررسی نکات و کلاسهای مرتبط با جدول
  • بررسی نکات و کلاسهای مرتبط با تصاویر
  • بررسی روش استفاده از Icon ها
  • بررسی روش استفاده از Helper ها
  • بررسی نکات . کلاسهای مرتبط با دکمه
  • بررسی ارائه مثال از موارد زیر :
 

o Button groups

o Button dropdowns

o Input groups

o Nav

o Navbar

o Breadcrumbs

o Pagination

o Labels

o Badges

o Jumbotron

o Page header

o Thumbnails

o Alerts

o Progress bars

o Media object

o List group

o Panels

o Wells

o Modal Form

o Affix

o Scrollspy

o Carousel

جدیدتر آموزش هیدرولیک و پنوماتیک
بازگشت به لیست
قدیمی تر آموزش برق ساختمان

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.