This menu appears at the top of the page in the header tag. The typography and colour scheme is simplistic so that the site is easy to read and navigate through. When you hover over one of the options, the colour changes to grey to show the selection. Adjusting the colour in the CSS Designer does this; you are also able to adjust the colour ‘on click’. The words ‘WIZ KHALIFA’ appears at the top left of every page, and when clicked links directly back to the home page. This allows the site user to easily find their way back to the main content of the site. Each word is spaced apart evenly, which is achieved by measuring the width of the header tag and setting a left padding on each word. This also makes the text sit in the centre of the page rather than applying a float left or float right. At the top right of the home page, the Wiz Khalifa symbol appears. When you hover over this, the number of YouTube subscribers he has shows on the left. This is therefore a rollover image, as when the cursor is placed over it an image appears, and when it is removed it disappears. When clicked, the symbol is also a hyperlink that opens up his YouTube page in a new tab. In the properties inspector you are able to set the target to a new tab or the current one; in this case it is new. This website does not have a wrapper height set. This means that the page can continue to scroll down and reveal more information. Most professional websites are constructed this way, as more content can be held on one page. Most of the main content is set out in individual div tags with a dark grey background (divs can be inserted by selecting Insert>structure>div) The two on the left will have been set first, with float left set, and with a padding of about 10px on the left hand side to make it sit away from the edge of the main content tag. The div tags next to them will also have been inserted using float left with the same padding. This means that the spacing between each is exact and they aren’t touching.

One of the div tags includes an audio playlist. These are initially created in Spotify in a playlist format. The link to this playlist is then copied and pasted into the coding in Dreamweaver. It has been proven that people are more likely to spend time on a site if it contains videos. A YouTube video is inserted into a div tag by copying the embedded link from YouTube and pasting it into the coding in between and. It is important to insert http: at the beginning of the video coding so that it works when opened in a browser. A concertina slideshow is included on the video page. This allows viewers to browse through music videos, live performances, interviews and more. Each image enlarges when you hover over it, and reduces to its original size when the cursor is moved away. This was made using a JavaScript. The news page promotes Wiz Khalifa’s work as well as informing the viewer. One of the main promotional aspects to this page is this animated gif on the right hand side of the main content. It is a two second moving image showing a section of his new music video. This would have been created in Photoshop using key frame animation, and set to loop:forever so that it continues. An alternative to putting a YouTube vide in a set div tag is to having it open up in a smaller window in the centre of the page. The rest of the page darkens to allow the video to stand out, and a small ‘x’ at the to right of the window allows the user to close the video; this also restores the page to full brightness. The footer on every page has exactly the same content. There are large icons showing his social networking sites such as Facebook, Twitter and Instagram. These images are set to float left with a set padding allowing them to be equally spaced apart. The footer also contains a smaller navigation bar that links to privacy policy, terms of use and ways to contact them.

A slideshow is included on the photo page to let the viewer easily navigate through the images. These are created in InDesign, making the words ‘previous photo’ and ‘next photo’ into buttons. There are previews of the previous and next images that you are able to click on that also allows you to navigate through the images.

The main page includes an image hyperlink that opens a pop up window showing their latest music video on YouTube. When the mouse hovers over the play button, it blurs and dims slightly to show the selection. These icons link to Die Antwoord’s social media pages. They open in a new tab which is done in the properties tab; the target is set to ‘New’. Each icon is set to float right, with right padding of around 10px. The wrapper is not set to a specific height, enabling the page to continue to scroll and reveal more content. The text on the left hand side of the page will be set to floatleft, with a padding of around 10px; this allows it to sit slightly off the edge of the page. Six H tags will be set and used for headings, subheadings and the main text. As you hover over the text ‘buy now’, the iTunes and amazon logo appear as a dropdown. You are then able to hover over these, and they turn white to show the selection. Once clicked, the iTunes/amazon page opens in the same tab. The image of Yolandi is positioned in the centre of the main content. It is inserted as an image, although it is a gif. The image twitches about every 5 seconds; this would have been created in Photoshop or another similar programme using key frame animations. It continues for the duration of time that you spend on that page, which is done by looping the gif forever. As you are scrolling down the page, the main content scrolls down at a faster pace than the background. The background layout can be fixed so that the main content scrolls over the top. As you continue to scroll down the main content, the tour dates appear in a list format. You are able to buy the tickets for each event by clicking the hyperlink on the right hand side, which turns red when you hover over. There are merely two fonts used throughout the site, the main one being this sharp edged one to the left that mirrors thee font used on their album. These will be selected through H1-6 tags in the properties inspector.

The above Christopher Nolan fan website included a concertina slideshow on the main page. This allows viewers to browse through films that Nolan has directed by simply hovering over each image. This was made using a JavaScript. This navigation bar in the header tag allows users to select which page they would like to visit. When the cursor rolls over the word, it will rise to show the selection; this is done by setting a css rule. Once the page has been selected, the heading will appear in the banner at the top of the page. The same navigation bar as the home page will appear along the bottom of the page in the footer. Hyperlink to Christopher Nolan’s Facebook page. This opens in a new tab. These images are embedded using a div tag. A small padding will be set to allow them float in the centre of aside right. On the movies page, a list of Nolan’s feature films appears in the aside left. They are inserted as hyperlinks, opening up a page in a new tab. This is done in the properties tab; the target is set to ‘New’. The text in the main content will be written using a H tag. 6 H tags can be set; you can alter the font, size and colour of the text.