Design Practice: Mutton Quad Website Development

I decided to code the website which I mocked up for the restaurant I created. I will explain the entire process from creating the folders to adding the copyright column.

Firstly I created the folders which makes it easier to create the first pages of the website and gives you an area to save your pages.

The first page I created was a blank HTML file. I named this Index.html

I next created a blank CSS page which I named stylesheet.css

I deleted the unnecessary text on the html page to make the page less confusing to look at. I deleted everything up to <head>

I did the same to the CSS page. You can see what I deleted and what I left the same. I then started coding in the tables I wanted. I used my Ethical Gold website as an example of what I needed. When you start coding you get used to it and you have a workflow. I had not done any web design since before christmas so I found it a bit difficult to even set my pages up hence why I am making this tutorial detailed for future projects to help me out.

I started editing the tables to suit my new design for the KERN restaurant design. Here you can see I am adding my background image.

After I coded my table in I linked my HTML page to my CSS pages to my folders which were located on userwork. The folders must be in user work when working on the college Imacs. I did this by going to Site > Manage site

Here you can see me linking the folders to the pages.

Selecting the folder I want to use.

I started adding the tables to the css page by using the DIV tag.

I created my buttons that would appear the same on every page. The orange buttons appears when the mouse hovers over it - Rollover images.

Below you can see the buttons I inserting. The option to insert buttons:

Below you can see the buttons that I inserted:

My buttons in the folder with the master button. I used the master button as a template to make any changes.

After I created the buttonss I linked the HTML page and the CSS page together. I clicked on the little chain you can see in the screen shot above.

Selecting the stylesheet.css:

I then created new pages. You have to a page from template and find your template which you can see on the new document window.

Here you can see all of the pages I created from a template page.

I translated the mock up into a real website that functions. I am quite proud of this as it was pretty straightforward and I had minimal help.

Here you can see the rollover images (buttons) which are linked to other pages.

I made made my images the right dimensions for the website and added them in. They are saved at 72 DPI.

The bookings page:

I added an embedded map into the directions page. I inserted the fictional website into google maps which allows the user to use google maps to navigate to the restaurant.

A close up of google maps with my pinned location.

What I still need to do is make sure my website is formatted properly and will work on various browsers. This may spring up problems. It is essential the website works on at least the top four browsers.

I wanted different background images on every page so I had to create these tables to individually insert on the three pages. I inserted an editable region outside my container so that I could position my background images exactly where I want.