How? Basically experience.
That and the FAQ page http://www.publishermvps.com/Default.aspx?tabid=30 to
help you learn common mistakes.
It is normal for the html output (web preview is the same html as when you
publish) to vary from the document, it can't always code html to match what
you did. Sometimes this is Publisher's fault, sometime's html limitations,
sometimes both, and sometimes just bad layout by the user.
It just takes some trial and error until you gain experience in what works
and what does not.
One thing that is Publisher's fault and can be a "gotcha" is that you can't
wrap text around a picture in a Publisher web page.
Good luck.