From 3864fb29d68fe9aff5bb68954a32ec1bb67c50b8 Mon Sep 17 00:00:00 2001
From: Patrick Ziegler <ziegler.patrick@hotmail.de>
Date: Thu, 7 Aug 2025 22:44:57 +0200
Subject: [PATCH] Cleanup "user interface" doc pages

This adapts the links to other pages and images so that they are
properly rendered on GitHub.
---
 .../userinterface/component_tree.asciidoc     | 27 ++++---
 .../userinterface/context_menu.asciidoc       | 70 +++++++---------
 .../userinterface/design_view.asciidoc        | 36 +++++----
 .../html-src/userinterface/index.asciidoc     | 20 +++--
 .../html-src/userinterface/palette.asciidoc   | 81 ++++++++-----------
 .../palette_context_menu.asciidoc             | 80 +++++++++---------
 .../userinterface/palette_manager.asciidoc    | 53 ++++++------
 .../property_editor_color.asciidoc            |  8 +-
 .../property_editor_font.asciidoc             |  8 +-
 .../property_editor_image.asciidoc            | 10 ++-
 .../property_editor_inset.asciidoc            |  8 +-
 .../property_editor_point.asciidoc            |  8 +-
 .../property_editor_rectangle.asciidoc        |  8 +-
 .../property_editor_string.asciidoc           | 16 ++--
 .../property_editor_string_array.asciidoc     |  8 +-
 .../property_editor_taborder.asciidoc         |  8 +-
 .../userinterface/property_pane.asciidoc      | 24 +++---
 .../property_pane_context_menu.asciidoc       | 39 ++++-----
 .../userinterface/source_view.asciidoc        | 16 ++--
 .../userinterface/structure_view.asciidoc     | 36 ++++-----
 .../html-src/userinterface/toolbar.asciidoc   | 31 +++----
 21 files changed, 310 insertions(+), 285 deletions(-)

diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/component_tree.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/component_tree.asciidoc
index a09a55c02..49b3c91b8 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/component_tree.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/component_tree.asciidoc
@@ -1,9 +1,13 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Component Tree
 
-image:images/component_tree.png[image,width=289,height=303]
+image:images/component_tree.png[image]
 
 The *Component Tree* shows the hierarchical relationship between all of
-the components in the *link:design_view.html[Design View]*.
+the components in the xref:design_view.adoc[*Design View*].
 
 Each component in the tree shows is icon (with potential decorators),
 its variable name and text label. Components may be represented as local
@@ -16,13 +20,13 @@ Icon decorators (see table below) are used to indicate whether a component
 defines and events or is exposed as a public component of a custom container.
 
 Expand the components in the tree using the *Expand All*
-image:images/expand_all.gif[image,width=16,height=16] button, and
+image:images/expand_all.gif[image] button, and
 collapse them using the *Collapse All*
-image:images/collapse_all.gif[image,width=16,height=16] button.
+image:images/collapse_all.gif[image] button.
 
 Right-click on an entry in the tree to access the same
-link:context_menu.html[context menu] available in the
-*link:design_view.html[Design View]*. Components may be re-arranged in
+xref:context_menu.adoc[context menu] available in the
+xref:design_view.adoc[*Design View*]. Components may be re-arranged in
 the tree via drag/drop and deleted using the *Delete* key.
 
 Multiple components may be selected in the tree by holding down the
@@ -33,18 +37,15 @@ contiguous selections.
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Decorator Name
-a|
-=== Description
+|*Icon*
+|*Decorator Name*
+|*Description*
 
 |image:images/exposed_decorator.png[image]
 |*Exposed*
 |Child widgets exposed in a custom container.
 
-|image:images/event_decorator.gif[image,width=7,height=7]
+|image:images/event_decorator.gif[image]
 |*Event* 
 |Components with one or more event handlers defined.
 |===
\ No newline at end of file
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/context_menu.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/context_menu.asciidoc
index 40cdee5fe..efbdf30d7 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/context_menu.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/context_menu.asciidoc
@@ -1,22 +1,23 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Context Menu
 
 The *Context Menu* provides access to commands commonly used in the
-*link:design_view.html[Design View]* and
-*link:component_tree.html[Component Tree].*
+xref:design_view.adoc[*Design View*] and
+xref:component_tree.adoc[*Component Tree*].
 
 [width="100%",cols="10%,20%,70%",]
 |===
-a|
-=== Icon
-a|
-=== Menu Name
-a|
-=== Description
+|*Icon*
+|*Menu Name*
+|*Description*
 
 |image:images/cut_edit.gif[image]
 |*Cut*
 |Copy the selected components to the clipboard and remove them from the
-*link:design_view.html[Design View]*.
+ xref:design_view.adoc[*Design View*].
 
 |image:images/copy_edit.gif[image]
 |*Copy*
@@ -26,9 +27,9 @@ a|
 |*Paste* 
 |Paste the selected components from the clipboard.
 
-|image:images/delete.gif[image,width=16,height=16]
+|image:images/delete.gif[image]
 |*Delete*
-|Delete the selected components from the *link:design_view.html[Design View]*.
+|Delete the selected components from the xref:design_view.adoc[*Design View*].
 
 |image:images/test.png[image]
 |*Test/Preview*
@@ -37,31 +38,23 @@ layout and resizing behavior of your components.
 
 |image:images/editor_refresh.png[image]
 |*Refresh*
-|Re-parse the current source and refresh the *link:design_view.html[Design View]*.
+|Re-parse the current source and refresh the xref:design_view.adoc[*Design View*].
 
 |
 |* Add event handler >*
-|Implement an link:../features/event_handling.html[event handler] for an
-event triggered by the selected component.
+|Implement an xref:../features/event_handling.adoc[event handler] for an
+ event triggered by the selected component.
 
-+++
-<p>
-  <img src="images/evant_handler_swing.png">
-  <img src="images/evant_handler_swt.png" align="top">
-</p>
-+++
+image:images/evant_handler_swing.png[image]
+image:images/evant_handler_swt.png[image]
 
 |
 |* Style >*
 | Change the style of the selected components.
 
-+++
-<p>
-  <img src="images/change_style1.png">
-  <img src="images/change_style2.png" align="top">
-  <img src="images/change_style3.png" align="top">
-</p>
-+++
+image:images/change_style1.png[image]
+image:images/change_style2.png[image]
+image:images/change_style3.png[image]
 
 |
 |*Set Layout >*
@@ -80,35 +73,30 @@ image:images/order_menu.png[image]
 |image:images/exposeComponent.gif[image,width=16,height=16]
 |* Expose Component...*
 | Add a public or protected accessor for the selected component. Components
-exposed in link:../features/visual_inheritance.html[superclasses] or in
-link:../features/custom_composites.html[embedded panels] can be selected
+exposed in xref:../features/visual_inheritance.adoc[superclasses] or in
+xref:../features/custom_composites.adoc[embedded panels] can be selected
 and edited by the user.
 
 image:images/expose_component.png[image]
 
 |image:images/morph2.gif[image,width=16,height=16]
 |* Morph >*
-| link:../features/morphing.html[Morph] the selected components into
+| xref:../features/morphing.adoc[Morph] the selected components into
 another type. Similar component types are listed. Direct subclasses of
 the select component may also be selected as can any other arbitrary
 class.
 
+image:images/morph_menu1.png[image]
+image:images/morph_menu2.png[image]
 
-+++
-<p>
-  <img src="images/morph_menu1.png" align="top">
-  <img src="images/morph_menu2.png" align="top">
-</p>
-+++
-
-|image:images/factory.gif[image,width=16,height=16]
+|image:images/factory.gif[image]
 |* Factory >*
-| Create a link:../features/factories.html[factory] from the selected
+| Create a xref:../features/factories.adoc[factory] from the selected
 component or apply a factory to the selected component.
 
-image:images/factory_menu.png[image,width=159,height=58]
+image:images/factory_menu.png[image]
 
-|image:images/rename_convert2.gif[image,width=16,height=16]
+|image:images/rename_convert2.gif[image]
 |* Rename...*
 | Rename the selected components and/or convert them to fields or local
 variables.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/design_view.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/design_view.asciidoc
index beabcffb0..fe0fec234 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/design_view.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/design_view.asciidoc
@@ -1,38 +1,42 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Design View
 
 The *Design View* is your virtual sketchpad. You can add or remove
 components, edit layout properties, direct edit labels, and see what
 your overall design looks like as it evolves.
 
-image:images/design_view.png[image,width=558,height=446]
+image:images/design_view.png[image]
 
 Select a component in the *Design View* to make it appear in the
-*link:property_pane.html[Property Pane]*, where you can edit its
+xref:property_pane.adoc[*Property Pane*], where you can edit its
 properties. This will also activate selection handles for the component.
 Selection handles allow you change layout properties of the selected
 control and, for some layout managers, also layout properties of sibling
 controls. All properties that can be changed in the *Design View* can be
-also changed in the *link:property_pane.html[Property Pane]*. Depending
-on the link:../layoutmanagers/index.html[layout manager] in effect, row
+also changed in the xref:property_pane.adoc[*Property Pane*]. Depending
+on the xref:../layoutmanagers/index.adoc[layout manager] in effect, row
 and column headers may be visible in the header area.
 
 Right-click on component to access the same
-link:context_menu.html[context menu] available in the
-*link:component_tree.html[Component Tree]*. Components may added by
-choosing them from the *link:palette.html[Palette]* and deleted using
+xref:context_menu.adoc[context menu] available in the
+xref:component_tree.adoc[*Component Tree*]. Components may added by
+choosing them from the *xref:palette.adoc[*Palette*] and deleted using
 the *Delete* key.
 
 == Component Selection
 
 Use the image:images/SelectionTool.gif[image,width=16,height=16]
-*Selection* tool in the *link:palette.html[Palette]* to select one or
+*Selection* tool in the xref:palette.adoc[*Palette*] to select one or
 more widgets. Hold the *Shift* or *Ctrl* key down to select multiple
 widgets.
 
 image:images/single_selection.png[image]
 
-Use the image:images/MarqueeSelectionTool.gif[image,width=16,height=16]
-*Marquee* tool in the *link:palette.html[Palette]* to rubber band select
+Use the image:images/MarqueeSelectionTool.gif[image]
+*Marquee* tool in the xref:palette.adoc[*Palette*] to rubber band select
 multiple widgets. Hold the *Alt* key and start dragging to automatically
 activate the  *Marquee* tool.
 
@@ -47,7 +51,7 @@ columns. First select a component in the **Design View**, and then hit
 the *Space* key to reveal an edit box in which you can set the
 component's text property.
 
-image:images/direct_edit.png[image,width=230,height=147]
+image:images/direct_edit.png[image]
 
 == Moving Components
 
@@ -58,7 +62,7 @@ showing its current location. Dynamic snap / alignment points are
 provided to make it convenient to align the component with other
 components or the window margin.
 
-image:images/feedback_drag_xy.png[image,width=229,height=124]
+image:images/feedback_drag_xy.png[image]
 
 In grid oriented layouts different feedback is shown depending on which
 cell the cursor is over. If the cursor is positioned over an open cell,
@@ -69,9 +73,9 @@ column will be inserted. If the cursor is positioned over an already
 populated cell, that cell is highlighted in red and the cursor shows a
 red minus sign.
 
-image:images/feedback_drag_grid1.png[image,width=229,height=124] 
-image:images/feedback_drag_grid2.png[image,width=229,height=124] 
-image:images/feedback_drag_grid3.png[image,width=229,height=124]
+image:images/feedback_drag_grid1.png[image] 
+image:images/feedback_drag_grid2.png[image] 
+image:images/feedback_drag_grid3.png[image]
 
 == Resizing Components
 
@@ -84,7 +88,7 @@ the window margin. Resizing a component also snaps to the preferred size
 of the resized component or to the size (vertical or horizontal) of any
 other component on the same parent.
 
-image:images/feedback_size_xy.png[image,width=229,height=124]
+image:images/feedback_size_xy.png[image]
 
 In grid oriented layouts, resizing a component will cause it to span
 more than one rows or columns. During the resize operation, the cells
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/index.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/index.asciidoc
index 2d093f177..d8c0ca896 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/index.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/index.asciidoc
@@ -1,3 +1,7 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = User Interface
 
 The editor looks like this:
@@ -6,11 +10,11 @@ image:images/userinterface.png[image]
 
 The editor is composed of the following major components:
 
-* *link:design_view.html[Design View]* - the main visual layout area.
-* *link:source_view.html[Source View]* - write code and review the generated code
-* *link:structure_view.html[Structure View]* - composed of the *Component Tree* and the *Property Pane.*
-** *link:component_tree.html[Component Tree]* - shows the hierarchical relationship between all of the components.
-** *link:property_pane.html[Property Pane]* - displays properties and events of the selected components.
-* *link:palette.html[Palette]* - provides quick access to toolkit-specific components.
-* *link:toolbar.html[Toolbar]* - provides access to commonly used commands.
-* *link:context_menu.html[Context Menu]* - provides access to commonly used commands.
+* xref:design_view.adoc[*Design View*] - the main visual layout area.
+* xref:source_view.adoc[*Source View*] - write code and review the generated code
+* xref:structure_view.adoc[*Structure View*] - composed of the *Component Tree* and the *Property Pane.*
+** xref:component_tree.adoc[*Component Tree*] - shows the hierarchical relationship between all of the components.
+** xref:property_pane.adoc[*Property Pane*] - displays properties and events of the selected components.
+* xref:palette.adoc[*Palette*] - provides quick access to toolkit-specific components.
+* xref:toolbar.adoc[*Toolbar*] - provides access to commonly used commands.
+* xref:context_menu.adoc[*Context Menu*] - provides access to commonly used commands.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/palette.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/palette.asciidoc
index dda41165b..3a4938193 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/palette.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/palette.asciidoc
@@ -1,31 +1,33 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Palette
 
-++++
-<p>
-  <img src="images/palette_swt.png" align="top">
-  <img src="images/palette_swing.png" align="top">
-</p>
-++++
+--
+image:images/palette_swt.png[image]
+image:images/palette_swing.png[image]
+--
 
 The *Palette* provides quick access to toolkit-specific components as
 well as any custom components installed by the user. The *Palette* is
 organized into categories which may be expanded, collapsed or hidden.
 
-To add a components to the *link:design_view.html[Design View]*, you
+To add a components to the xref:design_view.adoc[*Design View*], you
 can:
 
 * Select it in the palette and drop it on the
-*link:design_view.html[Design View]* or
-*link:component_tree.html[Component Tree]* by clicking in the desired location.
+xref:design_view.adoc[*Design View*] or
+xref:component_tree.adoc[*Component Tree*] by clicking in the desired location.
 * Use the *Choose Component* command to select the widget type from *Choose Component* dialog.
 
 Multiple widgets of the same type may be added to the
-*link:design_view.html[Design View]* by holding down the *Ctrl* key when
+xref:design_view.adoc[*Design View*] by holding down the *Ctrl* key when
 selecting the widget in the *Palette*.
 
 The palette may be customized by right-clicking anywhere in the palette
-to access the link:palette_context_menu.html[palette context menu] or by
-opening the *link:palette_manager.html[Palette Manager]* dialog..
+to access the xref:palette_context_menu.adoc[palette context menu] or by
+opening the xref:palette_manager.adoc[*Palette Manager*] dialog..
 
 The following commands are common to every palette:
 
@@ -34,49 +36,40 @@ The following commands are common to every palette:
 * Choose component
 * Tab Order
 
- 
-
 image:images/palette_context_menu.png[image]
 
 == Common Palette Commands
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Menu Name
-a|
-=== Description
-
-|image:images/SelectionTool.gif[image,width=16,height=16]
+|*Icon*
+|*Menu Name*
+|*Description*
+
+|image:images/SelectionTool.gif[image]
 |*Selection*
 | Select one or more widgets. Hold the *Shift* or *Ctrl* key down to
 select multiple widgets.
 
 image:images/single_selection.png[image]
 
-|image:images/MarqueeSelectionTool.gif[image,width=16,height=16]
+|image:images/MarqueeSelectionTool.gif[image]
 |*Marquee*
 | Rubber band select multiple widgets. Hold the *Alt* key and start
 dragging to automatically activate the *Marquee* tool.
 
 image:images/marquee_select.png[image]
 
-|image:images/ChooseComponent.gif[image,width=16,height=16]
+|image:images/ChooseComponent.gif[image]
 |*Choose component*
 | Adds a component to the editor. Enter the name of the class or select it
 from the history list. You can right-click on an item in the list to
 *Remove from History*.
 
-+++
-<p>
-  <img src="images/choose_component_dialog.png" align="top">
-  <img src="images/remove_from_history.png" align="top">
-</p>
-+++
+image:images/choose_component_dialog.png[image]
+image:images/remove_from_history.png[image]
 
-|image:images/tab_order.gif[image,width=16,height=16]
+|image:images/tab_order.gif[image]
 |*Tab Order*
 | Set the tab order of the components.
 
@@ -92,20 +85,18 @@ Ctrl+Click to move the selected  index to another component.
 . Deactivate the Tab Order tool by choosing another tool (such as
 *Selection*).
 
-image:images/set_tab_order.png[image,width=296,height=137]
+image:images/set_tab_order.png[image]
 |===
 
 The position of the *Palette* may be configured via drag and drop or by
 right-clicking on the *Palette* header and selecting the *Dock On*
 command. The *Palette* may be docked to either the left or right side of
-the *link:design_view.html[Design View]*.
+the xref:design_view.adoc[*Design View*].
 
-++++
-<p>
-  <img src="../preferences/images/flyout_palette1.png" align="top">
-  <img src="images/palette_dock_on.png" align="top">
-</p>
-++++
+--
+image:../preferences/images/flyout_palette1.png[image]
+image:images/palette_dock_on.png[image]
+--
 
 The *Palette* may also be collapse and expanded on demand.
 
@@ -117,10 +108,8 @@ view or right-click on the *Palette* and select the *Extract as view*
 command. Closing the *Palette* view will make the *Palette* reappear as
 embedded view within the editor.
 
-++++
-<p>
-  <img src="../preferences/images/windowbuilder_views.png" align="top">
-  <img src="../preferences/images/palette_view.png" align="top">
-  <img src="images/palette_extract_as_view.png" align="top">
-</p>
-++++
\ No newline at end of file
+--
+image:../preferences/images/windowbuilder_views.png[image]
+image:../preferences/images/palette_view.png[image]
+image:images/palette_extract_as_view.png[image]
+--
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/palette_context_menu.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/palette_context_menu.asciidoc
index 12e708a7d..444436072 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/palette_context_menu.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/palette_context_menu.asciidoc
@@ -1,18 +1,19 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Palette Context Menu
 
-The link:palette.html[palette] may be customized by right-clicking
+The xref:palette.adoc[palette] may be customized by right-clicking
 anywhere in the palette to access the palette context menu.
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Menu Name
-a|
-=== Description
-
-|image:images/add_category.gif[image,width=16,height=16]
+|*Icon*
+|*Menu Name*
+|*Description*
+
+|image:images/add_category.gif[image]
 |*Add category...*
 | Create a new category to contain palette entries. The category may have
 a name, a description and an initial state of *visible* and/or *opened
@@ -21,7 +22,7 @@ or inserted at the end of the list.
 
 image:images/new_palette_category.png[image]
 
-|image:images/add_component.gif[image,width=16,height=16]
+|image:images/add_component.gif[image]
 |*Add component...*
 | Create a new palette entry representing a user-specified component. The
 entry must have a name, class, and a description (visible as hover help
@@ -33,18 +34,19 @@ image:images/add_component_dialog.png[image]
 
 |
 |*Add static factory >*
-| image:images/add_factory_menu.png[image]Add components from a static
-link:../features/factories.html[factory]. Single factory components may
-be added or multiple factory components may be added at the same time.
+| Add components from a static xref:../features/factories.adoc[factory].
+Single or multiple factory components may be added at the same time.
 
-To add a single link:../features/factories.html[factory] item, give it a
+image:images/add_factory_menu.png[image]
+
+To add a single xref:../features/factories.adoc[factory] item, give it a
 name, select the factory class and method signature, and give it a
 description. The component may be initially *visible* or not and may be
 added to any available category.
 
 image:images/add_static_factory_dialog.png[image]
 
-To add a multiple link:../features/factories.html[factory] items at the
+To add a multiple xref:../features/factories.adoc[factory] items at the
 same time, select the factory class and method signatures. The component
 name and description will be given default values. The components will
 be initially *visible* and may be added to any available category.
@@ -53,9 +55,10 @@ image:images/add_static_factories_dialog.png[image]
 
 |
 |*Add instance factory >*
-| image:images/add_factory_menu.png[image]Add components from an instance
-factory. Single factory components may be added or multiple factory
-components may be added at the same time.
+| Add components from an instance factory.
+Single or multiple factory components may be added at the same time.
+
+image:images/add_factory_menu.png[image]
 
 To add a single factory item, give it a name, select the factory class
 and method signature, and give it a description. The component may be
@@ -77,12 +80,8 @@ image:images/add_instance_factories_dialog.png[image]
 a new category to add the entries to. The category name defaults to the
 name of the JAR.
 
-+++
-<p>
-  <img src="images/palette_import_jar_archive_dialog.gif">
-  <img src="images/palette_workspace_jar_selection_dialog.png" align="top">
-</p>
-+++
+image:images/palette_import_jar_archive_dialog.gif[image]
+image:images/palette_workspace_jar_selection_dialog.png[image]
 
 _If no widgets appear when you select a jar file, this is usually an
 indication that the jar file does not provide a proper JavaBean manifest
@@ -95,42 +94,45 @@ using the *Add Component...* command._
 |*Edit...*
 | Edit the selected category or component.
 
-image:images/edit_palette_category.png[image,width=394,height=249]
+image:images/edit_palette_category.png[image]
 
-image:images/edit_palette_component.png[image,width=415,height=235]
+image:images/edit_palette_component.png[image]
 
-|image:images/delete.gif[image,width=16,height=16] |*Delete* |Delete the
-selected category or entry.
+|image:images/delete.gif[image]
+|*Delete*
+|Delete the selected category or entry.
 
 |
 |*Restore default palette...*
 |Restore the palette to its default state (and custom widgets will be removed).
 
-|image:images/manager.gif[image,width=16,height=16] |*Palette
-manager...* |The *link:palette_manager.html[Palette Manager]* dialog
+|image:images/manager.gif[image]
+|*Palette manager...*
+|The xref:palette_manager.adoc[*Palette Manager*] dialog
 allows the toolkit-specific palette to be fully configured. Categories,
 and entries may be added, edited and removed and JAR files imported.
 Items may be rearranged using the *Up* and *Down* buttons or via drag
 and drop. The *Collapse All* and *Expand All* buttons show or hide all
 of the elements in the list.
 
-|image:images/import_palette.gif[image,width=16,height=15]
+|image:images/import_palette.gif[image]
 |*Import palette...*
 | Import the current palette in XML format.
 
-image:images/import_palette_dialog.png[image,width=428,height=326]
+image:images/import_palette_dialog.png[image]
 
-|image:images/export_palette.gif[image,width=16,height=15] |*Export
-palette...* a|
-Export the current palette in XML format.
+|image:images/export_palette.gif[image]
+|*Export palette...*
+|Export the current palette in XML format.
 
-image:images/export_palette_dialog.png[image,width=428,height=131]
+image:images/export_palette_dialog.png[image]
 
-|image:images/settings.gif[image,width=16,height=16] |*Settings...* a|
-The palette entries may be configured to appear in one to five columns.
+|image:images/settings.gif[image]
+|*Settings...*
+|The palette entries may be configured to appear in one to five columns.
 By default, each entry is shown with an icon and class name. Optionally,
 each entry can be shown with an icon only. Category and entry fonts may
 also be selected.
 
-image:images/palette_settings.png[image,width=394,height=252]
+image:images/palette_settings.png[image]
 |===
\ No newline at end of file
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/palette_manager.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/palette_manager.asciidoc
index 93cac72fb..f6e39e599 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/palette_manager.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/palette_manager.asciidoc
@@ -1,10 +1,12 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Palette Manager
 
-[width="100%",cols="1%,99%"]
-|===
-|image:images/palette_context_menu2.png[image]
-| The *Palette Manager* may be accessed from the
-link:palette_context_menu.html[palette context menu].
+image:images/palette_context_menu2.png[image]
+The *Palette Manager* may be accessed from the
+xref:palette_context_menu.adoc[palette context menu].
 
 The *Palette Manager* dialog allows the toolkit-specific palette to be
 fully configured. Categories and entries may be added, edited,
@@ -16,23 +18,18 @@ of the elements in the list.
 
 Items may be hidden from the palette by unchecking the checkbox next to
 their category or component name.
-|===
 
-++++
-<p>
-  <img src="images/palette_manager_swt.png">
-  <img src="images/palette_manager_swng.png" align="top">
-</p>
-++++
+--
+image:images/palette_manager_swt.png[image]
+image:images/palette_manager_swng.png[image]
+--
 
 == Palette Manager Commands
 
 [width="100%",cols="20%,80%"]
 |===
-a|
-=== Command
-a|
-=== Description
+|*Command*
+|*Description*
 
 |*Add Category...*
 | Create a new category to contain palette entries. The category may have
@@ -56,7 +53,7 @@ added to any available category.
 image:images/add_component_dialog.png[image]
 
 Select the *Single static factory...* command to add a single component
-from a static link:../features/factories.html[factory]. To add a single
+from a static xref:../features/factories.adoc[factory]. To add a single
 factory item, give it a name, select the factory class and method
 signature, and give it a description. The component may be initially
 *visible* or not and may be added to any available category.
@@ -64,7 +61,7 @@ signature, and give it a description. The component may be initially
 image:images/add_static_factory_dialog.png[image]
 
 Select the *Several static factories...* command to add a multiple
-components from a static link:../features/factories.html[factory]. To
+components from a static xref:../features/factories.adoc[factory]. To
 add a multiple factory items at the same time, select the factory class
 and method signatures. The component name and description will be given
 default values. The components will be initially *visible* and may be
@@ -95,12 +92,10 @@ image:images/add_instance_factories_dialog.png[image]
 a new category to add the entries to. The category name defaults to the
 name of the JAR.
 
-+++
-<p>
-  <img src="images/palette_import_jar_archive_dialog.gif">
-  <img src="images/palette_workspace_jar_selection_dialog.png" align="top">
-</p>
-+++
+--
+image:images/palette_import_jar_archive_dialog.gif[image]
+image:images/palette_workspace_jar_selection_dialog.png[image]
+--
 
 _If no widgets appear when you select a jar file, this is usually an
 indication that the jar file does not provide a proper JavaBean manifest
@@ -112,12 +107,10 @@ using the *Add Entry >>* command._
 |*Edit...*
 | Edit the selected category or component.
 
-+++
-<p>
-  <img src="images/edit_palette_category.png">
-  <img src="images/edit_palette_component.png" align="top">
-</p>
-+++
+--
+image:images/edit_palette_category.png[image]
+image:images/edit_palette_component.png[image]
+--
 
 |*Remove...*
 |Remove the selected category or entry.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_color.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_color.asciidoc
index e5e311118..6ea2532a1 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_color.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_color.asciidoc
@@ -1,7 +1,11 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Color Editor
 
-image:images/property_editor_color1.png[image,width=235,height=18] 
-image:images/property_editor_color2.png[image,width=235,height=18]
+image:images/property_editor_color1.png[image] 
+image:images/property_editor_color2.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Color
 Chooser* and select a color.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_font.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_font.asciidoc
index ae7edd08d..ce97fa370 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_font.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_font.asciidoc
@@ -1,7 +1,11 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Font Editor
 
-image:images/property_editor_font1.png[image,width=235,height=18] 
-image:images/property_editor_font2.png[image,width=235,height=18]
+image:images/property_editor_font1.png[image] 
+image:images/property_editor_font2.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Font
 Chooser* and select a font.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_image.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_image.asciidoc
index 8aa01bba0..6ea3865b2 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_image.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_image.asciidoc
@@ -1,7 +1,11 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Icon / Image Editor
 
-image:images/property_editor_image1.png[image,width=306,height=18] 
-image:images/property_editor_image2.png[image,width=282,height=18]
+image:images/property_editor_image1.png[image] 
+image:images/property_editor_image2.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Image
 Chooser* and select an icon or image.
@@ -11,7 +15,7 @@ The *Image Chooser* has options for selecting images defined in the
 also provided to set the image to *null* or remove any generated image.
 A preview of the selected image is shown on the right.
 
-image:images/property_editor_image3.png[image,width=879,height=736]
+image:images/property_editor_image3.png[image]
 
 == User Extensions
 
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_inset.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_inset.asciidoc
index 998ba8e8a..59a7dd7b7 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_inset.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_inset.asciidoc
@@ -1,8 +1,12 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Inset Editor
 
-image:images/property_editor_inset1.png[image,width=247,height=18]
+image:images/property_editor_inset1.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Inset
 Editor* and enter paired top, left, bottom & right values.
 
-image:images/property_editor_inset2.png[image,width=237,height=150]
\ No newline at end of file
+image:images/property_editor_inset2.png[image]
\ No newline at end of file
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_point.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_point.asciidoc
index 052319b97..a00297e32 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_point.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_point.asciidoc
@@ -1,7 +1,11 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Point Editor
 
-image:images/property_editor_point1.png[image,width=273,height=18] 
-image:images/property_editor_point2.png[image,width=273,height=18]
+image:images/property_editor_point1.png[image] 
+image:images/property_editor_point2.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Point
 Editor* and enter paired x & y or width & height values.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_rectangle.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_rectangle.asciidoc
index ad83d3edc..5d96dc43f 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_rectangle.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_rectangle.asciidoc
@@ -1,7 +1,11 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Rectangle Editor
 
-image:images/property_editor_rectangle1.png[image,width=273,height=18] 
-image:images/property_editor_rectangle2.png[image,width=273,height=18]
+image:images/property_editor_rectangle1.png[image] 
+image:images/property_editor_rectangle2.png[image]
 
 Click the image:images/ellipses.png[image] button to access the
 *Rectangle Editor* and enter paired x, y, width & height values.
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string.asciidoc
index 976ed0b1e..3a2e149ed 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string.asciidoc
@@ -1,6 +1,10 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = String Editor
 
-image:images/property_editor_string1.png[image,width=235,height=18]
+image:images/property_editor_string1.png[image]
 
 Enter single-line strings directly into the property pane or click the
 image:images/ellipses.png[image] button to access the *String Editor*
@@ -16,9 +20,7 @@ string* field. By default, key names are searched but you can also
 search values or both keys and values by selecting the appropriate radio
 button at the bottom of the dialog.
 
-++++
-<p>
-  <img src="images/property_editor_string2.png">
-  <img src="images/property_editor_string3.png" align="top">
-</p>
-++++
\ No newline at end of file
+--
+image:images/property_editor_string2.png[image]
+image:images/property_editor_string3.png[image]
+--
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string_array.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string_array.asciidoc
index c466b7706..16051567c 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string_array.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_string_array.asciidoc
@@ -1,9 +1,13 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = String Array Editor
 
-image:images/property_editor_string_array1.png[image,width=253,height=18]
+image:images/property_editor_string_array1.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *String
 Array Editor* and enter multiple strings. Each line is treated as a
 separate string.
 
-image:images/property_editor_string_array2.png[image,width=247,height=232]
\ No newline at end of file
+image:images/property_editor_string_array2.png[image]
\ No newline at end of file
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_taborder.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_taborder.asciidoc
index ba0f2670c..0421811bd 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_taborder.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_editor_taborder.asciidoc
@@ -1,6 +1,10 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Tab Order Editor
 
-image:images/property_editor_taborder1.png[image,width=273,height=18]
+image:images/property_editor_taborder1.png[image]
 
 Click the image:images/ellipses.png[image] button to access the *Tab
 Order Editor*. Check and uncheck the checkboxes next to the component
@@ -9,4 +13,4 @@ names to add and remove components from the tab order. Use the *Up* and
 all* and *Deselect all* buttons to add or remove all of the widgets from
 the tab order.
 
-image:images/property_editor_taborder2.png[image,width=296,height=208]
\ No newline at end of file
+image:images/property_editor_taborder2.png[image]
\ No newline at end of file
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_pane.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_pane.asciidoc
index 243268bcb..f6e832513 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_pane.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_pane.asciidoc
@@ -1,3 +1,7 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Property Pane
 
 image:images/property_pane.png[image]
@@ -5,9 +9,9 @@ image:images/property_pane.png[image]
 The *Property Pane* displays properties and events of the selected
 components and provides editable text fields, lists and other controls
 to allow you to edit properties and
-link:../features/event_handling.html[events]. Select the control in the
-*link:component_tree.html[Component Tree]* or on the
-*link:design_view.html[Design View]* to display its properties in the
+xref:../features/event_handling.adoc[events]. Select the control in the
+xref:component_tree.adoc[*Component Tree*] or on the
+xref:design_view.adoc[*Design View*] to display its properties in the
 *Property Pane*.  Once visible in the *Property Pane*, these values can
 be edited.
 
@@ -42,13 +46,13 @@ properties in several different ways:
 * double click on the property title or value
 * single click on plus or minus sign
 * select property and press
-image:images/plus.png[image,width=18,height=18] to expand,
-image:images/minus.png[image,width=18,height=18] to collapse
+image:images/plus.png[image] to expand,
+image:images/minus.png[image] to collapse
 
-Some properties, such as link:property_editor_string.html[strings],
-link:property_editor_color.html[colors],
-link:property_editor_font.html[fonts] and
-link:property_editor_image.html[images], provide a custom property
+Some properties, such as xref:property_editor_string.adoc[strings],
+xref:property_editor_color.adoc[colors],
+xref:property_editor_font.adoc[fonts] and
+xref:property_editor_image.adoc[images], provide a custom property
 editor which can be access by clicking the
 image:images/ellipses.png[image] button.
 
@@ -74,4 +78,4 @@ change value;
 * select property and press *Delete* to change value to default.
 
 Right-click on the *Property Pane* to access the
-link:property_pane_context_menu.html[property pane context menu].
+xref:property_pane_context_menu.adoc[property pane context menu].
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/property_pane_context_menu.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/property_pane_context_menu.asciidoc
index 9137ba147..2af3d8671 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/property_pane_context_menu.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/property_pane_context_menu.asciidoc
@@ -1,52 +1,53 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 == Property Pane Toolbar & Context Menu
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Command Name
-a|
-=== Description
+|*Icon*
+|*Command Name*
+|*Description*
 
-|image:images/events.png[image,width=16,height=16]
+|image:images/events.png[image]
 |*Show events*
-|Show the link:../features/event_handling.html[events] defined for the
+|Show the xref:../features/event_handling.adoc[events] defined for the
 component. Expand a event category to see the individual events.
 Double-click on an event to generate a default event handler and switch
 to the *Source* view..
 
 image:images/property_pane_events.png[image]
 
-| image:images/goto_definition.gif[image,width=16,height=16] 
+| image:images/goto_definition.gif[image] 
 |*Goto Definition*
 |Switch to the *Source* view and place the cursor on the line where the
 selected control is instantiated.
 
-|image:images/local_to_field.gif[image,width=16,height=16]
+|image:images/local_to_field.gif[image]
 |*Convert local to field*
 |Convert the currently selected components from local variables to fields.
 
-|image:images/field_to_local.gif[image,width=16,height=16] |*Convert
-field to local* |Convert the currently selected components from fields
-to local variables.
+|image:images/field_to_local.gif[image]
+|*Convert field to local*
+|Convert the currently selected components from fields to local variables.
 
-|image:images/filter_advanced_properties.gif[image,width=16,height=16]
+|image:images/filter_advanced_properties.gif[image]
 |*Show advanced properties*
 |Show advanced properties in _italics_.
 
-|image:images/properties_default.gif[image,width=16,height=16]
+|image:images/properties_default.gif[image]
 |*Restore default value*
 |Revert the selected property to its default value.
 
-|image:images/exposeProperty.gif[image,width=16,height=16]
+|image:images/exposeProperty.gif[image]
 |*Expose property...*
 | Add a public or protected accessor for the selected property. Components
-exposed in link:../features/visual_inheritance.html[superclasses] or in
-link:../features/custom_composites.html[embedded panels] can be selected
+exposed in xref:../features/visual_inheritance.adoc[superclasses] or in
+xref:../features/custom_composites.adoc[embedded panels] can be selected
 and edited by the user.
 
-image:images/expose_property.png[image,width=394,height=308]
+image:images/expose_property.png[image]
 
 |
 |*Use default category*
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/source_view.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/source_view.asciidoc
index af669efcd..3120afe08 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/source_view.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/source_view.asciidoc
@@ -1,3 +1,7 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Source View
 
 The *Source View* is where you write code by hand and review the code
@@ -12,16 +16,16 @@ offers all of the same features as the standard *Java Editor* including:
 * Quick fix
 * Integrated debugging features
 
-image:images/source_view.png[image,width=442,height=456]
+image:images/source_view.png[image]
 
-This *link:../preferences/index.html[Editor Layout]* preference controls
+This xref:../preferences/index.adoc[*Editor Layout*] preference controls
 the position of the *Source View* relative to the
-*link:design_view.html[Design View]*. By default, they are "on separate
+xref:design_view.adoc[*Design View*]. By default, they are "on separate
 notebook tabs" labeled *Source* and *Design* (you can select which page
 is first). Additional options are provided to show the *Source View* and
-*link:design_view.html[Design View]* side by side or one above the
+xref:design_view.adoc[*Design View*] side by side or one above the
 other.
 
-image:images/source_view_right.png[image,width=902,height=305]
+image:images/source_view_right.png[image]
 
-image:images/source_view_bottom.png[image,width=545,height=456] 
+image:images/source_view_bottom.png[image] 
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/structure_view.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/structure_view.asciidoc
index beb3ab401..1430735ff 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/structure_view.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/structure_view.asciidoc
@@ -1,11 +1,15 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Structure View
 
 The *Structure View* is composed of the
-*link:component_tree.html[Component Tree]* and the
-*link:property_pane.html[Property Pane]*. The
-*link:component_tree.html[Component Tree]* shows the hierarchical
+xref:component_tree.adoc[*Component Tree*] and the
+xref:property_pane.adoc[*Property Pane*]. The
+xref:component_tree.adoc[*Component Tree*] shows the hierarchical
 relationship between all of the components in the design view, while the
-*link:property_pane.html[Property Pane]* displays properties and events
+xref:property_pane.adoc[*Property Pane*] displays properties and events
 of the selected controls and provides editable text fields, lists and
 other controls to allow you to edit properties and events
 
@@ -16,14 +20,12 @@ or by right-clicking on the *Structure View* header and selecting the
 image:images/structure_view_dock_on.png[image]
 
 The *Structure View* may be docked to the top, bottom, left or right of
-the *link:design_view.html[Design View]*.
+the xref:design_view.adoc[*Design View*].
 
-++++
-<p>
-  <img src="../preferences/images/dock_left.png">
-  <img src="../preferences/images/dock_top.png" align="top">
-</p>
-++++
+--
+image:../preferences/images/dock_left.png[image]
+image:../preferences/images/dock_top.png[image]
+--
 
 The *Structure View* is also available as a standalone view. Use the
 *Window > Show View > Other...* command and open the *WindowBuilder >
@@ -31,10 +33,8 @@ Structure* view or right-click on the *Structure View* and select the
 *Extract as view* command. Closing the *Structure View* will make the
 *Structure View* reappear as embedded view within the editor
 
-++++
-<p>
-  <img src="../preferences/images/windowbuilder_views.png">
-  <img src="../preferences/images/structure_view.png" align="top">
-  <img src="images/structure_extract_as_view.png" align="top">
-</p>
-++++
\ No newline at end of file
+--
+image:../preferences/images/windowbuilder_views.png[image]
+image:../preferences/images/structure_view.png[image]
+image:images/structure_extract_as_view.png[image]
+--
diff --git a/org.eclipse.wb.doc.user/html-src/userinterface/toolbar.asciidoc b/org.eclipse.wb.doc.user/html-src/userinterface/toolbar.asciidoc
index b0fe9b39d..a2e8c3a84 100644
--- a/org.eclipse.wb.doc.user/html-src/userinterface/toolbar.asciidoc
+++ b/org.eclipse.wb.doc.user/html-src/userinterface/toolbar.asciidoc
@@ -1,17 +1,18 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Toolbar
 
 The *Toolbar* provides access to commands commonly used in the
-*link:design_view.html[Design View]* and
-*link:component_tree.html[Component Tree].*
+xref:design_view.adoc[*Design View*] and
+xref:component_tree.adoc[*Component Tree*].
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Command Name
-a|
-=== Description
+|*Icon*
+|*Command Name*
+|*Description*
 
 |image:images/test.png[image]
 |*Test/Preview*
@@ -29,7 +30,7 @@ layout and resizing behavior of your components.
 |image:images/cut_edit.gif[image]
 |*Cut*
 |Copy the selected components to the clipboard and remove them from the
-*link:design_view.html[DesignView]*.
+xref:design_view.adoc[*Design View*].
 
 |image:images/copy_edit.gif[image]
 |*Copy*
@@ -39,9 +40,9 @@ layout and resizing behavior of your components.
 |*Paste*
 |Paste the selected components from the clipboard.
 
-|image:images/delete.gif[image,width=16,height=16]
+|image:images/delete.gif[image]
 |*Delete*
-|Delete the selected components from the *link:design_view.html[Design View]*.
+|Delete the selected components from the xref:design_view.adoc[*Design View*].
 
 |image:images/assistant.gif[image]
 |*Layout Assistant*
@@ -104,14 +105,14 @@ anchors.
 
 |image:images/globe3.png[image]
 |*Externalize Strings*
-| Opens the *link:../features/internationalization.html[Externalize
-Strings]* dialog.
+| Opens the xref:../features/internationalization.adoc[*Externalize
+Strings*] dialog.
 
-image:../features/images/nls_externalize_strings5.png[image,width=463,height=326]
+image:../features/images/nls_externalize_strings5.png[image]
 
 |
 |*Choose Locale*
-| Choose the *link:../features/internationalization.html[Locale]* to
+| Choose the xref:../features/internationalization.adoc[*Locale*] to
 display the current widgets.
 
 image:images/choose_locale.png[image]