Simple question...

Red and White · 26 Nov 2007 at 23:06

ive been playing around with photoshop for making websites.

that bit is fine, what im struggling with is adding text etc in dreamweaver. ive sliced it up using photoshop but when you edit the page in dreamweaver its of course made up of a load of image files. so how can you add text over them without disrupting the layout?

SiriusB · 26 Nov 2007 at 23:25

Step 1: Don't use Dreamweaver

Step 2: Add the images and create the layout using CSS

Not actually sure what the problem is to be honest... why can't you add text?

Hamish · 26 Nov 2007 at 23:26

set the images as background and write the text normally will put it over the top... Why do you need to slice the images up anyway... Hop you're not using

tables!!...

Red and White · 26 Nov 2007 at 23:33

SiriusB said:
Step 1: Don't use Dreamweaver

Step 2: Add the images and create the layout using CSS

Not actually sure what the problem is to be honest... why can't you add text?

well at the minute im adding text using photoshop which makes it part of the image, but after looking around the web at sites made with photoshop they clearly arent doing this. they are adding text over images created in photoshop. this of course makes it easier to make changes

my whole approach might be wrong.

i havent clue at all about css, so dreamweaver is really the only option for me at this moment.

Red and White · 26 Nov 2007 at 23:33

Hamish said:
set the images as background and write the text normally will put it over the top... Why do you need to slice the images up anyway... Hop you're not using tables!!...

no im not using tables, well im not using anything at the minute.

the back ground idea is something ive tried before but presumed i was doing it wrong. how i can i position text where i want it?

Hamish · 26 Nov 2007 at 23:37

I would make a div, set the image as the background then use position: relative to set where the text goes, see position thing here:
http://www.devguru.com/Technologies/css/quickref/css_index.html

Red and White · 26 Nov 2007 at 23:41

Hamish said:
I would make a div, set the image as the background then use position: relative to set where the text goes, see position thing here:
http://www.devguru.com/Technologies/css/quickref/css_index.html

thats gone straight over my head, im looking at the link but i just dont get css.

if i set the image as the background i cant even position it in the middle. does dreamweaver even allow text boxes so you can position your text?

SiriusB · 26 Nov 2007 at 23:54

With CSS you can tell the browser how to display the image such as top, left, right, bottom and also whether to repeat it vertically, horizontally, both or not at all.

To be honest though it does appear you don't know much about creating webpages so Hamish's link is pretty useless to you

My advice would be to learn XHTML and CSS. XHTML is very easy to learn and so is CSS. However CSS is very hard to master. Having said that even with basic CSS knowledge you can create a great website.

Try www.w3schools.com as they have lots of tutorials. You should start with XHTML then go on to CSS.

Red and White · 26 Nov 2007 at 23:57

SiriusB said:
With CSS you can tell the browser how to display the image such as top, left, right, bottom and also whether to repeat it vertically, horizontally, both or not at all.

To be honest though it does appear you don't know much about creating webpages so Hamish's link is pretty useless to you

My advice would be to learn XHTML and CSS. XHTML is very easy to learn and so is CSS. However CSS is very hard to master. Having said that even with basic CSS knowledge you can create a great website.

Try www.w3schools.com as they have lots of tutorials. You should start with XHTML then go on to CSS.

its just so long since i did anything with dreamweaver. ive made a fair few decent websites in the past but never incoporated so many images.

ive managed to posistion the backgorund image in the centre (using css yay) but now its cutting off the top and bottom of the picture. also ive remembered how to posistion text

edit:

ok im passed the cutting off the top problem. its all coming back to me

this is great.

i will look into css as i feel im falling behind the times

Hamish · 26 Nov 2007 at 23:59

If you want the image as the background to your whole page set put

body {
background: url("images/aardvark.gif");
background-position: top center;
}

or whatever, if you want the image somewhere else make a div (use the <div> tag) which is like a container to put things in. You can then position the div anywhere you like on the page and likewise the text within it. You can use the same background tags as above to set the div's background.

Edit sorry, just read stuff above, probably won't be much help

. My advice - dump dreamweaver, learn to do it properly, it's dead easy to pick up!

Red and White · 27 Nov 2007 at 00:03

Hamish said:
If you want the image as the background to your whole page set put

body {
background: url("images/aardvark.gif");
background-position: top center;
}

or whatever, if you want the image somewhere else make a div (use the <div> tag) which is like a container to put things in. You can then position the div anywhere you like on the page and likewise the text within it. You can use the same background tags as above to set the div's background.

Edit sorry, just read stuff above, probably won't be much help . My advice - dump dreamweaver, learn to do it properly, it's dead easy to pick up!

cheers that makes more sense now.

i cant dump dreamweaver, shes my friend. writing the whole thing in code cant be any fun

SiriusB · 27 Nov 2007 at 01:38

You will be surprised.

True XHTML can be a bit dull, especially if you have a lot of content to mark up. But once you are done and you know its all lovingly crafted by hand to the latest XHTML standards you will feel so proud. Then you move onto the CSS. Which with just a few lines of code can produce some really nice results. And again, after spending time and effort sculpting your web site you can sit back and bask in its reflected glory!

You do not need Dreamweaver for any of this.

Red and White · 27 Nov 2007 at 09:04

ok so i have my background image. top centre where i want it but now its all very confusing as my text appears out of position as to what i see in dreamweaver.

?

Red and White · 27 Nov 2007 at 10:20

managed to position it by changing the code. its a right faff on though. its problem after problem until you start learning the code mind. line spacing sorted now though 8-)

Reasteh · 27 Nov 2007 at 10:24

i use to do it the same way as you blackandwhite with photoshop, text in the images etc. But then i learnt CSS and it owns

code ends up nice and tidy. Recently converted my site from all HTML all over the shop to css and im rather pleased with it, gona use css more often.

LazyManc · 27 Nov 2007 at 13:11

Red and White said:
ok so i have my background image. top centre where i want it but now its all very confusing as my text appears out of position as to what i see in dreamweaver.

?

This is why dreamweaver design view is pointless - it often bears no resemblance to what you'll see in actual browsers. And hence why its stupidly overpriced when compared with other web IDEs (i.e. eclipse - it's free!). Just use the dw code view if you have to with FF & IE for previewing.

If you're starting with an image in photoshop and slicing it up into a grid, then you're going about the whole thing the wrong way. Images should be used sparingly and only where the same effect can't be reproduced with CSS (i.e. logos, pictures, rounded corners, gradients, shadows, icons, etc - not for blocks of colour or text).

By all means, do a prototype of your design in an image package first, but the next step should be to rough out the content structure in html, and rough positioning of page elements with CSS. Only then would I start to worry about background images etc. This also has the bonus of providing graceful degredation to your website - if someone turns off images in their browser they should still get a fairly close approximation of what the full site looks like, only without the visual bells and whistles.

SiriusB · 27 Nov 2007 at 15:52

Listen to the Manc. We know what we are on about!

It really is a very important point he is making, using images for every part of the website is really bad practice for a number of reasons.

The most obvious being what happens if someone has images turned off? Some not-so-obvious ones are file size and accessability. Every single image has to be downloaded by the browser before your page is displayed. If your whole site is images then its a fair bet it will take a while to load. No imagine you had different themes/colours for different parts of your site... you would end up annoying most of your visitors. Accessability is an issue because if most or all your text is image-based screen readers can't read it. The text can't be made larger either.

As Lazy says you really should think about getting the content [XHTML] complete and then create a rough layout using CSS. Nothing fancy, just use approximate colours and fonts while you get the layout right. Then you can move on to adding the bells and whistles.

Red and White · 27 Nov 2007 at 15:55

but coding is so boring. i already realised that doing it with purely pictures was wrong hence the reason for this thread in the first place.

its a lot of work this website malarky.

RandomTom · 27 Nov 2007 at 16:22

It's not coding, it's just mark up. I was in the same position as you about 2 years ago, I could make sigs top notch and then did graphics for websites, and then got into making them and tbh using:

www.htmldog.com - beginner tutorials

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ - 2 columns

and posting on here helped me loads, and although my designs were a bit useless now i can produce some good stuff, but none of which is online at the moment. I see you've got talent, as in the last 3 weeks you've gone from very mediocre to some good stuff.

CSS, once you get your head round (which doesn't take longer than a couple of hours of web layouting) then you'll be loving it.

That's got some graphical elements to it, and seriously only took me between 1-2hours to get it all like that, you'll love it.

SiriusB · 27 Nov 2007 at 16:24

If you want a quality, standards complient and easy to maintain website you will have to do some coding.

XHTML and CSS aren't difficult to get to grips with and to be fair it doesn't take long to get a rough layout.

Most of the work will be in choosing colours and fonts and other design stuff. So it's not all hard work.