Evaluation of Skills Development

Throughout the completion of this coursework, I have found that I have learned a great deal about the media industry. I have learned what the production practises are in both the website and magazine industry and how to produce both mediums using programmes which I thought were out of my capabilties. I have discovered how to use an array of programmes this year, which includes Adobe Dreamweaver, Adobe Photoshop, Adobe Fireworks and Adobe Flash. I have also become very familiar now with using this blog site, blogger.com, which is a more friendly and interactive than just making a powerpoint presentation. This blog has enabled me to keep a diary of what I have done over the course of this coursework.

Here are some skills which I have learned, and I shall explain how I have developed them, identifying any problems I may have encountered.

Adding Frames

I have added a frameset to my website, which consists of a top banner frame, two side frames and a middle frame, which was to hold all the content. I encountered problems with this skill when I had trouble disabling the scrolling option on the top frame. I however managed to tackle this by using w3schools website, which gave me the code which would disable the scrolling.

Adding Images

This skill has been demonstrated a lot throughout this coursework, but the most statisfying example I can think of was when I added the top banner image in the top frame. This was done by clicking inside the frame using the right click, going down to Page Properties, and then making my background image the logo banner, which I saved as a JPEG file beforehand in the images folder. I added images to the website (in the Mainframe) by going to insert, images, then going to my images folder, where I had saved a selection of images, then chosing the image to go into my website. The main problem I encountered whilst adding images was that images was very hard to position, but I found that placing images in tables (which had no borders) made positioning a lot easier. I also added images to my promotional products, which were the newspaper advert and double page spread.

Adding Videos

I added videos, which I had uploaded to youtube to begin with. I then copyed the embed code from the youtube video into the html coding of the forums (under reviews) page, where it was used to start a discussion on whether the people singing were good or not (filmed at a school talent competition). The problem I had initally with this was that I was trying to get the video directly from my camera onto dreamweaver, which I could not do. However, my teacher suggested uploading it to youtube first, so I made a youtube account, then uploaded my video there, making it easier to embed the video into my website.

(The Name of the Band is The Karl Weston Experience, named after him)



Adding Tables

Adding tables to my website wasn't too hard, but was a skill because I was able to use it for lots of different functions, such as holding all the programmes on my listings page and inserting images in a particular alignment on the page. I did however encounter a problem with the tables when I wanted to add more rows or columns to the table, as it was different to tables on microsoft word. I later found whilst watching tutorials on youtube that it wasn't that difficult, and that all I needed to do was to click on the table, then down at the bottom of the page, a new set of properties would appear, with drop down boxes so you can change the number of rows and columns.

Editing Images/Cropping/Resizing

I cropped images when it came to inserting images to blogger, so unnessassary white space would not be copyed over. I also cropped and edited images when I was making my promotional products, which were the newspaper advert and double page spread. This was done when I needed to remove the background from behind the artists, so only their bodies were in the image, layering them in front of my blue background. I did encounter problems with resizing, both on photoshop and dreamweaver. I found when I enlarged an image in photoshop, the image would become blured. I did however learn that it was possible, after the image is made larger, there is a tool which alters the pixels in the image, which made my image clearly visible. I then needed to save my image the right size before importing it onto dreamweaver, so there would not be blur on that.

Adding Content

Content was added on all of the pages of my website. One example of content was on my homepage, which included information on the latest news, music etc.. As part of the content on my homepage, I added a widget, which acts similarly to MTV's website, where the audience can chose a photo to look at, but in a more interactive and interesting way. There was an issue when I was adding content when I tried to add text. I found that if I changed the font colour of one word/sentence, it would change the colour of all the font colours on the website. It was though resolved, because I found that you needed to assign colours to a label, so if you wanted black font, you would go to the properties whilst highlighting the text, then select the label which you have the font colour black.

Editing Content

There were quite a number of times when I edited the content, making changes to suit the audiences needs. I changed the background colour of the mainframe and the two side frames quite a number of times, until I got the look I was really after. One problem I encountered doing this was when I wanted to have the background in both left and right frames (eg. behind the mainframe), it would not work. I however found a solution. I copyed the background into Microsoft Publisher, where I made two copies of the same background. Then, I cropped the two, so I had two halves (one copy cropped to the left, and the other to the right). This allowed me to give the impression that the background continues behind the mainframe. I also changed the style of writing every so often, so it was more interactable with the teenage audience. I found this slightly difficult, as I wasn't sure how far to go in informality, using words which are more acceptable with the teenage audience.

Hyperlinking Pages

My website has six hyperlinking pages, which have been mentioned throughout this blog. These pages are Home, News, Reviews, Listings, Music Player and Competitions. I have used a navigation bar, with these hyperlinked titles to redirect the user to that page, making it easier for navigation of the website. Within Reviews, there is also a hyperlink on the text Forums, which links the user to the Forums section within the Reviews title. An issue which was raised when completed these links was when the hyperlinked title was clicked in the top frame, the content would load in the top frame instead of the mainframe (middle and largest frame). This was very hard to understand why it was doing this, but my teacher helped me by going into the html code view whilst clicked on the frameset. The middle frame needed to be labeled, so I named it 'Mainframe', then when I went back to the hyperlink, it gave you the option in the properties in which frame you would want it to open in, leading me to choose 'Mainframe', solving the problem, and the content would correctly load in the middle frame.

Hyperlinking Images

I have added flash buttons to my website, which is only given as an option in CS3, and not in CS4. I have used flash buttons on my reviews and competitions pages on my website. There is one button (times the number of singles) which is used to hyperlink my website to the itunes website, where the user can download the selected song read about on my reviews page on the itunes website fairly easily. There is also some hyperlinked images on the homepage, where the images under each of the three headings (colour co-odinated) are clickable hotspots, which take the user to the page the image was illustrating.

Adding and Editing HTML

A good majority of this website needed to be completed using the html code view rather than the design view. At first, this proved very challenging, as you needed to know specific commnands and know the language of html coding. This was when I first used youtube and w3schools to help me learn how to use it. I used w3schools to give me codes, which I could manipulate and alter easily into something I wanted, like flashing text, which is used on the homepage (flashing red and black). I then used youtube to work through the basics of understanding html, additionally using it to obtain codes for the website. I added html coding when I added a youtube video to my home page (used as a music player), and then I edited to so it would play automatically when entering the site (autoplay=1)

Use of Appropriate Language

Bearing in mind the audience, the text style of tone which I used to interact with the teenage audience was very informal, using abbrivations of words every so often to lighten the mood (for example omg, lol, aka). I used emotions eg. :) to go the next step, as teenagers use these to symbolise how they are feeling. The actual style of writing was bold, with statements instead of descriptions to leave the teenage audience wanting to know what the story might be about.

Creating a logo suitable for the intended audience

Using extensive research which I completed of other related websites, there were lots of different types of logos with catchy names. My favourite name was MTV, as it had another meaning, and lots of well known TV Channels do it, such as ITV, BBC, MTV, VH1, and TMF (now up your viva). I decided however to keep the full name on the logo, as it uniquely indentifies the TV Channel, and I really wanted to effectively use different fonts to make it stand out (also, I didn't want any confusion with TMF). I feel the spiral behind it, with a nice silvery surround made the logo very retro, which was my intention. I did encounter some problems when trying to import it into dreamweaver, as it didn't look right without a background. That was when I took my logo back into photoshop and made a top banner logo frame. I feel that by doing this it made its apperance a success.

Creating Moving Images

Using the spry options on Adobe Dreamweaver, I created an accordian and collapsable panel. I added the accordian on the reviews page to show the single, album and artist of the week, which animates when the button is clicked (when a button is clicked, a tab opens from beneath it. When the next button down is clicked, the button aboves tab closes and a tab from beneath the new button is opened etc..). I also added a collapsable panel to my listings page. When the day of the week is clicked at the top, the days listings suddenly appear from underneath it, giving some animation to my website. However, to start with, the tab would not open, so it was an issue. But then, I edited the html coding on its spry assests file so that the panel would open when clicked.


Before I started making my website, I managed my site, so that all the work was organised from the start. It was organised so the html files where going to one folder and images to another. Whilst in the process of production of my website, I saved regulary so work would not get lost in the event of a power cut or computer crash.