ict ocrnational unit 2 - creating website

In order for the buttons to fit in it and neatly fitted, I inserted another table.

Firstly I inserted a layer by clicking on 'Insert' and then on 'layer'. I resized the layer to match the size of the the black rectangle.

Then I clicked inside of the layer so that I can Insert a table inside of it.

I clicked on Table then Insert, then Table as shown in the screenshot.

After I done that, a window came up so that I can modify how the table will be.

For rows I put 1 as their will be 1 row of buttons and for Columns I put 5 as their will be 5 buttons.

This is how the Table ended up looking on the Navigation Bar Background:

Now all I have to do is to insert the navigation bar buttons inside the Table.

I clicked in the first cell and then clicked on Insert then Picture and then From File.

Then I looked for my home button .gif file to insert into the first cell. I will have my Home button at the beggining of the Navigation Bar as so many websites do the same too. This is because the Home page itself is the very first page of when you enter a website.

After The Home button was inserted into the first cell I did the same with the rest of the cells and added the rest of each navigation bar button into them.

This is how it ended up looking after inserting each button into its cell

Making them HyperLinks

I then made each button a Hyperlink, in order for each of them to direct the audience to another page. I will make the Home Button link to the Home page, and I will make the Routes button link to the Routes Pages, and so on.

I can make the Home Button link to the Home Page by right clicking on it, and then clicking on Hyperlink, as shown in the screenshot

And then on the Window that comes up, I will have to find, and select the Home page file that I had added into the 'Pages' folder in Task 7. I will select that page as it is the page which the Home button will link to.

I did the same with all the other Navigation Bar Buttons, as I Hyperlinked them all to the Correct pages for them to link to.

After doing so I had completed doing the first part of the Navigation Bar Background.

Here are details of each of the graphics:

Navigation Bar Background:

File Type: .GIF Physical Size: 800 X 171 File Size: 12.7KB

Home Button:

File Type: .GIF Physical Size: 303 X 101 File Size: 10.3KB

Routes Button:

File Type: .GIF Physical Size: 289 X 104 File Size: 10.6KB

Shuttles Button:

File Type: .GIF Physical Size: 294 X 115 File Size: 10.9KB

Special Offers Button:

File Type: .GIF Physical Size: 300 X 104 File Size: 11.1KB

About Us Button:

File Type: .GIF Physical Size: 282 X 110 File Size: 10.8KB

So now I have done the first part, I will now have to do the second part and insert the On states of the buttons to make them complete Rollover buttons.

Making Them Rollover Buttons

To Insert the Onstates for the these buttons I have to:

First click on a off state button on the navigation bar then click on Format, and then on Behaviors to change the particular button to its onstate.

On the right, I am then able to click on Insert and then Swap Image.

A window will then come up so that I can browse the Onstate image after clicking on Browse. Before clicking on OK to finish it off, I made sure that both the Preload Images and Restore on Mouseout event are ticked.

After doing this to every button, this is how a button will look like after hovering the mouse cursor over it:

I have used the home button as an example.

Here are details of each of the Onstate buttons:

Home Button:

File Type: .GIF Physical Size: 296 X 109 File Size: 7.38KB

Routes Button:

File Type: .GIF Physical Size: 291 X 107 File Size: 7.79KB

Shuttles Button:

File Type: .GIF Physical Size: 298 X 103 File Size: 7.93KB

Special Offers Button:

File Type: .GIF Physical Size: 302 X 107 File Size: 8.42KB

About Us Button:

File Type: .GIF Physical Size: 290 X 109 File Size: 8.00KB

After adding up all of the File Size figures together, the Sum makes the file size of the whole Navigation Bar a Huge Total of 106.8KB

This could cause the Pages containing the Navigation Bar to load quite slower than they can.

Adding a Drop Down Menu onto the Navigation Bar

Now I had to finish it all off with adding a Drop Down Menu.

I had decided to put it at the bottom right of the Navigation Bar Background.

Firstly I inserted a new layer before clicking inside it and then clicking on Insert and then Form and then on Drop Down Menu Box.

After I do that, two buttons come up. Submit and Reset. I have to delete those two buttons which will leave me with a drop down menu.

Then I Double Click on the drop down menu and then a window comes up where I can add the links which can be on the Drop Down Menu.

I first click on add, and then under choice, I type in the Name of the link, and then under 'Specify Value type', I type in the actual Url adress of the name of the link.

After adding this link I added a few more in the same way.

Once I done them all. I finally placed the drop down menu on the part of the Navigation bar as I planned before changing and editing the codes of each link in order for the link to completely work.

To do this I clicked on the drop down menu before clicking on code at the bottom of frontpage.

After doing this, a page will come up filled with HTML codes which direct & controls everything that happens on the webpage.

At the moment I am looking to control only my drop down menu, so I have to look for its particular codes to change and edit.

Firstly I find the codes which are highlighted as it is those codes that control the drop down menu.

Then I have to look for D1 that is inside of what is highlighted, and after I do so, I have to leave a space after it and then type in (Onchange=''window.location.href=this.value;)

The screenhot shows it after I changed it.

This piece of code means that when someone uses the choice on the menu, it updates the page to take you to the link.

After doing that I saved the whole file on Frontpage, and I had finished everything on the Navigation Bar.

I went over everything and then previewed it, and was satisfied with all that I had done.

I also made the table transparent so that it can not be seen anymore. I just used it to make the buttons fit in well in the navigation bar. After doing that I had completed my Navigation Bar.

Adding the 3 Rollover Navigation Buttons onto the Template

Now that I have added the Logo, the Advertising Banner, and the Navigation Bar, all on my Template so far, I will add my 3 Navigation Buttons. Home Button, Back Button, and Forward button, that I have created in Unit 21 as .SWF files, which means that they are in Flash. These 3 buttons are Rollover Buttons. I clicked on the section where I would like these buttons to be located, before clicking on Insert, and then on Picture, and then on Movie in Flash Format, before going on to Select the 3 files, and Insert them.

Here are the details of each of the 3 Navigation buttons:

Home Button:

File Type: .SWF Physical Size: 310 X 139 File Size: 27KB

Back Button:

File Type: .SWF Physical Size: 296 X 109 File Size: 25KB

Forward Button:

File Type: .SWF Physical Size: 296 X 103 File Size: 50KB

Creating A Booking Form for the Template

Now the last thing that I am going to add onto the Template is a booking Form. As this Template will be everywhere on the Website, I will add a booking form on it, as I would like the booking form to be located on everypage which will make it easily accesible to the Target Audience (Business Travellers), in order for them to easily locate it, and book flights with the company which is the main purpose of Creating this Website.

I have clicked on a Section of the Table in the Template, which is located at the left of the page, and I have added a Layer in there because it will be in that section where the form will be located. After resizing the layer I have made the background of it Blue as that will be the Colour of the Booking form. The colour also fits with the House Style as the Colour Scheme includes Blue in it.

Then I added text at the top of the Booking form. The text is in Arial, and is White, this also fits with the House Style.

The text is 'What are you waiting for, BOOK NOW'

The text 'BOOK NOW', also fits with the House Style as it contains Red, which is in the Colour Scheme, and is also in the Arial Font.

Below this text I will add the form, which will contain the Drop-Down menus, Option Boxes etc, and also a Submit Button.

I added all of the features of the Form, by clicking on Insert and then on Form before I am able to decide which of the many features that I can select to insert onto the Form.

This is how my Booking Form ended up looking:

I was satisfied to have my Booking Form like this as I think that it had all the key information for visitors to be able to Book Flights or Hotels.

I think that everything is well layed out, and makes sense, in order for viewers to easily select options and easily book. The House Style is clearly visible on the Form, as the Font used is Arial, and the 3 colours of the Colour Scheme are used, which are Red, Blue, and Black

Background Colour of the Template

The Template will be on everypage, which means that the Background Colour of the Template will also be the Background Colour of each of the pages of the Website.

I have decided to have Black as the Background Colour of the Template, as not only is it in my Colour Scheme, but it can represent the colour of Outer Space, which is where flights from the Company take place.

Proffesional websites, choose their Background colour or image based on something which can represent what the Company does.

I can use the British Airways's website for example:

You can see how the Background Image of the Website is a light blue sky in the middle of the day. This gives a impression that the Company itself has something to do with the Sky, which is true as it takes you on flights using Aeroplanes which fly in the Sky.

This is why my SRL website should be the same, and use the Background to give an impression that the Company can take you on flights in Outer Space, using Shuttles. Using the colour Black would be the perfect colour to do so, and also it is included in the Colour Scheme of the Website.

These 2 screenshots, show how I made the Background of the Template Black

Adding Text Layers onto the Template

So now that I have added a Booking form onto the Template, I have finshed creating the Template, but now I just have to add a Text Layer in the middle section of the Table, so that all the pages of the website that will contain the Template can be able to have Text.

I did this by clicking on Insert and then on Layer, before resizing the Layer to a certain Size, and placing it in the middle of the page.

Aswell as adding a layer which will contain a page's text, I will add another layer which will be located at the top of the Template, and will contain Text which will be the Page Title.

So in the Home Page, the Page Title will be 'Home Page'. In the Routes Page, the Page Title will be 'Routes Page', and so on.

This Screenshot shows the Two Layers, I have added which will contain Text

Everypage will have the Template, and this is why I have added layers on the Template which will contain Text, so that each Webpage can contain text.

All the other features of the Template, which include the Navigation Bar the Advertising Banner, the Booking Form, and the 3 Navigation Buttons, will not be able to be edited on the pages that will contain the Template, because the Template will not allow them to be edited, but I want all of the Text Layers to be edited as I want each page to be able to add or remove text from these Layers.

I have edited the Layers so that all the Text, that I will type in them will be in the Arial Font, and be White. Doing this will make it fit with the House Style.

I can make those Layers editable by right clicking on them, before clicking on Manage Editable Regions, as shown in the Screenshot.

Then I can name the Layer which I want to be editable, before clicking on Add, and then be added onto the list of Regions of the Template, which can be edited.

Now these Layers can be editable on the Webpages, which will have the Template.

Adding A Email Hyperlink onto the Template

After doing that, I had just another thing to add onto the Template which is a Email Hyperlink. My website will have an Email hyperlink so that viewers can have one way, apart from using the Online Feedback form, of being able to interact with the company by asking questions. I want the Email Hyperlink to be on the Template so that it can be located on everypage of the website, which will mean that it can be easily accesible to the viewers of the website.

I have decided to have my Email Hyperlink at the Bottom of the Template, as many Professional websites do the same.

I added, a layer, and placed it at the bottom of the page, and Typed in it:

This text aslo fits with the House Style as it is in Arial, and is White. The font size is 14

Now to make it a Hyperlink, I have to highlight it, and then right click on it before clicking on Hyperlink

After doing that, I checked that it had worked, and had been made a Hyperlink by clicking on it, before being directed to Microsoft Outlook, where I can type and then send a message.

The Email link, was then able to direct a viewer to a URL, which enables Outlook to open up, where you can send a message to my Email Adress which I had typed in.

URL: mailto:[email protected]?subject=Contact%20SRL

Adding Sound onto the Template

Now I will add the Background music, which I got from Youtube, onto the Template, and play it in the background. This music is connected to space which is Suitable, as SRL is a company which allows people to have flights in Space.

I added the music by right clicking on the page, before clciking on Page Properties.

After doing this, the Background music was then able to be played on the Template.

Sound Details:

File Type: .WAV Length: 1min 42secs File Size: 17.1MB

Adding Javascript onto the Template

My website will also include JavaScript. JavaScript consists of HTML codes, and is used on websites to add or change features, which can make them look more attractive. Scripts can make navigation easier and simplify common maintenance tasks. I want to have a section on each page of the Website which contains the Date and Time. In Task 6 I had already found some JavaScript on the internet which is ready to be pasted onto my Template. I clicked on the Section of the Template where I would like the JavaScript to be located before going on to Copy and Paste the actual code, after clicking on 'Code' at the bottom left of Frontpage.

This Screenshot shows that the JavaScript had worked as the Date and Time

is visible at the Bottom of the Template.

Saving the Template

After adding the Javascript onto the Template, I had completed creating the Template which is now ready for use, on the Website's pages. I saved it by clicking on File, and then on Save As

Now that I have finished creating the Template, and Saved it, I am now able to go on to use it on all the pages of the website.

Adding the Template onto the Pages

I started with the Home Page, which is blank just as all the other pages of the Website. I opened the Blank Page up, before clicking on Format, and then on Dynamic Web Template, and then on Attatch Dynamic Web Template.

From there I can find the Template File, which I had previously saved as a .DWT file.

After doing that, the Template was on the Home Page, and now I did the same thing to add the Template onto all the rest of the Pages.

CSS

After finishing creating the Template, I used CSS on the website.

CSS is used on web pages to define colors, fonts, layouts, and other aspects of document presentation. It is designed to enable the separation of document content (written in HTML) from document presentation (written in CSS). This separation can improve content accessibility; provide more flexibility and control, in the specification of presentational characteristics. CSS also streamlines the amount of code needed for the websites pages.

. Firstly I clicked on File and then on New

2. From the task pane, located on the right side of the window, I selected More Page Templates, located under the new page section.

3. A new box then opened and then I Selected the Style Sheets tab, before selecting Normal Style Sheet and then clicking on OK

4. I then saved the new sheet by clicking on File and then on Save As

5. After a new box opened, I named the file 'Styles' and saved it in the Template Folder.

6. Then I added the following code into the new CSS file

3 Advantages of Using CSS

* More control over the display of individual elements on a page.

* Faster download times.

* Easier site management

As I wanted the CSS to be acting on each page of the website, I went on each of them to add the CSS on them.

Adding the CSS onto each page

I will use the Home Page for example

. I clicked on Pages and then on Index.htm to open up the home page

2. After the Home Page opened up, I clicked on the Format menu, and then on Style Sheet Links

3. After a new box opened, I clicked on Add

4. From there I located the CSS file, before clicking on Ok

I then used the code tab to view the code that has now ben added onto the page

I then added the CSS on to all of the Other pages of the Website in the same way which I had just done to the Home Page.

Putting the Same CSS on all of the webpages means that if I edit one code of a feature once, then the same feature of all of the pages would be edited, and changed aswell.

Analyisis of the CSS

Now that each page has the Template and CSS on them, I am now going to edit each page even further to fully complete them, which will mean that I will finish completing the Whole Website.

Home Page

Home Page: The introductory and entry page of the website.

Text

I added the Template onto the Home Page, and then I was ready to start adding text onto the editable Text Layers.

You can see how the Text is in the Arial font, and White, as this fits with the House Style of the Website

Inserting Images

Now that I have the Text ready, I am now ready to add one of the Multimedia, which are Images. In Task 6, I had searched and found for some Images on the Internet, which I saved and are now ready to be Inserted onto the Website.

I added each Image by clicking on Insert, and then on Picture, and then on From File.

From there I can find each Image, and Insert them onto the Page.

Then I can select any Image to be Inserted onto the Website, and then Clicking on OK

Image Details:

Limo 1: File Type: .gif Physical Size: 639 X 398 File Size: 62.5 KB

Limo 2: File Type: .gif Physical Size: 1024 X 768 File Size: 760 KB

Limo 3: File Type: .gif Physical Size: 575 X 384 File Size: 760 KB

Limo 4: File Type: .gif Physical Size: 400 X 289 File Size: 760 KB

Mourinho: File Type: .gif Physical Size: 103 X 129 File Size: 12.1 KB

I know all the Information of the Images because I clicked on the each one, before looking at the bottom left of the Window.

This Screenshot shows that all of the images are finely Inserted onto the Page

Embedding Video

Their is some Music being played in the Background, as it is on the Template, aswell as some Images, which I have just recently added, and now I am going to add another Multimedia onto this Page which is a Video.

In Task 6 I had found a Video on Youtube which I am ready to embed onto this Page. I will Copy the HTML which is right beside the Video on Youtube, and then Paste it into the HTML Codes Page of the Home Page.

This Screenshot shows that the Video has been perfectly Embeded onto the HomePage.

After doing this, I had completed creating the Homepage.

About Us Page

About Us Page: Will include all the information a Visitor would want to know about the Company

I added the Template onto this Page, in the same way as I added the Template onto the Home Page. I clicked on Insert, and then on Format, and then on Dynamic Web Template, and then on Attatch Dynamic Web Template.

From there I can find my Template to attatch it onto the Page.

On the Text Layers I added some Text on them, which the audience can read, to get all the information they would like to know about the Company.

Shuttles Page

Shuttles Page: To include information and Images about all of the Shuttles of the Company.

I inserted Images to this Page, to help a user understand what is being explained in the Text about which is that The Shuttlels are Luxurious.

Routes Page

Routes Page: Will include information about the different Routes which you can travel by.

I first added the Template by clicking on Insert, and then on Format, and then on Dynamic Web Template, and then on Attatch Dynamic Web Template.

From there I found my Template to attatch onto the Page.

Special Offers Page

Offers Page: A page where you can check out all of the Latest offers that the Company has made.

Feedback Page

Feedback Page: A page where you can be able to give your feedback of the website or of the Company.

There is no button on the Navigation Bar, for the Feedback page as there is not enough space for another one, but I have added a Button onto the Template, which Links to the Feedback page. The button will be easily accessible because it will be located on every page of the website because it is on the Template which is on every page.

I added all of the features of the Form, by clicking on Insert and then on Form before I am able to decide which of the many features that I can select to insert onto the Form.

My form had to be well laid out, easy to use and had to work.

This is My Finished FeedBack Page

I have not included the Template on the actual Feedback Page, as it would take alot of space which can be used by the form. Also it would make the Page load very slow as it would contain many different contents. I have only put the Navigation Bar on the Page, because I want the Navigation System to stay consistent which means that I want each page to have Hyperlinks of all the other pages.

After I created the Feedback Page, I had completed creating the Whole Website.

Unit 2 - Websites AO2 P2b / M2b /D2b

Name: Candidate Number: Centre Number: