Q: Site building with CS3

wrote:

Hi. I’m taking my very first shot at site building using Photoshop CS3, and finding it quite easy and useful in getting the exact look I want. There’s just one remaining task….getting the background layer (just a plain solid color) to have a variable width for anyone using a screen res wider than 1024. Currently, if I look at the page on a larger screen, the color stops at 1024 and the space to the right is just plain white. I want that color layer to fill the browser window, no matter how wide.

Do I need to somehow convert that layer to "CSS" (which I know nothing about) to get that variable width? Is CS3 capable of getting this result? [I’m not going to buy additional software for this, since I’m not looking for a career in web design…I’m just building 2 sites for myself and that’s the end of it.]

Many thanks!

Rudy

I wouldn’t use Photoshop to build a website.
It’s like using your microwave to dry your washing.
Sure, it can probably do it, but that’s not what it was designed for, and as such, it will never do the job satisfactorily.
It’s just not the right tool for the job.
If you must use a softwae application to build a website, Adobe have a package called Dreamweaver in their product range. This is a dedicated website design tool, and you’ll find it gives far superior results and is easier to use, simply because it is the right tool for the job. If you really want the best results, you should take the time to learn HTML and code your website manually using a text editor like Notepad. HTML is really easy to learn. It’s probably the simplest computer language that exists, and once you get the hang of it, you’ll wonder why you ever needed a wysiwyg editor.
Do a quick google search and you should find hundreds of online HTML tutorials to get you started.

On Feb 19, 12:19 pm, "\(not quite so\) Fat Sam" wrote:

I wouldn’t use Photoshop to build a website.

Maybe you wouldn’t, maybe most people wouldn’t, but I am. As I stated in my original post, I’m not about to shell out $400 for software that I’ll never need again once this project is finished. The site is 95% done with CS3, and it looks beautiful. I just need to sort out this last detail.

Rudy

wrote:

On Feb 19, 12:19 pm, "\(not quite so\) Fat Sam" wrote:

I wouldn’t use Photoshop to build a website.

Maybe you wouldn’t, maybe most people wouldn’t, but I am. As I stated in my original post, I’m not about to shell out $400 for software that I’ll never need again once this project is finished. The site is 95% done with CS3, and it looks beautiful. I just need to sort out this last detail.

Oh please don’t misunderstand me Rudy.
I wasn’t criticising you or your methods.
Just trying to help you by suggesting there might be an easier solution. You don’t have to pay out $400 for a copy of dreamweaver. There are plenty of free wysiwyg HTML editors out there that will still do a better job than photoshop, which isn’t primarily an HTML editing programme.

On Feb 19, 3:50 pm, "\(not quite so\) Fat Sam" wrote:

There are plenty
of free wysiwyg HTML editors out there that will still do a better job than photoshop, which isn’t primarily an HTML editing programme.

Thanks for the suggestion, but the site is 95% done, and I really don’t have the time nor the desire to start over with a new program. If CS3 can’t give me a variable width layer, then I’ll post the site "as is" and the people browsing above 1024 can just suffer. It will still look good to most users.

Thanks!

Rudy

wrote in message

On Feb 19, 3:50 pm, "\(not quite so\) Fat Sam" wrote:

There are plenty
of free wysiwyg HTML editors out there that will still do a better job than
photoshop, which isn’t primarily an HTML editing programme.

Thanks for the suggestion, but the site is 95% done, and I really don’t have the time nor the desire to start over with a new program. If CS3 can’t give me a variable width layer, then I’ll post the site "as is" and the people browsing above 1024 can just suffer. It will still look good to most users.

Thanks!

Rudy

not sure how it outputs pages
there may already be a css doc in there
or you can try >go to the index html in notepad
someplace in there should specify size of page
it needs to be 100% instead of a fixed size
I THINK
(not my area of expertise here)
and why I hate making webpages
modern designers all use php

KatWoman wrote:

wrote in message

On Feb 19, 3:50 pm, "\(not quite so\) Fat Sam" wrote:

There are plenty
of free wysiwyg HTML editors out there that will still do a better job than
photoshop, which isn’t primarily an HTML editing programme.

Thanks for the suggestion, but the site is 95% done, and I really don’t have the time nor the desire to start over with a new program. If CS3 can’t give me a variable width layer, then I’ll post the site "as is" and the people browsing above 1024 can just suffer. It will still look good to most users.

Thanks!

Rudy

not sure how it outputs pages
there may already be a css doc in there
or you can try >go to the index html in notepad
someplace in there should specify size of page
it needs to be 100% instead of a fixed size
I THINK
(not my area of expertise here)
and why I hate making webpages
modern designers all use php

using PS you can set up what you want on the page – text navigation text etc on top of an image this is then sliced and saves as HTML (Save for web.)

Take it into a HTML editor and allocate the sliced bits etc.

The PS image will sit in the centre (has to be centred) of the page.

Then you add a background colour this in your HTML editor.

This will fill the screen what ever size.

KatWoman wrote:

wrote in message

On Feb 19, 3:50 pm, "\(not quite so\) Fat Sam" wrote:

There are plenty
of free wysiwyg HTML editors out there that will still do a better job than
photoshop, which isn’t primarily an HTML editing programme.

Thanks for the suggestion, but the site is 95% done, and I really don’t have the time nor the desire to start over with a new program. If CS3 can’t give me a variable width layer, then I’ll post the site "as is" and the people browsing above 1024 can just suffer. It will still look good to most users.

Thanks!

Rudy

not sure how it outputs pages
there may already be a css doc in there
or you can try >go to the index html in notepad
someplace in there should specify size of page
it needs to be 100% instead of a fixed size
I THINK
(not my area of expertise here)
and why I hate making webpages
modern designers all use php

PHP, like ASP is just a scripting language which gives a dynamic element to your webpage.
Your browser still requires a markup language (HTML) to display the elements of the website to you, and that’s exactly what PHP and ASP serves up to your browser.
Sites are still coded with HTML nowadays, with only those elements that need dynamic content coded in PHP or ASP.

Having said that, you’re absolutely right about the page width needing to be specified in percentages rather than pixels. That will solve Rudy’s problem for him.

Rudy, if you post the HTML code from one of your pages, I’ll be able to tell you which tag needs to be altered in order to fix the problem.

"(not quite so) Fat Sam" wrote in
message

KatWoman wrote:

wrote in message

On Feb 19, 3:50 pm, "\(not quite so\) Fat Sam" wrote:

There are plenty
of free wysiwyg HTML editors out there that will still do a better job than
photoshop, which isn’t primarily an HTML editing programme.

Thanks for the suggestion, but the site is 95% done, and I really don’t have the time nor the desire to start over with a new program. If CS3 can’t give me a variable width layer, then I’ll post the site "as is" and the people browsing above 1024 can just suffer. It will still look good to most users.

Thanks!

Rudy

not sure how it outputs pages
there may already be a css doc in there
or you can try >go to the index html in notepad
someplace in there should specify size of page
it needs to be 100% instead of a fixed size
I THINK
(not my area of expertise here)
and why I hate making webpages
modern designers all use php

PHP, like ASP is just a scripting language which gives a dynamic element to your webpage.
Your browser still requires a markup language (HTML) to display the elements of the website to you, and that’s exactly what PHP and ASP serves up to your browser.
Sites are still coded with HTML nowadays, with only those elements that need dynamic content coded in PHP or ASP.

Having said that, you’re absolutely right about the page width needing to be specified in percentages rather than pixels. That will solve Rudy’s problem for him.

Rudy, if you post the HTML code from one of your pages, I’ll be able to tell you which tag needs to be altered in order to fix the problem.

Thanks Sam
see I had the general idea of how but short on specifics so much to know just can’t spend time on learning on more web design language
I was in fear of php but you make me feel better to understand it’s still html

On Feb 20, 5:11 am, "\(not quite so\) Fat Sam" wrote:

Rudy, if you post the HTML code from one of your pages, I’ll be able to tell you which tag needs to be altered in order to fix the problem.

I’ll give it a try…I’m not sure if this is what you want, but after I "saved for web & devices" and then opened the page in my browser, I went to "page source" and found this:

<html>
<head>
<title>2007 page 2 layer copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<!– ImageReady Slices (2007 page 2 layer copy.tif) –> <img src="images/2007-page-2-layer-copy.gif" width="1024" height="1502" alt="">
<!– End ImageReady Slices –>
</body>
</html>

If that is not what you need, please tell me how to get there and I’ll send whatever I can find. Thanks for your help,
and thanks to everyone else for your suggestions as well!

Rudy

wrote:

On Feb 20, 5:11 am, "\(not quite so\) Fat Sam" wrote:

Rudy, if you post the HTML code from one of your pages, I’ll be able to tell you which tag needs to be altered in order to fix the problem.

I’ll give it a try…I’m not sure if this is what you want, but after I "saved for web & devices" and then opened the page in my browser, I went to "page source" and found this:

<html>
<head>
<title>2007 page 2 layer copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<!– ImageReady Slices (2007 page 2 layer copy.tif) –> <img src="images/2007-page-2-layer-copy.gif" width="1024" height="1502" alt="">
<!– End ImageReady Slices –>
</body>
</html>

If that is not what you need, please tell me how to get there and I’ll send whatever I can find. Thanks for your help,
and thanks to everyone else for your suggestions as well!
Rudy

Aaah.
I see the problem now.
Your page consists of one large image file.
It’s not been constructed using markup code.
Making a website from a single image file has lots of drawbacks. It’s slow to load, awkward to update, search engines can’t see it, it will never scale correctly among hundreds of others. That last one appears to be the problem you’ve just encountered.
Can I just ask how big the file "2007-page-2-layer-copy.gif" is in kilobytes?

This is exactly why I suggested using a wysiwyg html editor. Even if it’s only a free one that you download from a freeware site. It will still produce proper markup code, free from all the above mentioned problems.

Your problem lies in this line
<img src="images/2007-page-2-layer-copy.gif" width="1024" height="1502"
alt="">

See, you’ve specified a fixed width of 1024 pixels and a fixed height of 1502 pixels.
That means the image will display at this size nomatter what resolution the users monitor is set to.
For some people, this will result in an image that’s too small for their screen.
Some will get an image that’s too big, and they’ll have to keep scrolling their screen from side to side in order to read everything. And a very small percentage of your visitors will find the image fits their screen nicely – but I do mean a VERY small percentage.

You could replace width="1024" height="1502" with width="100%" height="100%"
That way the image will re-scale itself to fit all screen sizes, but you will get a lot of distortion and some pixelisation on more or less everyone’s browser who views it.

But really, the only way to fix these problems is to re-build your site with proper HTML. Whether you do that with raw coding, or with a freeware website editing programme, it doesn’t matter.
But one things for sure, if you keep the site in the form you currently have it, you’ll be forever haunted with problems.
This is the sort of thing that happens when you try to force the wrong tool to do a job it was never designed to do.

I know you don’t want to rebuild the site, and I appreciate that. Like most of us, you have more important things to be doing with your time than building and rebuilding a website.
But I’m afraid if you want to resolve the problems you’ve described here, that’s the only way you’re going to be able to do it.
Sorry I couldn’t offer you a more helpfull or easier solution.

Regards,
Sam.

Can I just ask how big the file "2007-page-2-layer-copy.gif" is in kilobytes?

1.2 MB (that seems awfully large for a 72 DPI file….hmmmm).

This is exactly why I suggested using a wysiwyg html editor. Even if it’s only a free one that you download from a freeware site. It will still produce proper markup code, free from all the above mentioned problems.

Do you have any suggestions for one that works particularly well? FYI, I’m working on a Mac Pro.

You could replace width="1024" height="1502" with width="100%" height="100%"

Even to do that, I’ll need some kind of html editor, right?

Thanks for the info!

Rudy

wrote:

Can I just ask how big the file "2007-page-2-layer-copy.gif" is in kilobytes?

1.2 MB (that seems awfully large for a 72 DPI file….hmmmm).

This is exactly why I suggested using a wysiwyg html editor. Even if it’s only a free one that you download from a freeware site. It will still produce proper markup code, free from all the above mentioned problems.

Do you have any suggestions for one that works particularly well? FYI, I’m working on a Mac Pro.

You could replace width="1024" height="1502" with width="100%" height="100%"

Even to do that, I’ll need some kind of html editor, right?
Thanks for the info!

I thought NotePad was the ultimate HTML editor.

—
dvus

"dvus" wrote in message

wrote:

Can I just ask how big the file "2007-page-2-layer-copy.gif" is in kilobytes?

1.2 MB (that seems awfully large for a 72 DPI file….hmmmm).

This is exactly why I suggested using a wysiwyg html editor. Even if it’s only a free one that you download from a freeware site. It will still produce proper markup code, free from all the above mentioned problems.

Do you have any suggestions for one that works particularly well? FYI, I’m working on a Mac Pro.

You could replace width="1024" height="1502" with width="100%" height="100%"

Even to do that, I’ll need some kind of html editor, right?
Thanks for the info!

I thought NotePad was the ultimate HTML editor.

—
dvus

Can you slice up that one big image?? and re-export it?

In past I used Front Page but it is MS (and discontinued) so not sure about Mac
I have Dreamweaver and cannot figure it out at all
I made some slide shows in PS Image Ready and exported to MM FLASH format that seemed to work OK for putting up a lot of images on one page

no building pages anymore

I use this www.thebigpicturelibrary.com it’s free to register and use (I met them on here when they asked us to help test the site)
to get some advanced options it’s like $30.00 a year (cheap) one drawback of Flash pages if the comp hasn’t got the program the user cannot see it
this happened to me on public comps like in hotels that don’t allow install of the player
But you can now embed the flash page into an html page if you like

you upload your pictures and it makes them into a flash show to get around lack of ability to add text
I made a couple images that have info and text as one of my slides

I use my domain forward to point to the page

I heard if you have a Mac you get a web building feature as part of the package??
my model friend made a really nice page from it

wrote:

On Feb 20, 5:11 am, "\(not quite so\) Fat Sam" wrote:

Rudy, if you post the HTML code from one of your pages, I’ll be able to tell you which tag needs to be altered in order to fix the problem.

I’ll give it a try…I’m not sure if this is what you want, but after I "saved for web & devices" and then opened the page in my browser, I went to "page source" and found this:

<html>
<head>
<title>2007 page 2 layer copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">

As others have already mentioned this is wrong on so many levels. Now, assuming it makes yourself happy and you don’t really care elsewise. Just set the bgcolor="#FFFFFF" to the color that you want. FFFFF is white.

Jeff

<!– ImageReady Slices (2007 page 2 layer copy.tif) –> <img src="images/2007-page-2-layer-copy.gif" width="1024" height="1502" alt="">
<!– End ImageReady Slices –>
</body>
</html>

If that is not what you need, please tell me how to get there and I’ll send whatever I can find. Thanks for your help,
and thanks to everyone else for your suggestions as well!
Rudy

Kat wrote:

Can you slice up that one big image?? and re-export it?

That was actually just the background layers that I posted, not the whole page.
Here’s what I have so far:

This has been edited as a TIFF file and everything is saved in layers….text, banners, images, background…every item has a separate layer. It is already sliced…that is how I turned selected images and icons into links. Once I save that layered image, I go to "Save for Web & Devices" and export it all as *HTML and Images* so it can be viewed in a web browser.

If you’d like to see the whole page as html, I’ll repost it.

I guess my main question now is….having already done so much work, is there a html program that will allow me to import the Photoshop work I have and convert it to the desired state without having to rebuild everything from scratch?

Thanks for your help.

Rudy

Hi,
I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML. As for your background, I had the same challenge. You can accomplish the flexible size of the background color in your HTML code. In Dreamweaver with the template or page open that you want to have a background on, go to the "Modify" pulldown menu, then select "Page Properties". Look for "Background Color" on the first menu and select the color you want for your background. If you want to use a background image, then you’ll have to browse for your image and select "repeat" to make it repeat to the full width of any browser. If you’re searching directly in the code, look for bgcolor="#000000" with the number being the hex color you want. Hope that helps.

On Feb 19, 11:06 am, wrote:

Hi. I’m taking my very first shot at site building using Photoshop CS3, and finding it quite easy and useful in getting the exact look I want. There’s just one remaining task….getting the background layer (just a plain solid color) to have a variable width for anyone using a screen res wider than 1024. Currently, if I look at the page on a larger screen, the color stops at 1024 and the space to the right is just plain white. I want that color layer to fill the browser window, no matter how wide.

Do I need to somehow convert that layer to "CSS" (which I know nothing about) to get that variable width? Is CS3 capable of getting this result? [I’m not going to buy additional software for this, since I’m not looking for a career in web design…I’m just building 2 sites for myself and that’s the end of it.]

Many thanks!

Rudy

jburt wrote:

I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML.

Hi.

What does Fireworks do? Is it essential, or can I go right from PShop into Dweaver?

From what I’ve read, it’s not just my background but my whole page that needs to be processed in DW so it all loads correctly on the web. I don’t have the money to buy Fireworks and/or DW. I do have a friend that has DW. She works on a PC, and I’m on a Mac. Once I finish this site in Pshop to my satisfaction, can I give her the files to process in DW?
Would I give her the pages as layered TIFFs, or take them to "Save for Web & Devices" first and give her those files? Thanks for your help!

Rudy

wrote:

jburt wrote:

I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML.

Hi.

What does Fireworks do? Is it essential, or can I go right from PShop into Dweaver?

From what I’ve read, it’s not just my background but my whole page that needs to be processed in DW so it all loads correctly on the web. I don’t have the money to buy Fireworks and/or DW. I do have a friend that has DW. She works on a PC, and I’m on a Mac. Once I finish this site in Pshop to my satisfaction, can I give her the files to process in DW?
Would I give her the pages as layered TIFFs, or take them to "Save for Web & Devices" first and give her those files? Thanks for your help!
Rudy

Save for web files I would send.

Although I have FW have only used it on a couple of occasions. You can edit layered images in FW.

DW is the bases.

jburt wrote:

Hi,
I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML.

It still sounds like a whole lot of unneccesary steps and conversions, using a lot of different software packages.
The name "Heath Robinson" springs to mind…Look him up on wikipedia. The same results could be achieved in a fraction of the time, at a fraction of the effort if you were to learn HTML and use notepad for everything except image editing.
HTML is really quite incredibly simple to learn. It’s the single simplest computer language you could hope to learn. Most people can learn to write clean, efficient and fully funcioning HTML code in less than a day. It really is that simple.

(not quite so) Fat Sam wrote:

jburt wrote:

Hi,
I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML.

It still sounds like a whole lot of unneccesary steps and conversions, using a lot of different software packages.
The name "Heath Robinson" springs to mind…Look him up on wikipedia. The same results could be achieved in a fraction of the time, at a fraction of the effort if you were to learn HTML and use notepad for everything except image editing.
HTML is really quite incredibly simple to learn. It’s the single simplest computer language you could hope to learn. Most people can learn to write clean, efficient and fully funcioning HTML code in less than a day. It really is that simple.

What I understand of the situation its quiet convenient to use these programs to construct and modify a web page.

You can place enhanced text on a background image, slice the page into hot spots, convert save for web, then take that to DW.

Its a lot simpler doing that than trying to make an enhanced page by html.

Rob. wrote:

(not quite so) Fat Sam wrote:

jburt wrote:

Hi,
I use Photoshop often to build the "base" for my sites. Since I’m a print designer by origin, I find this a great place to really get my design and placement nailed down first, then export to Fireworks for the touches needed before importing to Dreamweaver as Fireworks HTML.

It still sounds like a whole lot of unneccesary steps and conversions, using a lot of different software packages. The name "Heath Robinson" springs to mind…Look him up on wikipedia. The same results could be achieved in a fraction of the time, at a fraction of the effort if you were to learn HTML and use notepad for everything except image editing.
HTML is really quite incredibly simple to learn. It’s the single simplest computer language you could hope to learn. Most people can learn to write clean, efficient and fully funcioning HTML code in less than a day. It really is that simple.

What I understand of the situation its quiet convenient to use these programs to construct and modify a web page.

You can place enhanced text on a background image, slice the page into hot spots, convert save for web, then take that to DW.

Its a lot simpler doing that than trying to make an enhanced page by html.

If you would take an afternoon to learn HTML – honestly, that’s all it will take – you would realise that simply isn’t true.
Plus there’s the added benefit that the site you end up producing is far superior, loads faster, scales to fit all browsers and resolutions, acchieves higher search engine placement, is easier to maintain and update 6 months down the line, is usable by people with disabilaties and sight impairments.
You’ll find that creating a website from a static image with hyperlink hotspots added to it will actually prevent your site from achieving all these things.
But if you’d rather waste time, effort and productivity trying to force a completely unsuitable to produce results that can at best be desribed as sub-standard, in the process excluding a large percentage of disabled surfers, and stockpiling future problems and hassles for yourself, then go ahead, knoxk yourself out.

It never ceases to amaze me the way some people deliberately try to make life difficult for themselves.