CIS 195 - Web Authoring 1

CIS195 Web Authoring 1: HTML

More Page Layout Using CSS

Topics by Week for the Eight-Week Term
Weeks 1-4	Weeks 5-8
1. Intro to HTML	5. Midterm, Layout with CSS
2. More HTML, file paths	6. CSS Grid and Flexbox
3. Site structure and navigation	7. HTML Tables
4. Formatting with CSS	8. HTML Forms, Final

Weeks 1-5	Weeks 6-10
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Grid, Flexbox
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia, Final
5. Project Propposal, Midterm	10. HTML Tables, Project Completion
11. Final

[Topics by Week for the Ten-Week Term]

[TOC]

Q and A

Are there any questions about uploading web sites to citstudent?
Are there any questions about the term project?
Review due dates on Canvas.

Introduction

This week we will be talking about using CSS for page layout (design), which is different from formating. The difference is that layout involves controlling the position of things on the page rather than just their appearance.

Backgrounds

Backgrounds are colors or images that are in the background of a particular element of your page. If you use body as the selector, then the background will be for the whole body of your page. Using html as the selector will apply the background to the whole page.

CSS background properties

background-color—sets the color of the background.
background-image—sets an image to use as the background.
background-repeat—controls how an image is or isn’t repeated.
background-attachment—controls whether or not the image scrolls with the page.
background-position—sets the initial position of background images.
- top, bottom, left, right, center (and more)
- Numeric coordinates like: 50px 70px
background-size—sets the size of the background image.
This property doesn’t work on body, you need to apply it to a structural element like div.
- auto, contain, cover (and more)
- Numeric width and height, like: 500px 400px

Background Images

Set a background image:

body {
  background-image: url("sunset.png");
}

Make an image fill the browser viewport:

background-repeat: no-repeat will stop the image from being tiled.
background-size:cover will cause the image to fit the width to the viewport, but the top and bottom might be clipped.
background-size: contain will make the image height fit the height of the containing element.

div {
  background-image: url("sunset.png") 
  background-repeat: no-repeat
  background-size: cover;
}

Make an image stretch to fit the body:

div {
  background-image: url("sunset.png");
  background-size: 100% 100%; 
}

Center the background image:
(The height of the containing element can be set to determine vertical centering.)

body {
  height: 500px;
  background-image: url("sunset.png") 
  background-repeat: no-repeat
  background-position: center;
}

Background shorthand property:

body {
  background: orange url("sunset.png") no-repeat left top;
}

Example of a Background Image

Web Page with LCC Center Building Background Image

Page Design

Fixed Layout

Uses absolute sizes to keep the page at a fixed size.

body {
  width: 1000px;
}

Fluid Layout

Uses percentages to allow the page expand or contract to fit the size of the browser.

body {
  width: 80%;
}

Float and Clear

Float

The float property is used with block elements to position them side-by-side (instead of one above another) and to make them move as far as they can to either the left of right.

Example:

figure {
  float: right;
}

Clear

The clear property is used to cancel the float property and put the element back into the normal flow of the page.