Scroll
Follow

WYSIWYG Editor - Images and Tables

Image

Toolbar Button: Image

Inserts an image at the cursor location. If positioned on an image, it allows you to change the image information.

Since images are such a powerful means of communication, it should be no surprise that there are many features surrounding them. The image tool pops open a new window in which you choose the features for your image, as well as choosing the image itself. Luckily, all you have to do is select your image. You can ignore everything else and still successfully add an image to your document.

Selecting an Image
Click the "Select Image" button to choose an image. This brings up the Image Library window (another popup window) that lists the images you have on file, and optionally shows their sizes, and displays thumbnails. Double-click on the image you want to add to your document. The Image Library window closes and the image displays in the preview area of the first popup window.

The Image Library has many other features to help you organize, display, upload, rename, and delete your images. It has its own user guide to describe its features and functionality. You can access its user guide by clicking Help on its menu.

Resizing the Image
The size of the image you selected is automatically filled in on the Width and Height prompts. If you need to change them, take note of the two little buttons to their right: the first is a lock. If you click on the lock you'll see that it opens and closes. If you change the width or height of the image while the lock is closed (the default), the image stays in proportion. For example, if the image was originally 150 x 100 and you change the width to 60, the height will automatically change to 40. If the lock is open when you change the width or height, then ONLY the width or height is changed - the image doesn't stay in proportion. In order to get it back in proportion you'll have to calculate the other dimension yourself. Since it's easy to get things wrong, there's also a button that looks like an arrow going in a circle. Click this button to set the image back to its original dimensions.

Offsetting the Image
Images usually look best with a little white space around them, and with no border. By default, your image will be set up to have no border and no extra white space. If you want a border on the image, enter a number in the Border prompt. The bigger the number, the thicker the border. If the image looks too close to the text on its left or right, enter a number in the HSpace prompt to add extra horizontal space on its sides. If the image looks too close to the text above or below it, enter a number in the VSpace prompt to add extra space on its top and bottom.

Most images stand alone or are in a table cell, but sometimes they are mixed in with text. By default the image will appear inline with its surrounding text. The previous line of text will be above the image and the next line of text will be below the image. This is fine for small images but awkward for larger ones. That's when the Alignment prompt is useful. Choose Left from the Alignment drop-down to place the image to the left and have text surround it on its right. Choose Right from the Alignment drop-down to place the image to the right and have text surround it on its left side. The Alignment drop-down has a number of other options that are variations on Left, Right, and middle that you can try if Left and Right don't quite fit your needs.

Alternative Text
Alternative Text is a short textual description of the image. Although it isn't required, we recommend using it, for two reasons. First, it allows HTML reader devices for the visually impaired to read out a description of the image. This helps the visually impaired person understand what's in your document. Second, if your image fails to display, this text displays in its place. Since more and more email programs block images until told not to, alternative text helps the reader decide to unblock the images and see your message as it's intended to be seen.

 

Uploading Images
It's easy to select images to use in a document, but how do images get into yourImage Library in the first place? You click the Upload tab of the Image Properties popup window. You must have the image you want to use available to you on your computer or your organization's network.

Click the "Browse..." button (some browsers say "Choose...") to select the image file to add to your library. The file must be a .jpg, .jpeg, .gif, .png, or .bmp file. The file size must be less than 350 Kb. Once you have selected the file, click the "Send it to the Server" button. This sends the file to your Image Library on thedatabank's server. A message displays asking you to wait while the message is being transferred. When the transfer is complete, you are automatically switched back to the Image Info tab, where you can click the "Select Image" button and select your new image from the Image Library

Note: The Image Library also allows you to upload images. See its User Guide for details, though the process is much the same as it is here. One advantage to uploading with the Image Library is that it allows you to upload into different folders. For example, you might keep newsletter images in one folder and Advocacy images in another. When you upload from the Image Properties window, the image is saved to the top level Images folder in the Image Library.

 

Linked Images:
To make an image that links to a web page, bookmark, or email address, first add the image to the document. Then click on the image and click on the Link tool to add the link.

The Image Properties window includes an Advanced tab with many options that persons well-versed in HTML might use occasionally. Most of the time these options are not necessary, so if you don't know what they mean you can safely ignore them.

For existing images, the Image Properties popup window can also be opened by double-clicking on the image.

 

Table

Toolbar Button: Table

Inserts a table at the current cursor location.

Enter the number of rows and columns in the table, and its total width. If you are unsure, just accept the defaults. You can add or delete rows and columns later if necessary, and you can come back to this properties window to adjust the width. The Border size determines the thickness of the lines surrounding the table cells, in pixels. Enter 0 (zero) if you do not want borders.

Cell spacing and Cell padding can be a little confusing. Basically, Cell spacing is the number of pixels of space between cells, while Cell padding is the amount of margin space inside the cells. The effects of Cell spacing and Cell padding are easier to see when you have borders.

Table alignment should usually be blank (<Not set>) or Center. Center centers the table in the document. Be careful with Left or Right table alignment - text outside the table may not end up where you expect it to! That's because Left and Right alignment on tables works the same as Left and Right alignment on images: it determines how external text will wrap around the table.

The Caption and Summary can be left blank, but are helpful for the visually impaired. If used, this text should describe the purpose and contents of the table.

 

Background Image and Background Color

Background Image
Earlier versions of the HTML Editor supported adding background images and background colors to tables. Background images have been dropped due to lack of support in many email programs. If you want to try to provide a background image anyway, it can still be done (although it's harder) using the Style prompt in the Advanced tab. Add:

background-image: url(http://www.thedatabank.com/hm/999/image/image.jpg);

Replace 999 with your assigned client number (contact Support if you do not know this number) and replace image.jpg with the name of your image file. If the image is in a sub-folder in your Image Library, add the folder name(s) to the URL, too. For example, if the image is in a folder called backgrounds, use the following:

background-image: url(http://www.thedatabank.com/hm/999/image/backgrounds/image.jpg);



Background Color
Background color is still available for table cells, because it's handled more consistently across email programs. The simplest way to add a background color to a table is to add it to all of its cells. To do this:

  1. Position the cursor anywhere in the table.
  2. On the HTML Editor's bottom status line, click on <table> to highlight all the contents of the table. (If you have nested tables, make sure you've selected the correct table.) The table's contents will behighlighted in the editor.
  3. Right-click on the highlighted area. (Mac users: use Ctrl+Click if you have a 1-button mouse.)
  4. Choose Cell --> Cell Properties to bring up the Cell Properties window.
  5. Select a color in the Background Color prompt, and click OK. The background color will be applied to all selected cells.

Although it may not work in all email programs, you can also set a table's background color by using the Style prompt on the Advanced tab. Add:

background-color: #999999;

Replace 999999 with the color name or code for the background color you want.



Editing Table, Row, and Cell Properties
Once you have created a table, the best way to adjust it is via the right-click context menus whenever the cursor is over the table. (Mac users: use Ctrl+Click if you have a 1-button mouse.) The context menus allow you to add and delete rows and columns, change cell settings, split cells, delete the entire table, return to the Table Properties popup window, etc.

 

Cell Properties

Lets you control the formatting of a table cell. To get to this window, right-click over a table, select "Cell," then select "Cell Properties." (Mac users: use Ctrl+Click if you have a 1-button mouse.)

If you leave the Width and Height blank, the browser or email program will size the cell based on its contents and the contents of other cells in the table. Otherwise, specify the height and/or width of the cell and choose pixels or percent to indicate how you are sizing the cell. If you are using percent, enter numbers from 1-100. You should generally only set Word Wrap to No if the contents of cell will only be a few words that you want on a single line.

Horizontal Alignment lets you indicate whether the contents of the cell will be left, center, or right justified. If left blank, they will be left justified. You will probably use Vertical Alignment fairly often, to make your content start at the top of the cell. If left blank, the vertical alignment of the cell contents will be centered, meaning if there is more text in any of the cells next to this cell, then only the cell with the most text will start at the top. All other cells will be centered to have an equal amount of white space at the top and bottom. While there's nothing wrong with that, it's usually more pleasing to the eye if all the cells are vertically aligned to start at the top. More rarely, bottom aligning looks better.

Row and column spanning allow your tables to become very complex. Row spanning means you are combining the cell with cells in lower rows into one larger vertical cell. When you do this the column has fewer rows than the other columns in the table. Column spanning means you are combining the cell with cells in columns to the right, to create one wider cell. When you do this the row has fewer columns than other rows in the table.

The cell's Background Color will be white unless otherwise specified here or in the Table Properties window. To select a background color, type in the HTML color code (e.g., #FF0000 for red) or click the Select... button to bring up the 216-color palette and select or enter a color there. Note that you can set the entire table's background color as well, in the Table Properties window. The cell's background color takes precedence overe the table's background color.

The cell's Border Color only matters if the table has a border. If the table has a border, by default it will be gray. The cell's border color will override that. To select a Border Color, type in the HTML color code (e.g., #FF0000 for red) or click the Select... button to bring up the 216-color palette and select or enter a color there.

Earlier versions of the HTML Editor supported adding background images to table cells. Background images in cells have been dropped due to lack of support in many email programs.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments