Button and box labels.What is the best way?

Mulith · #1 Oct 16th, 2007, 09:53

I'm a newbie to programming website but I have been involved in design for a while. Wanted to ask you guys what is better:

Incorporating the button and box titles(e.g Search Box has the title "Quick Search") into the image of the box.

or adding the titles in while developing (e.g Dreamweaver).

I'm a little bit worried that I'll loose the effect by coding the text in and then placing it.

Although it not likely to be a important as far as SEO goes, I'm just a bit concerned with trying to complete the project following best practice.

Thanx

marSoul · #2 Oct 16th, 2007, 23:26

If i understand what u meant, you can put ur text in images and then add alt texts for them in coding part...

Mulith · #3 Oct 21st, 2007, 10:30

What i meant was this. I've designed my website in Photoshop and the images for the buttons have been saved with the buttons text as part of the image. e.g button that says "feedback".

What i'm trying to find out is whether it is better to save that image without the text on it and then insert the text onto the image using CSS or have it all as a single image.

Ideally I would like to have the text as part of the image so that i don't end up loosing the effects. If it doesnt really matter, thats ok, but i need to know if its going to effect the site in some negative way.

marSoul · #4 Oct 21st, 2007, 11:05

i think its better to put text and images together as one image file for better visual effects, and put complete alt text and image names in code.
but sometimes u may need to create dynamic buttons for ur site that needs to use texts on it.

Mulith · #5 Oct 21st, 2007, 11:12

Thanx. Another thing that has been bothering me is whether I can use layers for most of my layout. Is there such a thing as using too many layers and does it effect the speed that your pages load at.

marSoul · #6 Oct 21st, 2007, 11:27

can i see ur site ?

Mulith · #7 Oct 21st, 2007, 11:50

Do you mean the code or the design image. If its the code then its pretty pointless because I've just started.

Nortus · #8 Oct 21st, 2007, 11:51

As far as I know, layers in Dreamweaver are DIV tags with absolute positioning.
Like marSoul, I think it would be best to put a link to the site so we can have a goose at it.

Dreamweaver doesn't consider the designer when inserting these layers so if you add quite a few without watching what is happening with the source code you can quickly end up with confusing and unreadable code. Because of this you may find cross browser problems etc, that are very hard to solve because the code is cluttered.

As for the buttons, I agree with marSoul.
Take into account how often the buttons may need to be edited. If they are going to stay the same once inserted use images, if they might need editing often its best to have editable text - simply for your own benefit regarding time management.

Edit -
You posted while I was posting. Ignore my second sentence.

marSoul · #9 Oct 21st, 2007, 11:54

ok, then describe more on what u want to do

Mulith · #10 Oct 21st, 2007, 12:02

I have a Navigation bar at the top with about eight buttons, about 4 boxes on the page(Quick Search, Featured listings, Feedback etc.), a browse menu in the main section and below that links to content pages. Some of the layout can be done with a table for alignment but because I'm new to this web development stuff I'm a little unsure of adding every single image on the page as a layer. The fact that my ability to code is not fantastic doesn't help either. Maybe I should just do it all as layers and if it becomes a problem then jump that hurdle when i get there.

Marc · #11 Oct 21st, 2007, 12:05

Have you got a hosted example of your website? Sometimes it is easier to help if you have a visual rather than text.

Lchad · #12 Oct 21st, 2007, 12:13

All good questions...
Tables are a not a good design choice. Layers in dreamweaver are a nightmare to work with as Nortus mentioned they position themselves absolutely. It is so difficult to get everything exact, and it's just a poor way of making a site. You are going to be pulling your hair out trying to get everything aligned. Especially from one browser to the next.

The best way to design (and I know you don't want to hear this) is by using Dreamweaver's code view ONLY. Learning xhtml and then making it beautiful with css. Since you are just starting out, take it step by step and put ONE element in at a time with xhtml/css. Before you know it, you'll have your site complete, have learned a ton and have a really well designed site.

The beginner's forums has so many useful posts in the sticky area that really would help make learning it easier.

Be sure to design this site for Firefox first and then you will be able to make small adjustments for IE.

marSoul · #13 Oct 21st, 2007, 12:22

as Lchad says try to avoid tables, and use css instead ...
if you cant code the css, you can use photoshop slices to convert them to css for you

Mulith · #14 Oct 21st, 2007, 12:32

This should give you an idea of what i want it to look like.

marSoul · #15 Oct 21st, 2007, 12:45

please attach the file

Mulith · #16 Oct 21st, 2007, 12:50

here we go

marSoul · #17 Oct 21st, 2007, 12:59

we can simply separate this to 5 parts, header, left container, center container, right container and footer
you can create 5 DIV for each of them and put ur content in them.
then using css and create styles for each of them.

Mulith · #18 Nov 5th, 2007, 10:26

I'll give that a try, Thanx

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Button and box labels.What is the best way?