Working With Images 5-5
– Border
: Specifies the size of the border around the image in pixels.
– HSpace
: Controls the horizontal spacing on the left and right sides of the image in pixels.
– VSpace
: Controls the vertical spacing on the top and bottom sides of the image in pixels
– Align
: Aligns the image with other items on the page left, middle, right, top, and so on. The preview area shows how the image aligns using the
current settings.
■
Advanced tab for advanced users:
– Id:
Specifies the ID of the image.
– Language Direction:
Sets the language direction of the image: left to right LTR or right to left RTL.
– Language Code:
Specifies the language code of the image for example, en, de, fr.
– Long Description URL:
Specifies the description of the page.
– Stylesheet Classes:
Specifies the name of the CSS class for the image that is, the class attribute value of the IMG tag.
– Advisory Title:
Specifies the description of the target object.
– Style:
Specifies the style.
4. Click OK to close the dialog.
Considerations
■
Many of the settings in the image properties form height, width, border, horizontal spacing, and vertical spacing specify their values in pixels. For more
information about pixels, contact your site designer or site manager.
■
The alternative text for an image can be quite useful. By using the alt attribute value, you can ensure that alternate text displays when you hover the mouse over
the image or the image does not display properly on the web page. In addition, this works for most screen reader programs, which are used by the visually
impaired.
5.6 Deleting an Image
You can easily delete an image that you or another contributor previously added in Contributor.
To delete an image, perform these tasks:
1.
Click to select the image so that it is displayed in a frame Figure 5–6
.
Note: You can use the icons to the right of the field to lock the aspect
ratio of the image or reset the image to its original size width and height.
5-6 Oracle Fusion Middleware Users Guide for Site Studio Contributor
Figure 5–6 Unselected and Selected Image
2. Press the Delete key on your keyboard.
Note: The image is removed from the web page, but it is not
removed from the content server.
6
Working With Tables 6-1
6
Working With Tables
A table can be used for several different purposes on a web page. If you have spent much time in a word processing program, then you are probably familiar with tables
for organizing text and graphics or presenting data in a tabular way similar to a spreadsheet.
On a web page, you can use a table for the same purpose. In addition, you can use it for its more common use on the web pages, and that is to structure content. On a
typical web page, text, graphics, and other content appears in a free-flowing way. The text and images wrap, and one item appears after the next. There is no way to control
where items appear on the web page, and this is where tables become useful.
Using a table, you can place text or images in one cell and align it accordingly, and then place more text or images in another cell and align it accordingly. If, for example,
you want to place text beside an image, or place text, graphics, and other types of content side-by-side or one on top of the other, then you would use a table.
You can perform the following tasks with a table:
■
Adding a Table on page 6-1
■
Resizing a Table on page 6-3
■
Changing the Width of Columns in a Table on page 6-3
■
Changing the Height of Rows in a Table on page 6-3
■
Adding Rows or Columns to a Table on page 6-4
■
Deleting Rows and Columns in a Table on page 6-4
■
Splitting and Merging Cells in a Table on page 6-4
■
Changing the Properties of a Table on page 6-5
■
Changing the Properties of Table Cells on page 6-6
■
Deleting a Table on page 6-7
6.1 Adding a Table
You can add tables in Contributor using the editing toolbar. Once you add the table, you can resize it, change its properties, and more.
To add a table, perform these tasks:
1.
Place your cursor where you would like to add the table.
2.
Click the Insert Table icon Figure 6–1
in the editing toolbar.
6-2 Oracle Fusion Middleware Users Guide for Site Studio Contributor
Figure 6–1 Table Icon
The table properties dialog is displayed Figure 6–2
.
Figure 6–2 Table Dialog
3. Specify or edit each table property as required:
■
Rows: Specifies the number of rows in the table.
■
Columns: Specifies the number of columns in the table.
■
Border size: Specifies the border size for the table in pixels. Set this to 0 if
you do not want borders around the table.
■
Alignment: Specifies if the table uses the default setting, or is right aligned,
left aligned, or centered.
■
Width: Specifies the width of the table in pixels or percentage of the page
width. If you do not specify a width, the table is sized automatically to fit the cell contents.
■
Height: Specifies the height of the table in pixels. If you do not specify a
height, the table is sized automatically to fit the cell contents.
■
Cell spacing: Specifies the thickness of the cells borders.
■
Cell padding: Specifies the space between the contents of a cell and the inside
border of a cell.
■
Caption: Specifies the title of your table. The title appears above the table.
■
Summary: Sets a comment on the table. The comment will not appear in the
table. Providing a summary is useful for accessibility purposes. Not all of the options are required to build a table. You have to provide the
number of rows and columns. All other attributes are optional and you may use them depending on your needs.
4. Click OK to add the table.
The table is added to your page. You can then resize and change its attributes using your mouse or the table properties dialog see
Changing the Properties of a Table
on page 6-5.
Working With Tables 6-3
6.2 Resizing a Table
