دوره های طراحی صفحات وب

طراحی صفحات وب با PHP و ASP طراحی صفحات وب با Joomla و Wordpress

 

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

  • افراد در پایان دوره به تسلط کامل در تگ های HTML مي رسند.
  • افراد در پایان دوره به تسلط کامل در تگ های XHTML مي رسند.
  • افراد در این دوره روش های کاربردی XML را در طراحی وب سایت بکار خواهند گرفت.
  • آموزش طراحي وب سايت با استفاده از (DIV,CSS(3
  • آموزش tag هاي جديد (HTML(5 در طراحي وب سايت
  • با استفاده از امکانات بی نظیر HTML 5 ماندد انیمیشن و مالتی مدیا در طراحی وب می توانند قالب وب خود را پویا نمایند.
  • با تسلط بر چگونگی بکارگیری استایل های CSS به طور کامل می توانند به جذابیت گرافیکی وب خود بیفزایند.
  • آموزش بهينه سازي وب سايت براي موتورهاي جستجو
  • آموزش JavaScript و كاربرد آن در صفحات وب
  • آموزش كاربردي JQuery و كاربرد آن در صفحات وب
  • آموزش استفاده از كامپوننت هاي JQuery UI و استفاده از عناصر tab,accardion,popup,ديگر عناصر كاربردي JQueri UI
  • در این دوره دانشجویان قادر خواهند بود تا قالب گرافیکی مورد نظر خود را در نرم افزار PHOTOSHOP طراحی نمایند.
  • افراد در طي اين دوره با ساخت 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
  • استفاده از پیکسل ها
  • انیمیشن در بوم نقاشی
  • ذخیره سازی اطلاعات
  • امکانات ذخیره اطلاعات در HTML5
  • ذخیره اطلاعات در وب
  • استفاده از بانک های SQL
  • کنترل داده به کمک HTML5
  • نمایش داده به کمک HTML5
  • ذخیره داده در وب
  • چگونگی ذخیره داده در لوکال Local
  • مفهوم DRAG AND DROP
  • چگونه می توان یک المان را DRAG AND DROP نمود
  • ایجاد و تغییر در تنظیمات DRAG AND DROP
  • آشنايي با فناوری های مشارکتی و استفاده از آن ها در HTML5
  • مروری بر API مکان یابی جغرافیایی
  • مروری بر Web Storage API
  • امکانات چت در HTML5
  • ترکیب 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 ( گرداننده عکس )
  •  

 

طراحی صفحات وب با PHP و ASP طراحی صفحات وب با Joomla و Wordpress