Development of Website & Problems Overcome

So to start my website up I thought if I got the basis right such as the container it would make my life a whole load easier down the line. So I chose to sue the same set-up as the one we did in the web design session. I had worked all my wireframes out to the same width of 1024px which this is the average width of computer screens.



So I started up the basic container and although I wanted it to be white background I filled it with a vibrant colour so that I could see where it would be placed.

This is how my website started which is exactly following the one we set in the session. Now I am going to input my logo & navigation bar. This i what is going to be hard as we didn't put our logo in the middle like I am wanting, we put it in the top left corner.

This is what I placed to put the logo in, I didn't put it in the same width box because it wasn't sitting in the right place. I didn't want it in the right at the top of the page so I put a margin above of 30px.
So in the HTML I placed the image in...

I placed the image as a rollover so I could attach a link so that you can go back to the index page as this is what most websites do when I have been researching. And I didn't know how to make a link when adding just an image.

So the this is my navigation bar and my buttons on the style sheet. I only did threes buttons as I realised that the gap was the same to the fourth, so I stopped. I could have not had a third but I had already done it so I decided to just keep it in. I have made my navigation bar the width of the page and the height of it just a bit bigger than the buttons as I wanted a gap between the logo and the nav bar.

This how I applied it in my HTML this I applied as a rollover as I had a rollover on them. Although, on the HTML it was I used the same image as I wanted to keep the rollover so this was the title of the page.

Then I wanted to add text so I had to choose my font family and the size so that this would not just be the automatic font and it stayed in the same style and matched the rest of the website as it needed a sans serif font to match the buttons & logo.




I tried to insert the images of the infographics separately and the text next to it. But I just couldn't get it right so I decided to make it easier for myself and create it as an image in illustrator and insert it in.

But I was now having a problem of scrolling because people are telling me it should scroll automatically but my website isn't. I have looked at online tutorials and these are not helping me as the way they are coding is totally different to the way we are doing it. So I looked in my HTML & CSS book. It told us to put overflow:scroll; into my container in the CSS file. This did help and then I just had to extend my container as it was set to only 768 as I was not going to have a scroll at first but then the infographics where too small.

Then I wanted to put on a PDF onto the website of the park maps so therefore they could download it and plan there day and print it out. But I didn't know how to do it so I looked in my HTML & CSS book of how to insert a PDF and this is why I inserted it in as a figure.

Then I wanted to create a link to the pdf so you can save it and print it out, zoom in & out. Therefore I created a hyperlink here again I found this out from the HTML & CSS book. As you can see the link is on the words to download a copy of the PDF maps.
 

To finish off the website I wanted to create a footer. with social media links on and link to get back to the top of the page.

I wrote all the code out but the footer was just not working when it was on the website so I asked one of my fellow students on my course Danielle Harrison to have a look as she had done coding before. She change a few things on my website such as using percentages rather than putting the px every time. The she showed me a feature which I think would have been really useful if knowing how to do it from the start.

The inspect element:

When she showed me this I was thinking it was a dream come true its no more guessing as you can align things and find out the size of padding and margin. It doesn't save but it saves a lot of time as its no more guessing game. I like the clear expression of the layout it shows different colours for what you have for the padding on the right hand side. And gives you your code so you can change it and see if it fixes it before saving it then undoing it.

This is what happens you can highlight over one part of your div and it will tell you where this div lies. The reason why my footer wasn't working is because it was sitting too high up & therefore the items that was inside the footer was getting squeezed out. So she told me to change my padding and then asked me to change all my boxes to relative as this is why I was having a problem with my scrolling.