Index Code & CSS Code. Here you can see, my basic code is 4 columns inside the container. I wanted my content to be left aligned with the buttons in the top left, 2 buttons to each column inside the navigation which spanned across the full width of the container.
Design View. I got to the stage where I had the layout that I wanted to go with. It was left aligned and in a four column grid with the four buttons lining up within the first two columns. My buttons was linked to the nav bar and working with the rollover effect I had assigned them with.
Here is the preview in firefox. I couldn't understand why one of the column colours wasn't showing up, but the content inside was. This wouldn't be a problem though because all my columns would eventually be white. I was using this really garish colours to help me see that everything was working. I saved this basic set-up in a different folder incase the next step messes everything up.
Editable Regions
I created the editable regions for the columns which is where all my content would be placed. I then created a template from this which I can apply to the other four pages of my website. My editable regions will just be the columns because this is all i will need to edit.
I created the 4 pages from the template - Home, Schedule, History and Rivalries.
I made sure that all the colours was changed to black and white which is what I wanted then worked in design view to insert my content into the sections. I wasn't trusting this view completely but it was easier to place the bulk of my content in this way then modifying any adjustments later...
____Schedule Page
For the Schedule Page, I wanted to create this grid like structure of images of players who was playing on each day. I collected imagery that was similar of each player. I wanted them to be in action holding the racket or hitting a ball. This meant that all the images would work as a set when placed in the grid.
I made every image 212 pixels width and 142 pixels height. so that they would fit perfectly in the grid. I had to create two images for every image for the rollover effect which is what i did. i created a folder in the root folder images to place these into for dreamweaver to access.
As you can see my first attempt, the with between the columns was just too much, I wanted it to be more of a grid like structure, so had to adjust this with column widths and padding...
Everything was working fine except that one of the columns has dropped down below. I suspect this is something to do with the column widths inside the container as well as the padding but all my calculations seemed fine. I then realised that you had to take away 40 px of the column widths if there was 20px padding on them, so when I made this adjustment, everything was running how I wanted it to.
I managed to insert the rollover images to all of the images to get this effect when scrolling through the website. The dates are in the columns along with the players who are playing that day above each image. When you scroll over the images, the rollover brings in this accent of neon green (which is the colour of my branding) and this also informs you of what court they will be playing on.
I'm really impressed with this now, I think the website is simple, but functional for the purpose and target audience. The only problem was the point size of the type. I will have to increase this to around 10pt from 8pt because it's difficult even for me to read and I will have to take into consideration, the tennis fans with poor eyesight will need the information to be larger and easier to read.
Making the logo fixed above Centrally
To do this, I originally edited my css for the template and creating a header section which was placed centrally using the left, right, up and down margins to do so. I then changed the position to 'fixed' instead of relative which meant that as I scrolled down the image stayed put while the content moved.
This worked to a certain degree, but the logo was behind the content and off centre, which is not what I wanted...
I fixed this problem by altering the z-index. which is the index which determines what objects are placed nearer the top. I changed the z-index on the logo to 100 which meant it would sit on top of everything. I also changed the calculations of my margins to where the logo would be placed in order for it to sit centrally in the middle of the central images.
I was really happy with the outcome of this now, so decided to move onto my other pages.
_____History Page
I wanted to use the same layout of 4 columns for all the pages to keep it consistent and simple clean navigation because i felt that suited the theme i was going for. I created images the same as before but slightly different in the fact that it was of players holding the trophy and when you scroll over it would show their name and year they won...
As for the layout, I kept it similar but because I was adding body copy I spaced the content out more at different levels so you could scroll and follow it down like a timeline of events.
_____Rivalries Page
Using a similar layout for the rivalries page, the information sat more in a grid like format. This kept the information organised and also followed my consistent theme.
_____Home Page
As you can see, I dissected the large image of the stadium up into sections, therefore there could be a full scale image but whilst also having the 'rollover' effect which is what I wanted. I made each rollover image into a different fact so that the user could scroll through the images to find out useful interesting info.
Leave your comment