Hi

 

I am looking to build my own website from scratch, ideally one that isnt too basic, and would like to learn how to use the software in Adobe CS4 which I purchased.

 

I have designed my website layout/look in Illustrator and now need to bring it to life. I have been reading various books on Dreamweaver and watching tutorials on Adobe and YouTube but the question I have now is which topic(s) of tutorial(s) I should watch to do the following:

 

The home page will look like one big illustration and within that artwork I want to have links on specific elements of varying shape and position throughout the page. I am assuming I cannot do this with standard tables, and the tutorials Ive seen re slicing up a design do not seem appropriate as this appears to provide rectangular elements for links rather than around a specific shape. Am I trying to create Hotspots? Do I need to use CSS? Can I avoid using Flash as currently im trying to stick to Illustrator/PS and Dreamweaver?

 

Apologies if this doesnt make a great deal of sense re the terminology etc and if I seem very mixed up but as I said Im new to this and just want a point in the right direction re subject matter to learn further as everything I have watched to date does not seem relevant my aims.

 

Thanks in advance if anyone can help

 

 

PS Ideally I also want the central shape of my design to reveal what the site is about when you roll over it. So essentially a white shape with black copy over the top once you roll over that particular element of the page.

So many people seem to design a page in a graphics program and then slice it up into hundreds of images which are then coded in tables. That's not the modern way and is difficult to edit later.

 

If you have one large image, then place that as a background-image on the body element:-

body { background: url(image.jpg) fixed top center no-repeat; }

 

and then decide how to create your links. You could use links in divs which are placed over the background, so you see the link text over the background,

 

OR

 

use "hot spots" created with an image map where the background-image for the body isn't required as you put the image in the image map code:-

http://www.wickham43.net/imagemaps.php

Thank you very much. You are right as I have found loads of posts about slicing and so this is useful advice if I should avoid learning this bad habit. Your method seems more straight forward and I will look into that. Am I correct in assuming that the first option of dvis would mean that the link areas are rectangular and if I want the link area to be the same shape as the image element it is covering then I should use the hot spot approach?

 

Also what do you suggest re my last point in terms of having a central shape that reveals some 'about us' copy if the user rolls over it?

 

If I choose to add a banner or two on top of the background image at a later date, what approach do I follow for this? Is this an AP DIV or am I totally wrong?

 

Thanks you again, I appreciate your time

 

edit- PS Ive just read your image map tutorial and its great, thanks

Yes, using a div with a link will be rectangular and it will normally show link text where the link is.

 

If you use an image map you can create an odd shape with the polygon coordinates. However, an image map doesn't (usually) show where the hot spot is, you have to move a mouse over some object in the picture where a hot spot is and see the hand pointer, so it could be difficult for people who don't or can't use a mouse.

 

Also what do you suggest re my last point in terms of having a central shape that reveals some 'about us' copy if the user rolls over it?

 

That sounds as if it could be a hover popup (pure CSS) or a tooltip or a popup coded with jQuery (javascript).

Hover popups examples here:-

http://www.wickham43.net/hoverpopups.php

Tooltips http://flowplayer.org/tools/tooltip.html

thanks again, very helpful.

 

I found

which seems to give me what I am after re rollover hot spots so that is good news.

 

Funnily enough I am even struggling with the first step you mentioned above i.e. loading up the background image because when I went to 'save for web' the file size in Illustrator is 160k even optimised as a jpeg and I hear a page should be less than 100k as a rule of thumb. Ive also been told not to exceed 25k because of iphone restrictions.

 

I thought my image was very basic but obviously not. I tried flattening the artwork to reduce the size but that seems to keep the layers and didnt reduce the size at all. Ive now spent most of today trying to find a way of making the file much much smaller because once ive then added some banners or duplicated some similar images for the rollovers the page size will get even bigger.

 

Anyway thanks for your advice. I will read through what you have sent me.

Depending on how much you already know about Dreamweaver then trying to do a site from scratch in it will be overwhelming if you don't follow tutorials first. I have recently done my business website from scratch entirely using a Flash based Web Designer that was far better than I could have wished for. The Designer I used is Wix.com.

 

It even now supports e-commerce and is well worth a look as the service is completely free to design your site and you only start paying per month when you want to go live with your site.

 

Take a look at the demo sites on there and also my own website to see what can be achieved in a very short space of time.

 

Mark

 

www.gizmobling.com