آموزش ایجاد یک تجربه وب Responsive

Creating a Responsive Web Experience

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: در بسیاری از مواقع ، تغییر اندازه ساده طراحی وب شما برای ایجاد تجربه کاربری رضایت بخش کافی نیست. این دوره به شما کمک می کند تا صفحات وب خود را با اندازه های مختلف صفحه با HTML ، CSS و JavaScript پاسخگو باشید. Chris Converse نشان می دهد که چگونه HTML موجود خود را اصلاح کنید ، محتوای آن را به صورت پویا بارگیری کنید ، عناصر را در صفحه متحرک کنید و پیمایش را در صفحه های کوچکتر از بین ببرید - در حالی که به کاربران اجازه می دهد منوها را با ضربه انگشت گسترش دهند.

توجه: این دوره از کتابخانه JavaScript jQuery برای افزودن تعامل و سایر ویژگی ها به سایت نمونه استفاده می کند. اما اگر قبلاً هرگز JavaScript ننوشته اید ، نگران نباشید. این دوره یک روش گام به گام برای نوشتن فقط کدی است که شما برای تکرار تجربه کریس روی صفحه نمایش نیاز دارید.
موضوعات شامل:
  • اصلاح گرافیک
  • تنظیم CSS برای پیمایش
  • افزودن جاوا اسکریپت و jQuery به پروژه شما
  • بارگیری محتوا با jQuery
  • تعیین اندازه صفحه با JavaScript
  • بارگیری محتوای جایگزین براساس اندازه صفحه نمایش
  • متحرک سازی پانل قهرمان
  • حفظ پشتیبانی از Internet Explorer 7 و 8

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

مقدمه Introduction

  • پیش نمایش پروژه نهایی Preview the final project

  • درباره پرونده های تمرینی About the exercise files

  • نرم افزاری که شما برای تکمیل این دوره نیاز دارید The software you'll need to complete this course

  • برای افرادی که از Dreamweaver استفاده می کنند For those using Dreamweaver

1. اصلاح پروژه قبلی 1. Modifying the Previous Project

  • اصلاح گرافیک Modifying the graphics

  • تنظیم CSS برای پیمایش Adjusting the CSS for the navigation

2. محتوای بارگذاری پویا 2. Dynamically Loading Content

  • افزودن یک ظرف محتوا و پرونده ها Adding a content container and files

  • JavaScript و jQuery را به پروژه خود اضافه کنید Adding JavaScript and jQuery to your project

  • بارگیری محتوا با jQuery Loading content with jQuery

3. سبک کردن Hero Area 3. Styling the Hero Area

  • قرار دادن تصویر و زیرنویس Positioning the image and caption

  • نوشتن شرح تصاویر قهرمان Styling the hero captions

4. تنظیم تجربه بر اساس اندازه صفحه نمایش 4. Adjusting the Experience Based on Screen Size

  • تعیین اندازه صفحه با JavaScript Determining the screen size with JavaScript

  • تشخیص تغییر اندازه صفحه نمایش Detecting a change in screen size

  • بارگیری محتوای جایگزین بر اساس اندازه صفحه نمایش Loading alternative content based on screen size

  • دکمه nav mobile را تنظیم کنید Setting up the mobile nav button

  • تنظیم پانل ناوبری موبایل Setting up the mobile nav panel

  • پانل nav را باز و بسته کنید Opening and closing the nav panel

5. انیمیشن کردن صفحه قهرمان 5. Animating the Hero Panel

  • بارگیری تصاویر Preloading images

  • متحرک کردن عناصر قهرمان Animating the hero elements

6. حفظ پشتیبانی از اینترنت اکسپلورر 7 و 8 6. Maintaining Support for Internet Explorer 7 and 8

  • تغییر CSS و JavaScript برای Internet Explorer 7 و 8 Altering the CSS and JavaScript for Internet Explorer 7 and 8

نتیجه Conclusion

  • از اینجا به کجا بروم Where to go from here

نمایش نظرات

آموزش ایجاد یک تجربه وب Responsive
جزییات دوره
1h 23m
21
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
88,805
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Converse Chris Converse

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