Creating The Website

"All sins are forgiven once you start making a lot of money."
-RuPaul

The programs I used to create the website are Adobe Dreamweaver CS2 and Adobe Fireworks CS2. I created most of the website using Dreamweaver, due to its convenient html properties. I have experience in html, so this proved to be beneficial. I used Fireworks to create the buttons displayed on the page.


My first intention when creating the page was, as shown in previous posts, to make the trailer I created the focal point of the page. To do so, I needed to use a simplistic layout that would accentuate the video-whilst remaining stylistic and pleasant to look at. First, I intend to use a black background. This gives the website a darker setting, which suits both the trailer and the artist's image. To do so, in Dreamweaver, I clicked the background, and selected black in the options box beneath the html-editing area ().

In a similar manner to the way the website trailers I researched would play on repeat, I decided I wanted my video to do the same. This ensures that any audience member would have every opportunity to watch the video. Unfortunately, Youtube does not have an option for me to loop the video-so I reached the conclusion that I would have to convert the trailer into a compatible Flash file, and embed it onto the website-using Dreamweaver's option to loop the file.

Luckily, I had already purchased video converting software, called 'Magic Video Converter'. The converter converts any video file into the available outputs-one of which being a '.swf' video file-a flash file. I simply clicked 'Browse...', selected the trailer, selected 'To SWF', and selected 'Convert'. The optimum settings were already prepared for conversion, so I did not need to touch the other drop down menus. The .swf file was created succesfuly, and I was able to embed the file easily into Dreamweaver-simply by clicking Insert, Media and then Flash. I then select the swf file, and Dreamweaver imported the file and created the html code automatically. I then simply dragged the video to a smaller size, so it took up less of the page.

I then created the interactive roll-over buttons using Fireworks. To do so, I selected a black background so that the button blends into my page, and then used a moderately brown font to make sure the font wont stand out until the viewer's mouse hovers over it. I then Duplicated the frame, so that the 'rollover' frame I create would be an exact imitation, with only slight changes:
-->

On this new frame, I changed the color of the font to a brighter red. This red coloring suits the color scheme of the video, ensuring the text stands out. My next action is to make the button a hyperlink-so I have to create a Rectangle Slice around the new frame's letters. To do so, I click Edit, Insert, and then 'Rectangular Slice':


I then click on the slice, and then select the Properties panel, and change the link to one of the appropriate pages I have designed, which contain either the title of the page, images, or a direct link to YouTube, containing the full music video. Then, I again click on the slice, and select Window, Behaviours, and then +. I then choose Simple Rollover, which changes the behaviour of the frame, so that it appears when the mouse rolls over the previous frame:
= -->

To finish, I click on File, then Export, and then I select which location I wish to place the button, in html form. My next intention is to import the buttons into Dreamweaver. Whilst Dreamweaver normally simply imports html, since the button was created in Fireworks, its structure is different from conventional html. So, to import the file succesfully, I click on an empty space, and select 'Insert Fireworks Html'. I then select the file I wish to import in this window:


Using this method, I imported all of the buttons successfully. My next intention was to organise the buttons neatly. So, I used the Table feature, available at the top of the page. Then a box opens (shown to the left), and I created the table to match the number of buttons, as well as the trailer video. I also included credits and links to connected sites such as Incompetech and Myspace, to increase the authenticity and convergence of the page. My website appeared to be finished.



But, I was faced with one more issue. The lack of colour felt too simple, and I felt there was not enough of a representation of the colour purple, to match up with the artist name, Ultra Violet. I did not want the artist's name on the page, to add a sense of mystery. Mystery is another way to build up hype for an artist, as confusion for viewers may lead to intrigue. An effective example of this is in the recent iamamiwhoami viral campaign:



So, I instead decided to embed a picture from the 'Perfect Circle' photoshoot, and zoom in on a picture that would highlight the presence of purple in the artist's image. I took one of the pictures that underlined the beauty of Daniella's lips in one of the 'Glittery Lips' shots, opened it in Photoshop, zoomed in on a partition of her face, Cropped it out, Copied it into an empty window, and saved it as a high quality .png file. Then, in Dreamweaver, I selected 'Insert' then 'Image', and simply selected the image, and dropped it into the table-thus my website was finished:

-->

The Completed Website