Design for Web / Workshop 3.

12 / 11 / 13

OUGD504
DESIGN FOR WEB
SESSION 3

Fist open up the webpage you have been working on in Dreamweaver.

tHIS SENTANCE MAKES SURE THAT THE SWITCH OVER OF OF IMAGE HAPPENS STRAIGHT AWAY AS SOON AS IT IS HOVERED OVER

This come after you opening of the body tag.

This is the code to link something to another page.

The hash tag means that command will not go anywhere. to make the command direct to nother page you have to apply this were the hash tag is.

 Replace the hash tag with the name of the page you want to have the command to click to

 Then you have to save each individual page as it own and name them what you have named them with in the page of code.

Here you can see my working page with the commands working correctly.

You have to make sure that the conent of the page is measured and planned to ensure all the different aspects fit together.

The navigation and the page with in your page needs to remain consistent to create a well working and aesthetically pleasing website.

** white board image **

To make two columns with in the page, you have to measure up the page appropriately.

The over all width is 1024 and we need to minus 150 from this to compensate for the border that would run round the edge of the page and through the middle of each column.

This is called the box model that applies to. what ever you screen size is you have to take away the measurement of the margins, border and padding.

 As you can see this has aligned the content of the body via a margin through the code we have entered. (You enter this to your style sheet which will apply this to your page).

 To enter body copy in to these columns simply copy and paste the content between the open and close brackets of the column.

<p> = paragraph break

<br> = line break

Here i looked at how the page looks with both columns filled with text.

to make the header separate from the body copy you have to create a new set up with the stylesheet.

Once you have saved the stylesheet you can then enter the <h1> lable into the source code page. to close the header section use </h1>

 Here i have changed the colour of the type also as well as adding a header. The added code for this change is shown below.

To add an image to your page, choose the image you want and open it up in photoshop and save the image for web. while in the process of saving make sure the size of the image is relative to the size of the column you are placing the image in. It is important to make the file as small as you can so it does not take ages to come up on your webpage.

Make sure you have saved it with in the image folder with in your root file.

 to add in the image to the code, select insert image and upload the image from the folder. This inserts the code for you.

Here is my image incorporated into my webpage.

If you want to enter a video on to your webpage it is best to use the Vimeo webpage. upload you video here and this will automatically compress and prepare the video ready for web streaming.

This program will give you the option to 'embed' which supplies you with a code. It will allow you to enter the measurement you want the window to appear on your page.

The advantage of uploading a video through this webpage uses there band width rather than your own.

If you want to insert an audio file the best source for this is Soundcloud. This does the smal thing in supplying you with the 'embed' option.

Lightbox - galleries of images.

You can download these options and comes with a small tutorial on how to add this to your own page.

Using your scamps - create a wire frame of measurements to help you apply your aesthetics to the page.