You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by gi...@apache.org on 2020/02/02 13:02:49 UTC

[netbeans-website] branch asf-site updated: Automated site publishing by Jenkins build 1149

This is an automated email from the ASF dual-hosted git repository.

git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/netbeans-website.git


The following commit(s) were added to refs/heads/asf-site by this push:
     new 4289774  Automated site publishing by Jenkins build 1149
4289774 is described below

commit 4289774b419f1d940d958f5841ea03f6331e1e29
Author: jenkins <bu...@apache.org>
AuthorDate: Sun Feb 2 13:02:43 2020 +0000

    Automated site publishing by Jenkins build 1149
---
 content/kb/docs/cnd.html                           |   8 +-
 content/kb/docs/cnd/beginning-jni-linux.html       |  42 +-
 content/kb/docs/cnd/beginning-jni-linux_ja.html    |  42 +-
 content/kb/docs/cnd/beginning-jni-linux_pt_BR.html |  42 +-
 content/kb/docs/cnd/beginning-jni-linux_ru.html    |  42 +-
 content/kb/docs/cnd/beginning-jni-linux_zh_CN.html |  42 +-
 content/kb/docs/cnd/c-unit-test.html               | 120 +++--
 content/kb/docs/cnd/c-unit-test_ja.html            | 126 ++++--
 content/kb/docs/cnd/c-unit-test_pt_BR.html         | 120 +++--
 content/kb/docs/cnd/c-unit-test_ru.html            | 120 +++--
 content/kb/docs/cnd/c-unit-test_zh_CN.html         | 126 ++++--
 content/kb/docs/cnd/debugging.html                 | 114 +++--
 content/kb/docs/cnd/debugging_ja.html              | 114 +++--
 content/kb/docs/cnd/debugging_pt_BR.html           | 114 +++--
 content/kb/docs/cnd/debugging_ru.html              | 114 +++--
 content/kb/docs/cnd/debugging_zh_CN.html           | 114 +++--
 content/kb/docs/cnd/navigating-editing.html        | 208 ++++++---
 content/kb/docs/cnd/navigating-editing_ja.html     | 208 ++++++---
 content/kb/docs/cnd/navigating-editing_pt_BR.html  | 208 ++++++---
 content/kb/docs/cnd/navigating-editing_ru.html     | 208 ++++++---
 content/kb/docs/cnd/navigating-editing_zh_CN.html  | 208 ++++++---
 content/kb/docs/cnd/quickstart.html                |  40 +-
 content/kb/docs/cnd/quickstart_ja.html             |  40 +-
 content/kb/docs/cnd/quickstart_pt_BR.html          |  40 +-
 content/kb/docs/cnd/quickstart_ru.html             |  40 +-
 content/kb/docs/cnd/quickstart_zh_CN.html          |  40 +-
 content/kb/docs/cnd/remote-modes.html              |   8 +-
 content/kb/docs/cnd/remote-modes_ja.html           |   8 +-
 content/kb/docs/cnd/remote-modes_pt_BR.html        |   8 +-
 content/kb/docs/cnd/remote-modes_ru.html           |   8 +-
 content/kb/docs/cnd/remote-modes_zh_CN.html        |   8 +-
 content/kb/docs/cnd/remotedev-tutorial.html        |  60 ++-
 content/kb/docs/cnd/remotedev-tutorial_ja.html     |  60 ++-
 content/kb/docs/cnd/remotedev-tutorial_pt_BR.html  |  60 ++-
 content/kb/docs/cnd/remotedev-tutorial_ru.html     |  60 ++-
 content/kb/docs/cnd/remotedev-tutorial_zh_CN.html  |  60 ++-
 content/kb/docs/cnd_ja.html                        |  32 +-
 content/kb/docs/contributing.html                  |   4 +-
 content/kb/docs/ide/clearcase.html                 |  52 ++-
 content/kb/docs/ide/clearcase_ja.html              | 359 ++++++---------
 content/kb/docs/ide/clearcase_pt_BR.html           | 359 ++++++---------
 content/kb/docs/ide/clearcase_ru.html              | 359 ++++++---------
 content/kb/docs/ide/clearcase_zh_CN.html           | 359 ++++++---------
 content/kb/docs/ide/cvs.html                       |  72 +--
 content/kb/docs/ide/cvs_ja.html                    |  68 +--
 content/kb/docs/ide/cvs_pt_BR.html                 |  72 +--
 content/kb/docs/ide/cvs_ru.html                    |  72 +--
 content/kb/docs/ide/cvs_zh_CN.html                 |  72 +--
 content/kb/docs/ide/git.html                       |  10 +-
 content/kb/docs/ide/git_ja.html                    |  64 +--
 content/kb/docs/ide/git_pt_BR.html                 |  64 +--
 content/kb/docs/ide/git_ru.html                    |  62 +--
 content/kb/docs/ide/git_zh_CN.html                 |  64 +--
 content/kb/docs/ide/java-db.html                   |  20 +-
 content/kb/docs/ide/java-db_ja.html                |   8 +-
 content/kb/docs/ide/java-db_pt_BR.html             |   2 +-
 content/kb/docs/ide/java-db_ru.html                |  36 +-
 content/kb/docs/ide/java-db_zh_CN.html             |  36 +-
 content/kb/docs/ide/mercurial-queues.html          |   8 +-
 content/kb/docs/ide/mercurial-queues_ja.html       |   8 +-
 content/kb/docs/ide/mercurial-queues_pt_BR.html    |   8 +-
 content/kb/docs/ide/mercurial-queues_ru.html       |   8 +-
 content/kb/docs/ide/mercurial-queues_zh_CN.html    |   8 +-
 content/kb/docs/ide/mercurial.html                 |   8 +-
 content/kb/docs/ide/mercurial_pt_BR.html           |   4 +-
 content/kb/docs/ide/mercurial_ru.html              |   6 +-
 content/kb/docs/ide/mercurial_zh_CN.html           |  12 +-
 content/kb/docs/ide/mysql.html                     |   8 +-
 content/kb/docs/ide/oracle-db.html                 |  12 +-
 content/kb/docs/ide/oracle-db_ja.html              |   8 +-
 content/kb/docs/ide/subversion.html                |  20 +-
 content/kb/docs/ide/subversion_ja.html             | 492 +++++++++------------
 content/kb/docs/ide/subversion_pt_BR.html          | 450 +++++++++----------
 content/kb/docs/ide/subversion_ru.html             | 456 +++++++++----------
 content/kb/docs/ide/subversion_zh_CN.html          | 456 +++++++++----------
 content/kb/docs/intro-screencasts.html             |  26 +-
 content/kb/docs/intro-screencasts_ja.html          |  24 +-
 content/kb/docs/intro-screencasts_pt_BR.html       |  24 +-
 content/kb/docs/intro-screencasts_ru.html          |  24 +-
 content/kb/docs/intro-screencasts_zh_CN.html       |  24 +-
 content/kb/docs/java-ee_ru.html                    |  24 +-
 content/kb/docs/java-se_ja.html                    |   8 +-
 content/kb/docs/java/annotations-custom_ja.html    |  39 +-
 content/kb/docs/java/annotations-custom_pt_BR.html |  39 +-
 content/kb/docs/java/annotations-custom_ru.html    |  39 +-
 content/kb/docs/java/annotations-custom_zh_CN.html |  39 +-
 content/kb/docs/java/annotations-lombok.html       |  19 +-
 content/kb/docs/java/annotations-lombok_ja.html    |  55 ++-
 content/kb/docs/java/annotations-lombok_pt_BR.html |  55 ++-
 content/kb/docs/java/annotations-lombok_ru.html    |  55 ++-
 content/kb/docs/java/annotations-lombok_zh_CN.html |  55 ++-
 content/kb/docs/java/code-inspect.html             |  26 +-
 content/kb/docs/java/code-inspect_ja.html          |  10 +-
 content/kb/docs/java/code-inspect_pt_BR.html       |  10 +-
 content/kb/docs/java/code-inspect_ru.html          |  10 +-
 content/kb/docs/java/code-inspect_zh_CN.html       |  10 +-
 content/kb/docs/java/debug-multithreaded.html      |  69 ++-
 content/kb/docs/java/debug-multithreaded_ja.html   |  75 +++-
 .../kb/docs/java/debug-multithreaded_pt_BR.html    |  69 ++-
 content/kb/docs/java/debug-multithreaded_ru.html   |  69 ++-
 .../kb/docs/java/debug-multithreaded_zh_CN.html    |  69 ++-
 content/kb/docs/java/debug-visual_ja.html          |  11 +-
 content/kb/docs/java/debug-visual_pt_BR.html       |  11 +-
 content/kb/docs/java/debug-visual_ru.html          |  11 +-
 content/kb/docs/java/debug-visual_zh_CN.html       |  11 +-
 content/kb/docs/java/gbcustomizer-advanced.html    |  12 +-
 content/kb/docs/java/gbcustomizer-advanced_ja.html |  12 +-
 .../kb/docs/java/gbcustomizer-advanced_pt_BR.html  |  14 +-
 content/kb/docs/java/gbcustomizer-advanced_ru.html |  12 +-
 .../kb/docs/java/gbcustomizer-advanced_zh_CN.html  |  12 +-
 content/kb/docs/java/gbcustomizer-basic.html       |   6 +-
 content/kb/docs/java/gbcustomizer-basic_ja.html    |   6 +-
 content/kb/docs/java/gbcustomizer-basic_pt_BR.html |   6 +-
 content/kb/docs/java/gbcustomizer-basic_ru.html    |   6 +-
 content/kb/docs/java/gbcustomizer-basic_zh_CN.html |   6 +-
 content/kb/docs/java/groovy-quickstart_ja.html     |  65 ++-
 content/kb/docs/java/groovy-quickstart_pt_BR.html  |  65 ++-
 content/kb/docs/java/groovy-quickstart_ru.html     |  65 ++-
 content/kb/docs/java/groovy-quickstart_zh_CN.html  |  65 ++-
 content/kb/docs/java/hibernate-java-se.html        |  91 ++--
 content/kb/docs/java/hibernate-java-se_ja.html     |  91 ++--
 content/kb/docs/java/hibernate-java-se_pt_BR.html  |  91 ++--
 content/kb/docs/java/hibernate-java-se_ru.html     |  91 ++--
 content/kb/docs/java/hibernate-java-se_zh_CN.html  |  91 ++--
 content/kb/docs/java/jmx-getstart.html             |  58 ++-
 content/kb/docs/java/jmx-getstart_ja.html          |  58 ++-
 content/kb/docs/java/jmx-getstart_pt_BR.html       |  58 ++-
 content/kb/docs/java/jmx-getstart_ru.html          |  58 ++-
 content/kb/docs/java/jmx-getstart_zh_CN.html       |  58 ++-
 content/kb/docs/java/jmx-manager-tutorial.html     |  60 ++-
 content/kb/docs/java/jmx-manager-tutorial_ja.html  |  60 ++-
 .../kb/docs/java/jmx-manager-tutorial_pt_BR.html   |  60 ++-
 content/kb/docs/java/jmx-manager-tutorial_ru.html  |  60 ++-
 .../kb/docs/java/jmx-manager-tutorial_zh_CN.html   |  60 ++-
 content/kb/docs/java/jmx-tutorial.html             |  53 ++-
 content/kb/docs/java/jmx-tutorial_ja.html          |  53 ++-
 content/kb/docs/java/jmx-tutorial_pt_BR.html       |  53 ++-
 content/kb/docs/java/jmx-tutorial_ru.html          |  53 ++-
 content/kb/docs/java/jmx-tutorial_zh_CN.html       |  53 ++-
 content/kb/docs/java/junit-intro.html              |   8 +-
 content/kb/docs/java/junit-intro_ja.html           |  72 ++-
 content/kb/docs/java/junit-intro_pt_BR.html        |  72 ++-
 content/kb/docs/java/junit-intro_ru.html           |  72 ++-
 content/kb/docs/java/junit-intro_zh_CN.html        |  72 ++-
 content/kb/docs/java/maven-hib-java-se.html        | 111 +++--
 content/kb/docs/java/maven-hib-java-se_ja.html     | 111 +++--
 content/kb/docs/java/maven-hib-java-se_pt_BR.html  | 111 +++--
 content/kb/docs/java/maven-hib-java-se_ru.html     | 111 +++--
 content/kb/docs/java/maven-hib-java-se_zh_CN.html  | 111 +++--
 content/kb/docs/java/profile-loadgenerator.html    |  21 +-
 content/kb/docs/java/profile-loadgenerator_ja.html |  21 +-
 .../kb/docs/java/profile-loadgenerator_pt_BR.html  |  21 +-
 content/kb/docs/java/profile-loadgenerator_ru.html |  21 +-
 .../kb/docs/java/profile-loadgenerator_zh_CN.html  |  21 +-
 content/kb/docs/java/profiler-intro.html           |  82 +++-
 content/kb/docs/java/profiler-intro_ja.html        |  88 +++-
 content/kb/docs/java/profiler-intro_pt_BR.html     |  82 +++-
 content/kb/docs/java/profiler-intro_ru.html        |  82 +++-
 content/kb/docs/java/profiler-intro_zh_CN.html     |  82 +++-
 content/kb/docs/java/profiler-profilingpoints.html |  81 ++--
 .../kb/docs/java/profiler-profilingpoints_ja.html  |  81 ++--
 .../docs/java/profiler-profilingpoints_pt_BR.html  |  81 ++--
 .../kb/docs/java/profiler-profilingpoints_ru.html  |  81 ++--
 .../docs/java/profiler-profilingpoints_zh_CN.html  |  81 ++--
 content/kb/docs/java/quickstart-gui.html           |   4 +-
 content/kb/docs/java/quickstart-gui_ja.html        |   4 +-
 content/kb/docs/java/quickstart-gui_pt_BR.html     |   4 +-
 content/kb/docs/java/quickstart-gui_ru.html        |   4 +-
 content/kb/docs/java/quickstart-gui_zh_CN.html     |   4 +-
 content/kb/docs/java/quickstart_ca.html            |   2 +-
 content/kb/docs/javaee/cdi-intro_ja.html           |   2 +-
 content/kb/docs/javaee/cdi-intro_pt_BR.html        |   2 +-
 content/kb/docs/javaee/cdi-intro_zh_CN.html        |   2 +-
 content/kb/docs/javaee/ecommerce/conclusion.html   |   9 +-
 content/kb/docs/javaee/ecommerce/connect-db.html   | 322 ++++++++++----
 .../kb/docs/javaee/ecommerce/connect-db_ja.html    |  46 +-
 content/kb/docs/javaee/ecommerce/data-model.html   | 186 +++++---
 .../kb/docs/javaee/ecommerce/data-model_ja.html    |  64 +--
 content/kb/docs/javaee/ecommerce/design.html       |  31 +-
 content/kb/docs/javaee/ecommerce/design_ja.html    |  20 +-
 .../kb/docs/javaee/ecommerce/entity-session.html   | 180 +++++---
 .../docs/javaee/ecommerce/entity-session_ja.html   | 180 +++++---
 .../javaee/ecommerce/entity-session_pt_BR.html     | 180 +++++---
 .../docs/javaee/ecommerce/entity-session_ru.html   | 180 +++++---
 .../javaee/ecommerce/entity-session_zh_CN.html     | 180 +++++---
 content/kb/docs/javaee/ecommerce/intro.html        |  11 +-
 content/kb/docs/javaee/ecommerce/intro_ja.html     |  11 +-
 content/kb/docs/javaee/ecommerce/intro_pt_BR.html  |  11 +-
 content/kb/docs/javaee/ecommerce/intro_ru.html     |  11 +-
 content/kb/docs/javaee/ecommerce/intro_zh_CN.html  |  11 +-
 content/kb/docs/javaee/ecommerce/language.html     | 198 ++++++---
 content/kb/docs/javaee/ecommerce/language_ja.html  |  22 +-
 .../kb/docs/javaee/ecommerce/manage-sessions.html  | 355 +++++++++++----
 .../docs/javaee/ecommerce/manage-sessions_ja.html  | 355 +++++++++++----
 .../javaee/ecommerce/manage-sessions_pt_BR.html    | 355 +++++++++++----
 .../docs/javaee/ecommerce/manage-sessions_ru.html  | 355 +++++++++++----
 .../javaee/ecommerce/manage-sessions_zh_CN.html    | 355 +++++++++++----
 .../javaee/ecommerce/page-views-controller.html    | 151 +++++--
 .../javaee/ecommerce/page-views-controller_ja.html | 151 +++++--
 .../ecommerce/page-views-controller_pt_BR.html     | 151 +++++--
 .../javaee/ecommerce/page-views-controller_ru.html | 151 +++++--
 .../ecommerce/page-views-controller_zh_CN.html     | 147 ++++--
 content/kb/docs/javaee/ecommerce/security.html     | 251 ++++++++---
 .../docs/javaee/ecommerce/setup-dev-environ.html   | 150 +++++--
 .../javaee/ecommerce/setup-dev-environ_ja.html     | 150 +++++--
 .../javaee/ecommerce/setup-dev-environ_pt_BR.html  | 150 +++++--
 .../javaee/ecommerce/setup-dev-environ_ru.html     | 150 +++++--
 .../javaee/ecommerce/setup-dev-environ_zh_CN.html  | 148 +++++--
 content/kb/docs/javaee/ecommerce/setup.html        |  60 ++-
 content/kb/docs/javaee/ecommerce/setup_ja.html     |  60 ++-
 content/kb/docs/javaee/ecommerce/setup_pt_BR.html  |  60 ++-
 content/kb/docs/javaee/ecommerce/setup_ru.html     |  60 ++-
 content/kb/docs/javaee/ecommerce/setup_zh_CN.html  |  60 ++-
 content/kb/docs/javaee/ecommerce/test-profile.html | 269 ++++++++---
 content/kb/docs/javaee/ecommerce/transaction.html  |  99 +++--
 .../kb/docs/javaee/ecommerce/transaction_ja.html   |   8 +-
 content/kb/docs/javaee/profiler-javaee_ja.html     |  29 +-
 content/kb/docs/javame/imp-ng.html                 |   6 +-
 content/kb/docs/javame/imp-ng_ja.html              |   6 +-
 content/kb/docs/javame/imp-ng_pt_BR.html           |   6 +-
 content/kb/docs/javame/imp-ng_ru.html              |   6 +-
 content/kb/docs/javame/imp-ng_zh_CN.html           |   6 +-
 content/kb/docs/php/code-templates.html            |   2 +-
 content/kb/docs/php/code-templates_ja.html         |   2 +-
 content/kb/docs/php/code-templates_pt_BR.html      |   2 +-
 content/kb/docs/php/code-templates_ru.html         |   2 +-
 content/kb/docs/php/code-templates_zh_CN.html      |   2 +-
 .../docs/php/configure-php-environment-mac-os.html |   4 +-
 content/kb/docs/php/phpunit.html                   |   2 +-
 content/kb/docs/php/phpunit_pt_BR.html             |   8 +-
 content/kb/docs/php/quickstart_ru.html             |  53 ++-
 content/kb/docs/php/wish-list-lesson2_ja.html      |   2 +-
 content/kb/docs/php/wish-list-lesson6.html         |  26 +-
 content/kb/docs/php/wish-list-lesson6_ja.html      |  30 +-
 content/kb/docs/php/wish-list-lesson6_pt_BR.html   |  20 +-
 content/kb/docs/php/wish-list-lesson6_ru.html      |  20 +-
 content/kb/docs/php/wish-list-lesson6_zh_CN.html   |  30 +-
 content/kb/docs/php/wish-list-lesson7.html         |  12 +-
 content/kb/docs/php_pt_BR.html                     |   8 +-
 .../kb/docs/webclient/cordova-gettingstarted.html  |  71 ++-
 .../docs/webclient/cordova-gettingstarted_ja.html  |  71 ++-
 .../webclient/cordova-gettingstarted_pt_BR.html    |  71 ++-
 .../docs/webclient/cordova-gettingstarted_ru.html  |  71 ++-
 .../webclient/cordova-gettingstarted_zh_CN.html    |  71 ++-
 content/kb/docs/webclient/html5-editing-css.html   | 106 +++--
 .../kb/docs/webclient/html5-editing-css_ja.html    | 106 +++--
 .../kb/docs/webclient/html5-editing-css_pt_BR.html | 106 +++--
 .../kb/docs/webclient/html5-editing-css_ru.html    | 106 +++--
 .../kb/docs/webclient/html5-editing-css_zh_CN.html | 106 +++--
 .../kb/docs/webclient/html5-gettingstarted.html    |   2 +-
 .../kb/docs/webclient/html5-gettingstarted_ja.html | 130 ++++--
 .../docs/webclient/html5-gettingstarted_pt_BR.html | 130 ++++--
 .../kb/docs/webclient/html5-gettingstarted_ru.html | 130 ++++--
 .../docs/webclient/html5-gettingstarted_zh_CN.html | 130 ++++--
 content/kb/docs/webclient/html5-js-support.html    | 133 ++++--
 content/kb/docs/webclient/html5-js-support_ja.html | 139 ++++--
 .../kb/docs/webclient/html5-js-support_pt_BR.html  | 133 ++++--
 content/kb/docs/webclient/html5-js-support_ru.html | 133 ++++--
 .../kb/docs/webclient/html5-js-support_zh_CN.html  | 133 ++++--
 content/kb/docs/websvc/client.html                 |  94 +++-
 content/kb/docs/websvc/client_ja.html              |  94 +++-
 content/kb/docs/websvc/client_pt_BR.html           |  94 +++-
 content/kb/docs/websvc/client_ru.html              |  94 +++-
 content/kb/docs/websvc/client_zh_CN.html           |  94 +++-
 content/kb/docs/websvc/flower-code-ws.html         |  40 +-
 content/kb/docs/websvc/flower-code-ws_ja.html      |  40 +-
 content/kb/docs/websvc/flower-code-ws_pt_BR.html   |  40 +-
 content/kb/docs/websvc/flower-code-ws_ru.html      |  40 +-
 content/kb/docs/websvc/flower-code-ws_zh_CN.html   |  46 +-
 content/kb/docs/websvc/flower_swing.html           |  50 ++-
 content/kb/docs/websvc/flower_swing_ja.html        |  64 ++-
 content/kb/docs/websvc/flower_swing_pt_BR.html     |  64 ++-
 content/kb/docs/websvc/flower_swing_ru.html        |  64 ++-
 content/kb/docs/websvc/flower_swing_zh_CN.html     |  58 ++-
 content/kb/docs/websvc/flower_ws.html              |  40 +-
 content/kb/docs/websvc/flower_ws_ja.html           |  40 +-
 content/kb/docs/websvc/flower_ws_pt_BR.html        |  40 +-
 content/kb/docs/websvc/flower_ws_ru.html           |  40 +-
 content/kb/docs/websvc/flower_ws_zh_CN.html        |  40 +-
 content/kb/docs/websvc/flower_wsdl_schema.html     |  32 +-
 content/kb/docs/websvc/flower_wsdl_schema_ja.html  |  32 +-
 .../kb/docs/websvc/flower_wsdl_schema_pt_BR.html   |  32 +-
 content/kb/docs/websvc/flower_wsdl_schema_ru.html  |  32 +-
 .../kb/docs/websvc/flower_wsdl_schema_zh_CN.html   |  32 +-
 content/kb/docs/websvc/jax-ws.html                 |  96 +++-
 content/kb/docs/websvc/jax-ws_ja.html              |  96 +++-
 content/kb/docs/websvc/jax-ws_pt_BR.html           |  96 +++-
 content/kb/docs/websvc/jax-ws_ru.html              |  96 +++-
 content/kb/docs/websvc/jax-ws_zh_CN.html           |  96 +++-
 content/kb/docs/websvc/rest.html                   |  81 +++-
 content/kb/docs/websvc/rest_ja.html                |  81 +++-
 content/kb/docs/websvc/rest_pt_BR.html             |  81 +++-
 content/kb/docs/websvc/rest_ru.html                |  81 +++-
 content/kb/docs/websvc/rest_zh_CN.html             |  81 +++-
 content/kb/docs/websvc/wsit.html                   |  75 +++-
 content/kb/docs/websvc/wsit_ja.html                |  75 +++-
 content/kb/docs/websvc/wsit_pt_BR.html             |  75 +++-
 content/kb/docs/websvc/wsit_ru.html                |  75 +++-
 content/kb/docs/websvc/wsit_zh_CN.html             |  75 +++-
 content/kb/docs/websvc/zillow.html                 |  37 +-
 content/kb/docs/websvc/zillow_ja.html              |  37 +-
 content/kb/docs/websvc/zillow_pt_BR.html           |  37 +-
 content/kb/docs/websvc/zillow_ru.html              |  37 +-
 content/kb/docs/websvc/zillow_zh_CN.html           |  37 +-
 304 files changed, 15348 insertions(+), 7524 deletions(-)

diff --git a/content/kb/docs/cnd.html b/content/kb/docs/cnd.html
index aea1337..b7e14a1 100644
--- a/content/kb/docs/cnd.html
+++ b/content/kb/docs/cnd.html
@@ -194,11 +194,15 @@
 <p><a href="../docs/cnd/toolchain.html">Using the C/C+ Tool Collection Descriptor+</a></p>
 </li>
 <li>
-<p><a href="../docs/cnd/cpp-vcs.html">Storing NetBeans C/C+ Projects Under VCS+</a>
-image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[]</p>
+<p><a href="../docs/cnd/cpp-vcs.html">Storing NetBeans C/C+ Projects Under VCS+</a></p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="../../images_www/v6/trails/trails-box-br.png" alt="] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[">
+</div>
+</div>
 </div>
 </div>
 </div>
diff --git a/content/kb/docs/cnd/beginning-jni-linux.html b/content/kb/docs/cnd/beginning-jni-linux.html
index bac0613..4ca2e0d 100644
--- a/content/kb/docs/cnd/beginning-jni-linux.html
+++ b/content/kb/docs/cnd/beginning-jni-linux.html
@@ -214,11 +214,15 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Choose File &gt; New Project. Select the Java category and Java Application project type. Click Next.
-image::images/jni-new-project-java.png[]</p>
+<p>Choose File &gt; New Project. Select the Java category and Java Application project type. Click Next.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-java.png" alt="jni new project java">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -392,11 +396,15 @@ image::images/jni-new-project-java.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Choose File &gt; New Project. Under Categories, select C/C. Under Projects, select C/C Dynamic Library. Click Next.
-image::images/jni-new-project-c.png[]</p>
+<p>Choose File &gt; New Project. Under Categories, select C/C. Under Projects, select C/C Dynamic Library. Click Next.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-c.png" alt="jni new project c">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -441,18 +449,22 @@ image::images/jni-new-project-c.png[]</p>
 <p>Select the Store path as Absolute option, then click Select to add this directory to the project&#8217;s Include Directories.</p>
 </li>
 <li>
-<p>Add the JDK&#8217;s  <code>include/linux</code>  directory in the same way, then click OK.
-image::images/jni-include-directories.png[]</p>
+<p>Add the JDK&#8217;s  <code>include/linux</code>  directory in the same way, then click OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-include-directories.png" alt="jni include directories">
+</div>
+</div>
 <div class="paragraph">
 <p>These settings are required to enable references to the Java  <code>jni.h</code>  library from your C code.</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Find the Compilation Line area of the C Compiler options. Click in the text field of the Additional Options property and type  <code>-shared -m32</code> . image::images/jni-project-properties-cmd-options.png[]</p>
+<p>Find the Compilation Line area of the C Compiler options. Click in the text field of the Additional Options property and type  <code>-shared -m32</code> . <span class="image"><img src="images/jni-project-properties-cmd-options.png" alt="jni project properties cmd options"></span></p>
 </li>
 </ol>
 </div>
@@ -488,8 +500,12 @@ The  <code>-m32</code>  option tells the compiler to create a 32-bit binary. By
 </div>
 </div>
 <div class="paragraph">
-<p>to simplify the path of the resulting shared object file. This will make the file easer to reference from Java.
-image::images/jni-project-properties-linker.png[]</p>
+<p>to simplify the path of the resulting shared object file. This will make the file easer to reference from Java.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-project-properties-linker.png" alt="jni project properties linker">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="10">
@@ -613,11 +629,15 @@ JNIEXPORT void JNICALL Java_jnidemojava_Main_nativePrint
 <p>Select the JNIDemoJava application in the Projects window.</p>
 </li>
 <li>
-<p>Press F6 or click the Run button in the toolbar to run the application. The program should execute correctly and the Output window should display output similar to the following:
-image::images/jni-build-success.png[]</p>
+<p>Press F6 or click the Run button in the toolbar to run the application. The program should execute correctly and the Output window should display output similar to the following:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-build-success.png" alt="jni build success">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_summary">Summary</h3>
diff --git a/content/kb/docs/cnd/beginning-jni-linux_ja.html b/content/kb/docs/cnd/beginning-jni-linux_ja.html
index 70f22f9..04f2476 100644
--- a/content/kb/docs/cnd/beginning-jni-linux_ja.html
+++ b/content/kb/docs/cnd/beginning-jni-linux_ja.html
@@ -214,11 +214,15 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「ファイル」&gt;「新規プロジェクト」を選択します。「Java」カテゴリおよび「Javaアプリケーション」プロジェクト・タイプを選択します。「次」をクリックします。
-image::images/jni-new-project-java.png[]</p>
+<p>「ファイル」&gt;「新規プロジェクト」を選択します。「Java」カテゴリおよび「Javaアプリケーション」プロジェクト・タイプを選択します。「次」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-java.png" alt="jni new project java">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -396,11 +400,15 @@ image::images/jni-new-project-java.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「ファイル」&gt;「新規プロジェクト」を選択します。「カテゴリ」から「C/C」を選択します。「プロジェクト」から「C/C動的ライブラリ」を選択します。「次」をクリックします。
-image::images/jni-new-project-c.png[]</p>
+<p>「ファイル」&gt;「新規プロジェクト」を選択します。「カテゴリ」から「C/C」を選択します。「プロジェクト」から「C/C動的ライブラリ」を選択します。「次」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-c.png" alt="jni new project c">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -445,18 +453,22 @@ image::images/jni-new-project-c.png[]</p>
 <p>「絶対としてパスを保存」オプションを選択した後、「選択」をクリックして、このディレクトリをプロジェクトの「インクルード・ディレクトリ」に追加します。</p>
 </li>
 <li>
-<p>JDKの <code>include/linux</code> ディレクトリを同じ方法で追加し、「OK」をクリックします。
-image::images/jni-include-directories.png[]</p>
+<p>JDKの <code>include/linux</code> ディレクトリを同じ方法で追加し、「OK」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-include-directories.png" alt="jni include directories">
+</div>
+</div>
 <div class="paragraph">
 <p>これらの設定は、CコードからJava  <code>jni.h</code> ライブラリへの参照を有効にするために必要です。</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>「Cコンパイラ」オプションの「コンパイル行」領域を見つけます。「追加のオプション」プロパティのテキスト・フィールド内をクリックし、 <code>-shared -m32</code> と入力します。image::images/jni-project-properties-cmd-options.png[]</p>
+<p>「Cコンパイラ」オプションの「コンパイル行」領域を見つけます。「追加のオプション」プロパティのテキスト・フィールド内をクリックし、 <code>-shared -m32</code> と入力します。<span class="image"><img src="images/jni-project-properties-cmd-options.png" alt="jni project properties cmd options"></span></p>
 <div class="literalblock">
 <div class="content">
 <pre>``-shared`` オプションは、動的ライブラリを生成することをコンパイラに指定します。
@@ -494,8 +506,12 @@ image::images/jni-include-directories.png[]</p>
 </div>
 </div>
 <div class="paragraph">
-<p>結果の共有オブジェクト・ファイルのパスが簡素化されます。これで、Javaからファイルを参照しやすくなります。
-image::images/jni-project-properties-linker.png[]</p>
+<p>結果の共有オブジェクト・ファイルのパスが簡素化されます。これで、Javaからファイルを参照しやすくなります。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-project-properties-linker.png" alt="jni project properties linker">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="10">
@@ -621,11 +637,15 @@ JNIEXPORT void JNICALL Java_jnidemojava_Main_nativePrint
 <p>「プロジェクト」ウィンドウでJNIDemoJavaアプリケーションを選択します。</p>
 </li>
 <li>
-<p>F6を押すか、ツールバーの「実行」ボタンをクリックして、アプリケーションを実行します。プログラムが正しく実行され、「出力」ウィンドウに次のものと類似した出力が表示されます。
-image::images/jni-build-success.png[]</p>
+<p>F6を押すか、ツールバーの「実行」ボタンをクリックして、アプリケーションを実行します。プログラムが正しく実行され、「出力」ウィンドウに次のものと類似した出力が表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-build-success.png" alt="jni build success">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_サマリー">サマリー</h3>
diff --git a/content/kb/docs/cnd/beginning-jni-linux_pt_BR.html b/content/kb/docs/cnd/beginning-jni-linux_pt_BR.html
index 83fe083..64f3c56 100644
--- a/content/kb/docs/cnd/beginning-jni-linux_pt_BR.html
+++ b/content/kb/docs/cnd/beginning-jni-linux_pt_BR.html
@@ -214,11 +214,15 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Escolha Arquivo &gt; Novo Projeto. Selecione a categoria Java e o tipo de projeto de Aplicação Java. Clique em Próximo.
-image::images/jni-new-project-java.png[]</p>
+<p>Escolha Arquivo &gt; Novo Projeto. Selecione a categoria Java e o tipo de projeto de Aplicação Java. Clique em Próximo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-java.png" alt="jni new project java">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -392,11 +396,15 @@ image::images/jni-new-project-java.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Escolha Arquivo &gt; Novo Projeto. Em Categorias, selecione C/C. Em Projetos, selecione Biblioteca Dinâmica C/C. Clique em Próximo.
-image::images/jni-new-project-c.png[]</p>
+<p>Escolha Arquivo &gt; Novo Projeto. Em Categorias, selecione C/C. Em Projetos, selecione Biblioteca Dinâmica C/C. Clique em Próximo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-c.png" alt="jni new project c">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -441,18 +449,22 @@ image::images/jni-new-project-c.png[]</p>
 <p>Selecione a opção Armazenar caminho como Absoluto e, em seguida, clique em Selecionar para adicionar este diretório em Incluir Diretórios.</p>
 </li>
 <li>
-<p>Adicione o diretório  <code>include/linux</code>  do JDK da mesma forma e clique em OK.
-image::images/jni-include-directories.png[]</p>
+<p>Adicione o diretório  <code>include/linux</code>  do JDK da mesma forma e clique em OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-include-directories.png" alt="jni include directories">
+</div>
+</div>
 <div class="paragraph">
 <p>Essas definições são necessárias para ativar as referências à biblioteca  <code>jni.h</code>  do Java de seu código C.</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Localize a área de Linha de Compilação das opções do Compilador C. Clique no campo de texto da propriedade Opções Adicionais e tipo  <code>-shared -m32</code> . image::images/jni-project-properties-cmd-options.png[]</p>
+<p>Localize a área de Linha de Compilação das opções do Compilador C. Clique no campo de texto da propriedade Opções Adicionais e tipo  <code>-shared -m32</code> . <span class="image"><img src="images/jni-project-properties-cmd-options.png" alt="jni project properties cmd options"></span></p>
 </li>
 </ol>
 </div>
@@ -488,8 +500,12 @@ A opção  <code>-m32</code>  informa ao compilador para criar um binário de 32
 </div>
 </div>
 <div class="paragraph">
-<p>para simplificar o caminho do arquivo de objeto compartilhado resultante. Isso fará com que seja mais fácil referenciar o arquivo a partir do Java.
-image::images/jni-project-properties-linker.png[]</p>
+<p>para simplificar o caminho do arquivo de objeto compartilhado resultante. Isso fará com que seja mais fácil referenciar o arquivo a partir do Java.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-project-properties-linker.png" alt="jni project properties linker">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="10">
@@ -613,11 +629,15 @@ JNIEXPORT void JNICALL Java_jnidemojava_Main_nativePrint
 <p>Selecione a aplicação JNIDemoJava na janela Projetos.</p>
 </li>
 <li>
-<p>Pressione F6 ou clique no botão Executar na barra de ferramentas para executar a aplicação. O programa deve ser executado corretamente, e a janela de Saída deve exibir uma saída semelhante à seguinte:
-image::images/jni-build-success.png[]</p>
+<p>Pressione F6 ou clique no botão Executar na barra de ferramentas para executar a aplicação. O programa deve ser executado corretamente, e a janela de Saída deve exibir uma saída semelhante à seguinte:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-build-success.png" alt="jni build success">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_resumo">Resumo</h3>
diff --git a/content/kb/docs/cnd/beginning-jni-linux_ru.html b/content/kb/docs/cnd/beginning-jni-linux_ru.html
index ace1a7f..e73c7b5 100644
--- a/content/kb/docs/cnd/beginning-jni-linux_ru.html
+++ b/content/kb/docs/cnd/beginning-jni-linux_ru.html
@@ -214,11 +214,15 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Выберите команду "Файл" &gt; "Новый проект". Выберите категорию "Java" и тип проекта "Приложение Java". Нажмите 'Далее'.
-image::images/jni-new-project-java.png[]</p>
+<p>Выберите команду "Файл" &gt; "Новый проект". Выберите категорию "Java" и тип проекта "Приложение Java". Нажмите 'Далее'.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-java.png" alt="jni new project java">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -392,11 +396,15 @@ image::images/jni-new-project-java.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Выберите команду "Файл" &gt; "Новый проект". В окне "Категории" выберите C/C. В окне "Проекты" выберите "Динамическая библиотека C/C". Нажмите кнопку "Далее".
-image::images/jni-new-project-c.png[]</p>
+<p>Выберите команду "Файл" &gt; "Новый проект". В окне "Категории" выберите C/C. В окне "Проекты" выберите "Динамическая библиотека C/C". Нажмите кнопку "Далее".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-c.png" alt="jni new project c">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -441,18 +449,22 @@ image::images/jni-new-project-c.png[]</p>
 <p>Выберите параметр 'Сохранить путь как абсолютный', затем нажмите кнопку 'Выбрать', чтобы добавить этот каталог во включенные каталоги проекта.</p>
 </li>
 <li>
-<p>Аналогичным образом добавьте каталог JDK  <code>include/linux</code> , затем нажмите кнопку "ОК".
-image::images/jni-include-directories.png[]</p>
+<p>Аналогичным образом добавьте каталог JDK  <code>include/linux</code> , затем нажмите кнопку "ОК".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-include-directories.png" alt="jni include directories">
+</div>
+</div>
 <div class="paragraph">
 <p>Эти параметры требуются для включения ссылок на библиотеку Java  <code>jni.h</code>  из кода C.</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Найдите область 'Строка компиляции' в параметрах компилятора C. Щелкните текстовое поле в свойстве 'Дополнительные параметры' и введите  <code>-shared -m32</code> . image::images/jni-project-properties-cmd-options.png[]</p>
+<p>Найдите область 'Строка компиляции' в параметрах компилятора C. Щелкните текстовое поле в свойстве 'Дополнительные параметры' и введите  <code>-shared -m32</code> . <span class="image"><img src="images/jni-project-properties-cmd-options.png" alt="jni project properties cmd options"></span></p>
 </li>
 </ol>
 </div>
@@ -488,8 +500,12 @@ image::images/jni-include-directories.png[]</p>
 </div>
 </div>
 <div class="paragraph">
-<p>чтобы упростить путь к созданному файлу совместно используемого объекта. Это поможет упростить процесс создания ссылки из Java.
-image::images/jni-project-properties-linker.png[]</p>
+<p>чтобы упростить путь к созданному файлу совместно используемого объекта. Это поможет упростить процесс создания ссылки из Java.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-project-properties-linker.png" alt="jni project properties linker">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="10">
@@ -613,11 +629,15 @@ JNIEXPORT void JNICALL Java_jnidemojava_Main_nativePrint
 <p>Выберите приложение JNIDemoJava в окне 'Проекты'.</p>
 </li>
 <li>
-<p>Чтобы запустить приложение, нажмите клавишу F6 или кнопку "Выполнить" на панели инструментов. Программа должна запуститься корректно, и в окне 'Результаты' должны отобразиться следующие (или аналогичные) данные:
-image::images/jni-build-success.png[]</p>
+<p>Чтобы запустить приложение, нажмите клавишу F6 или кнопку "Выполнить" на панели инструментов. Программа должна запуститься корректно, и в окне 'Результаты' должны отобразиться следующие (или аналогичные) данные:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-build-success.png" alt="jni build success">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Заключение">Заключение</h3>
diff --git a/content/kb/docs/cnd/beginning-jni-linux_zh_CN.html b/content/kb/docs/cnd/beginning-jni-linux_zh_CN.html
index 0529012..e801665 100644
--- a/content/kb/docs/cnd/beginning-jni-linux_zh_CN.html
+++ b/content/kb/docs/cnd/beginning-jni-linux_zh_CN.html
@@ -214,11 +214,15 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>选择 "File"(文件)&gt; "New Project"(新建项目)。选择 "Java" 类别和 "Java Application"(Java 应用程序)项目类型。单击 "Next"(下一步)。
-image::images/jni-new-project-java.png[]</p>
+<p>选择 "File"(文件)&gt; "New Project"(新建项目)。选择 "Java" 类别和 "Java Application"(Java 应用程序)项目类型。单击 "Next"(下一步)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-java.png" alt="jni new project java">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -396,11 +400,15 @@ image::images/jni-new-project-java.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>选择 "File"(文件)&gt; "New Project"(新建项目)。在 "Categories"(类别)下,选择 "C/C"。在 "Projects"(项目)下,选择 "C/C Dynamic Library"(C/C++ 动态库)。单击 "Next"(下一步)。
-image::images/jni-new-project-c.png[]</p>
+<p>选择 "File"(文件)&gt; "New Project"(新建项目)。在 "Categories"(类别)下,选择 "C/C"。在 "Projects"(项目)下,选择 "C/C Dynamic Library"(C/C++ 动态库)。单击 "Next"(下一步)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-new-project-c.png" alt="jni new project c">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -445,18 +453,22 @@ image::images/jni-new-project-c.png[]</p>
 <p>选择 "Store path as Absolute"(存储为绝对路径)选项,然后单击 "Select"(选择),将此目录添加到此项目的 "Include Directories"(包括目录)中。</p>
 </li>
 <li>
-<p>以同样的方式添加 JDK 的  <code>include/linux</code>  目录,然后单击 "OK"(确定)。
-image::images/jni-include-directories.png[]</p>
+<p>以同样的方式添加 JDK 的  <code>include/linux</code>  目录,然后单击 "OK"(确定)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-include-directories.png" alt="jni include directories">
+</div>
+</div>
 <div class="paragraph">
 <p>从 C 代码中启用对 Java  <code>jni.h</code>  库的引用时需要这些设置。</p>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>找到 "C Compiler"(C 编译器)选项的 "Compilation Line"(编译行)区域。单击 "Additional Options"(其他选项)属性的文本字段,然后键入  <code>-shared -m32</code> 。image::images/jni-project-properties-cmd-options.png[]</p>
+<p>找到 "C Compiler"(C 编译器)选项的 "Compilation Line"(编译行)区域。单击 "Additional Options"(其他选项)属性的文本字段,然后键入  <code>-shared -m32</code> 。<span class="image"><img src="images/jni-project-properties-cmd-options.png" alt="jni project properties cmd options"></span></p>
 <div class="literalblock">
 <div class="content">
 <pre>``-shared``  选项用于通知编译器生成动态库。
@@ -494,8 +506,12 @@ image::images/jni-include-directories.png[]</p>
 </div>
 </div>
 <div class="paragraph">
-<p>以简化生成的共享对象文件的路径。这将简化从 Java 引用文件的过程。
-image::images/jni-project-properties-linker.png[]</p>
+<p>以简化生成的共享对象文件的路径。这将简化从 Java 引用文件的过程。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-project-properties-linker.png" alt="jni project properties linker">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="10">
@@ -621,11 +637,15 @@ JNIEXPORT void JNICALL Java_jnidemojava_Main_nativePrint
 <p>在 "Projects"(项目)窗口中选择 JNIDemoJava 应用程序。</p>
 </li>
 <li>
-<p>按 F6 或单击工具栏中的 "Run"(运行)按钮,以运行应用程序。程序应正确执行,并且 "Output"(输出)窗口应显示类似以下内容的输出:
-image::images/jni-build-success.png[]</p>
+<p>按 F6 或单击工具栏中的 "Run"(运行)按钮,以运行应用程序。程序应正确执行,并且 "Output"(输出)窗口应显示类似以下内容的输出:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/jni-build-success.png" alt="jni build success">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_小结">小结</h3>
diff --git a/content/kb/docs/cnd/c-unit-test.html b/content/kb/docs/cnd/c-unit-test.html
index c13c3d2..bdba343 100644
--- a/content/kb/docs/cnd/c-unit-test.html
+++ b/content/kb/docs/cnd/c-unit-test.html
@@ -508,11 +508,15 @@ $</code></pre>
 <p>In the project wizard, click C/C and then select C/C Application.</p>
 </li>
 <li>
-<p>In the New C/C++ Application dialog box, select Create Main file and select the C language. Accept the defaults for all other options.
-image::images/c-unit-new-project.png[]</p>
+<p>In the New C/C++ Application dialog box, select Create Main file and select the C language. Accept the defaults for all other options.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-project.png" alt="c unit new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -523,11 +527,15 @@ image::images/c-unit-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>In the Projects window, open the Source Files folder and double-click the <code>main.c</code> file to open it in the editor. The file&#8217;s content is similar to that shown here:
-image::images/c-unit-mainc-initial.png[]</p>
+<p>In the Projects window, open the Source Files folder and double-click the <code>main.c</code> file to open it in the editor. The file&#8217;s content is similar to that shown here:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-initial.png" alt="c unit mainc initial">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -580,11 +588,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="8">
 <li>
 <p>Build and run the project to make sure it works by clicking the Run button in the IDE toolbar.
-The output should look similar to the following if you enter 8 as the integer:
-image::images/c-unit-output-factorial.png[]</p>
+The output should look similar to the following if you enter 8 as the integer:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-output-factorial.png" alt="c unit output factorial">
+</div>
+</div>
 <div class="paragraph">
 <p>You might need to press Enter twice on some platforms.</p>
 </div>
@@ -602,11 +614,15 @@ image::images/c-unit-output-factorial.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>In the Projects window, right-click the <code>main.c</code> source file and select Create Test &gt; New CUnit Test.
-image::images/c-unit-create-test.png[]</p>
+<p>In the Projects window, right-click the <code>main.c</code> source file and select Create Test &gt; New CUnit Test.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-test.png" alt="c unit create test">
+</div>
+</div>
 <div class="paragraph">
 <p>A wizard opens to help you create the test.</p>
 </div>
@@ -718,11 +734,15 @@ If you look at the function you can see that it does not actually test anything,
 <ol class="arabic" start="5">
 <li>
 <p>Run the test again by right-clicking the New CUnit Test folder and selecting Test.
-The Test Results window should indicate that the test passed.
-image::images/c-unit-run-test-pass.png[]</p>
+The Test Results window should indicate that the test passed.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-test-pass.png" alt="c unit run test pass">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -731,19 +751,27 @@ image::images/c-unit-run-test-pass.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Create a generic CUnit test template by right-clicking the Test Files folder and selecting New CUnit Test.
-image::images/c-unit-new-cunit-test.png[]</p>
+<p>Create a generic CUnit test template by right-clicking the Test Files folder and selecting New CUnit Test.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-cunit-test.png" alt="c unit new cunit test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Name the test My CUnit Test and the test file name <code>mycunittest</code> and click Finish.
-image::images/c-unit-create-mycunittest.png[]</p>
+<p>Name the test My CUnit Test and the test file name <code>mycunittest</code> and click Finish.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-mycunittest.png" alt="c unit create mycunittest">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -773,11 +801,15 @@ CU_ASSERT(2*2 == 5);
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Run the test as before and you should see:
-image::images/c-unit-run-mytest1.png[]</p>
+<p>Run the test as before and you should see:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-mytest1.png" alt="c unit run mytest1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -788,11 +820,15 @@ image::images/c-unit-run-mytest1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Mouse over the failed test to see more information about the failure.
-image::images/c-unit-test-fail-annotation.png[]</p>
+<p>Mouse over the failed test to see more information about the failure.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-test-fail-annotation.png" alt="c unit test fail annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -824,11 +860,15 @@ image::images/c-unit-test-fail-annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Click the Step Into button to execute the program one statement at a time with each click of the button.
-image::images/c-unit-debug-icons.png[]</p>
+<p>Click the Step Into button to execute the program one statement at a time with each click of the button.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-debug-icons.png" alt="c unit debug icons">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -847,19 +887,27 @@ image::images/c-unit-debug-icons.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>In the Projects window, right-click the  <code>main.c</code>  source file and select Create Test &gt; New C Simple Test.
-image::images/c-unit-mainc-new-simple-test.png[]</p>
+<p>In the Projects window, right-click the  <code>main.c</code>  source file and select Create Test &gt; New C Simple Test.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test.png" alt="c unit mainc new simple test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>In the wizard&#8217;s Select Elements window, click the checkbox for the  <code>main</code>  function, then click Next.
-image::images/c-unit-mainc-new-simple-test-select.png[]</p>
+<p>In the wizard&#8217;s Select Elements window, click the checkbox for the  <code>main</code>  function, then click Next.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-select.png" alt="c unit mainc new simple test select">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -873,19 +921,27 @@ image::images/c-unit-mainc-new-simple-test-select.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Expand the New C Simple Test folder, and see that it contains a file <code>newsimpletest.c</code>. This file should be open in the source editor.
-image::images/c-unit-mainc-new-simple-test-folder.png[]</p>
+<p>Expand the New C Simple Test folder, and see that it contains a file <code>newsimpletest.c</code>. This file should be open in the source editor.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-folder.png" alt="c unit mainc new simple test folder">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Notice the <code>newsimpletest.c</code> file contains an automatically generated test function, <code>testFactorial</code>, for the <code>factorial()</code> function of <code>main.c</code>, just as with the CUnit test.
-image::images/c-unit-mainc-new-simple-test-code.png[]</p>
+<p>Notice the <code>newsimpletest.c</code> file contains an automatically generated test function, <code>testFactorial</code>, for the <code>factorial()</code> function of <code>main.c</code>, just as with the CUnit test.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-code.png" alt="c unit mainc new simple test code">
+</div>
+</div>
 <div class="paragraph">
 <p>The  <code>if</code>  statement should test a condition that, if true, indicates that the test failed. The  <code>%%TEST_FAILED%%</code> token triggers display of the graphical indicator of test failures in the Test Results window. The  <code>if</code>  statement in the generated test sets the condition to be true by setting it to 1, so the test always fails when you run it unmodified.</p>
 </div>
@@ -1008,11 +1064,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="4">
 <li>
 <p>In the Projects window, run the test by right-clicking New C Simple Test and choosing Test.
-The Test Results should look as follows:
-image::images/c-unit-simpletest-results.png[]</p>
+The Test Results should look as follows:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-simpletest-results.png" alt="c unit simpletest results">
+</div>
+</div>
 <div class="paragraph">
 <p>If you do not see testNew passed, click the green check button in the left margin of the Test Results window to display tests that passed.</p>
 </div>
diff --git a/content/kb/docs/cnd/c-unit-test_ja.html b/content/kb/docs/cnd/c-unit-test_ja.html
index d89e3c9..5494c40 100644
--- a/content/kb/docs/cnd/c-unit-test_ja.html
+++ b/content/kb/docs/cnd/c-unit-test_ja.html
@@ -507,11 +507,15 @@ $</code></pre>
 <p>プロジェクト・ウィザードで、「C/C」をクリックしてから「C/Cアプリケーション」を選択します。</p>
 </li>
 <li>
-<p>「新規C/C++アプリケーション」ダイアログ・ボックスで、「mainファイルの作成」を選択してから、C言語を選択します。他のすべてのオプションはデフォルトを受け入れます。
-image::images/c-unit-new-project.png[]</p>
+<p>「新規C/C++アプリケーション」ダイアログ・ボックスで、「mainファイルの作成」を選択してから、C言語を選択します。他のすべてのオプションはデフォルトを受け入れます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-project.png" alt="c unit new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -522,11 +526,15 @@ image::images/c-unit-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>「プロジェクト」ウィンドウで、「ソース・ファイル」フォルダを開いて`main.c`ファイルをダブルクリックし、エディタでそのファイルを開きます。ファイルの内容はここに示す内容と同様です。
-image::images/c-unit-mainc-initial.png[]</p>
+<p>「プロジェクト」ウィンドウで、「ソース・ファイル」フォルダを開いて`main.c`ファイルをダブルクリックし、エディタでそのファイルを開きます。ファイルの内容はここに示す内容と同様です。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-initial.png" alt="c unit mainc initial">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -579,11 +587,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="8">
 <li>
 <p>IDEツールバーの「実行」ボタンをクリックすることで、機能することを確かめるためにプロジェクトをビルドおよび実行します。
-出力は、8を整数として入力した場合、次のようになります。
-image::images/c-unit-output-factorial.png[]</p>
+出力は、8を整数として入力した場合、次のようになります。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-output-factorial.png" alt="c unit output factorial">
+</div>
+</div>
 <div class="paragraph">
 <p>一部のプラットフォームで、[Enter]を2回押すことが必要になる場合があります。</p>
 </div>
@@ -601,11 +613,15 @@ image::images/c-unit-output-factorial.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「プロジェクト」ウィンドウで、`main.c`ソース・ファイルを右クリックし、「テストを作成」&gt;新規CUnitテストを選択します。
-image::images/c-unit-create-test.png[]</p>
+<p>「プロジェクト」ウィンドウで、`main.c`ソース・ファイルを右クリックし、「テストを作成」&gt;新規CUnitテストを選択します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-test.png" alt="c unit create test">
+</div>
+</div>
 <div class="paragraph">
 <p>テストを作成するためのウィザードが開かれます。</p>
 </div>
@@ -717,11 +733,15 @@ image::images/c-unit-create-test.png[]</p>
 <ol class="arabic" start="5">
 <li>
 <p>「新規CUnitテスト」フォルダを右クリックして「テスト」を選択することで、テストを再実行します。
-「テスト結果」ウィンドウにテストが成功したことが示されます。
-image::images/c-unit-run-test-pass.png[]</p>
+「テスト結果」ウィンドウにテストが成功したことが示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-test-pass.png" alt="c unit run test pass">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -730,19 +750,27 @@ image::images/c-unit-run-test-pass.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「テスト・ファイル」フォルダを右クリックして新規CUnitテストを選択することで、汎用CUnitテスト・テンプレートを作成します。
-image::images/c-unit-new-cunit-test.png[]</p>
+<p>「テスト・ファイル」フォルダを右クリックして新規CUnitテストを選択することで、汎用CUnitテスト・テンプレートを作成します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-cunit-test.png" alt="c unit new cunit test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>テストはMy CUnit Test、テスト・ファイル名は`mycunittest`という名前を付けて「終了」をクリックします。
-image::images/c-unit-create-mycunittest.png[]</p>
+<p>テストはMy CUnit Test、テスト・ファイル名は`mycunittest`という名前を付けて「終了」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-mycunittest.png" alt="c unit create mycunittest">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -772,11 +800,15 @@ CU_ASSERT(2*2 == 5);
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>前と同じようにテストを実行すると次のように表示されます。
-image::images/c-unit-run-mytest1.png[]</p>
+<p>前と同じようにテストを実行すると次のように表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-mytest1.png" alt="c unit run mytest1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -787,11 +819,15 @@ image::images/c-unit-run-mytest1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>失敗の詳細を表示するには、失敗したテストの上にマウスを移動します。
-image::images/c-unit-test-fail-annotation.png[]</p>
+<p>失敗の詳細を表示するには、失敗したテストの上にマウスを移動します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-test-fail-annotation.png" alt="c unit test fail annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -823,11 +859,15 @@ image::images/c-unit-test-fail-annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>「ステップ・イン」ボタンをクリックして、ボタンをクリックするたびに1回で1行、プログラムを実行します。
-image::images/c-unit-debug-icons.png[]</p>
+<p>「ステップ・イン」ボタンをクリックして、ボタンをクリックするたびに1回で1行、プログラムを実行します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-debug-icons.png" alt="c unit debug icons">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -846,19 +886,27 @@ image::images/c-unit-debug-icons.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「プロジェクト」ウィンドウで、 <code>main.c</code> ソース・ファイルを右クリックし、「テストを作成」&gt;新規C簡易テストを選択します。
-image::images/c-unit-mainc-new-simple-test.png[]</p>
+<p>「プロジェクト」ウィンドウで、 <code>main.c</code> ソース・ファイルを右クリックし、「テストを作成」&gt;新規C簡易テストを選択します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test.png" alt="c unit mainc new simple test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>ウィザードの「要素を選択」ウィンドウで、 <code>main</code> 関数のチェックボックスをクリックしてから、「次」をクリックします。
-image::images/c-unit-mainc-new-simple-test-select.png[]</p>
+<p>ウィザードの「要素を選択」ウィンドウで、 <code>main</code> 関数のチェックボックスをクリックしてから、「次」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-select.png" alt="c unit mainc new simple test select">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -872,16 +920,27 @@ image::images/c-unit-mainc-new-simple-test-select.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>「新規C簡易テスト」フォルダを展開すると、`newsimpletest.c`ファイルが含まれていることが示されます。このファイルはソース・エディタで開かれます。
-image::images/c-unit-mainc-new-simple-test-folder.png[]</p>
+<p>「新規C簡易テスト」フォルダを展開すると、`newsimpletest.c`ファイルが含まれていることが示されます。このファイルはソース・エディタで開かれます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-folder.png" alt="c unit mainc new simple test folder">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>`newsimpletest.c`ファイルには、CUnitと同様に、`main.c`の`factorial()`関数に対して自動生成されたテスト関数、`testFactorial`が含まれることに注意してください。
-image::images/c-unit-mainc-new-simple-test-code.png[]</p>
+<p>`newsimpletest.c`ファイルには、CUnitと同様に、`main.c`の`factorial()`関数に対して自動生成されたテスト関数、`testFactorial`が含まれることに注意してください。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-code.png" alt="c unit mainc new simple test code">
+</div>
+</div>
 <div class="literalblock">
 <div class="content">
 <pre>``if`` 文は、trueの場合は、テストが失敗したことを示す条件をテストする必要があります。 ``%%TEST_FAILED%%`` トークンは、「テスト結果」ウィンドウでのテスト失敗のグラフィカル・インジケータの表示をトリガーします。生成されたテスト内の ``if`` 文は、1に設定することで条件をtrueに設定するため、未変更のまま実行するとテストは常に失敗します。</pre>
@@ -902,9 +961,6 @@ image::images/c-unit-mainc-new-simple-test-code.png[]</p>
 <pre>``message`` オプションを使用すると、テスト失敗に関するメッセージをテストで出力できます。</pre>
 </div>
 </div>
-</li>
-</ol>
-</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -1015,11 +1071,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="4">
 <li>
 <p>「プロジェクト」ウィンドウで、新規C簡易テストを右クリックして「テスト」を選択することで、テストを実行します。
-テスト結果は次のようになります。
-image::images/c-unit-simpletest-results.png[]</p>
+テスト結果は次のようになります。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-simpletest-results.png" alt="c unit simpletest results">
+</div>
+</div>
 <div class="paragraph">
 <p>testNew passedと表示されない場合は、「テスト結果」ウィンドウの左マージンの緑色のチェック・ボタンをクリックして、成功したテストを表示します。</p>
 </div>
diff --git a/content/kb/docs/cnd/c-unit-test_pt_BR.html b/content/kb/docs/cnd/c-unit-test_pt_BR.html
index d7448f2..5712899 100644
--- a/content/kb/docs/cnd/c-unit-test_pt_BR.html
+++ b/content/kb/docs/cnd/c-unit-test_pt_BR.html
@@ -508,11 +508,15 @@ $</code></pre>
 <p>No assistente do projeto, clique em C/C e, em seguida, selecione a Aplicação C/C.</p>
 </li>
 <li>
-<p>Na caixa de diálogo Nova Aplicação C/C++, selecione Criar Arquivo Principal e selecione a linguagem C. Aceite os defaults para todas as outras opções.
-image::images/c-unit-new-project.png[]</p>
+<p>Na caixa de diálogo Nova Aplicação C/C++, selecione Criar Arquivo Principal e selecione a linguagem C. Aceite os defaults para todas as outras opções.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-project.png" alt="c unit new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -523,11 +527,15 @@ image::images/c-unit-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Na janela Projetos, abra a pasta Arquivos de Origem e clique duas vezes no arquivo <code>main.c</code> para abri-lo no editor. O conteúdo do arquivo é semelhante ao mostrado aqui:
-image::images/c-unit-mainc-initial.png[]</p>
+<p>Na janela Projetos, abra a pasta Arquivos de Origem e clique duas vezes no arquivo <code>main.c</code> para abri-lo no editor. O conteúdo do arquivo é semelhante ao mostrado aqui:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-initial.png" alt="c unit mainc initial">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -580,11 +588,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="8">
 <li>
 <p>Construa e execute o projeto para certificar-se de que ele funciona, clicando no botão Executar na barra de ferramentas IDE.
-A saída deve ser semelhante ao seguinte, se você inserir 8 como inteiro:
-image::images/c-unit-output-factorial.png[]</p>
+A saída deve ser semelhante ao seguinte, se você inserir 8 como inteiro:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-output-factorial.png" alt="c unit output factorial">
+</div>
+</div>
 <div class="paragraph">
 <p>Pode ser necessário pressionar Enter duas vezes em algumas plataformas.</p>
 </div>
@@ -602,11 +614,15 @@ image::images/c-unit-output-factorial.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Na janela Projetos, clique com o botão direito do mouse no arquivo de origem <code>main.c</code> e selecione Criar Teste &gt; Novo Teste CUnit.
-image::images/c-unit-create-test.png[]</p>
+<p>Na janela Projetos, clique com o botão direito do mouse no arquivo de origem <code>main.c</code> e selecione Criar Teste &gt; Novo Teste CUnit.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-test.png" alt="c unit create test">
+</div>
+</div>
 <div class="paragraph">
 <p>Um assistente é aberto para ajudá-lo a criar o teste.</p>
 </div>
@@ -718,11 +734,15 @@ Se observar a função você verificará que ela não testa nada, mas simplesmen
 <ol class="arabic" start="5">
 <li>
 <p>Execute o teste novamente clicando com o botão direito na pasta Novo Teste CUnit e selecionando Testar.
-A janela Resultados do Teste deve indicar que o teste foi aprovado.
-image::images/c-unit-run-test-pass.png[]</p>
+A janela Resultados do Teste deve indicar que o teste foi aprovado.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-test-pass.png" alt="c unit run test pass">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -731,19 +751,27 @@ image::images/c-unit-run-test-pass.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Crie um modelo de teste CUnit genérico clicando com o botão direito na pasta Arquivos de Teste e selecionando Novo Teste CUnit.
-image::images/c-unit-new-cunit-test.png[]</p>
+<p>Crie um modelo de teste CUnit genérico clicando com o botão direito na pasta Arquivos de Teste e selecionando Novo Teste CUnit.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-cunit-test.png" alt="c unit new cunit test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Chame o teste Meu Teste CUnit e o nome do arquivo de teste <code>mycunittest</code> e clique em Finalizar.
-image::images/c-unit-create-mycunittest.png[]</p>
+<p>Chame o teste Meu Teste CUnit e o nome do arquivo de teste <code>mycunittest</code> e clique em Finalizar.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-mycunittest.png" alt="c unit create mycunittest">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -773,11 +801,15 @@ CU_ASSERT(2*2 == 5);
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Execute o teste como antes e você deverá ver:
-image::images/c-unit-run-mytest1.png[]</p>
+<p>Execute o teste como antes e você deverá ver:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-mytest1.png" alt="c unit run mytest1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -788,11 +820,15 @@ image::images/c-unit-run-mytest1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Passe o mouse sobre o teste com falha para ver mais informações sobre a falha.
-image::images/c-unit-test-fail-annotation.png[]</p>
+<p>Passe o mouse sobre o teste com falha para ver mais informações sobre a falha.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-test-fail-annotation.png" alt="c unit test fail annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -824,11 +860,15 @@ image::images/c-unit-test-fail-annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Clique no botão Step Into para executar a instrução de um programa cada vez que clicar no botão
-image::images/c-unit-debug-icons.png[]</p>
+<p>Clique no botão Step Into para executar a instrução de um programa cada vez que clicar no botão</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-debug-icons.png" alt="c unit debug icons">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -847,19 +887,27 @@ image::images/c-unit-debug-icons.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Na janela Projetos, clique com o botão direito do mouse no arquivo de origem  <code>main.c</code>  e selecione Criar Teste &gt; Novo Teste Simples C.
-image::images/c-unit-mainc-new-simple-test.png[]</p>
+<p>Na janela Projetos, clique com o botão direito do mouse no arquivo de origem  <code>main.c</code>  e selecione Criar Teste &gt; Novo Teste Simples C.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test.png" alt="c unit mainc new simple test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Na janela Selecionar Elementos do assistente, clique na caixa de seleção da função  <code>main</code> , em seguida, clique em Próximo.
-image::images/c-unit-mainc-new-simple-test-select.png[]</p>
+<p>Na janela Selecionar Elementos do assistente, clique na caixa de seleção da função  <code>main</code> , em seguida, clique em Próximo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-select.png" alt="c unit mainc new simple test select">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -873,19 +921,27 @@ image::images/c-unit-mainc-new-simple-test-select.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Expanda a pasta Novo Teste Simples C e veja se ela contém um arquivo <code>newsimpletest.c</code>. Este arquivo deve ser aberto no editor de código-fonte.
-image::images/c-unit-mainc-new-simple-test-folder.png[]</p>
+<p>Expanda a pasta Novo Teste Simples C e veja se ela contém um arquivo <code>newsimpletest.c</code>. Este arquivo deve ser aberto no editor de código-fonte.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-folder.png" alt="c unit mainc new simple test folder">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Observe que o arquivo <code>newsimpletest.c</code> contém uma função de teste gerada automaticamente, <code>testFactorial</code>, para a função <code>factorial()</code> de <code>main.c</code>, como no teste CUnit.
-image::images/c-unit-mainc-new-simple-test-code.png[]</p>
+<p>Observe que o arquivo <code>newsimpletest.c</code> contém uma função de teste gerada automaticamente, <code>testFactorial</code>, para a função <code>factorial()</code> de <code>main.c</code>, como no teste CUnit.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-code.png" alt="c unit mainc new simple test code">
+</div>
+</div>
 <div class="paragraph">
 <p>A instrução  <code>if</code>  deve testar uma condição que, se verdadeira, indica que o teste falhou. O token  <code>%%TEST_FAILED%%</code> aciona a exibição do indicador gráfico de falhas de teste na janela Resultados do Teste. A instrução  <code>if</code>  no teste gerado defina a condição como verdadeira, definindo-a como 1, dessa forma o teste sempre falha quando você executá-lo sem modificação.</p>
 </div>
@@ -1008,11 +1064,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="4">
 <li>
 <p>Na janela Projetos, execute o teste clicando com o botão direito do mouse em Novo Teste Simples C e escolhendo Testar.
-Os Resultados do Teste devem parecer com o seguinte:
-image::images/c-unit-simpletest-results.png[]</p>
+Os Resultados do Teste devem parecer com o seguinte:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-simpletest-results.png" alt="c unit simpletest results">
+</div>
+</div>
 <div class="paragraph">
 <p>Se você não vir testNew aprovado, clique no botão de verificação verde na margem esquerda da janela Resultados do Teste para exibir os testes que foram aprovados.</p>
 </div>
diff --git a/content/kb/docs/cnd/c-unit-test_ru.html b/content/kb/docs/cnd/c-unit-test_ru.html
index d2eabfd..ffe35b3 100644
--- a/content/kb/docs/cnd/c-unit-test_ru.html
+++ b/content/kb/docs/cnd/c-unit-test_ru.html
@@ -508,11 +508,15 @@ $</code></pre>
 <p>В мастере создания проектов выберите 'C/C', а затем 'Приложение C/C'.</p>
 </li>
 <li>
-<p>В диалоговом окне 'Создание приложения C/C++' выберите 'Создать основной файл', затем выберите язык C. Оставьте все остальные настройки по умолчанию без изменения.
-image::images/c-unit-new-project.png[]</p>
+<p>В диалоговом окне 'Создание приложения C/C++' выберите 'Создать основной файл', затем выберите язык C. Оставьте все остальные настройки по умолчанию без изменения.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-project.png" alt="c unit new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -523,11 +527,15 @@ image::images/c-unit-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>В окне 'Проекты' откройте папку 'Исходные файлы' и дважды щелкните файл <code>main.c</code>, чтобы открыть его в редакторе. Содержимое файла будет выглядеть примерно так, как показано на рисунке:
-image::images/c-unit-mainc-initial.png[]</p>
+<p>В окне 'Проекты' откройте папку 'Исходные файлы' и дважды щелкните файл <code>main.c</code>, чтобы открыть его в редакторе. Содержимое файла будет выглядеть примерно так, как показано на рисунке:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-initial.png" alt="c unit mainc initial">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -580,11 +588,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="8">
 <li>
 <p>Выполните сборку и запуск проекта, чтобы проверить его работоспособность. Для этого нажмите кнопку 'Выполнить' на панели инструментов IDE.
-Если в качестве целого числа указать 8, должен получиться следующий результат:
-image::images/c-unit-output-factorial.png[]</p>
+Если в качестве целого числа указать 8, должен получиться следующий результат:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-output-factorial.png" alt="c unit output factorial">
+</div>
+</div>
 <div class="paragraph">
 <p>На некоторых платформах может потребоваться двукратное нажатие на клавишу Enter.</p>
 </div>
@@ -602,11 +614,15 @@ image::images/c-unit-output-factorial.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>В окне 'Проекты' дважды щелкните исходный файл <code>main.c</code> и выберите Создать тест &gt; Создать тест CUnit.
-image::images/c-unit-create-test.png[]</p>
+<p>В окне 'Проекты' дважды щелкните исходный файл <code>main.c</code> и выберите Создать тест &gt; Создать тест CUnit.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-test.png" alt="c unit create test">
+</div>
+</div>
 <div class="paragraph">
 <p>Открывается мастер создания тестов.</p>
 </div>
@@ -718,11 +734,15 @@ image::images/c-unit-create-test.png[]</p>
 <ol class="arabic" start="5">
 <li>
 <p>Запустите тест повторно, щелкнув правой кнопкой мыши папку New CUnit Test и выбрав 'Тест'.
-В окне 'Результаты теста выводятся данные, указывающие на то, что тест пройден.
-image::images/c-unit-run-test-pass.png[]</p>
+В окне 'Результаты теста выводятся данные, указывающие на то, что тест пройден.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-test-pass.png" alt="c unit run test pass">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -731,19 +751,27 @@ image::images/c-unit-run-test-pass.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Создайте общий шаблон теста CUnit. Для этого щелкните правой кнопкой мыши папку 'Файлы тестов' и выберите 'Создать тест CUnit'.
-image::images/c-unit-new-cunit-test.png[]</p>
+<p>Создайте общий шаблон теста CUnit. Для этого щелкните правой кнопкой мыши папку 'Файлы тестов' и выберите 'Создать тест CUnit'.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-cunit-test.png" alt="c unit new cunit test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Назовите тест My CUnit Test (имя файла должно иметь вид <code>mycunittest</code>) и нажмите 'Готово'.
-image::images/c-unit-create-mycunittest.png[]</p>
+<p>Назовите тест My CUnit Test (имя файла должно иметь вид <code>mycunittest</code>) и нажмите 'Готово'.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-mycunittest.png" alt="c unit create mycunittest">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -773,11 +801,15 @@ CU_ASSERT(2*2 == 5);
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Выполните тест так же, как предыдущий. Отобразится следующий результат:
-image::images/c-unit-run-mytest1.png[]</p>
+<p>Выполните тест так же, как предыдущий. Отобразится следующий результат:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-mytest1.png" alt="c unit run mytest1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -788,11 +820,15 @@ image::images/c-unit-run-mytest1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Наведите указатель мыши на непройденный тест, чтобы просмотреть сведения об ошибке.
-image::images/c-unit-test-fail-annotation.png[]</p>
+<p>Наведите указатель мыши на непройденный тест, чтобы просмотреть сведения об ошибке.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-test-fail-annotation.png" alt="c unit test fail annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -824,11 +860,15 @@ image::images/c-unit-test-fail-annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Нажмите кнопку 'Шаг с заходом' для пошагового выполнения программы. При каждом нажатии этой кнопки выполняется один оператор.
-image::images/c-unit-debug-icons.png[]</p>
+<p>Нажмите кнопку 'Шаг с заходом' для пошагового выполнения программы. При каждом нажатии этой кнопки выполняется один оператор.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-debug-icons.png" alt="c unit debug icons">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -847,19 +887,27 @@ image::images/c-unit-debug-icons.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>В окне 'Проекты' щелкните правой кнопкой мыши исходный файл  <code>main.c</code>  и выберите Создать тест &gt; Создать простой тест C.
-image::images/c-unit-mainc-new-simple-test.png[]</p>
+<p>В окне 'Проекты' щелкните правой кнопкой мыши исходный файл  <code>main.c</code>  и выберите Создать тест &gt; Создать простой тест C.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test.png" alt="c unit mainc new simple test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>В окне 'Выбор элементов' мастера создания тестов установите флажок напротив функции  <code>main</code>  и нажмите 'Далее'.
-image::images/c-unit-mainc-new-simple-test-select.png[]</p>
+<p>В окне 'Выбор элементов' мастера создания тестов установите флажок напротив функции  <code>main</code>  и нажмите 'Далее'.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-select.png" alt="c unit mainc new simple test select">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -873,19 +921,27 @@ image::images/c-unit-mainc-new-simple-test-select.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Разверните структуру папки New C Simple. Эта папка должна содержать файл <code>newsimpletest.c</code>. Откройте этот файл в редакторе исходного кода.
-image::images/c-unit-mainc-new-simple-test-folder.png[]</p>
+<p>Разверните структуру папки New C Simple. Эта папка должна содержать файл <code>newsimpletest.c</code>. Откройте этот файл в редакторе исходного кода.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-folder.png" alt="c unit mainc new simple test folder">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Аналогично тесту CUnit файл <code>newsimpletest.c</code> содержит автоматически генерируемую тестовую функцию <code>testFactorial</code> для функции <code>factorial()</code> основного файла <code>main.c</code>.
-image::images/c-unit-mainc-new-simple-test-code.png[]</p>
+<p>Аналогично тесту CUnit файл <code>newsimpletest.c</code> содержит автоматически генерируемую тестовую функцию <code>testFactorial</code> для функции <code>factorial()</code> основного файла <code>main.c</code>.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-code.png" alt="c unit mainc new simple test code">
+</div>
+</div>
 <div class="paragraph">
 <p>Оператор  <code>if</code>  должен проверять условие. Если условие имеет значение true, тест считается непройденным. Маркер  <code>%%TEST_FAILED%%</code>  инициирует отображение графического обозначения неуспешного выполнения тестов в окне 'Результаты теста'. Оператор  <code>if</code>  в созданном тесте задает для условия значение true (1), поэтому при запуске этого теста без предварительного редактирования он всегда будет неуспешным.</p>
 </div>
@@ -1008,11 +1064,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="4">
 <li>
 <p>В окне 'Проекты' запустите тест, щелкнув правой кнопкой мыши папку New C Simple Test и выбрав 'Тест'.
-В окне 'Результаты теста' должны отобразиться следующие данные:
-image::images/c-unit-simpletest-results.png[]</p>
+В окне 'Результаты теста' должны отобразиться следующие данные:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-simpletest-results.png" alt="c unit simpletest results">
+</div>
+</div>
 <div class="paragraph">
 <p>Если вы не уверены, что тест testNew пройден, нажмите значок в виде зеленой галочки в левой части окна 'Результаты теста', чтобы просмотреть все пройденные тесты.</p>
 </div>
diff --git a/content/kb/docs/cnd/c-unit-test_zh_CN.html b/content/kb/docs/cnd/c-unit-test_zh_CN.html
index f4ebf06..492455e 100644
--- a/content/kb/docs/cnd/c-unit-test_zh_CN.html
+++ b/content/kb/docs/cnd/c-unit-test_zh_CN.html
@@ -508,11 +508,15 @@ $</code></pre>
 <p>在项目向导中,单击 "C/C",然后选择 "C/C Application"(C/C++ 应用程序)。</p>
 </li>
 <li>
-<p>在 "New C/C Application"(新建 C/C 应用程序)对话框中,选择 "Create Main File"(创建主文件)并选择 "C language"(C 语言)。接受所有其他选项的默认值。
-image::images/c-unit-new-project.png[]</p>
+<p>在 "New C/C Application"(新建 C/C 应用程序)对话框中,选择 "Create Main File"(创建主文件)并选择 "C language"(C 语言)。接受所有其他选项的默认值。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-project.png" alt="c unit new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -523,11 +527,15 @@ image::images/c-unit-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>在 "Projects"(项目)窗口中,打开 "Source Files"(源文件)文件夹并双击 <code>main.c</code> 文件以将其在编辑器中打开。此文件的内容类似于此处所示的内容:
-image::images/c-unit-mainc-initial.png[]</p>
+<p>在 "Projects"(项目)窗口中,打开 "Source Files"(源文件)文件夹并双击 <code>main.c</code> 文件以将其在编辑器中打开。此文件的内容类似于此处所示的内容:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-initial.png" alt="c unit mainc initial">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -580,11 +588,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="8">
 <li>
 <p>通过单击 IDE 工具栏中的 "Run"(运行)按钮,构建并运行项目以确保其工作。
-如果输入 8 作为整数,则输出应看起来类似于以下内容:
-image::images/c-unit-output-factorial.png[]</p>
+如果输入 8 作为整数,则输出应看起来类似于以下内容:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-output-factorial.png" alt="c unit output factorial">
+</div>
+</div>
 <div class="paragraph">
 <p>在某些平台上,您可能需要按两次 Enter 键。</p>
 </div>
@@ -602,11 +614,15 @@ image::images/c-unit-output-factorial.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>在 "Projects"(项目)窗口中,右键单击 <code>main.c</code> 源文件,然后选择 "Create Test"(创建测试)&gt; "New CUnit Test"(新 CUnit 测试)。
-image::images/c-unit-create-test.png[]</p>
+<p>在 "Projects"(项目)窗口中,右键单击 <code>main.c</code> 源文件,然后选择 "Create Test"(创建测试)&gt; "New CUnit Test"(新 CUnit 测试)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-test.png" alt="c unit create test">
+</div>
+</div>
 <div class="paragraph">
 <p>将打开一个向导以帮助您创建测试。</p>
 </div>
@@ -718,11 +734,15 @@ image::images/c-unit-create-test.png[]</p>
 <ol class="arabic" start="5">
 <li>
 <p>通过右键单击 "New CUnit Test"(新 CUnit 测试)文件夹并选择 "Test"(测试),再次运行测试。
-"Test Results"(测试结果)窗口应指示测试已通过。
-image::images/c-unit-run-test-pass.png[]</p>
+"Test Results"(测试结果)窗口应指示测试已通过。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-test-pass.png" alt="c unit run test pass">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -731,19 +751,27 @@ image::images/c-unit-run-test-pass.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>通过右键单击 "Test Files"(测试文件)文件夹并选择 "New CUnit Test"(新 CUnit 测试),创建通用 CUnit 测试模板。
-image::images/c-unit-new-cunit-test.png[]</p>
+<p>通过右键单击 "Test Files"(测试文件)文件夹并选择 "New CUnit Test"(新 CUnit 测试),创建通用 CUnit 测试模板。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-new-cunit-test.png" alt="c unit new cunit test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>将测试命名为 "My CUnit Test"(我的 CUnit 测试)并将测试文件名命名为 <code>mycunittest</code>,然后单击 "Finish"(完成)。
-image::images/c-unit-create-mycunittest.png[]</p>
+<p>将测试命名为 "My CUnit Test"(我的 CUnit 测试)并将测试文件名命名为 <code>mycunittest</code>,然后单击 "Finish"(完成)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-create-mycunittest.png" alt="c unit create mycunittest">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -773,11 +801,15 @@ CU_ASSERT(2*2 == 5);
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>像以前一样运行测试,您应该会看到:
-image::images/c-unit-run-mytest1.png[]</p>
+<p>像以前一样运行测试,您应该会看到:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-run-mytest1.png" alt="c unit run mytest1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -788,11 +820,15 @@ image::images/c-unit-run-mytest1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>将鼠标放在失败的测试上方可查看有关失败情况的详细信息。
-image::images/c-unit-test-fail-annotation.png[]</p>
+<p>将鼠标放在失败的测试上方可查看有关失败情况的详细信息。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-test-fail-annotation.png" alt="c unit test fail annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -824,11 +860,15 @@ image::images/c-unit-test-fail-annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>单击 "Step Into"(步入)按钮将执行程序,每单击一次此按钮将会执行一条语句。
-image::images/c-unit-debug-icons.png[]</p>
+<p>单击 "Step Into"(步入)按钮将执行程序,每单击一次此按钮将会执行一条语句。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-debug-icons.png" alt="c unit debug icons">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -847,19 +887,27 @@ image::images/c-unit-debug-icons.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>在 "Projects"(项目)窗口中,右键单击  <code>main.c</code>  源文件,然后选择 "Create Test"(创建测试)&gt; "New C Simple Test"(新 C 简单测试)。
-image::images/c-unit-mainc-new-simple-test.png[]</p>
+<p>在 "Projects"(项目)窗口中,右键单击  <code>main.c</code>  源文件,然后选择 "Create Test"(创建测试)&gt; "New C Simple Test"(新 C 简单测试)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test.png" alt="c unit mainc new simple test">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>在向导的 "Select Elements"(选择元素)窗口中,单击  <code>main</code>  函数对应的复选框,然后单击 "Next"(下一步)。
-image::images/c-unit-mainc-new-simple-test-select.png[]</p>
+<p>在向导的 "Select Elements"(选择元素)窗口中,单击  <code>main</code>  函数对应的复选框,然后单击 "Next"(下一步)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-select.png" alt="c unit mainc new simple test select">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -873,16 +921,27 @@ image::images/c-unit-mainc-new-simple-test-select.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>展开 "New C Simple Test"(新 C 简单测试)文件夹,可以看到它包含文件 <code>newsimpletest.c</code>。此文件应在源代码编辑器中打开。
-image::images/c-unit-mainc-new-simple-test-folder.png[]</p>
+<p>展开 "New C Simple Test"(新 C 简单测试)文件夹,可以看到它包含文件 <code>newsimpletest.c</code>。此文件应在源代码编辑器中打开。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-folder.png" alt="c unit mainc new simple test folder">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>注意 <code>newsimpletest.c</code> 文件包含一个自动生成的测试函数 <code>testFactorial</code>,该函数属于 <code>main.c</code> 的 <code>factorial()</code> 函数,就像 CUnit 测试一样。
-image::images/c-unit-mainc-new-simple-test-code.png[]</p>
+<p>注意 <code>newsimpletest.c</code> 文件包含一个自动生成的测试函数 <code>testFactorial</code>,该函数属于 <code>main.c</code> 的 <code>factorial()</code> 函数,就像 CUnit 测试一样。</p>
+</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-mainc-new-simple-test-code.png" alt="c unit mainc new simple test code">
+</div>
+</div>
 <div class="literalblock">
 <div class="content">
 <pre>``if``  语句应测试一个条件,如果该条件为 true,则指示测试失败。 ``%%TEST_FAILED%%``  标记触发在 "Test Results"(测试结果)窗口中显示测试失败的图形指示符。生成的测试中的  ``if``  语句通过将条件设置为 1 来将其设置为 true,这样在无修改情况下运行时测试始终失败。</pre>
@@ -898,9 +957,6 @@ image::images/c-unit-mainc-new-simple-test-code.png[]</p>
 <pre>``time=0``  选项用于向测试中添加时间测量。</pre>
 </div>
 </div>
-</li>
-</ol>
-</div>
 <div class="paragraph">
 <p>使用  <code>message</code>  选项可以使测试输出有关测试失败的消息。</p>
 </div>
@@ -1014,11 +1070,15 @@ int main(int argc, char** argv) {
 <ol class="arabic" start="4">
 <li>
 <p>在 "Projects"(项目)窗口中,通过右键单击 "New C Simple Test"(新 C 简单测试)并选择 "Test"(测试)来运行测试。
-测试结果应如下所示:
-image::images/c-unit-simpletest-results.png[]</p>
+测试结果应如下所示:</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/c-unit-simpletest-results.png" alt="c unit simpletest results">
+</div>
+</div>
 <div class="paragraph">
 <p>如果您看不到 testNew 通过,请单击 "Test Results"(测试结果)窗口左旁注中的绿色选中按钮以显示通过的测试。</p>
 </div>
diff --git a/content/kb/docs/cnd/debugging.html b/content/kb/docs/cnd/debugging.html
index b998847..29930e5 100644
--- a/content/kb/docs/cnd/debugging.html
+++ b/content/kb/docs/cnd/debugging.html
@@ -188,11 +188,15 @@
 <p>In the  <code>Quote_1</code>  project, open the  <code>quote.cc</code>  file.</p>
 </li>
 <li>
-<p>Set a line breakpoint by clicking in the left margin of the Source Editor window next to line 171 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ). The line is highlighted in red to indicate that the breakpoint is set.
-image::images/line_breakpoint1.png[]</p>
+<p>Set a line breakpoint by clicking in the left margin of the Source Editor window next to line 171 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ). The line is highlighted in red to indicate that the breakpoint is set.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint1.png" alt="line breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -203,19 +207,27 @@ image::images/line_breakpoint1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Choose Window &gt; Debugging &gt; Breakpoints to open the Breakpoints window. Your line breakpoint is listed under the C/C++ node.
-image::images/line_breakpoint2.png[]</p>
+<p>Choose Window &gt; Debugging &gt; Breakpoints to open the Breakpoints window. Your line breakpoint is listed under the C/C++ node.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2.png" alt="line breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Expand the C/C++ node to see your breakpoint.
-image::images/line_breakpoint2_expand.png[]</p>
+<p>Expand the C/C++ node to see your breakpoint.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2_expand.png" alt="line breakpoint2 expand">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_creating_a_function_breakpoint">Creating a Function Breakpoint</h3>
@@ -231,35 +243,51 @@ image::images/line_breakpoint2_expand.png[]</p>
 <p>In the Breakpoint Type list, select Function.</p>
 </li>
 <li>
-<p>Type the function name  <code>Customer::GetDiscount</code>  in the Function Name text field. Click OK.
-image::images/function_breakpoint1.png[]</p>
+<p>Type the function name  <code>Customer::GetDiscount</code>  in the Function Name text field. Click OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint1.png" alt="function breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Your function breakpoint is set and is added to the list in the Breakpoints window.
-image::images/function_breakpoint2.png[]</p>
+<p>Your function breakpoint is set and is added to the list in the Breakpoints window.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint2.png" alt="function breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Click the Select Breakpoint Groups button in the left margin to organize the breakpoints into different groups and select Type.
-image::images/group_breakpoint_type.png[]</p>
+<p>Click the Select Breakpoint Groups button in the left margin to organize the breakpoints into different groups and select Type.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/group_breakpoint_type.png" alt="group breakpoint type">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Expand the File:Line and Function groups to display your breakpoints.
-image::images/breakpoint_types.png[]</p>
+<p>Expand the File:Line and Function groups to display your breakpoints.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/breakpoint_types.png" alt="breakpoint types">
+</div>
+</div>
 </div>
 </div>
 </div>
@@ -272,12 +300,16 @@ image::images/breakpoint_types.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Start a debugging session for the  <code>Quote_1</code>  project by clicking the Debug Project button image::images/debugbutton.png[] or by choosing Debug &gt; Debug Project.
-The debugger starts and the application runs. The debug toolbar is displayed.
-image::images/debugger_toolbar.png[]</p>
+<p>Start a debugging session for the  <code>Quote_1</code>  project by clicking the Debug Project button <span class="image"><img src="images/debugbutton.png" alt="debugbutton"></span> or by choosing Debug &gt; Debug Project.
+The debugger starts and the application runs. The debug toolbar is displayed.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger_toolbar.png" alt="debugger toolbar">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -302,17 +334,25 @@ The debugging session is shown in this window.</p>
 </ol>
 </div>
 <div class="paragraph">
-<p>The application stops at the Customer::GetDiscount function breakpoint you set earlier and the customer.cc file opens in the editor at the line where the funtion is called. The Breakpoints window lists the two breakpoints you set earlier. The green program counter arrow appears on top of the breakpoint icon of the function breakpoint.
-image::images/function_breakpoint3.png[]</p>
+<p>The application stops at the Customer::GetDiscount function breakpoint you set earlier and the customer.cc file opens in the editor at the line where the funtion is called. The Breakpoints window lists the two breakpoints you set earlier. The green program counter arrow appears on top of the breakpoint icon of the function breakpoint.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint3.png" alt="function breakpoint3">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Click the tab for the Call Stack window or choose Window &gt; Debugging &gt; Call Stack. The call stack shows three frames.
-image::images/call_stack.png[]</p>
+<p>Click the tab for the Call Stack window or choose Window &gt; Debugging &gt; Call Stack. The call stack shows three frames.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_stack.png" alt="call stack">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -323,11 +363,15 @@ image::images/call_stack.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Click the expand icons to expand the structure.
-image::images/local_variables1.png[]</p>
+<p>Click the expand icons to expand the structure.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables1.png" alt="local variables1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -354,11 +398,15 @@ The  <code>GetDiscount</code>  function is executed, printing the customer disco
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
-<p>Click the Variables tab and note the long list of variables.
-image::images/local_variables2.png[]</p>
+<p>Click the Variables tab and note the long list of variables.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables2.png" alt="local variables2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -370,20 +418,28 @@ image::images/local_variables2.png[]</p>
 <ol class="arabic" start="10">
 <li>
 <p>Choose Window &gt; Debugging &gt; Registers.
-The Registers window opens, displaying the current contents of the registers.
-image::images/registers.png[]</p>
+The Registers window opens, displaying the current contents of the registers.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/registers.png" alt="registers">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
 <p>Choose Window &gt; Debugging &gt; Disassembly.
-The Disassembly window opens, displaying the assembly instructions for the current source file.
-image::images/disassembly.png[]</p>
+The Disassembly window opens, displaying the assembly instructions for the current source file.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/disassembly.png" alt="disassembly">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="12">
 <li>
diff --git a/content/kb/docs/cnd/debugging_ja.html b/content/kb/docs/cnd/debugging_ja.html
index c0ace4b..269db2f 100644
--- a/content/kb/docs/cnd/debugging_ja.html
+++ b/content/kb/docs/cnd/debugging_ja.html
@@ -188,11 +188,15 @@
 <p><code>Quote_1</code> プロジェクトの <code>quote.cc</code> ファイルを開きます。</p>
 </li>
 <li>
-<p>行171 ( <code>response=readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> )の横の、「ソース・エディタ」ウィンドウの左マージンをクリックすることによって行ブレークポイントを設定します。赤く強調表示されている行は、ブレークポイントが設定されていることを示します。
-image::images/line_breakpoint1.png[]</p>
+<p>行171 ( <code>response=readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> )の横の、「ソース・エディタ」ウィンドウの左マージンをクリックすることによって行ブレークポイントを設定します。赤く強調表示されている行は、ブレークポイントが設定されていることを示します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint1.png" alt="line breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -203,19 +207,27 @@ image::images/line_breakpoint1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>「ウィンドウ」&gt;「デバッグ」&gt;「ブレークポイント」を選択し、「ブレークポイント」ウィンドウを開きます。行ブレークポイントがC/C++ノードの下に一覧表示されます。
-image::images/line_breakpoint2.png[]</p>
+<p>「ウィンドウ」&gt;「デバッグ」&gt;「ブレークポイント」を選択し、「ブレークポイント」ウィンドウを開きます。行ブレークポイントがC/C++ノードの下に一覧表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2.png" alt="line breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>行ブレークポイントを表示するには、C/C++ノードを拡張します。
-image::images/line_breakpoint2_expand.png[]</p>
+<p>行ブレークポイントを表示するには、C/C++ノードを拡張します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2_expand.png" alt="line breakpoint2 expand">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_関数ブレークポイントの作成">関数ブレークポイントの作成</h3>
@@ -231,35 +243,51 @@ image::images/line_breakpoint2_expand.png[]</p>
 <p>「ブレークポイント・タイプ」リストで、「関数」を選択します。</p>
 </li>
 <li>
-<p>「関数名」テキスト・フィールドに「 <code>Customer::GetDiscount</code> 」を入力します。「OK」をクリックします。
-image::images/function_breakpoint1.png[]</p>
+<p>「関数名」テキスト・フィールドに「 <code>Customer::GetDiscount</code> 」を入力します。「OK」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint1.png" alt="function breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>関数ブレークポイントが設定され、「ブレークポイント」ウィンドウの一覧に追加されます。
-image::images/function_breakpoint2.png[]</p>
+<p>関数ブレークポイントが設定され、「ブレークポイント」ウィンドウの一覧に追加されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint2.png" alt="function breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>左マージンで「ブレークポイント・グループを選択」ボタンをクリックしてブレークポイントを各種グループに編成し、「タイプ」を選択します。
-image::images/group_breakpoint_type.png[]</p>
+<p>左マージンで「ブレークポイント・グループを選択」ボタンをクリックしてブレークポイントを各種グループに編成し、「タイプ」を選択します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/group_breakpoint_type.png" alt="group breakpoint type">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>ブレークポイントを表示するには、「ファイル:行」および「関数」グループを拡張します。
-image::images/breakpoint_types.png[]</p>
+<p>ブレークポイントを表示するには、「ファイル:行」および「関数」グループを拡張します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/breakpoint_types.png" alt="breakpoint types">
+</div>
+</div>
 </div>
 </div>
 </div>
@@ -272,12 +300,16 @@ image::images/breakpoint_types.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「プロジェクトをデバッグ」ボタンimage::images/debugbutton.png[]をクリックして <code>Quote_1</code> プロジェクトのデバッグ・セッションを開始するか、「デバッグ」&gt;「プロジェクトをデバッグ」を選択します。
-デバッガが起動し、アプリケーションが実行されます。デバッグ・ツールバーが表示されます。
-image::images/debugger_toolbar.png[]</p>
+<p>「プロジェクトをデバッグ」ボタン<span class="image"><img src="images/debugbutton.png" alt="debugbutton"></span>をクリックして <code>Quote_1</code> プロジェクトのデバッグ・セッションを開始するか、「デバッグ」&gt;「プロジェクトをデバッグ」を選択します。
+デバッガが起動し、アプリケーションが実行されます。デバッグ・ツールバーが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger_toolbar.png" alt="debugger toolbar">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -302,17 +334,25 @@ image::images/debugger_toolbar.png[]</p>
 </ol>
 </div>
 <div class="paragraph">
-<p>アプリケーションは、前に設定したCustomer::GetDiscount関数ブレークポイントで停止し、customer.ccファイルがエディタ内の関数が呼び出された行で開かれます。「ブレークポイント」ウィンドウに、前に設定した2つのブレークポイントが表示されます。関数ブレークポイントのブレークポイント・アイコンの上に、緑色のプログラム・カウンタの矢印が表示されます。
-image::images/function_breakpoint3.png[]</p>
+<p>アプリケーションは、前に設定したCustomer::GetDiscount関数ブレークポイントで停止し、customer.ccファイルがエディタ内の関数が呼び出された行で開かれます。「ブレークポイント」ウィンドウに、前に設定した2つのブレークポイントが表示されます。関数ブレークポイントのブレークポイント・アイコンの上に、緑色のプログラム・カウンタの矢印が表示されます。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint3.png" alt="function breakpoint3">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>「呼出しスタック」ウィンドウのタブをクリックするか、「ウィンドウ」&gt;「デバッグ」&gt;「呼出しスタック」を選択します。コール・スタックに3つのフレームが表示されます。
-image::images/call_stack.png[]</p>
+<p>「呼出しスタック」ウィンドウのタブをクリックするか、「ウィンドウ」&gt;「デバッグ」&gt;「呼出しスタック」を選択します。コール・スタックに3つのフレームが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_stack.png" alt="call stack">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -323,11 +363,15 @@ image::images/call_stack.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>展開アイコンをクリックし、構造を展開します。
-image::images/local_variables1.png[]</p>
+<p>展開アイコンをクリックし、構造を展開します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables1.png" alt="local variables1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -354,11 +398,15 @@ image::images/local_variables1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
-<p>「変数」タブをクリックし、変数の一覧を確認します。
-image::images/local_variables2.png[]</p>
+<p>「変数」タブをクリックし、変数の一覧を確認します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables2.png" alt="local variables2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -370,20 +418,28 @@ image::images/local_variables2.png[]</p>
 <ol class="arabic" start="10">
 <li>
 <p>「ウィンドウ」&gt;「デバッグ」&gt;「レジスタ」を選択します。
-「レジスタ」ウィンドウが開き、現在のレジスタの内容が表示されます。
-image::images/registers.png[]</p>
+「レジスタ」ウィンドウが開き、現在のレジスタの内容が表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/registers.png" alt="registers">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
 <p>「ウィンドウ」&gt;「デバッグ」&gt;「逆アセンブリ」を選択します。
-「逆アセンブリ」ウィンドウが開き、現在のソース・ファイルのアセンブリ命令が表示されます。
-image::images/disassembly.png[]</p>
+「逆アセンブリ」ウィンドウが開き、現在のソース・ファイルのアセンブリ命令が表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/disassembly.png" alt="disassembly">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="12">
 <li>
diff --git a/content/kb/docs/cnd/debugging_pt_BR.html b/content/kb/docs/cnd/debugging_pt_BR.html
index 3df6ae5..58bc30f 100644
--- a/content/kb/docs/cnd/debugging_pt_BR.html
+++ b/content/kb/docs/cnd/debugging_pt_BR.html
@@ -188,11 +188,15 @@
 <p>No projeto  <code>Quote_1</code> , abra o arquivo  <code>quote.cc</code> .</p>
 </li>
 <li>
-<p>Defina um ponto de interrupção clicando na margem esquerda da janela Editor de código-fonte ao lado da linha 171 ( <code>response = readChar("Digite o tipo do módulo do disco: (S para discos únicos, R para RAID; Q - sair)", 'S');</code> ). A linha é realçada em vermelho para indicar que o ponto de interrupção está definido.
-image::images/line_breakpoint1.png[]</p>
+<p>Defina um ponto de interrupção clicando na margem esquerda da janela Editor de código-fonte ao lado da linha 171 ( <code>response = readChar("Digite o tipo do módulo do disco: (S para discos únicos, R para RAID; Q - sair)", 'S');</code> ). A linha é realçada em vermelho para indicar que o ponto de interrupção está definido.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint1.png" alt="line breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -203,19 +207,27 @@ image::images/line_breakpoint1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Escolha Janela &gt; Depuração &gt; Pontos de Interrupção para abrir a janela Pontos de interrupção. Seu ponto de interrupção de linha é listado no nó C/C++.
-image::images/line_breakpoint2.png[]</p>
+<p>Escolha Janela &gt; Depuração &gt; Pontos de Interrupção para abrir a janela Pontos de interrupção. Seu ponto de interrupção de linha é listado no nó C/C++.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2.png" alt="line breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Expanda o nó C/C++ para ver seu ponto de interrupção.
-image::images/line_breakpoint2_expand.png[]</p>
+<p>Expanda o nó C/C++ para ver seu ponto de interrupção.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2_expand.png" alt="line breakpoint2 expand">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_criando_um_ponto_de_interrupção_da_função">Criando um Ponto de Interrupção da Função</h3>
@@ -231,35 +243,51 @@ image::images/line_breakpoint2_expand.png[]</p>
 <p>Na lista Tipo de Ponto de Interrupção, selecione Função.</p>
 </li>
 <li>
-<p>Digite o nome da função  <code>Customer::GetDiscount</code>  no campo de texto Nome da Função. Clique em OK.
-image::images/function_breakpoint1.png[]</p>
+<p>Digite o nome da função  <code>Customer::GetDiscount</code>  no campo de texto Nome da Função. Clique em OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint1.png" alt="function breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Seu ponto de interrupção da função é definido e adicionado à lista na janela Pontos de Interrupção.
-image::images/function_breakpoint2.png[]</p>
+<p>Seu ponto de interrupção da função é definido e adicionado à lista na janela Pontos de Interrupção.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint2.png" alt="function breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Clique no botão Selecionar Grupos de Ponto de Interrupção na margem esquerda para organizar os pontos de interrupção em diferentes grupos e selecione Tipo.
-image::images/group_breakpoint_type.png[]</p>
+<p>Clique no botão Selecionar Grupos de Ponto de Interrupção na margem esquerda para organizar os pontos de interrupção em diferentes grupos e selecione Tipo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/group_breakpoint_type.png" alt="group breakpoint type">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Expanda os grupos de Arquivo:Linha e Função para exibir seus pontos de interrupção.
-image::images/breakpoint_types.png[]</p>
+<p>Expanda os grupos de Arquivo:Linha e Função para exibir seus pontos de interrupção.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/breakpoint_types.png" alt="breakpoint types">
+</div>
+</div>
 </div>
 </div>
 </div>
@@ -272,12 +300,16 @@ image::images/breakpoint_types.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Inicie uma sessão de depuração para o projeto  <code>Quote_1</code>  clicando no botão Depurar Projeto image::images/debugbutton.png[] ou escolhendo Depurar &gt; Depurar Projeto.
-O depurador é iniciado e a aplicação é executada. A barra de ferramentas do depurador é exibida.
-image::images/debugger_toolbar.png[]</p>
+<p>Inicie uma sessão de depuração para o projeto  <code>Quote_1</code>  clicando no botão Depurar Projeto <span class="image"><img src="images/debugbutton.png" alt="debugbutton"></span> ou escolhendo Depurar &gt; Depurar Projeto.
+O depurador é iniciado e a aplicação é executada. A barra de ferramentas do depurador é exibida.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger_toolbar.png" alt="debugger toolbar">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -302,17 +334,25 @@ A sessão de depuração é mostrada nessa janela.</p>
 </ol>
 </div>
 <div class="paragraph">
-<p>A aplicação é interrompida no ponto final da função Customer::GetDiscount definida anteriormente e o arquivo customer.cc é aberto no editor, na linha em que a função é chamada. A janela Pontos de Interrupção lista os dois pontos de interrupção que você definiu anteriormente. A seta do contador de programas verde será exibida na parte superior do ícone do ponto de interrupção da função.
-image::images/function_breakpoint3.png[]</p>
+<p>A aplicação é interrompida no ponto final da função Customer::GetDiscount definida anteriormente e o arquivo customer.cc é aberto no editor, na linha em que a função é chamada. A janela Pontos de Interrupção lista os dois pontos de interrupção que você definiu anteriormente. A seta do contador de programas verde será exibida na parte superior do ícone do ponto de interrupção da função.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint3.png" alt="function breakpoint3">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Clique na guia da janela Pilha de Chamadas ou selecione Janela &gt; Depurando &gt; Pilha de Chamadas. A pilha de chamadas mostra três quadros.
-image::images/call_stack.png[]</p>
+<p>Clique na guia da janela Pilha de Chamadas ou selecione Janela &gt; Depurando &gt; Pilha de Chamadas. A pilha de chamadas mostra três quadros.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_stack.png" alt="call stack">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -323,11 +363,15 @@ image::images/call_stack.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Clique no ícones Expandir para expandir a estrutura.
-image::images/local_variables1.png[]</p>
+<p>Clique no ícones Expandir para expandir a estrutura.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables1.png" alt="local variables1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -354,11 +398,15 @@ A função  <code>GetDiscount</code>  é executada, imprimindo o desconto do cli
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
-<p>Clique na guia Variáveis e observe a longa lista de variáveis.
-image::images/local_variables2.png[]</p>
+<p>Clique na guia Variáveis e observe a longa lista de variáveis.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables2.png" alt="local variables2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -370,20 +418,28 @@ image::images/local_variables2.png[]</p>
 <ol class="arabic" start="10">
 <li>
 <p>Escolha Janela &gt; Depuração &gt; Registros.
-A janela Registros se abre, exibindo o conteúdo atual dos registros.
-image::images/registers.png[]</p>
+A janela Registros se abre, exibindo o conteúdo atual dos registros.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/registers.png" alt="registers">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
 <p>Escolha Janela &gt; Depuração &gt; Desmontar.
-A janela Desmontar é aberta, exibindo as instruções de montagem do arquivo de código-fonte atual.
-image::images/disassembly.png[]</p>
+A janela Desmontar é aberta, exibindo as instruções de montagem do arquivo de código-fonte atual.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/disassembly.png" alt="disassembly">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="12">
 <li>
diff --git a/content/kb/docs/cnd/debugging_ru.html b/content/kb/docs/cnd/debugging_ru.html
index b64d9fc..adfc908 100644
--- a/content/kb/docs/cnd/debugging_ru.html
+++ b/content/kb/docs/cnd/debugging_ru.html
@@ -188,11 +188,15 @@
 <p>В проекте  <code>Quote_1</code>  откройте файл  <code>quote.cc</code> .</p>
 </li>
 <li>
-<p>Установите точку останова на строке, щелкнув левое поле окна редактора исходного кода рядом со строкой 171 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ). Строка будет выделена красным цветом, что обозначает установку точки останова.
-image::images/line_breakpoint1.png[]</p>
+<p>Установите точку останова на строке, щелкнув левое поле окна редактора исходного кода рядом со строкой 171 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ). Строка будет выделена красным цветом, что обозначает установку точки останова.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint1.png" alt="line breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -203,19 +207,27 @@ image::images/line_breakpoint1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Выберите "Окно" &gt; "Отладка" &gt; "Точки останова", чтобы открыть окно точек останова. Линейная точка останова находится в списке под узлом C/C++.
-image::images/line_breakpoint2.png[]</p>
+<p>Выберите "Окно" &gt; "Отладка" &gt; "Точки останова", чтобы открыть окно точек останова. Линейная точка останова находится в списке под узлом C/C++.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2.png" alt="line breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Разверните узел C/C++, чтобы стала видна точка останова.
-image::images/line_breakpoint2_expand.png[]</p>
+<p>Разверните узел C/C++, чтобы стала видна точка останова.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2_expand.png" alt="line breakpoint2 expand">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Создание_точки_останова_на_функции">Создание точки останова на функции</h3>
@@ -231,35 +243,51 @@ image::images/line_breakpoint2_expand.png[]</p>
 <p>В списке 'Тип точки останова' выберите 'Функция'.</p>
 </li>
 <li>
-<p>Введите имя функции  <code>Customer::GetDiscount</code>  в текстовом поле "Имя функции". Нажмите кнопку "ОК".
-image::images/function_breakpoint1.png[]</p>
+<p>Введите имя функции  <code>Customer::GetDiscount</code>  в текстовом поле "Имя функции". Нажмите кнопку "ОК".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint1.png" alt="function breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Точка останова на функции установлена и добавлена в список в окне "Точки останова".
-image::images/function_breakpoint2.png[]</p>
+<p>Точка останова на функции установлена и добавлена в список в окне "Точки останова".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint2.png" alt="function breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Нажмите кнопку 'Выбрать группы точек останова' в левой части окна, чтобы объединить точки останова в различные группы и выбрать тип.
-image::images/group_breakpoint_type.png[]</p>
+<p>Нажмите кнопку 'Выбрать группы точек останова' в левой части окна, чтобы объединить точки останова в различные группы и выбрать тип.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/group_breakpoint_type.png" alt="group breakpoint type">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Разверните группы 'Файл:Строка' и 'Функция', чтобы стали видны точки останова.
-image::images/breakpoint_types.png[]</p>
+<p>Разверните группы 'Файл:Строка' и 'Функция', чтобы стали видны точки останова.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/breakpoint_types.png" alt="breakpoint types">
+</div>
+</div>
 </div>
 </div>
 </div>
@@ -272,12 +300,16 @@ image::images/breakpoint_types.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Начните сеанс отладки для проекта  <code>Quote_1</code> . Для этого нажмите кнопку 'Отладить проект' image::images/debugbutton.png[] или выберите Отладка &gt; Отладить проект.
-Запускается отладчик и приложение выполняется. Отображается панель инструментов отладчика.
-image::images/debugger_toolbar.png[]</p>
+<p>Начните сеанс отладки для проекта  <code>Quote_1</code> . Для этого нажмите кнопку 'Отладить проект' <span class="image"><img src="images/debugbutton.png" alt="debugbutton"></span> или выберите Отладка &gt; Отладить проект.
+Запускается отладчик и приложение выполняется. Отображается панель инструментов отладчика.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger_toolbar.png" alt="debugger toolbar">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -302,17 +334,25 @@ image::images/debugger_toolbar.png[]</p>
 </ol>
 </div>
 <div class="paragraph">
-<p>Приложение останавливается на ранее заданной точке останова функции Customer::GetDiscount, и в редакторе открывается файл customer.cc с фокусом в строке, где вызывается данная функция. В окне 'Точки останова' отобразятся две точки останова, установленные ранее. Зеленая стрелка счетчика программы отображается поверх значка точки останова функции.
-image::images/function_breakpoint3.png[]</p>
+<p>Приложение останавливается на ранее заданной точке останова функции Customer::GetDiscount, и в редакторе открывается файл customer.cc с фокусом в строке, где вызывается данная функция. В окне 'Точки останова' отобразятся две точки останова, установленные ранее. Зеленая стрелка счетчика программы отображается поверх значка точки останова функции.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint3.png" alt="function breakpoint3">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Нажмите на вкладку, чтобы открыть окно 'Стек вызовов' или выберите Окно &gt; Отладка &gt; Стек вызовов. В стеке вызовов отображаются три окна.
-image::images/call_stack.png[]</p>
+<p>Нажмите на вкладку, чтобы открыть окно 'Стек вызовов' или выберите Окно &gt; Отладка &gt; Стек вызовов. В стеке вызовов отображаются три окна.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_stack.png" alt="call stack">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -323,11 +363,15 @@ image::images/call_stack.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Щелкните значок 'Развернуть', чтобы развернуть структуру.
-image::images/local_variables1.png[]</p>
+<p>Щелкните значок 'Развернуть', чтобы развернуть структуру.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables1.png" alt="local variables1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -354,11 +398,15 @@ image::images/local_variables1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
-<p>Перейдите на вкладку "Переменные", в которой отобразится длинный список переменных.
-image::images/local_variables2.png[]</p>
+<p>Перейдите на вкладку "Переменные", в которой отобразится длинный список переменных.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables2.png" alt="local variables2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -370,20 +418,28 @@ image::images/local_variables2.png[]</p>
 <ol class="arabic" start="10">
 <li>
 <p>Выберите "Окно" &gt; "Отладка" &gt; "Регистры".
-Откроется окно "Регистры", отображающее текущее содержимое регистров.
-image::images/registers.png[]</p>
+Откроется окно "Регистры", отображающее текущее содержимое регистров.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/registers.png" alt="registers">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
 <p>Выберите "Окно" &gt; "Отладка" &gt; "Дисассемблер".
-Откроется окно "Дисассемблер", отображающее команды ассемблера для текущего файла исходного кода.
-image::images/disassembly.png[]</p>
+Откроется окно "Дисассемблер", отображающее команды ассемблера для текущего файла исходного кода.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/disassembly.png" alt="disassembly">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="12">
 <li>
diff --git a/content/kb/docs/cnd/debugging_zh_CN.html b/content/kb/docs/cnd/debugging_zh_CN.html
index e5b7da9..eaf6a69 100644
--- a/content/kb/docs/cnd/debugging_zh_CN.html
+++ b/content/kb/docs/cnd/debugging_zh_CN.html
@@ -188,11 +188,15 @@
 <p>在  <code>Quote_1</code>  项目中,打开  <code>quote.cc</code>  文件。</p>
 </li>
 <li>
-<p>在源代码编辑器窗口靠近 171 行 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ) 的左旁注中单击,设置一个行断点。该行将以红色突出显示,表明断点已设置。
-image::images/line_breakpoint1.png[]</p>
+<p>在源代码编辑器窗口靠近 171 行 ( <code>response = readChar("Enter disk module type: (S for single disks, R for RAID; Q - exit)", 'S');</code> ) 的左旁注中单击,设置一个行断点。该行将以红色突出显示,表明断点已设置。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint1.png" alt="line breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -203,19 +207,27 @@ image::images/line_breakpoint1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Breakpoints"(断点)打开 "Breakpoints"(断点)窗口。在 C/C++ 节点下列出您的行断点。
-image::images/line_breakpoint2.png[]</p>
+<p>选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Breakpoints"(断点)打开 "Breakpoints"(断点)窗口。在 C/C++ 节点下列出您的行断点。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2.png" alt="line breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>展开 C/C++ 节点可查看您的断点。
-image::images/line_breakpoint2_expand.png[]</p>
+<p>展开 C/C++ 节点可查看您的断点。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/line_breakpoint2_expand.png" alt="line breakpoint2 expand">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_创建函数断点">创建函数断点</h3>
@@ -231,35 +243,51 @@ image::images/line_breakpoint2_expand.png[]</p>
 <p>在 "Breakpoint Type"(断点类型)列表中,选择 "Function"(函数)。</p>
 </li>
 <li>
-<p>在 "Function Name"(函数名)文本字段中键入函数名  <code>Customer::GetDiscount</code> 。单击 "OK"(确定)。
-image::images/function_breakpoint1.png[]</p>
+<p>在 "Function Name"(函数名)文本字段中键入函数名  <code>Customer::GetDiscount</code> 。单击 "OK"(确定)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint1.png" alt="function breakpoint1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>函数断点已设置,并且已添加到 "Breakpoints"(断点)窗口列表中。
-image::images/function_breakpoint2.png[]</p>
+<p>函数断点已设置,并且已添加到 "Breakpoints"(断点)窗口列表中。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint2.png" alt="function breakpoint2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>单击左旁注中的 "Select Breakpoint Groups"(选择断点组)按钮以将断点组织到不同的组,然后选择 "Type"(类型)。
-image::images/group_breakpoint_type.png[]</p>
+<p>单击左旁注中的 "Select Breakpoint Groups"(选择断点组)按钮以将断点组织到不同的组,然后选择 "Type"(类型)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/group_breakpoint_type.png" alt="group breakpoint type">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>展开 "File:Line"(文件:行)和 "Function"(函数)组以显示您的断点。
-image::images/breakpoint_types.png[]</p>
+<p>展开 "File:Line"(文件:行)和 "Function"(函数)组以显示您的断点。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/breakpoint_types.png" alt="breakpoint types">
+</div>
+</div>
 </div>
 </div>
 </div>
@@ -272,12 +300,16 @@ image::images/breakpoint_types.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>通过单击 "Debug Project"(调试项目)按钮 image::images/debugbutton.png[] 或通过选择 "Debug"(调试)&gt; "Debug Project"(调试项目),为  <code>Quote_1</code>  项目启动调试会话。
-此时将启动调节器,并运行应用程序。显示调试工具栏。
-image::images/debugger_toolbar.png[]</p>
+<p>通过单击 "Debug Project"(调试项目)按钮 <span class="image"><img src="images/debugbutton.png" alt="debugbutton"></span> 或通过选择 "Debug"(调试)&gt; "Debug Project"(调试项目),为  <code>Quote_1</code>  项目启动调试会话。
+此时将启动调节器,并运行应用程序。显示调试工具栏。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/debugger_toolbar.png" alt="debugger toolbar">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
@@ -302,17 +334,25 @@ image::images/debugger_toolbar.png[]</p>
 </ol>
 </div>
 <div class="paragraph">
-<p>该应用程序将在您先前设置的 Customer::GetDiscount 函数断点处停止,并且 customer.cc 文件将在编辑器中调用该函数的行中打开。此时 "Breakpoints"(断点)窗口会列出先前设置的两个断点。函数断点的断点图标顶端会出现绿色程序计数器箭头。
-image::images/function_breakpoint3.png[]</p>
+<p>该应用程序将在您先前设置的 Customer::GetDiscount 函数断点处停止,并且 customer.cc 文件将在编辑器中调用该函数的行中打开。此时 "Breakpoints"(断点)窗口会列出先前设置的两个断点。函数断点的断点图标顶端会出现绿色程序计数器箭头。</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/function_breakpoint3.png" alt="function breakpoint3">
+</div>
 </div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>单击 "Call Stack"(调用堆栈)窗口的标签,或者选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Call Stack"(调用堆栈)。此时调用堆栈将显示三个框架。
-image::images/call_stack.png[]</p>
+<p>单击 "Call Stack"(调用堆栈)窗口的标签,或者选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Call Stack"(调用堆栈)。此时调用堆栈将显示三个框架。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_stack.png" alt="call stack">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -323,11 +363,15 @@ image::images/call_stack.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>单击展开图标以展开此结构。
-image::images/local_variables1.png[]</p>
+<p>单击展开图标以展开此结构。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables1.png" alt="local variables1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -354,11 +398,15 @@ image::images/local_variables1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
-<p>单击 "Variables"(变量)标签,注意会显示局部变量的详细列表。
-image::images/local_variables2.png[]</p>
+<p>单击 "Variables"(变量)标签,注意会显示局部变量的详细列表。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/local_variables2.png" alt="local variables2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -370,20 +418,28 @@ image::images/local_variables2.png[]</p>
 <ol class="arabic" start="10">
 <li>
 <p>选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Registers"(注册)。
-此时将打开 "Registers"(注册)窗口,其中显示注册的当前内容。
-image::images/registers.png[]</p>
+此时将打开 "Registers"(注册)窗口,其中显示注册的当前内容。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/registers.png" alt="registers">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
 <p>选择 "Window"(窗口)&gt; "Debugging"(调试)&gt; "Disassembly"(反汇编)。
-此时将打开 "Disassembly"(反汇编)窗口,其中显示当前源文件的汇编指令。
-image::images/disassembly.png[]</p>
+此时将打开 "Disassembly"(反汇编)窗口,其中显示当前源文件的汇编指令。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/disassembly.png" alt="disassembly">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="12">
 <li>
diff --git a/content/kb/docs/cnd/navigating-editing.html b/content/kb/docs/cnd/navigating-editing.html
index d01d0a8..2b731dc 100644
--- a/content/kb/docs/cnd/navigating-editing.html
+++ b/content/kb/docs/cnd/navigating-editing.html
@@ -220,11 +220,15 @@ for information about downloading and installing the required software.</p>
 <p>Select the C language from the Language drop-down list because the Quote project uses C.</p>
 </li>
 <li>
-<p>Select the style you want to set from the Style drop-down list.
-image::images/formatting_style.png[]</p>
+<p>Select the style you want to set from the Style drop-down list.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/formatting_style.png" alt="formatting style">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -247,11 +251,15 @@ image::images/formatting_style.png[]</p>
 <p>Click the collapse icon (small box with minus sign) in the left margin to fold the code of one of the methods.</p>
 </li>
 <li>
-<p>Mouse over the  <code>{&#8230;&#8203;}</code>  symbol to the right of the folded block to display the code in the block.
-image::images/code_folding.png[]</p>
+<p>Mouse over the  <code>{&#8230;&#8203;}</code>  symbol to the right of the folded block to display the code in the block.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_folding.png" alt="code folding">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_using_semantic_highlighting">Using Semantic Highlighting</h3>
@@ -282,11 +290,15 @@ image::images/code_folding.png[]</p>
 <p>Click on an occurrence of the  <code>Customer</code>  class.</p>
 </li>
 <li>
-<p>All of the occurrences of the  <code>Customer</code>  class in the file are highlighted with a yellow background. The right margin also shows markings that indicate points where an occurrence is located in the file. The markings let you see how many occurrences there are without scrolling through the file. You can click the markings to jump to the occurrences that they represent.
-image::images/highlighting1.png[]</p>
+<p>All of the occurrences of the  <code>Customer</code>  class in the file are highlighted with a yellow background. The right margin also shows markings that indicate points where an occurrence is located in the file. The markings let you see how many occurrences there are without scrolling through the file. You can click the markings to jump to the occurrences that they represent.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting1.png" alt="highlighting1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -297,11 +309,15 @@ image::images/highlighting1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="10">
 <li>
-<p>Open the  <code>customer.h</code>  file, located in the Headers folder, and notice that class names are again highlighted in bold.
-image::images/highlighting2.png[]</p>
+<p>Open the  <code>customer.h</code>  file, located in the Headers folder, and notice that class names are again highlighted in bold.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting2.png" alt="highlighting2">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_using_code_completion_and_documentation">Using Code Completion and Documentation</h3>
@@ -320,19 +336,27 @@ image::images/highlighting2.png[]</p>
 <p>On the first blank line of the  <code>quote.cc</code> , type a capital C and press Ctrl-Space. The code completion box displays a short list that includes the  <code>Cpu</code>  and  <code>Customer</code>  classes. A documentation window also opens but displays "No documentation found" because the project source does not include documentation for its code.</p>
 </li>
 <li>
-<p>Expand the list of items by pressing Ctrl-Space again.
-image::images/code_completion1.png[]</p>
+<p>Expand the list of items by pressing Ctrl-Space again.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion1.png" alt="code completion1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Use your arrow keys or mouse to highlight a standard library function such as  <code>calloc</code>  from the list, and the documentation window displays the man page for that function if the man page is accessible to the IDE.
-image::images/code-completion-documentation.png[]</p>
+<p>Use your arrow keys or mouse to highlight a standard library function such as  <code>calloc</code>  from the list, and the documentation window displays the man page for that function if the man page is accessible to the IDE.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion-documentation.png" alt="code completion documentation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
@@ -343,19 +367,27 @@ image::images/code-completion-documentation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Complete the new instance of the  <code>Customer</code>  class by typing "  <code>andrew;</code> ". On the next line, type the letter  <code>a</code>  and press Ctrl-Space twice. The code completion box displays a list of choices starting with the letter  <code>a</code> , such as method arguments, class fields, and global names, that are accessible from the current context.
-image::images/code_completion2.png[]</p>
+<p>Complete the new instance of the  <code>Customer</code>  class by typing "  <code>andrew;</code> ". On the next line, type the letter  <code>a</code>  and press Ctrl-Space twice. The code completion box displays a list of choices starting with the letter  <code>a</code> , such as method arguments, class fields, and global names, that are accessible from the current context.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion2.png" alt="code completion2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Double-click the  <code>andrew</code>  option to accept it and type a period after it. Press Ctrl-Space and you are provided with a list of the public methods and fields of the  <code>Customer</code>  class.
-image::images/code_completion3.png[]</p>
+<p>Double-click the  <code>andrew</code>  option to accept it and type a period after it. Press Ctrl-Space and you are provided with a list of the public methods and fields of the  <code>Customer</code>  class.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion3.png" alt="code completion3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -380,19 +412,27 @@ image::images/code_completion3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Type a slash and two asterisks and press Enter. The editor inserts a Doxygen-formatted comment for the  <code>readNumberOf</code>  class.
-image::images/doxygen_comment.png[]</p>
+<p>Type a slash and two asterisks and press Enter. The editor inserts a Doxygen-formatted comment for the  <code>readNumberOf</code>  class.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment.png" alt="doxygen comment">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Add some descriptive text to each of the @param lines and save the file.
-image::images/doxygen_comment_edited.png[]</p>
+<p>Add some descriptive text to each of the @param lines and save the file.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment_edited.png" alt="doxygen comment edited">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -403,11 +443,15 @@ image::images/doxygen_comment_edited.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Click the  <code>readNumberOf</code>  class in the line you jumped to, and press Ctrl-Shift-Space to show the documentation that you just added for the parameters.
-image::images/doxygen_displayed.png[]</p>
+<p>Click the  <code>readNumberOf</code>  class in the line you jumped to, and press Ctrl-Shift-Space to show the documentation that you just added for the parameters.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_displayed.png" alt="doxygen displayed">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -456,11 +500,15 @@ image::images/doxygen_displayed.png[]</p>
 <p>In the Options dialog box, select Editor, and click the Code Templates tab.</p>
 </li>
 <li>
-<p>Select the appropriate language from the Language drop-down list.
-image::images/code_templates.png[]</p>
+<p>Select the appropriate language from the Language drop-down list.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_templates.png" alt="code templates">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_using_pair_completion">Using Pair Completion</h3>
@@ -518,11 +566,15 @@ image::images/code_templates.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>In the Find In Projects dialog box, select the Default Search tab or the Grep tab. The Grep tab uses the  <code>grep</code>  utility, which provides a faster search, especially for remote projects.
-image::images/find_in_projects.png[]</p>
+<p>In the Find In Projects dialog box, select the Default Search tab or the Grep tab. The Grep tab uses the  <code>grep</code>  utility, which provides a faster search, especially for remote projects.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/find_in_projects.png" alt="find in projects">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -583,11 +635,15 @@ The Search Results tab lists the files in which the text or regular expression i
 <p>Expand the  <code>Quote_1</code>  node in the Classes window. All classes in the project are listed.</p>
 </li>
 <li>
-<p>Expand the  <code>Customer</code>  class.
-image::images/classes_window.png[]</p>
+<p>Expand the  <code>Customer</code>  class.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/classes_window.png" alt="classes window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +663,15 @@ image::images/classes_window.png[]</p>
 <p>Click anywhere in the  <code>quote.cc</code>  file in the Editor window.</p>
 </li>
 <li>
-<p>A compact view of the file is displayed in the Navigator window.
-image::images/navigator_window.png[]</p>
+<p>A compact view of the file is displayed in the Navigator window.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/navigator_window.png" alt="navigator window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -644,11 +704,15 @@ image::images/navigator_window.png[]</p>
 <p>In the Find Usages dialog box, click Find.</p>
 </li>
 <li>
-<p>The Usages window opens and displays all of the usages of the  <code>Customer</code>  class in the source files of the project.
-image::images/usages_window.png[]</p>
+<p>The Usages window opens and displays all of the usages of the  <code>Customer</code>  class in the source files of the project.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/usages_window.png" alt="usages window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -668,11 +732,15 @@ image::images/usages_window.png[]</p>
 <p>In the  <code>quote.cc</code>  file, right-click on the  <code>main</code>  function and choose Show Call Graph.</p>
 </li>
 <li>
-<p>The Call Graph window opens and displays a tree and graphical view of all functions called from the  <code>main</code>  function.
-image::images/call_graph1.png[]</p>
+<p>The Call Graph window opens and displays a tree and graphical view of all functions called from the  <code>main</code>  function.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph1.png" alt="call graph1">
+</div>
+</div>
 <div class="paragraph">
 <p>If you do not see all the functions as shown here, click the third button on the left side of the Call Graph window to show "who is called from this function."</p>
 </div>
@@ -686,19 +754,27 @@ image::images/call_graph1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Click the second button, called Bring Into Focus, on the left side of the window to focus on the  <code>endl</code>  function, then click the fourth button Who Calls this Function to view all the functions that call the  <code>endl</code>  function.
-image::images/call_graph2.png[]</p>
+<p>Click the second button, called Bring Into Focus, on the left side of the window to focus on the  <code>endl</code>  function, then click the fourth button Who Calls this Function to view all the functions that call the  <code>endl</code>  function.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph2.png" alt="call graph2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Expand some of the nodes in the tree to see more functions.
-image::images/call_graph3.png[]</p>
+<p>Expand some of the nodes in the tree to see more functions.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph3.png" alt="call graph3">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_using_hyperlinks">Using Hyperlinks</h3>
@@ -708,27 +784,39 @@ image::images/call_graph3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>In the  <code>cpu.cc</code>  file of the  <code>Quote_1</code>  project, mouse over line 37 while pressing Ctrl. The  <code>ComputeSupportMetric</code> function is highlighted and an annotation displays information about the function.
-image::images/hyperlinks1.png[]</p>
+<p>In the  <code>cpu.cc</code>  file of the  <code>Quote_1</code>  project, mouse over line 37 while pressing Ctrl. The  <code>ComputeSupportMetric</code> function is highlighted and an annotation displays information about the function.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks1.png" alt="hyperlinks1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Click the hyperlink and the editor jumps to the definition of the function.
-image::images/hyperlinks2.png[]</p>
+<p>Click the hyperlink and the editor jumps to the definition of the function.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks2.png" alt="hyperlinks2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Mouse over the definition while pressing Ctrl, and click the hyperlink. The editor jumps to the declaration of the function in the  <code>cpu.h</code>  header file.
-image::images/hyperlinks3.png[]</p>
+<p>Mouse over the definition while pressing Ctrl, and click the hyperlink. The editor jumps to the declaration of the function in the  <code>cpu.h</code>  header file.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks3.png" alt="hyperlinks3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -739,11 +827,15 @@ image::images/hyperlinks3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Hover the mouse cursor over the green circle in the left margin and see the annotation that indicates that this method overrides another method.
-image::images/overide_annotation.png[]</p>
+<p>Hover the mouse cursor over the green circle in the left margin and see the annotation that indicates that this method overrides another method.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overide_annotation.png" alt="overide annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -754,11 +846,15 @@ image::images/overide_annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Click the gray circle and the editor displays a list of methods that override this method.
-image::images/overridden_by_list.png[]</p>
+<p>Click the gray circle and the editor displays a list of methods that override this method.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overridden_by_list.png" alt="overridden by list">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -781,11 +877,15 @@ image::images/overridden_by_list.png[]</p>
 <p>Right-click on the  <code>#include "module.h"</code>  line in the file and choose Navigate &gt; View Includes Hierarchy.</p>
 </li>
 <li>
-<p>By default, the Hierarchy window displays a plain list of files that directly include the header file. Click the right-most button at the bottom of the window to change the display to a tree view. Click the second button from the right to change the display to all files that include or are included. Expand the nodes in the tree view to see all of the source files that include the header file.
-image::images/includes_hierarchy.png[]</p>
+<p>By default, the Hierarchy window displays a plain list of files that directly include the header file. Click the right-most button at the bottom of the window to change the display to a tree view. Click the second button from the right to change the display to all files that include or are included. Expand the nodes in the tree view to see all of the source files that include the header file.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/includes_hierarchy.png" alt="includes hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_using_the_type_hierarchy">Using the Type Hierarchy</h3>
@@ -801,11 +901,15 @@ image::images/includes_hierarchy.png[]</p>
 <p>Right-click on the declaration of the  <code>Module</code>  class and choose Navigate &gt; View Type Hierarchy.</p>
 </li>
 <li>
-<p>The Hierarchy window displays all of the subtypes of the Module class.
-image::images/type_hierarchy.png[]</p>
+<p>The Hierarchy window displays all of the subtypes of the Module class.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/type_hierarchy.png" alt="type hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_next_steps">[[Next Steps]]</h3>
diff --git a/content/kb/docs/cnd/navigating-editing_ja.html b/content/kb/docs/cnd/navigating-editing_ja.html
index 82cfd03..c2032b5 100644
--- a/content/kb/docs/cnd/navigating-editing_ja.html
+++ b/content/kb/docs/cnd/navigating-editing_ja.html
@@ -219,11 +219,15 @@
 <p>QuoteプロジェクトはCを使用するため、「言語」ドロップダウン・リストから「C」を選択します。</p>
 </li>
 <li>
-<p>設定するスタイルを「スタイル」ドロップダウン・リストから選択します。
-image::images/formatting_style.png[]</p>
+<p>設定するスタイルを「スタイル」ドロップダウン・リストから選択します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/formatting_style.png" alt="formatting style">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -246,11 +250,15 @@ image::images/formatting_style.png[]</p>
 <p>左マージンにある縮小アイコン(マイナス記号の付いた小さなボックス)をクリックし、いずれかのメソッドのコードを折りたたみます。</p>
 </li>
 <li>
-<p>折りたたまれたブロックの右側にある <code>{&#8230;&#8203;}</code> 記号にマウスを置いて、そのブロック内のコードを表示します。
-image::images/code_folding.png[]</p>
+<p>折りたたまれたブロックの右側にある <code>{&#8230;&#8203;}</code> 記号にマウスを置いて、そのブロック内のコードを表示します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_folding.png" alt="code folding">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_意味解釈の強調表示の使用">意味解釈の強調表示の使用</h3>
@@ -281,11 +289,15 @@ image::images/code_folding.png[]</p>
 <p><code>Customer</code> クラスの出現箇所をクリックします。</p>
 </li>
 <li>
-<p>ファイル内にある <code>Customer</code> クラスのすべての出現箇所が、黄色の背景で強調表示されます。右マージンにも、ファイル内の出現箇所を示すマークが表示されます。このマークにより、ファイルをスクロールしなくても、出現箇所がどのくらいあるかを確認できます。マークをクリックすると、それが示す出現箇所へジャンプできます。
-image::images/highlighting1.png[]</p>
+<p>ファイル内にある <code>Customer</code> クラスのすべての出現箇所が、黄色の背景で強調表示されます。右マージンにも、ファイル内の出現箇所を示すマークが表示されます。このマークにより、ファイルをスクロールしなくても、出現箇所がどのくらいあるかを確認できます。マークをクリックすると、それが示す出現箇所へジャンプできます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting1.png" alt="highlighting1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -296,11 +308,15 @@ image::images/highlighting1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="10">
 <li>
-<p>ヘッダー・フォルダにある <code>customer.h</code> ファイルを開くと、ここでもクラス名が太字で強調表示されているのが確認できます。
-image::images/highlighting2.png[]</p>
+<p>ヘッダー・フォルダにある <code>customer.h</code> ファイルを開くと、ここでもクラス名が太字で強調表示されているのが確認できます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting2.png" alt="highlighting2">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_コード補完およびドキュメントの使用">コード補完およびドキュメントの使用</h3>
@@ -319,19 +335,27 @@ image::images/highlighting2.png[]</p>
 <p><code>quote.cc</code> の最初の空白行で、大文字のCを入力して[Ctrl]-[Space]を押します。コード補完ボックスに、 <code>Cpu</code> および <code>Customer</code> クラスを含む候補一覧が表示されます。ドキュメント・ウィンドウも開きますが、そのコードのドキュメントがプロジェクト・ソースに含まれていないため、ドキュメントが見つからないというメッセージが表示されます。</p>
 </li>
 <li>
-<p>再度[Ctrl]-[Space]を押して、項目の一覧を展開します。
-image::images/code_completion1.png[]</p>
+<p>再度[Ctrl]-[Space]を押して、項目の一覧を展開します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion1.png" alt="code completion1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>矢印キーまたはマウスを使用してリストから <code>calloc</code> などの標準ライブラリ関数を強調表示すると、IDEがマニュアル・ページにアクセスできる場合は、ドキュメント・ウィンドウにその関数のマニュアル・ページが表示されます。
-image::images/code-completion-documentation.png[]</p>
+<p>矢印キーまたはマウスを使用してリストから <code>calloc</code> などの標準ライブラリ関数を強調表示すると、IDEがマニュアル・ページにアクセスできる場合は、ドキュメント・ウィンドウにその関数のマニュアル・ページが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion-documentation.png" alt="code completion documentation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
@@ -342,19 +366,27 @@ image::images/code-completion-documentation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>「 <code>andrew;</code> 」を入力して、 <code>Customer</code> クラスの新しいインスタンスを完了させます。次の行で、文字「 <code>a</code> 」を入力し、[Ctrl]-[Space]を2回押します。コード補完ボックスに、文字「 <code>a</code> 」から始まる、現在のコンテキストからアクセス可能なメソッド引数、クラス・フィールド、グローバル名などの選択肢が一覧表示されます。
-image::images/code_completion2.png[]</p>
+<p>「 <code>andrew;</code> 」を入力して、 <code>Customer</code> クラスの新しいインスタンスを完了させます。次の行で、文字「 <code>a</code> 」を入力し、[Ctrl]-[Space]を2回押します。コード補完ボックスに、文字「 <code>a</code> 」から始まる、現在のコンテキストからアクセス可能なメソッド引数、クラス・フィールド、グローバル名などの選択肢が一覧表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion2.png" alt="code completion2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p><code>andrew</code> オプションをダブルクリックして受け入れ、その後にピリオド1つを入力します。[Ctrl]-[Space]を押すと、 <code>Customer</code> クラスのpublicメソッドおよびフィールドの一覧が自動的に表示されます。
-image::images/code_completion3.png[]</p>
+<p><code>andrew</code> オプションをダブルクリックして受け入れ、その後にピリオド1つを入力します。[Ctrl]-[Space]を押すと、 <code>Customer</code> クラスのpublicメソッドおよびフィールドの一覧が自動的に表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion3.png" alt="code completion3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -379,19 +411,27 @@ image::images/code_completion3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>スラッシュおよび2つのアスタリスクを入力して、[Enter]を押します。エディタによって、 <code>readNumberOf</code> クラスにDoxygen形式のコメントが挿入されます。
-image::images/doxygen_comment.png[]</p>
+<p>スラッシュおよび2つのアスタリスクを入力して、[Enter]を押します。エディタによって、 <code>readNumberOf</code> クラスにDoxygen形式のコメントが挿入されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment.png" alt="doxygen comment">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>それぞれの@paramの行に説明文を追加して、ファイルを保存します。
-image::images/doxygen_comment_edited.png[]</p>
+<p>それぞれの@paramの行に説明文を追加して、ファイルを保存します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment_edited.png" alt="doxygen comment edited">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -402,11 +442,15 @@ image::images/doxygen_comment_edited.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>ジャンプした行で <code>readNumberOf</code> クラスをクリックして[Ctrl]-[Shift]-[Space]を押すと、追加したパラメータのドキュメントが表示されます。
-image::images/doxygen_displayed.png[]</p>
+<p>ジャンプした行で <code>readNumberOf</code> クラスをクリックして[Ctrl]-[Shift]-[Space]を押すと、追加したパラメータのドキュメントが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_displayed.png" alt="doxygen displayed">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -455,11 +499,15 @@ image::images/doxygen_displayed.png[]</p>
 <p>「オプション」ダイアログ・ボックスで、「エディタ」を選択して「コード・テンプレート」タブをクリックします。</p>
 </li>
 <li>
-<p>「言語」ドロップダウン・リストから適切な言語を選択します。
-image::images/code_templates.png[]</p>
+<p>「言語」ドロップダウン・リストから適切な言語を選択します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_templates.png" alt="code templates">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_ペア補完機能の使用方法">ペア補完機能の使用方法</h3>
@@ -517,11 +565,15 @@ image::images/code_templates.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>「プロジェクト内を検索」ダイアログ・ボックスで、「デフォルト検索」タブまたは「Grep」タブを選択します。「Grep」タブでは、特にリモート・プロジェクトに対して高速検索を提供する <code>grep</code> ユーティリティが使用されます。
-image::images/find_in_projects.png[]</p>
+<p>「プロジェクト内を検索」ダイアログ・ボックスで、「デフォルト検索」タブまたは「Grep」タブを選択します。「Grep」タブでは、特にリモート・プロジェクトに対して高速検索を提供する <code>grep</code> ユーティリティが使用されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/find_in_projects.png" alt="find in projects">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -582,11 +634,15 @@ image::images/find_in_projects.png[]</p>
 <p>「クラス」ウィンドウで「 <code>Quote_1</code> 」ノードを展開します。プロジェクト内のすべてのクラスが一覧表示されます。</p>
 </li>
 <li>
-<p><code>Customer</code> クラスを展開します。
-image::images/classes_window.png[]</p>
+<p><code>Customer</code> クラスを展開します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/classes_window.png" alt="classes window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -606,11 +662,15 @@ image::images/classes_window.png[]</p>
 <p>「エディタ」ウィンドウで <code>quote.cc</code> ファイルの任意の場所をクリックします。</p>
 </li>
 <li>
-<p>ファイルが縮小表示され、「ナビゲータ」ウィンドウに表示されます。
-image::images/navigator_window.png[]</p>
+<p>ファイルが縮小表示され、「ナビゲータ」ウィンドウに表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/navigator_window.png" alt="navigator window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -640,11 +700,15 @@ image::images/navigator_window.png[]</p>
 <p>「使用状況を検索」ダイアログ・ボックスで、「検索」をクリックします。</p>
 </li>
 <li>
-<p>「使用状況」ウィンドウが開き、プロジェクトのソース・ファイル内での <code>Customer</code> クラスの使用状況がすべて表示されます。
-image::images/usages_window.png[]</p>
+<p>「使用状況」ウィンドウが開き、プロジェクトのソース・ファイル内での <code>Customer</code> クラスの使用状況がすべて表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/usages_window.png" alt="usages window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -664,11 +728,15 @@ image::images/usages_window.png[]</p>
 <p><code>quote.cc</code> ファイルで <code>main</code> 関数を右クリックし、「コール・グラフを表示」を選択します。</p>
 </li>
 <li>
-<p>「コール・グラフ」ウィンドウが開き、 <code>main</code> 関数からコールされるすべての関数のツリーおよびグラフィカル・ビューが表示されます。
-image::images/call_graph1.png[]</p>
+<p>「コール・グラフ」ウィンドウが開き、 <code>main</code> 関数からコールされるすべての関数のツリーおよびグラフィカル・ビューが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph1.png" alt="call graph1">
+</div>
+</div>
 <div class="paragraph">
 <p>ここに示すようにすべての関数が表示されない場合は、「コール・グラフ」ウィンドウの左側の3つ目のボタンをクリックして、「この関数のコール先」を表示します。</p>
 </div>
@@ -682,19 +750,27 @@ image::images/call_graph1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>ウィンドウの左側の2つ目のボタン、「フォーカス」をクリックして <code>endl</code> 関数にフォーカスを置いてから、4つ目のボタンの「関数の呼出し元」をクリックして <code>endl</code> 関数をコールするすべての関数を表示します。
-image::images/call_graph2.png[]</p>
+<p>ウィンドウの左側の2つ目のボタン、「フォーカス」をクリックして <code>endl</code> 関数にフォーカスを置いてから、4つ目のボタンの「関数の呼出し元」をクリックして <code>endl</code> 関数をコールするすべての関数を表示します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph2.png" alt="call graph2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>ツリー内のノードの一部を展開すると、より多くの関数が表示されます。
-image::images/call_graph3.png[]</p>
+<p>ツリー内のノードの一部を展開すると、より多くの関数が表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph3.png" alt="call graph3">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_ハイパーリンクの使用方法">ハイパーリンクの使用方法</h3>
@@ -704,27 +780,39 @@ image::images/call_graph3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p><code>Quote_1</code> プロジェクトの <code>cpu.cc</code> ファイルで、Ctrlキーを押しながら行37にマウス・ポインタを置きます。 <code>ComputeSupportMetric</code> 関数が強調表示され、関数についての情報が注釈に表示されます。
-image::images/hyperlinks1.png[]</p>
+<p><code>Quote_1</code> プロジェクトの <code>cpu.cc</code> ファイルで、Ctrlキーを押しながら行37にマウス・ポインタを置きます。 <code>ComputeSupportMetric</code> 関数が強調表示され、関数についての情報が注釈に表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks1.png" alt="hyperlinks1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>ハイパーリンクをクリックすると、エディタがその関数の定義にジャンプします。
-image::images/hyperlinks2.png[]</p>
+<p>ハイパーリンクをクリックすると、エディタがその関数の定義にジャンプします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks2.png" alt="hyperlinks2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Ctrlキーを押しながら定義にマウスを置き、ハイパーリンクをクリックします。エディタが、 <code>cpu.h</code> ヘッダー・ファイル内のその関数の宣言にジャンプします。
-image::images/hyperlinks3.png[]</p>
+<p>Ctrlキーを押しながら定義にマウスを置き、ハイパーリンクをクリックします。エディタが、 <code>cpu.h</code> ヘッダー・ファイル内のその関数の宣言にジャンプします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks3.png" alt="hyperlinks3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -735,11 +823,15 @@ image::images/hyperlinks3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>左マージンにある緑色の円の上にマウスを置くと、このメソッドが別のメソッドをオーバーライドすることを示す注釈が表示されます。
-image::images/overide_annotation.png[]</p>
+<p>左マージンにある緑色の円の上にマウスを置くと、このメソッドが別のメソッドをオーバーライドすることを示す注釈が表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overide_annotation.png" alt="overide annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -750,11 +842,15 @@ image::images/overide_annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>灰色の円をクリックすると、エディタはこのメソッドをオーバーライドするメソッドの一覧を表示します。
-image::images/overridden_by_list.png[]</p>
+<p>灰色の円をクリックすると、エディタはこのメソッドをオーバーライドするメソッドの一覧を表示します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overridden_by_list.png" alt="overridden by list">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -777,11 +873,15 @@ image::images/overridden_by_list.png[]</p>
 <p>ファイルの <code>#include "module.h"</code> 行を右クリックし、「ナビゲート」&gt;「インクルードの階層を表示」を選択します。</p>
 </li>
 <li>
-<p>デフォルトでは、階層ウィンドウにはヘッダー・ファイルを直接含むプレーン・ファイルの一覧が表示されます。ウィンドウの右下隅ボタンをクリックすると、表示がツリー・ビューに変わります。右から2番目のボタンをクリックすると、表示がインクルードするかインクルードされているすべてのファイルに変わります。ツリー・ビューのノードを展開して、ヘッダー・ファイルを含むソース・ファイルをすべて表示します。
-image::images/includes_hierarchy.png[]</p>
+<p>デフォルトでは、階層ウィンドウにはヘッダー・ファイルを直接含むプレーン・ファイルの一覧が表示されます。ウィンドウの右下隅ボタンをクリックすると、表示がツリー・ビューに変わります。右から2番目のボタンをクリックすると、表示がインクルードするかインクルードされているすべてのファイルに変わります。ツリー・ビューのノードを展開して、ヘッダー・ファイルを含むソース・ファイルをすべて表示します。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/includes_hierarchy.png" alt="includes hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_タイプの階層の使用">タイプの階層の使用</h3>
@@ -797,11 +897,15 @@ image::images/includes_hierarchy.png[]</p>
 <p><code>Module</code> クラスの宣言を右クリックし、「ナビゲート」&gt;「タイプの階層を表示」をクリックします。</p>
 </li>
 <li>
-<p>「階層」ウィンドウには、Moduleクラスのすべてのサブタイプが表示されます。
-image::images/type_hierarchy.png[]</p>
+<p>「階層」ウィンドウには、Moduleクラスのすべてのサブタイプが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/type_hierarchy.png" alt="type hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_a_id_次の手順_a"><a id="次の手順"></a></h3>
diff --git a/content/kb/docs/cnd/navigating-editing_pt_BR.html b/content/kb/docs/cnd/navigating-editing_pt_BR.html
index d6bfda2..f89f9bb 100644
--- a/content/kb/docs/cnd/navigating-editing_pt_BR.html
+++ b/content/kb/docs/cnd/navigating-editing_pt_BR.html
@@ -220,11 +220,15 @@ para obter informações sobre o download e a instalação do software necessár
 <p>Selecione a linguagem C da lista drop-down Linguagem, pois o projeto Quote utiliza C.</p>
 </li>
 <li>
-<p>Selecione o estilo que deseja definir na lista drop-down Estilo.
-image::images/formatting_style.png[]</p>
+<p>Selecione o estilo que deseja definir na lista drop-down Estilo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/formatting_style.png" alt="formatting style">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -247,11 +251,15 @@ image::images/formatting_style.png[]</p>
 <p>Clique no ícone para contrair (caixa pequena com sinal de menos) na margem esquerda para dobrar o código de um dos métodos.</p>
 </li>
 <li>
-<p>Passe o mouse sobre o símbolo  <code>{&#8230;&#8203;}</code>  à direita do bloco dobrado para exibir o código no bloco.
-image::images/code_folding.png[]</p>
+<p>Passe o mouse sobre o símbolo  <code>{&#8230;&#8203;}</code>  à direita do bloco dobrado para exibir o código no bloco.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_folding.png" alt="code folding">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_utilizando_realce_de_semântica">Utilizando Realce de Semântica</h3>
@@ -282,11 +290,15 @@ image::images/code_folding.png[]</p>
 <p>Clique em uma ocorrência da classe  <code>Cliente</code> .</p>
 </li>
 <li>
-<p>Toas as ocorrências da classe  <code>Cliente</code>  no arquivo estão realçadas com um fundo amarelo. A margem da direita também mostra marcações que indicam pontos onde uma ocorrência está localizada no arquivo. As marcações permitem a visualização de quantas ocorrências existem sem rolar o arquivo. É possível clicar nas marcações para saltar às ocorrências que elas representam.
-image::images/highlighting1.png[]</p>
+<p>Toas as ocorrências da classe  <code>Cliente</code>  no arquivo estão realçadas com um fundo amarelo. A margem da direita também mostra marcações que indicam pontos onde uma ocorrência está localizada no arquivo. As marcações permitem a visualização de quantas ocorrências existem sem rolar o arquivo. É possível clicar nas marcações para saltar às ocorrências que elas representam.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting1.png" alt="highlighting1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -297,11 +309,15 @@ image::images/highlighting1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="10">
 <li>
-<p>Abra o arquivo  <code>customer.h</code> , localizado na pasta Cabeçalho e observe que nomes de método estão novamente realçados em negrito.
-image::images/highlighting2.png[]</p>
+<p>Abra o arquivo  <code>customer.h</code> , localizado na pasta Cabeçalho e observe que nomes de método estão novamente realçados em negrito.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting2.png" alt="highlighting2">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_utilizando_autocompletar_código_e_documentação">Utilizando Autocompletar Código e Documentação</h3>
@@ -320,19 +336,27 @@ image::images/highlighting2.png[]</p>
 <p>Na primeira linha em branco do  <code>quote.cc</code> , digite a letra C em maiúsculo e pressione Ctrl-Espaço. A caixa de autocompletar código exibe uma pequena lista que inclui as classes  <code>Cpu</code>  e  <code>Cliente</code> . Uma janela de documentação também aparece, mas exibe "Nenhuma documentação encontrada" porque a fonte do projeto não inclui documentação para esse código.</p>
 </li>
 <li>
-<p>Expanda a lista de itens pressionando Ctrl-Espaço novamente.
-image::images/code_completion1.png[]</p>
+<p>Expanda a lista de itens pressionando Ctrl-Espaço novamente.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion1.png" alt="code completion1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Utilize as teclas de seta ou o mouse para realçar uma função de biblioteca padrão como  <code>calloc</code>  e a janela da documentação exibe a página do manual para essa função se a página do manual está acessível para o IDE.
-image::images/code-completion-documentation.png[]</p>
+<p>Utilize as teclas de seta ou o mouse para realçar uma função de biblioteca padrão como  <code>calloc</code>  e a janela da documentação exibe a página do manual para essa função se a página do manual está acessível para o IDE.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion-documentation.png" alt="code completion documentation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
@@ -343,19 +367,27 @@ image::images/code-completion-documentation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Complete a nova instância da classe  <code>Cliente</code>  digitando "  <code>andrew;</code> ". Na próxima linha, digite a letra  <code>a</code>  e pressione Ctrl-Espaço. A caixa de autocompletar código exibe uma lista de opções começando com a letra  <code>a</code> , tais como argumentos de método, campos de classe e nomes globais, que podem ser acessados no menu de contexto.
-image::images/code_completion2.png[]</p>
+<p>Complete a nova instância da classe  <code>Cliente</code>  digitando "  <code>andrew;</code> ". Na próxima linha, digite a letra  <code>a</code>  e pressione Ctrl-Espaço. A caixa de autocompletar código exibe uma lista de opções começando com a letra  <code>a</code> , tais como argumentos de método, campos de classe e nomes globais, que podem ser acessados no menu de contexto.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion2.png" alt="code completion2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Clique duas vezes na opção  <code>andrew</code>  para aceitá-la e digite um ponto depois dela. Pressione Ctrl + Espaço e você receberá automaticamente uma lista dos métodos e campos públicos da classe  <code>Cliente</code> .
-image::images/code_completion3.png[]</p>
+<p>Clique duas vezes na opção  <code>andrew</code>  para aceitá-la e digite um ponto depois dela. Pressione Ctrl + Espaço e você receberá automaticamente uma lista dos métodos e campos públicos da classe  <code>Cliente</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion3.png" alt="code completion3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -380,19 +412,27 @@ image::images/code_completion3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Digite uma barra e dois asteriscos e pressione Enter. O editor insere um comentário doxygen-formatado para a classe  <code>readnumberof</code> .
-image::images/doxygen_comment.png[]</p>
+<p>Digite uma barra e dois asteriscos e pressione Enter. O editor insere um comentário doxygen-formatado para a classe  <code>readnumberof</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment.png" alt="doxygen comment">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Adicione algum texto descritivo para cada uma das linhas @param e salve o arquivo.
-image::images/doxygen_comment_edited.png[]</p>
+<p>Adicione algum texto descritivo para cada uma das linhas @param e salve o arquivo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment_edited.png" alt="doxygen comment edited">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -403,11 +443,15 @@ image::images/doxygen_comment_edited.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Clique na classe  <code>readNumberOf</code>  na linha para qual você saltou e pressione Ctrl-Shift-Espaço para mostrar a documentação recentemente adicionada aos parâmetros.
-image::images/doxygen_displayed.png[]</p>
+<p>Clique na classe  <code>readNumberOf</code>  na linha para qual você saltou e pressione Ctrl-Shift-Espaço para mostrar a documentação recentemente adicionada aos parâmetros.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_displayed.png" alt="doxygen displayed">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -456,11 +500,15 @@ image::images/doxygen_displayed.png[]</p>
 <p>Na caixa de diálogo Opções, selecione Editor e clique na guia Modelos de Código.</p>
 </li>
 <li>
-<p>Selecione o idioma apropriado na lista drop-down de Idiomas.
-image::images/code_templates.png[]</p>
+<p>Selecione o idioma apropriado na lista drop-down de Idiomas.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_templates.png" alt="code templates">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_usando_conclusão_de_par">Usando Conclusão de Par</h3>
@@ -518,11 +566,15 @@ image::images/code_templates.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Na caixa de diálogo Localizar nos Projetos, selecione a guia de Pesquisa Default ou a guia Grep. A guia Grep usa o utilitário  <code>grep</code> , que fornece uma pesquisa mais rápida, principalmente para projetos remoto.
-image::images/find_in_projects.png[]</p>
+<p>Na caixa de diálogo Localizar nos Projetos, selecione a guia de Pesquisa Default ou a guia Grep. A guia Grep usa o utilitário  <code>grep</code> , que fornece uma pesquisa mais rápida, principalmente para projetos remoto.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/find_in_projects.png" alt="find in projects">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -583,11 +635,15 @@ A guia Resultados da Pesquisa lista os arquivos em que o texto ou expressão reg
 <p>Expanda o nó  <code>Quote_1</code>  na janela Classes. São listadas todas as classes do projeto.</p>
 </li>
 <li>
-<p>Expanda a classe  <code>Cliente</code> .
-image::images/classes_window.png[]</p>
+<p>Expanda a classe  <code>Cliente</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/classes_window.png" alt="classes window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +663,15 @@ image::images/classes_window.png[]</p>
 <p>Clique em qualquer parte do arquivo  <code>quote.cc</code>  na janela Editor.</p>
 </li>
 <li>
-<p>Uma view compacta do arquivo é exibida na janela Navegador.
-image::images/navigator_window.png[]</p>
+<p>Uma view compacta do arquivo é exibida na janela Navegador.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/navigator_window.png" alt="navigator window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -644,11 +704,15 @@ image::images/navigator_window.png[]</p>
 <p>Na caixa de diálogo Localizar Usos, clique em Localizar.</p>
 </li>
 <li>
-<p>A janela Usos se abre e exibe todos os usos da classe  <code>Cliente</code>  nos arquivos de código-fonte do projeto.
-image::images/usages_window.png[]</p>
+<p>A janela Usos se abre e exibe todos os usos da classe  <code>Cliente</code>  nos arquivos de código-fonte do projeto.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/usages_window.png" alt="usages window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -668,11 +732,15 @@ image::images/usages_window.png[]</p>
 <p>No arquivo  <code>quote.cc</code> , clique com o botão direito do mouse na função  <code>main</code>  e escolha Mostrar Gráfico de Chamada.</p>
 </li>
 <li>
-<p>A janela Gráfico de Chamada abre e exibe uma view em árvore e gráfica de todas as funções chamadas da função  <code>principal</code> .
-image::images/call_graph1.png[]</p>
+<p>A janela Gráfico de Chamada abre e exibe uma view em árvore e gráfica de todas as funções chamadas da função  <code>principal</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph1.png" alt="call graph1">
+</div>
+</div>
 <div class="paragraph">
 <p>Se não for possível visualizar todas as funções mostradas aqui, clique no terceiro botão no lado esquerdo da janela Gráfico de Chamada para mostrar "quem é chamado para essa função."</p>
 </div>
@@ -686,19 +754,27 @@ image::images/call_graph1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Clique no segundo botão, chamado Trazer para o Foco no lado esquerdo da janela para focar na função  <code>endl</code>  e, em seguida, clique no quarto botão Quem Chama esta Função para exibir todas as funções que chamam a função  <code>endl</code> .
-image::images/call_graph2.png[]</p>
+<p>Clique no segundo botão, chamado Trazer para o Foco no lado esquerdo da janela para focar na função  <code>endl</code>  e, em seguida, clique no quarto botão Quem Chama esta Função para exibir todas as funções que chamam a função  <code>endl</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph2.png" alt="call graph2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Expanda alguns nós da árvore para ver mais funções.
-image::images/call_graph3.png[]</p>
+<p>Expanda alguns nós da árvore para ver mais funções.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph3.png" alt="call graph3">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_usando_hiperlinks">Usando Hiperlinks</h3>
@@ -708,27 +784,39 @@ image::images/call_graph3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>No arquivo  <code>cpu.cc</code>  do projeto  <code>Quote_1</code> , mova o mouse sobre a linha 37 enquanto o Ctrl estiver pressionado. A função  <code>ComputeSupportMetric</code>  está realçada e uma anotação exibe informações sobre a função.
-image::images/hyperlinks1.png[]</p>
+<p>No arquivo  <code>cpu.cc</code>  do projeto  <code>Quote_1</code> , mova o mouse sobre a linha 37 enquanto o Ctrl estiver pressionado. A função  <code>ComputeSupportMetric</code>  está realçada e uma anotação exibe informações sobre a função.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks1.png" alt="hyperlinks1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Clique no hiperlink e o editor saltará para a definição da função.
-image::images/hyperlinks2.png[]</p>
+<p>Clique no hiperlink e o editor saltará para a definição da função.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks2.png" alt="hyperlinks2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Mova o mouse sobre a definição quanto o Ctrl estiver pressionado e clique no hiperlink. O editor salta para a declaração da função no arquivo de cabeçalho  <code>cpu.h</code> .
-image::images/hyperlinks3.png[]</p>
+<p>Mova o mouse sobre a definição quanto o Ctrl estiver pressionado e clique no hiperlink. O editor salta para a declaração da função no arquivo de cabeçalho  <code>cpu.h</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks3.png" alt="hyperlinks3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -739,11 +827,15 @@ image::images/hyperlinks3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Passe o cursor do mouse sobre o círculo verde na margem esquerda e veja a anotação que indica que este método substitui qualquer outro método.
-image::images/overide_annotation.png[]</p>
+<p>Passe o cursor do mouse sobre o círculo verde na margem esquerda e veja a anotação que indica que este método substitui qualquer outro método.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overide_annotation.png" alt="overide annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -754,11 +846,15 @@ image::images/overide_annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Um clique no círculo cinza e o editor exibe uma lista de métodos que substituíram esse método.
-image::images/overridden_by_list.png[]</p>
+<p>Um clique no círculo cinza e o editor exibe uma lista de métodos que substituíram esse método.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overridden_by_list.png" alt="overridden by list">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -781,11 +877,15 @@ image::images/overridden_by_list.png[]</p>
 <p>Clique com o botão direito do mouse na linha  <code>#include "module.h"</code>  no arquivo e escolha Navegar &gt; Exibir Hierarquia de Inclusões.</p>
 </li>
 <li>
-<p>Como default, a janela Hierarquia exibe uma lista sem formatação de arquivos que incluem diretamente o arquivo de cabeçalho. Clique no botão mais à direita na parte inferior da janela para alterar a view em árvore. Clique no segundo botão da direita para alterar a exibição para todos os arquivos que incluem ou são incluídos. Expanda os nós na view em árvore para ver todos os arquivos de código-fonte que incluem o arquivo de cabeçalho.
-image::images/includes_hierarchy.png[]</p>
+<p>Como default, a janela Hierarquia exibe uma lista sem formatação de arquivos que incluem diretamente o arquivo de cabeçalho. Clique no botão mais à direita na parte inferior da janela para alterar a view em árvore. Clique no segundo botão da direita para alterar a exibição para todos os arquivos que incluem ou são incluídos. Expanda os nós na view em árvore para ver todos os arquivos de código-fonte que incluem o arquivo de cabeçalho.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/includes_hierarchy.png" alt="includes hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_utilizando_a_hierarquia_de_tipo">Utilizando a Hierarquia de Tipo</h3>
@@ -801,11 +901,15 @@ image::images/includes_hierarchy.png[]</p>
 <p>Clique com o botão direito do mouse na declaração da classe  <code>Módulo</code>  e escolha Navegar &gt; Exibir Hierarquia de Tipo.</p>
 </li>
 <li>
-<p>A janela Hierarquia exibe todos os subtipos da classe Módulo.
-image::images/type_hierarchy.png[]</p>
+<p>A janela Hierarquia exibe todos os subtipos da classe Módulo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/type_hierarchy.png" alt="type hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_próximas_etapas">[[Próximas Etapas]]</h3>
diff --git a/content/kb/docs/cnd/navigating-editing_ru.html b/content/kb/docs/cnd/navigating-editing_ru.html
index f45dbeb..2096f79 100644
--- a/content/kb/docs/cnd/navigating-editing_ru.html
+++ b/content/kb/docs/cnd/navigating-editing_ru.html
@@ -220,11 +220,15 @@
 <p>Выберите в раскрывающемся списке "Язык" язык C, поскольку в проекте Quote используется язык C.</p>
 </li>
 <li>
-<p>Выберите в раскрывающемся списке "Стиль" необходимый стиль.
-image::images/formatting_style.png[]</p>
+<p>Выберите в раскрывающемся списке "Стиль" необходимый стиль.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/formatting_style.png" alt="formatting style">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -247,11 +251,15 @@ image::images/formatting_style.png[]</p>
 <p>Щелкните в левом поле значок свертывания (небольшое поле со знаком "-"), чтобы свернуть код одного из методов.</p>
 </li>
 <li>
-<p>Наведите курсор на символ  <code>{&#8230;&#8203;}</code>  справа от свернутого блока для отображения кода блока.
-image::images/code_folding.png[]</p>
+<p>Наведите курсор на символ  <code>{&#8230;&#8203;}</code>  справа от свернутого блока для отображения кода блока.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_folding.png" alt="code folding">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Использование_семантического_выделения">Использование семантического выделения</h3>
@@ -282,11 +290,15 @@ image::images/code_folding.png[]</p>
 <p>Щелкните вхождение класса  <code>Customer</code> .</p>
 </li>
 <li>
-<p>Все вхождения класса  <code>Customer</code>  в файле будут выделены желтым цветом. В правом поле также отображаются отметки, указывающие расположение вхождений в файле. Отметки позволяют оценить число вхождений в файле без прокручивания. Чтобы перейти ко вхождению, следует щелкнуть необходимую отметку.
-image::images/highlighting1.png[]</p>
+<p>Все вхождения класса  <code>Customer</code>  в файле будут выделены желтым цветом. В правом поле также отображаются отметки, указывающие расположение вхождений в файле. Отметки позволяют оценить число вхождений в файле без прокручивания. Чтобы перейти ко вхождению, следует щелкнуть необходимую отметку.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting1.png" alt="highlighting1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -297,11 +309,15 @@ image::images/highlighting1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="10">
 <li>
-<p>Откройте файл  <code>customer.h</code> , расположенный в папке "Headers", и обратите внимание, что имена методов снова выделены жирным.
-image::images/highlighting2.png[]</p>
+<p>Откройте файл  <code>customer.h</code> , расположенный в папке "Headers", и обратите внимание, что имена методов снова выделены жирным.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting2.png" alt="highlighting2">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Работа_с_автозавершением_кода_и_документированием">Работа с автозавершением кода и документированием</h3>
@@ -320,19 +336,27 @@ image::images/highlighting2.png[]</p>
 <p>Введите в первой пустой строчке файла  <code>quote.cc</code>  заглавную латинскую букву "C" и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Появится окно автозавершения кода с небольшим списком, включающем классы  <code>Cpu</code>  и  <code>Customer</code> . Также отобразится окно документации с сообщением "Документация не найдена", поскольку исходный код проекта не содержит документации по коду.</p>
 </li>
 <li>
-<p>Разверните список элементов, снова нажав CTRL+ПРОБЕЛ.
-image::images/code_completion1.png[]</p>
+<p>Разверните список элементов, снова нажав CTRL+ПРОБЕЛ.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion1.png" alt="code completion1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Используйте клавиши со стрелками или кнопки мыши для выделения стандартной функции библиотеки (например,  <code>calloc</code> ) из списка. В окне документации появится страница системной справки для этой функции, если эта страница доступна для среды IDE.
-image::images/code-completion-documentation.png[]</p>
+<p>Используйте клавиши со стрелками или кнопки мыши для выделения стандартной функции библиотеки (например,  <code>calloc</code> ) из списка. В окне документации появится страница системной справки для этой функции, если эта страница доступна для среды IDE.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion-documentation.png" alt="code completion documentation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
@@ -343,19 +367,27 @@ image::images/code-completion-documentation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>Заполните новый экземпляр класса  <code>Customer</code> , введя текст  <code>andrew;</code> . Введите в следующей строке латинскую букву  <code>a</code>  и нажмите CTRL+ПРОБЕЛ. Появится окно автозавершения кода со списком возможных элементов с начальной буквой  <code>a</code> , например аргументы метода, поля класса и глобальные имена, доступные в текущем контексте.
-image::images/code_completion2.png[]</p>
+<p>Заполните новый экземпляр класса  <code>Customer</code> , введя текст  <code>andrew;</code> . Введите в следующей строке латинскую букву  <code>a</code>  и нажмите CTRL+ПРОБЕЛ. Появится окно автозавершения кода со списком возможных элементов с начальной буквой  <code>a</code> , например аргументы метода, поля класса и глобальные имена, доступные в текущем контексте.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion2.png" alt="code completion2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Дважды щелкните параметр  <code>andrew</code> , чтобы принять его и ввести после него точку. Нажмите Ctrl-пробел, и будет выведен список общедоступных методов и полей класса  <code>Customer</code> .
-image::images/code_completion3.png[]</p>
+<p>Дважды щелкните параметр  <code>andrew</code> , чтобы принять его и ввести после него точку. Нажмите Ctrl-пробел, и будет выведен список общедоступных методов и полей класса  <code>Customer</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion3.png" alt="code completion3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -380,19 +412,27 @@ image::images/code_completion3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Введите косую черту и две звездочки, а затем нажмите ENTER. Редактор вставляет комментарий, отформатированный по синтаксису Doxygen, для класса  <code>readNumberOf</code> .
-image::images/doxygen_comment.png[]</p>
+<p>Введите косую черту и две звездочки, а затем нажмите ENTER. Редактор вставляет комментарий, отформатированный по синтаксису Doxygen, для класса  <code>readNumberOf</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment.png" alt="doxygen comment">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Добавьте текст описания в каждую строку аннотации @param и сохраните файл.
-image::images/doxygen_comment_edited.png[]</p>
+<p>Добавьте текст описания в каждую строку аннотации @param и сохраните файл.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment_edited.png" alt="doxygen comment edited">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -403,11 +443,15 @@ image::images/doxygen_comment_edited.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Щелкните класс  <code>readNumberOf</code>  в строке, к которой выполнен переход, и нажмите сочетание клавиш CTRL+SHIFT+ПРОБЕЛ для отображения документации, добавленной для параметров.
-image::images/doxygen_displayed.png[]</p>
+<p>Щелкните класс  <code>readNumberOf</code>  в строке, к которой выполнен переход, и нажмите сочетание клавиш CTRL+SHIFT+ПРОБЕЛ для отображения документации, добавленной для параметров.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_displayed.png" alt="doxygen displayed">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -456,11 +500,15 @@ image::images/doxygen_displayed.png[]</p>
 <p>В диалоговом окне 'Параметры' щелкните 'Редактор' и щелкните вкладку 'Шаблолны кода'.</p>
 </li>
 <li>
-<p>В раскрывающемся списке "Язык" выберите необходимый язык.
-image::images/code_templates.png[]</p>
+<p>В раскрывающемся списке "Язык" выберите необходимый язык.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_templates.png" alt="code templates">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Подстановка_парных_символов">Подстановка парных символов</h3>
@@ -518,11 +566,15 @@ image::images/code_templates.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>В диалоговом окне "Найти в проектах" перейдите на вкладку "Список по умолчанию" или на вкладку "Grep". На вкладке 'Grep' используется служебная программа  <code>grep</code> , обеспечивающая более быстрый поиск, особенно для удаленных проектов.
-image::images/find_in_projects.png[]</p>
+<p>В диалоговом окне "Найти в проектах" перейдите на вкладку "Список по умолчанию" или на вкладку "Grep". На вкладке 'Grep' используется служебная программа  <code>grep</code> , обеспечивающая более быстрый поиск, особенно для удаленных проектов.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/find_in_projects.png" alt="find in projects">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -583,11 +635,15 @@ image::images/find_in_projects.png[]</p>
 <p>Разверните узел  <code>Quote_1</code>  в окне классов. Выводится список всех классов проекта.</p>
 </li>
 <li>
-<p>Разверните класс  <code>Customer</code> .
-image::images/classes_window.png[]</p>
+<p>Разверните класс  <code>Customer</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/classes_window.png" alt="classes window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +663,15 @@ image::images/classes_window.png[]</p>
 <p>Щелкните в любом месте окна редактора файла  <code>quote.cc</code> .</p>
 </li>
 <li>
-<p>В окне навигатора отобразится компактное представление файла.
-image::images/navigator_window.png[]</p>
+<p>В окне навигатора отобразится компактное представление файла.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/navigator_window.png" alt="navigator window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -644,11 +704,15 @@ image::images/navigator_window.png[]</p>
 <p>Нажмите в диалоговом окне "Найти случаи использования" кнопку "Найти".</p>
 </li>
 <li>
-<p>Появится окно "Случаи использования" со случаями использования класса  <code>Customer</code>  в исходных файлах проекта.
-image::images/usages_window.png[]</p>
+<p>Появится окно "Случаи использования" со случаями использования класса  <code>Customer</code>  в исходных файлах проекта.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/usages_window.png" alt="usages window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -668,11 +732,15 @@ image::images/usages_window.png[]</p>
 <p>В файле  <code>quote.cc</code>  щелкните правой кнопкой мыши в функции  <code>main</code>  и выберите 'Показать график вызовов'.</p>
 </li>
 <li>
-<p>Откроется окно "Граф вызовов" с деревом и графическим представлением всех функций, вызванных из функции  <code>main</code> .
-image::images/call_graph1.png[]</p>
+<p>Откроется окно "Граф вызовов" с деревом и графическим представлением всех функций, вызванных из функции  <code>main</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph1.png" alt="call graph1">
+</div>
+</div>
 <div class="paragraph">
 <p>Если отображаются не все функции, приведенные на рисунке выше, нажмите в окне "Граф вызовов" третью кнопку слева для вывода элементов, вызванных из данной функции.</p>
 </div>
@@ -686,19 +754,27 @@ image::images/call_graph1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Нажмите вторую кнопку 'Фокусировать' в левой части окна для перемещения фокуса к функции  <code>endl</code> , затем нажмите четвертую кнопку 'Кто вызывает эту функцию', чтобы просмотреть все функции, вызывающие функцию  <code>endl</code> .
-image::images/call_graph2.png[]</p>
+<p>Нажмите вторую кнопку 'Фокусировать' в левой части окна для перемещения фокуса к функции  <code>endl</code> , затем нажмите четвертую кнопку 'Кто вызывает эту функцию', чтобы просмотреть все функции, вызывающие функцию  <code>endl</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph2.png" alt="call graph2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Разверните несколько узлов дерева для просмотра большего числа функций.
-image::images/call_graph3.png[]</p>
+<p>Разверните несколько узлов дерева для просмотра большего числа функций.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph3.png" alt="call graph3">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Работа_с_гиперссылками">Работа с гиперссылками</h3>
@@ -708,27 +784,39 @@ image::images/call_graph3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>В файле  <code>cpu.cc</code>  проекта  <code>Quote_1</code>  наведите курсор мыши на строку 37, нажав клавишу CTRL. Функция  <code>ComputeSupportMetric</code>  будет выделена, а в аннотации будут выведены сведения о данной функции.
-image::images/hyperlinks1.png[]</p>
+<p>В файле  <code>cpu.cc</code>  проекта  <code>Quote_1</code>  наведите курсор мыши на строку 37, нажав клавишу CTRL. Функция  <code>ComputeSupportMetric</code>  будет выделена, а в аннотации будут выведены сведения о данной функции.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks1.png" alt="hyperlinks1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Щелкните гиперссылку, и в окне редактора будет выполнен переход к определению функции.
-image::images/hyperlinks2.png[]</p>
+<p>Щелкните гиперссылку, и в окне редактора будет выполнен переход к определению функции.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks2.png" alt="hyperlinks2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Наведите курсор на определение, нажав клавишу CTRL, и щелкните ссылку. В редакторе будет выполнен переход к объявлению функции в файле заголовка  <code>cpu.h</code> .
-image::images/hyperlinks3.png[]</p>
+<p>Наведите курсор на определение, нажав клавишу CTRL, и щелкните ссылку. В редакторе будет выполнен переход к объявлению функции в файле заголовка  <code>cpu.h</code> .</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks3.png" alt="hyperlinks3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -739,11 +827,15 @@ image::images/hyperlinks3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>Наведите курсор мыши на зеленый круг в левом поле и просмотрите аннотацию, указывающую, что данный метод переопределяет другой метод.
-image::images/overide_annotation.png[]</p>
+<p>Наведите курсор мыши на зеленый круг в левом поле и просмотрите аннотацию, указывающую, что данный метод переопределяет другой метод.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overide_annotation.png" alt="overide annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -754,11 +846,15 @@ image::images/overide_annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Щелкните серый круг, и в окне редактора появится список методов, переопределяющих этот метод.
-image::images/overridden_by_list.png[]</p>
+<p>Щелкните серый круг, и в окне редактора появится список методов, переопределяющих этот метод.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overridden_by_list.png" alt="overridden by list">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -781,11 +877,15 @@ image::images/overridden_by_list.png[]</p>
 <p>Щелкните правой кнопкой мыши строку  <code>#include "module.h"</code>  в файле и выберите команду "Переход" &gt; "Просмотреть иерархию Includes".</p>
 </li>
 <li>
-<p>По умолчанию окно "Иерархия" представляет собой список файлов, напрямую включающих файл заголовка. Нажмите крайнюю правую кнопку в нижней части окна для изменения представления на древовидное. Нажмите вторую кнопку справа, чтобы изменить представление для всех включаемых и включающих файлов. Разверните узлы дерева для просмотра всех исходных файлов, включающих файл заголовка.
-image::images/includes_hierarchy.png[]</p>
+<p>По умолчанию окно "Иерархия" представляет собой список файлов, напрямую включающих файл заголовка. Нажмите крайнюю правую кнопку в нижней части окна для изменения представления на древовидное. Нажмите вторую кнопку справа, чтобы изменить представление для всех включаемых и включающих файлов. Разверните узлы дерева для просмотра всех исходных файлов, включающих файл заголовка.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/includes_hierarchy.png" alt="includes hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Работа_с_иерархией_типов">Работа с иерархией типов</h3>
@@ -801,11 +901,15 @@ image::images/includes_hierarchy.png[]</p>
 <p>Щелкните правой кнопкой мыши объявление класса  <code>Module</code>  и выберите "Переход" &gt; "Просмотреть иерархию типов".</p>
 </li>
 <li>
-<p>Окно иерархии содержит все подтипы класса Module.
-image::images/type_hierarchy.png[]</p>
+<p>Окно иерархии содержит все подтипы класса Module.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/type_hierarchy.png" alt="type hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_Следующие_действия">[[Следующие действия]]</h3>
diff --git a/content/kb/docs/cnd/navigating-editing_zh_CN.html b/content/kb/docs/cnd/navigating-editing_zh_CN.html
index f6910c2..ece1dda 100644
--- a/content/kb/docs/cnd/navigating-editing_zh_CN.html
+++ b/content/kb/docs/cnd/navigating-editing_zh_CN.html
@@ -220,11 +220,15 @@
 <p>从 "Language"(语言)下拉列表中选择 "C" 语言,因为 "Quote"(报价)项目使用 C。</p>
 </li>
 <li>
-<p>从 "Style"(样式)下拉列表中选择要设置的样式。
-image::images/formatting_style.png[]</p>
+<p>从 "Style"(样式)下拉列表中选择要设置的样式。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/formatting_style.png" alt="formatting style">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -247,11 +251,15 @@ image::images/formatting_style.png[]</p>
 <p>单击左旁注中的折叠图标(标有减号的小方块),折叠其中一个方法的代码。</p>
 </li>
 <li>
-<p>将鼠标移动到折叠代码块右边的  <code>{&#8230;&#8203;}</code>  符号上,以显示代码块中的代码。
-image::images/code_folding.png[]</p>
+<p>将鼠标移动到折叠代码块右边的  <code>{&#8230;&#8203;}</code>  符号上,以显示代码块中的代码。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_folding.png" alt="code folding">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_使用语义突出显示">使用语义突出显示</h3>
@@ -282,11 +290,15 @@ image::images/code_folding.png[]</p>
 <p>单击某个出现的  <code>Customer</code>  类。</p>
 </li>
 <li>
-<p>文件中出现的所有  <code>Customer</code>  类都将以黄色背景突出显示。右旁注还会显示一些标记,以指示文件中出现该类的位置。通过这些标记,您无需滚动查看整个文件,便可了解文件中存在多少该类。单击标记,可以跳转至它们所指示的实例位置。
-image::images/highlighting1.png[]</p>
+<p>文件中出现的所有  <code>Customer</code>  类都将以黄色背景突出显示。右旁注还会显示一些标记,以指示文件中出现该类的位置。通过这些标记,您无需滚动查看整个文件,便可了解文件中存在多少该类。单击标记,可以跳转至它们所指示的实例位置。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting1.png" alt="highlighting1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="9">
 <li>
@@ -297,11 +309,15 @@ image::images/highlighting1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="10">
 <li>
-<p>打开位于 "Headers"(头)文件夹中的  <code>customer.h</code>  文件,您会看到类名同样以粗体突出显示。
-image::images/highlighting2.png[]</p>
+<p>打开位于 "Headers"(头)文件夹中的  <code>customer.h</code>  文件,您会看到类名同样以粗体突出显示。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/highlighting2.png" alt="highlighting2">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_使用代码完成和文档">使用代码完成和文档</h3>
@@ -320,19 +336,27 @@ image::images/highlighting2.png[]</p>
 <p>在  <code>quote.cc</code>  的第一个空行上,键入大写字母 C,然后按 Ctrl-空格组合键。代码完成框会显示一个简短列表,其中包含  <code>Cpu</code>  和  <code>Customer</code>  类。文档窗口也会打开,但显示 "No documentation found"(找不到文档),因为项目源文件中不包括其代码的文档。</p>
 </li>
 <li>
-<p>再次按 Ctrl-空格键以展开项目列表。
-image::images/code_completion1.png[]</p>
+<p>再次按 Ctrl-空格键以展开项目列表。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion1.png" alt="code completion1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>使用方向键或鼠标突出显示列表中的某个标准库函数(例如  <code>calloc</code> );如果 IDE 可以访问该函数的手册页,则文档窗口便会显示该手册页。
-image::images/code-completion-documentation.png[]</p>
+<p>使用方向键或鼠标突出显示列表中的某个标准库函数(例如  <code>calloc</code> );如果 IDE 可以访问该函数的手册页,则文档窗口便会显示该手册页。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code-completion-documentation.png" alt="code completion documentation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
@@ -343,19 +367,27 @@ image::images/code-completion-documentation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
-<p>键入  <code>andrew;</code> ,完成新的  <code>Customer</code>  类实例。在下一行中,键入字母  <code>a</code>  并按 Ctrl-空格键两次。代码完成框显示以字母  <code>a</code>  开头的选择列表,例如可从当前上下文访问的方法参数、类字段和全局名。
-image::images/code_completion2.png[]</p>
+<p>键入  <code>andrew;</code> ,完成新的  <code>Customer</code>  类实例。在下一行中,键入字母  <code>a</code>  并按 Ctrl-空格键两次。代码完成框显示以字母  <code>a</code>  开头的选择列表,例如可从当前上下文访问的方法参数、类字段和全局名。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion2.png" alt="code completion2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>双击  <code>andrew</code>  选项接受它,并在其后键入一个句点。按 Ctrl-空格键,将显示  <code>Customer</code>  类的公共方法和字段的列表。
-image::images/code_completion3.png[]</p>
+<p>双击  <code>andrew</code>  选项接受它,并在其后键入一个句点。按 Ctrl-空格键,将显示  <code>Customer</code>  类的公共方法和字段的列表。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_completion3.png" alt="code completion3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -380,19 +412,27 @@ image::images/code_completion3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>键入一个正斜杠和两个星号,然后按 Enter 键。编辑器会为  <code>readNumberOf</code>  类插入一条 Doxygen 格式的注释。
-image::images/doxygen_comment.png[]</p>
+<p>键入一个正斜杠和两个星号,然后按 Enter 键。编辑器会为  <code>readNumberOf</code>  类插入一条 Doxygen 格式的注释。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment.png" alt="doxygen comment">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>在每个 @param 行中添加一些描述性文本,然后保存该文件。
-image::images/doxygen_comment_edited.png[]</p>
+<p>在每个 @param 行中添加一些描述性文本,然后保存该文件。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_comment_edited.png" alt="doxygen comment edited">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -403,11 +443,15 @@ image::images/doxygen_comment_edited.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>单击所跳转到的行中的  <code>readNumberOf</code>  类,然后按 Ctrl-Shift-空格键以显示刚才为参数添加的文档。
-image::images/doxygen_displayed.png[]</p>
+<p>单击所跳转到的行中的  <code>readNumberOf</code>  类,然后按 Ctrl-Shift-空格键以显示刚才为参数添加的文档。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/doxygen_displayed.png" alt="doxygen displayed">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -456,11 +500,15 @@ image::images/doxygen_displayed.png[]</p>
 <p>在 "Options"(选项)对话框中,选择 "Editor"(编辑器),然后单击 "Code Templates"(代码模板)标签。</p>
 </li>
 <li>
-<p>从 "Language"(语言)下拉列表中选择相应语言。
-image::images/code_templates.png[]</p>
+<p>从 "Language"(语言)下拉列表中选择相应语言。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/code_templates.png" alt="code templates">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_用配对完成功能">用配对完成功能</h3>
@@ -518,11 +566,15 @@ image::images/code_templates.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>在 "Find In Projects"(在项目中查找)对话框中,选择 "Default Search"(默认搜索)标签或 "Grep" 标签。"Grep" 标签使用  <code>grep</code>  实用程序,该实用程序提供较快的搜索,尤其适用于远程项目。
-image::images/find_in_projects.png[]</p>
+<p>在 "Find In Projects"(在项目中查找)对话框中,选择 "Default Search"(默认搜索)标签或 "Grep" 标签。"Grep" 标签使用  <code>grep</code>  实用程序,该实用程序提供较快的搜索,尤其适用于远程项目。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/find_in_projects.png" alt="find in projects">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -583,11 +635,15 @@ image::images/find_in_projects.png[]</p>
 <p>展开 "Classes"(类)窗口中的  <code>Quote_1</code>  节点。项目中所有类都会被列出。</p>
 </li>
 <li>
-<p>展开  <code>Customer</code>  类。
-image::images/classes_window.png[]</p>
+<p>展开  <code>Customer</code>  类。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/classes_window.png" alt="classes window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +663,15 @@ image::images/classes_window.png[]</p>
 <p>在编辑器窗口中单击  <code>quote.cc</code>  文件中的任意位置。</p>
 </li>
 <li>
-<p>文件的紧凑视图就会在 "Navigator"(导航器)窗口中显示出来。
-image::images/navigator_window.png[]</p>
+<p>文件的紧凑视图就会在 "Navigator"(导航器)窗口中显示出来。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/navigator_window.png" alt="navigator window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -644,11 +704,15 @@ image::images/navigator_window.png[]</p>
 <p>在 "Find Usages"(查找使用实例)对话框中,单击 "Find"(查找)。</p>
 </li>
 <li>
-<p>此时 "Usages"(使用实例)窗口会打开并显示项目源文件中的  <code>Customer</code>  类。
-image::images/usages_window.png[]</p>
+<p>此时 "Usages"(使用实例)窗口会打开并显示项目源文件中的  <code>Customer</code>  类。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/usages_window.png" alt="usages window">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -668,11 +732,15 @@ image::images/usages_window.png[]</p>
 <p>在  <code>quote.cc</code>  文件中,右键单击  <code>main</code>  函数,并选择 "Show Call Graph"(显示调用图形)。</p>
 </li>
 <li>
-<p>此时打开 "Call Graph"(调用图形)窗口,其中显示了从  <code>main</code>  函数调用的所有函数的树视图和图形视图。
-image::images/call_graph1.png[]</p>
+<p>此时打开 "Call Graph"(调用图形)窗口,其中显示了从  <code>main</code>  函数调用的所有函数的树视图和图形视图。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph1.png" alt="call graph1">
+</div>
+</div>
 <div class="paragraph">
 <p>如果此处未显示所有函数,请单击 "Call Graph"(调用图形)窗口左侧的第三个按钮,以显示“从该函数调用的函数”。</p>
 </div>
@@ -686,19 +754,27 @@ image::images/call_graph1.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>单击窗口左侧的第二个按钮 "Bring Into Focus"(聚焦)以将焦点放在  <code>endl</code>  函数上,然后单击第四个按钮 "Who Calls this Function"(此函数的调用者)以查看调用  <code>endl</code>  函数的所有函数。
-image::images/call_graph2.png[]</p>
+<p>单击窗口左侧的第二个按钮 "Bring Into Focus"(聚焦)以将焦点放在  <code>endl</code>  函数上,然后单击第四个按钮 "Who Calls this Function"(此函数的调用者)以查看调用  <code>endl</code>  函数的所有函数。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph2.png" alt="call graph2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>展开树中的某些节点以查看更多函数。
-image::images/call_graph3.png[]</p>
+<p>展开树中的某些节点以查看更多函数。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/call_graph3.png" alt="call graph3">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_使用超链接">使用超链接</h3>
@@ -708,27 +784,39 @@ image::images/call_graph3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>在  <code>Quote_1</code>  项目的  <code>cpu.cc</code>  文件中,按住 Ctrl 键的同时将鼠标悬停在第 37 行上。此时会突出显示  <code>ComputeSupportMetric</code>  函数,并且还会显示一个包含该函数相关信息的标注。
-image::images/hyperlinks1.png[]</p>
+<p>在  <code>Quote_1</code>  项目的  <code>cpu.cc</code>  文件中,按住 Ctrl 键的同时将鼠标悬停在第 37 行上。此时会突出显示  <code>ComputeSupportMetric</code>  函数,并且还会显示一个包含该函数相关信息的标注。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks1.png" alt="hyperlinks1">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>单击超链接,编辑器会跳转至函数定义。
-image::images/hyperlinks2.png[]</p>
+<p>单击超链接,编辑器会跳转至函数定义。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks2.png" alt="hyperlinks2">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>在按住 Ctrl 键的同时,将鼠标悬停在其定义上,然后单击超链接。编辑器会跳转至  <code>cpu.h</code>  头文件中的函数声明。
-image::images/hyperlinks3.png[]</p>
+<p>在按住 Ctrl 键的同时,将鼠标悬停在其定义上,然后单击超链接。编辑器会跳转至  <code>cpu.h</code>  头文件中的函数声明。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/hyperlinks3.png" alt="hyperlinks3">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -739,11 +827,15 @@ image::images/hyperlinks3.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="5">
 <li>
-<p>将鼠标光标悬停在左旁注中的绿色圆圈上,此时会显示标注,指示此方法覆盖了其他方法。
-image::images/overide_annotation.png[]</p>
+<p>将鼠标光标悬停在左旁注中的绿色圆圈上,此时会显示标注,指示此方法覆盖了其他方法。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overide_annotation.png" alt="overide annotation">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="6">
 <li>
@@ -754,11 +846,15 @@ image::images/overide_annotation.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>单击灰色圆圈,编辑器会显示覆盖此方法的方法列表。
-image::images/overridden_by_list.png[]</p>
+<p>单击灰色圆圈,编辑器会显示覆盖此方法的方法列表。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/overridden_by_list.png" alt="overridden by list">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -781,11 +877,15 @@ image::images/overridden_by_list.png[]</p>
 <p>右单击文件中的  <code>#include "module.h"</code>  行,选择 "Navigate"(导航)&gt; "View Includes Hierarchy"(查看包含分层结构)。</p>
 </li>
 <li>
-<p>默认情况下,"Hierarchy"(分层结构)窗口仅显示直接包含该头文件中的文件的普通列表。单击窗口底部最右边的按钮,把显示转化为树视图。单击右侧第二个按钮,将显示转换为包含或被包含的所有文件。展开树视图的节点,查看包含头文件的所有源文件。
-image::images/includes_hierarchy.png[]</p>
+<p>默认情况下,"Hierarchy"(分层结构)窗口仅显示直接包含该头文件中的文件的普通列表。单击窗口底部最右边的按钮,把显示转化为树视图。单击右侧第二个按钮,将显示转换为包含或被包含的所有文件。展开树视图的节点,查看包含头文件的所有源文件。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/includes_hierarchy.png" alt="includes hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_使用类型分层结构">使用类型分层结构</h3>
@@ -801,11 +901,15 @@ image::images/includes_hierarchy.png[]</p>
 <p>右键单击  <code>Module</code>  类声明,选择 "Navigate"(导航)&gt; "View Type Hierarchy"(查看类型分层结构)。</p>
 </li>
 <li>
-<p>"Hierarchy"(分层结构)窗口显示 Module 类的所有子类型。
-image::images/type_hierarchy.png[]</p>
+<p>"Hierarchy"(分层结构)窗口显示 Module 类的所有子类型。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/type_hierarchy.png" alt="type hierarchy">
+</div>
+</div>
 </div>
 <div class="sect2">
 <h3 id="_a_id_后续步骤_a"><a id="后续步骤"></a></h3>
diff --git a/content/kb/docs/cnd/quickstart.html b/content/kb/docs/cnd/quickstart.html
index 0d13d64..9063573 100644
--- a/content/kb/docs/cnd/quickstart.html
+++ b/content/kb/docs/cnd/quickstart.html
@@ -208,11 +208,15 @@ for information about downloading and installing the required software.</p>
 <p>In the wizard, select the C/C++ category.</p>
 </li>
 <li>
-<p>The wizard gives you a choice of several types of new projects. Select C/C++ Application and click Next.
-image::images/creating_application.png[]</p>
+<p>The wizard gives you a choice of several types of new projects. Select C/C++ Application and click Next.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/creating_application.png" alt="creating application">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -242,19 +246,27 @@ image::images/creating_application.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Select the Files tab. This window shows the physical view of your project. It displays files and folders as they are stored on disk.
-image::images/files_tab.png[]</p>
+<p>Select the Files tab. This window shows the physical view of your project. It displays files and folders as they are stored on disk.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/files_tab.png" alt="files tab">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Select the Projects tab. This window shows the logical view of your project.
-image::images/projects_tab.png[]</p>
+<p>Select the Projects tab. This window shows the logical view of your project.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/projects_tab.png" alt="projects tab">
+</div>
+</div>
 <div class="paragraph">
 <p>Most commands that you run on a project are available in the Projects tab, not the Files tab.</p>
 </div>
@@ -358,11 +370,15 @@ image::images/projects_tab.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>Right-click the project node of the  <code>CppApplication_1</code>  project and choose Properties.
-image::images/project_properties.png[]</p>
+<p>Right-click the project node of the  <code>CppApplication_1</code>  project and choose Properties.</p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/project_properties.png" alt="project properties">
+</div>
+</div>
 <div class="paragraph">
 <p>You can modify the build tool defaults, compiler settings, and other configuration settings in the Project Properties dialog box by selecting a node in the left panel and modifying the properties in the right panel. Select some of the nodes and property values and notice the properties you can set. When you set General properties, you are setting them in all configurations of the project. When you set Build, Run, or Debug properties, you are setting properties in the currently selecte [...]
 </div>
@@ -506,11 +522,15 @@ image::images/project_properties.png[]</p>
 <p>In the Project Properties dialog box, select the Run node.</p>
 </li>
 <li>
-<p>In the Run Command text field, type 1111 2222 3333. Click OK.
-image::images/setting_arguments.png[]</p>
+<p>In the Run Command text field, type 1111 2222 3333. Click OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/setting_arguments.png" alt="setting arguments">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
diff --git a/content/kb/docs/cnd/quickstart_ja.html b/content/kb/docs/cnd/quickstart_ja.html
index 4c1d4b1..7ee761d 100644
--- a/content/kb/docs/cnd/quickstart_ja.html
+++ b/content/kb/docs/cnd/quickstart_ja.html
@@ -207,11 +207,15 @@
 <p>ウィザードで「C/C++」カテゴリを選択します。</p>
 </li>
 <li>
-<p>このウィザードでは、新規プロジェクトのタイプをいくつかの中から選択できます。「C/C++アプリケーション」を選択して「次」をクリックします。
-image::images/creating_application.png[]</p>
+<p>このウィザードでは、新規プロジェクトのタイプをいくつかの中から選択できます。「C/C++アプリケーション」を選択して「次」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/creating_application.png" alt="creating application">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -241,19 +245,27 @@ image::images/creating_application.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「ファイル」タブを選択します。次のウィンドウはプロジェクトの物理ビューを示しています。このビューには、ディスクに格納されているとおりにファイルおよびフォルダが表示されます。
-image::images/files_tab.png[]</p>
+<p>「ファイル」タブを選択します。次のウィンドウはプロジェクトの物理ビューを示しています。このビューには、ディスクに格納されているとおりにファイルおよびフォルダが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/files_tab.png" alt="files tab">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>「プロジェクト」タブを選択します。次のウィンドウはプロジェクトの論理ビューを示しています。
-image::images/projects_tab.png[]</p>
+<p>「プロジェクト」タブを選択します。次のウィンドウはプロジェクトの論理ビューを示しています。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/projects_tab.png" alt="projects tab">
+</div>
+</div>
 <div class="paragraph">
 <p>プロジェクトで実行するコマンドのほとんどは、「ファイル」タブではなく「プロジェクト」タブで使用できます。</p>
 </div>
@@ -357,11 +369,15 @@ image::images/projects_tab.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>「 <code>CppApplication_1</code> 」プロジェクトのプロジェクト・ノードを右クリックし、「プロパティ」を選択します。
-image::images/project_properties.png[]</p>
+<p>「 <code>CppApplication_1</code> 」プロジェクトのプロジェクト・ノードを右クリックし、「プロパティ」を選択します。</p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/project_properties.png" alt="project properties">
+</div>
+</div>
 <div class="paragraph">
 <p>「プロジェクト・プロパティ」ダイアログ・ボックスの左側パネルでノードを選択し、右側のパネルでプロパティを変更することによって、ビルド・ツールのデフォルト、コンパイラ設定、その他の構成設定などを変更できます。ノードやプロパティ値を選択すると、設定可能なプロパティがわかります。「一般」プロパティを設定すると、その設定はプロジェクトのすべての構成に対して行われます。「ビルド」、「実行」または「デバッグ」プロパティを設定すると、その設定は現在選択されている構成に対して行われます。</p>
 </div>
@@ -507,11 +523,15 @@ image::images/project_properties.png[]</p>
 <p>「プロジェクト・プロパティ」ダイアログ・ボックスで「実行」ノードを選択します。</p>
 </li>
 <li>
-<p>「コマンドの実行」テキスト・フィールドに「1111 2222 3333」を入力します。「OK」をクリックします。
-image::images/setting_arguments.png[]</p>
+<p>「コマンドの実行」テキスト・フィールドに「1111 2222 3333」を入力します。「OK」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/setting_arguments.png" alt="setting arguments">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
diff --git a/content/kb/docs/cnd/quickstart_pt_BR.html b/content/kb/docs/cnd/quickstart_pt_BR.html
index 8cbb93e..5079654 100644
--- a/content/kb/docs/cnd/quickstart_pt_BR.html
+++ b/content/kb/docs/cnd/quickstart_pt_BR.html
@@ -208,11 +208,15 @@ para obter informações sobre o download e a instalação do software necessár
 <p>No assistente, selecione a categoria C/C++.</p>
 </li>
 <li>
-<p>O assistente fornece a escolha de diversos tipos de novos projetos. Selecione Aplicação C/C++ e clique em Próximo.
-image::images/creating_application.png[]</p>
+<p>O assistente fornece a escolha de diversos tipos de novos projetos. Selecione Aplicação C/C++ e clique em Próximo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/creating_application.png" alt="creating application">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -242,19 +246,27 @@ image::images/creating_application.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Selecione a guia Arquivos. Esta janela exibe a view física do projeto. Isso exibe os arquivos e as pastas conforme eles estão armazenados no disco.
-image::images/files_tab.png[]</p>
+<p>Selecione a guia Arquivos. Esta janela exibe a view física do projeto. Isso exibe os arquivos e as pastas conforme eles estão armazenados no disco.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/files_tab.png" alt="files tab">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Selecione a guia Projetos. Esta janela exibe a view lógica do projeto.
-image::images/projects_tab.png[]</p>
+<p>Selecione a guia Projetos. Esta janela exibe a view lógica do projeto.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/projects_tab.png" alt="projects tab">
+</div>
+</div>
 <div class="paragraph">
 <p>A maioria dos comandos que são executados em um projeto estão disponíveis na guia de Projetos, não na guia Arquivos.</p>
 </div>
@@ -358,11 +370,15 @@ image::images/projects_tab.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>Clique com o botão direito do mouse no nó do projeto <code>CppApplication_1</code>  e escolha Propriedades.
-image::images/project_properties.png[]</p>
+<p>Clique com o botão direito do mouse no nó do projeto <code>CppApplication_1</code>  e escolha Propriedades.</p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/project_properties.png" alt="project properties">
+</div>
+</div>
 <div class="paragraph">
 <p>É possível modificar os defaults da ferramenta de construção, as definições do compilador e outras definições de configuração na caixa de diálogo Propriedades do Projeto, selecionando um nó no painel esquerdo e modificando as propriedades no painel direito. Selecione alguns dos nós e valores de propriedade e observe as propriedades que você pode definir. Ao definir as propriedades da guia Gerais, você está definindo as propriedades em todas as configurações do projeto. Ao definir as p [...]
 </div>
@@ -506,11 +522,15 @@ image::images/project_properties.png[]</p>
 <p>Na caixa de diálogo Propriedades do projeto, selecione o nó Executar.</p>
 </li>
 <li>
-<p>No campo de texto Executar Comando, digite 1111 2222 3333. Clique em OK.
-image::images/setting_arguments.png[]</p>
+<p>No campo de texto Executar Comando, digite 1111 2222 3333. Clique em OK.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/setting_arguments.png" alt="setting arguments">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
diff --git a/content/kb/docs/cnd/quickstart_ru.html b/content/kb/docs/cnd/quickstart_ru.html
index a10d747..0e0369e 100644
--- a/content/kb/docs/cnd/quickstart_ru.html
+++ b/content/kb/docs/cnd/quickstart_ru.html
@@ -208,11 +208,15 @@
 <p>Выберите категорию "C/C++" в мастере.</p>
 </li>
 <li>
-<p>Мастер предлагает возможность выбора типа нового проекта. Выберите параметр "Приложение на C/C++" и нажмите кнопку "Далее".
-image::images/creating_application.png[]</p>
+<p>Мастер предлагает возможность выбора типа нового проекта. Выберите параметр "Приложение на C/C++" и нажмите кнопку "Далее".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/creating_application.png" alt="creating application">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -242,19 +246,27 @@ image::images/creating_application.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Перейдите на вкладку "Файлы". В этом окне содержится физическое представление проекта. В нем отображается расположение файлов и папок на диске.
-image::images/files_tab.png[]</p>
+<p>Перейдите на вкладку "Файлы". В этом окне содержится физическое представление проекта. В нем отображается расположение файлов и папок на диске.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/files_tab.png" alt="files tab">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Перейдите на вкладку "Проекты". В этом окне содержится логическое представление проекта.
-image::images/projects_tab.png[]</p>
+<p>Перейдите на вкладку "Проекты". В этом окне содержится логическое представление проекта.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/projects_tab.png" alt="projects tab">
+</div>
+</div>
 <div class="paragraph">
 <p>Большинство команд, выполняемых в проекте, доступны на вкладке "Проекты", а не на вкладке "Файлы".</p>
 </div>
@@ -358,11 +370,15 @@ image::images/projects_tab.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>Правой кнопкой мыши щелкните узел проекта  <code>CppApplication_1</code>  и выберите команду "Свойства".
-image::images/project_properties.png[]</p>
+<p>Правой кнопкой мыши щелкните узел проекта  <code>CppApplication_1</code>  и выберите команду "Свойства".</p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/project_properties.png" alt="project properties">
+</div>
+</div>
 <div class="paragraph">
 <p>Разработчик может изменять параметры средства сборки по умолчанию, параметры компилятора и другие параметры настройки в диалоговом окне "Свойства проекта". Для этого следует выбрать узел на левой панели и изменить свойства на правой панели. Выберите несколько узлов и значений свойств и обратите внимание на то, какие свойства можно установить. При установке свойств категории "Общие" они устанавливаются для всех настроек проекта. Свойства 'Сборка', 'Запуск' или 'Отладка' устанавливаются [...]
 </div>
@@ -506,11 +522,15 @@ image::images/project_properties.png[]</p>
 <p>В диалоговом окне "Свойства проекта" выберите узел "Запуск".</p>
 </li>
 <li>
-<p>В текстовом поле "Выполнить команду" введите текст "1111 2222 3333". Нажмите кнопку "ОК".
-image::images/setting_arguments.png[]</p>
+<p>В текстовом поле "Выполнить команду" введите текст "1111 2222 3333". Нажмите кнопку "ОК".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/setting_arguments.png" alt="setting arguments">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
diff --git a/content/kb/docs/cnd/quickstart_zh_CN.html b/content/kb/docs/cnd/quickstart_zh_CN.html
index 1f8567a..2a23bda 100644
--- a/content/kb/docs/cnd/quickstart_zh_CN.html
+++ b/content/kb/docs/cnd/quickstart_zh_CN.html
@@ -208,11 +208,15 @@
 <p>在向导中,选择 "C/C++" 类别。</p>
 </li>
 <li>
-<p>该向导提供了多种类型的新项目供您选择。选择 "C/C Application"(C/C 应用程序),然后单击 "Next"(下一步)。
-image::images/creating_application.png[]</p>
+<p>该向导提供了多种类型的新项目供您选择。选择 "C/C Application"(C/C 应用程序),然后单击 "Next"(下一步)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/creating_application.png" alt="creating application">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -242,19 +246,27 @@ image::images/creating_application.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>选择 "Files"(文件)标签。该窗口显示项目的物理视图。它按原样体现磁盘上存储的文件和文件夹。
-image::images/files_tab.png[]</p>
+<p>选择 "Files"(文件)标签。该窗口显示项目的物理视图。它按原样体现磁盘上存储的文件和文件夹。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/files_tab.png" alt="files tab">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>选择 "Projects"(项目)标签。该窗口显示项目的逻辑视图。
-image::images/projects_tab.png[]</p>
+<p>选择 "Projects"(项目)标签。该窗口显示项目的逻辑视图。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/projects_tab.png" alt="projects tab">
+</div>
+</div>
 <div class="paragraph">
 <p>对项目运行的多数命令包含在 "Projects"(项目)标签中,而不是包含在 "Files"(文件)标签中。</p>
 </div>
@@ -362,11 +374,15 @@ image::images/projects_tab.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>右键单击  <code>CppApplication_1</code>  项目的节点,然后选择 "Properties"(属性)。
-image::images/project_properties.png[]</p>
+<p>右键单击  <code>CppApplication_1</code>  项目的节点,然后选择 "Properties"(属性)。</p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/project_properties.png" alt="project properties">
+</div>
+</div>
 <div class="paragraph">
 <p>在 "Project Properties"(项目属性)对话框中,您可以修改编译器的设置和其他配置设置,方法是选择左侧面板中的某个节点,然后在右侧面板中修改相应的属性。请选择一些节点和属性值,并观察可以设置的属性。在设置 "General"(常规)属性时,将在项目的所有配置中对这些属性进行设置。设置 "Build"(构建)、"Run"(运行)或 "Debug"(调试)属性时,将在当前选定的配置中设置属性。</p>
 </div>
@@ -510,11 +526,15 @@ image::images/project_properties.png[]</p>
 <p>在 "Project Properties"(项目属性)对话框中,选择 "Run"(运行)节点。</p>
 </li>
 <li>
-<p>在 "Run Command"(运行命令)文本字段中,键入 1111 2222 3333。单击 "OK"(确定)。
-image::images/setting_arguments.png[]</p>
+<p>在 "Run Command"(运行命令)文本字段中,键入 1111 2222 3333。单击 "OK"(确定)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/setting_arguments.png" alt="setting arguments">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
diff --git a/content/kb/docs/cnd/remote-modes.html b/content/kb/docs/cnd/remote-modes.html
index 9fe68f7..d8b78ed 100644
--- a/content/kb/docs/cnd/remote-modes.html
+++ b/content/kb/docs/cnd/remote-modes.html
@@ -426,28 +426,28 @@
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/connected24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/connected24.gif" alt="connected24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Connection status. Click the icon to connect to the server selected in the list next to the icon. If you are already connected, you can click this icon to disconnect from the server.</p>
 <p class="tableblock">The icon indicates connection status by turning green when connected and red when not connected.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/newProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/newProject24.gif" alt="newProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Create remote project. Click the icon to create a new project on the currently connected host.</p>
 <p class="tableblock">By default, the project is created in your <code>~/NetBeansProjects</code> directory on the remote host.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openProject24.gif" alt="openProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Open remote project. Click the icon to open an existing project on the currently connected host.</p>
 <p class="tableblock">You can browse to the project on the remote file system.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openFile24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openFile24.gif" alt="openFile24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Open remote file. Click the icon to open a file on the currently connected host.</p>
diff --git a/content/kb/docs/cnd/remote-modes_ja.html b/content/kb/docs/cnd/remote-modes_ja.html
index 7f805cb..8149bfc 100644
--- a/content/kb/docs/cnd/remote-modes_ja.html
+++ b/content/kb/docs/cnd/remote-modes_ja.html
@@ -426,28 +426,28 @@
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/connected24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/connected24.gif" alt="connected24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">接続ステータス。アイコンをクリックして、アイコンの横のリストで選択したサーバーに接続します。すでに接続している場合は、このアイコンをクリックしてサーバーから切断できます。</p>
 <p class="tableblock">アイコンは、接続されている場合に緑に、接続されていない場合に赤に変わることで接続ステータスを示します。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/newProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/newProject24.gif" alt="newProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">リモート・プロジェクトを作成します。アイコンをクリックして、現在接続しているホストに新規プロジェクトを作成します。</p>
 <p class="tableblock">デフォルトでは、プロジェクトはリモート・ホストの`~/NetBeansProjects`ディレクトリに作成されます。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openProject24.gif" alt="openProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">リモート・プロジェクトを開きます。アイコンをクリックして、現在接続しているホストの既存のプロジェクトを開きます。</p>
 <p class="tableblock">リモート・ファイル・システムのプロジェクトを参照できます。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openFile24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openFile24.gif" alt="openFile24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">リモート・ファイルを開きます。アイコンをクリックして、現在接続しているホストのファイルを開きます。</p>
diff --git a/content/kb/docs/cnd/remote-modes_pt_BR.html b/content/kb/docs/cnd/remote-modes_pt_BR.html
index f5adaee..bf2f93e 100644
--- a/content/kb/docs/cnd/remote-modes_pt_BR.html
+++ b/content/kb/docs/cnd/remote-modes_pt_BR.html
@@ -426,28 +426,28 @@
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/connected24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/connected24.gif" alt="connected24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Status da conexão. Clique no ícone para conectar o servidor selecionado na lista ao lado do ícone. Se você já estiver conectado, poderá clicar nesse ícone para se desconectar do servidor.</p>
 <p class="tableblock">O ícone indica o status da conexão, ficando verde quando conectado e vermelho quando não conectado.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/newProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/newProject24.gif" alt="newProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Criar projeto remoto. Clique no ícone para criar um novo projeto no host conectado no momento.</p>
 <p class="tableblock">Por default, o projeto é criado no seu diretório <code>~/NetBeansProjects</code> no host remoto.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openProject24.gif" alt="openProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Abrir projeto remoto. Clique no ícone para abrir projeto existente no host conectado no momento.</p>
 <p class="tableblock">Você pode navegar até o projeto no sistema de arquivos remoto.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openFile24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openFile24.gif" alt="openFile24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Abrir arquivo remoto. Clique no ícone para abrir um arquivo no host conectado no momento.</p>
diff --git a/content/kb/docs/cnd/remote-modes_ru.html b/content/kb/docs/cnd/remote-modes_ru.html
index 836d4a4..823b962 100644
--- a/content/kb/docs/cnd/remote-modes_ru.html
+++ b/content/kb/docs/cnd/remote-modes_ru.html
@@ -426,28 +426,28 @@
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/connected24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/connected24.gif" alt="connected24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Состояние подключения. Нажмите на значок, чтобы подключиться к серверу, выбранному в списке рядом со значком. Если вы уже подключены, можно нажать этот значок, чтобы отключиться от сервера.</p>
 <p class="tableblock">Значок, показывающий состояние соединения, меняет цвет на зеленый при установке соединения и на красный при разрыве соединения.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/newProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/newProject24.gif" alt="newProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Создание удаленного проекта. Щелкните значок, чтобы создать новый проект на подключенном в данный момент узле.</p>
 <p class="tableblock">По умолчанию проект создается в каталоге <code>~/NetBeansProjects</code> на удаленном узле.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openProject24.gif" alt="openProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Открыть удаленный проект. Щелкните значок, чтобы открыть существующий проект на подключенном в данный момент узле.</p>
 <p class="tableblock">Можно просмотреть проект в удаленной файловой системе.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openFile24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openFile24.gif" alt="openFile24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Открыть удаленный файл. Щелкните значок, чтобы открыть файл на текущем подключенном узле.</p>
diff --git a/content/kb/docs/cnd/remote-modes_zh_CN.html b/content/kb/docs/cnd/remote-modes_zh_CN.html
index 144c6e1..556b42c 100644
--- a/content/kb/docs/cnd/remote-modes_zh_CN.html
+++ b/content/kb/docs/cnd/remote-modes_zh_CN.html
@@ -426,28 +426,28 @@
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/connected24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/connected24.gif" alt="connected24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">连接状态。单击该图标可连接到在该图标旁的列表中选定的服务器。如果您已连接,则可以单击该图标来断开与服务器的连接。</p>
 <p class="tableblock">该图标通过在连接时变为绿色、在未连接时变为红色来指示连接状态。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/newProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/newProject24.gif" alt="newProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">创建远程项目。单击该图标可在当前连接的主机上创建新项目。</p>
 <p class="tableblock">默认情况下,在远程主机上的 <code>~/NetBeansProjects</code> 目录中创建项目。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openProject24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openProject24.gif" alt="openProject24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">打开远程项目。单击该图标可在当前连接的主机上打开现有项目。</p>
 <p class="tableblock">您可以浏览到远程文件系统上的项目。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/openFile24.gif[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/openFile24.gif" alt="openFile24"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">打开远程文件。单击该图标可在当前连接的主机上打开文件。</p>
diff --git a/content/kb/docs/cnd/remotedev-tutorial.html b/content/kb/docs/cnd/remotedev-tutorial.html
index 557663c..f4d38b3 100644
--- a/content/kb/docs/cnd/remotedev-tutorial.html
+++ b/content/kb/docs/cnd/remotedev-tutorial.html
@@ -407,23 +407,29 @@ nfs://_IPaddress/path/to/share_`</code></pre>
 <p>Open the Services window by choosing Window &gt; Services.</p>
 </li>
 <li>
-<p>Right-click the C/C++ Build Hosts node and select Add New Host.
-image::images/remotedev-add-host.png[]In the New Remote Host Setup dialog box, the IDE discovers your local network&#8217;s hosts. The host names are added to a table in the dialog box, and a green indicator tells you if they are running the SSH server.</p>
+<p>Right-click the C/C++ Build Hosts node and select Add New Host.</p>
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>image::images/remotedev-add-host.png[]In the New Remote Host Setup dialog box, the IDE discovers your local network&#8217;s hosts. The host names are added to a table in the dialog box, and a green indicator tells you if they are running the SSH server.</p>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Double-click the name of the server you want, or type the server name directly in the Hostname field. Click Next.
-image::images/remotedev-setup-host.png[]</p>
+<p>Double-click the name of the server you want, or type the server name directly in the Hostname field. Click Next.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host.png" alt="remotedev setup host">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>On the Setup Host screen, type the username that you use to log in to the remote host, and select an authentication method. For this tutorial, select Password and click Next.image::images/remotedev-setup-host-auth.png[]</p>
+<p>On the Setup Host screen, type the username that you use to log in to the remote host, and select an authentication method. For this tutorial, select Password and click Next.<span class="image"><img src="images/remotedev-setup-host-auth.png" alt="remotedev setup host auth"></span></p>
 </li>
 </ol>
 </div>
@@ -450,11 +456,15 @@ image::images/remotedev-setup-host.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>When the host is successfully configured, a summary page shows information about the remote host: the platform, hostname, user name to log in, and the tool collections that were found.
-image::images/remotedev-setup-host-summary.png[]</p>
+<p>When the host is successfully configured, a summary page shows information about the remote host: the platform, hostname, user name to log in, and the tool collections that were found.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host-summary.png" alt="remotedev setup host summary">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -492,11 +502,15 @@ image::images/remotedev-setup-host-summary.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
-<p>In the Services window, the new remote host is shown under the C/C++ Build Hosts node. Expand the node for the new host and you should have one or more tool collections in the Tool Collections list.
-image::images/remotedev-remote-toolchain.png[]</p>
+<p>In the Services window, the new remote host is shown under the C/C++ Build Hosts node. Expand the node for the new host and you should have one or more tool collections in the Tool Collections list.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-remote-toolchain.png" alt="remotedev remote toolchain">
+</div>
+</div>
 <div class="sect2">
 <h3 id="_if_no_tool_collection_is_listed">If no tool collection is listed</h3>
 <div class="paragraph">
@@ -546,11 +560,15 @@ image::images/remotedev-remote-toolchain.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Select the new remote host for the Build Host. The Tool Collection list is updated to show the available tools on the remote host.
-image::images/remotedev-new-project.png[]</p>
+<p>Select the new remote host for the Build Host. The Tool Collection list is updated to show the available tools on the remote host.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-new-project.png" alt="remotedev new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +625,15 @@ image::images/remotedev-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>On the left margin of the Output window, click the terminal icon.
-image::images/remotedev-terminal-icon.png[]</p>
+<p>On the left margin of the Output window, click the terminal icon.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-terminal-icon.png" alt="remotedev terminal icon">
+</div>
+</div>
 <div class="paragraph">
 <p>The IDE opens a Terminal tab in the working directory of the current project, whether it is local or remote. If the project is using a remote build host and you are already connected through the IDE, you do not need to login again.</p>
 </div>
@@ -634,9 +656,17 @@ image::images/remotedev-terminal-icon.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>You can switch the build host for a project by right-clicking the project node and selecting Set Build Host.
-image::images/remotedev-set-remote-host-menu.png[]</p>
+<p>You can switch the build host for a project by right-clicking the project node and selecting Set Build Host.</p>
 </li>
+</ul>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-set-remote-host-menu.png" alt="remotedev set remote host menu">
+</div>
+</div>
+<div class="ulist">
+<ul>
 <li>
 <p>You can change the properties of a remote build host after initial setup, by right-clicking the host in the Services window and selecting Properties.</p>
 </li>
diff --git a/content/kb/docs/cnd/remotedev-tutorial_ja.html b/content/kb/docs/cnd/remotedev-tutorial_ja.html
index 7b096e5..addbe20 100644
--- a/content/kb/docs/cnd/remotedev-tutorial_ja.html
+++ b/content/kb/docs/cnd/remotedev-tutorial_ja.html
@@ -406,23 +406,29 @@ nfs://_IPaddress/path/to/share_`</code></pre>
 <p>「ウィンドウ」&gt;「サービス」と選択して、「サービス」ウィンドウを開きます。</p>
 </li>
 <li>
-<p>「C/C++ビルド・ホスト」ノードを右クリックして、「新規ホストの追加」を選択します。
-image::images/remotedev-add-host.png[]「新規リモート・ホストのセットアップ」ダイアログ・ボックスで、IDEがローカル・ネットワークのホストを検出します。ホスト名はこのダイアログ・ボックスの表に追加され、緑色のインジケータはSSHサーバーを実行しているかどうかを示します。</p>
+<p>「C/C++ビルド・ホスト」ノードを右クリックして、「新規ホストの追加」を選択します。</p>
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>image::images/remotedev-add-host.png[]「新規リモート・ホストのセットアップ」ダイアログ・ボックスで、IDEがローカル・ネットワークのホストを検出します。ホスト名はこのダイアログ・ボックスの表に追加され、緑色のインジケータはSSHサーバーを実行しているかどうかを示します。</p>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>使用するサーバー名をダブルクリックするか、「ホスト名」フィールドにサーバー名を直接入力します。「次」をクリックします。
-image::images/remotedev-setup-host.png[]</p>
+<p>使用するサーバー名をダブルクリックするか、「ホスト名」フィールドにサーバー名を直接入力します。「次」をクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host.png" alt="remotedev setup host">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>「ホストのセットアップ」画面に、リモート・ホストへのログインに使用するユーザー名を入力し、認証方法を選択します。このチュートリアルでは、「パスワード」を選択して「次」をクリックします。image::images/remotedev-setup-host-auth.png[]</p>
+<p>「ホストのセットアップ」画面に、リモート・ホストへのログインに使用するユーザー名を入力し、認証方法を選択します。このチュートリアルでは、「パスワード」を選択して「次」をクリックします。<span class="image"><img src="images/remotedev-setup-host-auth.png" alt="remotedev setup host auth"></span></p>
 </li>
 </ol>
 </div>
@@ -449,11 +455,15 @@ image::images/remotedev-setup-host.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>ホストが正常に構成された場合、サマリー・ページに、プラットフォーム、ホスト名、ログインに使用されるユーザー名、および見つかったツール・コレクションなどのリモート・ホストに関する情報が示されます。
-image::images/remotedev-setup-host-summary.png[]</p>
+<p>ホストが正常に構成された場合、サマリー・ページに、プラットフォーム、ホスト名、ログインに使用されるユーザー名、および見つかったツール・コレクションなどのリモート・ホストに関する情報が示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host-summary.png" alt="remotedev setup host summary">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -491,11 +501,15 @@ image::images/remotedev-setup-host-summary.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
-<p>「サービス」ウィンドウで、「C/C++ビルド・ホスト」ノードの下に新しいリモート・ホストが表示されています。新しいホストのノードを展開すると、「ツール・コレクション」の一覧に1つまたは複数のツール・コレクションが表示されます。
-image::images/remotedev-remote-toolchain.png[]</p>
+<p>「サービス」ウィンドウで、「C/C++ビルド・ホスト」ノードの下に新しいリモート・ホストが表示されています。新しいホストのノードを展開すると、「ツール・コレクション」の一覧に1つまたは複数のツール・コレクションが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-remote-toolchain.png" alt="remotedev remote toolchain">
+</div>
+</div>
 <div class="sect2">
 <h3 id="_ツール_コレクションが表示されない場合">ツール・コレクションが表示されない場合</h3>
 <div class="paragraph">
@@ -545,11 +559,15 @@ image::images/remotedev-remote-toolchain.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>「ビルド・ホスト」に、新しいリモート・ホストを選択します。「ツール・コレクション」の一覧が更新され、リモート・ホストで使用できるツールが表示されます。
-image::images/remotedev-new-project.png[]</p>
+<p>「ビルド・ホスト」に、新しいリモート・ホストを選択します。「ツール・コレクション」の一覧が更新され、リモート・ホストで使用できるツールが表示されます。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-new-project.png" alt="remotedev new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -606,11 +624,15 @@ image::images/remotedev-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「出力」ウィンドウの左マージンでターミナル・アイコンをクリックします。
-image::images/remotedev-terminal-icon.png[]</p>
+<p>「出力」ウィンドウの左マージンでターミナル・アイコンをクリックします。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-terminal-icon.png" alt="remotedev terminal icon">
+</div>
+</div>
 <div class="paragraph">
 <p>IDEでは、ローカルまたはリモートのどちらの場合でも、現行プロジェクトの作業ディレクトリで「ターミナル」タブが開かれます。プロジェクトがリモート・ビルド・ホストを使用中で、IDEから接続済の場合は、再度ログインする必要はありません。</p>
 </div>
@@ -633,9 +655,17 @@ image::images/remotedev-terminal-icon.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>プロジェクト・ノードを右クリックして「ビルド・ホストを設定」を選択すると、プロジェクトのビルド・ホストを切り替えられます。
-image::images/remotedev-set-remote-host-menu.png[]</p>
+<p>プロジェクト・ノードを右クリックして「ビルド・ホストを設定」を選択すると、プロジェクトのビルド・ホストを切り替えられます。</p>
 </li>
+</ul>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-set-remote-host-menu.png" alt="remotedev set remote host menu">
+</div>
+</div>
+<div class="ulist">
+<ul>
 <li>
 <p>「サービス」ウィンドウでホストを右クリックして「プロパティ」を選択すると、初期設定後にリモート・ビルド・ホストのプロパティを変更できます。</p>
 </li>
diff --git a/content/kb/docs/cnd/remotedev-tutorial_pt_BR.html b/content/kb/docs/cnd/remotedev-tutorial_pt_BR.html
index 7813143..65ec017 100644
--- a/content/kb/docs/cnd/remotedev-tutorial_pt_BR.html
+++ b/content/kb/docs/cnd/remotedev-tutorial_pt_BR.html
@@ -407,23 +407,29 @@ nfs://_IPaddress/path/to/share_`</code></pre>
 <p>Abra a janela Serviços selecionando Janela &gt; Serviços.</p>
 </li>
 <li>
-<p>Clique com o botão direito no nó Hosts de Compilação C/C++ e selecione Adicionar Novo Host.
-image::images/remotedev-add-host.png[]Na caixa de diálogo Nova Configuração de Host Remoto, o IDE descobre seus hosts de rede local. Os nomes de host são adicionados a uma tabela na caixa de diálogo e um indicador verde informa se estiverem em execução no servidor SSH.</p>
+<p>Clique com o botão direito no nó Hosts de Compilação C/C++ e selecione Adicionar Novo Host.</p>
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>image::images/remotedev-add-host.png[]Na caixa de diálogo Nova Configuração de Host Remoto, o IDE descobre seus hosts de rede local. Os nomes de host são adicionados a uma tabela na caixa de diálogo e um indicador verde informa se estiverem em execução no servidor SSH.</p>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Clique duas vezes no nome do servidor desejado, ou digite o nome do servidor diretamente no campo Nome do host. Clique em Próximo.
-image::images/remotedev-setup-host.png[]</p>
+<p>Clique duas vezes no nome do servidor desejado, ou digite o nome do servidor diretamente no campo Nome do host. Clique em Próximo.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host.png" alt="remotedev setup host">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Na tela Configurar Host, digite o nome do usuário que você utiliza para efetuar o log-in no host remoto, e selecione um método de autenticação. Para este tutorial, selecione Senha e clique em Próximo.image::images/remotedev-setup-host-auth.png[]</p>
+<p>Na tela Configurar Host, digite o nome do usuário que você utiliza para efetuar o log-in no host remoto, e selecione um método de autenticação. Para este tutorial, selecione Senha e clique em Próximo.<span class="image"><img src="images/remotedev-setup-host-auth.png" alt="remotedev setup host auth"></span></p>
 </li>
 </ol>
 </div>
@@ -450,11 +456,15 @@ image::images/remotedev-setup-host.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>Quando o host é configurado com êxito, uma página de resumo exibe informações sobre o host remoto: a plataforma, o nome da máquina, o nome de usuário utilizado para log-in e as coleções de ferramentas encontradas.
-image::images/remotedev-setup-host-summary.png[]</p>
+<p>Quando o host é configurado com êxito, uma página de resumo exibe informações sobre o host remoto: a plataforma, o nome da máquina, o nome de usuário utilizado para log-in e as coleções de ferramentas encontradas.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host-summary.png" alt="remotedev setup host summary">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -492,11 +502,15 @@ image::images/remotedev-setup-host-summary.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
-<p>Na janela Serviços, o novo host remoto é exibido sob o nó Hosts de Compilação C/C++. Expanda o nó para o novo host e deverá obter uma ou mais coleções de ferramentas na lista Coleções de Ferramentas.
-image::images/remotedev-remote-toolchain.png[]</p>
+<p>Na janela Serviços, o novo host remoto é exibido sob o nó Hosts de Compilação C/C++. Expanda o nó para o novo host e deverá obter uma ou mais coleções de ferramentas na lista Coleções de Ferramentas.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-remote-toolchain.png" alt="remotedev remote toolchain">
+</div>
+</div>
 <div class="sect2">
 <h3 id="_caso_não_esteja_listada_nenhuma_coleção_de_ferramentas">Caso não esteja listada nenhuma coleção de ferramentas</h3>
 <div class="paragraph">
@@ -546,11 +560,15 @@ image::images/remotedev-remote-toolchain.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Selecione o novo host remoto para o Host de Compilação. A lista Coleção de Ferramentas é atualizada para mostrar as ferramentas disponíveis no host remoto.
-image::images/remotedev-new-project.png[]</p>
+<p>Selecione o novo host remoto para o Host de Compilação. A lista Coleção de Ferramentas é atualizada para mostrar as ferramentas disponíveis no host remoto.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-new-project.png" alt="remotedev new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +625,15 @@ image::images/remotedev-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Na margem esquerda da janela de Saída, clique no ícone do terminal.
-image::images/remotedev-terminal-icon.png[]</p>
+<p>Na margem esquerda da janela de Saída, clique no ícone do terminal.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-terminal-icon.png" alt="remotedev terminal icon">
+</div>
+</div>
 <div class="paragraph">
 <p>O IDE abre uma guia Terminal no diretório de trabalho do projeto atual, se for local ou remoto. Se o projeto estiver usando um host de compilação remota e você já estiver conectado por meio do IDE, você não precisará efetuar log-in novamente.</p>
 </div>
@@ -634,9 +656,17 @@ image::images/remotedev-terminal-icon.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>É possível alternar o host de compilação para um projeto clicando com o botão direito do mouse no nó do projeto e selecionando Definir Host de Compilação.
-image::images/remotedev-set-remote-host-menu.png[]</p>
+<p>É possível alternar o host de compilação para um projeto clicando com o botão direito do mouse no nó do projeto e selecionando Definir Host de Compilação.</p>
 </li>
+</ul>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-set-remote-host-menu.png" alt="remotedev set remote host menu">
+</div>
+</div>
+<div class="ulist">
+<ul>
 <li>
 <p>É possível alterar as propriedades de um host de compilação remoto após uma configuração inicial, clicando com o botão direito na máquina na janela Serviços e selecionando Propriedades.</p>
 </li>
diff --git a/content/kb/docs/cnd/remotedev-tutorial_ru.html b/content/kb/docs/cnd/remotedev-tutorial_ru.html
index b3cba43..bc26ac7 100644
--- a/content/kb/docs/cnd/remotedev-tutorial_ru.html
+++ b/content/kb/docs/cnd/remotedev-tutorial_ru.html
@@ -407,23 +407,29 @@ nfs://_IPaddress/path/to/share_`</code></pre>
 <p>Откройте окно "Службы", выбрав меню "Окно" &gt; "Службы".</p>
 </li>
 <li>
-<p>Щелкните правой кнопкой мыши узел 'Узлы сборки C/C++' и выберите 'Добавить новый узел'.
-image::images/remotedev-add-host.png[]В диалоговом окне 'Настройка нового удаленного узла' среда IDE обнаруживает узлы локальной сети. Имена узлов добавляются в таблицу в диалоговом окне. Зеленый индикатор указывает на то, что на этих узлах запущен сервер SSH.</p>
+<p>Щелкните правой кнопкой мыши узел 'Узлы сборки C/C++' и выберите 'Добавить новый узел'.</p>
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>image::images/remotedev-add-host.png[]В диалоговом окне 'Настройка нового удаленного узла' среда IDE обнаруживает узлы локальной сети. Имена узлов добавляются в таблицу в диалоговом окне. Зеленый индикатор указывает на то, что на этих узлах запущен сервер SSH.</p>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>Дважды щелкните имя требуемого сервера или введите его имя непосредственно в поле "Имя сервера". Нажмите кнопку "Далее".
-image::images/remotedev-setup-host.png[]</p>
+<p>Дважды щелкните имя требуемого сервера или введите его имя непосредственно в поле "Имя сервера". Нажмите кнопку "Далее".</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host.png" alt="remotedev setup host">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>Введите в окне "Настройка узла" имя пользователя и пароль, используемые для входа на удаленный узел, и выберите метод проверки подлинности. При работе с данным учебным курсом выберите "Пароль" и нажмите кнопку "Далее".image::images/remotedev-setup-host-auth.png[]</p>
+<p>Введите в окне "Настройка узла" имя пользователя и пароль, используемые для входа на удаленный узел, и выберите метод проверки подлинности. При работе с данным учебным курсом выберите "Пароль" и нажмите кнопку "Далее".<span class="image"><img src="images/remotedev-setup-host-auth.png" alt="remotedev setup host auth"></span></p>
 </li>
 </ol>
 </div>
@@ -450,11 +456,15 @@ image::images/remotedev-setup-host.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>После успешной настройки узла на странице общих сведений выводится информация об удаленном узле: платформа, имя узла, имя пользователя для входа, а также найденные наборы средств.
-image::images/remotedev-setup-host-summary.png[]</p>
+<p>После успешной настройки узла на странице общих сведений выводится информация об удаленном узле: платформа, имя узла, имя пользователя для входа, а также найденные наборы средств.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host-summary.png" alt="remotedev setup host summary">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -492,11 +502,15 @@ image::images/remotedev-setup-host-summary.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
-<p>В окне 'Службы' новый удаленный узел отображается в структуре узла 'Узлы сборки C/C++'. Разверните новый узел: список "Наборы средств" должен содержать один или несколько наборов средств.
-image::images/remotedev-remote-toolchain.png[]</p>
+<p>В окне 'Службы' новый удаленный узел отображается в структуре узла 'Узлы сборки C/C++'. Разверните новый узел: список "Наборы средств" должен содержать один или несколько наборов средств.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-remote-toolchain.png" alt="remotedev remote toolchain">
+</div>
+</div>
 <div class="sect2">
 <h3 id="_Если_в_списке_нет_наборов_средств">Если в списке нет наборов средств</h3>
 <div class="paragraph">
@@ -546,11 +560,15 @@ image::images/remotedev-remote-toolchain.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>В списке 'Узел сборки' выберите новый удаленный узел. Список наборов средств будет обновлен для отображения доступных средств удаленного узла.
-image::images/remotedev-new-project.png[]</p>
+<p>В списке 'Узел сборки' выберите новый удаленный узел. Список наборов средств будет обновлен для отображения доступных средств удаленного узла.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-new-project.png" alt="remotedev new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +625,15 @@ image::images/remotedev-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Нажмите на значок терминала в левой части окна 'Результаты'.
-image::images/remotedev-terminal-icon.png[]</p>
+<p>Нажмите на значок терминала в левой части окна 'Результаты'.</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-terminal-icon.png" alt="remotedev terminal icon">
+</div>
+</div>
 <div class="paragraph">
 <p>В IDE открывается вкладка 'Терминал' и осуществляется переход к локальному или удаленному рабочему каталогу текущего проекта. Если для проекта используется удаленный узел сборки и вы уже подключились к этому узлу через IDE, повторный ввод учетных данных не потребуется.</p>
 </div>
@@ -634,9 +656,17 @@ image::images/remotedev-terminal-icon.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>Также можно переключить проект на другой узел сборки. Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Выбрать узел сборки'.
-image::images/remotedev-set-remote-host-menu.png[]</p>
+<p>Также можно переключить проект на другой узел сборки. Для этого щелкните правой кнопкой мыши узел проекта и выберите 'Выбрать узел сборки'.</p>
 </li>
+</ul>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-set-remote-host-menu.png" alt="remotedev set remote host menu">
+</div>
+</div>
+<div class="ulist">
+<ul>
 <li>
 <p>Свойства удаленного узла сборки можно изменить после первоначальной настройки. Для этого щелкните правой кнопкой мыши узел в окне 'Службы' и выберите 'Свойства'.</p>
 </li>
diff --git a/content/kb/docs/cnd/remotedev-tutorial_zh_CN.html b/content/kb/docs/cnd/remotedev-tutorial_zh_CN.html
index 32bdcf7..8557e38 100644
--- a/content/kb/docs/cnd/remotedev-tutorial_zh_CN.html
+++ b/content/kb/docs/cnd/remotedev-tutorial_zh_CN.html
@@ -407,23 +407,29 @@ nfs://_IPaddress/path/to/share_`</code></pre>
 <p>选择 "Window"(窗口)&gt; "Services"(服务)以打开 "Services"(服务)窗口。</p>
 </li>
 <li>
-<p>右键单击 "C/C Build Hosts"(C/C 构建主机)节点,然后选择 "Add New Host"(添加新主机)。
-image::images/remotedev-add-host.png[]在 "New Remote Host Setup"(新建远程主机设置)对话框中,IDE 将会发现本地网络上的主机。主机名将添加到该对话框的表中,并且显示一个绿色指示符,指示这些主机是否正在运行 SSH 服务器。</p>
+<p>右键单击 "C/C Build Hosts"(C/C 构建主机)节点,然后选择 "Add New Host"(添加新主机)。</p>
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>image::images/remotedev-add-host.png[]在 "New Remote Host Setup"(新建远程主机设置)对话框中,IDE 将会发现本地网络上的主机。主机名将添加到该对话框的表中,并且显示一个绿色指示符,指示这些主机是否正在运行 SSH 服务器。</p>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>双击所需服务器的名称,或者直接在 "Hostname"(主机名)字段中键入服务器名称。单击 "Next"(下一步)。
-image::images/remotedev-setup-host.png[]</p>
+<p>双击所需服务器的名称,或者直接在 "Hostname"(主机名)字段中键入服务器名称。单击 "Next"(下一步)。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host.png" alt="remotedev setup host">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
-<p>在 "Setup Host"(设置主机)屏幕上,键入要用来登录到远程主机的用户名,然后选择验证方法。对于此教程,请选择 "Password"(口令),然后单击 "Next"(下一步)。image::images/remotedev-setup-host-auth.png[]</p>
+<p>在 "Setup Host"(设置主机)屏幕上,键入要用来登录到远程主机的用户名,然后选择验证方法。对于此教程,请选择 "Password"(口令),然后单击 "Next"(下一步)。<span class="image"><img src="images/remotedev-setup-host-auth.png" alt="remotedev setup host auth"></span></p>
 </li>
 </ol>
 </div>
@@ -450,11 +456,15 @@ image::images/remotedev-setup-host.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="7">
 <li>
-<p>在成功配置主机后,"Summary"(概要)页将显示有关远程主机的信息:平台、主机名、用于登录的用户名以及找到的工具集合。
-image::images/remotedev-setup-host-summary.png[]</p>
+<p>在成功配置主机后,"Summary"(概要)页将显示有关远程主机的信息:平台、主机名、用于登录的用户名以及找到的工具集合。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-setup-host-summary.png" alt="remotedev setup host summary">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="8">
 <li>
@@ -492,11 +502,15 @@ image::images/remotedev-setup-host-summary.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="11">
 <li>
-<p>在 "Services"(服务)窗口中的 "C/C Build Hosts"(C/C 构建主机)节点下,将显示新的远程主机。展开新主机的节点,"Tool Collection"(工具集合)列表中应该有一个或多个工具集合。
-image::images/remotedev-remote-toolchain.png[]</p>
+<p>在 "Services"(服务)窗口中的 "C/C Build Hosts"(C/C 构建主机)节点下,将显示新的远程主机。展开新主机的节点,"Tool Collection"(工具集合)列表中应该有一个或多个工具集合。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-remote-toolchain.png" alt="remotedev remote toolchain">
+</div>
+</div>
 <div class="sect2">
 <h3 id="_如果未列出任何工具集合">如果未列出任何工具集合</h3>
 <div class="paragraph">
@@ -546,11 +560,15 @@ image::images/remotedev-remote-toolchain.png[]</p>
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
-<p>在 "Build Host"(构建主机)中选择新的远程主机。将会更新 "Tool Collection"(工具集合)列表,以显示远程主机上的可用工具。
-image::images/remotedev-new-project.png[]</p>
+<p>在 "Build Host"(构建主机)中选择新的远程主机。将会更新 "Tool Collection"(工具集合)列表,以显示远程主机上的可用工具。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-new-project.png" alt="remotedev new project">
+</div>
+</div>
 <div class="olist arabic">
 <ol class="arabic" start="4">
 <li>
@@ -607,11 +625,15 @@ image::images/remotedev-new-project.png[]</p>
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>在 "Output"(输出)窗口的左旁注上,单击 "Terminal"(终端)图标。
-image::images/remotedev-terminal-icon.png[]</p>
+<p>在 "Output"(输出)窗口的左旁注上,单击 "Terminal"(终端)图标。</p>
 </li>
 </ol>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-terminal-icon.png" alt="remotedev terminal icon">
+</div>
+</div>
 <div class="paragraph">
 <p>IDE 将在当前项目(无论是本地项目还是远程项目)的工作目录中打开 "Terminal"(终端)标签。如果项目使用的是远程构建主机并且您已通过 IDE 建立连接,则不需要再次登录。</p>
 </div>
@@ -634,9 +656,17 @@ image::images/remotedev-terminal-icon.png[]</p>
 <div class="ulist">
 <ul>
 <li>
-<p>通过右键单击项目节点,然后选择 "Set Build Host"(设置构建主机),可以切换项目的构建主机。
-image::images/remotedev-set-remote-host-menu.png[]</p>
+<p>通过右键单击项目节点,然后选择 "Set Build Host"(设置构建主机),可以切换项目的构建主机。</p>
 </li>
+</ul>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/remotedev-set-remote-host-menu.png" alt="remotedev set remote host menu">
+</div>
+</div>
+<div class="ulist">
+<ul>
 <li>
 <p>通过在 "Services"(服务)窗口中右键单击远程构建主机,然后选择 "Properties"(属性),可以在初始设置后更改远程构建主机的属性。</p>
 </li>
diff --git a/content/kb/docs/cnd_ja.html b/content/kb/docs/cnd_ja.html
index cb99bfb..d29e044 100644
--- a/content/kb/docs/cnd_ja.html
+++ b/content/kb/docs/cnd_ja.html
@@ -124,11 +124,15 @@
 <div class="ulist">
 <ul>
 <li>
-<p><a href="../../community/releases/80/cpp-setup-instructions.html">C/C+/Fortran向けのNetBeans IDEの構成+</a>
-image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[]</p>
+<p><a href="../../community/releases/80/cpp-setup-instructions.html">C/C+/Fortran向けのNetBeans IDEの構成+</a></p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="../../images_www/v6/trails/trails-box-br.png" alt="] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -168,11 +172,15 @@ image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6
 <p><a href="../docs/cnd/remotedev-tutorial.html">C/C+リモート開発のチュートリアル+</a></p>
 </li>
 <li>
-<p><a href="../docs/cnd/c-unit-test.html">C/C+プロジェクトへの単体テストの追加+</a>
-image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[]</p>
+<p><a href="../docs/cnd/c-unit-test.html">C/C+プロジェクトへの単体テストの追加+</a></p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="../../images_www/v6/trails/trails-box-br.png" alt="] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -193,11 +201,15 @@ image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6
 <p><a href="../docs/cnd/toolchain.html">C/C+ツール・コレクション・ディスクリプタの使用+</a></p>
 </li>
 <li>
-<p><a href="../docs/cnd/cpp-vcs.html">VCSへのNetBeans C/C+プロジェクトの格納+</a>
-image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[]</p>
+<p><a href="../docs/cnd/cpp-vcs.html">VCSへのNetBeans C/C+プロジェクトの格納+</a></p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="../../images_www/v6/trails/trails-box-br.png" alt="] image::../../images_www/v6/trails/trails-box-bl.png[]image::../../images_www/v6/trails/trails-box-tr.png[] image::../../images_www/v6/trails/trails-box-tl.png[">
+</div>
+</div>
 </div>
 </div>
 <div class="sect1">
@@ -237,11 +249,15 @@ image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6
 <p><a href="http://wiki.netbeans.org/NetBeansUserFAQ#NetBeans_C.2FC.2B.2B_Development_Pack">NetBeans C/C+プラグインのFAQ+</a></p>
 </li>
 <li>
-<p><a href="https://netbeans.org/projects/cnd/lists">NetBeans C/C+メーリング・リスト+</a>
-image::../../images_www/v6/trails/trails-box-br.png[] image::../../images_www/v6/trails/trails-box-bl.png[]</p>
+<p><a href="https://netbeans.org/projects/cnd/lists">NetBeans C/C+メーリング・リスト+</a></p>
 </li>
 </ul>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="../../images_www/v6/trails/trails-box-br.png" alt="] image::../../images_www/v6/trails/trails-box-bl.png[">
+</div>
+</div>
 </div>
 </div>
             
diff --git a/content/kb/docs/contributing.html b/content/kb/docs/contributing.html
index 2ecd1dc..66294ee 100644
--- a/content/kb/docs/contributing.html
+++ b/content/kb/docs/contributing.html
@@ -356,7 +356,7 @@ In general we should make the tutorials be less wordy, less long paragraphs. Spe
 <div class="sect2">
 <h3 id="_block_images_and_screenshots">Block images and screenshots</h3>
 <div class="paragraph">
-<p>Block images are inserted using the <code>image::</code> AsciiDoc construct, this is, with two colons. These take a
+<p>Block images are inserted using the <code>image:</code> AsciiDoc construct, this is, with two colons. These take a
 paragraph of their own. Example:</p>
 </div>
 <div class="listingblock">
@@ -386,7 +386,9 @@ Note the two colons for block images, and a single colon for inlined (in the par
 <div class="content">
 <pre class="prettyprint highlight"><code class="language-asciidoc" data-lang="asciidoc">[.feature]
 --
+
 image::images/the-title-of-the-image-small.png[role="left", title="Click to enlarge", link="images/the-title-of-the-image-big.png"]
+
 --</code></pre>
 </div>
 </div>
diff --git a/content/kb/docs/ide/clearcase.html b/content/kb/docs/ide/clearcase.html
index 7e8f586..84a721e 100644
--- a/content/kb/docs/ide/clearcase.html
+++ b/content/kb/docs/ide/clearcase.html
@@ -315,7 +315,7 @@ Upon creation, the IDE automatically recognizes that the project is in a view an
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Type in a message in the Describing Message text area. Alternatively, click the Recent Messages ( image::images/recent-msgs.png[] ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
+<p>Type in a message in the Describing Message text area. Alternatively, click the Recent Messages ( <span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span> ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
 </li>
 <li>
 <p>After specifying actions for individual files, click Add. The IDE&#8217;s status bar, located in the bottom right of the interface, displays as the Add action takes place. Upon a successful Add, versioning badges disappear in the Projects, Files and Favorites windows, and the color encoding of checked-in files becomes black.</p>
@@ -422,9 +422,11 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/left-ui-small.png[role="left", link="images/left-ui.png"]&#8201;&#8212;&#8201;
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/left-ui-small.png[role="left", link="images/left-ui.png"]
+&#8201;&#8212;&#8201;
 <strong>Left margin</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="Versioning color encoding displays in editor&#8217;s right margin"]
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/right-ui.png" alt="right ui" title="Versioning color encoding displays in editor&#8217;s right margin"></span>
 <strong>Right margin</strong></p></td>
 </tr>
 </tbody>
@@ -433,7 +435,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <div class="sect3">
 <h4 id="_viewing_file_status_information">Viewing File Status Information</h4>
 <div class="paragraph">
-<p>When you are working in the Projects (Ctrl-1), Files (Ctrl-2), Favorites (Ctrl-3), or Versioning windows, the IDE provides several visual features that aid in viewing status information about your files. In the example below, notice how the badge (e.g. image::images/blue-badge.png[]), color of the file name, and adjacent status label, all coincide with each other to provide you with a simple but effective way to keep track of versioning information on your files:</p>
+<p>When you are working in the Projects (Ctrl-1), Files (Ctrl-2), Favorites (Ctrl-3), or Versioning windows, the IDE provides several visual features that aid in viewing status information about your files. In the example below, notice how the badge (e.g. <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>), color of the file name, and adjacent status label, all coincide with each other to provide you with a simple but effective way to keep track of versioning i [...]
 </div>
 <div class="imageblock">
 <div class="content">
@@ -478,7 +480,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue Badge</strong> (image::images/blue-badge.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue Badge</strong> (<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates the presence of files or folders that have been checkedout, hijacked or added. For packages, this badge applies only to the package itself and not its subpackages. For projects or folders, the badge indicates changes within that item, or any of the contained subfolders.</p></td>
 </tr>
 </tbody>
@@ -502,22 +504,22 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <tbody>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/blue-text.png" alt="blue text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file has been checked out.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Green</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/green-text.png" alt="green text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file is new and has not been added to source control yet.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Gray</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/gray-text.png" alt="gray text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file is ignored by ClearCase and will not be included in versioning commands (e.g. Add to Source Control or Checkin). Files can only be made to be ignored if they have not yet been versioned.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Strike-Through</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file is excluded from checkin or Add to Source Control operations. Strike-through text only appears in specific locations, such as the Versioning window, checkin dialog and Add to Source Control dialog, when you choose to exclude individual files from an action. Such files are still affected by other ClearCase commands, such as Update.</p></td>
 </tr>
 </tbody>
@@ -600,22 +602,22 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Refresh Status</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Refreshes the status of the selected files and folders. Files displayed in the Versioning window can be refreshed to reflect any changes that may have been made externally.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Diff All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Opens the Diff Viewer providing you with a side-by-side comparison of your local changes with versions maintained in the repository.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Update All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Updates all selected files. (Applies only to snapshot views.)</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>checkin All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Enables you to check in local changes.</p></td>
 </tr>
@@ -643,14 +645,16 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <p class="tableblock">Displays author and revision number information in the left margin of files opened in the Source Editor.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]&#8201;&#8212;&#8201;</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]
+&#8201;&#8212;&#8201;</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Exclude from Checkin</strong>:</p>
 <p class="tableblock">Allows you to mark the file to be excluded when performing a checkin.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/exclude-from-checkin.jpg[title="Files are marked as excluded in the Checkin dialog"]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/exclude-from-checkin.jpg" alt="exclude from checkin" title="Files are marked as excluded in the Checkin dialog"></span></p></td>
 </tr>
 </tbody>
 </table>
@@ -659,7 +663,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <div class="sect3">
 <h4 id="_comparing_file_versions">Comparing File Versions</h4>
 <div class="paragraph">
-<p>Comparing file versions is a common task when working with versioned projects. The IDE enables you to compare versions by using the Diff command, which is available from the right-click menu of a selected item (ClearCase &gt; Diff), as well as from the Versioning window. In the Versioning window, you can perform diffs by either double-clicking a listed file, otherwise you can click the Diff All icon (image::images/diff.png[]) located in the toolbar at the top.</p>
+<p>Comparing file versions is a common task when working with versioned projects. The IDE enables you to compare versions by using the Diff command, which is available from the right-click menu of a selected item (ClearCase &gt; Diff), as well as from the Versioning window. In the Versioning window, you can perform diffs by either double-clicking a listed file, otherwise you can click the Diff All icon (<span class="image"><img src="images/diff.png" alt="diff"></span>) located in the too [...]
 </div>
 <div class="paragraph">
 <p>When you perform a diff, a graphical Diff Viewer opens for the selected file(s) in the IDE&#8217;s main window. The Diff Viewer displays two copies in side-by-side panels:</p>
@@ -677,7 +681,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <p>The Diff Viewer makes use of the same <a href="#viewingChanges">color encoding</a> used elsewhere to display version control changes. In the screen capture displayed above, the green block indicates content that has been added to the more current version. The red block indicates that content from the earlier version has been removed from the later. Blue indicates that changes have occurred within the highlighted line(s).</p>
 </div>
 <div class="paragraph">
-<p>Also, when performing a diff on a group of files, such as on a project, package, or folder, or when clicking Diff All (image::images/diff.png[]), you can switch between diffs by clicking files listed in the upper region of the Diff Viewer.</p>
+<p>Also, when performing a diff on a group of files, such as on a project, package, or folder, or when clicking Diff All (<span class="image"><img src="images/diff.png" alt="diff"></span>), you can switch between diffs by clicking files listed in the upper region of the Diff Viewer.</p>
 </div>
 <div class="paragraph">
 <p>The Diff Viewer also provides you with the following functionality:</p>
@@ -704,17 +708,17 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Replace</strong> (image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Replace</strong> (<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">Inserts the highlighted text from the previous versions into the checked out version</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong> (image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong> (<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Reverts the file&#8217;s checkedout version to the state of the selected previous version</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong> (image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong> (<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Removes the highlighted text from the checked out version so that it mirrors the previous version</p></td>
 </tr>
 </tbody>
@@ -732,13 +736,13 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Previous</strong> (image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Previous</strong> (<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">Goes to previous difference displayed in the diff</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong> (image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong> (<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Goes to next difference displayed in the diff</p></td>
 </tr>
 </tbody>
@@ -757,7 +761,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <p>From the Projects, Files or Favorites windows, right-click new or checked-out items and choose ClearCase &gt; Checkin.</p>
 </li>
 <li>
-<p>From the Versioning window or Diff Viewer, click the Checkin All (image::images/commit.png[]) button located in the toolbar.</p>
+<p>From the Versioning window or Diff Viewer, click the Checkin All (<span class="image"><img src="images/commit.png" alt="commit"></span>) button located in the toolbar.</p>
 </li>
 </ul>
 </div>
@@ -792,7 +796,7 @@ From the Add dialog, it is possible to specify whether to exclude individual fil
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Type in a checkin message in the Checkin Message text area. Alternatively, click the Recent Messages ( image::images/recent-msgs.png[] ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
+<p>Type in a checkin message in the Checkin Message text area. Alternatively, click the Recent Messages ( <span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span> ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
 </li>
 <li>
 <p>After specifying actions for individual files, click Checkin. The IDE executes the checkin. The IDE&#8217;s status bar, located in the bottom right of the interface, displays as the checkin action takes place. Upon a successful checkin, versioning badges disappear in the Projects, Files and Favorites windows, and the color encoding of checked-in files returns to black.</p>
diff --git a/content/kb/docs/ide/clearcase_ja.html b/content/kb/docs/ide/clearcase_ja.html
index 87f2286..44bab47 100644
--- a/content/kb/docs/ide/clearcase_ja.html
+++ b/content/kb/docs/ide/clearcase_ja.html
@@ -102,22 +102,6 @@
 <li><a href="#_code_cleartool_code_実行可能ファイルのパスの指定"><code>cleartool</code> 実行可能ファイルのパスの指定</a></li>
 </ul>
 </li>
-<li><a href="#_バージョン管理されたファイルの操作の開始">バージョン管理されたファイルの操作の開始</a>
-<ul class="sectlevel2">
-<li><a href="#_ideで既存のプロジェクトを開く">IDEで既存のプロジェクトを開く</a></li>
-<li><a href="#_新規プロジェクトの作成とソース管理下への配置">新規プロジェクトの作成とソース管理下への配置</a></li>
-</ul>
-</li>
-<li><a href="#_ソースのチェックアウト">ソースのチェックアウト</a></li>
-<li><a href="#_ソースの編集">ソースの編集</a>
-<ul class="sectlevel2">
-<li><a href="#_ソース_エディタでの変更の表示">ソース・エディタでの変更の表示</a></li>
-<li><a href="#_ファイルのステータス情報の表示">ファイルのステータス情報の表示</a></li>
-<li><a href="#_ファイル_バージョンの比較">ファイル・バージョンの比較</a></li>
-</ul>
-</li>
-<li><a href="#_ソースのチェックイン">ソースのチェックイン</a></li>
-<li><a href="#_関連項目">関連項目</a></li>
 </ul>
 </div>
 <div id="preamble">
@@ -228,16 +212,19 @@
 </div>
 <div class="openblock">
 <div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
-</div>
-</div>
+
 </div>
 </div>
 </li>
 </ol>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -255,12 +242,9 @@
 <div class="paragraph">
 <p>*注意: *詳細は、<a href="http://versioncontrol.netbeans.org/clearcase/install.html">NetBeans ClearCase統合設定およびリリース・ノート</a>を参照してください。</p>
 </div>
+<div class="paragraph">
+<p>== バージョン管理されたファイルの操作の開始</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_バージョン管理されたファイルの操作の開始">バージョン管理されたファイルの操作の開始</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>最初にIDEでClearCaseを操作する場合、既存のバージョン管理されたプロジェクトを開くか、コンピュータ上の*ClearCaseビュー内*に新しいプロジェクトを作成して開始する必要があります。</p>
 </div>
@@ -274,8 +258,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_ideで既存のプロジェクトを開く">IDEで既存のプロジェクトを開く</h3>
+<div class="paragraph">
+<p>=== IDEで既存のプロジェクトを開く</p>
+</div>
 <div class="paragraph">
 <p>すでに作業中のClearCaseバージョン管理プロジェクトがある場合、それをIDEで開くと、バージョン管理機能が自動的に使用可能になります。IDEが開いているプロジェクトをスキャンし、ClearCaseビューのディレクトリにある場合、ファイル・ステータスおよびコンテキスト依存のサポートが自動的にアクティブになります。</p>
 </div>
@@ -292,9 +277,9 @@
 <div class="paragraph">
 <p>*注意: *「お気に入り」ウィンドウでプロジェクトまたはディレクトリを開くこともできます。ClearCaseディレクトリがNetBeansプロジェクトでない場合、これが必要になる場合があります。これを行うには、「お気に入り」ウィンドウ(Ctrl-3)を右クリックして「お気に入りに追加」を選択します。表示される「お気に入りに追加」ダイアログで、コンピュータ上のClearCaseビューのディレクトリの最上位に移動し、「追加」をクリックします。ディレクトリのツリー・ビューが「お気に入り」ウィンドウに追加されます。</p>
 </div>
+<div class="paragraph">
+<p>=== 新規プロジェクトの作成とソース管理下への配置</p>
 </div>
-<div class="sect2">
-<h3 id="_新規プロジェクトの作成とソース管理下への配置">新規プロジェクトの作成とソース管理下への配置</h3>
 <div class="paragraph">
 <p>新規プロジェクトを作成してClearCaseソース管理の下に配置し、IDEで作業を続けることもできます。新規プロジェクトを作成した場合、その場所を*ClearCaseビュー内*に指定する必要があります。これによってIDEはバージョン管理サポートが必要であることを認識できます。プロジェクトが作成されると、すべてのファイルは最初_view-private_になります。その後、IDEの「ソース管理に追加」コマンドを使用して、プロジェクトをClearCaseサーバーに追加できます。</p>
 </div>
@@ -330,22 +315,22 @@
 <pre>[.feature]</pre>
 </div>
 </div>
-<div class="openblock">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
+</li>
+</ol>
 </div>
 </div>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
 </div>
-</li>
-</ol>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>「説明メッセージ」テキスト領域にメッセージを入力します。または、右上隅にある「最近のメッセージ」(image::images/recent-msgs.png[])アイコンをクリックして、以前使用したメッセージのリストを表示して選択します。</p>
+<p>「説明メッセージ」テキスト領域にメッセージを入力します。または、右上隅にある「最近のメッセージ」(<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>)アイコンをクリックして、以前使用したメッセージのリストを表示して選択します。</p>
 </li>
 </ol>
 </div>
@@ -359,12 +344,9 @@
 <div class="paragraph">
 <p>*注意: *「追加」ダイアログで、「追加」アクションから個々のファイルを除外するかどうかを指定できます。これを行うには、選択したファイルの「アクション」列をクリックしてドロップダウン・リストから「追加しない」を選択します。</p>
 </div>
+<div class="paragraph">
+<p>== ソースのチェックアウト</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_ソースのチェックアウト">ソースのチェックアウト</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>ClearCaseバージョン管理プロジェクトをIDEで開くと、ソースを変更できます。ClearCaseバージョン管理ファイルで変更するには、最初に、チェックアウトまたは_ハイジャック_に変更する必要があります。NetBeans ClearCaseサポートには、これを行うための方法が2つあります。</p>
 </div>
@@ -381,11 +363,9 @@
 <div class="paragraph">
 <p>要求時チェックアウト機能は、<a href="#ccOptions">「ClearCaseオプション」ダイアログ</a>の要求時チェックアウト・オプションを使用して微調整できます。</p>
 </div>
+<div class="paragraph">
+<p>== ソースの編集</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_ソースの編集">ソースの編集</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>NetBeans IDEで開くプロジェクトは、それらのノードをダブルクリックすると、「プロジェクト」(Ctrl-1)、「ファイル」(Ctrl-2)、「お気に入り」(Ctrl-3)ウィンドウなどのIDEのウィンドウで表示されるのと同様に、ファイルをソース・エディタで開くことができます。</p>
 </div>
@@ -405,8 +385,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_ソース_エディタでの変更の表示">ソース・エディタでの変更の表示</h3>
+<div class="paragraph">
+<p>=== ソース・エディタでの変更の表示</p>
+</div>
 <div class="paragraph">
 <p>IDEのソース・エディタでバージョン管理されたファイルを開くと、リポジトリから以前にチェックアウトしたバージョンに照らしあわせながら、そのファイルに行われた変更がリアル・タイムで表示されます。作業に伴って、IDEはソース・エディタのマージンに色分けを使用し、次の情報を伝えます。</p>
 </div>
@@ -446,168 +427,110 @@
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;<span class="image left"><a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a></span>&#8201;&#8212;&#8201;
-<strong>左側のマージン</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="エディタの右側のマージンに表示されたバージョン管理の色分け"]
-<strong>右側のマージン</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
-<div class="sect2">
-<h3 id="_ファイルのステータス情報の表示">ファイルのステータス情報の表示</h3>
-<div class="paragraph">
-<p>「プロジェクト」(Ctrl-1)、「ファイル」(Ctrl-2)、「お気に入り」(Ctrl-3)または「バージョン管理」ウィンドウで作業する場合、IDEには、ファイルのステータス情報を表示するのに役立つ視覚機能がいくつかあります。次の例では、バッジ(例: image::images/blue-badge.png[])、ファイル名の色、および隣接するステータス・ラベルすべての相互の対応方法を確認し、ファイルに対するバージョン管理情報をトラックする単純だが効果的な方法について説明します。</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/badge-example.jpg" alt="badge example">
-</div>
-<div class="title">Figure 2. 「お気に入り」ウィンドウに表示された青のバージョン管理バッジ</div>
-</div>
-<div class="paragraph">
-<p>バッジ、色分け、ファイル・ステータス・ラベル、およびおそらく最も重要なバージョン管理ウィンドウはすべて、効果的な表示および管理能力、およびIDEでのバージョン管理情報に貢献します。</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="#badges">バッジと色分け</a></p>
-</li>
-<li>
-<p><a href="#fileStatus">ファイル・ステータス・ラベル</a></p>
-</li>
-<li>
-<p><a href="#versioning">バージョン管理ウィンドウ</a></p>
-</li>
-</ul>
 </div>
-<div class="sect3">
-<h4 id="_バッジと色分け">バッジと色分け</h4>
 <div class="paragraph">
-<p>バッジはプロジェクト、フォルダおよびパッケージ・ノードに適用され、そのノードに含まれているファイルのステータスを示します。</p>
+<p><span class="image left"><a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a></span></p>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>バッジに使用される色のスキームを次の表に示します。</p>
+<p><strong>左側のマージン</strong> |<span class="image"><img src="images/right-ui.png" alt="right ui" title="エディタの右側のマージンに表示されたバージョン管理の色分け"></span>
+<strong>右側のマージン</strong></p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">UIコンポーネント</th>
-<th class="tableblock halign-left valign-top">説明</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>青のバッジ</strong>(image::images/blue-badge.png[])</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">チェックアウト、ハイジャック、または追加されたファイルまたはフォルダがあることを示します。パッケージの場合、このバッジは、パッケージ自体にのみ適用され、そのサブパッケージには適用されません。プロジェクトまたはフォルダの場合、このバッジはその項目または含まれるサブフォルダ内の内容の変更を示します。</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== ファイルのステータス情報の表示</p>
+<p class="tableblock">「プロジェクト」(Ctrl-1)、「ファイル」(Ctrl-2)、「お気に入り」(Ctrl-3)または「バージョン管理」ウィンドウで作業する場合、IDEには、ファイルのステータス情報を表示するのに役立つ視覚機能がいくつかあります。次の例では、バッジ(例: <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)、ファイル名の色、および隣接するステータス・ラベルすべての相互の対応方法を確認し、ファイルに対するバージョン管理情報をトラックする単純だが効果的な方法について説明します。</p>
+<p class="tableblock">image::images/badge-example.jpg[title="「お気に入り」ウィンドウに表示された青のバージョン管理バッジ"]</p>
+<p class="tableblock">バッジ、色分け、ファイル・ステータス・ラベル、およびおそらく最も重要なバージョン管理ウィンドウはすべて、効果的な表示および管理能力、およびIDEでのバージョン管理情報に貢献します。</p>
+<p class="tableblock">* <a href="#badges">バッジと色分け</a>
+* <a href="#fileStatus">ファイル・ステータス・ラベル</a>
+* <a href="#versioning">バージョン管理ウィンドウ</a></p>
+<p class="tableblock">==== バッジと色分け</p>
+<p class="tableblock">バッジはプロジェクト、フォルダおよびパッケージ・ノードに適用され、そのノードに含まれているファイルのステータスを示します。</p>
+<p class="tableblock">バッジに使用される色のスキームを次の表に示します。</p></td>
 </tr>
 </tbody>
 </table>
 <div class="paragraph">
-<p>色分けは、現在のステータスを示す目的でファイル名に適用されます。</p>
+<p>|UIコンポーネント |説明</p>
+</div>
+<div class="paragraph">
+<p>|<strong>青のバッジ</strong>(<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>) |チェックアウト、ハイジャック、または追加されたファイルまたはフォルダがあることを示します。パッケージの場合、このバッジは、パッケージ自体にのみ適用され、そのサブパッケージには適用されません。プロジェクトまたはフォルダの場合、このバッジはその項目または含まれるサブフォルダ内の内容の変更を示します。</p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 33.3333%;">
-<col style="width: 33.3333%;">
-<col style="width: 33.3334%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">色</th>
-<th class="tableblock halign-left valign-top">例</th>
-<th class="tableblock halign-left valign-top">説明</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>青</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがチェックアウトされたことを示します。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>緑</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">ファイルが新規で、ソース管理にまだ追加されていないことを示します。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>グレー</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがClearCaseに無視され、バージョン管理コマンド(「ソース管理に追加」または「チェックイン」)に含まれていないことを示します。まだバージョン管理されていない場合にのみ、ファイルが無視されます。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>取消し線</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがチェックインまたは「ソース管理に追加」操作から除外されたことを示します。取消し線テキストは、アクションから個別ファイルを除外することを選択した場合に、「バージョン管理」ウィンドウ、チェックイン・ダイアログ、および「ソース管理に追加」ダイアログなどの特定の場所にのみ表示されます。そのようなファイルは、「更新」など、他のClearCaseコマンドの影響はまだ受けます。</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">色分けは、現在のステータスを示す目的でファイル名に適用されます。</p></td>
 </tr>
 </tbody>
 </table>
-</div>
-<div class="sect3">
-<h4 id="_ファイル_ステータス_ラベル">ファイル・ステータス・ラベル</h4>
 <div class="paragraph">
-<p>ファイル・ステータス・ラベルは、バージョン管理ファイルのステータスを、IDEのウィンドウにテキストで示します。デフォルトで、IDEは、ファイルをウィンドウに一覧表示するときに、そのファイルの右側にステータス情報(新規、予約済、予約なし、無視など)をグレー・テキストで表示します。ただし、この形式は独自のものに変更できます。たとえば、バージョン・セレクタをステータス・ラベルに追加する場合は、次のようにします。</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>メイン・メニューから「ツール」&gt;「オプション」(Macでは「NetBeans」&gt;「プリファレンス」)を選択します。「オプション」ウィンドウが開きます。</p>
-</li>
-<li>
-<p>ウィンドウの上部にある「その他」ボタンを選択し、その下にある「バージョン管理」タブをクリックします。左側のパネルの「バージョン管理システム」の下のClearCaseが選択されていることを確認します。詳細は前述の<a href="#ccOptions">スクリーン・ショット</a>を参照してください。</p>
-</li>
-<li>
-<p>「ステータス・ラベル形式」テキスト・フィールドの右側の「変数を追加」ボタンをクリックします。表示される「変数を追加」ダイアログで <code>v2.5.1</code> 変数を選択し、「OK」をクリックします。「ステータス・ラベル形式」テキスト・フィールドに、バージョン変数が追加されます。</p>
-</li>
-<li>
-<p>ファイルの右側にステータスとバージョン・セレクタのみが表示されるようにステータス・ラベルを再フォーマットするには、「ステータス・ラベル形式」テキスト・フィールドの内容を次のように再整理します。</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[{status}; {version}]</code></pre>
-</div>
+<p>|色 |例 |説明</p>
 </div>
 <div class="paragraph">
-<p>「OK」をクリックします。これでステータス・ラベルにはファイルのステータスとバージョン・セレクタ(該当する場合)が表示されます。</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/file-labels.jpg" alt="file labels">
-</div>
-<div class="title">Figure 3. ファイル名の横に表示されたファイル・ラベル</div>
+<p>|<strong>青</strong> |<span class="image"><img src="images/blue-text.png" alt="blue text"></span> |ファイルがチェックアウトされたことを示します。</p>
 </div>
 <div class="paragraph">
-<p>ファイル・ステータス・ラベルは、メイン・メニューから「表示」&gt;「バージョン・ラベルを表示」を選択して、オンとオフを切り替えできます。</p>
-</div>
+<p>|<strong>緑</strong> |<span class="image"><img src="images/green-text.png" alt="green text"></span> |ファイルが新規で、ソース管理にまだ追加されていないことを示します。</p>
 </div>
-<div class="sect3">
-<h4 id="_バージョン管理ウィンドウ">バージョン管理ウィンドウ</h4>
 <div class="paragraph">
-<p>ClearCaseバージョン管理ウィンドウは、ローカルの作業コピーの選択されたフォルダ内でファイルに行われた変更のすべてを、リアル・タイムで一覧表示します。これは、IDEの下のパネルにデフォルトで開き、新規、チェックアウト、またはハイジャックされたファイルを一覧表示します。</p>
+<p>|<strong>グレー</strong> |<span class="image"><img src="images/gray-text.png" alt="gray text"></span> |ファイルがClearCaseに無視され、バージョン管理コマンド(「ソース管理に追加」または「チェックイン」)に含まれていないことを示します。まだバージョン管理されていない場合にのみ、ファイルが無視されます。</p>
 </div>
 <div class="paragraph">
-<p>バージョン管理ウィンドウを開くには、(「プロジェクト」ウィンドウ、「ファイル」ウィンドウ、または「お気に入り」ウィンドウなどから)バージョン管理ファイルまたはフォルダを選択し、右クリック・メニューから「ClearCase」&gt;「変更を表示」を選択するか、またはメイン・メニューから「バージョン管理」&gt;「変更を表示」を選択します。IDEの最下部に次のウィンドウが表示されます。</p>
+<p>|<strong>取消し線</strong> |<span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span> |ファイルがチェックインまたは「ソース管理に追加」操作から除外されたことを示します。取消し線テキストは、アクションから個別ファイルを除外することを選択した場合に、「バージョン管理」ウィンドウ、チェックイン・ダイアログ、および「ソース管理に追加」ダイアログなどの特定の場所にのみ表示されます。そのようなファイルは、「更新」など、他のClearCaseコマンドの影響はまだ受けます。</p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">==== ファイル・ステータス・ラベル</p>
+<p class="tableblock">ファイル・ステータス・ラベルは、バージョン管理ファイルのステータスを、IDEのウィンドウにテキストで示します。デフォルトで、IDEは、ファイルをウィンドウに一覧表示するときに、そのファイルの右側にステータス情報(新規、予約済、予約なし、無視など)をグレー・テキストで表示します。ただし、この形式は独自のものに変更できます。たとえば、バージョン・セレクタをステータス・ラベルに追加する場合は、次のようにします。</p>
+<p class="tableblock">1. メイン・メニューから「ツール」&gt;「オプション」(Macでは「NetBeans」&gt;「プリファレンス」)を選択します。「オプション」ウィンドウが開きます。
+2. ウィンドウの上部にある「その他」ボタンを選択し、その下にある「バージョン管理」タブをクリックします。左側のパネルの「バージョン管理システム」の下のClearCaseが選択されていることを確認します。詳細は前述の<a href="#ccOptions">スクリーン・ショット</a>を参照してください。
+3. 「ステータス・ラベル形式」テキスト・フィールドの右側の「変数を追加」ボタンをクリックします。表示される「変数を追加」ダイアログで <code>v2.5.1</code> 変数を選択し、「OK」をクリックします。「ステータス・ラベル形式」テキスト・フィールドに、バージョン変数が追加されます。
+4. ファイルの右側にステータスとバージョン・セレクタのみが表示されるようにステータス・ラベルを再フォーマットするには、「ステータス・ラベル形式」テキスト・フィールドの内容を次のように再整理します。</p>
+<p class="tableblock">[source,java]
+----</p>
+<p class="tableblock">[{status}; v2.5.1]
+----
+「OK」をクリックします。これでステータス・ラベルにはファイルのステータスとバージョン・セレクタ(該当する場合)が表示されます。</p>
+<p class="tableblock">image::images/file-labels.jpg[title="ファイル名の横に表示されたファイル・ラベル"]</p>
+<p class="tableblock">ファイル・ステータス・ラベルは、メイン・メニューから「表示」&gt;「バージョン・ラベルを表示」を選択して、オンとオフを切り替えできます。</p>
+<p class="tableblock">==== バージョン管理ウィンドウ</p>
+<p class="tableblock">ClearCaseバージョン管理ウィンドウは、ローカルの作業コピーの選択されたフォルダ内でファイルに行われた変更のすべてを、リアル・タイムで一覧表示します。これは、IDEの下のパネルにデフォルトで開き、新規、チェックアウト、またはハイジャックされたファイルを一覧表示します。</p>
+<p class="tableblock">バージョン管理ウィンドウを開くには、(「プロジェクト」ウィンドウ、「ファイル」ウィンドウ、または「お気に入り」ウィンドウなどから)バージョン管理ファイルまたはフォルダを選択し、右クリック・メニューから「ClearCase」&gt;「変更を表示」を選択するか、またはメイン・メニューから「バージョン管理」&gt;「変更を表示」を選択します。IDEの最下部に次のウィンドウが表示されます。</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/versioning-window.jpg"><img src="images/versioning-window-small.jpg" alt="versioning window small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>デフォルトでは、「バージョン管理」ウィンドウは選択したパッケージまたはフォルダに含まれる、注目が必要な状態(新規、予約済、予約なしなど)を示す、すべてのファイルを一覧表示します。表示されたファイル一覧の列の見出しをクリックして、名前、ステータス、場所、またはルールでファイルをソートすることもできます。</p>
 </div>
@@ -629,22 +552,22 @@
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ステータスのリフレッシュ</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">選択したファイルとフォルダのステータスをリフレッシュします。「バージョン管理」ウィンドウに表示されたファイルは、外部で行われた可能性のある任意の変更を反映してリフレッシュできます。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>すべて差分を取得</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">差分ビューアを開くと、リポジトリで保持されているバージョンとローカルの変更を並べた比較が表示されます。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>すべて更新</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">選択したファイルをすべて更新します。スナップショット・ビューにのみ適用されます。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>すべてチェックイン</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ローカルでの変更をすべてチェックインできます。</p></td>
 </tr>
@@ -657,7 +580,7 @@
 <div class="content">
 <img src="images/versioning-right-click.jpg" alt="versioning right click">
 </div>
-<div class="title">Figure 4. 「バージョン管理」ウィンドウの選択したファイルに対して表示された右クリック・メニュー</div>
+<div class="title">Figure 2. 「バージョン管理」ウィンドウの選択したファイルに対して表示された右クリック・メニュー</div>
 </div>
 <div class="paragraph">
 <p>たとえば、ファイルでは次のアクションを実行できます。</p>
@@ -672,41 +595,53 @@
 <p class="tableblock">ソース・エディタで開かれているファイルの左マージンに、作成者、リビジョン番号情報を表示します。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]&#8201;&#8212;&#8201;</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>チェックインから除外</strong>:</p>
-<p class="tableblock">チェックインを実行するときに除外するファイルをマークできます。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/exclude-from-checkin.jpg[title="チェックイン・ダイアログで除外とマークされたファイル"]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
-<div class="sect2">
-<h3 id="_ファイル_バージョンの比較">ファイル・バージョンの比較</h3>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/annotations.jpg"><img src="images/annotations-small.jpg" alt="annotations small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>ファイル・バージョンの比較は、バージョン管理されているプロジェクトでの作業で共通のタスクです。差分コマンドを使用すると、IDEでバージョンの比較が行えます。差分コマンドは、「バージョン管理」ウィンドウまたは選択した項目の右クリック・メニュー(「ClearCase」&gt;「差分」)から使用できます。「バージョン管理」ウィンドウで、差分を実行するには、リストされているファイルをダブルクリックするか、上部のツールバーにある「すべて差分を取得」アイコン(image::images/diff.png[])をクリックします。</p>
+<p>|* <strong>チェックインから除外</strong>:</p>
 </div>
 <div class="paragraph">
-<p>差分の取得を実行すると、選択したファイルについてグラフィカルな差分ビューアがIDEのメイン・ウィンドウで開きます。次のように、差分ビューアには2つのコピーが並んだパネルに表示されます。</p>
+<p>チェックインを実行するときに除外するファイルをマークできます。
+ |<span class="image"><img src="images/exclude-from-checkin.jpg" alt="exclude from checkin" title="チェックイン・ダイアログで除外とマークされたファイル"></span></p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== ファイル・バージョンの比較</p>
+<p class="tableblock">ファイル・バージョンの比較は、バージョン管理されているプロジェクトでの作業で共通のタスクです。差分コマンドを使用すると、IDEでバージョンの比較が行えます。差分コマンドは、「バージョン管理」ウィンドウまたは選択した項目の右クリック・メニュー(「ClearCase」&gt;「差分」)から使用できます。「バージョン管理」ウィンドウで、差分を実行するには、リストされているファイルをダブルクリックするか、上部のツールバーにある「すべて差分を取得」アイコン(<span class="image"><img src="images/diff.png" alt="diff"></span>)をクリックします。</p>
+<p class="tableblock">差分の取得を実行すると、選択したファイルについてグラフィカルな差分ビューアがIDEのメイン・ウィンドウで開きます。次のように、差分ビューアには2つのコピーが並んだパネルに表示されます。</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/diff-viewer.jpg"><img src="images/diff-viewer-small.jpg" alt="diff viewer small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>差分ビューアは、バージョン管理の変更を表示する場所に使用されているのと同じ<a href="#viewingChanges">色分け</a>を利用します。前に表示したスクリーン・ショットの緑色のブロックは、より現在に近いバージョンで追加された内容を示します。赤いブロックは、前のバージョンの内容が、より最近のバージョンで除去されたことを示します。青は、強調表示された行で変更が発生したことを示します。</p>
 </div>
 <div class="paragraph">
-<p>また、プロジェクト、パッケージまたはフォルダなどのグループで差分を実行する場合、あるいは「すべて差分を取得」(image::images/diff.png[])をクリックする場合は、差分ビューアの上部領域にリストされているファイルをクリックすると、差分を切り替えることができます。</p>
+<p>また、プロジェクト、パッケージまたはフォルダなどのグループで差分を実行する場合、あるいは「すべて差分を取得」(<span class="image"><img src="images/diff.png" alt="diff"></span>)をクリックする場合は、差分ビューアの上部領域にリストされているファイルをクリックすると、差分を切り替えることができます。</p>
 </div>
 <div class="paragraph">
 <p>差分ビューアには次の機能もあります。</p>
@@ -721,8 +656,9 @@
 </li>
 </ul>
 </div>
-<div class="sect3">
-<h4 id="_チェックアウトしたファイルへの変更の実行">チェックアウトしたファイルへの変更の実行</h4>
+<div class="paragraph">
+<p>==== チェックアウトしたファイルへの変更の実行</p>
+</div>
 <div class="paragraph">
 <p>チェックアウトしたファイルで差分の取得を実行する場合、差分ビューア内で直接変更を行うことができます。これを行うには、カーソルを差分ビューアの右ペインに置き、それに従ってファイルを変更するか、または強調表示された各変更の前後で表示されるインライン・アイコンを使用します。</p>
 </div>
@@ -733,24 +669,24 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>置換</strong>(image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>置換</strong>(<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">強調表示された前のバージョンのテキストを、チェックアウトしたバージョンへ挿入します。</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>すべて移動</strong>(image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>すべて移動</strong>(<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルのチェックアウトしたバージョンを、選択された以前のバージョンの状態に戻します。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>除去</strong>(image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>除去</strong>(<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">強調表示されたテキストをチェックアウトしたバージョンから除去し、前のバージョンが反映されるようにします。</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>==== 比較したファイルの相違間をナビゲート</p>
 </div>
-<div class="sect3">
-<h4 id="_比較したファイルの相違間をナビゲート">比較したファイルの相違間をナビゲート</h4>
 <div class="paragraph">
 <p>差分に複数の違いが含まれている場合、ツールバーに表示された矢印アイコンを使用して、それらをナビゲートできます。矢印アイコンを使用すると、差分を上から下へ出現順に表示できます。</p>
 </div>
@@ -761,24 +697,20 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>前</strong>(image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>前</strong>(<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">差分内で、前に表示された差分に移動します。</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>次</strong>(image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>次</strong>(<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">差分内で、次に表示された差分に移動します。</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>== ソースのチェックイン</p>
 </div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_ソースのチェックイン">ソースのチェックイン</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>ソースに変更を加えた後は、それをリポジトリにチェックインします。IDEを使用すると、チェックイン・コマンドを次の方法でコールできます。</p>
 </div>
@@ -788,7 +720,7 @@
 <p>「プロジェクト」、「ファイル」または「お気に入り」ウィンドウで、新規またはチェックアウトした項目を右クリックし、「ClearCase」&gt;「チェックイン」を選択します。</p>
 </li>
 <li>
-<p>「バージョン管理」ウィンドウまたは差分ビューアから、ツールバーにある「すべてチェックイン」(image::images/commit.png[])ボタンをクリックします。</p>
+<p>「バージョン管理」ウィンドウまたは差分ビューアから、ツールバーにある「すべてチェックイン」(<span class="image"><img src="images/commit.png" alt="commit"></span>)ボタンをクリックします。</p>
 </li>
 </ul>
 </div>
@@ -805,15 +737,15 @@
 </li>
 </ul>
 </div>
-<div class="openblock feature">
-<div class="content">
+</div>
+</div>
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/checkin-dialog.png"><img src="images/checkin-dialog-small.png" alt="checkin dialog small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>「チェックイン」ダイアログで、「チェックイン」から個々のファイルを除外するかどうかを指定できます。これを行うには、選択したファイルの「チェックイン・アクション」列をクリックしてドロップダウン・リストから「チェックインから除外」を選択します。</p>
 </div>
@@ -823,7 +755,7 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>「チェックイン・メッセージ」テキスト領域にチェックイン・メッセージを入力します。または、右上隅にある「最近のメッセージ」(image::images/recent-msgs.png[])アイコンをクリックして、以前使用したメッセージのリストを表示して選択します。</p>
+<p>「チェックイン・メッセージ」テキスト領域にチェックイン・メッセージを入力します。または、右上隅にある「最近のメッセージ」(<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>)アイコンをクリックして、以前使用したメッセージのリストを表示して選択します。</p>
 </li>
 <li>
 <p>個々のファイルのアクションを指定して「チェックイン」をクリックします。IDEがチェックインを実行します。インタフェースの右下にあるIDEのステータス・バーに、チェックイン・アクションの実行状況が表示されます。チェックインに成功すると、「プロジェクト」、「ファイル」および「お気に入り」ウィンドウのバージョン管理バッジが消え、チェックイン・ファイルの色分けが黒に戻ります。
@@ -831,11 +763,9 @@
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>== 関連項目</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_関連項目">関連項目</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>これで、NetBeans IDEでのClearCaseのガイド・ツアーは終了です。このドキュメントでは、IDEのClearCaseサポートを使用する場合の標準的なワークフローを説明することによって、IDEの基本的なバージョン管理タスクの実行方法を示しました。</p>
 </div>
@@ -869,6 +799,9 @@
 </div>
 </div>
 </div>
+</div>
+</div>
+</div>
             
 <section class='tools'>
     <ul class="menu align-center">
diff --git a/content/kb/docs/ide/clearcase_pt_BR.html b/content/kb/docs/ide/clearcase_pt_BR.html
index 7b03492..9cdce25 100644
--- a/content/kb/docs/ide/clearcase_pt_BR.html
+++ b/content/kb/docs/ide/clearcase_pt_BR.html
@@ -102,22 +102,6 @@
 <li><a href="#_especificando_o_caminho_para_o_executável_da_code_cleartool_code">Especificando o Caminho para o Executável da  <code>cleartool</code></a></li>
 </ul>
 </li>
-<li><a href="#_começando_a_trabalhar_com_arquivos_com_controle_de_versão">Começando a Trabalhar com Arquivos com Controle de Versão</a>
-<ul class="sectlevel2">
-<li><a href="#_abrindo_um_projeto_existente_no_ide">Abrindo um Projeto Existente no IDE</a></li>
-<li><a href="#_criando_um_novo_projeto_e_colocando_o_no_controle_de_código_fonte">Criando um Novo Projeto e Colocando-o no Controle de Código-fonte</a></li>
-</ul>
-</li>
-<li><a href="#_fazendo_check_out_dos_códigos_fonte">Fazendo Check-out dos Códigos-fonte</a></li>
-<li><a href="#_editando_códigos_fonte">Editando Códigos-fonte</a>
-<ul class="sectlevel2">
-<li><a href="#_exibindo_alterações_no_editor_de_código_fonte">Exibindo alterações no Editor de Código-fonte</a></li>
-<li><a href="#_exibindo_informações_de_status_do_arquivo">Exibindo Informações de Status do Arquivo</a></li>
-<li><a href="#_comparando_versões_de_arquivo">Comparando Versões de Arquivo</a></li>
-</ul>
-</li>
-<li><a href="#_fazendo_check_in_de_códigos_fonte">Fazendo Check-in de Códigos-fonte</a></li>
-<li><a href="#_consulte_também">Consulte Também</a></li>
 </ul>
 </div>
 <div id="preamble">
@@ -228,16 +212,19 @@
 </div>
 <div class="openblock">
 <div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
-</div>
-</div>
+
 </div>
 </div>
 </li>
 </ol>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -255,12 +242,9 @@
 <div class="paragraph">
 <p>*Observação: *Para obter mais informações, consulte <a href="http://versioncontrol.netbeans.org/clearcase/install.html">Notas da Release e Configuração de Integração de ClearCase do NetBeans</a>.</p>
 </div>
+<div class="paragraph">
+<p>== Começando a Trabalhar com Arquivos com Controle de Versão</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_começando_a_trabalhar_com_arquivos_com_controle_de_versão">Começando a Trabalhar com Arquivos com Controle de Versão</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Ao trabalhar com o ClearCase no IDE pela primeira vez, você precisa começar abrindo um projeto com controle de versão existente, ou criando um novo projeto em uma <strong>view do ClearCase</strong> no computador.</p>
 </div>
@@ -274,8 +258,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_abrindo_um_projeto_existente_no_ide">Abrindo um Projeto Existente no IDE</h3>
+<div class="paragraph">
+<p>=== Abrindo um Projeto Existente no IDE</p>
+</div>
 <div class="paragraph">
 <p>Caso já possua um projeto com controle de versão do ClearCase com o qual tem trabalhado, você pode abri-lo no IDE e as funcionalidades de controle de versão se tornam automaticamente disponíveis. O IDE examina os projetos abertos e se eles estiverem localizados em um diretório de view do ClearCase, o status do arquivo e o suporte contextual se tornam automaticamente ativos.</p>
 </div>
@@ -292,9 +277,9 @@
 <div class="paragraph">
 <p>*Observação: *Você também pode abrir um projeto ou diretório na janela Favoritos. Isso pode ser necessário se o seu diretório do ClearCase não for um projeto do NetBeans. Para fazê-lo, clique com o botão direito do mouse na janela Favoritos (Ctrl-3) e escolha Adicionar aos Favoritos. Na caixa de diálogo Adicionar aos Favoritos que é exibida, navegue para o diretório de view de nível superior do ClearCase em seu computador e clique em Adicionar. Uma view em árvore do diretório é adicio [...]
 </div>
+<div class="paragraph">
+<p>=== Criando um Novo Projeto e Colocando-o no Controle de Código-fonte</p>
 </div>
-<div class="sect2">
-<h3 id="_criando_um_novo_projeto_e_colocando_o_no_controle_de_código_fonte">Criando um Novo Projeto e Colocando-o no Controle de Código-fonte</h3>
 <div class="paragraph">
 <p>Como alternativa, você pode criar um novo projeto e colocá-lo no controle de versão do ClearCase, e continuar a trabalhar no IDE. Quando você cria um novo projeto, é necessário especificar sua localização <strong>dentro de uma view do ClearCase</strong>. Isso permite que o IDE reconheça que o suporte a controle de versão é necessário. Quando o projeto é criado, todos os arquivos são inicialmente de <em>view privada</em>). Você pode adicionar o projeto ao servidor do ClearCase usando o [...]
 </div>
@@ -330,22 +315,22 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <pre>[.feature]</pre>
 </div>
 </div>
-<div class="openblock">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
+</li>
+</ol>
 </div>
 </div>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
 </div>
-</li>
-</ol>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Digite uma mensagem na área de texto Descrevendo a Mensagem. Se preferir, clique no ícone de Mensagens Recentes (image::images/recent-msgs.png[]) localizado no canto superior direito para ver e selecionar de uma lista de mensagens que você usou anteriormente existente.</p>
+<p>Digite uma mensagem na área de texto Descrevendo a Mensagem. Se preferir, clique no ícone de Mensagens Recentes (<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>) localizado no canto superior direito para ver e selecionar de uma lista de mensagens que você usou anteriormente existente.</p>
 </li>
 </ol>
 </div>
@@ -359,12 +344,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <div class="paragraph">
 <p>*Observação: *Na caixa de diálogo Adicionar, é possível especificar se arquivos individuais devem ser excluídos da ação Adicionar. Para fazê-lo, clique na coluna Ação de um arquivo selecionado e escolha Não adicionar, na lista drop-down.</p>
 </div>
+<div class="paragraph">
+<p>== Fazendo Check-out dos Códigos-fonte</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_fazendo_check_out_dos_códigos_fonte">Fazendo Check-out dos Códigos-fonte</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Quando tiver um projeto com controle de versão do ClearCase aberto no IDE, você pode começar a fazer alterações nos códigos-fonte. Modificar arquivos com controle de versão do ClearCase requer que eles tenham check-out ou sejam <em>capturados</em> primeiro. O suporte a ClearCase do NetBeans fornece duas formas de fazer isso:</p>
 </div>
@@ -381,11 +363,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <div class="paragraph">
 <p>A funcionalidade Fazer Check-out sob Demanda pode ser ajustada por meio da opção Checkout sob demanda na <a href="#ccOptions">caixa de diálogo Opções do ClearCase</a>.</p>
 </div>
+<div class="paragraph">
+<p>== Editando Códigos-fonte</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_editando_códigos_fonte">Editando Códigos-fonte</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Como acontece com qualquer projeto aberto no NetBeans IDE, é possível abrir os arquivos no Editor de Código-fonte clicando duas vezes em seus nós, conforme eles aparecem nas janelas do IDE (ou seja, janelas Projetos (Ctrl-1), Arquivos (Ctrl-2) e Favoritos (Ctrl-3)).</p>
 </div>
@@ -405,8 +385,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_exibindo_alterações_no_editor_de_código_fonte">Exibindo alterações no Editor de Código-fonte</h3>
+<div class="paragraph">
+<p>=== Exibindo alterações no Editor de Código-fonte</p>
+</div>
 <div class="paragraph">
 <p>Quando abre um arquivo com Controle de Versão no Editor de código-fonte do IDE, você pode ver alterações em tempo real acontecendo em seu arquivo, conforme ele é modificado em relação à versão anterior que sofreu check-out no repositório. Conforme você trabalha, o IDE usa a codificação de cor nas margens do Editor de Código-fonte para fornecer as seguintes informações:</p>
 </div>
@@ -446,168 +427,112 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/left-ui-small.png[role="left", link="images/left-ui.png"]&#8201;&#8212;&#8201;
-<strong>Margem esquerda</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="A codificação de cor do controle de versão é exibida na margem direita do editor"]
-<strong>Margem direita</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
-<div class="sect2">
-<h3 id="_exibindo_informações_de_status_do_arquivo">Exibindo Informações de Status do Arquivo</h3>
-<div class="paragraph">
-<p>Quando você está trabalhando nas janelas Projetos (Ctrl-1), Arquivos (Ctrl-2), Favoritos (Ctrl-3) ou de Controle de Versão, o IDE fornece várias funcionalidades visuais que ajudam a exibir as informações de status sobre seus arquivos. No exemplo a seguir, observe como o emblema (por exemplo, image::images/blue-badge.png[]), cor do nome do arquivo, e label de status adjacente, todos coincidem com outros para fornecer a você uma maneira efetiva e simples para controlar informações sobre [...]
 </div>
-<div class="imageblock">
+<div class="imageblock left">
 <div class="content">
-<img src="images/badge-example.jpg" alt="badge example">
-</div>
-<div class="title">Figure 2. emblema de controle de versão azul exibido na janela Favoritos</div>
-</div>
-<div class="paragraph">
-<p>Os emblemas, a codificação de cor, os labels de status do arquivo e, talvez o mais importante, a janela de Controle de Versão ajudam a exibir e gerenciar de forma eficiente as informações de controle de versão no IDE.</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="#badges">Emblemas e Codificação de Cor</a></p>
-</li>
-<li>
-<p><a href="#fileStatus">Labels de Status do Arquivo</a></p>
-</li>
-<li>
-<p><a href="#versioning">A Janela de Controle de Versão</a></p>
-</li>
-</ul>
+<a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a>
 </div>
-<div class="sect3">
-<h4 id="_emblemas_e_codificação_de_cor">Emblemas e Codificação de Cor</h4>
-<div class="paragraph">
-<p>Os emblemas são aplicados ao projeto, pasta e nós do pacote e informam o status dos arquivos contidos nesse nó:</p>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>A tabela a seguir exibe o esquema de cores usado nos emblemas:</p>
+<p><strong>Margem esquerda</strong> |<span class="image"><img src="images/right-ui.png" alt="right ui" title="A codificação de cor do controle de versão é exibida na margem direita do editor"></span>
+<strong>Margem direita</strong></p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">Componente de IU</th>
-<th class="tableblock halign-left valign-top">Descrição</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Emblema Azul</strong> (image::images/blue-badge.png[])</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Indica a presença de arquivos ou pastas que foram submetidos a check-out, capturados ou adicionados. No caso de pacotes, esse emblema se aplica somente ao pacote em si, e não aos seus subpacotes. Para projetos ou pastas, o emblema indica as alterações nesse item, ou em qualquer uma das subpastas contidas.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== Exibindo Informações de Status do Arquivo</p>
+<p class="tableblock">Quando você está trabalhando nas janelas Projetos (Ctrl-1), Arquivos (Ctrl-2), Favoritos (Ctrl-3) ou de Controle de Versão, o IDE fornece várias funcionalidades visuais que ajudam a exibir as informações de status sobre seus arquivos. No exemplo a seguir, observe como o emblema (por exemplo, <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>), cor do nome do arquivo, e label de status adjacente, todos coincidem com outros para fornecer a v [...]
+<p class="tableblock">image::images/badge-example.jpg[title="emblema de controle de versão azul exibido na janela Favoritos"]</p>
+<p class="tableblock">Os emblemas, a codificação de cor, os labels de status do arquivo e, talvez o mais importante, a janela de Controle de Versão ajudam a exibir e gerenciar de forma eficiente as informações de controle de versão no IDE.</p>
+<p class="tableblock">* <a href="#badges">Emblemas e Codificação de Cor</a>
+* <a href="#fileStatus">Labels de Status do Arquivo</a>
+* <a href="#versioning">A Janela de Controle de Versão</a></p>
+<p class="tableblock">==== Emblemas e Codificação de Cor</p>
+<p class="tableblock">Os emblemas são aplicados ao projeto, pasta e nós do pacote e informam o status dos arquivos contidos nesse nó:</p>
+<p class="tableblock">A tabela a seguir exibe o esquema de cores usado nos emblemas:</p></td>
 </tr>
 </tbody>
 </table>
 <div class="paragraph">
-<p>A codificação de cor é aplicada aos nomes de arquivo a fim de indicar seu status atual:</p>
+<p>|Componente de IU |Descrição</p>
+</div>
+<div class="paragraph">
+<p>|<strong>Emblema Azul</strong> (<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>) |Indica a presença de arquivos ou pastas que foram submetidos a check-out, capturados ou adicionados. No caso de pacotes, esse emblema se aplica somente ao pacote em si, e não aos seus subpacotes. Para projetos ou pastas, o emblema indica as alterações nesse item, ou em qualquer uma das subpastas contidas.</p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 33.3333%;">
-<col style="width: 33.3333%;">
-<col style="width: 33.3334%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">Cor</th>
-<th class="tableblock halign-left valign-top">Exemplo</th>
-<th class="tableblock halign-left valign-top">Descrição</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Azul</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Indica que o arquivo sofreu check-out.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Verde</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Indica que o arquivo é novo e ainda não foi adicionado ao controle de código-fonte.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Cinza</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Indica que o arquivo será ignorado pelo ClearCase e não será incluído em comandos de controle de versão (ou seja, Adicionar ao Controle de Códigos-Fonte ou Check-in). Os arquivos só podem ser ignorados caso ainda não tenham tido controle de versão.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tachado</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Indica que o arquivo será excluído de check-ins ou de operações Adicionar ao Controle de Código-Fonte. O texto tachado só aparece em locais específicos, tal como a janela de Controle de Versão, a caixa de diálogo Check-in e a caixa de diálogo Adicionar ao Controle de Códigos-fonte, quando você opta por excluir arquivos individuais de uma ação. Tais arquivos ainda são afetados por outros comandos do ClearCase, tais como A [...]
+<td class="tableblock halign-left valign-top"><p class="tableblock">A codificação de cor é aplicada aos nomes de arquivo a fim de indicar seu status atual:</p></td>
 </tr>
 </tbody>
 </table>
-</div>
-<div class="sect3">
-<h4 id="_labels_de_status_do_arquivo">Labels de Status do Arquivo</h4>
 <div class="paragraph">
-<p>Os labels de status do arquivo fornecem uma indicação textual do status dos arquivos com controle de versão nas janelas do IDE. Por default, o IDE exibe as informações de status (novo, reservado, não-reservado, ignorado, etc.) em texto cinza à direita dos arquivos, já que eles são listados em janelas. Entretanto, você pode modificar esse formato para que se adeque às suas necessidades. Por exemplo, se você quiser adicionar seletores de versão aos labels de status, faça o seguinte:</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>Escolha Ferramentas &gt; Opções (NetBeans &gt; Preferências no Mac) no menu principal. A janela Opções é aberta.</p>
-</li>
-<li>
-<p>Selecione o botão Diversos na parte superior da janela e clique na guia Controle de Versão abaixo dela. Garanta que ClearCase está selecionado abaixo de Sistemas de Controle de versão no painel esquerdo. (Consulte a <a href="#ccOptions">captura de tela</a> acima para referência.)</p>
-</li>
-<li>
-<p>Clique no botão Adicionar Variável à direita do campo de texto Formato do label de status. Na caixa de diálogo Adicionar Variável que é exibida, selecione a variável  <code>v2.5.1</code>  e clique em OK. A variável version é adicionada ao campo de texto Formato do label de status.</p>
-</li>
-<li>
-<p>Para reformatar os labels de status de forma que somente o seletor de status e de versão seja exibido à direita dos arquivos, reorganize o conteúdo do campo de texto Formato do Label de Status para o seguinte:</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[{status}; {version}]</code></pre>
-</div>
+<p>|Cor |Exemplo |Descrição</p>
 </div>
 <div class="paragraph">
-<p>Clique em OK. Os labels de status agora listam o seletor de status e versão do arquivo (onde aplicável):</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/file-labels.jpg" alt="file labels">
-</div>
-<div class="title">Figure 3. os labels de arquivo são exibidos próximo aos nomes de arquivo</div>
+<p>|<strong>Azul</strong> |<span class="image"><img src="images/blue-text.png" alt="blue text"></span> |Indica que o arquivo sofreu check-out.</p>
 </div>
 <div class="paragraph">
-<p>Os labels de status do arquivo podem ser ativados e desativados, ao selecionar Exibir &gt; Mostrar Labels de Controle de Versão no menu principal.</p>
-</div>
+<p>|<strong>Verde</strong> |<span class="image"><img src="images/green-text.png" alt="green text"></span> |Indica que o arquivo é novo e ainda não foi adicionado ao controle de código-fonte.</p>
 </div>
-<div class="sect3">
-<h4 id="_a_janela_de_controle_de_versão">A Janela de Controle de Versão</h4>
 <div class="paragraph">
-<p>A janela de Controle de Versão do ClearCase fornece uma lista em tempo real de todas as alterações feitas nos arquivos em uma pasta selecionada da sua cópia de trabalho local. Ele é aberto por default no painel inferior do IDE, listando arquivos novos, com check-out ou que foram modificados.</p>
+<p>|<strong>Cinza</strong> |<span class="image"><img src="images/gray-text.png" alt="gray text"></span> |Indica que o arquivo será ignorado pelo ClearCase e não será incluído em comandos de controle de versão (ou seja, Adicionar ao Controle de Códigos-Fonte ou Check-in). Os arquivos só podem ser ignorados caso ainda não tenham tido controle de versão.</p>
 </div>
 <div class="paragraph">
-<p>Para abrir a janela de Controle de Versão, selecione um arquivo ou pasta com controle de versão (ou seja, na janela Projetos, Arquivos ou Favoritos) e escolha ClearCase &gt; Mostrar Alterações no menu de contexto, ou escolha Controle de Versão &gt; Mostrar Alterações no menu principal. A janela seguinte aparece na parte inferior do IDE:</p>
+<p>|<strong>Tachado</strong> |<span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span> |Indica que o arquivo será excluído de check-ins ou de operações Adicionar ao Controle de Código-Fonte. O texto tachado só aparece em locais específicos, tal como a janela de Controle de Versão, a caixa de diálogo Check-in e a caixa de diálogo Adicionar ao Controle de Códigos-fonte, quando você opta por excluir arquivos individuais de uma ação. Tais arquivos ainda [...]
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">==== Labels de Status do Arquivo</p>
+<p class="tableblock">Os labels de status do arquivo fornecem uma indicação textual do status dos arquivos com controle de versão nas janelas do IDE. Por default, o IDE exibe as informações de status (novo, reservado, não-reservado, ignorado, etc.) em texto cinza à direita dos arquivos, já que eles são listados em janelas. Entretanto, você pode modificar esse formato para que se adeque às suas necessidades. Por exemplo, se você quiser adicionar seletores de versão aos labels de status, f [...]
+<p class="tableblock">1. Escolha Ferramentas &gt; Opções (NetBeans &gt; Preferências no Mac) no menu principal. A janela Opções é aberta.
+2. Selecione o botão Diversos na parte superior da janela e clique na guia Controle de Versão abaixo dela. Garanta que ClearCase está selecionado abaixo de Sistemas de Controle de versão no painel esquerdo. (Consulte a <a href="#ccOptions">captura de tela</a> acima para referência.)
+3. Clique no botão Adicionar Variável à direita do campo de texto Formato do label de status. Na caixa de diálogo Adicionar Variável que é exibida, selecione a variável  <code>v2.5.1</code>  e clique em OK. A variável version é adicionada ao campo de texto Formato do label de status.
+4. Para reformatar os labels de status de forma que somente o seletor de status e de versão seja exibido à direita dos arquivos, reorganize o conteúdo do campo de texto Formato do Label de Status para o seguinte:</p>
+<p class="tableblock">[source,java]
+----</p>
+<p class="tableblock">[{status}; v2.5.1]
+----
+Clique em OK. Os labels de status agora listam o seletor de status e versão do arquivo (onde aplicável):</p>
+<p class="tableblock">image::images/file-labels.jpg[title="os labels de arquivo são exibidos próximo aos nomes de arquivo"]</p>
+<p class="tableblock">Os labels de status do arquivo podem ser ativados e desativados, ao selecionar Exibir &gt; Mostrar Labels de Controle de Versão no menu principal.</p>
+<p class="tableblock">==== A Janela de Controle de Versão</p>
+<p class="tableblock">A janela de Controle de Versão do ClearCase fornece uma lista em tempo real de todas as alterações feitas nos arquivos em uma pasta selecionada da sua cópia de trabalho local. Ele é aberto por default no painel inferior do IDE, listando arquivos novos, com check-out ou que foram modificados.</p>
+<p class="tableblock">Para abrir a janela de Controle de Versão, selecione um arquivo ou pasta com controle de versão (ou seja, na janela Projetos, Arquivos ou Favoritos) e escolha ClearCase &gt; Mostrar Alterações no menu de contexto, ou escolha Controle de Versão &gt; Mostrar Alterações no menu principal. A janela seguinte aparece na parte inferior do IDE:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/versioning-window.jpg"><img src="images/versioning-window-small.jpg" alt="versioning window small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>Por default, a janela de Controle de Versão exibe uma lista de todos os arquivos do pacote ou pasta selecionado que exibem um status relevante (ou seja, novo, reservado, não reservado, etc.). Você pode clicar nos títulos das colunas acima dos arquivos listados para classificá-los por nome, status, localização ou regra.</p>
 </div>
@@ -629,22 +554,22 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Atualizar Status</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Atualiza o status dos arquivos e pastas selecionados. Os arquivos exibidos na janela de Controle de Versão podem ser atualizados para refletir quaisquer alterações feitas externamente.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Diferenciar Tudo</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Abre o Visualizador de Diferenciação fornecendo uma comparação lado a lado de suas cópias locais e as versões mantidas no repositório.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Atualizar Todos</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Atualiza todos os arquivos selecionados. (Aplica-se somente à views de snapshot.)</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Fazer Check-in de todos</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Permite que você faça check-in das alterações locais.</p></td>
 </tr>
@@ -657,7 +582,7 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <div class="content">
 <img src="images/versioning-right-click.jpg" alt="versioning right click">
 </div>
-<div class="title">Figure 4. Clicar com o botão direito no menu exibe um arquivo selecionado na janela Controle de Versão</div>
+<div class="title">Figure 2. Clicar com o botão direito no menu exibe um arquivo selecionado na janela Controle de Versão</div>
 </div>
 <div class="paragraph">
 <p>Por exemplo, execute as ações a seguir em um arquivo:</p>
@@ -672,41 +597,53 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <p class="tableblock">Exibe o autor e as informações do número da revisão na margem esquerda dos arquivos abertos no Editor de Código-fonte.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]&#8201;&#8212;&#8201;</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Excluir do Check-in</strong>:</p>
-<p class="tableblock">Permite que você marque o arquivo para ser excluído ao realizar um check-in.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/exclude-from-checkin.jpg[title="Arquivos são marcados como excluídos na caixa de diálogo de Fazer Check-in"]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
-<div class="sect2">
-<h3 id="_comparando_versões_de_arquivo">Comparando Versões de Arquivo</h3>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/annotations.jpg"><img src="images/annotations-small.jpg" alt="annotations small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>Comparar versões de arquivo é uma tarefa comum ao se trabalhar com projetos com controle de versão. O IDE permite que você compare versões, usando o comando Diferenciar, que está disponível no menu de contexto de um item selecionado (ClearCase &gt; Diferenciar), assim como na janela de Controle de Versão. Na janela de Controle de Versão, você pode executar diferenciais clicando duas vezes em um arquivo listado, caso contrário, você pode clicar no ícone Diferenciar Todos (image::images [...]
+<p>|* <strong>Excluir do Check-in</strong>:</p>
 </div>
 <div class="paragraph">
-<p>Quando você executa a diferenciação, um Visualizador de Diferenciação se abre para o(s) arquivo(s) selecionado(s) na janela principal do IDE. O Visualizador de Diferenciação exibe duas cópias nos painéis lado a lado:</p>
+<p>Permite que você marque o arquivo para ser excluído ao realizar um check-in.
+ |<span class="image"><img src="images/exclude-from-checkin.jpg" alt="exclude from checkin" title="Arquivos são marcados como excluídos na caixa de diálogo de Fazer Check-in"></span></p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== Comparando Versões de Arquivo</p>
+<p class="tableblock">Comparar versões de arquivo é uma tarefa comum ao se trabalhar com projetos com controle de versão. O IDE permite que você compare versões, usando o comando Diferenciar, que está disponível no menu de contexto de um item selecionado (ClearCase &gt; Diferenciar), assim como na janela de Controle de Versão. Na janela de Controle de Versão, você pode executar diferenciais clicando duas vezes em um arquivo listado, caso contrário, você pode clicar no ícone Diferenciar T [...]
+<p class="tableblock">Quando você executa a diferenciação, um Visualizador de Diferenciação se abre para o(s) arquivo(s) selecionado(s) na janela principal do IDE. O Visualizador de Diferenciação exibe duas cópias nos painéis lado a lado:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/diff-viewer.jpg"><img src="images/diff-viewer-small.jpg" alt="diff viewer small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>O visualizador de Diferenciação usa a mesma <a href="#viewingChanges">codificação de cor</a> usada para exibir alterações de controle de versão. Na captura de tela exibida acima, o bloco verde indica o conteúdo que foi adicionado à versão mais atual. O bloco vermelho indica que o conteúdo da versão anterior foi removido da última. Azul indica que as alterações ocorreram na(s) linha(s) realçada(s).</p>
 </div>
 <div class="paragraph">
-<p>Além disso, ao executar uma diferenciação em um grupo de arquivos, como em um projeto, pacote ou pasta, ou quando clicar em diferenciar todos (image::images/diff.png[]), você pode alternar entre diferenciais clicando em arquivos listados na região superior do Visualizador de Diferenciação.</p>
+<p>Além disso, ao executar uma diferenciação em um grupo de arquivos, como em um projeto, pacote ou pasta, ou quando clicar em diferenciar todos (<span class="image"><img src="images/diff.png" alt="diff"></span>), você pode alternar entre diferenciais clicando em arquivos listados na região superior do Visualizador de Diferenciação.</p>
 </div>
 <div class="paragraph">
 <p>A ferramenta Visualizador de Diferenciação fornece a seguinte funcionalidade:</p>
@@ -721,8 +658,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </li>
 </ul>
 </div>
-<div class="sect3">
-<h4 id="_fazer_alterações_em_arquivo_submetido_a_check_out">Fazer Alterações em arquivo submetido a check-out</h4>
+<div class="paragraph">
+<p>==== Fazer Alterações em arquivo submetido a check-out</p>
+</div>
 <div class="paragraph">
 <p>Se você estiver diferenciando arquivos submetidos a check-out, você poderá fazer alterações diretamente no Visualizador de Diferenciação. Para fazer isso, você pode colocar o cursor no painel direito do Visualizador de Diferenciação e modificar seu arquivo adequadamente, caso contrário, use os ícones in-line exibidos ao lado de cada alteração realçada:</p>
 </div>
@@ -733,24 +671,24 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Substituir</strong> (image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Substituir</strong> (<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">Insere o texto realçado das versões anteriores na versão submetida a check-out</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mover Todos</strong> (image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mover Todos</strong> (<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Reverte a versão do arquivo check-out para o estado da versão anterior selecionada</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remover</strong> (image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remover</strong> (<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Remove o texto realçado da versão atual com check-out para que ela espelhe a versão anterior</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>==== Navegar nas Diferenças entre Arquivos Comparados</p>
 </div>
-<div class="sect3">
-<h4 id="_navegar_nas_diferenças_entre_arquivos_comparados">Navegar nas Diferenças entre Arquivos Comparados</h4>
 <div class="paragraph">
 <p>Se a sua comparação contém várias diferenças, você pode navegar nelas, usando os ícones de seta exibidos na barra de ferramentas. Os ícones de seta permitem que você exiba as diferenças conforme elas aparecem na parte do início ao fim:</p>
 </div>
@@ -761,24 +699,20 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Anterior</strong> (image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Anterior</strong> (<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">Vai para a diferença anterior exibida na diferenciação</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Próximo</strong> (image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Próximo</strong> (<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Vai para a próxima diferença exibida na diferenciação</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>== Fazendo Check-in de Códigos-fonte</p>
 </div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_fazendo_check_in_de_códigos_fonte">Fazendo Check-in de Códigos-fonte</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Depois de fazer alterações nos códigos-fonte, você faz check-in delas no repositório. O IDE permite que você chame o comando Check-in das seguintes formas:</p>
 </div>
@@ -788,7 +722,7 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <p>Nas janelas Projetos, Arquivos ou Favoritos, clique com o botão direito do mouse nos itens novos ou que foram submetidos a check-out e escolha ClearCase &gt; Fazer Check-in.</p>
 </li>
 <li>
-<p>Na janela Visualizador de Controle de Versão ou de Diferenciação, clique no botão Fazer Check-in de Todos (image::images/commit.png[]) localizado na barra de ferramentas.</p>
+<p>Na janela Visualizador de Controle de Versão ou de Diferenciação, clique no botão Fazer Check-in de Todos (<span class="image"><img src="images/commit.png" alt="commit"></span>) localizado na barra de ferramentas.</p>
 </li>
 </ul>
 </div>
@@ -805,15 +739,15 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </li>
 </ul>
 </div>
-<div class="openblock feature">
-<div class="content">
+</div>
+</div>
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/checkin-dialog.png"><img src="images/checkin-dialog-small.png" alt="checkin dialog small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>Na caixa de diálogo Fazer Check-in é possível especificar se devem ser excluídos arquivos individuais do check-in. Para fazer isso, clique na coluna Ação de Check-in de um item selecionado e escolha Excluir do check-in na lista drop-down.</p>
 </div>
@@ -823,7 +757,7 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Digite uma mensagem de check-in na área de texto Mensagem de Check-in. Se preferir, clique no ícone de Mensagens Recentes (image::images/recent-msgs.png[]) localizado no canto superior direito para ver e selecionar de uma lista de mensagens que você usou anteriormente existente.</p>
+<p>Digite uma mensagem de check-in na área de texto Mensagem de Check-in. Se preferir, clique no ícone de Mensagens Recentes (<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>) localizado no canto superior direito para ver e selecionar de uma lista de mensagens que você usou anteriormente existente.</p>
 </li>
 <li>
 <p>Depois de especificar ações para arquivos individuais, clique em Fazer Check-in. O IDE executa o check-in. A barra de status do IDE, localizada na parte inferior direita da interface, é exibida à medida que a ação Fazer Check-in acontece. Com um check-in bem-sucedido, os emblemas de controle de versão desaparecem das janelas Projetos, Arquivos e Favoritos, e a codificação de cor dos arquivos que estão check-in fica em preto.
@@ -831,11 +765,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>== Consulte Também</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_consulte_também">Consulte Também</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Isso conclui o Tour Guiado do ClearCase para o NetBeans IDE. Este documento demonstra como executar tarefas de controle de versão básicas no IDE ao guiá-lo por meio do fluxo de trabalho padrão ao usar o suporte ClearCase do IDE.</p>
 </div>
@@ -869,6 +801,9 @@ Durante a criação, o IDE reconhece automaticamente que o projeto está em uma
 </div>
 </div>
 </div>
+</div>
+</div>
+</div>
             
 <section class='tools'>
     <ul class="menu align-center">
diff --git a/content/kb/docs/ide/clearcase_ru.html b/content/kb/docs/ide/clearcase_ru.html
index 49600d9..def54e9 100644
--- a/content/kb/docs/ide/clearcase_ru.html
+++ b/content/kb/docs/ide/clearcase_ru.html
@@ -102,22 +102,6 @@
 <li><a href="#_Указание_пути_к_исполняемому_файлу_code_cleartool_code">Указание пути к исполняемому файлу  <code>cleartool</code></a></li>
 </ul>
 </li>
-<li><a href="#_Начало_работы_над_файлами_с_контролем_версий">Начало работы над файлами с контролем версий</a>
-<ul class="sectlevel2">
-<li><a href="#_Открытие_существующего_проекта_в_среде_ide">Открытие существующего проекта в среде IDE</a></li>
-<li><a href="#_Создание_нового_проекта_и_постановка_его_под_контроль_версий">Создание нового проекта и постановка его под контроль версий</a></li>
-</ul>
-</li>
-<li><a href="#_Взятие_файлов_исходного_кода_для_изменения">Взятие файлов исходного кода для изменения</a></li>
-<li><a href="#_Изменение_файлов_исходного_кода">Изменение файлов исходного кода</a>
-<ul class="sectlevel2">
-<li><a href="#_Просмотр_изменений_в_редакторе_исходного_кода">Просмотр изменений в редакторе исходного кода</a></li>
-<li><a href="#_Просмотр_информации_о_состоянии_файла">Просмотр информации о состоянии файла</a></li>
-<li><a href="#_Сравнение_версий_файлов">Сравнение версий файлов</a></li>
-</ul>
-</li>
-<li><a href="#_Возврат_файлов_исходного_кода_после_изменения">Возврат файлов исходного кода после изменения</a></li>
-<li><a href="#_Дополнительные_сведения">Дополнительные сведения</a></li>
 </ul>
 </div>
 <div id="preamble">
@@ -228,16 +212,19 @@
 </div>
 <div class="openblock">
 <div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
-</div>
-</div>
+
 </div>
 </div>
 </li>
 </ol>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -255,12 +242,9 @@
 <div class="paragraph">
 <p>*Примечание. * Дополнительные сведения приведены в документе <a href="http://versioncontrol.netbeans.org/clearcase/install.html">Настройка интеграции ClearCase в среде IDE NetBeans и заметки о выпуске</a>.</p>
 </div>
+<div class="paragraph">
+<p>== Начало работы над файлами с контролем версий</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_Начало_работы_над_файлами_с_контролем_версий">Начало работы над файлами с контролем версий</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>При первом использовании ClearCase в среде IDE необходимо начать с открытия существующего проекта с контролем версий или создания нового проекта <strong>внутри представления ClearCase</strong> на компьютере.</p>
 </div>
@@ -274,8 +258,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_Открытие_существующего_проекта_в_среде_ide">Открытие существующего проекта в среде IDE</h3>
+<div class="paragraph">
+<p>=== Открытие существующего проекта в среде IDE</p>
+</div>
 <div class="paragraph">
 <p>Если уже имеется проект ClearCase с контролем версий, над которым шла работа, его можно открыть в среде IDE, и функции контроля версий автоматически станут доступными. Среда IDE выполняет поиск по открытым проектам, и если они расположены в каталоге представления ClearCase, состояние файла и контекстная поддержка автоматически становятся доступными.</p>
 </div>
@@ -292,9 +277,9 @@
 <div class="paragraph">
 <p>*Примечание. *Также можно открыть проект или каталог в окне 'Избранное'. Это может быть необходимо, если каталог ClearCase не является проектом NetBeans. Для этого щелкните правой кнопкой мыши в окне 'Избранное' (Ctrl-3) и выбрав 'Добавить в Избранное'. В появившемся диалоговом окне добавления к избранному перейдите к каталогу представления ClearCase верхнего уровня на своем компьютере и нажмите кнопку Add ("Добавить"). К окну избранного будет добавлено представление каталога в виде д [...]
 </div>
+<div class="paragraph">
+<p>=== Создание нового проекта и постановка его под контроль версий</p>
 </div>
-<div class="sect2">
-<h3 id="_Создание_нового_проекта_и_постановка_его_под_контроль_версий">Создание нового проекта и постановка его под контроль версий</h3>
 <div class="paragraph">
 <p>Как вариант, можно создать новый проект и поставить его под контроль версий ClearCase, после чего продолжить работу в среде IDE. При создании нового проекта необходимо указать его местоположение <strong>внутри представления ClearCase</strong>. Это позволяет среде IDE обнаружить, что требуется поддержка контроля версий. При создании проекта все файлы первоначально находятся в состоянии <em>для частного просмотра</em>). После этого можно добавить проект к серверу ClearCase, используя ко [...]
 </div>
@@ -330,22 +315,22 @@
 <pre>[.feature]</pre>
 </div>
 </div>
-<div class="openblock">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
+</li>
+</ol>
 </div>
 </div>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
 </div>
-</li>
-</ol>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>Введите сообщение в текстовую область Describing Message ("Сообщение с описанием"), В качестве альтернативы щелкните значок 'Последние сообщения' ( image::images/recent-msgs.png[] ), расположенный в правом верхнем углу, чтобы просмотреть и выбрать необходимое из ранее использованного списка сообщений.</p>
+<p>Введите сообщение в текстовую область Describing Message ("Сообщение с описанием"), В качестве альтернативы щелкните значок 'Последние сообщения' ( <span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span> ), расположенный в правом верхнем углу, чтобы просмотреть и выбрать необходимое из ранее использованного списка сообщений.</p>
 </li>
 </ol>
 </div>
@@ -359,12 +344,9 @@
 <div class="paragraph">
 <p>*Примечание. *В диалоговом окне 'Добавить' можно указать, следует ли исключить отдельные файлы из действия 'Добавить'. Чтобы сделать это, щелкните столбец Action ("Действие") выбранного файла и выберите Do not Add ("Не добавлять") из раскрывающегося списка.</p>
 </div>
+<div class="paragraph">
+<p>== Взятие файлов исходного кода для изменения</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_Взятие_файлов_исходного_кода_для_изменения">Взятие файлов исходного кода для изменения</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>После того, как проект с управлением версиями ClearCase открыт в среде IDE, можно приступить к внесению изменений в файлы исходного кода. Для изменения файлов под управлением версиями ClearCase их сперва нужно взять для изменения или <em>захватить</em>. Поддержка ClearCase в среде IDE NetBeans предоставляет два способа сделать это:</p>
 </div>
@@ -381,11 +363,9 @@
 <div class="paragraph">
 <p>Функцию взятия для изменения по требованию можно настроить под свои требования, используя параметр On Demand checkout ("Взятие для изменения по требованию") в диалоговом окне <a href="#ccOptions">Options ("Параметры") ClearCase</a>.</p>
 </div>
+<div class="paragraph">
+<p>== Изменение файлов исходного кода</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_Изменение_файлов_исходного_кода">Изменение файлов исходного кода</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>Как и в случае с любым проектом в IDE NetBeans, пользователи могут открывать файлы в редакторе исходного кода двойным щелчком их узлов, как они отображаются в окнах IDE (например, Проекты (Ctrl-1), файлы (Ctrl-2), Избранное (Ctrl-3) Windows).</p>
 </div>
@@ -405,8 +385,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_Просмотр_изменений_в_редакторе_исходного_кода">Просмотр изменений в редакторе исходного кода</h3>
+<div class="paragraph">
+<p>=== Просмотр изменений в редакторе исходного кода</p>
+</div>
 <div class="paragraph">
 <p>Открыв файл под контролем версий в редакторе исходного кода среды IDE, можно просматривать изменения, происходящие с файлом, в реальном времени по мере внесения изменений в ранее взятую из хранилища для изменения версию. По ходу работы среда IDE использует условные цвета на полях редактора файлов исходного кода для передачи следующей информации:</p>
 </div>
@@ -446,168 +427,112 @@
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/left-ui-small.png[role="left", link="images/left-ui.png"]&#8201;&#8212;&#8201;
-<strong>Левое поле</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="Цветовая кодировка управления версиями отображается на правой границе редактора"]
-<strong>Правое поле</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
-<div class="sect2">
-<h3 id="_Просмотр_информации_о_состоянии_файла">Просмотр информации о состоянии файла</h3>
-<div class="paragraph">
-<p>При работе в окнах Projects ("Проекты") (Ctrl-1), Files ("Файлы") (Ctrl-2), Favorites ("Избранное") (Ctrl-3) или Versioning ("Управление версиями") среда IDE предоставляет несколько визуальных функций, помогающих в просмотре информации о состоянии файлов. В примере, приведенном ниже, обратите внимание, как метка (например, image::images/blue-badge.png[]), цвет имени файла и смежная метка состояния соответствуют друг другу для предоставления для пользователей простого и эффективного сп [...]
 </div>
-<div class="imageblock">
+<div class="imageblock left">
 <div class="content">
-<img src="images/badge-example.jpg" alt="badge example">
-</div>
-<div class="title">Figure 2. синяя метка управления версиями отображается в окне 'Избранное'</div>
-</div>
-<div class="paragraph">
-<p>Метки, условные цвета, ярлыки состояния файлов и, что, пожалуй, наиболее важно, окно контроля версий вместе дают дополнительные возможности по просмотру и управлению сведениями о версиях в среде IDE.</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="#badges">Метки и условные цвета</a></p>
-</li>
-<li>
-<p><a href="#fileStatus">Ярлыки состояния файлов</a></p>
-</li>
-<li>
-<p><a href="#versioning">Окно управления версиями</a></p>
-</li>
-</ul>
+<a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a>
 </div>
-<div class="sect3">
-<h4 id="_Метки_и_условные_цвета">Метки и условные цвета</h4>
-<div class="paragraph">
-<p>Метки относятся к узлам проектов, папок и пакетов. Они сообщают о состоянии файлов внутри соответствующего узла:</p>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>Ниже в таблице приведена цветовая схема, используемая для меток.</p>
+<p><strong>Левое поле</strong> |<span class="image"><img src="images/right-ui.png" alt="right ui" title="Цветовая кодировка управления версиями отображается на правой границе редактора"></span>
+<strong>Правое поле</strong></p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">Элемент пользовательского интерфейса</th>
-<th class="tableblock halign-left valign-top">Описание</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Синяя метка</strong> (image::images/blue-badge.png[])</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Указывает на присутствие файлов или папок, которые были взяты для изменения, захвачены или добавлены. Касательно пакетов, данная метка относится только к самому пакету, но не к его подпакетам. Что касается проектов и папок, метка указывает на изменения как внутри самого элемента, так и внутри любых его подпапок.</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== Просмотр информации о состоянии файла</p>
+<p class="tableblock">При работе в окнах Projects ("Проекты") (Ctrl-1), Files ("Файлы") (Ctrl-2), Favorites ("Избранное") (Ctrl-3) или Versioning ("Управление версиями") среда IDE предоставляет несколько визуальных функций, помогающих в просмотре информации о состоянии файлов. В примере, приведенном ниже, обратите внимание, как метка (например, <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>), цвет имени файла и смежная метка состояния соответствуют друг дру [...]
+<p class="tableblock">image::images/badge-example.jpg[title="синяя метка управления версиями отображается в окне 'Избранное'"]</p>
+<p class="tableblock">Метки, условные цвета, ярлыки состояния файлов и, что, пожалуй, наиболее важно, окно контроля версий вместе дают дополнительные возможности по просмотру и управлению сведениями о версиях в среде IDE.</p>
+<p class="tableblock">* <a href="#badges">Метки и условные цвета</a>
+* <a href="#fileStatus">Ярлыки состояния файлов</a>
+* <a href="#versioning">Окно управления версиями</a></p>
+<p class="tableblock">==== Метки и условные цвета</p>
+<p class="tableblock">Метки относятся к узлам проектов, папок и пакетов. Они сообщают о состоянии файлов внутри соответствующего узла:</p>
+<p class="tableblock">Ниже в таблице приведена цветовая схема, используемая для меток.</p></td>
 </tr>
 </tbody>
 </table>
 <div class="paragraph">
-<p>Условные цвета применяются к именам файлов, чтобы указать текущее состояние этих файлов:</p>
+<p>|Элемент пользовательского интерфейса |Описание</p>
+</div>
+<div class="paragraph">
+<p>|<strong>Синяя метка</strong> (<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>) |Указывает на присутствие файлов или папок, которые были взяты для изменения, захвачены или добавлены. Касательно пакетов, данная метка относится только к самому пакету, но не к его подпакетам. Что касается проектов и папок, метка указывает на изменения как внутри самого элемента, так и внутри любых его подпапок.</p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 33.3333%;">
-<col style="width: 33.3333%;">
-<col style="width: 33.3334%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">Цвет</th>
-<th class="tableblock halign-left valign-top">Пример</th>
-<th class="tableblock halign-left valign-top">Описание</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Синий</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Указывает, что файл взят для изменения.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Зеленый</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Указывает, что файл новый и еще не добавлен под контроль версий.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Серый</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Указывает, что данный файл игнорируется ClearCase и не будет охвачен командами контроля версий (например, Add to Source Control ("Добавить под контроль версий") или Checkin ("Возврат после изменения")). Файлы можно сделать игнорируемыми, только если они еще не добавлены под контроль версий.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Перечеркивание</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">Указывает, что файл не будет затронут операциями возврата после изменения или добавления под контроль версий. Перечеркнутый текст появляется только в определенных местах, таких как диалог возврата после изменения окна контроля версий и диалог добавления под контроль версий, где можно выбрать исключение из действия для отдельных файлов. Подобные файлы затрагиваются прочими командами ClearCase, такими как Update ("Обновлен [...]
+<td class="tableblock halign-left valign-top"><p class="tableblock">Условные цвета применяются к именам файлов, чтобы указать текущее состояние этих файлов:</p></td>
 </tr>
 </tbody>
 </table>
-</div>
-<div class="sect3">
-<h4 id="_Ярлыки_состояния_файлов">Ярлыки состояния файлов</h4>
 <div class="paragraph">
-<p>Ярлыки состояния файлов предоставляют в окнах среды IDE текстовое указание на состояние файлов, включенных в управление версиями. По умолчанию сведения о состоянии отображения среды IDE (новый, зарезервированный, незарезервированный, игнорируемый и т. д.) отображаются серым цветом справа от файлов, перечисленных в окнах. Однако этот формат можно изменить под свои потребности. Например, если к ярлыкам состояния необходимо добавить селекторы версий, сделайте следующее:</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>Выберите Tools ("Сервис") &gt; Options ("Параметры") (NetBeans &gt; Preferences ("Настройки") на Mac) из главного меню. Откроется окно "Options".</p>
-</li>
-<li>
-<p>Выберите кнопку Miscellaneous ("Разное") наверху диалогового окна, затем щелкните вкладку Versioning ("Контроль версий") под ним. Убедитесь, что ClearCase выбран в Versioning Systems ("Системы управления версиями") на левой панели. (Для справки см. <a href="#ccOptions">снимок экрана</a> выше).</p>
-</li>
-<li>
-<p>Нажмите кнопку Add Variable ("Добавить переменную") справа от текстового поля строки состояния Format ("Формат"). В отображаемом диалоговом окне Add Variable ("Добавить переменную") выберите переменную  <code>v2.5.1</code>  и нажмите кнопку "ОК". Переменная версии добавляется к текстовому полю Format ярлыка состояния.</p>
-</li>
-<li>
-<p>Для изменения формата ярлыков состояния, чтобы справа от файлов отображались только состояние и селектор версий, измените содержимое текстового поля Status Label Format (формат ярлыка состояния) на следующее:</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[{status}; {version}]</code></pre>
-</div>
+<p>|Цвет |Пример |Описание</p>
 </div>
 <div class="paragraph">
-<p>Нажмите кнопку "ОК". В ярлыках состояния теперь приводятся состояние файла и селектор версий (где он есть):</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/file-labels.jpg" alt="file labels">
-</div>
-<div class="title">Figure 3. метки файлов, отображаемые рядом с именами файлов</div>
+<p>|<strong>Синий</strong> |<span class="image"><img src="images/blue-text.png" alt="blue text"></span> |Указывает, что файл взят для изменения.</p>
 </div>
 <div class="paragraph">
-<p>Ярлыки состояния файлов можно включать и отключать, выбирая View ("Представление") &gt; Show Versioning Labels ("Показать ярлыки версий") из главного меню.</p>
-</div>
+<p>|<strong>Зеленый</strong> |<span class="image"><img src="images/green-text.png" alt="green text"></span> |Указывает, что файл новый и еще не добавлен под контроль версий.</p>
 </div>
-<div class="sect3">
-<h4 id="_Окно_контроля_версий">Окно контроля версий</h4>
 <div class="paragraph">
-<p>Окно Versioning ("Контроль версий") ClearCase предоставляет обновляемый в реальном времени список всех изменений, внесенных в файлы внутри выбранной папки или локальной рабочей копии. По умолчанию оно открывается в нижней панели среды IDE, в нём отображаются новые, взятые для изменения и захваченные файлы.</p>
+<p>|<strong>Серый</strong> |<span class="image"><img src="images/gray-text.png" alt="gray text"></span> |Указывает, что данный файл игнорируется ClearCase и не будет охвачен командами контроля версий (например, Add to Source Control ("Добавить под контроль версий") или Checkin ("Возврат после изменения")). Файлы можно сделать игнорируемыми, только если они еще не добавлены под контроль версий.</p>
 </div>
 <div class="paragraph">
-<p>Чтобы открыть окно контроля версий, выберите версию файла или каталога (например, из окна "Проекты", "Файлы" или "Избранное") и либо выберите "ClearCase" &gt; "Показать изменения" из контекстного меню, либо "Управление версиями" &gt; "Показать изменения" из главного меню. В нижней панели среды IDE откроется следующее окно:</p>
+<p>|<strong>Перечеркивание</strong> |<span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span> |Указывает, что файл не будет затронут операциями возврата после изменения или добавления под контроль версий. Перечеркнутый текст появляется только в определенных местах, таких как диалог возврата после изменения окна контроля версий и диалог добавления под контроль версий, где можно выбрать исключение из действия для отдельных файлов. Подобные файлы затра [...]
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">==== Ярлыки состояния файлов</p>
+<p class="tableblock">Ярлыки состояния файлов предоставляют в окнах среды IDE текстовое указание на состояние файлов, включенных в управление версиями. По умолчанию сведения о состоянии отображения среды IDE (новый, зарезервированный, незарезервированный, игнорируемый и т. д.) отображаются серым цветом справа от файлов, перечисленных в окнах. Однако этот формат можно изменить под свои потребности. Например, если к ярлыкам состояния необходимо добавить селекторы версий, сделайте следующее:</p>
+<p class="tableblock">1. Выберите Tools ("Сервис") &gt; Options ("Параметры") (NetBeans &gt; Preferences ("Настройки") на Mac) из главного меню. Откроется окно "Options".
+2. Выберите кнопку Miscellaneous ("Разное") наверху диалогового окна, затем щелкните вкладку Versioning ("Контроль версий") под ним. Убедитесь, что ClearCase выбран в Versioning Systems ("Системы управления версиями") на левой панели. (Для справки см. <a href="#ccOptions">снимок экрана</a> выше).
+3. Нажмите кнопку Add Variable ("Добавить переменную") справа от текстового поля строки состояния Format ("Формат"). В отображаемом диалоговом окне Add Variable ("Добавить переменную") выберите переменную  <code>v2.5.1</code>  и нажмите кнопку "ОК". Переменная версии добавляется к текстовому полю Format ярлыка состояния.
+4. Для изменения формата ярлыков состояния, чтобы справа от файлов отображались только состояние и селектор версий, измените содержимое текстового поля Status Label Format (формат ярлыка состояния) на следующее:</p>
+<p class="tableblock">[source,java]
+----</p>
+<p class="tableblock">[{status}; v2.5.1]
+----
+Нажмите кнопку "ОК". В ярлыках состояния теперь приводятся состояние файла и селектор версий (где он есть):</p>
+<p class="tableblock">image::images/file-labels.jpg[title="метки файлов, отображаемые рядом с именами файлов"]</p>
+<p class="tableblock">Ярлыки состояния файлов можно включать и отключать, выбирая View ("Представление") &gt; Show Versioning Labels ("Показать ярлыки версий") из главного меню.</p>
+<p class="tableblock">==== Окно контроля версий</p>
+<p class="tableblock">Окно Versioning ("Контроль версий") ClearCase предоставляет обновляемый в реальном времени список всех изменений, внесенных в файлы внутри выбранной папки или локальной рабочей копии. По умолчанию оно открывается в нижней панели среды IDE, в нём отображаются новые, взятые для изменения и захваченные файлы.</p>
+<p class="tableblock">Чтобы открыть окно контроля версий, выберите версию файла или каталога (например, из окна "Проекты", "Файлы" или "Избранное") и либо выберите "ClearCase" &gt; "Показать изменения" из контекстного меню, либо "Управление версиями" &gt; "Показать изменения" из главного меню. В нижней панели среды IDE откроется следующее окно:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/versioning-window.jpg"><img src="images/versioning-window-small.jpg" alt="versioning window small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>По умолчанию в окне контроля версий отображается список всех файлов внутри выбранного пакета или папки, состояние которых заслуживает внимания (т. е. новый, зарезервированный, незарезервированный и т. д.). Щелкая заголовки столбцов над перечисленными файлами, эти файлы можно упорядочить по их именам, состоянию, местоположению или правилу.</p>
 </div>
@@ -629,22 +554,22 @@
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Refresh Status ("Обновить состояние")</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Обновление состояния всех выбранных файлов и папок. Файлы, отображаемые в окне контроля версий, можно обновить для отражения любых изменений, внесенных извне.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Diff All ("Сравнить все")</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Открывает окно Diff Viewer ("Просмотр различий"), позволяющее рассмотреть локально измененные версии параллельно с версиями, остающимися в хранилище.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Update All ("Обновить все")</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Обновление всех выбранных файлов. (Применимо только к представлениям моментального снимка).</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Сheckin All ("Вернуть все после изменения")</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Позволяет вернуть версию после локальных изменений.</p></td>
 </tr>
@@ -657,7 +582,7 @@
 <div class="content">
 <img src="images/versioning-right-click.jpg" alt="versioning right click">
 </div>
-<div class="title">Figure 4. Контекстное меню отображается для выбранного файла в окне 'Управление версиями'</div>
+<div class="title">Figure 2. Контекстное меню отображается для выбранного файла в окне 'Управление версиями'</div>
 </div>
 <div class="paragraph">
 <p>Для примера, с файлом можно выполнить следующие действия:</p>
@@ -672,41 +597,53 @@
 <p class="tableblock">Сведения об авторе и номере редакции в левом поле файлов, открытых в редакторе исходных файлов.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]&#8201;&#8212;&#8201;</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Исключить из возврата</strong>:</p>
-<p class="tableblock">Пометить файл, чтобы он был исключен при выполнении возврата после изменения.</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/exclude-from-checkin.jpg[title="Файлы, помеченные как исключенные в диалоговом окне возврата после изменения"]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
-<div class="sect2">
-<h3 id="_Сравнение_версий_файлов">Сравнение версий файлов</h3>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/annotations.jpg"><img src="images/annotations-small.jpg" alt="annotations small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>Сравнение версий файлов – обычная задача при работе над проектами под контролем версий. Среда IDE позволяет сравнивать версии, используя команду Diff, доступную в контекстном меню выбранного элемента (ClearCase &gt; Diff), а также в окне контроля версий. В окне 'Управление версиями', вы можете выполнить сравнение либо двойным щелчком указанного файла, либо щелкнув значок 'Сравнить все' (image::images/diff.png[]), расположенный на панели инструментов в верхней части.</p>
+<p>|* <strong>Исключить из возврата</strong>:</p>
 </div>
 <div class="paragraph">
-<p>При выполнении сравнения в главном окне среды IDE открывается графическое представление различий для выбранного(ых) файла(ов). Средство просмотра различий отображает две копии в расположенных рядом панелях:</p>
+<p>Пометить файл, чтобы он был исключен при выполнении возврата после изменения.
+ |<span class="image"><img src="images/exclude-from-checkin.jpg" alt="exclude from checkin" title="Файлы, помеченные как исключенные в диалоговом окне возврата после изменения"></span></p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== Сравнение версий файлов</p>
+<p class="tableblock">Сравнение версий файлов – обычная задача при работе над проектами под контролем версий. Среда IDE позволяет сравнивать версии, используя команду Diff, доступную в контекстном меню выбранного элемента (ClearCase &gt; Diff), а также в окне контроля версий. В окне 'Управление версиями', вы можете выполнить сравнение либо двойным щелчком указанного файла, либо щелкнув значок 'Сравнить все' (<span class="image"><img src="images/diff.png" alt="diff"></span>), расположенны [...]
+<p class="tableblock">При выполнении сравнения в главном окне среды IDE открывается графическое представление различий для выбранного(ых) файла(ов). Средство просмотра различий отображает две копии в расположенных рядом панелях:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/diff-viewer.jpg"><img src="images/diff-viewer-small.jpg" alt="diff viewer small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>В просмотре различий используются те же <a href="#viewingChanges">условные цвета</a>, что используются и в других местах для показа изменений под контролем версий. На показанном выше снимке экрана зеленый блок указывает содержимое, добавленное к более новой версии. Красный блок указывает содержимое предыдущей версии, которое удалено из последующей. Синий указывает, что в выделенных строках произошли изменения.</p>
 </div>
 <div class="paragraph">
-<p>Также при выполнении сравнения в группе файлов, таких, как проект, пакет или папка, или при щелчке 'Сравнить все' (image::images/diff.png[]), вы можете переключаться между различиями с помощью щелчков файлов, перечисленных в верхней области 'Средства просмотра различий'.</p>
+<p>Также при выполнении сравнения в группе файлов, таких, как проект, пакет или папка, или при щелчке 'Сравнить все' (<span class="image"><img src="images/diff.png" alt="diff"></span>), вы можете переключаться между различиями с помощью щелчков файлов, перечисленных в верхней области 'Средства просмотра различий'.</p>
 </div>
 <div class="paragraph">
 <p>Средство просмотра различий также предоставляет следующие функции:</p>
@@ -721,8 +658,9 @@
 </li>
 </ul>
 </div>
-<div class="sect3">
-<h4 id="_Внесение_изменений_в_файлы_взятые_для_изменения">Внесение изменений в файлы, взятые для изменения</h4>
+<div class="paragraph">
+<p>==== Внесение изменений в файлы, взятые для изменения</p>
+</div>
 <div class="paragraph">
 <p>В случае выполнения сравнения файлов, взятых для изменения, изменения можно вносить напрямую из просмотра различий. Чтобы сделать это, поместите свой курсор внутри правой панели просмотра различий и измените свой файл соответственно, либо используйте значки, отображающиеся в строке рядом с каждым выделенным изменением:</p>
 </div>
@@ -733,24 +671,24 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Заменить</strong> (image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Заменить</strong> (<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">вставляет выделенный текст из предыдущих версий во взятую для изменения версию.</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Переместить все</strong> (image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Переместить все</strong> (<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">возвращает взятую для изменения версию файла к состоянию выбранной предыдущей версии.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">*Удалить * (image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">*Удалить * (<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">удаляет выделенный текст из взятой для изменения версии, чтобы она отражала предыдущую версию.</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>==== Переходы между различиями в сравниваемых файлах</p>
 </div>
-<div class="sect3">
-<h4 id="_Переходы_между_различиями_в_сравниваемых_файлах">Переходы между различиями в сравниваемых файлах</h4>
 <div class="paragraph">
 <p>Если сравнение содержит несколько изменений, между ними можно переходить, используя значки стрелок, отображающиеся на панели инструментов. Значки стрелок позволяют просматривать появляющиеся различия сверху донизу:</p>
 </div>
@@ -761,24 +699,20 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Предыдущий</strong> (image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Предыдущий</strong> (<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">переход к предыдущему различию, отображенному в сравнении.</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Далее</strong> (image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Далее</strong> (<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">переход к следующему различию, отображенному в сравнении.</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>== Возврат файлов исходного кода после изменения</p>
 </div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_Возврат_файлов_исходного_кода_после_изменения">Возврат файлов исходного кода после изменения</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>После внесения изменений в файлы исходного кода мы возвращаем их в хранилище. Среда IDE позволяет вызвать команду возврата после изменения следующими способами:</p>
 </div>
@@ -788,7 +722,7 @@
 <p>В окне 'Проекты', 'Файлы' или 'Избранное' правой кнопкой мыши щелкните новые или изъятые элементыи выберите 'ClearCase' &gt; 'Проверить'.</p>
 </li>
 <li>
-<p>В окне 'Управление версиями' или 'Средства просмотра различий' нажмите кнопку 'Вернуть все после изменения' (image::images/commit.png[]) на панели инструментов.</p>
+<p>В окне 'Управление версиями' или 'Средства просмотра различий' нажмите кнопку 'Вернуть все после изменения' (<span class="image"><img src="images/commit.png" alt="commit"></span>) на панели инструментов.</p>
 </li>
 </ul>
 </div>
@@ -805,15 +739,15 @@
 </li>
 </ul>
 </div>
-<div class="openblock feature">
-<div class="content">
+</div>
+</div>
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/checkin-dialog.png"><img src="images/checkin-dialog-small.png" alt="checkin dialog small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>Из диалогового окна возврата после изменения можно указать, следует ли исключить отдельные файлы из числа возвращаемых. Чтобы сделать это, щелкните столбец Checkin Action ("Действие возврата после изменения") выбранного файла и выберите Exclude from Checkin ("Исключить из возврата") из раскрывающегося списка.</p>
 </div>
@@ -823,7 +757,7 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Введите сообщение в текстовую область Checkin Message ("Сообщение возврата") В качестве альтернативы щелкните значок 'Последние сообщения' ( image::images/recent-msgs.png[] ), расположенный в правом верхнем углу, чтобы просмотреть и выбрать необходимое из ранее использованного списка сообщений.</p>
+<p>Введите сообщение в текстовую область Checkin Message ("Сообщение возврата") В качестве альтернативы щелкните значок 'Последние сообщения' ( <span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span> ), расположенный в правом верхнем углу, чтобы просмотреть и выбрать необходимое из ранее использованного списка сообщений.</p>
 </li>
 <li>
 <p>После указания действий для отдельных файлов нажмите кнопку Checkin. Среда IDE выполнит возврат после изменения. При выполнении действия возврата отобразится строка состояния среды IDE, расположенная в нижнем правом углу интерфейса. После успешного возврата значки контроля версий исчезнут в окнах Projects ("Проекты"), Files ("Файлы") и Favorites ("Избранное"), и цвет возвращенных файлов вновь станет черным.
@@ -831,11 +765,9 @@
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>== Дополнительные сведения</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_Дополнительные_сведения">Дополнительные сведения</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>На этом завершается обзор возможностей ClearCase для IDE NetBeans. В данном документе показано, как решать основные задачи контроля версий в среде IDE, путем демонстрации стандартной рабочей последовательности действий при использования поддержки ClearCase в среде IDE.</p>
 </div>
@@ -869,6 +801,9 @@
 </div>
 </div>
 </div>
+</div>
+</div>
+</div>
             
 <section class='tools'>
     <ul class="menu align-center">
diff --git a/content/kb/docs/ide/clearcase_zh_CN.html b/content/kb/docs/ide/clearcase_zh_CN.html
index 474b935..3cad5f2 100644
--- a/content/kb/docs/ide/clearcase_zh_CN.html
+++ b/content/kb/docs/ide/clearcase_zh_CN.html
@@ -102,22 +102,6 @@
 <li><a href="#_指定_code_cleartool_code_可执行文件的路径">指定  <code>cleartool</code>  可执行文件的路径</a></li>
 </ul>
 </li>
-<li><a href="#_开始使用版本化文件">开始使用版本化文件</a>
-<ul class="sectlevel2">
-<li><a href="#_在_ide_中打开现有项目">在 IDE 中打开现有项目</a></li>
-<li><a href="#_创建新项目并将其置于源代码控制下">创建新项目并将其置于源代码控制下</a></li>
-</ul>
-</li>
-<li><a href="#_检出源">检出源</a></li>
-<li><a href="#_编辑源">编辑源</a>
-<ul class="sectlevel2">
-<li><a href="#_在源代码编辑器中查看更改">在源代码编辑器中查看更改</a></li>
-<li><a href="#_查看文件状态信息">查看文件状态信息</a></li>
-<li><a href="#_比较文件版本">比较文件版本</a></li>
-</ul>
-</li>
-<li><a href="#_检入源">检入源</a></li>
-<li><a href="#_另请参见">另请参见</a></li>
 </ul>
 </div>
 <div id="preamble">
@@ -228,16 +212,19 @@
 </div>
 <div class="openblock">
 <div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
-</div>
-</div>
+
 </div>
 </div>
 </li>
 </ol>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/cc-options.jpg"><img src="images/cc-options-small.jpg" alt="cc options small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="3">
 <li>
@@ -255,12 +242,9 @@
 <div class="paragraph">
 <p>*注:*更多信息请参见 <a href="http://versioncontrol.netbeans.org/clearcase/install.html">NetBeans ClearCase 集成设置和发行说明</a>。</p>
 </div>
+<div class="paragraph">
+<p>== 开始使用版本化文件</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_开始使用版本化文件">开始使用版本化文件</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>首次在 IDE 中使用 ClearCase 时,需要先打开现有的版本控制项目,或者在计算机上的 *ClearCase 视图中*创建新项目。</p>
 </div>
@@ -274,8 +258,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_在_ide_中打开现有项目">在 IDE 中打开现有项目</h3>
+<div class="paragraph">
+<p>=== 在 IDE 中打开现有项目</p>
+</div>
 <div class="paragraph">
 <p>如果您已经有一个 ClearCase 版本化项目,那么可以在 IDE 中打开它,版本控制功能将自动变为可用。IDE 扫描打开的项目,如果它们位于 ClearCase 视图目录中,那么文件状态和上下文相关支持会自动激活。</p>
 </div>
@@ -292,9 +277,9 @@
 <div class="paragraph">
 <p>*注:*您也可以在 "Favorites"(收藏夹)窗口中打开一个项目或目录。如果 ClearCase 目录不是 NetBeans 项目,可能就需要使用这种方法。为此,在 "Favorites"(收藏夹)窗口(Ctrl-3 组合键)中右键单击,选择 "Add to Favorites"(添加到收藏夹)。在显示的 "Add to Favorites"(添加到收藏夹)对话框中,导航至您计算机上的顶层 ClearCase 视图目录,然后单击 "Add"(添加)。此时会将该目录的树视图添加到 "Favorites"(收藏夹)窗口中。</p>
 </div>
+<div class="paragraph">
+<p>=== 创建新项目并将其置于源代码控制下</p>
 </div>
-<div class="sect2">
-<h3 id="_创建新项目并将其置于源代码控制下">创建新项目并将其置于源代码控制下</h3>
 <div class="paragraph">
 <p>也可以创建一个新项目,并将其置于源控制下,然后继续在 IDE 中使用它。创建新项目时,需要在 *ClearCase 视图中*指定其位置。这会让 IDE 意识到需要版本控制支持。创建项目之后,所有文件起初都将视为_视图私有_的文件。然后使用 IDE 的 "Add to Source Control"(添加到源代码控制中)命令将项目添加到 ClearCase 服务器。</p>
 </div>
@@ -330,22 +315,22 @@
 <pre>[.feature]</pre>
 </div>
 </div>
-<div class="openblock">
-<div class="content">
-<div class="imageblock left">
-<div class="content">
-<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
+</li>
+</ol>
 </div>
 </div>
 </div>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/add-dialog.jpg"><img src="images/add-dialog-small.jpg" alt="add dialog small"></a>
 </div>
-</li>
-</ol>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="olist arabic">
 <ol class="arabic" start="2">
 <li>
-<p>在 "Describing Message"(描述消息)文本区输入消息。或者,单击右上角的 "Recent Messages"(近期的消息)(image::images/recent-msgs.png[]) 图标,以便在以前使用过的消息列表中进行查看和选择。</p>
+<p>在 "Describing Message"(描述消息)文本区输入消息。或者,单击右上角的 "Recent Messages"(近期的消息)(<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>) 图标,以便在以前使用过的消息列表中进行查看和选择。</p>
 </li>
 </ol>
 </div>
@@ -359,12 +344,9 @@
 <div class="paragraph">
 <p>*注:*可以在 "Add"(添加)对话框中指定是否把某些文件排除在 "Add"(添加)操作之外。为此,单击选定文件的 "Action"(操作)列,从下拉列表中选择 "Do not Add"(不添加)。</p>
 </div>
+<div class="paragraph">
+<p>== 检出源</p>
 </div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_检出源">检出源</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>在 IDE 中打开一个 ClearCase 版本化项目之后,可以对源进行更改。修改 ClearCase 版本化文件首先要求将它们检出或_劫持_。NetBeans ClearCase 支持提供了两种方法用来实现它:</p>
 </div>
@@ -381,11 +363,9 @@
 <div class="paragraph">
 <p>“根据需求检出”功能可以使用 <a href="#ccOptions">ClearCase "Options"(选项)对话框</a>中的“根据需求检出”选项进行优化。</p>
 </div>
+<div class="paragraph">
+<p>== 编辑源</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_编辑源">编辑源</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>与 NetBeans IDE 中打开的任何项目一样,在 IDE 窗口(例如 "Projects"(项目)(Ctrl-1 组合键)、"Files"(文件)(Ctrl-2 组合键)或 "Favorites"(收藏夹)(Ctrl-3 组合键)窗口)中显示文件时,您可以双击文件节点,在源代码编辑器中打开文件。</p>
 </div>
@@ -405,8 +385,9 @@
 </li>
 </ul>
 </div>
-<div class="sect2">
-<h3 id="_在源代码编辑器中查看更改">在源代码编辑器中查看更改</h3>
+<div class="paragraph">
+<p>=== 在源代码编辑器中查看更改</p>
+</div>
 <div class="paragraph">
 <p>当在 IDE 的源代码编辑器中打开一个版本化文件时,针对资源库中以前的检出版本对文件进行修改时,可以查看该文件上发生的实时更改。您在操作时,IDE 通过源代码编辑器旁注中的颜色编码传递了以下信息:</p>
 </div>
@@ -446,168 +427,112 @@
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/left-ui-small.png[role="left", link="images/left-ui.png"]&#8201;&#8212;&#8201;
-<strong>左旁注</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="版本控制颜色编码显示在编辑器的右旁注中"]
-<strong>右旁注</strong></p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
-<div class="sect2">
-<h3 id="_查看文件状态信息">查看文件状态信息</h3>
-<div class="paragraph">
-<p>使用 "Projects"(项目)(Ctrl-1 组合键)、"Files"(文件)(Ctrl-2 组合键)、"Favorites"(收藏夹)(Ctrl-3 组合键)或 "Versioning"(版本控制)窗口时,IDE 提供了一些可视化功能,有助于查看文件状态信息。在下面的示例中,请注意标记(例如,image::images/blue-badge.png[])、文件名颜色和相邻状态标签如何全都彼此一致,以向您提供一种简单而有效的方法来跟踪文件的版本控制信息:</p>
 </div>
-<div class="imageblock">
+<div class="imageblock left">
 <div class="content">
-<img src="images/badge-example.jpg" alt="badge example" width="Favorites"(收藏夹)窗口中"">
-</div>
-<div class="title">Figure 2. 蓝色版本控制标记显示在 </div>
-</div>
-<div class="paragraph">
-<p>标记、颜色编码、文件状态标签和最重要的 "Versioning"(版本控制)窗口都有助于在 IDE 中有效地查看和管理版本控制信息。</p>
-</div>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="#badges">标记和颜色编码</a></p>
-</li>
-<li>
-<p><a href="#fileStatus">文件状态标签</a></p>
-</li>
-<li>
-<p><a href="#versioning">"Versioning"(版本控制)窗口</a></p>
-</li>
-</ul>
+<a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a>
 </div>
-<div class="sect3">
-<h4 id="_标记和颜色编码">标记和颜色编码</h4>
-<div class="paragraph">
-<p>标记应用于项目、文件夹、包节点,通知您包含在该节点中的文件状态:</p>
 </div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>下表显示了用于标记的颜色方案:</p>
+<p><strong>左旁注</strong> |<span class="image"><img src="images/right-ui.png" alt="right ui" title="版本控制颜色编码显示在编辑器的右旁注中"></span>
+<strong>右旁注</strong></p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 50%;">
-<col style="width: 50%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">UI 组件</th>
-<th class="tableblock halign-left valign-top">描述</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>蓝色标记</strong> (image::images/blue-badge.png[])</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">指示当前检出、劫持或添加的文件或文件夹。对于包,此标记仅应用于包本身,而不应用于它的子包。对于项目或文件夹,此标记指示其中的更改,或指示其所包含子文件夹中的任何更改。</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== 查看文件状态信息</p>
+<p class="tableblock">使用 "Projects"(项目)(Ctrl-1 组合键)、"Files"(文件)(Ctrl-2 组合键)、"Favorites"(收藏夹)(Ctrl-3 组合键)或 "Versioning"(版本控制)窗口时,IDE 提供了一些可视化功能,有助于查看文件状态信息。在下面的示例中,请注意标记(例如,<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)、文件名颜色和相邻状态标签如何全都彼此一致,以向您提供一种简单而有效的方法来跟踪文件的版本控制信息:</p>
+<p class="tableblock">image::images/badge-example.jpg[title="蓝色版本控制标记显示在 "Favorites"(收藏夹)窗口中"]</p>
+<p class="tableblock">标记、颜色编码、文件状态标签和最重要的 "Versioning"(版本控制)窗口都有助于在 IDE 中有效地查看和管理版本控制信息。</p>
+<p class="tableblock">* <a href="#badges">标记和颜色编码</a>
+* <a href="#fileStatus">文件状态标签</a>
+* <a href="#versioning">"Versioning"(版本控制)窗口</a></p>
+<p class="tableblock">==== 标记和颜色编码</p>
+<p class="tableblock">标记应用于项目、文件夹、包节点,通知您包含在该节点中的文件状态:</p>
+<p class="tableblock">下表显示了用于标记的颜色方案:</p></td>
 </tr>
 </tbody>
 </table>
 <div class="paragraph">
-<p>颜色编码应用于文件名,以指示它们的当前状态:</p>
+<p>|UI 组件 |描述</p>
+</div>
+<div class="paragraph">
+<p>|<strong>蓝色标记</strong> (<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>) |指示当前检出、劫持或添加的文件或文件夹。对于包,此标记仅应用于包本身,而不应用于它的子包。对于项目或文件夹,此标记指示其中的更改,或指示其所包含子文件夹中的任何更改。</p>
 </div>
 <table class="tableblock frame-all grid-all spread">
 <colgroup>
-<col style="width: 33.3333%;">
-<col style="width: 33.3333%;">
-<col style="width: 33.3334%;">
+<col style="width: 100%;">
 </colgroup>
-<thead>
-<tr>
-<th class="tableblock halign-left valign-top">颜色</th>
-<th class="tableblock halign-left valign-top">示例</th>
-<th class="tableblock halign-left valign-top">描述</th>
-</tr>
-</thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>蓝色</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">指示文件已检出。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>绿色</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">指示文件是新建的,并且未添加到源控制。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>灰色</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">指示文件被 ClearCase 忽略,并且不会包含在版本控制命令中,例如,"Add to Source Control"(添加到源代码控制中)或者 "Checkin"(检入)。如果文件没有进行版本化,那么它们只能被忽略。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>删除线</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">指示文件已从检入操作或者 "Add to Source Control"(添加到源代码控制中)操作中排除。当选择从一个操作中排除单独的文件时,只能在特定位置删除文本,例如 "Versioning"(版本控制)窗口,"checkin"(检入)对话框和 "Add to Source Control"(添加到源代码控制中)对话框。其他 ClearCase 命令(例如 "Update"(更新)命令)仍然会影响到此类文件。</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">颜色编码应用于文件名,以指示它们的当前状态:</p></td>
 </tr>
 </tbody>
 </table>
-</div>
-<div class="sect3">
-<h4 id="_文件状态标签">文件状态标签</h4>
 <div class="paragraph">
-<p>文件状态标签以文本的形式指示 IDE 窗口中的版本控制文件的状态。默认情况下,IDE 在窗口中列出的文件右侧以灰色文本显示它们的状态(新的、保留的、不保留的、忽略的等)信息。然而,您可以根据需要修改此格式。例如,如果您想将版本选择器添加至状态标签,请进行以下操作:</p>
-</div>
-<div class="olist arabic">
-<ol class="arabic">
-<li>
-<p>从主菜单中选择 "Tools"(工具)&gt; "Options"(选项);在 Mac 上为 "NetBeans" &gt; "Preferences"(首选项)。此时将打开 "Options"(选项)窗口。</p>
-</li>
-<li>
-<p>选择窗口顶部的 "Miscellaneous"(其他)图标,然后单击下面的 "Versioning"(版本控制)标签。确保版本控制系统下的左侧面板中的 ClearCase 已选中。(请参考上面的<a href="#ccOptions">屏幕快照</a>)。</p>
-</li>
-<li>
-<p>单击 "Status Label Format"(状态标签格式)文本字段右侧的 "Add Variable"(添加变量)按钮。在显示的 "Add Variable"(添加变量)对话框中,选择  <code>v2.5.1</code>  变量,然后单击 "OK"(确定)。版本变量将添加到 "Status Label Format"(状态标签格式)文本字段。</p>
-</li>
-<li>
-<p>要重新设置状态标签的格式,以在文件右侧仅显示状态和版本选择器,可以按照下列顺序重新排列 "Status Label Format"(状态标签格式)文本字段的内容:</p>
-</li>
-</ol>
-</div>
-<div class="listingblock">
-<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">[{status}; {version}]</code></pre>
-</div>
+<p>|颜色 |示例 |描述</p>
 </div>
 <div class="paragraph">
-<p>单击 "OK"(确定)。状态标签现在列出文件状态和版本选择器(可用时):</p>
-</div>
-<div class="imageblock">
-<div class="content">
-<img src="images/file-labels.jpg" alt="file labels">
-</div>
-<div class="title">Figure 3. 文件标签显示在文件名旁边</div>
+<p>|<strong>蓝色</strong> |<span class="image"><img src="images/blue-text.png" alt="blue text"></span> |指示文件已检出。</p>
 </div>
 <div class="paragraph">
-<p>从主菜单中选择 "View"(视图)&gt; "Show Versioning Labels"(显示版本控制标签),可打开和关闭文件状态标签。</p>
-</div>
+<p>|<strong>绿色</strong> |<span class="image"><img src="images/green-text.png" alt="green text"></span> |指示文件是新建的,并且未添加到源控制。</p>
 </div>
-<div class="sect3">
-<h4 id="_versioning_版本控制_窗口">"Versioning"(版本控制)窗口</h4>
 <div class="paragraph">
-<p>ClearCase "Versioning"(版本控制)窗口为您提供了一个实时列表,其中包括对本地工作副本的选定文件夹中的文件所的所有更改。默认情况下,它会在 IDE 的底部面板中打开,列出新建的、检出的或者劫持的文件。</p>
+<p>|<strong>灰色</strong> |<span class="image"><img src="images/gray-text.png" alt="gray text"></span> |指示文件被 ClearCase 忽略,并且不会包含在版本控制命令中,例如,"Add to Source Control"(添加到源代码控制中)或者 "Checkin"(检入)。如果文件没有进行版本化,那么它们只能被忽略。</p>
 </div>
 <div class="paragraph">
-<p>要打开 "Versioning"(版本控制)窗口,选择一个版本化文件或文件夹(例如,从 "Projects"(项目)、"Files"(文件)或 "Favorites"(收藏夹)窗口中选择),然后从右键菜单中选择 "ClearCase" &gt; "Show Changes"(显示更改)或者从主菜单中选择 "Versioning"(版本控制)&gt; "Show Changes"(显示更改)。下面的窗口出现在 IDE 底部:</p>
+<p>|<strong>删除线</strong> |<span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span> |指示文件已从检入操作或者 "Add to Source Control"(添加到源代码控制中)操作中排除。当选择从一个操作中排除单独的文件时,只能在特定位置删除文本,例如 "Versioning"(版本控制)窗口,"checkin"(检入)对话框和 "Add to Source Control"(添加到源代码控制中)对话框。其他 ClearCase 命令(例如 "Update"(更新)命令)仍然会影响到此类文件。</p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">==== 文件状态标签</p>
+<p class="tableblock">文件状态标签以文本的形式指示 IDE 窗口中的版本控制文件的状态。默认情况下,IDE 在窗口中列出的文件右侧以灰色文本显示它们的状态(新的、保留的、不保留的、忽略的等)信息。然而,您可以根据需要修改此格式。例如,如果您想将版本选择器添加至状态标签,请进行以下操作:</p>
+<p class="tableblock">1. 从主菜单中选择 "Tools"(工具)&gt; "Options"(选项);在 Mac 上为 "NetBeans" &gt; "Preferences"(首选项)。此时将打开 "Options"(选项)窗口。
+2. 选择窗口顶部的 "Miscellaneous"(其他)图标,然后单击下面的 "Versioning"(版本控制)标签。确保版本控制系统下的左侧面板中的 ClearCase 已选中。(请参考上面的<a href="#ccOptions">屏幕快照</a>)。
+3. 单击 "Status Label Format"(状态标签格式)文本字段右侧的 "Add Variable"(添加变量)按钮。在显示的 "Add Variable"(添加变量)对话框中,选择  <code>v2.5.1</code>  变量,然后单击 "OK"(确定)。版本变量将添加到 "Status Label Format"(状态标签格式)文本字段。
+4. 要重新设置状态标签的格式,以在文件右侧仅显示状态和版本选择器,可以按照下列顺序重新排列 "Status Label Format"(状态标签格式)文本字段的内容:</p>
+<p class="tableblock">[source,java]
+----</p>
+<p class="tableblock">[{status}; v2.5.1]
+----
+单击 "OK"(确定)。状态标签现在列出文件状态和版本选择器(可用时):</p>
+<p class="tableblock">image::images/file-labels.jpg[title="文件标签显示在文件名旁边"]</p>
+<p class="tableblock">从主菜单中选择 "View"(视图)&gt; "Show Versioning Labels"(显示版本控制标签),可打开和关闭文件状态标签。</p>
+<p class="tableblock">==== "Versioning"(版本控制)窗口</p>
+<p class="tableblock">ClearCase "Versioning"(版本控制)窗口为您提供了一个实时列表,其中包括对本地工作副本的选定文件夹中的文件所的所有更改。默认情况下,它会在 IDE 的底部面板中打开,列出新建的、检出的或者劫持的文件。</p>
+<p class="tableblock">要打开 "Versioning"(版本控制)窗口,选择一个版本化文件或文件夹(例如,从 "Projects"(项目)、"Files"(文件)或 "Favorites"(收藏夹)窗口中选择),然后从右键菜单中选择 "ClearCase" &gt; "Show Changes"(显示更改)或者从主菜单中选择 "Versioning"(版本控制)&gt; "Show Changes"(显示更改)。下面的窗口出现在 IDE 底部:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/versioning-window.jpg"><img src="images/versioning-window-small.jpg" alt="versioning window small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>默认情况下,"Versioning"(版本控制)窗口显示一个列表此列表中包括选定的包或文件夹中的所有文件显示值得注意的状态(即新的、保留的、不保留的等)。您可以单击列出文件之上的列标题,按照名称、状态、位置或者规则对文件排序。</p>
 </div>
@@ -629,22 +554,22 @@
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>刷新状态</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">刷新选定文件和文件夹的状态。可以刷新 "Versioning"(版本控制)窗口中显示的文件,以反映可能已在外部执行的任何更改。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>全部比较</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">打开比较查看器,其中提供了本地更改与资源库保存的版本的逐项比较。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>全部更新</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">更新所有选定文件。(仅适用于快照视图。)</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>全部检入</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">用于检入本地更改。</p></td>
 </tr>
@@ -657,7 +582,7 @@
 <div class="content">
 <img src="images/versioning-right-click.jpg" alt="versioning right click" width="Versioning"(版本控制)窗口中的所选文件上"">
 </div>
-<div class="title">Figure 4. 右键单击菜单显示在 </div>
+<div class="title">Figure 2. 右键单击菜单显示在 </div>
 </div>
 <div class="paragraph">
 <p>例如,您可以在文件上执行以下操作:</p>
@@ -672,41 +597,53 @@
 <p class="tableblock">在源代码编辑器中打开的文件的左旁注中显示作者和修订版本号信息。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/annotations-small.jpg[role="left", link="images/annotations.jpg"]&#8201;&#8212;&#8201;</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>从检入中排除</strong>:</p>
-<p class="tableblock">用于标记在执行检入时要排除的文件。</p></td>
-</tr>
-<tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/exclude-from-checkin.jpg[title="在 "Checkin"(检入)对话框中,文件标记为已排除"]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]</p></td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
-<div class="sect2">
-<h3 id="_比较文件版本">比较文件版本</h3>
+<div class="imageblock left">
+<div class="content">
+<a class="image" href="images/annotations.jpg"><img src="images/annotations-small.jpg" alt="annotations small"></a>
+</div>
+</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
-<p>使用版本化项目时,比较文件版本是一种常见任务。IDE 能够使用 "Diff"(比较)命令比较版本,可以从选定项的右键菜单获得("ClearCase" &gt; "Diff"(比较)),也可以从 "Versioning"(版本控制)窗口获得。在 "Versioning"(版本控制)窗口中,可通过双击列出的文件来执行比较;否则,可单击顶部工具栏中的 "Diff All"(全部比较)图标 (image::images/diff.png[])。</p>
+<p>|* <strong>从检入中排除</strong>:</p>
 </div>
 <div class="paragraph">
-<p>当执行比较时,将会为 IDE 的主窗口中选定的文件打开一个图形化的比较查看器。比较查看器在两个并行面板中显示两个副本:</p>
+<p>用于标记在执行检入时要排除的文件。
+ |<span class="image"><img src="images/exclude-from-checkin.jpg" alt="exclude from checkin" width="Checkin"(检入)对话框中,文件标记为已排除"" title="在 "></span></p>
+</div>
+<table class="tableblock frame-all grid-all spread">
+<colgroup>
+<col style="width: 100%;">
+</colgroup>
+<tbody>
+<tr>
+<td class="tableblock halign-left valign-top"><p class="tableblock">=== 比较文件版本</p>
+<p class="tableblock">使用版本化项目时,比较文件版本是一种常见任务。IDE 能够使用 "Diff"(比较)命令比较版本,可以从选定项的右键菜单获得("ClearCase" &gt; "Diff"(比较)),也可以从 "Versioning"(版本控制)窗口获得。在 "Versioning"(版本控制)窗口中,可通过双击列出的文件来执行比较;否则,可单击顶部工具栏中的 "Diff All"(全部比较)图标 (<span class="image"><img src="images/diff.png" alt="diff"></span>)。</p>
+<p class="tableblock">当执行比较时,将会为 IDE 的主窗口中选定的文件打开一个图形化的比较查看器。比较查看器在两个并行面板中显示两个副本:</p>
+<p class="tableblock">[.feature]</p></td>
+</tr>
+</tbody>
+</table>
+</div>
 </div>
-<div class="openblock feature">
-<div class="content">
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/diff-viewer.jpg"><img src="images/diff-viewer-small.jpg" alt="diff viewer small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>比较查看器使用<a href="#viewingChanges">颜色编码</a>来显示版本控制更改,该颜色编码与其他地方使用的颜色编码相同。在上面显示的屏幕快照中,绿色块指示添加到更新版本的内容。红色块指示从新版本中移除的早期版本中的内容。蓝色指示在突出显示的行中发的更改。</p>
 </div>
 <div class="paragraph">
-<p>此外,当对一组文件(例如,项目、包或文件夹)执行比较时,或者当单击 "Diff All"(全部比较)(image::images/diff.png[]) 时,可在各比较之间进行切换,只需单击比较查看器上方区域中列出的文件即可。</p>
+<p>此外,当对一组文件(例如,项目、包或文件夹)执行比较时,或者当单击 "Diff All"(全部比较)(<span class="image"><img src="images/diff.png" alt="diff"></span>) 时,可在各比较之间进行切换,只需单击比较查看器上方区域中列出的文件即可。</p>
 </div>
 <div class="paragraph">
 <p>比较查看器还为您提供了以下功能:</p>
@@ -721,8 +658,9 @@
 </li>
 </ul>
 </div>
-<div class="sect3">
-<h4 id="_更改检出文件">更改检出文件</h4>
+<div class="paragraph">
+<p>==== 更改检出文件</p>
+</div>
 <div class="paragraph">
 <p>如果您在检出文件上执行比较,那么可以在比较查看器中直接更改。为此,可以将光标放在比较查看器的右侧窗格中,并且相应地修改文件,也可以每个突出显示的更改旁边的内联图标:</p>
 </div>
@@ -733,24 +671,24 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Replace</strong>(替换)(image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Replace</strong>(替换)(<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">把早期版本中突出显示的文本插入到检出版本中。</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong>(全部移动)(image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong>(全部移动)(<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">把文件的检出版本恢复为选定的先前版本的状态</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong>(删除)(image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong>(删除)(<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">从检出版本中删除突出显示的文本,使之与先前版本完全匹配。</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>==== 在比较文件之间的差异中导航</p>
 </div>
-<div class="sect3">
-<h4 id="_在比较文件之间的差异中导航">在比较文件之间的差异中导航</h4>
 <div class="paragraph">
 <p>如果您的比较中包含多个差异,则可以使用工具栏中的箭头图标在它们之间导航。箭头图标可用于查看从上到下列出的差异:</p>
 </div>
@@ -761,24 +699,20 @@
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Previous</strong>(上一个)(image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Previous</strong>(上一个)(<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">转至比较中显示的上一个差异</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong>(下一个)(image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong>(下一个)(<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">转至比较中显示的下一个差异</p></td>
 </tr>
 </tbody>
 </table>
+<div class="paragraph">
+<p>== 检入源</p>
 </div>
-</div>
-</div>
-</div>
-<div class="sect1">
-<h2 id="_检入源">检入源</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>对源进行更改后,可以将它们检入到资源库。IDE 允许通过以下方法调用检入命令:</p>
 </div>
@@ -788,7 +722,7 @@
 <p>在 "Projects"(项目)、"Files"(文件)或 "Favorites"(收藏夹)窗口中,右键单击新建或检出项目,然后选择 "ClearCase" &gt; "Checkin"(检入)。</p>
 </li>
 <li>
-<p>从 "Versioning"(版本控制)窗口或比较查看器中,单击位于工具栏中的 "Checkin All"(全部检入)(image::images/commit.png[]) 按钮。</p>
+<p>从 "Versioning"(版本控制)窗口或比较查看器中,单击位于工具栏中的 "Checkin All"(全部检入)(<span class="image"><img src="images/commit.png" alt="commit"></span>) 按钮。</p>
 </li>
 </ul>
 </div>
@@ -805,15 +739,15 @@
 </li>
 </ul>
 </div>
-<div class="openblock feature">
-<div class="content">
+</div>
+</div>
 <div class="imageblock left">
 <div class="content">
 <a class="image" href="images/checkin-dialog.png"><img src="images/checkin-dialog-small.png" alt="checkin dialog small"></a>
 </div>
 </div>
-</div>
-</div>
+<div class="openblock">
+<div class="content">
 <div class="paragraph">
 <p>可以从 "Checkin"(检入)对话框中指定是否从检入操作中排除单独的文件。为此,可以单击选定文件的 "Checkin Action"(检入操作)列,从下拉列表中选择 "Exclude from Checkin"(从检入中排除)。</p>
 </div>
@@ -823,7 +757,7 @@
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>在 "Checkin Message"(检入消息)文本区输入检入消息。或者,单击右上角的 "Recent Messages"(近期的消息)(image::images/recent-msgs.png[]) 图标,以便在以前使用过的消息列表中进行查看和选择。</p>
+<p>在 "Checkin Message"(检入消息)文本区输入检入消息。或者,单击右上角的 "Recent Messages"(近期的消息)(<span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span>) 图标,以便在以前使用过的消息列表中进行查看和选择。</p>
 </li>
 <li>
 <p>指定各个文件的操作后,单击 "Checkin"(检入)。IDE 执行检入。当检入操作发生时,位于界面右下角的 IDE 状态栏会显示出来。成功检入后,版本控制标记就会在 "Projects"(项目)、"Files"(文件)或 "Favorites"(收藏夹)窗口中消失,并且检入文件中的颜色编码变成黑色。
@@ -831,11 +765,9 @@
 </li>
 </ol>
 </div>
+<div class="paragraph">
+<p>== 另请参见</p>
 </div>
-</div>
-<div class="sect1">
-<h2 id="_另请参见">另请参见</h2>
-<div class="sectionbody">
 <div class="paragraph">
 <p>NetBeans IDE 的 ClearCase 指导教程到此就结束了。此文档通过介绍使用 IDE 的 ClearCase 支持时的标准工作流,演示了在 IDE 中如何执行基本的版本控制任务。</p>
 </div>
@@ -869,6 +801,9 @@
 </div>
 </div>
 </div>
+</div>
+</div>
+</div>
             
 <section class='tools'>
     <ul class="menu align-center">
diff --git a/content/kb/docs/ide/cvs.html b/content/kb/docs/ide/cvs.html
index b955fc8..3be11c7 100644
--- a/content/kb/docs/ide/cvs.html
+++ b/content/kb/docs/ide/cvs.html
@@ -399,9 +399,11 @@ The CVS client does not handle binary file imports by default. The best practice
 </colgroup>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/left-ui-small.png[role="left", link="images/left-ui.png"]&#8201;&#8212;&#8201;
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/left-ui-small.png[role="left", link="images/left-ui.png"]
+&#8201;&#8212;&#8201;
 <strong>Left margin</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="versioning color encoding displayed in editor&#8217;s right margin"]
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/right-ui.png" alt="right ui" title="versioning color encoding displayed in editor&#8217;s right margin"></span>
 <strong>Right margin</strong></p></td>
 </tr>
 </tbody>
@@ -410,7 +412,7 @@ The CVS client does not handle binary file imports by default. The best practice
 <div class="sect3">
 <h4 id="_viewing_file_status_information">Viewing File Status Information</h4>
 <div class="paragraph">
-<p>When you are working in the Projects (Ctrl-1), Files (Ctrl-2), Favorites (Ctrl-3), or Versioning windows, the IDE provides several visual features that aid in viewing status information about your files. In the example below, notice how the badge (e.g. image::images/blue-badge.png[]), color of the file name, and adjacent status label, all coincide with each other to provide you with a simple but effective way to keep track of versioning information on your files:</p>
+<p>When you are working in the Projects (Ctrl-1), Files (Ctrl-2), Favorites (Ctrl-3), or Versioning windows, the IDE provides several visual features that aid in viewing status information about your files. In the example below, notice how the badge (e.g. <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>), color of the file name, and adjacent status label, all coincide with each other to provide you with a simple but effective way to keep track of versioning i [...]
 </div>
 <div class="imageblock">
 <div class="content">
@@ -454,11 +456,11 @@ The CVS client does not handle binary file imports by default. The best practice
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue Badge</strong> (image::images/blue-badge.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue Badge</strong> (<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates the presence of files that have been locally modified, added or deleted. For packages, this badge applies only to the package itself and not its subpackages. For projects or folders, the badge indicates changes within that item, or any of the contained subfolders.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Red Badge</strong> (image::images/red-badge.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Red Badge</strong> (<span class="image"><img src="images/red-badge.png" alt="red badge"></span>)</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Marks projects, folders or packages that contain <em>conflicting</em> files (i.e., local versions that conflict with versions maintained in the repository). For packages, this badge applies only to the package itself and not its subpackages. For projects or folders, the badge indicates conflicts within that item, or any of the contained subfolders.</p></td>
 </tr>
 </tbody>
@@ -482,27 +484,27 @@ The CVS client does not handle binary file imports by default. The best practice
 <tbody>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Blue</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/blue-text.png" alt="blue text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file has been locally modified.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Green</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/green-text.png" alt="green text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file has been locally added.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Red</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/red-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/red-text.png" alt="red text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file contains conflicts between your local working copy and the repository&#8217;s version.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Gray</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/gray-text.png" alt="gray text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file is ignored by CVS and will not be included in versioning commands (e.g. Update and Commit). Files can only be made to be ignored if they have not yet been versioned.</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Strike-Through</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Indicates that the file is excluded from commit operations. Strike-through text only appears in specific locations, such as the Versioning window or Commit dialog, when you choose to exclude individual files from a commit action. Such files are still affected by other CVS commands, such as Update.</p></td>
 </tr>
 </tbody>
@@ -597,22 +599,22 @@ The CVS client does not handle binary file imports by default. The best practice
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/refresh.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/refresh.png" alt="refresh"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Refresh Status</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Refreshes the status of the selected files and folders. Files displayed in the Versioning window can be refreshed to reflect any changes that may have been made externally.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/diff.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/diff.png" alt="diff"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Diff All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Opens the Diff Viewer providing you with a side-by-side comparison of your local copies and the versions maintained in the repository.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/update.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/update.png" alt="update"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Update All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Updates all selected files from the repository.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/commit.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/commit.png" alt="commit"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Commit All</strong></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Enables you to commit local changes to the repository.</p></td>
 </tr>
@@ -639,28 +641,34 @@ The CVS client does not handle binary file imports by default. The best practice
 <p class="tableblock">Displays author and revision number information in the left margin of files opened in the Source Editor.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/annotations.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/annotations.png" alt="annotations"></span></p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Search History</strong>:</p>
 <p class="tableblock">Enables you to search for and compare multiple revisions of the selected file in the IDE&#8217;s History Viewer. From the History Viewer you can also perform a <a href="#comparing">diff</a> or roll back your local copy to a selected revision.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/history-viewer-small.png[role="left", link="images/history-viewer.png"]&#8201;&#8212;&#8201;</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/history-viewer-small.png[role="left", link="images/history-viewer.png"]
+&#8201;&#8212;&#8201;</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Exclude from Commit</strong>:</p>
 <p class="tableblock">Allows you to mark the file to be excluded when performing a commit.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/exclude-from-commit-small.png[role="left", link="images/exclude-from-commit.png"]&#8201;&#8212;&#8201;</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/exclude-from-commit-small.png[role="left", link="images/exclude-from-commit.png"]
+&#8201;&#8212;&#8201;</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">* <strong>Revert Modifications</strong>:</p>
 <p class="tableblock">Opens the Confirm Overwrite dialog, enabling you to revert any actions that you have committed to files in your local working copy.</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;image::images/cvs-confirm-overwrite-small.png[role="left", link="images/cvs-confirm-overwrite.png"]&#8201;&#8212;&#8201;</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;
+image::images/cvs-confirm-overwrite-small.png[role="left", link="images/cvs-confirm-overwrite.png"]
+&#8201;&#8212;&#8201;</p></td>
 </tr>
 </tbody>
 </table>
@@ -669,7 +677,7 @@ The CVS client does not handle binary file imports by default. The best practice
 <div class="sect3">
 <h4 id="_comparing_file_revisions">Comparing File Revisions</h4>
 <div class="paragraph">
-<p>Comparing file revisions is a common task when working with versioned projects. The IDE enables you to compare revisions by using the Diff command, which is available from the right-click menu of a selected item (CVS &gt; Diff), as well as from the Versioning window. In the Versioning window, you can perform diffs by either double-clicking a listed file, otherwise you can click the Diff All icon (image::images/diff.png[]) located in the toolbar at the top.</p>
+<p>Comparing file revisions is a common task when working with versioned projects. The IDE enables you to compare revisions by using the Diff command, which is available from the right-click menu of a selected item (CVS &gt; Diff), as well as from the Versioning window. In the Versioning window, you can perform diffs by either double-clicking a listed file, otherwise you can click the Diff All icon (<span class="image"><img src="images/diff.png" alt="diff"></span>) located in the toolbar [...]
 </div>
 <div class="paragraph">
 <p>When you perform a diff, a graphical Diff Viewer opens for the selected file(s) and revisions in the IDE&#8217;s main window. The Diff Viewer displays two copies in side-by-side panels. The more current copy appears on the right side, so if you are comparing a repository revision against your working copy, the working copy displays in the right panel:</p>
@@ -687,7 +695,7 @@ The CVS client does not handle binary file imports by default. The best practice
 <p>The Diff Viewer makes use of the same <a href="#viewingChanges">color encoding</a> used elsewhere to display version control changes. In the screen capture displayed above, the green block indicates content that has been added to the more current revision. The red block indicates that content from the earlier revision has been removed from the later. Blue indicates that changes have occurred within the highlighted line(s).</p>
 </div>
 <div class="paragraph">
-<p>Also, when performing a diff on a group of files, such as on a project, package, or folder, or when clicking Diff All (image::images/diff.png[]), you can switch between diffs by clicking files listed in the upper region of the Diff Viewer.</p>
+<p>Also, when performing a diff on a group of files, such as on a project, package, or folder, or when clicking Diff All (<span class="image"><img src="images/diff.png" alt="diff"></span>), you can switch between diffs by clicking files listed in the upper region of the Diff Viewer.</p>
 </div>
 <div class="paragraph">
 <p>The Diff Viewer also provides you with the following functionality:</p>
@@ -717,17 +725,17 @@ The CVS client does not handle binary file imports by default. The best practice
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Replace</strong> (image::images/insert.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Replace</strong> (<span class="image"><img src="images/insert.png" alt="insert"></span>):</th>
 <th class="tableblock halign-left valign-top">Inserts the highlighted text from the previous revision into the current revision</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong> (image::images/arrow.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Move All</strong> (<span class="image"><img src="images/arrow.png" alt="arrow"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Reverts the file&#8217;s current revision to the state of the selected previous revision</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong> (image::images/remove.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remove</strong> (<span class="image"><img src="images/remove.png" alt="remove"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Removes the highlighted text from the current revision so that it mirrors the previous revision</p></td>
 </tr>
 </tbody>
@@ -745,13 +753,13 @@ The CVS client does not handle binary file imports by default. The best practice
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Previous</strong> (image::images/diff-prev.png[]):</th>
+<th class="tableblock halign-left valign-top"><strong>Previous</strong> (<span class="image"><img src="images/diff-prev.png" alt="diff prev"></span>):</th>
 <th class="tableblock halign-left valign-top">Goes to previous difference displayed in the diff</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong> (image::images/diff-next.png[]):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Next</strong> (<span class="image"><img src="images/diff-next.png" alt="diff next"></span>):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Goes to next difference displayed in the diff</p></td>
 </tr>
 </tbody>
@@ -769,17 +777,17 @@ The CVS client does not handle binary file imports by default. The best practice
 </colgroup>
 <thead>
 <tr>
-<th class="tableblock halign-left valign-top"><strong>Local</strong> ( image::images/locally-mod.png[] ):</th>
+<th class="tableblock halign-left valign-top"><strong>Local</strong> ( <span class="image"><img src="images/locally-mod.png" alt="locally mod"></span> ):</th>
 <th class="tableblock halign-left valign-top">Displays locally modified files only</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remote</strong> ( image::images/remotely-mod.png[] ):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Remote</strong> ( <span class="image"><img src="images/remotely-mod.png" alt="remotely mod"></span> ):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Displays remotely modified files only</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Both</strong> ( image::images/both-mod.png[] ):</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Both</strong> ( <span class="image"><img src="images/both-mod.png" alt="both mod"></span> ):</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">Displays both locally and remotely modified files</p></td>
 </tr>
 </tbody>
@@ -904,7 +912,7 @@ Make sure your <a href="#fileStatus">file status labels</a> are activated (choos
 <p>You can perform updates by choosing CVS &gt; Update from the right-click menu of any versioned item in the Projects, Files, or Favorites windows. When working directly from the Versioning window, you need only right-click a listed file and choose Update.</p>
 </div>
 <div class="paragraph">
-<p>To perform an update on sources that you have modified, you can click the Update All icon (image::images/update.png[]), which displays in the toolbars located at the top of both the <a href="#versioning">Versioning Window</a>, as well as the <a href="#comparing">Diff Viewer</a>. Any changes that may have occurred in the repository are displayed in the Versioning Output window.</p>
+<p>To perform an update on sources that you have modified, you can click the Update All icon (<span class="image"><img src="images/update.png" alt="update"></span>), which displays in the toolbars located at the top of both the <a href="#versioning">Versioning Window</a>, as well as the <a href="#comparing">Diff Viewer</a>. Any changes that may have occurred in the repository are displayed in the Versioning Output window.</p>
 </div>
 </div>
 <div class="sect3">
@@ -913,7 +921,7 @@ Make sure your <a href="#fileStatus">file status labels</a> are activated (choos
 <p>When you perform an update or a commit, the IDE&#8217;s CVS support compares your files with repository sources to make sure that other changes have not already occurred in the same locations. When your previous checkout (or update) no longer matches the repository <em>HEAD</em> (i.e., most current revision), <em>and</em> the changes that you applied to your local working copy coincide with areas in the HEAD that have also changed, your update or commit results in a <em>conflict</em>.</p>
 </div>
 <div class="paragraph">
-<p>As indicated in <a href="#badges">Badges and Color Coding</a>, conflicts are displayed in the IDE with red text and are accompanied by a red badge (image::images/red-badge.png[]) when viewed in the Projects, Files, or Favorites windows. When working in the Versioning window, conflicts are also indicated by a file&#8217;s status:</p>
+<p>As indicated in <a href="#badges">Badges and Color Coding</a>, conflicts are displayed in the IDE with red text and are accompanied by a red badge (<span class="image"><img src="images/red-badge.png" alt="red badge"></span>) when viewed in the Projects, Files, or Favorites windows. When working in the Versioning window, conflicts are also indicated by a file&#8217;s status:</p>
 </div>
 <div class="imageblock">
 <div class="content">
@@ -950,7 +958,7 @@ Make sure your <a href="#fileStatus">file status labels</a> are activated (choos
 <p>From the Projects, Files or Favorites windows, right-click new or modified items and choose CVS &gt; Commit.</p>
 </li>
 <li>
-<p>From the Versioning window or Diff Viewer, click the Commit All (image::images/commit.png[]) button located in the toolbar.</p>
+<p>From the Versioning window or Diff Viewer, click the Commit All (<span class="image"><img src="images/commit.png" alt="commit"></span>) button located in the toolbar.</p>
 </li>
 </ul>
 </div>
@@ -997,7 +1005,7 @@ Make sure your <a href="#fileStatus">file status labels</a> are activated (choos
 <div class="olist arabic">
 <ol class="arabic">
 <li>
-<p>Type in a commit message in the Commit Message text area. Alternatively, click the Recent Messages ( image::images/recent-msgs.png[] ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
+<p>Type in a commit message in the Commit Message text area. Alternatively, click the Recent Messages ( <span class="image"><img src="images/recent-msgs.png" alt="recent msgs"></span> ) icon located in the upper right corner to view and select from a list of messages that you have previously used.</p>
 </li>
 <li>
 <p>After specifying actions for individual files, click Commit. The IDE executes the commit and sends your local changes to the repository. The IDE&#8217;s status bar, located in the bottom right of the interface, displays as the commit action takes place. Upon a successful commit, versioning badges disappear in the Projects, Files and Favorites windows, and the color encoding of committed files returns to black.
diff --git a/content/kb/docs/ide/cvs_ja.html b/content/kb/docs/ide/cvs_ja.html
index 602b05f..9097baf 100644
--- a/content/kb/docs/ide/cvs_ja.html
+++ b/content/kb/docs/ide/cvs_ja.html
@@ -445,7 +445,7 @@ CVSクライアントでは、デフォルトでバイナリ・ファイルの
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock">[.feature]&#8201;&#8212;&#8201;<span class="image left"><a class="image" href="images/left-ui.png"><img src="images/left-ui-small.png" alt="left ui small"></a></span>&#8201;&#8212;&#8201;
 <strong>左側のマージン</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/right-ui.png[title="エディタの右側のマージンに表示されたバージョン管理の色分け"]
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/right-ui.png" alt="right ui" title="エディタの右側のマージンに表示されたバージョン管理の色分け"></span>
 <strong>右側のマージン</strong></p></td>
 </tr>
 </tbody>
@@ -454,7 +454,7 @@ CVSクライアントでは、デフォルトでバイナリ・ファイルの
 <div class="sect2">
 <h3 id="_ファイルのステータス情報の表示">ファイルのステータス情報の表示</h3>
 <div class="paragraph">
-<p>「プロジェクト」(Ctrl-1)、「ファイル」(Ctrl-2)、「お気に入り」(Ctrl-3)または「バージョン管理」ウィンドウで作業する場合、IDEには、ファイルのステータス情報を表示するのに役立つ視覚機能がいくつかあります。次の例では、バッジ(例: image::images/blue-badge.png[])、ファイル名の色、および隣接するステータス・ラベルすべての相互の対応方法を確認し、ファイルに対するバージョン管理情報をトラックする単純だが効果的な方法について説明します。</p>
+<p>「プロジェクト」(Ctrl-1)、「ファイル」(Ctrl-2)、「お気に入り」(Ctrl-3)または「バージョン管理」ウィンドウで作業する場合、IDEには、ファイルのステータス情報を表示するのに役立つ視覚機能がいくつかあります。次の例では、バッジ(例: <span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)、ファイル名の色、および隣接するステータス・ラベルすべての相互の対応方法を確認し、ファイルに対するバージョン管理情報をトラックする単純だが効果的な方法について説明します。</p>
 </div>
 <div class="imageblock">
 <div class="content">
@@ -498,11 +498,11 @@ CVSクライアントでは、デフォルトでバイナリ・ファイルの
 </thead>
 <tbody>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>青のバッジ</strong>(image::images/blue-badge.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>青のバッジ</strong>(<span class="image"><img src="images/blue-badge.png" alt="blue badge"></span>)</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ローカルに変更、追加、または削除されたファイルの存在を示します。パッケージの場合、このバッジは、パッケージ自体にのみ適用され、そのサブパッケージには適用されません。プロジェクトまたはフォルダの場合、このバッジはその項目または含まれるサブフォルダ内の内容の変更を示します。</p></td>
 </tr>
 <tr>
-<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>赤のバッジ</strong>(image::images/red-badge.png[])</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><strong>赤のバッジ</strong>(<span class="image"><img src="images/red-badge.png" alt="red badge"></span>)</p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">_競合する_ファイル(リポジトリに保存されているバージョンと競合するローカル・バージョン)を含むプロジェクト、フォルダまたはパッケージをマークします。パッケージの場合、このバッジは、パッケージ自体にのみ適用され、そのサブパッケージには適用されません。プロジェクトまたはフォルダの場合、このバッジはその項目または含まれるサブフォルダ内の競合を示しています。</p></td>
 </tr>
 </tbody>
@@ -526,27 +526,27 @@ CVSクライアントでは、デフォルトでバイナリ・ファイルの
 <tbody>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>青</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/blue-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/blue-text.png" alt="blue text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがローカルに変更されたことを示します。</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>緑</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/green-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/green-text.png" alt="green text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがローカルに追加されたことを示します。</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>赤</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/red-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/red-text.png" alt="red text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルに、ローカル作業コピーとリポジトリのバージョン間の競合が含まれることを示します。</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>グレー</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/gray-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/gray-text.png" alt="gray text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがCVSによって無視され、バージョン管理コマンド(更新およびコミット)に含まれないことを示します。まだバージョン管理されていない場合にのみ、ファイルが無視されます。</p></td>
 </tr>
 <tr>
 <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>取消し線</strong></p></td>
-<td class="tableblock halign-left valign-top"><p class="tableblock">image::images/strike-through-text.png[]</p></td>
+<td class="tableblock halign-left valign-top"><p class="tableblock"><span class="image"><img src="images/strike-through-text.png" alt="strike through text"></span></p></td>
 <td class="tableblock halign-left valign-top"><p class="tableblock">ファイルがコミット操作から除外されることを示します。取消し線テキストは、個々のファイルをコミット・アクションから除外することを選択すると、「バージョン管理」ウィンドウや「コミット」ダイアログなどの特定の場所にのみ表示されます。そのようなファイルは、「更新」など、他のCVSコマンドの影響は引続き受けます。</p></td>
 </tr>
 </tbody>
@@ -641,22 +641,22 @@ CVSクライアントでは、デフォルトでバイナリ・ファイルの
 </thead>
 <tbody>
 <tr>
... 42912 lines suppressed ...


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists