HTML, Flash or Photoshop?

[wisemonkeyuk]

Hi everyone. I'm reasonably new to web design and although I do have a basic/intermediate level of experience with HTML, I'm not sure which program I should use to create my site. I already have a site that I have made with Frontpage, but it all just seems a bit too basic in terms of links, layout, interface ect....

I've recently started learning Photoshop and Flash in order to widen the possibilities of what I can do, but as yet, my knowledge of both is extremley basic. However, I've taken some time out on making my site and have been designing a new site using the old-age method of hand-drawing it on paper. I now have my final design drawn up and ready to create but I dont know which program will be best to create it with.

My main layout features a menu at the top of the page which I am hoping to create with Photoshop. However, within Photoshop I cannot seem to work out how to place a clickable link on the menu. I could save the menu as a jpeg, import as an image and place manual links over the top but Im not sure if this will cause the links to move about depending on which browser/resolution the site is viewed on.

If anyone could help me out on this one a bit that'd be great. I wouldn't mind placing manual links over the menu jpeg, but if anyone knows a way of placing links using photoshop and getting them clickable that'd be even better

Thanks in advance

[Kravvitz]

Learn CSS[1] and code by hand. Any program, like ImageReady or FrontPage, that outputs an entire page worth of code will create badly written code.

Feel free to create images in PhotoShop, but be sure to optimize them and then write the X/HTML, CSS, or JavaScript that incorporates them into your page by hand.

I suggest you learn how semantics apply to X/HTML.

[1] CSS Links for Beginners:
Adding a touch of style
http://www.cssbasics.com/
http://www.htmldog.com/guides/cssbeginner/
Integrated Web Design: CSS Beyond the Retrofit
BrainJar.com: Using Style Sheets
www.glish.com/css/
www.thenoodleincident.com/tutorials/css/
http://kurafire.net/log/archive/2005...-css-revisited
Internet Explorer & CSS issues
Learning CSS
CSS2 Specification

[wisemonkeyuk]

Thanks for the reply Kravvitz. However, learning codes isn't what I'm after right now.

All Im after for now is a way to add clickable links in Photoshop. I've created a basic header with a basic built-in menu menu. Well, I say 'menu', but all I have at the moment is a few basic text layers which need to be clickable. If I was to optomize the image like you said, the links would not be clickable. I know a PS image can be sliced and then I could code the slices, but Im also after a way to change the colour of the text on rollover.

Here's a link to the header/menu that Ive quickly come up with in PS. Its not much at the minute because before I create it properly, I would like to know how to make them links without slicing....hope this all makes sense?

Thanks for the CSS links btw. I'll have a read through those soon

[Kravvitz]

Why do you want those links to be images instead of text? With CSS you could position them over the header image. Doing that would also make it easier to make the links change color when rolled-over.

However, learning codes isn't what I'm after right now.

Then why are you asking questions here? Is that in response to my suggestion that you learn about semantics? If so then, HTML 4.01 and XHTML 1.0 are semantically the same -- hence the X/HTML. I'm not suggesting that you learn XHTML. The issue of semantics is important. Think of it as a step towards writing better HTML.

If I was to optomize the image like you said, the links would not be clickable.

What does one have to do with the other?

[wisemonkeyuk]

It isnt that I want the links to be images. I just posted up a jpeg of the whole thing so you can kinda get the idea of what it is that Im trying to do

If it is indeed possible to position links over the top of the header, then i'll do it that way. I just wasn't too sure if the links would show up in different places on different browsers and screen resolutions....?

Thanks for your help...do you know of any direct links that will show me how to place a link over an image using CSS? I know I could go and look myself, but you seem to know your stuff and you'll probably know of better places than I do

thanks again

[Kravvitz]

You're welcome

The links won't show up in different places with different browser widths if you set fixed widths on a containing element.

These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

You'll also need to learn about CSS Layout/Positioning Techniques

I'm not saying what I'm suggesting is easy, but it is the best way to do things. When you encounter problems there are many people in the HTML and CSS forums here who can help you.