The document summarizes the production process of a website for a film project. It describes how each page was coded using Dreamweaver, including inserting images, videos, and links. Key pages included the homepage with trailer and social media buttons, a poster page with the film poster, a gallery with production photos, and a synopsis page with descriptive text and supporting images. Coding elements like photo file names in quotes and adjusting sizes were used to properly display and format content.

1. THE PRODUCTION
PROCESS OF MY
WEBSITE

2. HOMEPAGE
This 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.

3. POSTER PAGE
This 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.

4. GALLERY PAGE
This 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.

5. SYNOPSIS PAGE
This 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.