The first stage was to upload all documents we needed to insert into our website into a library. This is because once hosted on the internet images and videos need to be located from a folder. You can see our library in the image. In this folder we included flash documents and HTML pages.
Once this was complete we could start with the design of the web page. The easiest way to do this is by creating a table. This is because you can put elements in to the table and edit other parts of the website without those elements moving. This also helps with websites created on computers with different resolutions to the average computer. By creating a website with a table it should open up the same on every computer. With the complete template of the table we moved all complete elements we had in to the table. The first two parts were the .swf movies at the top of the page.
This will operate as our title and menu system. These were created in Flash and you can see how they were made on my "Step By Step - Flash" post. With those elements in we decided to use some HTML code to create a scroll box and text input areas for the username and password areas.
These were the hardest feature of the website as previous knowledge of code was required and tutorials on the internet did not give us the information we wanted on how to create the scroll box we wanted.
This is because we want different coloured fonts and a horizontal rule to separate the information within the box. The picture below shows the code we finally used to make the scroll box including its height and width settings along with the separate code we had to use for the coloured text. Now that the HTML elements were in we decided to add a few pieces of text and an image in the bottom corner (linked from the library) to bring it all in look compact and minimalist.
The only elements that were left to put in were the finished video and our website banner. The website banner was again made on Flash.
With these complete they were put in to the table on Dreamweaver to make sure they were separate from each over and the best possible place for the website. A problem with putting the video in to the website was having to convert it to an .flv file. This is because it was a movie file (.mov) and they take too long to stream online. With a .flv file they stream faster making the video play smoothly continuously.
Here are pictures of our finished website. One is of the file in dreamweaver and the other is on the internet. This shows how the dreamweaver translates to the internet with all the working elements
No comments:
Post a Comment