دوره آموزش طراحی سایت، در دوره طراحی وب سایت دانشجو با اصول طراحی وب سایت آشنا می گردد و با استفاده از زبان های Javascript ، CSS ، HTML و کتابخانه JQuery به طراحی سایت می پردازد.

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

  • طول دوره: 56 ساعت
  • مدرس: مهندس رامشینی
  • تاریخ شروع: 1403/03/23
  • ساعت برگزاری: چهارشنبه ساعت 17 تا 21
  • مبلغ دوره: 3,600,000 تومان

درباره دوره

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

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

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


بخش اول: آموزش HTML 5

آشنایی با مفاهیم پایه طراحی صفحات وب

  • آشنایی با مفاهیم اینترنت و وب و تفاوت آن ها
  • آشنایی با مفاهیم شبکه ای مرتبط با وب مانند دامنه، هاست، وب سرور، DNS Server
  • آشنایی با پروتکل HTTP
  • URL - Uniform Resource Locator

آشنایی با HTML و تگ های HTML

  • معرفی و کار با IDE های مختلف مانند : Visual Studio 2019 ، VS Code ، Notepad
  • آشنایی با زبان های Markup برای تولید صفحات وب
  • آشنایی با HTML و نقش آن در ساخت صفحات وب
  • آشنایی با tag های HTML
  • آشنایی با Attribute های HTML
  • فنداسیون یک صفحه سایت
  • تقسیم کردن یک صفحه سایت به قسمت های مختلف با استفاده از تگ Div
  • Encoding برای نمایش درست متن ها
  • عنوان یک صفحه وب سایت
  • آشنایی با Header ها
  • ساخت پاراگراف ها
  • المان های طلایی وب div و span
  • کاراکترهای خاص در HTML

فرمت دهی متن درHTML

  • نوشتن متن به صورت bold وitalic
  • تغییر سایز نوشته یک متن
  • استفاده از فونت های Monospaced
  • استفاده از متن های Preformatted
  • متن های نقل قول
  • متن های Superscript و Subscript
  • تراز متن در صفحه وب
  • پروژه عملی : ایجاد یک صفحه سایت مشابه صفحات وبلاگی

کار با تصاویر

  • پسوندهای رایج تصاویر در وب
  • آشنایی با نرم افزارهای کار با تصاویر
  • ضرورت استفاده از فوتوشاپ (یا نرم افزارهای مشابه)
  • شفافیت (Transparency) در تصاویر
  • وارد کردن تصاویر درون صفحه سایت
  • آشنایی با متن جایگزین عکس
  • شناور کردن تصاویر در صفحه سایت
  • Images in Another Folder
  • Images on Another server
  • Animated Images
  • پروژه عملی: ایجاد یک گالری تصویر ساده

آموزش لینک ها در HTML

  • آشنایی با انواع لینک ها
  • ساخت لینک ها در صفحه وب
  • نحوه آدرس دهی به لینک ها
  • بررسی روشهای مختلف آدرس دهی لینک ها Internal و External
  • استفاده از تصاویر به عنوان لینک

آموزش لیست ها در HTML

  • آشنایی با انواع لیست ها
  • ساخت لیست های غیر ترتیبی (Onordered List)
  • ساخت لیست های ترتیبی (ordered List)
  • انتخاب نوع بولت برای لیست ها
  • ساخت لیست های توضیحی (HTML Description List)
  • لیست های تودرتو و مدیریت آن ها (Nested HTML Lists)
  • بررسی انواع روش های ایجاد منو
  • پروژه عملی: ایجاد یک منو حرفه ای به همراه یک صفحه فهرست مقاله اینترنتی

آموزش جداول در HTML

  • بررسی تگ Table و اجزاء مختلف آن
  • بررسی نحوه استفاده از Table برای چیدمان
  • نکات مربوط به Formatting در Table
  • تعیین حاشیه کنار جدول (Adding a Border)
  • تعیین فاصله درونی و بیرونی سلول جدول
  • تقسیم کردن جدول به گروه های افقی
  • تقسیم کردن جدول به قسمت های عمودی

HTML5

  • آشنایی با HTML 5
  • المان های جدید HTML 5 مانند article, aside, header, section, footer و ...
  • سمانتک تگ ها در HTML 5
  • مهاجرت کردن از HTML 4 به HTML 5
  • Change to HTML5 Doctype
  • HTML Coding Conventions

HTML Graphics

  • HTML Canvas
  • HTML SVG
  • SVG Star
  • SVG Logo

HTML Media

  • HTML Media
  • Multimedia Formats
  • HTML Video
  • HTML Audio
  • HTML Plug-ins

آموزش فرم ها

  • نقش فرم ها در صفحات وب
  • ساخت فرم ثبت نام کاربر
  • پردازش اطلاعات وارد شده توسط کاربر
  • آشنایی با Server-Side Programming
  • دسته بندی المان های موجود در فرم
  • ساخت منوهای کشویی
  • ساخت دکمه های رادیویی و چک باکس ها (Checkbox)
  • آشنایی با دکمه های Submitو Reset
  • Action Attribute
  • Target Attribute
  • Method Attribute
  • When to Use GET
  • When to Use POST
  • قراردادن عکس به جای دکمه تایید فرم
  • غیرفعال کردن المان های موجود در فرم
  • فیلدهای فقط خواندنی
  • پروژه عملی : ایجاد یک فرم ارتباط با ما

بخش دوم: آموزش CSS3

آموزش کار با CSS3

  • درک مفهوم CSS و جایگاه آن در صفحات وب
  • آشنایی با استایل ها و روش های مختلف نوشتن آن (Inline-Internal-External)
  • درک ساختار یک دستور CSS
  • نوشتن دستورات CSS در کنار یکدیگر
  • CSS id Selector
  • CSS class Selector
  • CSS Universal Selector
  • CSS Grouping Selector
  • Multiple style Sheets
  • آشنایی با کلاس های دروغین (Pseudo-Class)
  • آشنایی با المان های دروغین (Pseudo-Element)
  • وراثت در CSS

فرمت دهی متن و فونت توسط CSS

  • تعیین نوع فونت مورد نظر برای متن صفحات سایت
  • Import کردن یک فونت دلخواه با استفاده از CSS
  • آشنایی با گروه های کلی فونت (Font Families)
  • تعیین سایز فونت
  • آشنایی با ویژگی های یک فونت style, weight, variant
  • تعیین فاصله بین حروف و فاصله بین خطوط یک متن
  • تراز یک متن در صفحه سایت

افکت ها در CSS3

  • افکت سایه
  • افکت گرادیانت
  • افکت شعاعی به المان ها

تعیین موقعیت المان ها (Position)

  • درک کامل CSS Box Model و ناسازگاری های موجود در طراحی سایت
  • نقش استانداردها در CSS Box Model
  • شناور کردن المان ها در صفحه سایت
  • کنترل المان های موجود در مجاورت المان های شناور
  • آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن
  • Static Position
  • Relative Position
  • Fixed Position
  • Absolute Position
  • Sticky Position

آموزش درست کردن ساختار (Layout) توسط CSS

  • آشنایی با انواع صفحات مختلف سایت
  • آشنایی با صفحات تک ستونی
  • آشنایی با صفحات چندستونی
  • ساخت صفحات دوستونی
  • ساخت صفحات سه ستونی ساده و پیچیده
  • تنظیم ارتفاع تمامی ستون های صفحه وب به یک اندازه
  • آشنایی با صفحات Absolutely-Positioned
  • پروژه عملی :ایجاد یک قالب کامل با HTML and CSS

آموزش طراحی سایت واکنشگرا (Responsive)

  • آشنایی با انواع صفحات مختلف سایت
  • بررسی مفهوم Responsive
  • مفهوم Mobile First
  • معرفی Grid System
  • کار با Media Query و مفاهیم CSS شرطی
  • معرفی انواع سایزها و کلاس های مرتبط و روش تشخیص Resolution کاربر
  • معرفی Fixed Layout
  • معرفی Responsive Layout

آموزش CSS Flexbox

  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • Justify-content
  • Align-items
  • Align-content
  • پروژه عملی: Responsive Website Using Flexbox

آموزش CSS Grid

  • آشنایی با CSS Grid و مفاهیم اولیه آن
  • کار با CSS Grid
  • Repeat and minmax functions
  • Grid Gap
  • معرفی auto-fill & auto-fit
  • Grid Areas
  • Spanning Column and Row
  • ترازبندی آیتم های Grid
  • مرتب سازی آیتم ها در Grid
  • Media Queries & The Grid

بخش سوم : آموزش جاوا اسکریپت

معرفی جاوا اسکریپت

  • آشنایی با زبان برنامه نویسی جاوا اسکریپت
  • نحوه استفاده از جاوا اسکریپت
  • بهترین موقعیت استفاده از جاوا اسکریپت در صفحات HTML
  • آشنایی با متغیرها (variables)
  • انواع داده ها در زبان جاوا اسکریپت
  • تعریف متغیرها با استفاده از const ، var و let
  • انواع عملگرها در زبان جاوا اسکریپت
  • اولین برنامه به زبان جاوا اسکریپت (محاسبه میانگین 3 عدد)
  • دریافت اطلاعات با استفاده از ()Prompt
  • Type Conversions (تبدیل نوع)

ساختارهای کنترلی در جاوا اسکریپت

  • معرفی ساختارهای کنترلی در Javascript
  • ساختار شرطی If else
  • ساختار Switch
  • حلقه تکرار For
  • آشنایی با عبارت های break و continue
  • حلقه تکرار While

توابع در جاوا اسکریپت

  • آشنایی با توابع و مزیت های نوشتن تابع
  • تعریف تابع در جاوا اسکریپت
  • فراخوانی تابع با پارامترهای متغیر
  • توابع تو در تو (Nested Function)
  • معرفی انواع Scope ها (Local, Global, Block)
  • آشنایی با Hoisting در جاوا اسکریپت
  • Function Expressions
  • Arrow Functions
  • Self-Invoking Functions

آرایه در جاوا اسکریپت

  • آشنایی با آرایه و نحوه تعریف آرایه
  • متدهای کار با آرایه
  • مرتب سازی آرایه
  • جستجو در آرایه
  • پیمایش عناصر آرایه با متد ForEach
  • پیمایش عناصر آرایه با استفاده از ساختار For-of
  • انجام عملیات بر روی مقادیر آرایه با متد map
  • فیلتر کردن مقادیر آرایه با متد filter

Object در جاوا اسکریپت

  • معرفی Object در جاوا اسکریپت
  • تفاوت Dot notation و Bracket notation
  • اضافه نمودن Property به Object
  • Object Methods
  • ساختار for..in برای پیمایش Object
  • Object.keys, values, entries
  • Object Constructors
  • Primitive and Reference value

آموزش Document Object Model

  • DOM چیست ؟
  • DOM Methods
  • DOM Document
  • DOM Node Lists
  • کارکردن با Node ها و HTML Elementها
  • دسترسی یافتن به المان های موجود در DOM
  • تغییر دادن المان های موجود در DOM
  • ساخت المان های DOM

آموزش Event ها

  • مدیریت رخدادها در جاوا اسکریپت
  • Input Events
  • Mouse Events
  • Click Events
  • Load Events
  • Event Attributes
  • onload and onunload Events
  • کار کردن با Timer
  • پروژه عملی: ساخت یک اسلایدر حرفه ای

آموزش رفع خطاهای رخ داده در کدهای جاوا اسکریپت

  • آشنایی با برخی خطاهای رایج جاوا اسکریپت
  • استفاده از Firebug به منظور رفع خطای کدهای جاوا اسکریپت
  • مراحل رفع خطا ی کدهای جاوا اسکریپت

بخش چهارم:آموزش JQuery

معرفی JQuery

  • مقدمه ای بر jQuery
  • jQuery چیست؟
  • دانلود و نصب jQuery
  • JQuery Syntax
  • JQuery Events
  • ایجاد یک صفحه ساده دارای jQuery
  • استفاده از انتخابگرهای اولیه jQuery

آموزش JQuery Effects

  • JQuery Hide/Show
  • JQuery Fade
  • JQuery Slide
  • JQuery Animate
  • JQuery Callback

آموزش JQuery HTML

  • JQuery Get
  • JQuery Set
  • JQuery Add
  • JQuery Remove
  • JQuery CSS Classes
  • JQuery css

آموزش JQuery Traversing

  • JQuery Traversing
  • JQuery Ancestors
  • JQuery Descendants
  • JQuery Sibilings
  • JQuery Filtering
  • پروژه عملی: ساخت یک پنل مدیریتی حرفه ای

پیش نیاز دوره

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