آموزش جنبه های عملی طراحی وب سایت بصورت كاربردی و پروژه ای
- افراد در پایان دوره به تسلط کامل در تگ های 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 ( گرداننده عکس )