آموزش ایجاد یک ارائه Responsive در HTML5

Creating a Responsive Presentation in HTML5

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
توضیحات دوره: همراه نویسنده Justin Putney همراه باشید زیرا او از فناوری های باز (HTML5 ، jQuery و CSS) برای ایجاد نمایش اسلایدی نمایش پویا استفاده می کند که به طرح های موبایل و دسک تاپ پاسخ می دهد. بیاموزید که نمایش اسلاید را متناسب با پروژه بعدی خود تنظیم کنید و آثار هنری ، عکاسی و سایر مطالب را به نمایش بگذارید.

نحوه ساختار HTML و اسلایدها را کشف کنید. طراحی پیمایش برای واکنش به کلیک ، ورودی صفحه کلید و حرکات کش رفتن ؛ و از CSS برای سفارشی کردن نمایش اسلاید برای صفحه های مختلف و انتقال متحرک استفاده کنید. جاستین همچنین یک سری جفت چالش و راه حل برای آزمایش مهارت های شما دارد.

سپس ، هنگامی که آماده شدید ، دوره پیگیری HTML5 Projects: ایجاد یک دوره پیگیری ارائه پاسخگو پیشرفته را مشاهده کنید تا اسلایدهای نمایش وب خود را با صوت ، فیلم و ویژگی پخش خودکار بهبود ببخشید.
موضوعات شامل:
  • ساخت نمایش اسلایدی HTML5
  • ایجاد ظاهر اسلاید پیش فرض
  • استفاده از jQuery برای نمایش صفحه فعلی
  • افزودن حرکات کش رفتن برای موبایل
  • ایجاد صفحه مکث
  • ترجمه ایده های خود به CSS
  • استفاده از کوئری های رسانه برای تنظیم طرح

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

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود Introduction

  • خوش آمدی Welcome

  • پیش نیازهای این دوره Prerequisites for this course

  • با استفاده از پرونده های تمرینی Using the exercise files

  • با استفاده از چالش ها Using challenges

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 1. Understanding the Project

  • بررسی نتایج نهایی Exploring the final results

  • اکتشاف فن آوری های برجسته HTML5 ، CSS3 و JavaScript (jQuery) Exploring highlighted HTML5, CSS3, and JavaScript (jQuery) technologies

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 2. Creating Slides

  • ساختار HTML Structuring the HTML

  • ایجاد محتوای اسلاید Creating slide content

  • ایجاد شکل پیش فرض اسلاید Creating the default slide appearance

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 3. Displaying Pages and Creating Navigation

  • با استفاده از jQuery برای نمایش صفحه فعلی Using jQuery to display the current page

  • ناوبری کلیک و صفحه کلید را اضافه کنید Adding click and keyboard navigation

  • افزودن حرکات کش رفتن برای تلفن همراه Adding swipe gestures for mobile

  • چالش: ناوبری صفحه کلید سفارشی Challenge: Customized keyboard navigation

  • راه حل: ناوبری صفحه کلید سفارشی Solution: Customized keyboard navigation

  • چالش: یک صفحه مکث ایجاد کنید Challenge: Create a pause screen

  • راه حل: یک صفحه مکث ایجاد کنید Solution: Create a pause screen

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 4. Creating a Responsive Layout

  • تصمیم گیری در مورد نحوه پاسخگویی عناصر Deciding how elements will respond

  • ترجمه ایده ها به CSS Translating ideas into CSS

  • با استفاده از پرس و جوهای رسانه ای برای تنظیم طرح Using media queries to adjust the layout

  • تمام صفحه Full screen

  • انتقال CSS CSS transitions

  • چالش: ایجاد سایه متن پاسخگو Challenge: Creating a responsive text shadow

  • راه حل: ایجاد سایه متن پاسخگو Solution: Creating a responsive text shadow

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود Conclusion

  • مراحل بعدی Next steps

نمایش نظرات

نظری ارسال نشده است.

آموزش ایجاد یک ارائه Responsive در HTML5
خرید اشتراک و دانلود خرید تکی و دانلود | 160,000 تومان (5 روز مهلت دانلود) زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 5 تا 24 ساعت می باشد.
جزییات دوره
1h 24m
24
Linkedin (لینکدین) lynda-small
05 تیر 1392 (آخرین آپدیت رو دریافت می‌کنید، حتی اگر این تاریخ بروز نباشد.)
66,923
- از 5
ندارد
دارد
دارد
Justin Putney

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Justin Putney Justin Putney

جاستین پوتنی یک طراح ، انیماتور ، توسعه دهنده ، نویسنده ، Adobe Pro ، کارآفرین و دونده مینیمالیستی است. جاستین با استفاده از نرم افزار و آموزش ، بر ایجاد اختلاف بین طراحان و توسعه دهندگان تمرکز دارد. شرکت او ، Ajar Productions ، ابزارهایی را برای اتوماسیون کارهای تکراری (مانند اتصال لب برای انیمیشن) و ایجاد فرصت های جدید برای حرفه ای های خلاق (مانند انتشار طرح های خود در قالب های جدید) ایجاد می کند.

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

لینکدین به عنوان یکی از بزرگترین شبکه‌های اجتماعی حرفه‌ای، به میلیون‌ها افراد در سراسر جهان این امکان را می‌دهد تا ارتباط برقرار کنند، اطلاعات حرفه‌ای خود را به اشتراک بگذارند و فرصت‌های شغلی را کشف کنند. این شبکه اجتماعی به کاربران امکان می‌دهد تا رزومه حرفه‌ای خود را آپدیت کنند، با همکاران، دوستان و همکاران آینده ارتباط برقرار کنند، به انجمن‌ها و گروه‌های حرفه‌ای ملحق شوند و از مقالات و مطالب مرتبط با حوزه کاری خود بهره‌مند شوند.

لینکدین همچنین به کارفرمایان امکان می‌دهد تا به دنبال نیروهای با تجربه و مهارت مورد نیاز خود بگردند و ارتباط برقرار کنند. این شبکه حرفه‌ای به عنوان یک پلتفرم کلیدی برای بهبود دسترسی به فرصت‌های شغلی و گسترش شبکه حرفه‌ای خود، نقش مهمی را ایفا می‌کند. از این رو، لینکدین به عنوان یکی از مهمترین ابزارهای کارآفرینی و توسعه حرفه‌ای در دنیای امروز مورد توجه قرار دارد.