Software Packages, logos and initial setup of Website

It has been a while since I last updated this blog, due to network crashes, teacher training days and power cuts - a little annoying. Up until today, I have planned the layout of my homepage, as well as learning how to use Adobe Dreamweaver - the program by which I will be creating the website. Within the same software package, I started by creating my logo for Teen Music Hits in Adobe Fireworks. I started by creating a spiral shape, giving it a blue fill, which is one of my house-style colours which I have chosen to use (example of keeping to design conventions). I then copyed this logo into photoshop, then started editing it, adding effects like shadows, better colours and a silvery retro (like metal) background to let the logo stand out. Once completed, I then went into page properties in dreamweaver, and made my logo and top banner (where my searchbar will be) the background image.

I feel that its effect is successful, similar to the BBC Switch website, working well as a header.

Here is my logo for Teen Music Hits. The original logo I have taken into Adobe Photoshop, then added different effects, so it enhances its look and feel, making it more retro/teen savy.

Teen Music Hits logo

This logo has been inspired by my research of logos, which was a circle shape, with an attractive surround and retro style text in the center, with the websites' name/title. My logo started its development in Adobe Fireworks, where I created a spiral shape, with a light blue fill. I then used two different types of font layered in front of the spiral, both uniquely teenage friendly, to produce the text. The top line reads 'Teen Music' in a slightly smaller font. Then, in the second line, the word 'Hits' is larger, emphasising its meaning and possibily drawing in an audience.

After this, I then copyed my logo from Fireworks to Photoshop, which I am now more familar with after completing the Foundation Portfolio element of the A Level course. I used my skills with this software package to effectively enhance my logo, by adding lighting effects to create shadows within and to the left of the logo, and additionally to create a silvery, teenage savy border.

Special Shows TMH Logo

Teen Music Hits Logo and Banner (which will be used in the top frameset)

Once I had completed my logo, I then created a series of boxes, which all came together to become the top banner of my website. I then decided that I would possibly keep this top banner for my later tasks on producing a newspaper advert and double page spread, as it was easy to manipulate, and I also found it very eye-catchy. I left the bottom, lighter silver box empty, so later on, I could insert my navigation bar onto, keeping my website organised. I then saved it as a JPEG file, then opened up Adobe Dreamweaver.

Setup of Website

To make my website, I used Adobe Dreamweaver CS3 (and on occasions CS4). When on Adobe Dreamweaver, I needed to begin my website, by firstly creating a new html file. Each html file would be a page on my website, so I started with just one to get the basics of making a website for the first time. I started by structuring my website, by applying a frameset to my blank page. To do this, I went to Modify , Frameset , Split Frame Right. The page then split into two halves. I then pulled the new dividing line to the right side, leaving some room. I then split the frame again (now the larger one) Split Frame Left, then again going to the middle frame, Split Frame Up. After some fine tunings, I had my basic frameset, with two side frames, a top banner frame for my for my logo (illustrated earlier in this blog) and my middle frame, which will be refered to as my Mainframe. (the navigation bar will need to be hyperlinked, with a target of the 'Mainframe' so pages will correctly load in the middle frame.) I set up a frameset structure like this, because lots of popular websites have all the content in the middle, and the two side frames could be used later on to show other options. I find the layout is organised and will be very attractive to the teenage audience when it is all complete.

A lot of making the website was using html coding, which was very time-consuming and difficult for someone who doesn't know the correct terminlogy. I did though use youtube for help, by watching tutorials on how to make a website.

Before I saved, I managed my site, by going to site, then manage site. I did this so all my work would be saved accurately, so all my files went to one folder, images to another, videos to another etc, keeping everything neat, preventing the loss of work.