آموزش Dreamweaver CC 2015: طراحی Responsive با بوت استرپ

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

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

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

1. شروع کار 1. Getting Started

• درک نحوه کار Bootstrap Understanding how Bootstrap works

• فضای کاری Dreamweaver را تنظیم کنید Setting up the Dreamweaver workspace

• تعریف شبکه طرح بوت استرپ Defining the Bootstrap layout grid

2. ایجاد پیمایش سایت 2. Creating the Site Navigation

• درج نوار پیمایش Inserting a navigation bar

• در حال ویرایش پیوندها Editing the links

• ایجاد یک منوی کشویی Creating a dropdown menu

• نوار پیمایش Styling the navigation bar

• افزودن تصویر پس زمینه به نام تجاری Adding a background image to the brand

3. اضافه کردن تصویر Hero 3. Adding a Hero Image

• افزودن یک ظرف برای محتوای صفحه Adding a container for the page content

• درج تصویر قهرمان Inserting the hero image

• صفحه را روی تصویر قرار می دهد Positioning the page heading over the image

4- کار با ستون ها 4. Working with Columns

• تغییر اندازه ستون ها Resizing columns

• ستون های تکراری با متن حفره یا سوراخ Duplicating columns with placeholder text

• استفاده از چسباندن ویژه در نمای زنده Using Paste Special in Live View

• پاک کردن ستون های با طول ناهموار Clearing columns of uneven length

• ایجاد بخش ویژگی Creating the feature section

• تنظیم طرح و یک ظاهر طراحی شده در قسمت ویژگی ها Adjusting the layout and styling the feature section

• افزودن مطالب بیشتر Adding more content

• پاورقی صفحه را اضافه کنید Adding the page footer

• پنهان کردن عناصر Hiding elements

• اضافه کردن صفحات اضافی Adding extra pages

5. با استفاده از پیش نمایش دستگاه 5. Using Device Preview

• اتصال به یک دستگاه تلفن همراه Connecting to a mobile device

• با استفاده از CSS Inspect با پیش نمایش دستگاه Using CSS Inspect with Device Preview

نتیجه Conclusion

• بعدش چی؟ What next?