Construction: iWeb Demonstration (Website)

The core part of the specification is that, as well as the music video, we have to create a promotional package that highly promotes the new song and video. This package comprises of a CD cover, a radio spot, and a website. We split each of these equally, and reached the decision that I would do the website, Tyrone would do the CD cover, and Sid and Elliott would work together to produce the radio spot. I decided to create the website first, as I was already familiar with the software and would therefore be able to get it done in a quicker amount of time.

The first thing I did was open the program 'iWeb', upon which the content in the screenshot on the left appeared on the screen. Once here, I had to create a new website by going to File > New Site, and then named it and selected a place/server for it to be saved on.

Once I had established the website, I had to choose a theme to use. I chose the plain black theme, as I felt that black and white are the 2 colours that compliment each other the most, and would look most attractive to the audience.

I then had to add all the pages before I could actually begin working on them. To do so, I followed the steps I had previously followed to create the website, but this time clicked on "New Page" as a pose to "New Site". I done this the necessary amount of times, and then renamed the pages. I could now begin working on them.

The elements that I used in the website are text, video, shapes, and pictures. Below I have explained how I incorporated each of these, and on which pages.

Above: Text was added by clicking on the "Text box" button  on the panel at the bottom of the screen. I then simply typed out the text that I wanted to be displayed, and then customised it to suit my desired needs. This was done by clicking on the "Fonts" button on the panel at the bottom, which brought up the window shown in this screen shot. Here, I selected the font face, colour and size in order to alter the appearance of the text to what I wanted it to look like. It was highly important that I showed that the website was being made for educational purposes only, and that no copyright was intended. To do so, I used the text tool, and placed a text box that said "For educational purposes only." at the bottom of each page - as shown in the screenshot below.

Left: In order to add a picture, I had to firstly locate it on the computer, and then open the folder in which it was, bringing it to the forefront of the open programs. I then selected the picture that I wanted to be on the page. Then I just simply dragged it over to the page, and then, on the release of the left-click button on the mouse, it appeared there. I then altered the size of it using the four squares in each of the corners, and aligned it accordingly.

 Right: In order to add a video, I selected the "Widgets" tab on the panel on the right hand side of screen, and then clicked on the "YouTube" one. As with the picture, I then dragged and released it, upon which a blank square with the YouTube logo appeared on the screen (see picture). In order for the video I want to be displayed to be shown, I had to retrieve its URL > paste it into the box headed "YouTube URL" > Click on Apply. 

The picture above shows the 2 videos that I have already uploaded to the website: the introduction to our group, and the radio promotion that Sid and Elliott created. These videos will be accompanied by the finished product, i.e. the music video, at a later stage.

Left: Another feature I decided to include was a countdown, which I put on the "Events" page to mark the countdown to the next 'tour' of our 'band'. As done previously, I clicked on the "countdown" picture on the Widgets panel, and the dragged it onto the page. I then customised the settings to the desired date, which then changed the digits on the countdown.

One issue that I often encountered when creating the website is that the size of the pages had been set to pre-defined measurements, and at times, I wouldn't be able to fit all of the content on the page. In order to resolve this issue, I had to click on the 'inspector' button on the panel at the bottom of the screen, and the window shown in the screenshot below appeared on the screen. Once here, I clicked on the 'Layout' section, and altered the number in the boxes that said "content width" and "content height" accordingly. I increased them to give me more room, which allowed for more things to be placed on the page. 

Written by Jack.