We often take screen shots, clip them, and insert them in guides, etc. This has some disadvantages including much slower page loading (many images per guide), no translation, and don't scale/zoom well (get pixelated).
An alternative is to copy and paste the rich text directly from the browser into this web site (Google Sites). It looks good until you click save and most of the formatting is removed. There is a work around but it is clumsy (perhaps we can find a better way).
If you get an error message from Google Sites (or similar sites) then perhaps you need to clean up the HTML. A site like http://infohound.net/tidy/tidy.pl can tidy up the HTML.
I did this sequence for the first 'screen shot' in https://sites.google.com/site/modelling4allproject/guides/Predator-prey-guide and the only problem is that the contents of text areas is lost. You can add them to the HTML of the HTML Box by putting it before </textarea>.
This is a lot of work and perhaps someone knows a better way. But it means pages that load faster, are fully translatable, and zoom better. Small changes are even directly editable without generating a new screenshot, uploading, etc.