|
Web Site Construction
|
 |
it is not necessary to make a "web sites" parent directory, just create a directory that is comparable to the one i made you you on my computer, i named it simply Paula's site as you can see as you can see by this little illustration. Now with a place to put everything, i am ready to go to the site and get it all. As i mentioned in an earlier letter, i have put a bunch of stuff up there for you already. Our next step will be to go and get it. All we are looking for here is a place to put your web site with a name that we can address later on. |
|
2. Once you have completed step 1, the next item it to go to your FTP program and log on to your site. When i do this, the picture i see from my FTP program is shown in fig. 0, below. This is your site as it looked when i snapped the shot from the screen.
At this point you should have all of the files on the web site downloaded to your computer and ready to edit. Before we start this process, lets consider what we want this site to be. You have told me that you want three languages, which means that there will be three of everything except for graphics which will be used on each page, regardless of the language of that page. Each page of the same set should be named the same except for the language extension. For Italian the name addendum is "-it". If you want English then the addendum is "-en" and for Finish it is "-fi". Each folder you have should include an HTML file called "index.html". The index.html file is what keeps hackers out our your web site. If somebody wants to get into the kernel system of your web site where you keep all your files then they can easily do it unless you have an index file there. What the index.html file does is act as a barrier to anybody visiting your site. If somebody logs onto your site and you do not have an index.html file then they can see your site as a directory tree in which they are free to wander and explore. They can get into any of your folders and examine anything you have on your site. Worse they can walk from your site to any other site that is under your logon of "italian", which for not only means Magda but she has links to her site also and that could be a problem. So my advice on the index page is to make a copy of your home page index.html and place one in each folder you have on your site. When you make a new folder, then put a copy of your home page index.html into that folder. This will prevent "lookie loos" from browsing your site at their pleasure because when somebody hops via the explorer to a new directory on the web the first thing it looks for is an index.html file to open. If it does not find an index.html file then it opens the entire directory for everybody to see. 3. Ok, now you have all the files in your computer and you want to open a "Menu-it.html" and see what you can do with it. (no reason to pick that one except it is our first language and may be easier to build) Exchange the text you see there, make your own greeting. If you want a photo then you can change it. If you want text and photos together then insert a table to hold them and tell that table how many rows and columns you wish to have. Your menu table on the Menu-it.html (and the others too) is nothing but a table with three two rows and three columns). Lets look at the most important menu on the Dream Weaver program, the "Properties" menu. |
 |
Fig.
1 |
 |
Fig
2
This is what the properties menu looks like when you are inside a graphic instead of a text area. Notice all the differences. |
|
The two menus above are actually the same menu, the "Properties" menu which can be brought up by clicking on the menu bar selection of the Dream Weaver page titled, "Window". Pulling this menu down you will see a selection called "Properties". Click it and depending on whether or not your cursor is in a text or a graphic area you will get one of these menus. These are both showing in the "Extended" version. That is to say with the lower half of each menu showing. Normally they are hidden and one does not see them until the small, upward pointing, triangle in the lower right corner of each menu. Clicking on this will toggle the menu from extended to normal view mode. These two menus control about 90% of all you will ever do with HTML. Selections
on Fig. 1 You already know how to exchange text on a web page, so i will not spend much time on the first menu shown in Fig. 1 but i will touch on some of the boxes on that menu so you know what they do. The first box says "Format", and can be ignored. The second box holds the names of the font style you are using. Any text that is selected can be changed to any other font style by clicking on this box and picking a new font from the list that appears. The third box says "Size", and it is self explanatory. You click on the little, down pointing, triangle and you will get a list of sizes. Some are "relative sizes" and expressed as either plus or minus some number. The others are absolute sizes and can be entered in absolute values such as 2, or 3, etc. The relative size text settings tell the machine to make the new text +1 size larger, or -1 size smaller, etc. than the previous text. The fourth box on the fig.1 menu is for changing the color of the text. Select the text and click on the small square with the little triangle in it that appears as part of the fourth box. A menu of colors will appear and you can pick a color from that list that will effect the text you have selected.
When text is
also used for a link, this color change may not work because your page
defines the color ahead of time for links and usually changes any text
color when you add a link to that text. |
||
The
rest of the icons in the top row are standard stuff: B=bold,
I= italics, left justify, center justify,
and right justify finish off the top row of commands on this dialog box.
The next line down the first selection is Link.
This is an important one because this is where you attach
links to what ever is selected in your document. Whether it is a photo,
or some text or just a spot on the screen, the links path goes in this
box. If you are wondering how to put an underline on a text
string you do it from inside the HTML side of the sheet. In
the last incidence of this, the word Link, only the "L"
is underlined. Lets do that? First write
the word with out any thought of underlines. Next change your screen
to split view by clicking on the center icon in this bunch 
as you see i have done by it's depressed look. This will split
your screen so that you can see the HTML and the WYSIWYG versions of your
document at the same time. This is the symbol to begin an underlined
text string, "<u>",
a 'u' bracketed by 'less than' and 'greater than' carats. To
end the underline string just add a slash to the command like this, "</u>"
So the word Link, with an underlined "L" would look
like this in the HTML side of the screen: " <u>L</u>ink
". However when you viewed it from the WYSIWYG side it looks
like this, "Link". If i wanted the entire
word underlined it would look like this: "<u>Link</u>"
These edits must be made in the HTML window, of course. You
can also under line from the WYSIWYG view by selecting the text you want
underlined and going to the "Text / Style" menu where you will
find a command for underlining. Actually, this might be your best
bet, but i did want to show you the HTML method to get you familiar with
it. Back to the Link selection on the properties menu; Notice that on the right of the long Link box there is a folder icon? This will open your file manager so that you can go to the place where you wish the link destined for. Anything that is selected when you click on this folder icon and pick a place on the tree, will be linked to that item so when ever anybody clicks on that string of text they will be linked and brought to the link location. You can copy and paste into this box at will also. The more copy and paste word when dealing with links, the fewer bad links you will have due to the elimination of mistyping an important number or punctuation mark. On the lower extension to this menu are some table formatting tools. Here is that that part of the menu looks like:
Looking at the text/table formatting half of the properties menu we start with the combine and split cells commands. 
That is used to combine cells in a table or split cells in a table. If
you have a table with 4 columns for example and you only want 3 columns
just select any two adjoining columns and click the first part of the
icon which will combine the two selected cells into one larger one. If
you have a table with 3 columns and you want to have 4, just put cursor
in one of the tables and click on the split half of the icon and a dialog
box appears that looks like the box in fig. 5, below. |
 |
Fig. 5 Shown at left is the dialog box that will come down when you click on the split half of the cell icon. You can put any number of splits in a table just by increasing the number. As you can see by the dialog box, this is possible in both rows and columns. There are other ways to change tables also but i don't want to get you too confused at this early stage of the game. You will pick up more and more as you start to see how this all comes together and is related. In a year, you will marvel at how confused you used to get at this stuff when you were first trying to get your web site started. |
|
The
next item on this menu is the justification settings for horizontal
and vertical text placement within a table cell. Play with
these settings by making a table and placing some text inside of it.
Then start fooling with these "Horz" and "Vert"
commands while you observe the text hopping around on the screen. The properties dialog box for the graphics is different looking but works the same as the one for the text cells. Fig. 2 shows this menu. I did not mention it because i assumed you knew already but just in case you did not know, when you want to insert a table or a graphic, it is done from the "Insert" menu on Dream Weaver. It is the fourth item from the left on the menu bar at the top of the Dream Weaver window. Both graphics and tables are inserted using this command. Lets Look at the graphics properties menu now and see what everything does. Only a few items are of any concern on this menu. The first is the box called "Src" This is the place where you edit, exchange, graphics files and photos. If you want to exchange a photo, then put your cursor into the photo on your Dream Weaver page and click on the little folder icon to the right of the Src box. This brings up the file manager window where you can go and get your new graphic. If you have an address for the graphic you can paste that into the box instead of selecting from a menu. If you want to put a link to that graphic, then the box below the Src is the "Link" box. Just select the graphic and paste the address of the link into this box, bingo! your graphic has a link to that location. You can also alter the size of the photo after it comes in by using the two little boxes in front of the Src and LInk boxes. One is titled "W" and the other is "H", and i don't have to tell you what they mean, right? The width and height of the graphic can be put in these boxes to resize the shot. The only other item on this menu that you may find useful is the "Map" Options at the bottom left of the menu extension. You have a rectangle, a circle and a free shape that you can trace out on any graphic to form a link within those boundaries. The flags graphic on the site is made using these tools. Image Mapping, is what it is called. And it is a method of mapping out areas on a large graphic so that several links may be put on one picture. Before i started using image mapping, we used to use 28 separate graphics for the flag bar on the Lightworker.com home page. This made the page load slower because even though they are small, they still are counted as a separate graphic file and each one was in it's own little table cell, with it's own accompanying cell for the title of that language. So in all, we had a table with 14 columns and two rows, 28 graphics files, and 28 links to the locations in order to put up that flag bar, before we started using image mapping. After the image mapping i had one table with only one cell, one graphic, and 14 links. Using image mapping brought us from a 70 entity to a 16 entity item for our flag bar. Here is how it works; You first put your cursor into the graphic and then click on the shape icon from the Map menu, either rectangular, round, or free shape. Lets use rectangular for now. Click the rectangle icon on the Map menu area and then put your cursor back into the graphic and make a rectangle by clicking one corner and dragging to the other for the size of your link. In the case of the flag bar, i have fourteen mapped areas on the one long graphic. Once you show this boundary, you can put your cursor into it and make a link from the properties menu, as described earlier. To
get graphics and tables into your document initially, use the Insert
command from the menu bar on Dream Weaver. To edit items
within those tables and graphics, use the properties menus. When
you insert graphics you will get a directory tree menu you can use to
hop to where your graphics are for the page. You can change
the size and shape of the tables from the properties menus also. Changing
the actual graphic itself is another matter and requires a separate
program called a graphics editor, or more commonly "A Paint Program".
All graphics should be contained with in a table as well
as should the text also be contained within a table. Tables
are very important to formatting your page and presenting a good balance
of graphic and text layout. Without tables it would be very
difficult to build anything. |