Page display in slices when published to Web

AS
Posted By
Alan_Skinner
Oct 4, 2006
Views
284
Replies
8
Status
Closed
Hi

I just created a company web site using Photoshop CS2. It previews fine in ImageReady but now that I have put it on the web, it displays gradually, in chunks which seem to correspond to the page slices. As this is my first experience with both Photoshop and creating a web site, it may be something simple but I cannot find any reference to ths behaviour anywhere. You can visit the site: www.siblingrevelry.biz and see what I mean. (I know I made the pages too big; pure ignorance. I am fixing that now) I also had trouble using the files in Dreamweaver, which kept treating the slices as cells and creating havoc with the layout.

I would be most grateful for a solution as it is driving me crazy.

Thank you

Alan Skinner
Related Tags
display page slice

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

C
chrisjbirchall
Oct 4, 2006
If you mean the page appears on screen slice by slice – could it be because you are viewing it on a slow connection?

I’m on broadband here and it loaded straight away.

You could rationalize the code here though, Using images to display blocks of plain colour will certainly take longer to load than simply setting the cell to display the same colour using HTML.

You’ve even got some slices using images to display plain white. Simply removing that image from the slice will reduce load times.

Also make sure you have fully Optimized each image.

PS/Image Ready is great for preparing images for the web, but if you are using it to create whole web pages, a lot of work is needed in a suitable HTML editor afterwards to optimize the code.
AS
Alan_Skinner
Oct 4, 2006
Hi, Chris

Thank you for the prompt answer. Yes, I did mean that. I am viewing on a fast connection (T1) and others who have broadband have noticed the same effect.

I Optimised each page in ImageReady, saving Html and Images. Guess I will have to learn some HTML as I have no idea about it. Can I convert a slice (eg, a solid coloured area) to a single-cell table and use Dreamweaver to set the cell colour?

I don’t mean to take liberties with the added question.

Thank you very much.

Regards

Alan
LR
Linda_Rathgeber
Oct 4, 2006
wrote:
Hi

I just created a company web site using Photoshop CS2. It previews fine in ImageReady but now that I have put it on the web, it displays gradually, in chunks which seem to correspond to the page slices.

If the connection is slow, or the file size of the images very large, you’ll see them load one at a time. The jester image is gorgeous, Alan. A challenge: can you think of a way to induce the viewer to click on the image without having to actually tell them to?

As
this is my first experience with both Photoshop and creating a web site, it may be something simple but I cannot find any reference to ths behaviour anywhere. You can visit the site:
www.siblingrevelry.biz and see what I mean. (I know I made the pages too big; pure ignorance. I am fixing that now)

The page is 97 kb, which is about 37 kb too large. Try to keep the overall file size of the index page to around 50 kb, and the content pages to around 30 kb.

I also had trouble
using the files in Dreamweaver, which kept treating the slices as cells and creating havoc with the layout.

The slices are images in table cells. Can you describe what kind of havoc you mean?
AS
Alan_Skinner
Oct 4, 2006
Hi, Linda
Thank you. I am using a T1 connection but I assume that you do not see them load in slices, which is heartening. I will work on refining the graphics and see if I can make the page size smaller.
I am pleased you like our jesters. They make a striking company logo. They took a while to get right. In answer to your question, I had thought of somehow animating the jesters so that the visitor’s attenbtion would be drawn to them and, lacking anything else, would click on them. Haven’t figured out how yet… still trying to walk!
When I open the file in Dreamweaver, the page is just a series of cells which correspond to the original slices. If I try to insert a table, it inserts it between the cells and moves everything around. The only way to insert anything in Dreamweaver is to inert a new layer object on top of everything. I think I need to find a good book.
Thank your the tip on the size. I will work on that aspect. Regards and thank you
Alan
C
chrisjbirchall
Oct 4, 2006
Can I convert a slice (eg, a solid coloured area) to a single-cell table and use Dreamweaver to set the cell colour?

Yes. In your HTML editor, delete the image, then edit the empty cell to show the required background colour.

Make sure the cell is set to the exact hieght and width of the missing image so that the table’s integrity remains.

You might want to pop into the Dreamweaver forums for more considered advice.

Best of luck with it.

Chris.
JJ
John Joslin
Oct 4, 2006
You might want to pop into the Dreamweaver forums

…. if you’ve got time on your hands!
LR
Linda_Rathgeber
Oct 4, 2006
wrote:

When I open the file in Dreamweaver, the page is just a series of cells which correspond to the original slices. If I try to insert a table, it inserts it between the cells and moves everything around.

That’s expected. Since the slices are contained within a table, trying to insert a table next to the existing slices nests one table inside another, and causes the original table to break.

The only way to insert anything in Dreamweaver is to inert a new layer object on top of everything.

That’s not the best way to handle the problem. The ideal way to build a Web page in Dreamweaver is to export the slices as images only, and then add them either to a table you created in Dreamweaver, or position them using CSS. Tables are a good place for a beginner to start.

Here’s an article about creating a layout in Dreamweaver with exported images. Although the image slices are exported from Fireworks rather than Image Ready, I believe you’ll still find it useful.

http://www.adobe.com/devnet/fireworks/articles/layout_editin g_print.html
AS
Alan_Skinner
Oct 4, 2006
Thank you, Linda, and to everyone else who gave their advice. I shall certainly try what you suggest, Linda, and have a look at the article. Your succinct description of handling the problem made many things suddenly very clear to me and will help enormously.

Kind regards

Alan

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections