ایجاد یک ارائه پاسخگو در HTML5

Creating a Responsive Presentation in HTML5

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

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

سپس، وقتی آماده شدید، تماشا کنیدپروژه های HTML5: ایجاد یک ارائه پاسخگوی پیشرفتهدوره تکمیلی برای بهبود اسلایدهای ارائه وب شما با صدا، تصویر و قابلیت پخش خودکار.

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

رفتن به 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

نمایش نظرات

ایجاد یک ارائه پاسخگو در HTML5
جزییات دوره
1h 24m
24
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
28,759
- از 5
دارد
دارد
دارد
Justin Putney
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Justin Putney Justin Putney

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