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

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

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

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

درک Bootstrap و Dreamweaver Understanding Bootstrap & Dreamweaver

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

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

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

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

• بنابراین ، گردش کار چیست؟ So, What's the Workflow?

پروژه Bootstrap را راه اندازی کنید Setup the Bootstrap Project

• پرونده های ارائه شده را دریافت کنید Get the Supplied Files

• یک سایت جدید ایجاد کنید Create a new Site

• یک فایل CSS برای پروژه ایجاد کنید Create a CSS File for the Project

• یک صفحه HTML ایجاد کرده و Bootstrap Framework را اضافه کنید Create an HTML page and Add the Bootstrap Framework

• صفحه را در فضای کاری Dreamweaver مرور کنید Navigate the Page in the Dreamweaver Workspace

کار با سیستم Grid Bootstrap Working with the Bootstrap Grid System

• ایجاد یک شبکه Create a Grid

• ردیف ها و ستون ها را در شبکه بسازید Build Rows and Columns in the Grid

• ردیف ها و ستون ها را در شبکه ویرایش کنید Edit Rows and Columns in the Grid

• رفتار ستون را در اندازه های صفحه نمایش تعریف کنید Define Column Behavior Across Screen Sizes

• محتوا را با قطعه قطعه به شبکه اضافه کنید Add Content to the Grid with Snippets

• پیش نمایش کار خود را Preview Your Work

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

• بررسی اجزای کلی Component Overview

• کار با کانتینر Working with Containers

• کار با Navbars Working with Navbars

• کار با دکمه ها Working with Buttons

• کار با رسانه Working with Media

• کار با فرم ها Working with Forms

• کار با Pagination Working with Pagination

• کار با Jumbotrons Working with Jumbotrons

• کار با لیست ها Working with Lists

ایجاد صفحاتی برای طراحی وب سایت Build Pages for a Website Design

• یک عنوان صفحه الگو ایجاد کنید Create a Page Template Header

• یک صفحه زیر صفحه الگو ایجاد کنید Create a Page Template Footer

• سفارشی سازی Header CSS Customizing the Header CSS

• سفارشی کردن Footer CSS Customizing the Footer CSS

• صفحه فهرست Jumbotron را ایجاد کنید Create the Index Page Jumbotron

• فراخوانهای اقدام به صفحه فهرست ایجاد کنید Create the Index Page Calls to Action

• ویژگی های صفحه فیلم را ایجاد کنید Create the Features Page Video

• محتوای صفحه ویژگی ها را ایجاد کنید Create the Features Page Content

• چرخ فلک و تصاویر زیر صفحه گالری ایجاد کنید Create the Gallery Page Carousel and Subimages

• محتوای صفحه گالری را ایجاد کنید Create the Gallery Page Content

• ایجاد صفحه مقالات Part1 Create the Articles Page Part1

• نوار کناری صفحه مقاله را ایجاد کنید Part1 Create the Articles Page Sidebar Part1

• نوار کناری صفحه مقاله را ایجاد کنید Part2 Create the Articles Page Sidebar Part2

• صفحه تماس ایجاد کنید Create the Contact Page

• پیوندهای پیوندی و پیمایش Part1 را اضافه کنید Add Hyperlinks and Navigation Part1

• اضافه لینک ها و پیمایش Part2 Add Hyperlinks and Navigation Part2

با استفاده از صفحه استخراج متن ، تصاویر و CSS را اضافه کنید Add Text, Images, and CSS Using the Extract Panel

• مروری بر طراحی های فتوشاپ Overview of the Photoshop Design Comps

• بررسی اجمالی استفاده از Extract در Dreamweaver Overview of Using Extract in Dreamweaver

• قلم های وب را به پروژه اضافه کنید Add Web Fonts to the Project

• یک ظاهر طراحی صفحه فرود Jumbotron Part1 Styling the Landing Page Jumbotron Part1

• یک ظاهر طراحی صفحه فرود Jumbotron Part2 Styling the Landing Page Jumbotron Part2

• یک ظاهر طراحی صفحه فرود برای اقدام Styling Landing Page Calls to Action

• افزودن نمایش داده های رسانه ای به صفحه فرود Adding Media Queries to Landing Page

• افزودن فیلم به صفحه ویژگی ها Adding Video to Features Page

• ویژگی های یک ظاهر طراحی شده لیست صفحه Styling Features Page List

• افزودن تصاویر به صفحه گالری چرخ فلک Adding Images to Gallery Page Carousel

• افزودن تصاویر زیر و محتوا به صفحه گالری Adding Subimages and Content to Gallery Page

• افزودن محتوا به صفحه مقالات قسمت 1 Add Content to the Articles Page Part1

• افزودن محتوا به صفحه مقالات قسمت 2 Add Content to the Articles Page Part2

• محتوا و مارک تجاری را به صفحه تماس اضافه کنید Add Content and Branding to the Contact Page

• با استفاده از پیش نمایش دستگاه داخلی Dreamweaver Using Dreamweaver's Built-In Device Preview