Constructing a Website Evidence

In this report I detailed how I made my website through the use of screenshots of the tools I used.

In the event that the images do not display, find this document HERE

For the creation of my website I used Microsoft Frontpage. A slightly outdated but easy to get ahold of software package designed for the creation of websites. I will be looking at how I created the website and explaining a few of the tools I used.

Below you can see the basic file structure of my website. I have seperated it all into folders for each page and for the assets. I made each folder using the folder icon at the top of the ‘folder list’ this meant that I could easily keep all the files and assets for the website tidy and workable.

One of the mains places for tools I used was the ‘Insert’ dropdown bar. This is where some of the more useful tools are kept. From here I could create an ‘inline frame’ which would allow me to nest webpages inside of another webpage and thus make the site easier to build and function better. I chose not to do this based on wanting to have a bit of interactivity in the actual format of the website.
Another tool I could have used is the ‘Web Componant’ option. This allows me to add Javascript functions to the website such as photo galleries, audio files and if I ever needed it, a hit counter.

As with all Microsoft Office products, the bar at the top contains a lot of the useful tools you may need while working. After the usual New, Open, Save and copy and paste tools is the web tools. The first of which is another way to access the previously mentioned ‘Web Componants’. Next to that is the function to add a table to the web page. This is an incredibly useful tool because it allows you to set out the website in an easy to use and aesthetically pleasing manner.
Next to that is the layer tool which allows you to layer web objects on top of each other to add in a 3D effect to your website. Personally I dislike this tool because it doesn’t give good results. The next button adds an image to the web page. Useful for obvious reasons, this is how you get images in place. Click where you want it and it’ll appear.
The Drawing tool comes next. This allows you to add custom shapes to your webpage should that be of use to you. Personally, I don’t have a use for this.
Hyperlinks however is a very useful tool and one I used a lot. This allows you to connect multiple webpages together to form a website. The rest of the tools on that line are for refreshing and ensureing everything is working correctly. They bring up the menu to the right. In this case it is one of the main navigation links for the Radio pages.

For the background I used the ‘Gradiant Tool’ in Adobe Photoshop to give me an even and repeatable pattern I could use as the background of the website. By dragging and dropping on the page I could control the severity of the gradiants to create different patterns.

Below you can see the results of my work.

Back on the creation of the website, I used the table tool to create a table on which I could add content to later. At this stage I still had a different background on the page, purely so it was easier to see the table. I would later hide the table by changing it’s opacity.

To change the background, image on a specific page, I first had to right click on the page and then select the ‘Page Propeties’ option. This brought up this menu where it’s possible to change the background image. I selected the background I’d created in Photoshop and that was it.

For the photo galleries, I used the previously mentioned ‘Web Componants’ and selected a photo gallery. This brings up this menu where you can add images. It collects the images and stitches them into some form of photo gallery. In this case it was a photo gallery for the Games Design course. You can see the results of this below.

For those who understand HTML, FrontPage allows them to look directly at the coding behind the website and either code through a split view like this or from the code alone. This allows for more control over the website and easier problem-solving in the event that something goes wrong. The problem with FrontPage is that it tends to add redundant code in that can cause problems and as a result, some users prefer to code it all themselves.

Once you’re ready to look at how the webpage looks in a browser, you can select that from the ‘File’ tab and then select which browser you would prefer to look at. It’s best to view it from more than one because they may all present it slightly different and it may cause problems.

Once you’re ready to upload it to the internet you’ll need to use an FTP (File Transfer Protocol) program to send the files to the server. For this I used Filezilla however other programs to exist and all work the same.

The program when open may look something like this. In this instance I’m not yet logged on however you can see that my websites are in the left hand bar. This shows my ‘Local’ files, or in other words, what’s on my computer.

In order to add a website you need to fill in the details to the left. For privacy reasons I’ve removed my host name from the image and randomised the rest of the details to give an example of how it may look.

Once you’ve logged in it’ll look like this and you can transfer files across. The website will now be available online under the domain name you uploaded the files to.