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?
Saturday, 2 June 2007
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.
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.
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).
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!
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
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
Subscribe to:
Posts (Atom)
