آموزش راه انداز 3: افزودن تعامل به سایت شما

مقدمه Introduction

• خوش آمدی Welcome

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

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

1. تنظیم 1. Setting Up

• نصب Sublime Text 2 Installing Sublime Text 2

• نصب بوت استرپ 3 Installing Bootstrap 3

• نصب جی کوئری Installing jQuery

2. ایجاد یک گالری تصاویر کوچک با پاپ آپ های معین 2. Creating a Thumbnail Gallery with Modal Pop-Ups

• برنامه ریزی گالری تصاویر کوچک Planning the thumbnail gallery

• ایجاد طرح شبکه گالری تصاویر کوچک Creating the thumbnail gallery grid layout

• ایجاد ویندوزهای معین Creating the modal windows

• ریزگردها به پنجره های معین وصل می شوند Linking the thumbnails to the modal windows

• طرح بندی تصاویر کوچک را با زیرنویس ها بهبود می بخشید Enhancing the thumbnail layout with captions

• چالش: تصاویر کوچک و مدول های یک ظاهر طراحی شده Challenge: Styling thumbnails and modals

• راه حل: تصاویر کوچک و مدول های یک ظاهر طراحی شده Solution: Styling thumbnails and modals

3. ایجاد یک چرخ فلک تصویر برای صفحه اصلی 3. Creating an Image Carousel for the Homepage

• برنامه ریزی چرخ فلک تصویر و آماده سازی تصاویر Planning the image carousel and prepping images

• ایجاد چرخ فلک تصویر Creating the image carousel

• اضافه کردن ناوبری چرخ فلک Adding carousel navigation

• اضافه کردن زیرنویس ها به چرخ فلک Adding captions to the carousel

• اضافه کردن و یک ظاهر طراحی شده یک نشانگر موقعیت چرخ فلک Adding and styling a carousel position indicator

• سفارشی کردن فاصله چرخش چرخ فلک و سبک بسته بندی Customizing the carousel rotation interval and wrapping style

• چالش: در چرخ فلك خود پنجره های معین ایجاد كنید Challenge: Create modal windows in your carousel

• راه حل: پنجره های معین را در چرخ فلک خود ایجاد کنید Solution: Create modal windows in your carousel

4- ایجاد فرم 4. Creating Forms

• از جمله ورودی متن و یک ظاهر طراحی شده آن با یک شبکه Including a text input and styling it with a grid

• ایجاد و قالب بندی دکمه های رادیویی Creating and formatting radio buttons

• ایجاد و قالب بندی منوی کشویی انتخاب Creating and formatting a selection dropdown menu

• افزودن جعبه نظرات و نکات راهنمای ابزار Adding a comments box and tooltips

• افزودن جعبه چک و استفاده از فروپاشی برای افزایش قابلیت استفاده Adding a check box and using collapse to enhance usability

• چالش: سبک کردن فرم Challenge: Styling the form

• راه حل: فرم دادن به فرم Solution: Styling the form

نتیجه Conclusion

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