Webdesign Completed.... Now What?

[Chez 0]

For starters, I always made webpages the old fashioned way. Notepad, paint, and a very basic-no thrills browser. So I never used pagemaker or any of those cheater programs some of you grew up with.
But recently, I've been reading over photoshop tutorials online and trying my hand at some... well... basic designs (I can only imagine what people make who've been on photoshop 7+ for more than two days can do). So I have my design... a nice big ol' 220k jpeg with all the image mapping already set up...

NOW HOW THE HELL DO PEOPLE GET TEXT ON THEIR PHOTOSHOP DESIGNS!?

I could just make a text box, but I'd rather just be able to put a table right over my design and place text where my design has placeholders for it. background image? no go. so somehow... people construct awesome designs in photoshop/illustrator and still manage to put HTML coding on top of it (and not have it placed as an image... no download possibility). I'm definately sounding like a newb, but I assure you, only in this wing of web design I am.

links:
mine- http://forums.xisto.com/no_longer_exists/
working on for customer- http://forums.xisto.com/no_longer_exists/

You can see where I saved place for text and various HTML goodies, but I can't figure a way, for the life of me, to get it to work.

[rejected 0]

Well, what you can do, amongst a couple of other things, is use a <div> tag.

<div id="networksites" style="position:absolute;left: 67px; top:200px;width:160px;height:130px;"></div>

The div tag defines a division/section on your website. You can either put an iFrame in there, or have the text already set for every page. You change the width, height, left, and top to fit your own needs.

Now, if you want your pages to change more quickly, you can use iFrames.

<iframe src="main.htm"  style="name="main" width="150px" height="130px" frameborder=0 ALLOWTRANSPARENCY="true" ></iframe>

main.htm is the webpage your iFrame loads when the other page is loaded. To change links inside of your iframe, just add

target="name of your div"

If you need any more help, feel free to ask..

[serverph 0]

nice predicament you have there, chez. photoshop is purely for graphic design purposes. to utilize a design for web use, designers "slice" a template design further. you can slice a graphic image into fragments as big or small as you want it. as slicing is done, designers then "save for web" (meaning the whole template is saved as html along with images).

 

you can then go to edit the html page, and discard the unnecessary images (like the placeholder sections you made), then input/customize your text in your layout the html way.

 

i've never used image-mapping for so long. and i've never been to a site using that other than yours until today. so i'd say, do away with the image-mapping for linking you have. you'll get the hang of it soon enough without them.

[Chez 0]

I've been fiddling with slicing it, as you call it. Know if there's a program that does it for you? I especially like using programs for image mapping (i guess I am out of date on designing ) so there should be something out there for slicing. I'll google it, but if you know of something offhand that works, that'd help.

[jlhaslip 4]

There are a couple of ideas in this thread: http://forums.xisto.com/topic/28292-need-some-help-with-my-template/ that might be of help.
Why doesn't it work as a background image and then place div's over top?

[serverph 0]

photoshop does the slicing best. there are ways to make it easier for you within photoshop/imageready.

1) turn on your horizontal and vertical rulers. from the rulers, you can drag out imaginary guides (which will not show up in your final output anyway).

2) turn on snap to > guides. this will ensure your slices do not overlap with each other and create a chaotic layout.

3) have a good picture in your mind where to make the slices. your template layout will determine you ought to slice. then slide out the guides, align them to the point where you want to cut each slice. you can have as many guides as you want.

4) do the slicing. the slices will be numbered and colored so you can easily track them. then just save for web.

 

you may have a better understanding of slicing a design here:

https://www.sitepoint.com/design-website-photoshop/

[serverph 0]

There are a couple of ideas in this thread: http://forums.xisto.com/topic/28292-need-some-help-with-my-template/ that might be of help.

Why doesn't it work as a background image and then place div's over top?

217351[/snapback]

it may work. only, background image will take time to download for slow connections. it will also eat up bandwidth more than necessary. and content will be limited by the designed placeholders, and text (especially long texts) cannot be readjustable to flow as needed. another thing is, users vary on text size used and they will not be in place as originally intended to be. there are workarounds, of course, but it will be extra effort.

[Plenoptic 0]

If you slice it and then Save for Web you then have a big table as your template. What you want to do is really slice it into areas you want to use and use as little slices as possible so there aren't too many images. After you Save for Web go to the slice you want to put content in and set that image as the background. So for this you would turn this

<td><img src="blah.gif" width="100" height="100"></td>

Into

<td background="blah.gif" width="100" height="100" valign="top">Put your text here</td>

That is how you can put text in there. The valign means verticle alignment which puts the text at the top of your content box. Normally it would be around the middle. My site loads fast and I have background images. You should try it. I recommend it

[Tyssen 0]

So I never used pagemaker or any of those cheater programs some of you grew up with.

 

Pagemaker was a print design application.

[Chez 0]

thanks guys. I've begun work on the client's webpage using the info you guys gave me. I just sliced the basic BG image using photoshop, altered the HTML code into bgimage from img src, and have begun work on the buttons, aux links, and secondary pages. I totally agree that having text-reserved areas designated by background design limits text and editing, so I'm revamping the internal pages into a more open design (aka, uninterrupted or restrainted by backgrounds).I'm also redoing my webpage because it feels... photoshoppy... for lack of a better word. My first attepts at the photoshop design of webpages, I feel, wasn't as big of a hack-job as I thought it would have turned out to be. Looking forward to learn more as time progresses.thanks again

[rvovk 0]

The best program for editing HTML, CCS, PHP, JS code is in my humble opinion TSW Webcoder. It can be found on website: http://www.tswwebcoder.com/. unfortunatelly new version isn't free anymore and thanx good I have firecopy of earlier version