Best ways to teach someone with no html experience how to position an image in a web page using a browser based WYSIWYG editor?

Question

I am trying to teach someone with no HTML experience how to position an image in a web page using an online HTML Editor (like FCKEditor or Telerik RadEditor) without getting into html and css. They have no interest in learning these.

What are some good ways to position an image wherever they want it to be without touching html and css? Absolute positioning by dragging the image is not a viable ption.

I am thinking of creating an html table with rows and columns and setting the widths and heights of the columns to 'push' the image to where they want it to go but wonder if this is too complicated for a newbie and if there are simpler methods?

Answer 1

If you have a user that is so non-tech savvy that they can't (or won't) learn enough CSS to set an X and Y coordinate then I would take a different approach to image positioning. Instead of having them set the position, make some CSS classes for the "common" image locations like .imageTopLeft, .imageTopCenter, .imageTopRight, .imageMiddleLeft, .imageMiddleRight, etc.

This way, the user can just pick the image placement from a list instead of actually manipulating the image, CSS or HTML at all.

Answer 2

I've faced this situation too and asked almost same question here http://stackoverflow.com/questions/1781372/how-to-style-content-of-pages-without-adding-css-class-to-element

if we can't add and teach to add css classes to client then table is the only solution.

Answer 3

I want to share my experience with WYSIWYG tools :
I thought it would be fine to use WYSIWYG tools after learning the basics of HTML and CSS,
then I thought its better to use them once I am familiar with hand coding, only after I have good hold on PIXELS on the page.
After practicing for long period of time, once I tried using Kompozer and Adobe-Dreamweaver, I realized that I would better avoid usage of it.

there are many reasons why one should not use WYSIWYG tools..

1. Usually these tools insert nested tables for positioning of images and etc.. (which is appreciated at the least)
2. (Try this) They introduce redundant tags when you try "try and see" method. once, I made text look bigger by clicking on "BIG" button, it introduced <big/> tag, I made it look "strong" clicking on corresponding button, again I made it look smaller, guess what was the corresponding code reflecting..

:

<small><small><strong><big><big>some text!!</big></big></strong></small></small>

WYSIWYG tools won't get you an efficient code, as it is just a software, it does its best to get you what you see, it may not be perfect method though. Learning HTML and CSS doesn't take much time,

I had started coding within 20-30 days, (not DOM pages, but atleast I had good hold on images and font-design).