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

پیش نیاز : آشنایی با اينترنت

تعرفه دوره های طراحی سایت

فهرست مخاطبین:

• آن دسته از افرادي كه مي خواهند طراحي سايت را در محيطي 100 % عملي و كاملا پروژه اي ياد بگيرند

• آن دسته از افرادي كه با طراحي وب سايت آشنايي ندارند یا دستورات HTML را به خوبی نمی دانند می توانید از این دوره بهرمند شوند.
• آن دسته از طراحانی که قادر به طراحی گرافیکی Template مربوطه به وب سایت هستند ولی قادر به ساخت وب سایت با دستوراتHTML نیستند
• آن دسته از افرادي كه مي خواهند با آخرين زبان علامتگذاری جهان HTML5 آشنا شوند.
• طراحان وبی که با دستورات HTML کار می کنند اما قادر به اجرای کامل دستورات نیستند نیز می توانند از این دوره بهرمند شوند .
• طراحان وبی که javascript رامی شناسند ولی قادر به درک کاملی از این زبان قدرتمند نیستند نیز می توانند با شرکت در این دوره با کلیه زوایای زبان کلاینت ساید جاوا اسکریپت آشنا شوند.
• کاربرانی که می خواهند با ابزارقدرتمند طراحی وب سایت Aptana کار کنند نیز از مخاطبین این دوره می باشند .

اهداف دوره:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• مقدمات کار با CSS
• آشنایی با استایل‌ها و روش‌های مختلف نوشتن آن
• درک ساختار یک دستور CSS
• نوشتن دستورات CSS در کنار یکدیگر
• انتخاب المان مورد نظر در HTML
• آشنایی کامل با انتخاب‌کننده‌ها در CSS
• وراثت در CSS

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

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

• تعیین موقعیت المان‌ها (Position)
• شناور کردن المان‌ها در صفحه وب
• کنترل المان‌های موجود در مجاورت المان‌های شناور
• آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن
• مخفی کردن المان‌ها در یک صفحه وب

• درست کردن ساختار (Layout) توسط CSS
• چرا برای ساخت یک صفحه وب، از جداول استفاده نکنیم
• آشنایی با انواع صفحات وب مختلف
• آشنایی با صفحات تک‌ستونی
• آشنایی با صفحات چندستونی
• ساخت صفحات دوستونی
• ساخت صفحات سه‌ستونی ساده و پیچیده
• تنظیم ارتفاع تمامی ستون‌های صفحه وب به یک اندازه
• آشنایی با باگ‌های مختلف مرورگرهای مختلف
• پروژه عملی :ایجاد یک قالب کامل با 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
• استفاده از المنت address
• استفاده از المنت small
• استفاده از المنت mark
• كاركردن با تاريخ و زمان
• ایجاد لینک در سطح بلوک
• فهمیدن رابطه لينكها

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

• کار کردن با فرم های HTML5
• المان جدید کادر متنی
• صفت های جدید
• استایل فرم و ایجاد پیغام های خطا
• پروژه عملی : ایجاد یک فرم حرفه های با 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
• دستکاری ویژگی ها ( Attributes ) با jQuery
• Wrapping ، جایگزینی و حذف محتوی
• ستفاده از jQuery Event Object

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

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