Using The Editor To Create Articles And Pages
By Brenda Essig aka Zanymuse (Zanymuse) on March 25, 2010
| WYSIWYG=What You See Is What You Get. This is the common term used to describe web page design programs which let you design a page through the use of visual tools rather than code. The codes are still there but the program writes it for you as you design the page visually. This little editor offers us a way to create articles and pages easily for our spaces here at Cubits.org. |
The editor used here in Cubits.org is a much scaled down version of what one would find in a commercial editor. Although it is very basic there is still a learning curve in it's use in order to get the most efficient and rewarding use of it's features and though small it is it is big enough to allow you to create a feature rich article for your web space. Before you begin let me explain that this editor will not function properly if you are using Internet Explorer as your browser. To enjoy it's full functions you will need to install and use Firefox.
Dave has designed the editor so that it automatically sizes the work area to the correct width and moved the picture uploads into a scrolling area on the right. This makes laying out your page simple.
Undo~Redo There are two curved arrow tools next in the sequence. The first one is an undo to remove the last step you did if it is not what you wanted and the second will restore the step. Links. Type in the word you want to act as the link. For instance I want to link to my cubit The Playpen of Graphics I click on the links tool and place my pages address in the url section and type in The Playpen of Graphics. Voila! I have a link. If I want to remove a link without removing the text I can highlight it and click the broken link tool. Thumbnail placement: because of the width restrictions discussed earlier you should only place 2 thumbnailed pictures in a row.
Adding pictures: To add pictures for your article using the editors built in feature is very simple. Just click the upload pictures on the right side of the editor and browse your computers files. Your photos will appear in the box to the right of the editor and can be dragged into your article. It doesn't matter what size your image is, it will show as a 250px square thumbnail when it is placed in the article and will enlarge to it's full size in a "lightbox" when the viewer clicks the thumbnail. So lets add two pictures.
As you see, the two are stacked to the left.
Now lets add 2 more
But what if I want to lay out my page with a picture that is larger than the 250px thumbnails? Since the thumbnails are not resizeable what can I do? Adding pictures through files links: This method requires you to go to your control panel and use the files upload option. Once the pictures are in the file you can click on the image in the folder to open it and copy the address from the address bar. This address is then inserted using the add image function.
So far, so good! I can also add a border and select the thickness by telling it how many px it should be. I have used 15px. NOTE: You cannot resize the picture using the editor. The options are there and it will appear to work but when you save the changes the image will revert back to it's original size. Resize your images before you upload them to your file folder.
HTML: This changes the view of what you see from visual to a code view. I rarely need to see the code view but it does come in handy at times. For instance: While creating this page I previewed it using 3 different browsers and 3 different monitors. Everything looked just the way I layed it out on the first monitor but there were huge line gaps when I looked at it on the second and third monitors. I could not back those spaces out using the visual editor. Once I opened it to code view I was able to locate and remove the extra line spaces, save and return to visual. This removed the glaring spaces in all 3 views and allows me to feel reasonably comfortable that my visitors will see a nice clean layout. Tables: Think of a newspaper and the way it is formated. There are columns and rows. Some items span 2 or more columns such as a larger picture or advertisement but the basic page is generally set up into 4 columns. Using tables you can do this formating within your article. The basic page begins as a single column. Using tables you can divide that page into multiple columns. Tables are often used to place pictures, charts or graphs into a page and "lock" them in place. With word wrap around such inserted images it is really not necessary to do this manually. If you place several objects within a table, such as 3 thumbnail pictures, they will stay lined up just as you intended. But, as we read in Dave's quote above, this will cause problems by making the overall width of your article expand and the viewer will then have to scroll across the screen to view it. So, lets click on the first icon in the lower row of tools. This inserts a new table. Now I can set the properties of that table. I set the number of cols., the number of rows (note that unless you want seperate boxed rows you can set this to 1 regardless of the number of lines that will be used)I have selected 1 columns, 1 row, spacing and padding of 5, and a width of 550 centered. The results below gives me 2 cells in which I can now add text or images.
Embedding Videos: Dave has enabled the BBcodes for Youtube and Google video embeds. The code will look like this [youtube]put your video code here[/you tube] but close the space between the u and the t in the closing brackets. or To embed a Google video [googlevideo]NUMBER ID[/googlevideo ] omitting the space before the last bracket There you have it. You are now set to create informative and entertaining articles. For assistance and tips on writing your article, including the proper way to cite sources and give credit to copyrights please visit the ARTICLE WRITERS FORUM. You will also find qualified assistance there if you wish to have someone proof read and or edit your article. |
| colors, cubits articles design, fonts, inserting graphics, page layouts, tables, tutorial, Web page design |
 I have been playing on the www for many years and in the process have created several small web sites. I am curious by nature and the opportunity to be a small part of this new community as it evolves has been a real pleasure. |
| « More articles |
Comments and discussion:
| Subject | Thread Starter | Last Reply | Replies |
|---|---|---|---|
| How to I add background color to my article? | lakesidecallas | Mar 6, 2011 4:12 PM | 3 |
| Fantastic HELP for all of us! | Boopaints | Jan 10, 2011 6:29 PM | 12 |
| "Floating" An Image | TBGDN | Nov 8, 2010 8:23 AM | 6 |
| copying from a word processor into an article? | Lance | Apr 28, 2010 8:54 AM | 4 |
| Links | valleylynn | Mar 30, 2010 7:23 PM | 3 |
| Update to the editor tool | dave | Mar 25, 2010 4:08 PM | 10 |
