Designing for Web Workshop 3

WORKSHOP 3

We began the third workshop by adding in remaining buttons - 

we created the buttons the same way we did in illustrator the previous session - you can also use other programmes like photoshop or MS paint

File new > New document > Profile set to web 

We made our first button

save for web

I then changed my button by adding the word work underneath it backwards so when you hovered over it it appeared so you knew it was a button.

I called my next section album artwork as its appropriate for my actual website and created a similar button.

I lastly added contact me.

We created this text to insert the rollover image into the div id

We went to insert>insert roll over image

we repeated this for all 3 buttons we had created.

We next created these codes to make all the pages link up and each specific page said its title name at the top.

This is a screen shot from all the 3 pages

Box Model

This is a box model and we use them to plan how much space we need around our content and so its even and looks correct on the website.

You specify the area - 

We created some coding so we could make some columns. We made sure we had the right measurements for our page which were width 382 and height 728px.

Left Coding - 

Right coding -

I also changed the colouring on my pages so that the columns were different colours and so i could see them to make sure the changes had been applied.

This is the left hand column in the light grey then the right column in the dark grey

The next thing we did was add some lorel ipsum text to see how well it worked adding content in.

I chose to use the code  <br> break to make a few line spaces between the top and the text also <p> for new paragraph.

We changed the style of the text on the top to italic

This is what it looked like..

The last part of the session we attempted to put a vimeo video on to the website.

You copy the embedded link you type in your page dimensions and it gives you the video in the right size you then copy and paste the code into the div ID. unfortunately it wasn't working very well for everyone in the session and maybe its because of copyright issues. Vimeo will work perfectly for our own content or other videos.

We also looked at adding an image. I picked a photo of chocolate off google and saved it and opened it in photoshop you re size the image so its appropriate for your web and save the image as web photo.

You then insert image on dreamweaver into the right part of the div and it will appear in which column you select it to go into .