Thus far, the above image is all the content I currently have on the homepage of my website. I decided to go for an "old school" look, using grey buttons with an LED light on the left, a graphic and text explaining in a single word where the button will take you.
Below the row of buttons is a grey information plate, bearing a single sentence briefly explaining the page, with a small screw in each corner. The banner above the buttons bears the same logo on each page, with the accompanying image changing for each page.
The image is always an image of a model I have built on Minecraft, since they were the only things I've created that served the purpose of both decorating the banner, and without causing confusion or copyright infringement (since a lot of other work I've produced are logos or entire pages for magazines).
The buttons are all roll-over images, similar to my other page, each of which has a small LED light on the left hand side of the button, that illuminates red when the mouse hovers over the button. This is demonstrated by the screenshots provided below.
The only other page I have created so far (and completed) is the Biography Page:
This page is opened when the "Biography" button is clicked on the home page, and this opens in a new window, so that it can be closed, and there would be no need to navigate back to the home page.
The Biography page is similar in design to the main page in the following respects:
> The banner at the top is the same size (350px height)
> The logo on the banner is in exactly the same place
> The buttons are the same size and in exactly the same place
> The buttons are all rollover images
> The information plate is the same size and in the same place
This helps the user navigate through to different pages and having everything in the same place means that it takes the user less time to find the button they are looking for. Keeping everything consistent and neat creates familiarity and security, and eases navigation throughout the website.
The Biography page is different in design to the main page as following:
> Thunderbird 1 in the banner is replaced by Thunderbird 2
> The Biography button's "idle" state has its LED glowing green (to identify that the user is currently on the Biography page
> The text on the information plate relates to the current page
> There is an IFrame beneath the information plate
I decided to use what is called an IFrame on the Biography page, because I simply wanted to minimize scrolling of the page as much as I could. The text in the IFrame scrolls independently to the rest of the page, so that while I can scroll down and read the rest of the text in the IFrame, the rest of the page stays in the same place.
The text you can see in the IFrame is stored in a separate Dreamweaver file, and is linked to the IFrame through some simple coding. The IFrame feature is not a standard toolbar-available Dreamweaver feature, so I had to code it from scratch, using the References panel on Dreamweaver to help me.
The code I used for the IFrame is written as thus:
src="Biography_Text.html" refers to the source file for the content of the IFrame, stored in a separate Dreamweaver file. If I edit the file in any way (add or remove text, change the font, font colour, background colour etc.), it will also change the IFrame content.
width="484" height="375" obviously dictates the size of the IFrame on the page (in Pixels). The content on the source file (in this case, Biography_Text.html) is wrapped to this frame.
Above is the file Biography_Text.html in its full form. Below is the same file wrapped into the IFrame on the Biography page of my portfolio website, as well as a display of the scrolling of the page within the IFrame.
The final part of the coding is frameborder="no", which turns the default thick black border around the outside of the IFrame invisible.
No comments:
Post a Comment