I wanted to be a web designer; and then I made a website.

Web design evaluation

I was really wanting to get deeply involved with web design as I had a feeling that this was a way I may want my career to go. I’m definitely glad that we started out learning some of the basics of html as it really helped to be able to understand some of the coding that was happening when you changed various things when I moved my ideas into Dreamweaver.

I feel that my website is not as good as I would have hoped it to be because it became hindered by my complete lack of knowledge of the programs (having only used Dreamweaver once about 3 years previously). I made many notes in the lesson but found that by the time it came to pulling my ideas together they were of little use as I found I became stuck on small problems that halted any further work being done at that time. I found that, like with other optional modules, web design became a bit of a side project that I tended to focus on for only a day a week before having to refocus my attention to other closer deadlines and projects. I feel that I would have been able to create a better website if I could have had someone close to hand to grab and ask quick questions. As I chose to create a lot of my website at home (usually focusing on it just after finishing a lesson) I found that I’d be inspired but then wouldn’t know how to create what ideas I had sketched down. I was also slightly stuck with the fact that I’ve been stuck on crutches for the past two weeks (which were totally useless as I couldn’t actually put weight on either of my feet) and so have been pretty much housebound.

I ended up creating my website banner in flash as after playing around on Dreamweaver with the buttons I had designed it became apparent that they would not work quite how I wanted them to. Once the banner was in Dreamweaver I was able to create all the pages as .jpg image files in Photoshop and then upload them as images and hotspot all of the links I needed to. I know this is really not the best was to do a website but I am impressed that it’s working at all as I spent many an hour attempting to get my head round linking all of the pages correctly.

In future I would like to be able to spend more time focusing on creating a better website without other projects distracting me. I’m happy with the fact that it is working and visible to the public but I think I could make something a lot better once I’ve learnt the constraints and possibilities of the programs involved.

Here endeth the lesson of web design, it’s been a trip through confusing and aggravation pastures but I’ve come out intact and with a website to show for it…

website website website...

Yes it's true, it's finally uploaded after first getting into college to find out the disc I'd burnt with it on wasn't working on the macs (luckily it did on the PCs though). Then non of my links wanted to work so me and Mark spent ages trying to work out why this was and then I had to go through all the pages and reconnect all the broken links (which turned out to be all the internal links, ace). Finally, once the pages and links were working I added (with some expert help from Mark [again]) a downloadable CV. And so that is everything I wanted to get working, working. Awesome. I've tried viewing it on the Internet out of college and it works! which I didn't think it would do (we thought it was only going to be accessible through the college's internal network thingy).

Now I shall think about writing an evaluation of the project. I will post it later 'cause it's late and I'm off to bed.

Night

Website uploaded

I've uploaded my website today, this be it: clicky!

P.S. it's best viewed in Internet Explorer or Safari as it seems to squiff a bit in firefox for some random reason...

My site

Ok so I've decided on the style and content of my website... (see previous post) I've landed myself in crutches which aren't working cause I've hurt both my feet so I can't get into the lessons but luckily one of my friends is a bit of a web poker so I stole them and told them what I want to do and they've shown me how to go about it...

For the header I've had to create it in flash so that the buttons rollover as desired. (they weren't working when I placed the graph paper image as a background image because it just kept repeating and I couldn't work out how to stop it from doing that) This has then been added to Dreamweaver in the top of a two rowed graph. The graph has no boarder so that I can create the pages in Photoshop, save them as .jpg and upload them as images with hotspots that creates a seamless whole image with the top navigation system.

I tried to make the navigation bar in dreamweaver using the tool provided but it didn't give the desired effect and just looked stupid so flash it was.

anyway, I've created each page with all the content needed in photoshop and saved them all as .jpg's and inserted into the second row in the graph and saved each page with the banner in dreamweaver. I've put in some external links and set up a clickable contact page (with some more help from my dreamweaver hero).



Here is the bottom image of my 'about me' page, [the top part looks exactly the same as the perviously posted image but the buttons turn blue when rolled over].

All I have left to do is put on a downloadable CV onto the contacts/cv page (aslong as it works - think I'll wait to ask sophie cause it looks confusing!) and upload it tomorrow morning aslong as I can get into college with my crutches. ace.

ta raa

Styles

I've been thinking about various styles over the past few months for how I wanted my website to look:

as I make a lot of books I was going to have it as a stack of books that you'd choose something out of and it'd open the books and turn the pages etc but that involves the EVIL that is flash or other animation programs which just make my head hurt!

so there's the books there was also a bit about an open note book with post it notes as roleover buttons but I started making this then decided I hate it... (I've even deleted all the images I took for this so I can't even show you what I meant... dumbass)

and there was hand written buttons and other such stuff but it didn't allow for enough space and looked really tacky so nope.

I've chosen to make it with a graph paper background/scrunched background. the buttons are made out of ticker tape - see below...



oh yeah and it's called "Me in a box in front of your eyes" which is a name I've used for most of my blogs in the past or variations of - e.g. web design in a box in front of your eyes. the box being the screen... mmyeeees

ta raaa

Server space

Sophie has organised some server space for us to upload our websites onto but they won't be visible out of college so if I'm planning on using this as an actual online portfolio I'm going to have to invest in some space or find some way of getting some for free - supposedly you get some when you sign up with broadband companies... I'll look into over the Summer and see what I can find out.

Portfolio

I've decided upon picking a selection of my work - 7 in total, quite a lot I guess but I'd rather be able to show all my work in one place and hopefully this site's something I can build and improve upon over the years...

the projects I've chosen are/and consist of:

Image and Culture - images of work in situe
Reportage - 2 books
Collections - a book
Complaint - images of work in situe
Storytelling - a book
Future Perfect - an article
When I grow up I want to be... - a photo of a poster

Work

I've decided upon picking a selection of my work - 7 in total, quite a lot I guess but I'd rather be able to show all my work in one place and hopefully this site's something I can build and improve upon over

Brain thinky

Well hello again

now I have to really begin thinking about all the stuff I want on my website/online portfolio...

we have:

Index - About me
- Portfolio
- Contact me
- Downloadable CV?

I've been looking at all my work and have written a list of all the projects I've done in college:

Year 1
1: Who am I
2: Reportage
3: Complaint
4: Storytelling
5: Advertising module - tea or gum
6: Image and Culture - elective

Year 2
1: England
2: Collectors
3: Send and Receive
4: D & A D
5: Live project: Future Perfect & When I grow up I want to be...
6: Animation - optional module
7: Web design - optional module
8: Enterprise Studies - elective

Looking back I have made quite a few books over my time at LCAD - maybe that could be a feature of my site?

Hotspots and rollovers...

...and other fun filled dreamweaver gadgets.

Hotspots: possibly my favourite was of creating buttons as it is so simple and doesn't make my brain hurt. ok so you've imported an image to dreamweaver yes? On that picture you can use the hotspot selection tools (found at the bottom left of your screen or on the drop down list of the insert picture button at the top of the workspace.

anyhoo with the hoptspot tool selected use this to select the area you want to create a link in on your image and drag the box/circle around the area you want to choose (or use the polygon hotspot tool for more difficult shapes)



your workspace should look like the above image with a turquoise shape over where you want the clickable link to be.



Then you need to select where you want the link to lead to by browsing to find the other pages you've made etc. and you need to choose if it's going to open in the same page (_parent) or in a new page (_blank) in the target box.

Reet, That's hotspots - dead easy, not alot to go wrong on that one (I hope) you can also do rollover buttons by selecting the drop down image list again and choosing the original image and rollover image. [see below]



you can also make flash buttons and flash text which is like using clipart on Word documents aka NAFF and tacky and not good webdesigning no no no.

Here endeth the lesson for now.

More weaving of those dreams...

Ok before I begin on images I'll talk about the layout of your folders: create a folder called "web" in which you will keep all your website uploadable things. Inside "web" create another folder called "images" in which you'll put all images that load onto your web including any .gif's or other moving images and flash based stuff. As you go along creating your website make sure all the future folders you make are containing in the original "web" folder so when you move that folder nothing is left behind and therefore no links become broken. You may have a folder for "pages" or "sounds" or "animation" depending on the content of your site. Always make sure you don't use capital letters or spaces when naming files to go on your website as this may cause problems in the future which will take an age to fix so you might as well do it right the first time, right?

Ok, when working on images you need to make sure they always have a resolution of 72dpi and are in .jpg format or .gif/.png (for buttons, simple moving images or simple images) and make sure they're in the colour format of RGB rather than CYMK which is used predominantly for print not web.

When creating images for your website always save them into your "images" folder with logical names you can follow. so say you've got 3 pictures of a tree and you want to have them as thumbnails that load etc. save them in the correct format as tree1, tree2, tree3 etc. so when you're linking your pages it's a hell of a lot easier to follow. It's all about planning ahead - it makes it a lot easier in the long run.

Ok so you've got your image open in photoshop editing it, and your ready to upload? open imageready (it comes with photoshop) this allows you to optimise the image for the web and you can choose the image quality which will change the loading time. So an image with a higher quality will take a longer time to load on a site... genius. Check the download speed which is shown at the bottom right as 28.8 kbps which is oldschool modem stylee so deside that time by 8 to come up with the time it will take to download using broadband (as there are very few people who haven't got it now-a-days). then save to images folder.

You can also use "slicing" to make images load quicker which, in short, slices an image into sections that will loads separate of the other slices - this is useful for larger images.

ok so now your image is ready for dreamweaver, it's been optimised and saved as a 72dpi, RGB .jpg image into your images folder in the web folder, yes?

if no go back and do it right damnit!

Ok, sorted? right open dreamweaver, on the top task bar you have an option to insert an image, clicky clicky. Choose the image path (find it in your folder) and it should show up on the design section of your screen and also in the html code as the image path etc. easy. you can then add hotspots and other jazz... we'll get to that.

Going to get a cup of tea now.

Dreamweaver, the weaver of dreams...

... If you know what you're doing.

Upon opening Dreamweaver you're give a list of thing you can open e.g. open recent etc. Choose HTML from the top of the middle list.

Choose to change your view to the "split" view to see both your design in real image and as html coding. This allow you to edit the code and see what happens to the pages as you do it - like me changing the background colour to black as previously mentioned.

Choose layout from the drop down list at the top (it was common) to draw cells etc and back into common to move the cells about and edit. press the apple(for macs) or shift (for windows) to select the cell borders. In the layout tab you have the choice of using frames which gives you a type of layout which you can duplicate across all your pages but it is not a very professional way of doing things.

When creating a hotspot you have a box in which you put the "link" - the place you want the link to take you to e.g. another page. and a drop down list below which is called the "Target" this is to choose whether you want the link to open in a new page (_blank) or to open the new page into the current one (_parent or _top, however only use _parent or _blank for simplicities sake).

And then there was...

...CSS which I don't understand because I'm a genius (in the negative sense) and missed that lesson but I've read notes and stuff on it...and became more throughly confused.

anyway, I've got some ideas for what I'd like to do but first look at the pretty websites...MONKEEHUB which is pure genius (in the positive sense) there's also Kev Adamson which is quite pretty but a little bit difficult to follow and has some bad links that open in the main page (as _parent on dreamweaver) which is pretty annoying as it means lots of pressing the back button or remember to open the links in a new page each time. not good. There is also Dream Design which has a really good title bar (in my opinion).

I've noticed that the websites I like the best have a sort of hand drawn quality. I know my first website will never match up to these but it's definitly something to aim for in the future because lets face it they're professionals!

Index pages - in the beginning

In this lesson where we were learning how to set up a basic page in Dreamweaver. The first page that you want to load (e.g. the homepage) is called the Index page and must be saved as index.html so as not to confuse the computer (not sure why but DO IT or it'll die a horrible death [probably not], it also makes it a little more easy when it comes to linking all the pages)

I've realised that a great deal of webdesign is about being organised in the beginning for it to work or there will be broken links all over the place. Even if you do something simple like moving an image from one folder to another - the link on the webpage will be broken as it cannot follow the movements of the image. This means you have to be organised early or be prepared to reconnect all the images/links once the pages are made (I found out the hard way... bah)

Anyhoooo... when we were making the index page at college it seems that the system was a little messed up so we spent a whole lesson just trying to get the folders to work which were jumping all over the place. In the end I had to delete all of mine and start again the next week.

But I knew for future reference that the start page needed to be called "index.html" or it wouldn't work. yeeessss

An infinite source...

... of invaluable information: www.w3schools.com

Changing colours

This is only a short thing but it's been sooooo unbelievably useful to me when I moved onto Dreamweaver...

I couldn't find out how to change the background colour using Dreamweaver buttons(cause I'm clever like that) so I went back to my notes on html and inserted it manually to the html script on the split screen view.

OK so to change the background colour you need to insert it here:

< html>
< head>
< title> title < /title>
< /head>
< body bgcolour="#000000"> <-here
< /body>

and that's how it should look in your html code (minus the 1st space after the opening < again as with the other codes) you can get a list of the colour codes needed from :w3schools.com

< body bgcolour="#FF0000"> <-I've just tried to change the colour of this post background but I can't find out what will happen 'til I've posted it so we'll see...

another important thing is the < title> website title< /title> section. This relates to the name of your website that you want to be see in the top bar or on the task bar at the bottom of your screen (Windows) e.g. this website is titles : Blogger: Web design in a box in front of your eyes. as it is hosted by blogger but it's my blog which I've named "Web design in a box in front of your eyes" get it? OK well you just need to change the words "website title" between the opening and closing html codes for the title... easy :) - must remember to do that on my website or it reads "untitled" - not very professional I think you'll agree.

that is the lesson on background colour and titles... ta raa

Reflection: I've just tried posting this with the background changing html working but I got this message: "Your HTML cannot be accepted: Tag is not allowed: < body bgcolour="#FF0000"> " so it seems it's been blocked in blogger, ah well you know the codes - go play.

I feel bad...

...that I haven't been using my blog through out web design but I've got written notes so I'll post them now...

HTML stands for Hyper Text Markup Language.

The first week we were using basic HTML in text edit (Apples version of Windows note pad) which seemed really confusing but there's an order to it which helps to remember when attempting it for the first time - always have opening and closing parts with a forward slash to close it e.g. < opening > and < / closing > without the spaces. Different abbreviations inside change the commands for what you want to be done to the text or space between the opening > and closing < / eg < b > makes the text bold and < u > makes the text underlined or < i > for italics or join them all up (< b >< i >< u > with closing html using the / before each letter) to get this

We can also

center the text

using the opening clause of < p align="center" > and the close of < / P > (minus the spaces again) these can be changed to left aligned or right aligned by swapping the word in the quotation marks to

"left"

or

"right"

Choosing fonts in html is similar to aligning paragraphs - < font face="Courier New" > for courier new text and close using < /font >. Obviously the font can be changed by writing in different font names e.g. Helvetica or Webdings <-that was meant to say Webdings :), play around and see what happens.

Always remember to put a closing html (e.g. < / i > or < / font> etc.) or all the text following that opening html will be in the style you've chosen.

Here endeth the lesson on font based basics...(I think?)

p.s. the previous post's from when I started poking Dreamweaver and getting confused beyond recognition. Nothing to worry about :)