I started off with the basics, adding a container.
I then started to add body copy in the place that I wanted it, as well as a title that will later become a home button.
As I wanted a plain background, I removed the yellow colour so I could see how it would actually look.
I started to insert the buttons that I would need. I was going to have six buttons on the left hand side, with a links button in the bottom left corner and an archive button in the top right corner. I made sure that all of the buttons were fixed so that when it came to making the rest of the page scroll, they wouldn't move. However, I am unsure how I will make a scroll as this is my first ever website.
As you can see below, this is how my rollover effect will work:
I then repeated this process, adding in all of the other buttons.
I realised that I needed to work from the left and the top because otherwise my buttons would be in the wrong place, like in the above image. Once I altered this, everything was fine again.
Now that I had my buttons in place, I wanted to make it so when one had been clicked, it would reveal text beneath it. I put in the positioning of my text as so:
I had to then reposition the buttons on each page so that they were lower, allowing space for the drop-down text effect. Although this was fairly easy, it took up more time that I had thought it would.
I had had a few problems sorting out my buttons and my body copy, but eventually through trial and error, I got there. Now when each button was clicked, the buttons were positioned accordingly to allow for the body copy.
To make the columns for my images, which would scroll, I simply made another three containers that were positioned where I wanted them.
I then just inserted my image where I wanted it to be, with the rollover effect that I wanted.
Rollover:
I re-aligned the containers with the top of the text, as I wanted it. This meant that the top image would move up slightly before it was cut off (when scrolling).
I continued to add in more images, hoping that the scroll would just appear by itself once there was enough content in there.
As you can see above however, this was not the case. Although the third image was off the page, it didn't scroll. The rollover effect worked, but with the positioning of the images being fixed they couldn't scroll. I read online how to make things scroll, even coming across a website that said I just needed to copy across the coding, which I tried:
As you can see from the image above, this wasn't successful. I was unsure what I was doing and the coding didn't seem very simple. I decided to ditch this idea, and try going at it from another direction. I spoke to a member of staff from the I.T department, who helped me through it and showed me how to get it to work.
I made four columns, one being the fixed menu and the other three being where the images would be. These were all relative, which meant that after enough content had been input the scroll would appear automatically like I had hoped. We had one div id, which we set to contain all of the information about the columns and then we had three classes; the classes simply told each column where to position itself on the page. I then added a 'fadeblock' at the top and bottom of the page, which was just a white box that hid the images as the scrolled.
The images started off lower than they would actually go, so they would scroll slightly before being hidden by the fadeblock.
Now the columns were set up, I just had to start inserting my images.
By changing the margin-bottom, I made the images more evenly spaced out and look more uniform.
I just went about correcting any issues I found with the layout, such as the body copy having no margin, and the archive button being too far to the left.
So far so good.
As I couldn't figure out why the body copy margin wouldn't change, I simply changed the width of the box it was in, thus forcing it to be the size I wanted.
I then had to repeat this process for the archive page that I had planned on creating. This meant that the sizing would need changing, as the images were half the size. Other than that, it was all the same thing and I managed to do this with little problems.
I added a back button as I felt it was needed. I also realised that due to the change in size of the images, I would need to add more 'fadeblocks' to hide everything that I wanted to.
I also wanted to add a description page to all of the images, which involved adding new columns for the full size images. Again, this was the same process and I managed to complete this even easier than before.
For the links page, it was just going to be simple and clean, with links to various websites. I just added body copy into columns to get an idea of how it would look.
I then changed the colour of the body copy, so that it was the same as the category images. I took the colour information from illustrator where I had originally created my colour scheme.
At this point, I made some slight alterations to sections that I felt were slightly off or not in line etc.
The homepage was lacking in my eyes, and I thought it would be really nice if I could get some sort of a slideshow that displayed some of the work that was on the website. But, I had absolutely no idea how to do something like that so, I googled it. Thanks to some help from a fellow student, I came across this website that was simple to use and allowed me to create the effect that I wanted.
With some slight alterations, I managed to change the aspects of it that I didn't like such as the shadow, as well as making it the correct size for my website.
After I had inserted some images, everything was working fine. This is how the transition effect worked:
However, due to very poor time management skills on my behalf, my website remained at this point. I was forced to remove the archive page and links page, and despite these being additions that weren't actually needed, I feel as though without them my website is nowhere near as good. However, I am happy with the skills I have learned through this process but would've liked to get the whole thing finished to a standard I was proud of.
No comments:
Post a Comment