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

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

مقدمه Introduction

• طراحی پاسخگو سرعت بخشید Speed up responsive design

• آنچه باید بدانید What you should know

1. شروع کنید 1. Get Started

• نسخه Bootstrap را تنظیم کنید Set the Bootstrap version

• شبکه طرح را درک کنید Understand the layout grid

• شبکه طرح را تعریف کنید Define the layout grid

2. ناوبری سایت را ایجاد کنید 2. Create the Site Navigation

• یک نوار ناوبری درج کنید Insert a navigation bar

• پیوندها را ویرایش کنید Edit the links

• قابلیت استفاده در صفحه نمایش های کوچک را بهبود بخشید Improve usability on small screens

• سبک های سریع را در نوار پیمایش اعمال کنید Apply quick styles to the navigation bar

• طرح رنگ را سفارشی کنید Customize the color scheme

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

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

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

• یک ردیف و ستون درج کنید Insert a row and columns

• یک تصویر پاسخگو درج کنید Insert a responsive image

• شکاف های اطراف تصویر را حذف کنید Remove gaps around the image

• متن را روی تصویر قرار دهید Position text over the image

4- با ردیف و ستون کار کنید 4. Work with Rows and Columns

• تغییر اندازه و کپی کردن ستون ها Resize and duplicate columns

• طرح فلکس: ستون های یکسان توزیع شده Flex layout: Equally distributed columns

• از نشانه گذاری معنایی استفاده کنید Use semantic markup

• متن قالب بندی شده را جایگذاری کنید Paste formatted text

• قرار دادن تصاویر در اندازه ثابت Insert fixed-size images

• طرح فلکس: ستون های محور Flex layout: Centered columns

• در یک ستون خالی چسباندن Paste into an empty column

• بخش ویژگی را سبک کنید Style the feature section

5- اجزای Bootstrap را ویرایش کنید 5. Edit Bootstrap Components

• درج کارت ها Insert cards

• محتوای را به کارتها اضافه کنید Add content to cards

• متن را بر روی تصویر کارت قرار دهید Superimpose text on a card image

• نحوه ساخت چرخ فلك How a carousel is structured

• چرخ فلک را ویرایش کنید Edit a carousel

6. طراحی را کامل کنید 6. Complete the Design

• پاورقی را اضافه کنید Add the footer

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

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

نتیجه Conclusion

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