Thursday, 28 November 2013

CODING A WEBSITE: PART 1

I decided to start coding the frame work of the website, using the wire frames I previously drew up to scale. I will use these along with my blog notes from the previous web sessions with Simon, to make the coding process slightly easier for myself.

I initially started opening a new HTML document, and creating a new route folder, linking dreamweaver to it, using the manage site button. This can be seen below. 

I then opened a new CSS style sheet. Now my set-up has been completed I can now start to code the website. 


For the style sheet, I took screen shots of the one create during Simon's session, and used this as a guide. I didn't copy and paste the code, as found out in session this doesn't work. However, writing the coding again myself, whilst changing dimensions and specifics allowed me to learn more by applying the skills taught in class.


The HTML and CSS sheets were linked up also so the website can be previewed, which left a blank webpage due to lack of content. To gain content, I used the <div id=> tag to add elements from the style sheet which I had set up; navigation, logo, buttons and all columns.


Because of having 4 columns, I had to call these, left 1 and 2, and right 1 and 2, to ensure the correct margins and padding were added, leaving the required space as noted on the wire frames. I wanted to keep to these as much as possible.

I had to re work out the dimensions to ensure the spacing between columns was accurate as initially columns were overflowing to the line below. This was fixed by altering the pixels very slightly for the padding.

I had several problems with aligning the columns. Initially working on a white screen with just the sample text, made it difficult to work out placement correctly, and made it much more difficult to find faults and fix them.

To work around this problem, I gave each design element, left 1 and 2, and right 1 and 2 a colour. The placement was then much easier to see and fix. The colour can be removed or changed after the layout composition is in order and correct. 

The placement of the columns on the screen shot below is also wrong, as they are meant to be under the logo which can partially be seen to the left. This was fixed by playing around with the placement settings and float settings. By changing this to float left, the columns moved into the right place, which can be seen below.



The dark blue box running across the top of the screen shots, is the navigation bar. As you can see also, the logo has been placed wrongly, and should be in it's own box. This was rectified as shown below, with the red box, where the logo will be held. This was done by recalculating the sizes for 5 links and 1 logo link, and placing the logo in it's on <div id=> tag, keeping that design element separate. I found using the coloured boxes helped a lot when sorting small problems out.


Shown below, I added margins to the navigation bar in either side, and worked out the pixels for each logo, 146px x 192px with a 10px gap between each button. This can be seen below. Working the layout out like this then allows me to add headers in when the main frame is complete, as the other 5 pages will use the same layout, and style sheet.


Buttons with evenly spaced margins within the navigation bar. I also added a margin within each column of 10px so the type isn't right at the edges.


I wanted to add the images to the buttons. These were created using illustrator and can be seen below:

Logo, Centralised.


(regular)
Contacts. Each has two parts of the rollover, regular and bold. The typeface is called 400ml.

(bold)


Saving for web as a transparent PNG.


Saving layers as -1 and -2.




Aligning text to the centre of the canvas.

I then used added the buttons to the navigation on the HTML code, using the <div id=> tag. I then inserted a rollover image, saved in PNG format at the correct pixel size.  



The images to be used are saved within the images file in the root folder. Using the options shown above, I added both images, a name and the linked website url. This was achieved by creating a template of the HTML code, and saving it under a new name for each page. These pages are then linked the the image when using the appropriate file.html extension. This process was repeated for each button, and the logo.


Below: Template, Dark Grey text. Any changes made here are reflected in the linked pages.


No comments:

Post a Comment