OUGD504 - Design for Print and Web: Coding the Website

I decided to code the website even though I'm focussing on the printed material because I enjoy coding and wanted the practice. I also knew I could get it done quickly because it's pretty simple and I did a page jump in the Design for Web website. I aimed to get it done in a night, so I went straight onto the CSS filling everything out I knew from my Fireworks mock up - fonts, footer and background image.

I specified the measurements I wanted for the body, and I also set the margin to 0px so that the navigation and footer would reach the end of the page.

I specified all the typography at the top of the CSS file this time and did it properly, rather than my site for the Web project which was all over the place.

I also put the background image in the same folder as the web files, and put it in place as the background image.

Here is what that looked like:

Then I started doing the footer because I knew this would be easy and could get it out the way with. Basically by fixing the position of it, it will always be on the screen no matter how far the user has scrolled down. I also set how it would look by making it red (background: #A42D25) , centering the white text (text-align: center), getting rid of the styles on the link (text-decoration: none) and putting the links next to each other (display: inline).

This is what the footer then looked like, with the background image also working:

I then started on the navigation. I knew this would be a bit harder, cause I wanted to make the page jump on text and not image, as I had done previously.

The #top is the container for the logo and navigation.

I added the styles for the logo as well, floating it left and making sure the position is fixed.

I then started to concentrate more on the HTML, and I put in the list for the navigation, linking it to #a etc, as this is where the page will jump to in the document rather than a link to a page. I added two classes to the links - one with the page name which styles the text and the positioning of that, while the navbox is the red container around the text.

Here are the styles for one of the pages (they are all the same bar the margin-left)

These are the styles for the red box:

I did some adjusting of the red box in Inspect Element, to get the padding and margins in proportion.

Here is what it looks like with the navigation and logo. The About section is also shown here which I'll go through now.

In this section I added a wrapper, and a textbox for the text. This had all the padding measurements which creates space between the edge of the box and text which is so important.  At first I made the position fixed, but I realised later on this was wrong. I didn't set a height, because the end of the text plus the padding-bottom would do that for me. It's better this way because if I change the text, or it looks different on another browser it will always fit within the textbox. 

I then started doing the opening times part on the home page. I created a box for the information to go in, which you can't see but will contain it all and position it correctly. I also created a line simply by adding a border-bottom which I've used throughout the printed material too.

I did some adjusting on Inspect Element, and figured out the right margin-left.

At first the times was going underneath the heading, and I realised this was because the width of the heading was really long for some reason by default. To alter this I needed to change the width of the heading.

In the HTML I put everything within the timesbox, and added the text. I used two of my heading defaults but I needed to add one style to them each for the width, and I didn't want to create a new class in CSS so I just made an inline style. This means it pushed the times to the far right of the box.

This is what it looks like now, which is a lot better:

Then I changed the margin-top of it to put it in line with the bottom of the about box.

I altered the wrapper to make the content lower.

This is the home page done!

I then started to work on the book page which was actually the easiest.

I started in the HTML by adding the #b id, because this will make the page jump here.

I also made sure all the content would be going inside these two divs. The container is the height of the screen - 640px, as this will make sure when it jumps it goes to the right section of the page. The wrapper is for the content.

Here are the styles for the box - I used most of the same styles that I used for the textbox on the home page.

Here is what it looked like in the browser:

I inserted an image of the book slider rather than making it into a functioning one as that would be too hard.

At first when I inserted the image I realised it was a lot shorter than what I thought, and I could add another book easily on each side. I also decided to take away the black background as I figured it would be easier to add my own in CSS.

Once I had edited the image, it looked like this. And I actually decided that I prefer it without the black box behind it, so I left it like this!

The only style on the image I had was the margin-top to make it below the text box.

Here is what the content looked like in HTML:

Then I started working on the Menu page which took a lot longer. I added the page jump div and the container which sets the height for this page.

This is the container in CSS:

This means when I click on the navigation, it goes to the right section of the page.

I created a box for the menu, foodbox, and started adding the content for that in HTML. I also inserted an arrow image.

Here are the styles for the container, wrapper and box for the food menu.

Here is what it looks like so far in the browser:

I added the line div again, and the second arrow. I started adding more inline styles to change things like the margin and colour.

Here is what it looks like so far:

I then realised I wanted the headings in black.

I added all of the sandwiches in.

Here is all the HTML for the content:

These are the styles for the drink menu which are going to go next to the food menu. It is similar to the opening times box on the home page.

Here is the content, and I need to adjust the positioning of the prices.

I changed the width of the headings so that they are all in the right place.

Here is the HTML for the drinks menu:

For the Contact page, I again created a container and wrapper.

Here is what it looks like in HTML at the beginning.

I created a form first of all for the enquiry form.

It wasn't looking great to start off with, and I tried making it transparent but I don't think you can do that on default forms. The message box worked fine though. So I tried just making a transparent box with a border to see if that worked, which it did. So I've made the decision to get rid of the form in HTML (bar from the message box) and just make boxes instead.

I did this which looks a lot better. I also made sure the send button was in the right place.

Here is the CSS for the form.

I then started to add the box with the contact details in next to it.

I put the form into a container because with it not being at first, the details box wouldn't go to the left of it - just underneath. I needed the form to float left for the other box to sit next to it.

Here is the HTML for the form inside the form box.

I have now finished coding the website! I'm very happy with it as it is pretty much exactly like my design and I finished it quickly which is good practice as I want to code two websites for the Responsive brief.