Working With Dream Weaver HTML Editor
Menu
For those of you who would rather work directly in the HTML formatted document but do not know much about HTML (Hyper Text Markup Language) then we suggest Dream Weaver for your editor. Dream Weaver is a graphic interfaced HTML editor, which means that you work directly in the viewing screen instead of in the background in the HTML code editor screen, which has no pictures nor discernible format. In the HTML code area, where the advanced users prefer working, everything looks the same. Pictures are not photographs, they are only text describing the picture and where it is located. Everything is represented with text and HTML tags and codes. Unless you were very experienced you would never know what the page would look like by just viewing the HTML code. However Dream Weaver is a WYSIWYG program, which stands for (What You See Is What You Get) and you can see the results of what you are doing as you do it. It is very similar to working with a publisher program or presentation program. The following help sheet will give you some insights into using Dream Weaver and enough information to get started. There is nothing like actually working with a program to learn it well and gain an intuitive feeling for the routines involved. The more time you spend working with HTML the better you will become. We have a few folks in the lightworker family who know quite a bit about it and can give you lots of help. We , of course, are always available for questions of technical nature for the translators. The Translator's lounge is a good place to get help as well. If you are having trouble you can post a message on the Translator's lounge and if anybody knows the answer, they will respond.
We will present this information in the form of actually doing some translation work with the Dream Weaver, using a Beacons of Light bulletin we will get from the Internet. For the sake of this demonstration we will get the bulletin called "Three Magic Steps" and we will make a French translation, just for illustration purposes. The procedure is the same regardless of which language you are using.
Setting up Dream Weaver
Once you have received the OK from your Team leader to work on a particular translation then you are going to have to go get that Beacons of Light copy from the Lightworker.com site. Remember now we are going to make the translation for "Three Magic Steps" So the first thing to do is go to the Beacons of Light page and find the Bulletin. Bring up the bulletin in your browser and make sure it is the right bulletin. It does not matter if you use IE Explorer or Netscape for this because they both work fine. What you are going to do next is open your Dream Weaver to begin a new blank page. At this point you have Dream weaver open to a blank page and you have your browser open to the Bulletin you wish to translate. You should already have the translation made up in MS Word or some other format and it should have also gone through the check cycle to be sure it is acceptable to the team. Once you are certain that the translation has the seal of approval from the team you can proceed. During this operation you will be working in two windows. You have one open to the Dream Weaver, you have one open to the Word Document with the translated text. At the current time you have one more open in your browser, showing the bulletin you wish to capture. Capturing the bulletin is as easy as copy paste.
Obtaining the Bulletin to work upon
With you browser open to the bulletin you wish to copy
to the browsers "view" window and look for an option that
says something like "view page source", or just "page
source". When working in HTML you have actually two pages. You
have a source page and you have a compiled (formatted into graphics
presentation) page. The compiled page is what you see when you work
in Dream Weaver, however this is not what you want to copy. You need
to copy the page source into your Clip board. To do this you click on
"view page source" and you will see what the page "Really"
looks like. This is what we are going to copy.
Hold down the 'ctrl' key while tapping the 'a' key, one time.
This will cause all of the text on the document to be selected and highlighted.
Next you must "copy" it all by holding down the 'ctrl' key
and tapping the 'c' key one time. Now you have a copy of this
page source copied to the Windows clip board. All you need do now is
go to your blank Dream Weaver page and place your cursor into it. Then
hold down the 'ctrl' key and tap the 'v' key one time. Presto! You will
see the page appear. Not as the gobble-dee-gook you saw on the page
source screen but as a faithful representation of the original bulletin
as you saw it on the Internet. The only problem will be the photos and
the page graphics. Unless you set up your computer's directory system
to reflect the actual set up on the Lightworker.com site you will not
see graphics. What you will see is a little gray box the represents
a missing graphic. This is just fine and will not interfere with anything
you have to do with the translation. When you are all finished and we
publish it for you, then the graphics will again be visible. We will
discuss the procedure for "seeing it all" later on in this
help sheet. Now lets take a look at what we have so far. We have a window
open to the Internet and the beacons of light page showing the page
source. We have one open to the Dream Weaver with the graphic-less bulletin,
"Three Magic Steps", and we have one open to the MS Word (or
other text editor) with all the finished translations in it. Now we
are ready to start the actual translation substitution.
The Properties Dialog Box
Probably the handiest item you will use on the Dream Weaver screen is the "Properties" dialog box. You can activate it by clicking on the "Window" selection on the Menu bar at the top of the screen and you will see "properties" near the top of the Menu When you select that you get the properties dialog box. This box has two modes of operation. Full and minimal. The full presentation can be seen by clicking on the little triangle in the lower right corner of the dialog box. The properties box grows to twice it's original height and displays other aspects of the item which is active at time. This dialog has a different appearance, depending on what is active. When you have a Table active then you have a properties dialog with all the properties of the Table. If there is text selected then you have the Text properties displayed in this dialog box. Below is what it looks like when you have text selected which has a link attached. This particular text string is the little word " (menu) " that you see at the end of each section of this tutorial. We will select one of the "(Menu)" links and show you what the dialog box looks like with one of them active. You will see in the link box it says #menu. The " # " designates this as an anchor, or target. You can place targets anywhere in your document and give them names. Then when you want something linked to that target, just set up a link that gives the URL and followed by the # and a name. Inserting targets with Dream Weaver is so simple all you need do is put your cursor where you want a target and depress the 'ctrl', 'alt' and 'a' keys at the same time and tap the 'a' key one time. You will bet a little dialog box asking you to give this target a name and you just name it. From then on, any time you want to go there, just add the " #(name) " to the URL and your browser will take you there. Dream Weaver calls targets, "anchors", We wonder what William Shakespeare would have called them, roses? Anchors, targets, locators, tags, what ever you want to call them, along with links are the heart of HTML and what makes Hyper Text, "Hyper". They are the goodies that make it possible to hop around in the web.
You are looking at the collapsed view of the dialog box. In this particular application (selected and linked text) there is nothing to see on the bottom portion of the dialog, under these conditions. You can see the little triangle we mentioned at the lower right of the box above. If you click this little triangle you will get the full view of the dialog box, as shown below.
As you can see from this view of the dialog box in the full position, there is nothing on the lower portion. However if we were editing a "Table" then that would be a different situation. Before we show you what it looks like, however let me show you a table. Take a look at the menu at the top of this page. See the Hollywood Squares looking arrangement of the text boxes? This is a table with visible borders. You can make your tables visible, like the one at the top of the page with all the Menu selections in it. You see that it's frame structure is clearly visible. You can also make the tables Invisible by making the "border" a width of "0". The border width in the Menu table at top of page is "1". If it were zero then you would see the text just the same except you would not see the frames that hold the text in place. Below is a shot of the properties dialog box in the expanded position while actively displaying the properties of a table. (The one in the Menu) notice the box that says "border" has a ' 1 ' in it? If you should change this 1 to a 0 then the table would vanish from the viewing window. You would see it as a dotted ghost line in the Dream Weaver screen. Here is what it would look like invisible:
You can still see where the cells are and anything you put in the cells will be visible even though the frame itself will not be detected by your browser.
You can see that now there are areas on the lower section that relate to items on the table. Although we do not have any particular "cell" active the frame of the table itself is selected and you can see that the item which is labeled "Border" has a "1" in it. This tells us that the frame we am using for my Menu, at the top of the page is visible and the frame has a thickness to it. If we place my cursor inside one of the cells on the frame then we get still another dialog box with properties for the cell and other attributes of the table.
Now you can see that with the pointer inside the frame's cells we get another dialog box configuration. Notice the little table represented by the small 3x3 grid on the left side of the dialog box and compare it with the grid in the box above this one. Notice when the entire table was selected the grid was clear in all the cells but now in the lower dialog, a cell is shaded. This indicates the state of the selection. When the cell is active, it shows as a selected cell but if the entire table is selected, then the grid icon is clear in all 9 cells. Also notice that inside the the bar beneath the text options area is colored. You can make any cell any color. This one shows the color of the page background. Also on the left lower portion of the dialog you will see options for alignment. Horz and Vert followed by a selection box. The top one is for the horizontal placement of objects that will go into this cell. It says Center, so from side to side what ever you place in this cell will be in the center. Under Vert, the box says Middle so this means the item will be centered in both directions. At the upper right is the Text control menus. At top left is the link box that shows to which file or location the cell is linked. These Property dialogs will come in handy when you are doing your own web design and building up your own personal pages. You will find out more as you explore the options and features of the program. We only wanted to show you the properties dialog box so you would be aware of it. It is less important for doing what we are going to do in this tutorial, and that is make a French Bulletin out of an English one.
Copy and Paste Tricks
The rest of the job is pretty mundane. It consists
of copying text from the translation document and overwriting the English
text that it represents. There are a few little rules you must follow
to keep from destroying the control codes embedded in the HTML. Keep
in mind that even though you are working in the "viewing window"
everything that you do there causes HTML code to be written in the HTML
editor, away from your view. All the control codes for HTML start with
a "less than" carat like this " < ". The end
of the command's jurisdiction is shown by a "greater than"
carat preceded by a forward slash, " / > ". This is the
ending of the command. The text showing the topic of this section says
"Copy and Paste" The text is size 4 and it is centered on
the page. What this looks like in the HTML editor is, "<p
align="center"><b>font size="4">Copy
and Paste Tricks</font></b></p>" All that
for three words placed in the center of the page. What we want you to
notice here is that for every less than carat, there is a greater than
one with a slash in front of it and the same code. The first one is
a "<p align="center">"
which tells the HTML viewing area to start a new paragraph. It goes
on to say that that paragraph is going to have a center alignment. The
" < b >" means that the
text will appear "bold" the font size is going to be 4, and
finally we see the actual text. Following the text is the "closing"
counterpart of the opening commands. The forward slash indicates that
this is the end of that particular attribute. We did not type any of
this into the editor when we made that "Copy and Paste" heading.
We just typed in the words and clicked on the properties dialog box
"center justify" text button, the Bold button, and the size
box, in which we placed a four. That was all we did and the program
wrote all the other stuff you see above in blue text.
You might wonder what this embedded codes talk has to do with
copy paste. It makes pasting in text a very delicate operation and if
not handled, will wipe out some of the codes that govern the appearance
of the text itself. The control codes for that heading all start to
the left of the actual text and the closing tags are all following the
actual text string. The closing ones do not matter as far as we are
concerned but the leading ones are very important and can be easily
wiped out if you do not preserve them when pasting in the new text.
The way we accomplish this with the most safety is to leave the 1st
letter in the English version un-selected when we do the paste command.
That way we do not over write any of the codes in front of the text
(that we can not see). Rather than demonstrate this with the example
we have been talking about lets do it right from the bulletin and see
what we get. Below is a shot of the English bulletin for Three magic
steps.
This is what appeared in our Dream Weaver screen when we pasted the page source code from the beacons of light page into my blank Dream Weaver window. What we will do now is concentrate on changing the title from English to French. So we look at my word document and we see that the translator has written for me, "(three magic) Trois Pas Magiques" Being a sympathetic translator you will see that the French translator has placed the first couple of words in English for me so we would know where to place them in the bulletin. She must have read my open request on the Help Files Menu So now we want to copy this string of text and paste it into the document while maintaining the same font style and formatting of the original bulletin. The first thing to do is select the text "Trois Pas Magiques" and copy it to my clip board. We do this by placing my cursor on the first (French) letter in the translation, depressing the left mouse button and dragging the cursor all the way to the 's' in "Magiques", then holding the 'ctrl' button down we tap the 'c' key. Now the French translation is in the clip board. Next we go to the Dream Weaver
window with the English version in it and (working from right to left) we place my cursor on the last letter in the string to replace. Remember the codes which we capture and destroy doing this will all be "after" the text and the only ones that can harm your operation are the ones which are "in front" of your text as these set the attributes of the text string while the trailing ones only stop those attributes from being applied to what ever follows. As you see above we have dragged my cursor towards the left but instead of highlighting the entire title, we have stopped just one letter short of the selection. Now we KNOW for sure that we have NOT selected any of the control codes which dictate the appearance of the pasted text. And since we are going to paste into that string by "adding" to it, in effect, then the string will look exactly like it did before the pastes, regardless of what the French text looked like in the source document. To illustrate how the control codes can alter the source text when we paste it, we have selected the French text from the previous paragraph, which is neither as large nor the same style. We are selecting normal, italicized text and when we paste it into the bulletin, it will assume the attributes of the existing text, provided we do not destroy the leading codes. By leaving the first letter in the string, we have done this. Now all we need do is hold down the 'ctrl' key and tap the 'v' key one time and we end up with what you see below:
After the paste, the title looks like the illustration
above. Notice that although the control codes did make the text the
proper size and boldness, it also kept the "italic" feature
of the text that was in the clip board. Next step, of course would be
to delete the 1st 'T' in the line and then select the rest of the text,
so we can alter it's appearance and remove the "italic" tag.
The italic tag inside the HTML editor looks like this: " <
i > ". when you see this in front of a text string in
the HTML editor then that means everything between that tag, and this
one: " < / i > " will be
italicized. So next we delete the first (extra) 't' and then select
the rest of the text by depressing the left mouse and dragging across
it so the title is all selected. Next place your cursor in the Properties
Dialog (remember that one?) and in the text control area, click the
"I" button. This will release it and it will pop up again,
removing the < i > from the HTML
code in the HTML editor. Now we have the finished title and we go ahead
and do the same to all of the text on the title area of the Bulletin.
It is important to note that when you select text to over write using
this method of not including the first character, you also preserve
any links that may be associated with that item. If by clicking on the
text before the translation would take you some place, then after pasting
in the new French text, it will still take you there. Not in the Editor,
of course, but if you tap the control key at the top of your keyboard
that says 'f12' on it then Dream Weaver will show you what your translation
looks like as seen through your Browser's window and the way it will
appear on the web.
Maintaining the Formatting and Links
Making the changes to the rest of the document is done the exact same method. One paragraph at a time because there are control codes that define the paragraphs them selves that are in the HTML and if your selection spans more than one paragraph then you will lose those control codes which precede each one and all your document will be one giant paragraph, with the entire translation in one text clump. Likewise when editing a paragraph which contains a link, then we do NOT want to disturb that link. Do not include any "links" that lie between text. That is to say if a line of text starts out as plain text and ends up as plain text, but has a link in the middle somewhere then if you select the entire string, you will wipe out that link and it will be pasted in as plain text also. You must make your text selections "around" the link and avoid touching it. Treat a sentence with an embedded link as three separate copy and paste operations. To illustrate this for you more "visual" people we will write a sample sentence that has a link in it.:
"Hello my friends, click here and come to my place."
You can see the the "link" is right in the middle of the text. This means we must work around it when we make the translation. So we must only select the translation first, which lies before or after the link. Be careful not to select any of the link itself or the whole string will be linked.
"Bonjour mes amis, cliquez ici et viennent à chez moi."
Above you see the approximate (apologies to
the French team, my French is not that good) French translation
for the sentence. So when we make this translation, my first selection
will be from a point between the 's' in fiends and include the entire
phrase except for the first letter. Placing my cursor in the same place
in the Translation, would be after the 's' in 'amis'. We would select
everything in front of that all the way to the 'o' in "Bonjour",
where we would stop to avoid selecting the first letter and chance going
too far and losing my formatting. We would do the same with the last
part of the sentence up to the place where the link starts and paste
it in also. Then one more time we would have to paste the translation
for the link itself being VERY careful not to select the 'c' in "click".
With everything pasted in you can go in and remove the extra letters
and all the link will be maintained. The formatting and paragraph
structure is also maintained by using this method, as well as the special
condition of any words like underlined titles or something on that order.
From here on out, it is pretty much routine copy paste, observing
the rules we mentioned so you can avoid a lot of frustration. We will
also encourage you to "File Frequently". This means "Save
your work often". Every time you finish a tough part, save the
file. Each time you leave your machine for any reason, save the file.
My students used to ask me, "How often should
we save our work?" My answer was always the same, "How
much time to you want to lose?"We often answer questions
with questions when individuals are involved. Everybody has a different
way of doing things and what works for one person may not work for the
other. When a student can deduce the answer on his/her own from hints,
then it is assured the student will not forget the process because is
one of deduction and not memory. If you save your work once each hour,
then you risk losing an hour's worth of work if anything should happen
to the computer. If you save every 10 minutes, then the most work you
can lose, in case of small disaster is 10 minutes work. Sooner or later
everybody will lose time due to computer problems which may cause some
work to have to be done all over again. If you file every 10 minutes
you can be assured that you will never have to make up more than 10
minutes, when problems arise. The date and time of the meditation
which is the top most item on the English version is not used on the
Translated versions unless the translation is completed and published
prior to that meditation date. If you get the translation too late for
this date then you will want to omit the announcement of the on line
meditation from the top of your translation.
Standard Notes Sheets
We have prepared some aids to help the HTML assemblers to process the translated bulletins. One of these is the "standard notes" sheets. We do not have them ready in all the languages yet, as we are picking up new ones so fast that it is difficult to keep up with it all. These standard note sheets are particularly handy when the person doing the HTML does not know the language of the text. You can view these help sheets by clicking on the link below:
"http://www.lightworker.com/beacons/translations/std_notes-en.shtml"
Actually this is the "template" we use to make up the standard notes sheets. To get to the actual sheets, in the languages, you must click on the flags. The purpose for these sheets is so the translation coordinator, or HTML person who is making up the Beacons of Light translation assembly does not need to know the language to update the standard notes. Standard notes are the ones which do not change from month to month or bulletin to bulletin. Items like the Copyright information, the Special Request notice, the instructional items like "click here" and other static parts of the bulletin. For a year i was doing all of the HTML work and all of the standard notes in all of the languages. These sheets were vital to me. However with the advent of HTML literate, or at least Dream Weaver users, i will have a break. My goal for the Teams is to have people in each team who will do all the HTML work for that team. The best possible target would be for EVERY BODY to do their own HTML work. This would end my growing tendency to be a "bottle neck" in the growing organization and flow of the translations. It does not take a rocket scientist to figure that one person doing the HTML for 30 other people can not work as fast as 30 people, each doing their own. The efficiency of the operation would soar and we would be able to eliminate the Standard notes because each HTML assembler would be part of the team who made the translation in the first place and would know the language. No need for translation aids in that case.
Making the Translation Substitutions
Well now that you have a few tips on what to look out for, we can get to work on Bulletin main body text. There two Main bodies of text we are concerned with, the Channeled message and the Meditation. Together with the headlines, introduction-closing comments, and Standard notes this makes up the Beacons of Light bulletin. The channeled message always starts out with "Greetings from Home" and the Meditation is clearly marked as "meditation".
Above you see the beginning of the Channeled message. The meditation is similar and what we do with this, will also work with the meditation. This is what the beginning of the message looks like on my computer screen we will be changing all the English text for French translation, while maintaining the format and font styles/colors. Below is a shot of the French translation from the Word Pad editor. You can use any text editor you wish but you have to really search hard to find a better one than MS Word. We are using word pad here to show you that you do not need anything fancier than the build in stuff that comes with windows.
Here we see the French translation in the .doc format. The font size and style is far from what we will be achieving on the HTML document but we already know that the codes inside the HTML file are what shape the appearance, right? So it does not matter what the source text looks like. It may, however carry over some of it's attributes, like "italics" or "underline" features. We have selected the salutation at the top and will now paste it into the English version, using the methods discussed in the copy and paste tips. Now we need to go to the English bulletin and paste this selection into the proper place to replace the equivalent word(s). You can see below the shot of the page location which is to be replaced, highlighted except for the "first letter". Remember if we include this, we have a chance of capturing the control codes also and changing the font style, formatting, color, etc..
So we stop our selection short of the first letter. Now just paste the French text you just captured with your "copy" command on the resource doc and paste it into the bulletin.
Above you see the result of the paste and then the subsequent selection of the next bunch of text which is selected to be replaced. Notice again that the first letter has not been selected, so we can maintain the proper formatting and styles. Notice also the extra "G" in front of the salutation. This will be removed when after we paste in the new text and at the same time as the extra letter that is generated from that operation. Although this text is highlighted, that only means that it is selected and not yet on the clipboard. Selected text will be overwritten any time a paste command is issued. By selecting the next paragraph to replace while still in the HTML doc, all we need to do is go back to the source document and select the French text that is to be "copied" as well. The text is not in the clip board until you issue the copy command.
With the above text highlighted, as shown we copy it to the clip board by holding down the 'ctrl' key and tapping the 'c' key one time. We can also click on the Edit command from the top of the page and select "Copy" from the menu. Now just return to the Dream Weaver screen, where your text to replace is already 'highlighted' (remember?..) and do the 'paste' command by holding down the 'ctrl' key and tapping the 'v' key one time, or going to the Edit selection at the top of the page and selecting "Paste" from the menu. If you remember now, we have the salutation and the first paragraph translated except for the first letter in each. Just select each of these letters and tap the delete key, or place your cursor to the right of them and tap the back space key. A third method is place your cursor to the left of the letter and tap the delete key. When you are finished your document will look like the example below.
Here we see the beginning of the translated message
with the leading characters removed, and looking like it will when it
is published. You will continue on this way, doing each paragraph and
heading in turn. Leaving the leading character in the target document
NOT selected, to maintain the integrity of the formatting and the visual
appearance of the finished document.
The procedures are the same for the entire bulletin, only the text
will change. You can continue this way until the entire Bulletin has
had the text replaced with French (or what ever other language) You
will not be able to see the page as it is shown here because when you
edit your copy you will not have the Graphic shown here. The name of
the graphic is thegroup.jpg and it is on the lightworker site in the
"lightworker.com/images/"directory. If you want all the graphics
that are associated with this bulletin let me know and we will make
them all available to you so that when you look at your file in the
Dream Weaver, you will see the full view as it would look on the web.
(except with the ghost frames). There is one problem however with this
option. The Graphic must be kept in the same relative location to your
editing directory as it is from the published directory on the Internet.
Lightworker.com Directory Tree
Our server runs on a "UNIX spin-off" called Linux. Unix is a sort of the stern old grandfather of the playful and forgiving DOS. There is a directory structure in Unix that is an inverted tree. Like a tree growing in the ground, it has limbs and branches etc.. the only difference is that it is inverted with the root pointing upward and the paths pointing downward as we progress deeper and deeper in to the depths of the directory tree. For all practical purposes, our directory tree starts at "lightworker.com". This is our "Root" directory and all the rest of the site branches off of that root for us.
This diagram of the directory tree is only showing
the areas that are of interest to the translation teams HTML workers.
You will see that the root of the tree is at top, so our tree grows
downward instead of upward. The three main branches are Beacons, Images,
and Users. As you follow the paths you can see that in this diagram
we have four levels of sub-directories branching off of our root, which
is lightworker.com. The purpose of this information is to give you a
picture of how the site is set up so you can trace the paths from your
pages to your graphics. All of the graphics that are used on the beacons
are found in the "images" directory. You can see it above,
first level down from the root. However you can see there are different
levels within the images directory. There are many more subs coming
off images but as we mentioned, we are only concerned with these.
When negotiating the directory tree there are a couple of rules and
strange situations that are in effect. You can think of each directory
or folder as a geographic location. Just like California, or Uruguay.
As we discuss this directory tree we will express ourselves as though
they were locations, by saying things like, "Go to Flags",
or "drop down to the help files", just as though they were
locations. You will have an easier time understanding this section if
you think of the directories as places or rather than abstract concepts
in hyperspace.
One of the reasons HTML is so great for Internet use is that they can control and display a lot of information with only a small amount of memory space taken up by the HTML file. HTML files are tiny compared to the data they handle. They are not like document files, where all the data is contained within the file. If we make a Word Document and put a half dozen large photos in to it, then we are going to have a very large file which is going to take up a lot of room. However if we make an HTML file and have it display the same photos the size increase of the file is minuscule. It only increased by one line of plane text, that is all. Oh, for sure you can load up an HTML file with some giant graphics and make it large too but that is not the way to utilize the HTML files. The beauty lies in the way they control data. They are more like programs than documents. They control and direct traffic for all those big memory intensive graphics files however the graphics are NOT a part of the HTML file. It only tells the computer where to find the graphic. To illustrate my point, this file is less than 50k right now at this point in it's development. However so far we have over 500 megs of photos and graphics in it. Sort of like putting 25 pounds of candy in a 2 pound capacity bag. However this feature which makes HTML so cool, is also the source for one of the biggest cyber head aches ever invented: "Lost links" When your pictures disappear it is quite frustrating but not any where as near frustrating as the 404 Internet error message, that the server can not find the file. Both of these problems are caused by broken links. There are a lot of things that can cause broken links but we are only discussing the "bad path" cause of link failure due to having the wrong "directions" to your graphics.
Graphic paths
Let us continue using our French bulletin which is complete now except for the graphics which for some strange reason do not show up. (Only kidding, the strange reason is this exercise) In this exercise we will find out why our graphics do not display and then trace down the problem and fix it. The first graphic that we come to which does not work is shown below.
It is easy to see that something is wrong here. This
is what the bulletin will look like when you past the source code into
your Dream Weaver software. The reason is because you do not have the
graphics that are on the server so when the HTML says to look at a graphic,
it gives the location of that graphic. Since the bulletin is not on
the server now, but in your computer, it can not find the graphics that
go with these two pictures, and so it puts the little broken link symbol
up instead, to indicate that the path to the item desired, is not a
good path. There are two ways of giving directions on how to go somewhere.
You can give an absolute address such as "556 w. J Street, Chula
Vista, CA, USA", and then the person who wants to find the place
Knows exactly where it is. It does not matter at all where in the world
that person happens to be at the time, the address does not change.
It is "absolute". The other way to give instructions on how
to go somewhere is to issue the commands as "relative" path.
In a relative path, one needs to know WHERE they are, to start with.
An example of a relative path to the same address as was just expressed
as absolute, would require that the person tracing the journey know
where they are in "relation" to the destination. This makes
the information and the path "relative" to the location of
the seeker. If somebody called me from the liquor store on my corner,
trying to reach my house then instead of giving an absolute address
(which did not work this time because the guy could not spot the house,
being as how it is off the street). The address to the exact same place
now would be, "go north on J street for about two hundred yards
and turn right down the driveway just north of the white house."
It is very simple to see that this set of instructions will only work
if the person looking for that address were at the liquor store on the
corner. If somebody in another part of town wanted a relative path to
my house, then it would be completely different.
That is the difference between absolute address and relative address.
In most cases when applied to computers, the relative path is the shortest
and easiest to give. However, it is required to know where you are at
the time, just as in the example above.
In the graphic you see above the absolute location of the graphic is "http://www.lightworker.com/images/thegroup.jpg". If the HTML had the absolute address of the graphics in it then when you opted for the browser view of your HTML, you would see the graphics just fine. The computer knows to go to the lightworker server to find them, because the absolute path told it where the file was, in the universe. Let's take a look at what the "tag" for the file says it is looking for. We examine this by placing your cursor on the broken link symbol and depressing the right mouse button. Doing this will display a menu, as shown below. This menu has a selection called edit tag. This is what we are going to use to see where the file thinks that the graphic is hiding.
 |
At left you see the menu with the edit tag <img> selected. Clicking on this will bring up the HTML code that controls that graphic's search path. Lets click on it and see what that gives us?
Aha, look at that. What sort of directions to the graphic is that supposed to be which we are looking at? The "address" part lies between the Quotes. This is the address of the image. What it shows us here is that there is NO path. It simply says, "thegroup.jpg". This indicates that the graphic is in the same directory as the bulletin. If the graphic called "thegroup.jpg" were to be placed in the same directory in which we am composing this page, then you would see the graphic. However None of the graphics are stored with the bulletins. We keep our graphics in a different place, with all the other graphics. This explains why we can not see a picture here instead of that little broken links icon. |
There are two ways to fix this. One way would be to use the absolute path to the graphic. Remember what it was? "http://lightworker.com/images/thegroup.jpg" However that is a lot of writing and it also limits the location of the graphic to only that one place, in the universe. A better way to give the path is to use the "relative" path method. You will remember that in order to use the "relative" path it is necessary to know "where" you are in relation to the place you want to go. Let's look at our Directory Tree again by clicking on this link at left. But before we do, let's know what we are looking for.
We want to find out the relationship between the locations
of the bulletin and the graphics. This is the "relative path"
that we are looking for. All of the beacons on light are in the "beacons"
directory. All the graphics are in the "images" directory
of one of it's sub-directories. Looking at the diagram of our directory
tree, we see that both the 'beacons' and the 'images' directories are
on the SAME level, which is one step down from the "root"
or Lightworker.com directory. Here is where the fun starts. If you pretend
this diagram is one showing a bunch of islands in a body of water, and
connected by roads then this next part will be easier to under stand
for you. Pretend that the only way you can get from one island to the
other is by traveling these roads. You can not swim from island to island
but must walk the road ways that connect them.
OK then, lets see where the bulletin is with respect to the graphic
and which way you must go to get there. Even though they are both in
the same level, there is a body of water between them and you can not
simply hop over. You must go "UP" to the lightworker.com island
and then go "DOWN" again to get to the images island.
When navigating the directory tree the way to go "down" is
simply to type in the name of the sub-directory and it will let you
descend to that level. Moving 'upstream' is a little more complicated.
There are a couple of "short hand" marks that represent directory
levels. A single dot " . " indicates THE CURRENT DIR. Two
dots together " .. " indicates one directory upstream, or
closer to the root. The last little short hand character is the forward
slash " / ". which indicates "root" directory or,
Lightworker.com. And every directory level under that is also indicated
by a forward slash.
Knowing this, lets look at our directory tree and see what the relative
path will be to the graphic that we need. We are starting at the "beacons"
directory and traveling to the "images" directory. So the
first step is to go up to the next higher island. Going up means two
dots, going back down again to the images directory from that point
only required the name to be typed in, however it is another directory
level and so a slash must follow the dots and precede the island name.
So then the relative path from the beacons directory to the images directory
would be written this way, "../images"
. In that images directory is the graphic that we require and it is
called "thegroup.jpg". If we
were to include this into the path then we have a complete "relative"
path from the beacons of light to the images directory and the file
"thegroup.jpg". The path should look like this, in that case,
"../images/thegroup.jpg" Notice
that we added another forward slash after the directory name. These
forward slashes are the delineators the separate the directory levels
and the directory level files. In this case we are making a distinction
between the directory "images" and the file "thegroup.jpg"
which resides there.
Now that we know what the relative path is from our
beacons of light bulletin, to the "thegroup.jpg" graphic is,
(../images/thegroup.jpg) then all we have
to do is put that graphic in another directory that is on the same directory
level on which your bulletin is being edited.
Because we do not know what directory names are going to be involved
for this example, lets use the word, "name"
for all names, and it will be replaced by the actual names when you
set it up on our own computers. This path, without considering the directory
names would be:
"../name/thegroup.jpg"
Here is where the beauty of the relative path shines... It does not matter what the directories are called at all. If all the HTML editing that you do is in a directory on your computer that is called "Build_HTML", then that is just fine and will not make any difference at all with respect to the ability to see your graphic. All you need to do is create another directory which lies on the same level on the directory tree as the "Build_HTML" that you are editing. Lets say that you keep all your graphics in a directory called, "Say_Cheese", which is on the same directory level as the "Build_HTML" directory, in this example.
"../Say_Cheese/thegroup.jpg"
Are the lights coming on?... I love it when things start to make sense ;-) You see, here, the only thing that matters is the instructions to go up one level, and down one (named) level, to a specific file. The "go up one level" directory does not even need a name, as the two dots, ".." represent the "parent" directory, whatever it is called. Every sub-directory on the Site has a Parent directory. That is the directory under which it resides. The only directory that does not have, nor need a parent is the "root" directory.
So knowing this, lets go back and change that "tag"
to read the actual relative path that exists on the lightworker site
and see if this makes a difference. So we click on the broken link icon
again and with the right mouse bring up the menu once more with the
edit tag command. Click on the command and change the part between the
quotes to read
"../images/thegroup.jpg". Seeing
as how i have my computer set up the same way as the lightworker site,
with the same directories and directory names then i can use the same
paths that are on the bulletin originally when it is published. See
what the tag looks like now:
 |
With the proper relative path in the line that calls up the graphic, you can see now that the graphic is visible. Before the computer was looking in the same directory as the bulletin and it could not find the graphic. But now it travels up one level to the "lightworker" directory and then down to the "images" directory where it calls out the name of the file. |
With the proper path the computer can find the graphic now. We must do the same thing for the photo on that page also. However, if you look at the directory tree you will see a sub directory under 'images' that says "photos". That is where the photos for the page are kept. So we must make that path read "../images/photos/photoname.jpg" We can find out the photo name by just clicking on the broken link icon and observing the change in the "properties" box. Remember the properties dialog box? Lets click on the broken link for that photo and see what it says?
Here is a shot of the properties dialog box with the cursor on the broken link symbol for the photograph and the left mouse button depressed once. The left mouse button will activate the properties dialog box to change to the properties of what ever is under the cursor when you hit the button. We can see here that the name of the photo is "nijmegen1.jpg". Knowing this, and knowing that the relative path will end up in the photos directory, lets edit that tag for the photo to read, "../images/photos/nijmegen1.jpg" and see what the photo looks like then.
Now we have the photo back again. Notice the edit tag
dialog over the photo showing what we typed into it to change the path
to the graphic? Now the path is correct and the computer can find the
photograph for that tag.
Paths are going to be a part of everything you do while working in HTML.
Any time you have a graphic or photo, or other reference, you will need
a tag to show the path name how to get there. You will find more little
"tricks" when you start playing with the program. I will however
save that for a later tutorial. This is so much information already
that we do not want to load you up with any more for now. There is one
more thing you can do so that you can eliminate the problem of paths
to the graphics when editing the Beacons of light, and that is Cloning.
Cloning the Lightworker site
In order to work with the bulletins and graphics so
that all the links are maintained one of the best ways to do this is
to "Clone" the Lightworker site on your machine. I do not
mean everything on the site, only the directories that you will be using,
and then not all the files in the directories. You only need to have
the graphics that go with the bulletin you are working on.
To start this process, just use the chart showing the directory tree
that we have shown you and create those directories. Start out selecting
a drive which has plenty of room. I don't know how you have your computer
partitioned or if you even have more than one drive at all. For my own
use, i have the lightworker and planet lightworker sites cloned on my
"F:/" drive. You pick one that has enough room and create
a directory called 'lightworker",
then get into that directory and create three more inside that one:
"users", "beacons",
and "images", as shown on the
chart. Continue this procedure following the diagram on the directory
tree, making each directory level you see on the chart, naming the directories
as shown. When you are finished you can look at the set up with your
windows file manager and it will display all the physical paths to all
the directories, as it is indicated on the chart. Now when you work
on any of the bulletins you will do it inside of the "beacons"
directory. When you down load or copy the graphics for the bulletin,
you will put them in the images directory, or what ever directory in
which they appear on the Internet. There are several sub-directories
under the "images" directory as you can see. One is called
Photos, this is where all for the photographs from the beacons are stored.
The photo of Steve and Barbara on each bulletin is kept in the "images/photos/"
directory. A link to a photo in that directory drops down on more level
using the relative path from the beacons directory. Look at the relationship
now to a photo:
"../images/photos/photo
name.jpg", where the photo name is the one
called out in the edit tag command we showed you a little while ago.
If you maintain your directory structure so it mimics the lightworker
site then all of the paths should work for you. You will have to copy
the images to get them but that is not a difficult thing to do. Simply
activate your browser, go to the beacons of light bulletin from which
you want the graphics, and put your cursor on the photo or graphic,
then click the right mouse button and select the "save
image" option. When the dialog box comes up showing the
directory tree on your computer, then just select the directory you
wish to deposit the graphic or photo. In this case all the graphics
go into the "lightworker/images"
directory and all the photos go in the "lightworker/images/photos"
directory.
Well folks, that is all there is to it. Well, maybe not all but enough to get you all started any how. As you work with the Dream Weaver, you will find that it has many many more features and little tricks to help you with the tasks of building HTML pages. Have fun and do not be shy about asking questions. We are always available to help.