A slideshow showing what tools I used in dreamweaver to create my website.

1. DREAMWEAVER
TOOLS USED

2. I created a folder which
contained all the files I
needed for my website. I
added the gif that would act
as the background for my
website as well as the social
media icons I wanted.
STARTING TO CREATE MY WEBSITE:

3. 3
First, I used some clips
from what we had
already filmed and put
them into a sequence
that I wanted for the
background of my
website.
Here is the design for
the title in front of the
movie for the website.
I made it in Photoshop
and then saved it as a
png file so that I could
put it in the code in
DreamWeaver. I used a
transparent
background so that you
could still see the clips
playing behind it.

4. Here is where I inserted
my video for the
background of my
website. I called the
file “WEB” and put
“.mp4” at the end as
this was the file type
and meant that it could
be found in my folder. It
has also been coded to
make sure that my
video plays in a loop
Here is the code for the social media icons. I needed to make sure that
the names matched the file names in my folder so that the software
would find them. The hyperlinks at the beginning of the code ensure
that when you click on the icons that they will travel to the right
website. We had already created pages on these social media websites
so when you click on them there are specially designed pages for
Reasons Beyond Insanity.
Here is the code for the
different pages I want
on my website. The
“target_blank” ensures
that when you click on
the icon to go to a
different page within
the website, it will go
to that page. For
example, when you
click on “trailer” it will
take you to the “trailer
page of the website.
This code is for the
small Reasons Beyond
Insanity on the top left
hand corner of the
page. The code “TITLE”
ensures that the
software will find it in
my folder and put it on
my website.
CREATING THE HOMEPAGE:
The second code is for the writing on top of the
video whilst it plays. I named this file
“background” and it can be found in my folder.

5. How it looks on the website:

6. I then chose what gallery page design I
wanted for my website. I chose from
this list of ready made coded designs.
I then copied it into my folder.

7. I took screenshots from the trailer of
pictures I wanted in the gallery and
put them in a folder. I numbered them
so that they were easy to find when I
wanted to put them in my code.
Here is the code for the
first picture in my
gallery. “pics” tells the
software which folder to
find the images in and
the “1” tells it which
picture to put in the
website. Afterwards, the
“.png” tells it the file
type. There was,
however, one picture
which was a different
file type and was a jpeg,
so I had to change the
code to be “.jpg” at the
end so the software
would recognise the file.

8. Below is what my gallery page looked like. I didn’t like how all the pictures
were in a straight line, I wanted to have them in a table. I also wanted to get
rid of the “Home Contact About” and “gallery” at the top of the page, so I
deleted it from the code in DreamWeaver.

9. To make my pictures be in a
square shape o the page, I
inserted a table and
adjusted the rows and
columns to be 4x4.
This code made sure that there were no borders
around the pictures. I also made sure that it was
aligned to the “center” of the page.

10. Below is what my gallery page looks like:

11. The insert the trailer, I copied and pasted the embed code from the video on YouTube into the
software. I wanted to trailer to fill the page and so changed the width and height to do so.

12. Here is the code for the poster page. To
insert the poster into my website, I
saved the photoshop file as a jpeg and
inserted it as an image. I altered the
width and height so that it would fit the
screen and then aligned it to the centre.
!
Here is what it looked like when I
previewed it in google chrome:

13. 13
Here is the code for the
synopsis page of my website.
I did the same as my poster
page.