2015
Train Simple
Dan Carr
5:00
English
In this course, Dan Carr guides you through developing a responsive website in Adobe Dreamweaver using the Bootstrap framework. First, you'll learn about what responsive design is and it's role in modern web design. Next, Dan reviews all the features built into Dreamweaver for working with Bootstrap. Finally, you'll build a complete responsive website from a Photoshop mockup and test your site on various devices.
1. Understanding Bootstrap & Dreamweaver
Course Overview
What is Responsive Design?
How Does a Fluid Grid Work?
How Does Bootstrap Make Design Easier?
How Does Dreamweaver Make Design Easier?
So, What's the Workflow?
2. Setup the Bootstrap Project
Get the Supplied Files
Create a new Site
Create a CSS File for the Project
Create an HTML page and Add the Bootstrap Framework
Navigate the Page in the Dreamweaver Workspace
3. Working with the Boostrap 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
4. Working with Bootstrap Components
Component Overview
Working with Containers
Working with Navbars
Working with Buttons
Working with Media
Working with Forms
Working with Pagination
Working with Jumbotrons
Working with Lists
5. Build Pages for a Website Design
Create a Page Template Header
Create a Page Template Footer
Customizing the Header CSS
Customizing the Footer CSS
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
Create the Articles Page Part1
Create the Articles Page Sidebar Part1
Create the Articles Page Sidebar Part2
Create the Contact Page
Add Hyperlinks and Navigation Part1
Add Hyperlinks and Navigation Part2
6. Add Text, Images, and CSS Using the Extract Panel
Overview of the Photoshop Design Comps
Overview of Using Extract in Dreamweaver
Add Web Fonts to the Project
Styling the Landing Page Jumbotron Part1
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
Add Content to the Articles Page Part1
Add Content to the Articles Page Part2
Add Content and Branding to the Contact Page
trainsimple.com/CourseDetailUser.aspx?id=206
Download File Size:1.73 GB
|
