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

آموزش جنبه های عملی طراحی وب سایت بصورت كاربردی و پروژه ای

• افراد در پایان دوره به تسلط کامل در تگ های HTML می رسند.
• افراد در این دوره روش های کاربردی XML را در طراحی وب سایت بکار خواهند گرفت.
• آموزش طراحی وب سایت با استفاده از (DIV,CSS(3
• آموزش tag های جدید (HTML(5 در طراحی وب سایت
• با استفاده از امکانات بی نظیر HTML 5 ماندد انیمیشن و مالتی مدیا در طراحی وب می توانند قالب وب خود را پویا نمایند.
• با تسلط بر چگونگی بکارگیری استایل های CSS به طور کامل می توانند به جذابیت گرافیکی وب خود بیفزایند.
• آموزش بهینه سازی وب سایت برای موتورهای جستجو
• آموزش JavaScript و كاربرد آن در صفحات وب
• آموزش كاربردی JQuery و كاربرد آن در صفحات وب
• آموزش استفاده از كامپوننت های JQuery UI و استفاده از عناصر tab,accardion,popup, دیگر عناصر كاربردی JQueri UI
• در این دوره دانشجویان قادر خواهند بود تا یک قالب گرافیکی طراحی شده برای سایت را به یک صفحه HTML با استانداردهای فنی بالا تبدیل نمایند.
• افراد در طی این دوره با ساخت 3 عدد وب سایت بصورت كامل و عملی آشنا می شوند كه 2 عدد از این وب سایتها به عنوان تمرین در كلاس درس داده خواهد شد

سرفصل های دوره:

قسمت اول:آموزشHTML(5),CSS3

مقدمه ای بر اینترنت، وب و HTML

• درک مفهوم HTML
• آشنایی با مرورگر وب و انواع آن
• نقش CSS در ساخت صفحات وب
• آشنایی با XHTML
• جنگ مرورگرهای وب
• استانداردهای موجود

عناصر سازنده صفحات وب

• آشنایی با مارک آپ (Markup)
• آشنایی با المان، تگ، خاصیت و مقدار
• محتوای متنی یک صفحه وب
• لینک ها، تصاویر و محتوای غیرمتنی
• اسم فایلهای صفحات وب
• HTML در مقابل XHTML
• انواع نسخه های HTML
• آشنایی با DOCTYPE و ضرورت استفاده از آن

ساخت اولین صفحه وب

• آشنایی با نرم افزارهای ساخت صفحات وب نظیر Dreamweaver
• ضرورت کدنویسی دستی و ساخت صفحه وب با Notepad
• استفاده درست و به جا از نرم افزارهای WYSIWYG
• ساخت اولین صفحه وب توسط Notepad
• مشاهده صفحه وب ساخته شده در مرورگرهای مختلف
• آشنایی با ناسازگاری های مرورگرهای مختلف

ساختار اساسی HTML

• فنداسیون یک صفحه وب
• عنوان یک صفحه وب
• ساخت پاراگرافها
• آشنایی با Headerها
• نامگذاری المانها
• تقسیم کردن یک صفحه وب به قسمتهای مختلف
• Encoding برای نمایش درست متنها
• کاراکترهای خاص در HTML
• المانهای طلایی وب: div و span

فرمت کردن متن در HTML

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

تصاویر در وب

• پسوندهای رایج تصاویر در وب
• آشنایی با نرم افزارهای کار با تصاویر
• ضرورت استفاده از فوتوشاپ (یا نرم افزارهای مشابه)
• آشنایی با دستور Save for Web
• آشنایی با نحوه لود شدن تصاویر در وب
• شفافیت (Transparency) در تصاویر
• شفافیت، تصاویر PNG و ناسازگاری های مرورگرها
• وارد کردن تصاویر درون یک صفحه وب
• تغییر سایز تصاویر توسط HTML
• آشنایی با متن جایگزین عکس
• شناورکردن تصاویر در صفحه وب
• پروژه عملی : ایجاد یک گالری تصویر خطی ساده

لینک ها

• لینک ها: فرامتن بودن HTML
• ساخت لینکها در صفحه وب
• آشنایی با انواع لینکها
• نحوه آدرس به لینکها
• درست کردن میانبرهای کیبوردی برای کار با لینکها
• آشنایی با دکمه Tab در کیبورد و نقش آن در لینک ها
• آشنایی با لینک های Anchor و HASHها
• پروژه عملی : ایجاده منو صفحه بسیار قوی به همراه یک صفحه فهرست مقاله اینترنتی

لیست ها

• آشنایی با انواع لیست ها
• ساخت لیست های ترتیبی و غیرترتیبی
• انتخاب نوع بولت برای لیست ها
• تعیین شماره شروع برای لیستها
• ساخت لیست های توضیحی
• لیستهای تودرتو و مدیریت آنها
• پروژه عملی : ایجاد یک منوی به همراه گزینه های والد لایه ای

جداول

• آشنایی با جداول و کاربردهای آن در صفحات وب ساخت اولین جدول
• تعیین حاشیه کنار جدول
• تعیین فاصله درونی و بیرونی سلول جدول
• ساخت جدولهای حرفه ای تر
• تقسیم کردن جدول به گروههای افقی
• تقسیم کردن جدول به قسمتهای عمودی
• کنترل حرفه ای حاشیه های کناری و داخلی یک جدول
• افزایش سرعت لود شدن جداول
• پروژه عملی :ایجاد یک لیست قیمت فروشگاه الکترونیکی و یک منوی زیبا با تکنولوِژی جدول

فرم ها

• نقش فرم ها در صفحات وب
• ساخت اولین فرم
• پردازش اطلاعات وارد شده توسط کاربر
• آشنایی با Server-Side Programming
• ساخت اولین برنامه دینامیک فوق ساده
• دسته بندی المان های موجود در فرم
• ساخت منوهای Drop Down
• ساخت دکمه های رادیویی و چک باکس ها (Checkbox)
• فیلدهای آپلود فایل
• فیلدهای مخفی و کاربردهای آن
• آشنایی با دکمه های Submit و Reset
• قراردادن عکس به جای دکمه تایید فرم
• نقش دکمه Tab در فیلدهای یک فرم
• غیرفعال کردن المان های موجود در فرم
• فیلدهای فقط خواندنی
• پروژه عملی : ایجاد یک فرم ارتباط با ما به همراه صفحه پاسخ تاییئ ارسال فرم

مقدمات کار با CSS

• درک مفهوم CSS و جایگاه آن در کنار HTML
• آشنایی با استایل ها و روش های مختلف نوشتن آن
• درک ساختار یک دستور CSS
• نوشتن دستورات CSS در کنار یکدیگر
• انتخاب المان مورد نظر در HTML
• آشنایی کامل با انتخاب کننده ها در CSS
• آشنایی با کلاس های دروغین (Pseudo-Class)
• آشنایی با المان های دروغین (Pseudo-Element)
• وراثت در CSS
• آشنایی با واژه Cascade و نحوه عملکرد آن

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

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

کار با CSS3

• تایپوگرافی
• افکت سایه
• افکت گرادیانت
• افکت شعاع به المان ها
• انیمیشن در CSS3
• تغییر حالت
• تگ های مرور گر های مختلف
• کار با فرم ها
• کار با فرم ها
• پروژه عملی : تمکیل صفحه ویکی پدیا و اجرای یک پروژه طراحی وب با امکانات استایل

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

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

درست کردن ساختار (Layout) توسط CSS

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

معرفی HTML5

• چه خصوصیاتی در html5 وجود دارد
• چرا به HTML5 نیاز است
• چرا ما نیاز به عناصر جدید ساختاری داریم

اساس HTML5

• تعریف اسناد HTML5
• HTML5 syntax
• عنصر Header
• عنصر nav
• عنصر Section
• عنصر article
• عنصر aside
• عنصر footer
• بازنگری مدل محتوا

ساختار اسناد HTML5

• درك الگوریتم outline
• ایجاد اسناد section
• استفاده از heading به درستی
• استفاده از hgroup برای تحت الشعاع قرار دادن section ها
• ساختار مناسب تودرتو

دسته بندی محتوا در HTML5

• کار کردن باشكل figure و figcaption
• گروه بندی محتوا با aside
• استفاده از div در HTML5
• استفاده از صفات id,class در HTML5
• كاركردن با لیستها در HTML5
• استناد به کار بصورت semantically معنایی
• استفاده از المنت address
• استفاده از المنت small
• استفاده از المنت mark
• كاركردن با تاریخ و زمان
• ایجاد لینک در سطح بلوک
• فهمیدن رابطه لینكها

ساختار HTML5 معنایی برای دنیای واقعی

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

کار کردن با فرم های HTML5

• المان جدید کادر متنی
• صفت های جدید
• بازگشت به صفحه پیشین
• استایل فرم و ایجاد پیغام های خطا
• نکات مهم در مرور گر ها برای فرم
• استفاده از جاوا اسکریپت در فرم
• پروژه عملی : ایجاد یک فرم حرفه های با HTML5

پشتیبانی API HTML5

• معرفی Canvas
• نقاشی در محیط canvas
• بازنگری video
• اضافه كردن ویدیو
• مروری بر امکان Drag and Drop API
• آموزش در رابطه با Encoding Video

مالتی مدیا در وب

• مفهوم مالتی مدیا در وب
• استفاده ویدیو در وب
• کار با کنترلر های اشیاء ویدیو
• دسترسی به مالتی مدیا

بوم نقاشی

• مبانی طراحی در وب
• رسم مسیرها
• استفاده از transformes
• استفاده از پیکسل ها
• انیمیشن در بوم نقاشی

مفهوم DRAG AND DROP

• چگونه می توان یک المان را DRAG AND DROP نمود
• ایجاد و تغییر در تنظیمات DRAG AND DROP

آشنایی با فناوری های مشارکتی و استفاده از آن ها در HTML5

• مروری بر API مکان یابی جغرافیایی
• مروری بر Web Storage API

ترکیب CSS 3 با HTML5

قسمت دوم:آموزش جاوا اسکریپت

• آموزش شروع به استفاده از جاوااسکریپت
• مقدمه ای بر جاوااسکریپت
• شنایی با ابزارها و کاربردها

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

• ساختار کدهای جاوااسکریپت
• ساخت متغیرها
• نوشتن دستورهای شرطی
• کارکردن با عملگرها
• حلقه سازی در جاوااسکریپت
• ساخت توابع در JavaScript

انواع داده و Object ها در جاوااسکریپت

• ایجاد و کارکردن با آرایه ها
• ایجاد و کارکردن با اعداد
• ایجاد و کارکردن با مقادیر رشته ای
• استفاده از دستورات کار با تاریخ و زمان JavaScript

آموزش کاملا کاربردی Document Object Model ( DOM ) :

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

کارکردن با رخدادها و Event Listener ها :

• مدیریت رخدادها در جاوااسکریپت
• رخدادهای onClick و onEvent آموزش کارکردن با رخدادهای onBlur و onFocus
• کار کردن با Timer

رفع خطاهای رخ داده در کدهای جاوااسکریپت

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

استفاده از جاوااسکریپت برای مدیریت داده های فرم ها

• دسترسی یافتن به عناصر فرم های وب
• جلوگیری از ارسال یک فرم با داده های نامعتبر به سرور
• نمایش و مخفی سازی بخش هایی از فرم های وب

قسمت سوم:آموزشJQuery

• مقدمه ای بر jQuery
• jQuery چیست
• دانلود و نصب jQuery
• ایجاد یک صفحه ساده دارای jQuery
• مروری بر ویژگی های jQuery

بازیابی محتوای صفحه با jQuery

• مروری بر انتخاب گرها Selector و فیلترها
• استفاده از انتخابگرهای اولیه jQuery
• استفاده از فیلترهای اولیه jQuery
• استفاده از فیلترهای صفات jQuery
• Child , Visibility
• فیلترها و انتخابگرهای فرم
• پویش مستندات Traversing Documents
• درک حالت زنجیره عبارت jQuery
• تعیین حاشیه عملکر صفحه لینک (Annotating page links )

دستکاری محتوای صفحه با jQuery

• ایجاد ، گرفتن و تنظیم کردن محتوای صفحه
• دستکاری ویژگی ها ( Attributes ) با jQuery
• Wrapping ، جایگزینی و حذف محتوی
• ستفاده از jQuery Event Object
• مثال عملی : مولد خودکار TOC

کار با Events

• درک جنبه های مدیریت Event در jQuery
• bind کردن و unbind کردن Eventها
• متدهای کمکی آسان Event
• استفاده از آبجکت Event در jQuery
• استفاده از ویژگی های دیگر Event
• مثال عملی : برجسته سازی و نواربندی جداول

انیمیشن ها و افکت ها در jQuery

• مخفی سازی و نمایش المان ها بوسیله jQuery
• Fade کردن الملان ها با jQuery
• Slide بندی المان ها از طریق jQuery
• ساخت انیمیشن های سفارشی
• Image Rotator ( گرداننده عکس )