DREAMWEAVER TOOLS USED

To start coding my website, I first selected and trimmed a clip from all of our footage to play on a loop on my home page. Using photoshop I then created an image that I inserted on top of the gif. This was fairly easy as I only used the text tool and graphics tool for the stars and symbols.

I then created a folder which will contain all the files that will be on my website. I inserted the background gif and the image into my folder alongside the social media icons which I had selected.

Here I inserted all of the pages that my website will contain.

Here I inserted the social media icons, I had to ensure that the names matched the file names in my folder otherwise the software would not have found the images.

Here is where I inserted my video which I called “laura” in my folder. The video has been told to play on a loop.

This is what the home page looked like when I previewed it.

After completing my home page I chose a gallery design from a list of designs that were already coded.

I then took screenshots from some of the clips to put in my gallery page and saved them as pngs. I created a folder for the pictures and numbered them so that they will be easy to find.

I inserted all the names of the pictures into the software and aligned them to the centre...

...however this is it what it looked like after I previewed it.

I didn't like the layout of the pictures as it didn’t look aesthetically pleasing, so I created a table so that the pictures would appear in 2 rows.

I inserted the images once again but this time inside the table. I aligned the table to the centre and changed the padding so that it wouldn’t resemble a table too much and add space between the images.

One thing that I didn’t like was the title on the gallery page and so I created my own on photoshop and saved it as a png... I created one for every page to make it look consistent.

I inserted this png as an image and aligned it to the centre. I did this to all of my pages.

1. We created a twitter, tumblr and youtube page for our movie and so I had to hyperlink my social media buttons so that those pages would open up.

2. I had to create rectangular hotspots which I placed on top of the icons.

3. I then inserted the link into the pop up box. I had to do this on all of my pages.

Media links inserted

To insert my poster, I saved the photoshop file as a png and inserted it as an image. I altered the width and height so that it would fit the screen and aligned it to the centre.

This is how the poster page looked once I previewed it. I did the same thing to my story page.

To insert the trailer I copy and pasted the youtube link into the software. I had to create a new layer because I wanted the trailer to pop up once people clicked on the “click for trailer” section on my image.

This is what the page looked like when I previewed it, however, I didn’t like the ‘close the window’ button...

...thus I used a button generator on the internet to create a button I liked. I then copied the code it generated.