Repairing Word Generated HTML Code
 (menu)

     Using Microsoft Word to create HTML pages is very easy to do and many of our translators use Word to make their translations.   These translations appear to be perfect on their computers, however when up loaded to the site, the links to the graphics no longer work for anybody but the person who prepared the document in the first place.  The reason for this is that when Word copies a web page, it copies the graphics as well and renames them as images, putting them in newly created subdirectories. Thus all of the original links to those graphics are lost and replaced with new ones that point to separate folders that Word has created when making the copy.   Beside the actual .htm file, there are several other files created by Word and place in subdirectories under the main page. When Word reads the page, all of the links work just fine because the creator of the page has all of these special subdirectories filled with the support files and graphics that the Word program needs to properly display the page.   However when somebody else accesses the file from the Lightworker site, they do not have all of these extra folders on their computers so the graphics do not show up.  This tutorial is being made to show one method of fixing this problem that Word introduces when using that routine to prepare the html translation.   If there are any further questions about this topic, please write to me for more details, or to answer any questions you may have. You can reach me by clicking here.

Quick Access Menu

 

 

 

 

 


The Problem

     To start us off, we will look at a link that appears in it's original form on the English version of the beacons of light for the month of March, 2003, titled "Balance of Power".   During this tutorial i will be showing illustrations captured from the screen while using the HTML editor called, "Dream Weaver", if you are using a different HTML editor, then your screen may vary slightly from what i am showing here.
Illustration #1
     As you can see above, this is a small section of the original beacon of light as it appears in my html editor.   A couple of things to notice are the Lightworker.com graphic and the background color of this page.   If i were to place my cursor on this graphic, i would see the html code that instructs the computer to display this graphic. It also shows the path and the name that the page looks for when it is instructed to display the graphic.  In the case of this Original version, that data is "IMG SRC="../../images/logo/lightworkerlogo400w.jpg" WIDTH="400" HEIGHT="111" BORDER="0" ALT="lightworkerlogo400w.jpg - 18925 Bytes"> ".   
Illustration #2

    Now, compare this view of the same area from the Romanian version of the web page that was copied by the Microsoft Word program and redefined.   Notice on this shot, there is no graphic, only a gray square where the graphic used to be.   Now let us look at what MS Word has done to the graphic information when it copied the file. Here is what is required by word to display the same graphic.
 " <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="_x0000_i1054" type="#_x0000_t75" alt="lightworkerlogo400w.jpg - 18925 Bytes"
style='width:300pt;height:83.25pt'>
<v:imagedata src="Balance%20of%20Power%2003-15-03-ro_files/image001.jpg"
o:href="Balance%20of%20Power%2003-15-03-ro_files/lightworkerlogo400w.jpg"/>
</v:shape><![endif]--><![if !vml]><img width=400 height=111
src="Balance%20of%20Power%2003-15-03-ro_files/image001.jpg"
alt="lightworkerlogo400w.jpg - 18925 Bytes" v:shapes="_x0000_i1054"><![endif]><o:p></o:p></span></p>"

   From Just looking at this Word version of the simple graphic link, you can tell right from the beginning that Word doesn't have much regard for conservation of memory. It has used almost a dozen lines of HTML code to produce the same result as a "True" HTML editor can make in just a couple of lines, within the confines of this text box.   Also notice that there is no reference to the actual path to the graphic, even though the graphic name is included in the code, the path to this graphic is no longer included in the code so the computer will not know where to look for this graphic. Not finding it will result in the gray rectangle with the missing link logo in the center, as shown in illustration #2.  The program has also renamed the graphic i displays when showing this graphic. It is now called "image001.jpg" instead of "lightworlerlogo400w.jpg", by which the Lightworker server identifies it.
      Notice also that there are a few "if " statements in this code. These will also kill your link to the graphic even if you correct the code to include the true path to the graphic, those " if " statements will prevent the computer from displaying them.   If i were to simply copy the correct link from the English version, then i could go to the Romanian Word HTML page with my HTML editor, and place the cursor on the graphic, while i paste the correct information into the "Link" box that appears on my Dreamweaver "Properties" dialog menu.  This would create a true link to the graphic, but due to the "If" statements, the graphic will not be displayed, but a gray no graphic found substitute will be left in it's stead.   The if statements start like this: "<![if !vml]> " and they end like this: "<![endif]> " and if the conditions are not met, then there is no action taken.

(Menu)

(Help Files)

 

 

 

 

Fixing the Graphic Link Path

     The easiest way to fix the links is from the "display" side of the Dreamweaver program.  Even though this may not allow the graphic to be displayed due to the if statements, which we will discuss later on in this tutorial.   One item at a time will be the plan here and the first item of business is to rename and redefine the path to the Lightworker logo.   Open the original English version of the beacon for the same month as the one you are attempting to correct.   Use the menu bar selection "Window / properties" command or the key combination of "ctrl+f3", to bring up the "Properties" menu in Dreamweaver.   Open the English original version of the document and place your cursor on this logo.  When you do, you will notice that the Properties menu changes.  

Illustration #3
     You can see, above, the menu bar with the "Window" selection and below it, the "Properties" menu, in it's collapsed mode.   To expand this menu, just click on the little, down pointing, triangle at the lower right corner of the properties menu.   Clicking on this little triangle will result in the menu being displayed in it's full mode, as shown below.
Illustration #4
     You can see here that the second half of the properties menu also has items on it. This is what the menu looks like when a graphic is selected. Below you will see what the menu looks like if the cursor happens to be on some text instead of a graphic.
Illustration #5
     Here you can see that the whole layout of the properties menu has changed to deal with Text, instead of graphics and different controls appear on the menu. In this case the words "The Balance of Power" are the words to which the properties menu is displayed. Examine the boxes, and experiment if you like, to see what everything does.
     You will notice that in illustration #3 & #4 that there is a box called "Src" and this is where the link to the graphic itself is displayed.  If you open the original English version and copy this information from the Src box, you can paste it into the same box on the translation page by clicking on that graphic and then placing your cursor into the Src box and pasting the link to the .jpg file in there.  Doing this will make the path to the graphic correct and if you have your computer set up like the Lightworker site, with all of the images directories in their relative places with regard to the beacons of light then you will see the graphic show up just as it does in illustration #1.   This will only allow you to see the graphic from your computer because of the if statements that are still in the file.  After this file is uploaded to the ~beacons directory, the graphic will no longer show up until the "if" statements are removed.
    

(menu)

(Help Files)

 

 

 

 

Cleaning up If statements

    Since the "if" statements that word embeds into the html access only the special directories that word created when it copied the original file, they can only work if all of the extra files and folders are kept with the beacon of light. This Does Not happen because all that is uploaded to the ~beacons site is the single HTML file that is finally prepared from Dreamweaver, or some other HTML editor other than Word.   Most HTML editors have a "Clean up" routine that can be run on any web page to clean up all the extra stuff and redundant tags.   In the Dreamweaver there is even a special command to "clean up Word generated HTML code".   That will give you an idea of how notorious and cumbersome the Word HTM system is and why it should be avoided if possible at all times.  It is fine to make an initial translation text in a Word.doc file and copy/paste the translations over the original english beacons template.  However when a document is saved as an ".htm", file from Word, then all the trouble starts and editing is a nightmare..

Illustration #6

   You can see at left what the Commands menu looks like. Notice that the very top line is part of the menu bar and the Commands selection is active, bringing the pull down menu into view. Select the option shown highlighted here that is titled,
"Clean Up Word HTML"  When you click on this selection another pull down menu will appear and also an error message may show up. On the original computer i doubt that the error message will show up, however if the document was prepared on a different machine from the one that is doing the editing you may see a display, after clicking on this selection, that looks something like Illustration #7, shown below/
Illustration #7
      This is what the error message looks like. Just ignore it if it shows up and click on the OK to get rid of the message. Once the message is gone you will able to see the clean up menu.  
     On this Basic default view of the clean up menu you will find many options dealing with items to clean from the document.  Experiment and see which ones help, and which ones do not help.
Illustration #8
    At left you can see the basic clean up menu with some of the blocks checked off.  Notice also that the background color has been displayed on this menu also.   If one clicks on the "Detailed" tab at the top of the menu, then another pull down will appear with the options to delete all of the "if" statements.  See the next illustration, #10,for a glimpse at this new pull down menu.

     Here you can see what the menu looks like after the "Detailed' tab has been clicked.
Now you can see the box that will delete all of the "if" statements at the same time. There could be a hundred or more in any given Word generated HTML page.   To clean them out, simply put a check in the little box to the left of the <"![if...]> and the <![endif]> line.  After selecting this option, click on the OK button near the upper right side of the page.
     After cleaning the Word HTML you will see a small report menu similar to the one shown here at left.  This menu tells you how many tags, and other items were corrected in the clean up process. You can see here that there were three dozen "if" statements that were removed from the file.  Doing this individually from the source code would be a long and difficult job, so use this method to clean up your Word generated HTML.
     As you can see, from this tutorial, there are a lot of extra items and code that are created when you copy an HTML file and work it in MS Word program.   It is a certainty that the graphics links will be corrupted and most likely many others as well.   However if you use the Original English version for your reference to the links, as demonstrated in this tutorial you will be able to correct these problems.  Running the Word HTML clean up routine will also help by deleting all of the "if" statements that can mess up the connections to other files and graphics.   
      There are other problems that Word introduces into it's version of HTML as well. Many times the links to anchors on the page will fail because Word defines the paths all wrong.   On each beacon of light, there are some items on the same page that have links from other areas of that page. For example the left column links have a few that access other areas on the same page, such as the Meditation, Connecting the Heart (Barbara's column) Send to a friend, etc...   In the event that the link if to a spot on the same page, Anchors are put into the document to identify the targets.   Once an anchor is placed in the document, the actual link to that anchor can be greatly reduced in length.

(menu)

(Help Files)

 

 

 

 

Repairing Lost Anchors

     Anchors can be erased, during the conversion to the Word HTML, and when this happens then the left column links to these anchors will not function any longer, even if the link itself is correctly inserted.  It stands to reason that if there is no target, then the link to that target will fail.   Anchors are required when the link is directed to the same page upon which the link itself appears.   When making links, it is best to avoid long names with spaces in them.  HTML does not like spaces and your link could fail if you have spaces in them.  If Compound words are needed, such as in the case of the "Send this to a friend" link then it is best to make one word from the group of words that make up the link.   A link such as "send friend", has a space, and could cause problems for you.  If it does, then make one word from that link this way: "SendFriend".  Now the link says the same thing but it is only one word long.  Likewise it is a good idea to avoid the use of special symbols such as dashes in the name.   Just making the first letter in each new word Upper Case, you can distinguish each individual word in the title of the anchor.
     Lets use the article by Barbara Rother as an example of Anchors and links to these anchors.  The all work the same way, so it really doesn't matter which one we use.  
   Look at this graphic and you will see the little anchor sitting just to the left of the title for this article.  If you placed your cursor on this anchor and click the left mouse button, then the name of the anchor will appear in the dialog box that appears when the anchor is selected. See the illustration shown below for a view of this condition.
    Here as left you can see the anchor that has been selected and the resulting dialog box that appears when it is active.  The name of this anchor is "barb".  and to access this from any where on the page, all one

need do to access this anchor, is to make a link that begins with a pound sign, " # ", and is followed by the anchor name.  In this case the anchor name is "barb" so the link to this anchor would be displayed as: " #barb ". This is all.  Nothing else is required, so when Word causes your link to any anchor on the page to fail by adding long and incorrect paths to the link, all you need to do is click on that link from your Dreamweaver and change it to the correct name and make the link work once more, as it did in the original document.
     In the event that the anchor itself has been erased during copy, the best way to reestablish this anchor is to go to the area on the page where the link is supposed to connect.   Once there, place cursor just above the place where you wish the page to show when the link is clicked.   Tap the left mouse to set your cursor at that point and either use the key combination of "Ctrl+Alt+a" (the quick way), or go to the " Insert" selection on the menu bar at the top of the page and select the "Invisible tags" item from the pull down menu. Once you have done this then another menu will appear and look for the selection called, "Named Anchor".

     This is what the anchor menu looks like.  Place your cursor into the Anchor Name: box and type in barb. Click on the OK, and the link will be placed where your cursor used to be, as shown below: Notice the little anchor that has appeared above the Title of Barbara's column?
Anchors are very handy items. I have several embedded into this tutorial. All the links are on the menu, and each section is marked by an anchor.  The text above is from the Romanian translation and is the same place as the English Words appear, "Connecting the Heart".  From this section you can see that no matter if it is the link that has been corrupted, or the anchor that is missing, you can repair the damage by following the steps as i have laid them out here.

(menu)

(Help Files)

 

 

Spacing and Line feeds

     You may have noticed that it is difficult to make more than one space in Dreamweaver.  No matter how may times you strike the "space" bar, only one space is inserted.   For situations where more than one space is required, there is a method to produce any amount of them by using a combination of keys.   Let us say that you wanted to start off a new paragraph and you wanted the first word to be indented by 5 spaces, much the way this paragraph starts off.   In order to insert more than one space, it is necessary to first hold down both the ,"Ctrl+Shift", keys, and then start tapping the space bar.  You can put in as many spaces as you wish this way.    This can also be controlled with preferences selections to allow multiple spaces without the key combination just discussed.
      Line feeds are a similar problem.  Simply striking the "enter" key will not produce a line feed, but rather a paragraph feed which is more than one line in width.   If you tap the enter key, there will be double spacing to your lines.   The way to avoid this extra line feed from taking place is to hold down the, "shift", key and then tap the " Enter" key.   You will find that only one line feed is made using this method.

(menu)

(Help Files)