20
Layouts with div ITP 104

ITP 104. While you can do things like this: Better to use styles instead:

Embed Size (px)

Citation preview

Page 1: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with divITP 104

Page 2: ITP 104.  While you can do things like this:  Better to use styles instead:

Style Review

While you can do things like this:

<img src="pic1.jpg" width="200" height="200" align="left" lat="mypic"/>

Better to use styles instead:

<img src="pic1.jpg" style="width:200px; height=200px; float:left" alt="mypic" />

Page 3: ITP 104.  While you can do things like this:  Better to use styles instead:

Style Review

You can add styles like margin padding

This will create a indenting and spacing around the element

Can use the float property to move an element to the side, and let others ‘wrap’ around it

Page 4: ITP 104.  While you can do things like this:  Better to use styles instead:

Style Review

If you use the float property keep in mind the following: If all the elements have the same float

value (i.e. float: left), they will stack up horizontally side by side in the order they were declared

This is true for most elements

Page 5: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

By default, text and images laid out on a page go the width of the screen browser. the default page is a large, single

column that goes the width of the browser.

The next step in controlling web page layouts is to use "div" tags to create "boxes" that do NOT go the width of the screen.

Page 6: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

If you put an image in the middle of a paragraph of text, and give that image a float value, that the text will "wrap" or go around the image

If we store text in a "box" we can actually float that box in the middle of a paragraph, and the outer text will "wrap" around the "box" of text

Page 7: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

You create "boxes" (of text, images, or both) using the <div> tag It is similar to the <p>aragraph tag,

except that it is regularly used to create regions that are NOT the whole width (100%)

We usually create <div>s we generally give them SET widths.

Page 8: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

Let’s take a look at the following:

<div id="box1" style="width:200px; height:500px; background-color: pink">Box 1</div>

<div id="box2" style="width:200px; height:500px; background-color: yellow">Box 2</div>

<div id="box3" style="width:200px; height:500px; background-color: magenta">Box 1</div>

Page 9: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

Based on the previous example: even though each box is not very wide,

they render on different lines If we set them to have float values, then

they lay out side-by-side similar to how images with float values stack together.

Page 10: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

<div id="box1" style="width:200px; height:500px; float:left;background-color: pink">Box 1</div>

<div id="box2" style="width:200px; height:500px; float:left;background-color: yellow">Box 2</div>

<div id="box3" style="width:200px; height:500px; float:left;background-color: magenta">Box 1</div>

Page 11: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

The DIV tag can be used to create "boxes" in a layout. Unlike the Paragraph tag, we CAN put divs (boxes)

inside divs.

A DIV tag runs the entire width of its container. i.e. divs have a default style of width:100% If it is inside another div (box), then by default it

goes all the way across (fills out) that box If it is inside the page, then it by default goes all

the way across the page.

Page 12: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

Key div layout style properties: width: how wide will the box be▪ i.e. width:400px ▪ i.e. width:50%

float: for all but the outermost container, you probably need to have a float orientation (left or right)▪ NOTE: for DIVs float will NOT work unless you

ALSO have set a width to the box.

Page 13: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

Key div layout style properties: id: it is not readily obvious why yet, but for now just get in

the habit of giving each div a UNIQUE ID name. ▪ Some good structural names are "outercontainer", "header",

"footer", "nav" and "maincontent".▪ You can of course also make up custom names like "movie1" or

"actor2”. margin: is the item "indented" or otherwise have a margin

around the OUTSIDE of it? ▪ The property margin: will set a margin around all four sides of the

box.▪ Or you can set just a single side such as margin-left: 20px

which would put a 20 pixel margin on the left side of the box.

▪ You can also use a special setting to make a box be "centered" within its container (most often used to center a layout on a page) by setting margin: auto

Page 14: ITP 104.  While you can do things like this:  Better to use styles instead:

<div> tag

Key div layout style properties: padding: where margin sets space OUTSIDE of a

box, the style property padding creates spacing INSIDE the box (between the edge of the box and its internal contents. ▪ Like margin setting just padding will create padding on

all four sides inside the box▪ or you can set an individual side such as padding-top.

border: the border around the edge of a box. ▪ attribute looks like border: solid 2px red▪ which means a solid (line) border around the item, that is 2 pixels

wide (the border) and is the color red

▪ We will revisit borders later

Page 15: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

Before you start laying out a page, it is useful to first draw some sketches and have an idea of what layout you want to create.

It is MUCH harder to lay out web pages "on the fly" without having first sketched and figured out the overall structure of the "boxes" of content.

Page 16: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

Some people also find it useful to have borders around all boxes (div) when they first start building the page.

To put borders/outlines on ALL boxes (divs) on a page put the code below in the HEAD of your document:

<style> div { border: solid 1px black } </style>

Page 17: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

First, decide the overall width dimensions of your page and create an "outer container" box for all of the elements. Think of this as setting the "width" of the main

layout of your page. ▪ If you wanted the whole web page to be 800 pixel across,

then you would create an "outer" div (box) that would have a style setting of "width:800px”▪ then build your main page inside that space.

An example of this might be <div style="width:800px" id="outercontainer">Main page here</div>.

Page 18: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

Second, figured out a background color or images for that main page container. Do you want the area outside that

"layout box" to have a background color or image? ▪ If so put some background style instructions

into the body tag (which the "outercontainer" div is INSIDE).

Page 19: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

Lastly, plan out the main interior of the layout space. Do you want an inverted L layout? Does your page have a distinct header

and footer? Will your page have more than one

column in its main space? Is there a navigation, and if so should it

be a distinct column of be wrapped by the main content area?

Page 20: ITP 104.  While you can do things like this:  Better to use styles instead:

Layouts with <div> tag

Some general design considerations for most web page layouts:1. Will the web page have a fixed width or dynamically

scale to the browser?2. Will the page have a header and/or footer?3. Will the page have an overall navigation (generally

yes). Will it be Left, Right or Top aligned? Is it a fully separated column or will it "float" within other content?

4. Outside of the navigation, will the main page have multiple columns or one main column?

5. What kind of background colors and images will weave throughout the page?