Wjec alevel ict creating a website

Authors Avatar
PRESENTATION

The Web site

BASIC FEATURES

Purpose and intended user

The website was designed with the idea of promoting the business to present and potential customers of both Warley Painters and Builders. In particular I was trying to advertise the discount that would be offered to customers should they decide to get work done by the businesses. To do this the website not only includes images and testimonials of the business but also sound clips that give an inspirational feel. The introduction of flash animations gives the businesses a professional image. The introduction of a flash gallery allows the user of the website to get immersed into the website. To show the discount I have inserted a movie made from images of the work done by Warley Painters and builders into it. In the movie there are descriptions of the discounts available. The Warley Builders page displays were and when the presentation is to give customers information on the discounts offered. It also has a link to the AA for customers to be able to get there easily.

Company ethos and the Website

The company logo incorporates the use of the colours green and yellow. Although I have used these colours in the website I decided to use brown as the background colour. I felt that brown would be able to give a warm natural image and a potential comfort in the company. The colour brown was also used to express trust and honesty in the company enticing people into using the services of it. I felt that if I was to use too much green and yellow in the presentation it would have been overbearing and potentially put customers off investing in it. To make the business look more professional I have inserted flash animations into it to engage users into it.

The font size and styles used in the Website

Warley Web Homepage

"Warley Painters Awards" (Header) - Defult font, style 2, colour #FFFFFF

"Warley Painters Awards" (body of text) - Default Font, style 1 and text colour #FFFFCC, size normal

"Welcome to Warley Painters" (Header) - Header 1, default font, style 4, colour #FF9966 size normal

"Welcome to Warley Painters" (body of text) - Default Font, style 3 and text colour #996633, size normal

Warley Builders Web page

"Harper Small Works" (Header) - font Georgia, Times New Roman, Times, serif, style 5, colour #FFFFFF size normal

"Harper Small Works" (body of text) - Font Geneva, Arial, Helvetica, sans-serif, style 4 and text colour #FFFFCC size normal

Middle panel text, Default Font, no style, size normal, colour #000000

Warley Contact Webpage

"Painting and Decorating FREE QUOTE" (Header) - Heading 1, style 5, colour #FFFFFF, size normal

"Painting and Decorating FREE QUOTE" (body of text) - Default Font, style 4 and text colour #FFFFCC, size normal

Middle panel text, Default Font, style 6, size normal, colour #996633

Warley Contact Webpage

Left panel text, Default Font, no style, size normal, colour #000000

Warley Painters Web page

"Commercial Decorating Services" (Header) - Default Font, style 6, colour #FFFFFF, size normal

"Commercial Decorating Services" (body of text) - Default Font, style 4 and text colour #FFFFCC, size normal

"Warley Painters" (Header) - Header 1, Default Font, style 5, colour #FF9966 size 36

"Warley Painters" (body of text) - Default Font, style 2 and text colour #996633, size normal

Table text

Warley Builders - Default font, x-large, colour #996633

Warley Painters - Arial, Helvetica, sans-serif, style 9, x-large size, colour #000000

Georgia, Times New Roman, Times, serif, style 10, colour #000000

Middle panel text - Style 11, Verdana, Arial, Helvetica, sans-serif, colour #000000

Warley Training Web page

Health and Safety / Training Scheme (Header) - Default Font, style 4 and text colour #FFFFCC, size normal

Health and Safety / Training Scheme (Body of Text) - Default Font, style 3 size normal, and text colour #FFFFCC

Right Panel Text - Default Font, style 5 size normal, and text colour #996633

Table text

Default Font, size normal, and text colour Style 11, #FFFF00 and #000000.

Webpage design

The following is a description of the purpose of each webpage created.

. The homepage (Warley Web.html) was designed as an introduction to Warley Painter and Builders to tell people about the company and what services they offer to customer and potential customers. It has a video to show the work that has been done by Warley Painters and Builders and to introduce the washout event and discount offered.

2. The second webpage Warley Builders give specific detail on the building section of the company and then gives information on the washout event, such as the date location and a hyperlink for people to get locations from the AA. It also has the flash animation "Testimonial" to show users of the website the thoughts of previous clients.

3. The third webpage Warley Painters tells the user all about the Painting side of the business as well as introducing the 10% discount to domestic customers.

4. The fourth webpage Warley Training demonstrates to users of the website the importance that Warley Painters puts in its employees and show the training schemes that it offers it contains an Excel Spreadsheet showing the training schemes and places where they are run and the cost. This is to show to people we train all our employees to the highest standard so you get the best people to do the job. But also we value our employees and are willing to invest in them.

5. The fifth page Warley gallery has a Flash animation which is a gallery to demonstrate to all users of the types of work that the company has done in this past. This type of animation was designed to show a professional image of the company and draw people in to use it and hopefully entice people to use the company.

6. The final webpage Warley contact was designed for people to be able to be record their information so that they could then receive a call from Warley Painters and builders to arrange for a quote to be done. This was to help with the professionalism of the company as it allows customers to be easily contacted and waste their time.

Background style

The web pages where all created in Adobe Dreamweaver CS3. The background was created by clicking on page properties and on the background image select the image index_04.jpg. This is shown below.

I then inserted a table on top of the background that is three columns by four columns.

This shows the table that I have inserted into the webpage.

The table was then aligned to the centre of the page

The columns and rows of the table where then merged as shown below to create the final table.

The left hand column of the table was then selected and the image exterior_07.jpg was inserted as its background.

The rest of the table was then selected and the image index_04.jpg was used as the background.

This is final screenshot of the web page that was used as the master page

Animation effects

All animation inserted into this website where created with Adobe Flash CS3 with the help of internet resource /www.entheosweb.com. The animations where adapted from the resources presented on the website.

Bookmarks and Hypertext

On the webpage below I have created hypertext form the Warley Builders web page to the RAC route planner website this was so people who didn't know how to get there would be able to plan a route to the venue of the washout promotion.

To create the hyperlink, I highlighted the text and in the link box I copied and pasted the web address for the RAC route planner site.

Using the above method I also created a link from the home page to the contacts page.

Hyperlinks where also created in the flash animation The Flash menu (see later).

Hotspots

Where created for all of the Images that where inserted into the website to do this I right clicked on the image and selected edit tag

Into the alternative text box I inserted the name that I wanted to appear in the hotspot. In the example below I have inserted the text "The NEC Birmingham" and then clicked on the OK button.
Join now!


This shows the hotspot that appears when you hover over the picture of the NEC on the Warley Builders webpage.

Page Transition

To apply page transition to a website in dreamweaver I used the following code to do it:

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=**,Transition=?)">

The code is inserted into the webpage using the split tab on the dreamweaver toolbar. On the code window you navigate to the top of it and find the line of code that refers to the head of the document e.g.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...

This is a preview of the whole essay