Computer Science 302:

Web Development

Gregory M. Kapfhammer

Up right corner flickr photo by vincentag shared under a Creative Commons (BY-NC-ND) license

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

flickr photo by SaurabhChatterjee shared under a Creative Commons (BY-NC-ND) license

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

CSS for Layout

Differences with prior material?

Normal Flow

Block-level elements

Inline elements

Replaced inline elements

Non-replaced inline elements

Block-level: flow top to bottom

Inline: flow left to right

See Figure 7.3 for an example

Viewport width

Why is height less important?

Let's cause web sites to "flow"!

Change the viewport width of your browser

Complete this task for multiple sites

There are extensions to support this process!

What did you discover?

Positioning HTML Elements

Relative Positioning

Absolute Positioning

Fixed Positioning

Can you "opt out" of the flow?

Yes, through floating!

float: left;

float: right;

Float in the page

Float in the container

Float multiple items

Overlaying and hiding elements

See Section 7.3.4 for more details

Now, for the really fun content!

Constructing multiple column layouts

Two-column layouts with floats

See 7.22 through 7.25

What about absolute positioning?

Elements can 🏃 over other elements!

How do I manage footers?

Can be too low or too high!

See Figure 7.28 for an example

Wow, this is really hard!

Is there a better solution?

Gee, I am glad that you asked! 😼

Flexible box (flexbox) layout in CSS3

Generalized and reusable layouts

But, consider browser support

Let's take a step back ...

Layout with CSS

Fixed layout: width set by designer

Fluid layout: width set with percentages

Responsive layout: respond to changes

How can a page sense viewport width?

Media Queries

Responsive Design

Scale down images

Replace navigation elements

Abbreviate page contents

Respond to viewport width!

☻ Sounds great! ✔

What are the challenges?

Need to program "conditional logic"

If A then B

What is A and B for RWD?

How do you implement conditional logic?

Media Queries!

Responsive CSS frameworks?

Twitter Bootstrap

Zurb Foundation

What does a framework provide?

Responsive Design Frameworks

Pre-defined media queries

Styled HTML elements

JavaScript for interaction

We will try some of this in lab and practical!

Any questions about web page layout?