Using a photo-editor to make web pages - how can I reduce the source code?

J

Joey

Hi there,

Please don't laugh, but I am using my photo editor (Ulead Photoimpact
11) to create my website. I simply do not have the time needed to
learn html and frontpage and I have been using Photoimpact for years
and this one is pretty good - in that I can create rollover objects
and banners, menus etc with great ease. So I am almost content with
it, except for the length of time it takes to load the page on screen.

A colleague who knows HTML had a look at it and said that the source
code is 5 pages long whereas most sites are about 2, and he says this
is why browsers load the page so slowly.

Is there anyway I can reduce this? I have compared my home page source
code with that of a similar site and one of the main differences is
that mine is filled with entries like this:

</SCRIPT></HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD
WIDTH=469 HEIGHT=4 COLSPAN=21></TD><TD COLSPAN=7 ROWSPAN=2><IMG
SRC=images/_1.jpg WIDTH=159 BORDER=0 HEIGHT=59></TD><TD WIDTH=46
HEIGHT=59 COLSPAN=6 ROWSPAN=2></TD></TR><TR><TD WIDTH=19 HEIGHT=60
COLSPAN=3 ROWSPAN=2></TD><TD COLSPAN=6 ROWSPAN=2><IMG SRC=images/_4.jpg
WIDTH=215 BORDER=0 HEIGHT=60></TD><TD WIDTH=235 HEIGHT=55
COLSPAN=12></TD></TR><TR><TD WIDTH=440 HEIGHT=5
COLSPAN=25></TD></TR><TR><TD WIDTH=6 HEIGHT=10></TD><TD COLSPAN=32><IMG
SRC=images/_8.jpg WIDTH=664 BORDER=0 HEIGHT=10></TD><TD WIDTH=4
HEIGHT=10></TD></TR><TR><TD WIDTH=674 HEIGHT=15
COLSPAN=34></TD></TR><TR><TD COLSPAN=30><IMG SRC=images/_11.jpg
WIDTH=642 BORDER=0 HEIGHT=7></TD><TD WIDTH=32 HEIGHT=42 COLSPAN=4
ROWSPAN=3></TD></TR><TR><TD COLSPAN=5><IMG SRC=images/_13.jpg WIDTH=100
BORDER=0 HEIGHT=13></TD><TD BACKGROUND=images/_14.jpg>

Is this what is causing the slow loading of my page? I can provide the
link to my site but I don't want to do it publically here, so if
anyone can help by knowing the site and looking at it - just email me
and i can email you back the link.

Cheers in advance,

Lost.Joey (at gmail...)
 
F

funny_leech

You touchy, you breaky.

It looks like the program is using tables extensively to format your
page, which is extremely inefficient and fragile, and definitely "write
only."

This is why WYSIWYG editors are evil incarnate, yea, the devil's hand
on earth. Learn HTML, learn CSS, and do-it-yourself. It's really less
painful than you think.

Or keep with your editor, and live with the long upload times.

Walter Gildersleeve
Freiburg, Germany

______________________________________________________
http://linkfrog.net
URL Shortening
Free and easy, small and green.
 
J

Joey

Yes, I realise that, but what I mean is - is there any way I can
*salvage* what I have already created - rather than create my web page
from scratch all over again?
Could I open it in a HTML editor and make a few small changes to
improve things? Or would it be like a house of cards where if I remove
one thing the whole structure comes crashing down?

Joey
 
J

Jose

Could I open it in a HTML editor and make a few small changes to
improve things? Or would it be like a house of cards where if I remove
one thing the whole structure comes crashing down?
Click to expand...

I suspect the latter. Your code is laboriously placing every element
somewhere precise, and (of course) the browsers comply to the user's
detriment (won't gracefully resize, demands certain window widths, etc).
Post a link and you may get more help. To "fix" the code you'll have
to take out at least two thirds of it... and figuring out which two
thirds is harder than simply re-creating it.

HTML is not a presentation tool. It is a description tool. The web
browser is the presentation tool. You tell the browser =what= something
represents, and the browser decides how to best represent it.

Despite the opinions of some that decry WYSIWIG HTML editors, they do
have their place for simple sites (but avoid FrontPage like the plague,
as it locks you into itself). I run a simple site using Netscape
Composer and it works fine for my purposes right now. It's easy to
create content, and you can see and mess with the code. Doing so you
can teach yourself the rudiments of HTML too (though it does use tables
for layout, a tolerable evil IMHO when compared with the huge amounts of
CSS code I have seen on some sites (every word seems to have its own set
of tags!).

Post a link to your site so we can see what you are trying to do.

Jose
 
M

Mark Parnell

Deciding to do something for the good of humanity, Joey
A colleague who knows HTML had a look at it and said that the source
code is 5 pages long whereas most sites are about 2, and he says this
is why browsers load the page so slowly.
Click to expand...
Is this what is causing the slow loading of my page?
Click to expand...

To an extent, yes. That code certainly is nasty. But the large number of
images would be slowing it down a lot more. Try optimising the images
further, or reducing the number of images on each page. If it's a page
of thumbnails, make sure they *are* thumbnails, not just the full image
shrunk by the HTML.

There really is no substitute for doing it yourself.
 
D

dorayme

Joey said:
Hi there,

Please don't laugh, but I am using my photo editor (Ulead Photoimpact
11) to create my website. I simply do not have the time needed to
learn html and frontpage and I have been using Photoimpact for years
and this one is pretty good - in that I can create rollover objects
and banners, menus etc with great ease. So I am almost content with
it, except for the length of time it takes to load the page on screen.

A colleague who knows HTML had a look at it and said that the source
code is 5 pages long whereas most sites are about 2, and he says this
is why browsers load the page so slowly.

Is there anyway I can reduce this? I have compared my home page source
code with that of a similar site and one of the main differences is
that mine is filled with entries like this:

</SCRIPT></HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0><TABLE BORDER=0 C
Click to expand...

I suspect it is slow because there are too many pictures rather
than too much html (which it would have too much of, true). Your
method is very unwise. At the very least use software that sort
of specialises in producing html, dreamweaver and so on, google
up. Photo editing software has some of these functions to do
image maps, rollovers and so on but I suspect you are essentially
doing everything in pictures and it is fighting to display
them... Don't do it.
 
C

Chaddy2222

Joey said:
Hi there,

Please don't laugh, but I am using my photo editor (Ulead Photoimpact
11) to create my website. I simply do not have the time needed to
learn html and frontpage and I have been using Photoimpact for years
and this one is pretty good - in that I can create rollover objects
and banners, menus etc with great ease. So I am almost content with
it, except for the length of time it takes to load the page on screen.

A colleague who knows HTML had a look at it and said that the source
code is 5 pages long whereas most sites are about 2, and he says this
is why browsers load the page so slowly.

Is there anyway I can reduce this? I have compared my home page source
code with that of a similar site and one of the main differences is
that mine is filled with entries like this:

</SCRIPT></HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD
WIDTH=469 HEIGHT=4 COLSPAN=21></TD><TD COLSPAN=7 ROWSPAN=2><IMG
SRC=images/_1.jpg WIDTH=159 BORDER=0 HEIGHT=59></TD><TD WIDTH=46
HEIGHT=59 COLSPAN=6 ROWSPAN=2></TD></TR><TR><TD WIDTH=19 HEIGHT=60
COLSPAN=3 ROWSPAN=2></TD><TD COLSPAN=6 ROWSPAN=2><IMG SRC=images/_4.jpg
WIDTH=215 BORDER=0 HEIGHT=60></TD><TD WIDTH=235 HEIGHT=55
COLSPAN=12></TD></TR><TR><TD WIDTH=440 HEIGHT=5
COLSPAN=25></TD></TR><TR><TD WIDTH=6 HEIGHT=10></TD><TD COLSPAN=32><IMG
SRC=images/_8.jpg WIDTH=664 BORDER=0 HEIGHT=10></TD><TD WIDTH=4
HEIGHT=10></TD></TR><TR><TD WIDTH=674 HEIGHT=15
COLSPAN=34></TD></TR><TR><TD COLSPAN=30><IMG SRC=images/_11.jpg
WIDTH=642 BORDER=0 HEIGHT=7></TD><TD WIDTH=32 HEIGHT=42 COLSPAN=4
ROWSPAN=3></TD></TR><TR><TD COLSPAN=5><IMG SRC=images/_13.jpg WIDTH=100
BORDER=0 HEIGHT=13></TD><TD BACKGROUND=images/_14.jpg>
Click to expand...
Is this what is causing the slow loading of my page?
Click to expand...

Maybe.

I can provide the
link to my site but I don't want to do it publically here, so if
anyone can help by knowing the site and looking at it - just email me
and i can email you back the link.

Cheers in advance,

Lost.Joey (at gmail...)
Click to expand...
You should not really use a graphics editor for the creation of web
pages. That's not what they are ment for. You would be better off
taking a look at NVU from, http://www.nvu.com
A good easy to use HTML editor, and it's WYSIWYG.
 
G

Greg N.

Joey said:
Is this what is causing the slow loading of my page?
Click to expand...

You know, this is alt.HTML so any problem caused by an HTML generator
tool like yours causes a pharyngeal reflex which manifests itself in
"don't use such a tool" being spouted at you.

Still, at this point it is all speculation. Show us the page URL and
you'll get an explanation what the real performance problem is in no time.
I can provide the
link to my site but I don't want to do it publically here, so if
anyone can help by knowing the site and looking at it - just email me
and i can email you back the link.
Click to expand...

No, I don't want to deal with private mail and be your personal tutor.
Show us the page. If it's some secret private stuff then sanitize the
pictures and show us a sanitized example.
 
J

JDS

though it does use tables
for layout, a tolerable evil IMHO when compared with the huge amounts of
CSS code I have seen on some sites (every word seems to have its own set
of tags!).
Click to expand...

No way, jose
 
N

Neredbojias

With neither quill nor qualm, JDS quothed:
No way, jose
Click to expand...

Are you referring to the poster "Jose" or the general "Jose" of no-way
fame?

Anyway, I agree with, uh, Jose. Css is far from perfected and there is
a place for tables, which still can do some things css can't, in what
might be called a layout venue. Undoubtedly tables are over-used, but
that doesn't invalidate their occasional application.
 
A

Adrienne Boswell

Hi there,

Please don't laugh, but I am using my photo editor (Ulead Photoimpact
11) to create my website. I simply do not have the time needed to
learn html
Click to expand...

HTML is easy and hand coding takes up much less time than using a WYSIWYG
and having to fix its problems later.
and frontpage
Click to expand...

Oh, the Humanity!
and I have been using Photoimpact for years
and this one is pretty good - in that I can create rollover objects
and banners, menus etc with great ease.
Click to expand...

Images with text can be a problem, especially if the text is small. There
is no way for the user to resize (except for Opera). If you want to do
rollovers, use PI to make buttons/backgrounds for the different states, and
use CSS to do the actual rolling over. Google for CSS rollovers, there are
many examples.
So I am almost content with
it, except for the length of time it takes to load the page on screen.
Click to expand...

I have been using PI since version 3, but I would never rely on it to
produce HTML.
A colleague who knows HTML had a look at it and said that the source
code is 5 pages long whereas most sites are about 2, and he says this
is why browsers load the page so slowly.
Click to expand...

One of the things PI does is it relys on tables to position objects.
Tables should be used for tabular data. Tables can take a long time to
load, especially if they are large, or have other tables embedded in them.
Is there anyway I can reduce this?
Click to expand...

<snip>
Not really. You're better off starting over. You can, of course, copy and
paste any text. Use a Strict Doc Type and CSS.

You see, by putting all your presenation into a stylesheet, you can use the
same stylesheet for the entire site. Say for example, you have a menu
that's in a table, and you need to make it wider. With CSS, you change the
width in the stylesheet, and it changes the entire site. Without CSS, you
have to change every single page.
 
A

Alan J. Flavell

Images with text can be a problem, especially if the text is small.
Agreed.

There is no way for the user to resize (except for Opera).
Click to expand...

There's no way provided in the browsers' standard user interface,
agreed; but if you look around for bookmarklets/favelets, you can find
ways of doing it in other browsers.

However, there's no guarantee that zooming an image of text will
really make it more readable. On the other hand, if the author has
done their job properly, any substantive text appearing in the image
would normally have been made available in the alt= attribute, so
maybe that's the place to look for enlightenment, if push comes to
shove. (When you find that the author didn't have a clue about alt
text, you can always leave...)
 
J

Joey

Hi sorry for my delayed thanks everyone.

I just wanted to say that I have tried to compromise by editing a
little of the HTML without completely erasing the document and starting
from scratch. As a webmaster beginner I think it would be foolish to
stop entirely using my photo editor to build rollovers and structure
the overall layout. But I did find a sort of (although time-consuming)
workaround to help the pages load faster:

I researched the various options for page-loading optimization and
figured I was actually loading images all over again which were
possible to be duplicated. I had put each web page in its own
directory with its own 'images' folder, and 50% of these images were
identical menu /logo graphics from the home page. So basically I am
now changing the source code of each web page to share images in the
same 'images' folder - which is helping a little now with the loading
of the pages.

In addition, I have also tentatively changed some source code without
shattering everything- for example centering the page was easy enough.
However, when I tried to add a background the menu graphics shifted
slightly and looked somewhat uneven so I have gave up on the coloured
background...

Anyway, I'm learning in small steps .. thanks everyone for your advice!

Joey
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
I need help fixing my website 2
SendGrid email issue in responsive Gmail 1
Put image over the top of another image on hover 3

Members online

No members online now.
Total: 72 (members: 1, guests: 71)
Robots: 366

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,740
Latest member
JudsonFrie

Latest Threads

Top