5
THE PRODUCTION PROCESS OF MY WEBSITE

Website production

Embed Size (px)

Citation preview

Page 1: Website production

THE PRODUCTION PROCESS OF MY

WEBSITE

Page 2: Website production

HOMEPAGEThis is the homepage of my website, which includes the four buttons: trailer, poster, gallery, and synopsis. These buttons have html links to a new tab which takes the audience to the assigned pages. In the centre of this page, is a looped video of the two protagonists ambiguously going down an escalator, with their backs turned. This evokes a sense of intrigue for the audience, as they cannot see their faces, and want to know where they’re going. I have kept the title image on all of the website pages in order to be consistent. When you click on the trailer tab, there is a link which directly takes the audience to the trailer further down the page – this is called a hook. This means the reader can efficiently watch the trailer, without having to open a new tab (see below).

In terms of the actual production of my website, I used the media programme: Dreamweaver. With this, I could effectively use coding (right) to position text and images in the corresponding places to where I wanted them online. For example, to insert the title, I saved it as a JPEG, and then within the coding, I typed out the name of the JPEG in inverted commas (“…”). To check that this worked, I clicked the view online option, which allowed me to check it was working as I went along. The good thing about this programme was that I could split the page, to not only view it in coding form, but also visually.

In terms of social media, I added a hyperlink to the three buttons bottom right (Facebook, Twitter, and Youtube). I then copied and pasted the correct url into the box, as well as embedding the Youtube video into the coding page. Then, I drew a hyperlink shape onto the buttons, so when the audience clicked on them, they automatically are taken to the particular websites. For the background video, I inserted the correct movie file which I wanted, and then looped it. In order to coincide the other webpages to the current homepage, I made sure they were linked in the coding page.

Page 3: Website production

POSTER PAGEThis is the poster page of my website, which simply just shows my poster. As the page contains my colourful poster, and the bold title, it is quite simplistic, but this is common among websites, as over-complication can confuse the reader. This promotes my trailer through a different and creative ancillary text. In terms of the coding (right), I inserted the JPEG named “poster” into the split page, and this then showed up on the website. At first, it was way too small and wasn’t aligned, but I made it centre, and adjusted the size to perfect it.

Page 4: Website production

GALLERY PAGEThis is my gallery page, which includes four images taken from the production of the film. I ensured that these photos best represented our film, so I picked the pills to connote the theme of drugs/rebellion. The next picture is of the male protagonist standing awkwardly, to portray his mental impairment, and the focus on him throughout the film. Also, I chose an image of the female accomplice running away, as it mirrors the fast-paced action scene, thus conforming to the conventions of a thriller. Lastly, I used a picture of equations on a piece of paper, to emphasise the key location of school, the boy’s fervent interest in chemistry, and perhaps hint at the making of a drug. So as not to bore the audience, I set a timer on the images to scroll themselves of 5 seconds, thus giving enough time to be seen, as well as not too much time on one.

Page 5: Website production

SYNOPSIS PAGEThis is my synopsis page, and the corresponding coding page. When I first created this page, I just copied and pasted the text into the split page. However, this looked rather plain for a webpage, so I made the word synopsis in capitals, and bold, as well as adding relevant images to make it more visual, rather than just an overwhelming amount of text. Therefore, I inserted the JPEG “synopsis” into the coding page.