I have been asked to design, implement, maintain and evaluate a website for the I.T, Computing and Office services department in Filton college. The website will be based on the course VCE ICT and is to be established on the Filton college Intranet.

Microsoft Project: Microsoft Project is a powerful, flexible project management tool that you can use to control simple or complex projects. It helps you schedule and track all your activities so you can stay on top of their progress. I will be using this to keep up to date with my tasks throughout the duration of the assignment.

I have been given these deadlines:-

With project management I can keep to these deadlines and assign resources to areas that are behind. I can assign people to tasks and provide them with deadlines.

I can create a timetable in project management and delegate small but needed tasks to my team. They will all have their bit to do and can check with the Project management timetable if they have met deadlines and time targets.

I will split the process of creating a website into three separate phases.

All of these tasks will be split up into three separate phases of the assignment and assigned a team member. They will have the amount of time allowed, deadlines and can be found on any Filton college computer.

Project management will be our main way of preparation and planning before the start date.

Reasons for change of web site.

• Hyperlinks didn’t work
• The design was bland and obviously not well thought out.
• It wasn’t finished. (Parts of it weren’t there).
• The web site was so out of date that the information on it was incorrect and misleading.
• Not enough information.
• Not enough colour.
• Didn’t look at all professional.
• Slow loading.
• Some unnecessary graphics that didn’t have anything to do with computing.
• The website didn’t carry the corporate image of Filton college.

Design Work

Our main thought on design is not to take much away from the Filton college website.

The Filton college website holds its own logo and style and really is quite attractive.

The normal colours of the website are Red, Blue and White so my team and I have agreed we will keep these colours but the design will be completely different.

We have been asked by the college to keep the logo and we have agreed. The reason that frames are a good way of implementing a web site is that they provide cohesion between the pages and always remain visible while the main content of the page is scrolled up or down independently.

The same cohesion can also be obtained with the sue of shared borders rather than frames but these do not scroll independently of the main section, being part of the same page.

The website will be organised and designed into frames which split up the page into different sections for user-friendliness.

Here are some examples:-

Test Strategy

Each page and every link will be tested as the web site is developed. Some of the advanced features of the website will not work until it is published so this will be done relatively early on a development.

Further tests will be carried out using different computers with lower specification hardware and different browsers e.g. Netscape, Internet Explorer 5 and earlier versions of each.

The user will be asked to log on to the published Web site and comment on any difficulties experienced, features that did not work as expected or additions that they would like made.

Test Plan

Implementation

Selection of Hardware and Software

There are several packages that can be used to implement a web site including Dream weaver, FrontPage and Word 2002 or 2000. Dream weaver is a very expensive, package but is not available to me. Word does not have enough of the features required for me to implement the solution. FrontPage is available and has all the capabilities I need to fulfil the design specification.

I implemented the solution using the hardware that was available to me at home,and at college, namely a Pentium PC with a 15” monitor.

This is the specification of my computer and it was more than enough to do the project.

As I will be doing most of the work in school I have to take into consideration that the Monitor I will be using will be a 17” monitor, therefore it may result in the pages I design not being fully visible without scrolling on some smaller, lower resolution screens.

Summary of Implementation

The website was Implemented using frames which permit common sections, such as the navigation bar or contents bar, to appear on every page. Although older versions of some browsers cannot display pages with frames, these versions are virtually obsolete these days.

The layout of the web site will be a three framed page. There will be a contents bar on the side, a main body of text in the middle and a title.

The logo will be the same as the Filton logo and we have decided to have 2, one in the background as a watermark on the main frame and one in the left hand corner of the title frame.

 

This logo will be the background of our main body frame.                    

What is a Watermark?

Watermarks are text or pictures that appear behind document text.

They often add interest or identify the document status, such as marking

 a document as a "Draft."  Watermarks are intended for printed documents.

The logo that we will be using for the top left hand corner of the Title frame is:-

After the design of the frames the team have come up with this design.

I saved the logo as a watermark by accessing its saved properties and changing it to watermark.

Frames

I clicked the new page button and a new, blank page will appear in the frame.

e.g

Now I can design a title bar for the web. This will always be visible while someone is logged on to the site.

Understanding Frames

Throughout the project I will change the colour of many frames.

All you have to do to change the colour of a Frame is to right click your mouse on a frame and choose Page Properties.

When I have changed my frames I need to save them. It was very important to get this correct as one mistake could disorganise your whole web site.

A window appears asking to save embedded files. This means any Graphics or forms that haven’t been saved in FrontPage must be saved.

Removing the scrollbars is quite important as they clutter up the page and divide it unnecessarily. I removed them by:

• Right-click the contents frame and select Frame Properties.
• Select the arrow by the Show scrollbars options and click Never. Click Ok.

Hyperlinks

Hyperlinks are links to other pages or Web sites. They are used for navigating around a Web site, or to provide helpful links to other sites of relevant interest. When the mouse pointer moves over a hyperlink, it changes into a pointing hand. This tells the user that it is a link they can click.

I had to make hyperlinks for all these links:

Also see structure of website.

I created hyperlinks between these pages through this process:-

I highlighted the text that I wanted to change into a hyperlink.

 

After I did that the window, which I needed to assign the hyperlink  to a page, appeared.

I repeated this process with all my links and all my pages. I ended up with a column of pages on the side of my website with hyperlinks and paths directed on them.

With the current website the hyperlinks didn’t work so I took great care in creating and saving the changes on the hyperlink paths.

I also changed the colours easily by changing the hyperlink colour to red.

Tables were a major part of designing my web site. Tables are extremely useful to format your page and structure your website.

Before creating any tables I made sketches of what I wanted it to look like.

First I inserted a table. This gave me a grid like this:-

The table was inserted in the page my cursor was on.

The current website doesn’t have this structure and looks disorganised throughout its pages.

I have used a table through my whole project because of its good look and straight forward design.

To make the table look more professional you can merge them. I didn’t do this but I might have done if I had the time.

I hid my cell borders to make the page less clustered. I did this by:_

Right clicking the table and selecting Table Properties.

I reduced the border size to 0 and clicked OK.

 

The one thing the current web site has that our design doesn’t Graphics, images and pictures.

To insert our logo it was fairly simple:-

I selected insert, Picture, From file.

Hotspots

I had to create a hot spot for my maps, so that the users could click on it and get a better view of it through a different window.

I clicked on the rectangular hotspot as my maps were rectangular.

I dragged the rectangle over my image and a window appeared asking me fro which document it wants to be assigned to.

Uploading

FTP: A communication protocol that makes it possible for a user to transfer files between remote locations on a network. This protocol also allows users to use FTP commands, such as listing files and folders, to work with files on a remote location.).

If your Internet service provider (ISP) has the Microsoft FrontPage Server Extensions or SharePoint Team Services from Microsoft installed, you can publish to the Web server using HTTP. Otherwise, you can use Microsoft FrontPage to publish your web site to an FTP server.

The team gave the website over to a professional to load up onto FTP software.

You can find our website on the Fulton college Intranet.