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

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

درک طراحی پاسخگو ، بوت استرپ و Dreamweaver Understanding Responsive Design, Bootstrap, and Dreamweaver

• مقدمه Introduction

• طراحی پاسخگو چیست؟ What Is Responsive Design?

• شبکه مایع چگونه کار می کند؟ How Does a Fluid Grid Work?

• چگونه بوت استرپ طراحی را آسان می کند؟ How Does Bootstrap Make Design Easier?

• Dreamweaver چگونه طراحی را آسان می کند؟ How Does Dreamweaver Make Design Easier?

• بررسی اجمالی پروژه و گردش کار Project and Workflow Overview

شروع پروژه Starting the Project

• مقدمه Introduction

• فایلهای ارائه شده را دریافت کرده و سایت جدیدی را در Dreamweaver راه اندازی کنید Get the Supplied Files and Set up a New Site in Dreamweaver

• مخزن Git را تنظیم کنید Set up a Git Repository

• کار با Sass را شروع کنید Start Working with Sass

• یک فایل برای سبک های جهانی ایجاد کنید Create a File for Global Styles

• یک صفحه HTML ایجاد کنید و در Dreamweaver Workspace گشت بزنید Create an HTML Page and Tour the Dreamweaver Workspace

کار با شبکه های CSS و Bootstrap در Dreamweaver Working with CSS and Bootstrap Grids in Dreamweaver

• مقدمه Introduction

• برای ساخت سبک ها از Code View و CSS Designer استفاده کنید Use Code View and CSS Designer to Craft Styles

• بررسی اجمالی Flexbox Overview of Flexbox

• یک شبکه ایجاد کنید و سطرها و ستون ها را اضافه کنید Create a Grid and Add Rows and Columns

• رفتار ستون ها را در اندازه های صفحه نمایش پیکربندی کنید Configure the Behavior of the Columns Across Screen Sizes

• برای چیدمان مطالب از Flexbox استفاده کنید Use Flexbox to Layout Content

کار با اجزای بوت استرپ Working with Bootstrap Components

• مقدمه Introduction

• با اجزای کانتینر شروع کنید Start with Container Components

• با Jumbotron یک بنر درست کنید Create a Banner with the Jumbotron

• با یک تصویر پاسخگو کار کنید Work with a Responsive Image

• با استفاده از کارت ، ظروف محتوای قابل استفاده مجدد بسازید Build Reusable Content Containers Using Cards

• اجزای خود را سفارشی کنید Customize Your Components

ایجاد تعامل با بوت استرپ Building Interactivity with Bootstrap

• مقدمه Introduction

• تعامل و رویدادها Interactivity and Events

• ورودی کاربر را با یک دکمه ضبط کنید Capture User Input with a Button

• با استفاده از برگه ها ، کنترلهای پیمایش را تنظیم کنید & nbsp؛ Set up Navigation Controls Using Tabs

• ایجاد پیوندهای پیکربندی پذیر Create Configurable Hyperlinks

• با م withلفه فرم فرم ایجاد کنید Build a Form with the Form Component

• با استفاده از JavaScript ، یک رفتار سفارشی & nbsp؛ اضافه کنید Add a Custom Behavior Using JavaScript

ایجاد الگوی صفحه با استفاده از مonلفه ها Creating a Page Template Using Components

• مقدمه Introduction

• بررسی اجمالی ماکتهای طراحی فتوشاپ Overview of the Photoshop Design Mockups

• فایلهای CSS و HTML را برای الگو ایجاد کنید Create CSS and HTML Files for the Template

• یک سربرگ با آرم و کامپوننت Navbar بسازید Build a Header with a Logo and Navbar Component

• Navbar را با CSS و یک Query Media سفارشی کنید Customize the Navbar with CSS and a Media Query

• یک پاورقی با نمادهای Text و SVG ایجاد کنید Create a Footer with Text and SVG Icons

• پاورقی را با CSS سبک کرده و جلوه "Sticky" را اضافه کنید Style the Footer with CSS and Add the “Sticky” Effect

• الگوی صفحه را به عنوان قطعه کد ذخیره کنید Save the Page Template as a Code Snippet

با استفاده از الگو یک صفحه وب بسازید Build a Web Page Using the Template

• مقدمه Introduction

• با Snippet یک صفحه ایجاد کنید Create a Page with the Snippet

• Mockup را با مonلفه ها پیاده سازی کنید Implement the Mockup with Components

• از پیش نمایش دستگاه داخلی Dreamweaver استفاده کنید Use Dreamweaver’s Built-in Device Preview

• وب سایت را کامل کنید Complete the Website