عنوان دوره : دوره آموزشی تکنولوژی های نوین طراحی  وب سایت با استفاده از yreuQj , HTML 5 , CSS 3

دوره طراحی وب در یک نگاه :

·         دانشجویان در پایان دوره  به تسلط کامل در تگ های  HTML برسند.

·         دانشجویان در پایان دوره  به تسلط کامل در تگ های  XHTML برسند.

·         دانشجویان در این دوره روش های  کاربردی XML را در طراحی وب سایت بکار خواهند گرفت.

·         با استفاده از تگ های نوین  HTML5 طراحی نسل وب 2 را تجربه خواهند کرد .

·         با استفاده از امکانات  بی نظیر HTML 5 ماندد انیمیشن و مالتی مدیا در طراحی وب می توانند قالب وب خود را پویا نمایند.

·         با تسلط بر چگونگی بکارگیری استایل های CSS به طور کامل می توانند به جذابیت گرافیکی وب خود بیفزایند.

·         در این دوره دانشجویان قادر خواهند بود تا قالب گرافیکی مورد نظر خود را در نرم افزار PHOTOSHOP طراحی نمایند.

·         دراین بخش دانشجویان با استفاده از استایل های  CSS3 بسیاری از ترفند ها و نکات حاصل از تجربه های نوین وب2 را در وب سایت خود بکار خواهند گرفت.

·         دانشجویان با استفاده از نرم افزار   DREAMWEAVERقادر خواهند بود سایت خود را طراحی ومدیریت نمایند.

 مخاطبین دوره :

·         چنانچه با طراحی وب سایت آشنایی ندارید و یا دستورات HTML را به خوبی نمی دانید می توانید از این دوره بهرمند شوید.

·         آن دسته از طراحانی که قادر به طراحی گرافیکی Template مربوطه به وب سایت هستند ولی قادر به ساخت وب سایت با دستوراتHTML نیستند

·         طرا حان وبی که با دستورات HTML کار می کنند اما قادر به اجرای کامل دستورات نیستند نیز می توانند از این دوره بهرمند شوند .

·         کاربرانی که می خواهند با ابزارقدرتمند طراحی وب سایت Dream Weaver کار کنند نیز از مخاطبین این دوره می باشند .

·         طرا حان وبی که javascript رامی شناسندولی قادر به درک کاملی از این زبان قدرتمند نیستند نیز می توانند با شرکت در این دوره با کلیه زوایای زبان کلاینت ساید جاوا اسکریپت آشنا شوند.

·         برنامه نویسان PHP ,ASP.NET که می خواهند دانش پراکنده خود را در زمینه طراحی وب ,  مدون سازند نیز می توانند از این دوره بهره مند شوند.

·         برنامه نویسان    PHP ,ASP.NET    که در نظر دارند تا طراحی وب 2 را به صورت عملی و کاربردی در قالب اجرای پروژه تجربه کنند.

سرفصل دوره :

مقدمه‌ای بر اینترنت، وب و 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

·              تایپوگرافی

·              افکت سایه

·              افکت گرادیانت

·              افکت شعاع به المان ها

·              انیمیشن در CSS

·              تغییر حالت

·              تگ های مرور گر های مختلف

·              کار با فرم ها

·              تگ های جدید CSS 3

 پروژه عملی : تمکیل صفحه ویکی پدیا و اجرای یک پروژه طراحی وب با امکانات استایل

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

·         درک کامل CSS Box Model و ناسازگاری‌های موجود

·         نقش استانداردها در CSS Box Model

·         شناور کردن المان‌ها در صفحه وب

·         کنترل المان‌های موجود در مجاورت المان‌های شناور

·         آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن

·         مخفی کردن المان‌ها در یک صفحه وب

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

·         چرا برای ساخت یک صفحه وب، از جداول استفاده نکنیم

·         آشنایی با انواع صفحات وب مختلف

·         آشنایی با صفحات تک‌ستونی

·         آشنایی با صفحات چندستونی

·         ساخت صفحات دوستونی

·         ساخت صفحات سه‌ستونی ساده و پیچیده

·         تنظیم ارتفاع تمامی ستون‌های صفحه وب به یک اندازه

·         آشنایی با صفحات Absolutely-Positioned

·         آشنایی با باگ‌های مختلف مرورگرهای مختلف

پروژه عملی :ایجاد یک قالب کامل با  CSS

          ساختار اساسی HTML5 

·         ساختمان تگ

·         تگ های جدی

·         استفاده ساده تر از تگ ها

·         چه امکاناتی در HTML5 پشتیبانی نمی شود

·         ایجاد blogspot

·         مفهوم  WIA_ARIA

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

·         المان جدید کادر متنی

·         صفت های جدید

·         بازگشت به صفحه پیشین

·         استایل فرم و ایجاد پیغام های خطا

·         نکات مهم در مرور گر ها برای فرم

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

·         اعتبار سنجی

پروژه عملی : ایجاد یک فرم حرفه های با HTML5

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

·         مفهوم مالتی مدیا در وب

·         استفاده ویدیو در وب

·         کار با کنترلر های اشیاء ویدیو

·         دسترسی به مالتی مدیا

          بوم نقاشی

·         مبانی طراحی  در وب

·         رسم مسیرها

·         استفده از transformes

·         استفده از پیکسل ها

·         انیمیشن در بوم نقاشی

          ذخیره سازی اطلاعات

·          امکانات ذخیره اطلاعات در HTML5

·         ذخیه اطلاعات در وب

·         استفاده از بانک های  SQL

·         کنترل داده به کمک HTML5

·         نمایش داده به کمک HTML5

·         ذخیره داده در وب

·         چگونگی ذخیره داده در لوکال

          مفهوم DRAG AND DROP

·         چگونه می توان یک المان را DRAG AND DROP نمود

·         ایجاد و تغییر در تنظیمات DRAG AND DROP

          استفاده از منطقه جغرافیایی

·         استفده از API های تعریف و مشاهده منطقه جغرافیایی

          امکانات چت در HTML5

          ترکیب CSS 3 با HTML5

jQuery

1-      مقدمه ای بر jQuery

·         jQuery چیست

·         دانلود و نصب jQuery

·         ایجاد یک صفحه ساده دارای jQuery

·         مروری بر ویژگی های jQuery

 

2-      بازیابی محتویات صفحه

·         مروری بر انتخاب گرها و فیلترها

·         استفاده از انتخابگرهای اولیه jQuery

·         استفاده از فیلترهای اولیه jQuery

·         استفاده از فیلترهای صفات jQuery

·         فیلترهای محتوی ، مشاهده ، بچه

·         فیلترها و انتخابگرهای فرم

·         پویش مستندات

·         درک حالت زنجیره عبارت jQuery

·         مثال عملی : استفاده از لینک صفحات

 

3-      کار با محتوی صفحات

·         ایجاد ، اخذ و تنظیم محتوی

·         کار با صفات

·         درج محتوی

·         Wrapping ، جایگزینی و حذف محتوی

·         کار با CSS

·         مثال عملی : مولد خودکار TOC

 

4-      کار با Events

·         درک جنبه های مدیریت Event در jQuery

·         bind کردن و unbind کردن Eventها

·         متدهای کمکی آسان Event

·         استفاده از آبجکت Event در jQuery

·         استفاده از ویژگی های دیگر Event

·         مثال عملی : برجسته سازی و نواربندی جداول

 

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

·         پنهان و آشکار سازی عناصر

·         fade کردن به داخل و به خارج عناصر

·         اسلاید کردن عناصر

·         ایجاد انیمیشن های سفارشی

·         مثال عملی : چرخاننده تصویر

 

 

پروژه عملی  : ایجاد یک وب سایت کامل به کمک تمامی تکنیک های تگ ها و ترکیب HTML5 AND CSS3