Presentation on theme: "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."— Presentation transcript:
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.
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.