Friday, 29 November 2013

CODING A WEBSITE: PART 2

Following my previous post, part 1, I have taken all of the colour out of the css code for the colour background. This made the entire website have a white background, as planned. I can now add text and appropriate links. I also could replace the logo. These are shown below.



Above you can see where I have changed the logo and the rollover images for the links in the navigation bar. I changed rhese by altering the file extension within the html code and ensuring the images were in the root folder.


Above is a screenshot of the initial content being placed on the homepage. I began with the homepage as this is the first site to be seen, as well as writing the content in order.

'Above' and 'Tip of the Day' above are shown in regular Helvetica. I used the <i> and </i> tag in the html code to make these sub headers italic, whilst the main body copy remains regular.

Italic text made the sub headers much easier to recognise for the viewer to navigate around.



Above shows the text coding for the text within the column. Each line was separated by the <br> tag.

Below you can see that for the tip of the day, rather than editing the tip everyday through the coding, to add a twitter feed to this section instead. This makes it easier for myself, if the website becomes live, as well as now I have the option of re-tweeting other messages from designers, or about upcoming events etc, adding extra functionality and interactivity for the user.

This can be seen below:

I achieved this through working through an online tutorial. Due to the success of the embed widget, I have now learnt how to create this addition for the future. 






Creating a code through twitter, and placing it within the html for column (right2). 

Additional info on website added to ensure the reader is aware of the contents of the website, and to ease navigation.

I then started adding links to the events a page. The main body copy was placed in the html coding, and each different event was separated by a line, using the <br> tag. Hyperlinks can then be added afterwards. 


Print Design in Italics - Sub Header.

Events listed over two columns for Print Design.

Web Design Added.

Conferences and Talks listed.

Each event was added to a hyperlink. This was done using the <a href=""></a> tag. 

For example; <a href="http://www.www.londondesignweek.com">London Design Week</a>.

This can be seen in the coding below.


London Design Festival Link.



Links on Pages.

Coding.


Finished Links.



Facts Page, Headers and Sub headers


Filled in pages shown above.








Screen Shots of Finished Pages of Website.

No comments:

Post a Comment