Design for web session 3

Creating the buttons, firstly we created what we wanted the buttons to look like in illustrator, creating 2 layers, the first is how we wanted the button to look without scrolling over it, the second layer is how we wanted it to look when the  mouse was moved over it. 

Then in dreamweaver we inserted a roll over button where we loaded each image. Shown below

We did this same process for each button, remembering to  close it with </div> 

Box Model

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge

The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge

The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

Drawing the layout for the website 

Creating the columns 

Inserting text 

<p> = paragraph break 

<br>   - line break

Adding a video 

We went on vimeo and on every video there is a share button, we select this and then changed what we wanted and then copied the code into the right column between the open <div> code 

Inserting a image

We saved out image and opened it on photoshop and then made it the size we wanted it to be, we then saved it as a jpeg

We then inserted it into our coding on dreamweaver 

Our end website