Evaluation

EVALUATION

This module was a continuation from an earlier module in which I had to create a three page website using 'photoshop'.

During this project, I have been instructed to create a four page website in 'Dreamweaver' which will be using the same website which I had created earlier, but in this instance, the new one had to be fully working. This meant that the viewers could view the website by using their Internet browser and navigating around the website by clicking onto the buttons. Initially, my first task was to go onto 'photoshop' and create a fourth page as I only had the three from the previous module.

Then I watched a video about 'google' and it's creation. It showed how they made money from it and basically, all the information behind what is involved in running a website. For me, this was very interesting and instructed me on how to maintain a website and how to make it profitable. This was then followed by a group discussion which gave me an insight on how advertising could work on my website.

Then, I created a blogger account which contained all my work throughout the whole unit. Then I was instructed to research other website on their overall appearance, layout, colour, etc! Which was also included onto the blogger account. Throughout all the lessons, I screenshot all the processes of transforming the website from Photoshop into Dreamweaver and all the difficulties I had encountered along the way.

In conclusion, I have really enjoyed this module as it has given me a comprehensive knowledge about website creation and maintenance. I have come to realise that my personal enjoyment lies within website creation and this is certainly an area that I would like to explore further.

My Website Part 2

My Website Part 2

On the website, I had to position both the jump-menu and the buttons out of place so when they were exported as a html, they would all line up and slot back into place.

Inside the jump-menu, I chose to name a title 'choose song---'. This will not be a sound or will not go to any further link but, will allow the user to then be able to click onto the other sounds in the list which all would then be a song. (the first is a blank option)

Inside the jump-menu, I chose to name a title 'song 1', but this time, I browsed and found a mp3 sound, which using the jump-menu, will allow the viewer to click onto the song of his/her choice, and it would then subsequently play the song in the window.

This is my final design for the jump-menu.

When the user has selected the song, it will open up in the window and be displayed as this above image.

I had to split up the buttons as a weird glitch kept on occurring. This was the link from the first button (home) would always be the same for the button next to it even when I changed the link and saved it, it would still revert back. So I had to put the home button on it's own layer, and the remaining three buttons, were placed on another layer.

I am now creating the 'search bar' which will be located on three out of the four pages.

I clicked onto the 'forms' tab' and then opened up the 'text field'.

This the the final appearance of the 'search bar'.

My Website Part 1

My Website Part 1

In 'Image-Ready' I opened up the 'pdf' file and selected the slice tool from the left hand side tool bar. This enabled me to slice numerous segments from my website, in fact, I made 13 seperate slices. Once completed, I clicked on 'file—save optimised as' which brought me to a saving screen option. I changed the file format to 'html with images' then saved the work. I used 'image ready' as it enabled me to quickly crop the whole website in one single movement instead of cropping and slicing each individual segment. This saved me a lot of time and then made me progress with the unit quicker.

I opened the html file in 'Dreamweaver' which was created using Image-Ready. It is apparent that all the slices automatically slot back into place without me having to create a layout in which they would have been placed. As a result, I did not have to fiddle trying to place them all up.

I created a new layer on top of my original website, which allowed me to place images and icons on top of my initial website design without it interfering with what was underneath. On this new layer, I clicked the sub-section, marked 'forms', and I found the button marked 'jump menu' and this enabled me to create a drop-down menu for this website. Using this jump-menu values, I could set it to an audio file so this could act as my media player on the website.

This is my 'jump-menu' with the values displayed.

I then highlighted the whole website and, using the properties, I positioned the website in the centre.

This is my website final position.

On the top tool bar, I clicked on 'modify' and it allowed me to open up the page properties (ctrl j). I then changed the title from untitled website to “RealBase.com”, which shows the viewer the name's logo on the top of the website's bar.

Additionally, I browse through the background images on this window and I found an appropriate 10 x 10 pixel block of colour which matched the colours already used in my website. Finally, all this was confirmed by clicking OK.

MySpace

Myspace Good And Bad

Initially, I found the colours very lucid and distracting. There is an old saying, blue and green should never be seen, and in this case, I have to agree. The repetitive imagery is annoying and makes it look tacky because instead of using the power of a single image, by using a multiplication of it, it lessens the impact. Additionally, the contrast between the text, both black and green, is also hard upon the eyes, and the script font is sometimes hard to read.

At first impressions, this website does not look too bad. The background image is pleasant but I found the colours used are very sicky. The positioning of the text boxes are well placed and easy to see and access due to their font colour and style. Overall, the whole website looks more classy which has been partly as a result of them simplifying the images used.

Again, I am initially distracted with the onslaught of visual imagery with this website's use of multiple and repetitive pictures. These clearly distract the viewer's vision from the displayed information contained within it's pages. The only positive I can see from this website, is that they used a clear and easy to read font.

This website appears simplistic in creation, but in reality, the images are quite complex but very pleasing to the eye. They have used a simple colour scheme, that being monotone (black, white and greys) which does not distract the viewer away from the information. Also the colours are visually strong which allows the images to speak for themselves. They have also used the vividness of a white font which makes it stand out and is easy to see.

This is a cool 60's retro inspired myspace which uses 'vector images' and geometric designs. Initially, these are quite dark in colour, however, due to the background being just a pure block of colour, this does not give the impression of darkness or gloom. In fact, the whole page is quite vivid and bright. In contrast to the other sites, this displays it's information in separately coloured boxes that lie in front of the background design. The orange font which I would have thought would be hard to read, is cleverly implimented as I can see it and read it easily.

After Easter Lesson

After Easter Lesson

In the previous lesson i mounted my website which i created for the Site In Space unit for Kamal, so i then opened Photoshop and cropped pieces out of the website so it will fit together in Dreamweaver like a jig saw puzzle then when i went to save the pieces i used the Save For Web feature within Photoshop to resized my file type by changing the settings of the images.

Dreamweaver 2

Part 2 Of Dreamweaver


With a new document i clicked on the layout tab and then changed the mode from standard to layout if i do this i can use a new type of tables.


Then when i clicked on tables i get 2 new icons i clicked on the create table and it turns out alot different from the standard version. Clicking on the 2nd icon i can create tables in to other tables.

Dreamweaver

Dreamweaver

We learnt on how to create a web page with several links. We created a main page which we called Index then we also created a second page and then used the frames to put in the text to link the index to page 2 and vise versa.

To get to the frames option i clicked Window -- Others -- Frames


I clicked on the table tab then created a new table with the properties of 3 x 3. at the bottom of the document there is a button so i clicked that so i could edit the table. Then using the insert menu i pressed the merge button which will merge all 3 cells into 1.

Website Research

Website Research

Deviantart.com

One of my favourite sites is Deviantart. As a user of Photoshop and other photo editing software, this site is used to show off art as well as also helping people with tutorials or resources. I love the simple layout of this site as it is basic and easy to use so anyone can use it. Also the loading time is very quick for a site that has a lot of uploads on it. On this second screen print of devaintart, I have showed the available categories as they enable quick and straightforward access into browsing on this site. This makes the site tidier and easier for the viewers to find what there are looking for. At the top of the page, it clearly shows links to other parts of devaintart, such as the forum and the browse facility. Also I like the way the site is not bombarded with pop-ups and advertisements. Instead, these links are situated at the bottom of the page. Devaintart uses several neutral tones of greys, incorporated with a plain background so that it does not detract from the pictures on it's pages. They also use a simple font style in lower case. This is either in white, on the category list or in black, on the sub-headings.

Liskeard Town

The Liskeard Town website has been very poorly produced. The manipulated Photoshop graphics are very poor quality as the effect and type font do not match the image. The site uses a vile shade of yellow as it's background, which detracted my eye from it's actual content. They have used a fancy old-English font which is hard to read . I would strongly recommend that they change the font to make it a different style and enlarge it so that people can understand it more clearly. The layout on the page is quite basic. However, I believe that the buttons on the left hand side of the screen, are too overpowering and they bombard my vision. I would recommend that they should space out the buttons or cut down the amount of links to this site. This second screen print of the Liskeard site, shows this page which is intended to show the local landmarks in Liskeard, but they fail to do that. Instead, they just show three random pictures which are all in different sizes which creates an untidy feel about the layout. Unlike the Devianart site, this has no browse facility or search bar. This means that it will take the viewers longer to find what they are looking for. Also unlike Deviantart, this site is very slow to open despite their limited images.

Achieve360Points.com

This is an information site relating to the Xbox 360. Because of products highly graphical style, it is not surprising that the layout is nicely designed. They also cleverly incorporate the colour theme of the Xbox 360, which is quickly recognisable to the Xbox 360 users. The tone of green is very vibrant and modern without being too overpowering. The pictures used on this site, are all the same size and they are positioned in an precise and exact way. The font is very simplistic in style, but by using the same colour theme, it results in the site being tidy and enjoyable to view. This in turn keeps my interest. The whole site is well organised and professional produced. It is fun to use and easy to access links and sub-categories.

Pixel2Life.com

Pixel2life is a web page specifically designed for tutorials on most computer applications like Photoshop and much more. Pixel2life's layout is very similar to Devaintart, except Pixel2life have chosen a bright blue and bright green colour layout, which you possibly think would make this site look dreadful, but it doesn't. Instead, it adds a refreshing feel by using such clean colours. Pixel2life use a very basic layout for their site, such as having the links down the left hand side, and having all the information in the middle. The content can sometimes be hard to understand if the tutorials is not well described, but overall, it gives you all the information you would need spelt out in layman's terms. To summerise, this site really has no bad points. Whether you are a novice or an expert, this site will help you with all your computer applications.

MillionDollarPixelPage.com

The Million Dollar Pixel Page is a website full of advertisements. Any company can buy pixels for money, and as a result, an advertising banner from their company is displayed on the site. Overall, the concept of this site is amazing but the practicality isn't. It's main aim is to get people to click on the advertisements so that the company who have bought the pixels, will get their money back by sales. Because of the amount of small blocks of vibrant colours, this results in a overpowering appearance. The viewer may find it hard to concentrate on any one picture so it is a hard page to visualise. The apparent lack of layout contributes to it's untidy appearance. There are numerous text styles and sizes due to companies' individual choices and preferences. This then produces a complicated system that makes it slow to load which could affect viewer's tolerance.


Google.com

Google is one of the most simplistic websites around today. It's layout is basic and easy to use which makes it good for people who are not computer minded. On the homepage, the logo is the only picture. This consists of a default font made up from bright colours as it gives the site a feeling of fun. This then keeps the interest of the viewers.

Google's main point is the search bar which is located in the middle of the screen. By using this simple layout, it is easy to find and easy to navigate around the site. The search results come out in a perfect order with their corresponding websites underneath. The search is matched to your words in a descending order depending on the exact wording used, giving your results in ultra quick time. Everything on Google is well laid out and designed resulting in it's modern style. The content on this site is whatever you want it to search for. Goggle also includes an add-on which filters your results so you don't get any adult content. This is great for protecting children against the harmful elements available on the Internet.

Day3

Post3

I watched a documentry on the going on behind the google website. This did open my eyes to the things they keep hold of and do with everyone infomation but this is the best and easiest place to find what your looking for and fast which is why we still use it.

Day2

Post 2

I Watched the making of The Incredibles which was quite intresting to see how a full lenght animation was made so i know in the future what i should and should'nt do.

Day1

Post1

I created a blogger account using my email from college this will be used to show all the work i will be doing in this unit.