Class 4 Notes for Web Publishing II

Learning Objectives:

You will be able to identify what a Framework is and why you would use one.

You will be able to identify what the difference between a regular and responsive design of a website.

Homework:

Post: Responsive Design Website that is linked off your homework page. Make sure to have 4 pages with graphics and links to an external site. Pay attention to the layout of the content. You can use a Framework, Dreamweaver or another HTML editor

Review: Responsive Design using CSS

Pick one and Review:

W3schools Bootstrap

Foundation

W3.CSS

 

Topics Covered:

Bootstrap 3 is mobile-first framework that is designed to be responsive to mobile devices.

Bootstrap Setup

 

Step 1. add the following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width  sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Step 2. add links to Bootstrap CSS and Javascript

The links can be to local files or the online files. Local files are better because you can customize and you don't have to rely on a remote site being available.

Step 3. Create Containers

Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from:

  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).

 

Step 4. Create Rows

Bootstrap's grid system allows up to 12 columns across the row (page.)

You will be modifing Classes to create the desired layout and responsiveness using the Grid.

 

Grid Classes (The Bootstrap grid system has four classes)

  1. xs (for phones)
  2. sm (for tablets)
  3. md (for desktops)
  4. lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

 

 

Placing Files Locally

css path for background

Div Layout Tutorial

Templates

CSS3 in Dreamweaver

Using Dreamweaver to edit Joomla Templates

CSS3 Generator and Specialized Generator

Terms:

Templates, CSS3 and Generators

 

Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.