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.

Quoting:For your article to look really good, it should fit in about 700 pixels wide at a maximum. If someone is visiting your article and their browser is 900 pixels wide, then figure 250 pixels will be taken by the right bar leaving around 650px for the article.

Dave

 

 

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.

Quoted: Using a table to force 250px images to all fit side-by-side 3 or 4 in a row, will push the visitor's browser window to the right and ALL the text will also fill that in. So in order to read your article they will have to constantly scroll right and left. That's a really bad thing.

I'd recommend that when using 250px thumbs, you limit yourself to two images side by side. That would give the best presentation to the largest number of readers.

Dave

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.

2010-03-24/Zanymuse/7fa0982010-03-24/Zanymuse/2e45b8

 As you see, the two are stacked to the left.

 

 

 

                                                        

  Now lets add 2 more

 

 


2010-03-24/Zanymuse/adeb88 I right click on  a pictu2010-03-24/Zanymuse/9f80care and select alignment. By selecting to align the right side picture to the right I now have my pictures laid out in this way and have a nice space in the center to add my text. This option looks good to me so I will leave it and continue with my article.

 

 

 

 

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.

I can click on the add image icon (the tree) and add a picture from my uploaded files. Then I can right click on the image and edit it. By choosing the option to align to the right and to float it I can now add text to the left of the picture.

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.


three blind mice

And this is the same settings with 2 columns and 2 rows.


   
   

CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.

CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1.

CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table.

Alignment: Set your tables allignment center, left or right. 

Border: If you want a visible border around this table type a number in the box to specify the borders thickness with 1 being a single px wide and progressing  1 px thicker incrementally as the number gets larger.

Caption: Click this box if you wish to include a caption with your picture or graph. This will allow you to type in your information and keep it perfectly aligned with your image.

 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

You will find the number ID  in the URL of the video. 

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.

Related articles:
colors, cubits articles design, fonts, inserting graphics, page layouts, tables, tutorial, Web page design

About Brenda Essig aka Zanymuse
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
Links valleylynn Jan 13, 2014 9:23 AM 7
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
Update to the editor tool dave Mar 25, 2010 4:08 PM 10

Zany's Playpen

This is a place to explore the possibilities of a Cubit environment. You will find tutorials to help you understand the Cubits.org features and advice on how to establish your own web presence. Please join me in the fun. Lets play!

» Home
» Forums
» Articles
» FAQ

Cubit owner: Zanymuse

BB CODES
Database Instructions by Dave














Want to escape from here and browse around to see what other Cubits are about? Try the Cubit Finder

think inside the box