: آموزش طراحی سایت ریسپانسیو

اگر قصد یادگیری و فعالیت درزمینه طراحی وب را دارید ؛ می توانیدبا شرکت در دوره های web design آموزشگاه آینده برتر(بهترین آموزشگاه فنی حرفه ای شرق تهران) وارد این حوزه شوید . دوره های طراحی فرانت سایت آموزشگاه آینده برتر به 2 شاخه web design (طراحی ظاهری سایت) و web developer (توسعه دهنده سایت) تقسیم می شود.

در شاخه web design شما با آموزش html ، css ,bootstrap می توانید به راحتی یک سایت زیبا و ریسپانسیو بسازید .

در شاخه web developer با آموزش زبان برنامه نویسی جاوا اسکریپت و فریمورک های آن مثل آلپاین و ری اکت (react) می توانید سایت های تعاملی بسازید تا کاربران بتوانند به راحتی با سایت شما تعامل داشته باشند.برای استفاده از اسلایدرها، چت روم های آنلاین، برخی افکت ها و جلوه های وب سایت (به خصوص پنجره های بازشونده معروف به Pop Up)، تصاویر ونوشته های متحرک (مثل اخبار) از جاوااسکریپت استفاده می شود.

چون طی کردن همه دوره ها زمان بر است ، کارآموزان می توانند برحسب علاقه و مدت زمان خود برای یادگیری دوره ها را به صورت تکی و یا پکیج کامل انتخاب کنند و مرحله به مرحله برای یادگیری طراحی سایت پیش بروند.

HTML :

برای شروع طراحی فرانت سایت (ظاهرسایت) شما باید ابتدا از یک زبان نشانه گذاری مثل HTML استفاده کنید . HTML شامل مجموعه ای از عناصر(element) می باشد که با استفاده از آن شما می توانید ساختاریک صفحه وب را مشخص کنید . یادگیری html مهم ترین و اساسی ترین قدمی است که برای یادگیری تکنولوژی های حوزه وب نیاز است تا آن را یاد بگیرید.در قدم بعدی بعد از چیدن اسکلت اصلی سایت ، شما می توانید با css ظاهر مناسبی به آن دهید.

css :

یکی ازتکنولوژی های اصلی برای طراحی صفحات و اپلیکیشن های وب میباشد.با CSS می توان بوسیله اعمال رنگ ها و فونت های مختلف ، تنظیم فاصله های بین عناصرومرتب سازی چیدمان صفحه ، آن ساختار را زیبا سازی کرد.هدف اصلی CSS جداسازی ویژگی های ظاهری یا نمایشی یک صفحه وب ازمحتوای آن است که این جداسازی باعث آسان شدن مرحله طراحی و نگهداری پروژه می شود .

Bootstrap :

بوت استرپ یکی از محبوب ترین فریمورک های Html و CSS و Javascript است . با استفاده ازبوت استرپ می توانید سایت های واکنش گرا و سازگار با موبایل ایجاد کرد.بوت استرپ با استفاده از Htmlو CSS به سادگی دکمه ها و فرم ها و جدول ها و ….را برای ما به طورمناسب استایل دهی می کند. بوت استرپ به ما امکان می دهدتا به آسانی قالب های واکنش گرا بسازیم .

طراحی واکنش گرا دروب چیست ؟

طراحی واکنش گرا (Responsive) دروب عبارت است از ساختن وب سایت هایی که بطور اتوماتیک خودشان را برای خوب نمایش یافتن درتمام دستگاه ها ، از گوشی های کوچک گرفته تا انواع رایانه های بزرگ تنظیم می کند.

چرا از Bootstrap استفاده کنیم ؟

استفاده و یادگیری آسان : برای کار با بوت استرپ تنها دانش عمومی درزمینه html , css نیازدارید.

قابلیت های واکنش گرا : این قابلیت بوت استرپ باعث می شود طراحی با آن برای گوشی های همراه وتبلت ها نیز مناسب باشد و محتوا رادربهترین شکل ممکن نمایش دهد.

روش Mobile-first : یعنی طراحی اول برای گوشی های همراه انجام شود و سپس برای کامپیوترها . گوگل این روش را ترجیح می دهد و به این علت این قابلیت در بهبود سئو سایت موثر است .

پشتیبانی ازمرورگرهای مختلف : بوت استرپ با تمام مرورگرهای مدرن و امروزی سازگاری دارد.

سرفصل-آموزشی دوره وب دیزاین

مدت دوره : 30 ساعت

نوع کلاس : خصوصی ، نیمه خصوصی ، گروهی

شهریه کلاس گروهی  : 4/5  میلیون تومان

شهریه کلاس خصوصی : ساعتی 300000 تومان

  • √HTML
    • سینتکس html
    • Attribute ها
    • توضیحات comment
    • عناصرخطی و بلاک
    • ساختارسلسله مراتبی
    • تودرتویی یا Nesting
    • ترتیب یا order
    • تودرتویی عناصر inline و block
  • √ تگ های معنایی
    • عناصر ساختاری
    • عناصر متنی
    • عناصر خطی متنی
    • عناصرعمومی
  • √ خوانایی فایل HTML
    • Indent
    • سند معتبر html
    • عنصر<html>
    • عنصر<head>
  • √ ساخت سند html فارسی
    • متن درhtml
    • پاراگراف ها
  • √ لیست ها
    • لیست های غیرترتیبی
    • لیست های ترتیبی
    • لیست های توضیحی
  • √ نقل قول ها
  • √ عنوان ها
  • √عناصرمعنایی خطی
    • <strong>
    • <em>
    • <abbr>
    • <q>
    • لینک ها
  • √روش آدرس دهی برای لینک ها
    • Relative
    • Absolute
  • √ تصاویر
    • سینتکس
    • alt
    • ابعاد
  • √جدول ها
    • سینتکس
    • colspan-rowspan
    • ادغام ستون ها
    • ادغام ردیف ها
  • √ فرم ها
    • عنصرform
    • ورودی های متنی
    • placeholder
    • Label
    • checkbox
    • دکمه Radio
    • تفاوت Radio با checkbox
    • Dropdown
  • √ ساختارHTML
    • Header
    • Footer
    • Main
    • Aside
    • Section
    • انتخابگرtarget
    • آشکارومخفی کردن محتوا

√ اعمال CSS  به سند وب

  • inline
  • internal
  • external

√استفاده ازدستور import (استایل داخلی و خارجی)

√مفاهیم پایه ای css

√  کلاس ها

√ انتخابگرها

√ اتصال انتخابگرها

√ شبه کلاس ها

√ شبه عناصر در css

√ واحدها

√ کاربا رنگ ها درcss

√ فونت و متن درcss

√ ویژگی display

√Grid  Layout

√Box MODEL

√ ویژگی Padding

√ Overflow

√Border

√ Background

√ سایه ها

√ Gradient

√ Transform

فضای سه بعدی

Animation

واکنش گرایی یا Responsive

√ پروژه پایانی : طراحی سایت اسنپ

معرفی بوت استرپ

ایجاد صفحه با بوت استرپ

شبکه بندی مقدماتی بوت استرپ

تگ های heading

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

جدول بوت استرپ

کاربا تصاویر

هشدارها alerts

Bootstrap5 Buttons

Spinner Buttons

ساخت badge و کار با آن ها در bootstrap

ساخت نوارپیشرفت (progress bar)

ایجاد صفحه بندی pagination و Breadcrumbs

ایجاد لیست گروهی

ترکیب لیست ها دربوت استرپ با نشان ها

bootstrap card

منوهای آبشاری دربوت استرپ

منوهای مخفی شونده و آکاردئونی دربوت استرپ

Bootstrap Navs

Nav های عمودی

منوهای سربرگ دار(tab)

ساخت اسلایدرتصاویروپنجره های model دربوت استرپ

کار با Tooltip و popover دربوت استرپ

کلاس های کمکی دربوت استرپ

سایه ها

مدل Flex دربوت استرپ

مباحث تکمیلی سیستم Grid دربوت استرپ

پروژه پایان دوره : سایت تپسی به صورت کامل و ریسپانسیو (به جز قسمت های جاوااسکریپت) یا ریسپانسیو کردن سایت اسنپ که با html و css طراحی شده بود.

1403-08-26
مدیریت آموزشگاه آینده برتر : سرکار خانم مهندس عسگری