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).
Copy and paste into Google Sites page.
Switch to <html> mode and copy the HTML just pasted.
Back in the web page click on 'Insert' and 'HTML Box'.
Copy and paste the the tidy HTML into the box.
I find it is better to turn off wrapping and to centre the HTML box.
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.