I’ve just completed a website!

Standard

I feel very proud that I have managed to complete the task of creating a functioning website.  It has been a very difficult task as I wasn’t there for the taught sessions due to hospitalisation, but luckily there is a lot of internet knowledge out there to help.  I feel I’ve completed it to the best of my ability and found it useful to use the blog to accompany the progress.

If I was given the task again, I think I would organise myself better and definitely have all my pictures ready and done in the right size in Photoshop so they’re ready to insert.  I totally underestimated the use of Photoshop within web design but that’s something I’ll be more aware of in the future.

I don’t feel I have a sound working knowledge of Dreamweaver yet as I’ve been fumbling around the functions but I definitely have more knowledge than I started with.

I have worked to quite a limited time scale but feel I’ve completed the task and met the criteria required.  I didn’t keep to my original sketches as I had to amend the site to fit with time constraints, knowledge and I also didn’t want to end up repeating all the information over various pages.

If doing the site again, I would also allocate more time to working in longer blocks as I found it more difficult to stop and start the project.

I have liked the WordPress site and made it into a mini website by making new pages to file and update my information.  Please visit them to view my research as not all of it will appear as a blog.

It was a good introduction to blogging as that was something I’d never done before so it was good to see how to use it and how it can be used as a tool just like Twitter and Facebook.

Overall, it’s been very hard work but a definite learning curve.

Rollovers, pictures and links

Standard

Back to top links are set and are now functioning.

I’ve used the rollover image function to make the pictures on the homepage a bit more interesting and descriptive.  To do this I made images with the name of the designer in Photoshop to use as the second rollover image.  I’ve re-done this about 10 times as the font was never really clear but then I found out it was because my second image wasn’t exactly the same size as the original image so the text was stretching.  This is now sorted out and functioning properly using the Insert – Image objects – rollover function.

After testing it online, I see that I should have made links to the designer sites from their homepage pictures as the rollover function looks a bit deceiving in that aspect.  No time to amend, but a definite note for the future.

Nearly there!

Standard

After spending another marathon session on it, my website is nearly there.  Just a few more tweaks and it’ll be finished.  Firstly I need to tweak the picture links on the designers’ pages – they are showing up as the same code  as the other links (red and then purple when visited) but I don’t want them to look like that as it affects the look of the whole page.  After googling a solution, it seems the easiest way is to add the code ‘border = “0” before the end of the tag.

I also found  differences when checking the sites with firefox rather than Safari, the navigation bar altered and some of the links to external sites wouldn’t work so I have also now re-done those.

I wanted to put ‘back to top’ links on pages for ease of use as well so am currently working on that after googling the correct code to do it as found on this Yahoo site:

 

 

More amendments

Standard

I’ve completed amending the links in the body of the text on each page and have also changed the colour of the link to purple to show it’s a link that’s been visited.

The navigation bar also now doesn’t skip about as I amended the padding on it.

I’ve made the WordPress logo into a link to follow me to this blogging site.  Originally in my sketches it was links to Twitter and Facebook but these weren’t practical or relevant.

I will also make a link at the bottom of the essay text to go ‘back to top’

Amendments

Standard

I’ve simplified my site from the original drop down bar option (2 pages per designer) to just one each which is linked from the first page.  This means a total of 4 pages for the site.  This is due to time constraints and to provide an easier view for the reader so all information and images are contained in one page and I’m not spreading out the information making it harder to find or access.

Another change I’ve made from the original photoshop setup is the textured background.  It worked well as a static image but when I set up the second page with the essay text on it, the legibility was reduced, so I have now placed this background in the ‘body’ rather than the ‘wrapper’ so it still adds a slightly more luxurious feel to the site and so it’s not all plain white, but white was necessary in the wrapping for text to be read and on the homepage it also helps the images stand out more.

I’m currently having problems with my previous amendment on the navigation bar (where I made them hover and colour change to black) – as when previewed in safari, during the hover the link moves.  I will try and sort this today.

Changes to Title & Navigation

Standard

After trying to place a cropped photoshop image correctly for my main title and finding it wouldn’t sit properly where I wanted it , I was advised to type it straight onto the web page and adjust its alignment within the coding section.  I’ve made the indentation of the ‘for life’ by using ‘&nbsp’ which means a non-breaking space, so even if I hit the space bar a few times, only 1 space will be between two words.  I’ve used it twice for the right indentation.  This is also supposed to discourage the browser from splitting connected words when word wrapping.

Originally, when the navigation links were made, they automatically became underlined but that isn’t how I wanted them in my initial photoshop design, so they are now changed to a hover style (.navigation ul li a:hover) and the text is set to change from white (FFF) to black (OOO).

The links have also been amended so that it’s no longer a link if it’s the page you’re on e.g.

<li><a href=”matthewcarter.html”>Matthew Carter</a></li>
<li>Paul Rand</li>

the </a> has been taken away.