WEB DESIGN WORKSHOP// HTML, CSS and Java

Never use File>Open to open work. Go to Manage sit and find root folder. Open in Bottom right tab.
Today we will look at padding..

Add some body copy to the site using the design view.

How this text goes right to the edge, padding would specify where the text sits within the box. This system doesnt leave a gap between any of the content and will generally look very messy.

The padding option is entered beneath the bounding box here.

 We added 10px

This will knock the columns off kilter.

Take 20px off the width and height around each column. This will reshuffle the page.

So the text is back but it still runs to the edge.
To fix this apply the padding to every column. With the WxH change.

The bounding border is applied to the text now. The image is still the wrong size, this is why it is important to add imagery after the page has been totally set up.


We are now focusing on javascript.
We have downloaded lightbox 2 from the developers website.

Copy the important files of lightbox into our root folder. Then import all of the images, these will be the buttons on the lightbox. You can edit the button images to your own design.
Every image you want to appear in the light box needs to have a full size and a thumbnail size.
Thumbnails will be 80x80px.

Here is my image, from this I take the thumbnail.

We now need to add the functionality to the Head of our site. This should be in the template so it can be used on any page.

Copy this code from the lightbox website

 To the head of our template.

 Copy the next line in after...

 Then copy this code into...

 ... the actual area of you wish the image to be run in.

Change the image name to the actual name of the image you want to appear.

This will add the lightbox, but not the thumbnail...

To add the thumbnail. Enter design view and highlight the hyper link, go to Insert>Image.

Occasionally this will mess up your code, so go back to the code and make sure its all still there.

You can continue to copy in the image code to continue adding images.

If there are any issues make sure the code looks like this:

We are now going to look at a bit of video or audio for our website. Vimeo is recommended by Simon as it has a better functionality and reputation. The java plugins work in the same way as the lightbox. There are some good other Lightbox alternatives you could use, just do some searching.