One of my tasks is to create the facilities pages which I broke down into 3 pages. The steps taken are more or less the same, of course with the same background and header. It only differs in content. This is done so that it maintains the selected design and is synchronised.
I used this GUI layout;
Following are the summary of the steps taken for these pages;
Step 1: Create a new html file and save it on the designated folder.
Step 2: Insert background for the page. It was set to fixed attachment, no repeat and centre.
Step 3: I then insert table with 2 rows and 7 columns. Adjust the width and height, and merge top cells to make space for the banner. After that, I insert the image banner, text for navigation links and others.
Step 4: Make sure everything is in place, aligned to the centre. I adjusted the size of the banner as it was a little larger, to fit it in the cell properly. I then changed the colour of the text, table's background colour and other related details.
Step 5: As for the content, each page varies (image/video/text). I created a table and merged few cells, where necessary, and aligned it to centre. This was done so because it is easier to use tables as we used a lot of images and a video. It keeps them in place. For the facilities' main page, I used a picture that was made earlier using Photoshop and place it on an image place-holder. Resizing the image and table was done in this process. The navigation button on the left are all the same for all 3 pages.
Step 6: Link up all the pages to their respective buttons.
Following are the screen-shots of the final facilities pages;
Facilities' main page (image done with Photoshop)
Facilities architecture page (text)
Facilities's architecture page (image roll-over)
Facilities' space page
(video made using Flash and also a link to direct to the rental charges)
That's all from me for the facilities pages.
Thank you.
No comments:
Post a Comment