Web SiteMaps

 

The Intro

    I have had these WebPages for a long, long time. Thought about creating a SiteMap many times, but never got around to it. Now I have decided that it would be good to have one. If for no other reason than to just do it. As usual, we will search the Net for ideas and info.

    Now then, one thing that you need to consider is... ta, tah, tahhhh... what is it going to contain and what is it going to look like?? Well, naturally, since it is a map of your site it will contain links to, or at least a list of, your WebPages. Technically, and robustly, links to your pages would be the best. Navigation is essentially a list of places to visit on your site.

    Now, if you have any knowledge of this at all, you will realize that your WebSite is nothing more than one, or more directories of HTML, PHP, CSS, etc; files on an ISP somewhere in the world. Matter of fact you may have a copy of it on your 'puter. So, this SiteMap is just going to be a Special Listing of those files and directories. That is all it is. However, you can enhance it with other information... like descriptions of what the files and directories contain. (The scanning mechanism is going to scan the files on your ISP - NOT on your PC.)

News Flash  IF - only to myself. This, Vendor Prefix Lists, has all, or at least most of, the idiosyncrasies that I have been complaining about!! Wow! And All you have to do is spend hours searching the Web and you too can have this kind of information. -But- you can go nuts trying to understand it all.

Top

Site Map Info

    From what I have seen on the Web, a SiteMap consists of usually one page of references to areas on a particular site. The page may also contain links to external sites. These will have descriptive names, and/or, a short description. There is also, normally some kind of order to the lists.

    One of the things, that many keep harping on, is that your site will get better recognition with a SiteMap. A Google XML style site map. This however, will not get you good navigation for your visitors. Well, it may if you code everything right, but an HTML version is easier to work with. So, you really want two versions. One for your visitors and one for the search engines. Sounds like a lot of work ... and it is. -But- the work can be reduced with a good Sitemap Generator. There are many available on the Web, both free and for cost.

    Now then, in doing this research, I have found that for the most part, all these people are doing is placing your directories and files in Ordered Lists. Most of them are referred to as Un-Ordered Lists -but- that is only cause they do not use any kind of numbering or lettering in the lists. Most of these will have the usual:

  • disc,   ○ open circle, or the   ■ solid square
next to the items in lists. And you can specify your own little graphic symbol. After all, this is being done on a computer -and- they are really programmable.

You must learn one thing: it's NOT optional to close <li> elements (or for that matter any non-empty element) in XHTML. They ALL must have closing tags.

SiteMap Descriptions and a little Advertizement    

With HTML and XML SiteMaps you can make sure Google, Yahoo, MSN Live etc. will index your entire website and speed up finding changed content.

The A1 Sitemap Generator can scan large websites, it supports a wide array of filtering options and can create many kinds of SiteMaps including urllist, HTML, RSS and XML Google sitemaps.

  • HTML sitemaps helps humans navigate your website and search engines to find your important pages. You can create beautiful and fully customizable HTML SiteMaps with multiple columns that span multiple pages.
  • XML sitemaps protocol as created by Google lets all search engines efficiently discover all pages in your WebSite. Built-in FTP upload and sending sitemap pings to search engines. Supports splitting and GZip compression of created XML SiteMap files.

 Free Sitemap  I would call this more of a file lister than a sitemap. However, it is free and it is another way of looking at your site content. The program is downloadable and runs in Windows 2000 and above. It produces a list of your files in:
    C:\Documents and Settings\ctaylor\Local Settings\Temp\Sitemap-Generator\8262011 105814 PM
with their full pathname in HTML format plus the same list in TEXT format. As you can see above, it creates a Dir with the name of the Date and Time that the list was created. Good idea for record keeping. Through this program and my GWD Text editor I found that I have 880 files on my Site!
Refer: Free Sitemap Generator

 Arclab Dir2HTML  Arclab Dir2HTML is a directory to HTML index converter which builds a html index file out of directory structures and files on your harddisk. Dir2HTML supports recursive indexing, can create sub-sections for each subfolder within the index file and link files for online and offline projects using a custom link-prefix.
I found this one very interesting.
Refer: Arclab

Top

A1 Sitemap Generator

    I chose this SiteMap Creator because it can create both types (XML and HTML) of SiteMaps that, theoretically, I need... and I liked the way it operated. More along my ways of thought. The HTML template(s) are good and fairly complete. He uses the word 'Project', like so many others have, and I really have a hard time comprehending that. However, after looking it up and including the definition here, I guess it fits. I've just always had different ways of looking at and describing things. -But- I'm sure most of you will understand. ( And the price was/is reasonable.)

Project - Noun
    * S: (n) undertaking, project, task, labor (any piece of work that is undertaken or attempted) 
	  "he prepared for great undertakings"
    * S: (n) project, projection (a planned undertaking) 

    In order to use A1 Sitemap Generator, you must first download it from their site or a mirror. Microsystools Download has an excellent description of how to bring it down to your system... and install it.

    Using it is another story. The ease of use will depend on your experience and understanding. It is sometimes difficult for two, or more, people to think the same way. In a class I taught on Micro Computers, I did an experiment. I requested them to turn in notes every week on what they learned. I had 15 students... and I would get 15 different versions of what I said!! Velly intelllllesting...

  HTML Version  I, primarily, was/am interested in the HTML version. The plans for my site got way-layed and it has become a mess. I put a Google search box in a couple of areas, but I really don't know how much that helped.\ I do believe a SiteMap, which is nothing more than a table of contents will help. No, I am not be-littling it. A SiteMap -or- a Table of Contents are both very important, especially in a deranged site like mine.

    As was stated above, he has placed a fairly good HTML template in here for our use. Personally, I would have liked it IF we could have modified the template and saved it, -but- that is not the case. After conversing with him on it, and instilling a possible future mod, he told me of a work-a-round. You start with a Fresh Project and do not specify any WebPages or WebSites. Then you make the desired changes to the HTML template(s) and save them in a Model Project. Later, when you want to make a SiteMap, you first Re-Open the Model Project, then you scan your site into it, create the SiteMap and then save it under a New Project name. It works. In doing this, you will have created your own basic skeleton that you can use for all your future Projects.

    You can still edit the Saved HTML sitemap file and further enhance it. Just remember, that all the changes made externally, will NOT be there IF you create a new one. Unless... you put the changes in the Template as I have done down below.

Top

Some added benefits

    On top of creating SiteMaps, this piece of Software can tell you a lot about your Webpages...through its 'Analyze Website' feature. Sometimes, about things that you didn't even realize were done... or there. I found tons of external links that I had totally forgotten about. Some of them were created by a copy/paste from another site or forum. If for nothing else this makes a good teacher/informer on HTML. The SiteMap just becomes a Side Benefit.

    As stated in the beginning, I have had these WebPages for a long, long time. I'm sure that a number of you have had some pages for a long time. This program can help you "Clean Up" your pages. He, the author of this Generator, has some other tools that I have not yet tested -but- IF they are as good as this one, I'm sure that a number of you will use them. I'm slow and getting slower, so my analyzation(s) take a little longer.

Top

Jump in with New Version 3.2.7 3.2.8 3.3.0


I am going to jump in here with this latest version as of this date cause I have been away from it for to long and I am going to have to re-learn some of it. During this break I had to re-do my Windows setups inside VMware, where I am using this program. I had the project files saved out on another drive and was able to just copy them in. Their location for this program is:
   C:\Documents and Settings\ctaylor\My Documents\Microsys\Sitemap Generator 3\projects
At that location you will find, for example: TRcompu-1.ini and a TRcompu-1 folder. These contain your Project information and are what gets created when you first start with this Sitemap Generator. I just copied mine over which originally started in version 2.x and then I updated to 3.x and now to this latest version. Hope they still work. (They did.)
Note: On Aug 10th, 2011, I recieved an update from the Author. He has incorporated the SlickMap CSS stuff into this generator. So, I am dumping my files and starting over. The following will be somewhat revised. IF I can remember ... in a different color... Cadet Blue.

Well, I'm jumping in again. This time to apologize to the Author. Some of the problems I had in my first use of this new version were because I used my previous Project Files. Now it is good that this program could read and use my old files -but- it is bad that I forgot what I changed. Slickmap, referenced below was used to create a Graphical SiteMap. Consequently, I had some problems because I did not have slickmap.css and it's images available for this latest version. So, before any complaints are made in the future we will check things WITHOUT our project files first.

First Scan      

'First Scan' needs to be clarified. It is not the first time I have scanned my WebSite -but- it is the first time with this version. The difference between my Info and the Authors is... I am recording this 'AS' I am doing it. Also in this case ... as I am re-learning it. So this will be, more or less, a step by step discription.

After copying the Project files over, I initiated a scan of my WebSite. It finished in 1 minute and 57 seconds. When it finishes it brings you up in a version of his Website Analyzer. This one is not as extensive as his Full Product but it gives you some important information. So, you don't miss the important info that is presented, I suggest you read the following WebPage:
    http://www.microsystools.com/products/sitemap-generator/help/sitemaps-generator-analyze-links/

Ver 3.2.8 NOT using old Project Files.

  1.  Paths
     You need to tell this Sitemap Generator where to look. Here you enter your website root path, ie; http://www.trcompu.com and this is probably all you will need. You can, however, also configure root path aliases. To learn more about root path aliases, see solve website crawling issues.When creating sitemaps with A1 Sitemap Generator you can change the root path. This means you can scan your local instead of online websites.
     Refer: Search Paths
  2.  Scan Progress
     Just what it says. You will see the number of files scanned and how long it takes.
     Refer: Crawler Status
  3.  Crawler Options
     Here you can select a lot of controlling scenarios. Like searching for links inside "Flash Vars" and in Javascript. There are lots more but those are the two that I need to worry about. Be careful on this page. Unless the Author gets it changed, you can select -or- deselect one of these options just by clicking on the page. Should only use the checkbox -but- it is using the whole line.
    I set the options for Flash Vars and Javascript Links.
     Refer: Crawler Options also Duplicate Content
  4.  Crawler Engine
     This is the piece of code that is going to roam your site. Unless you really know what you are doing -or- have been directed, leave everything alone - as is. Path type is normally set to auto detect. You can override this option, but it is only used if the site mapper program is in doubt regarding a link.
    Used defaults
     Refer: MiggiBot Crawler
  5.  Crawler Identification
     Had a little trouble finding this one -but- you can look in the reference I have specified. What this is - is your Username and Password to sign on to a Site -or- I presume a Password Protected area.
    (I'll check and verify this later.)
    Used defaults
     Refer: Crawl Login Password Protected
  6.  Webmaster Filters
      Used defaults
    Refer: WebSite Filters
  7.  Analysis Filters
      Used defaults
    Refer: Analysis -or- Crawler Filters and User Interface
  8.  Output Filters
      Had one Directory that I excluded. bbclone. It created lots and lots of output that was/is really un-necessary in this case.
    Refer: Output Filters and User Interface
  9.  Data Collection
     This will allow you to lesson the resource useage on the crawler computer... your ISP -or- yours.
    Used defaults
     Refer: Controling Data Collection

View Website Structure and Data Before Making SiteMaps

 Ver 3.2.8  Ok we have a scan with the above settings. Most, if not all of the following items were fixed in version 3.2.7.
Refer: Analyze Links

After the Scan and before Creating the SiteMap, it is often a good idea to optimize your website by fixing ANY issues found during the Website Scan. In fact it is highly recommended... by me. This will not only produce an accurate map for your visitors to follow, but also one that you can confidently submit to search engines.
Refer: Website Structure and Data
(Note: In my case it helped me to organize my site better and allow for a more structued HTML Site map. Depending on when you read this, you will see a mess -or- a well structured map. As mentioned before, this is being written as I am learning to use this product... and the other one, SlickMap. 5 Aug 11)

  1.  Core data
      Refer:???
  2.  Extended data
     As mentioned in a number of places on this page, this one will help you find the 'errors' in your site.
    Refer:Analyze Links
  3.  View file
     This will show the Page you have highlighted in the left-hand column of the 'Analyze website' section. You will even see some 'WebSite Actions' IF you have any going.
    Refer:???
  4.  View source
     Selecting this Tab will get you a listing of the source code for the Highlighted WebPage.
    Refer:???
  5.  W3C validate HTML
     Now this can, and will, be of value to some, or many. The selection will send your WebPage out to the W3C 'Markup Validation Service' and tell you IF you have any errors... in other words, IF any of your HTML is invalid with the current rules.
    Refer:Validate and Tools -- plus -- What is W3C Validation
  6.  W3C validate CSS
     Similar to the previous selection, this one will send your code to the W3C 'CSS Validation Service' and tell you IF you have any errors in your CSS code... IF you are using any.
    Refer:Validate and Tools
  7.  Tidy Validate
     Now this selection is interesting. It will try to help you 'Tidy Up' your WebPages.
    Refer:???

Alllrighty now. In this first scan we found some problems. First of all the Analyze Website section has a problem with dates. It is stuck on 12/30/1899! ( Well, as it turns out, that is NOT an error. It appears there are many different ways to obtain the Last Modified date. If this program can not obrain one, then you get that ancient date.) But then it helped as soon as I remembered were to look. It was reported that I had a -site- page that was NOT FOUND. Well it shouldn't be. I don't have a page with that name!! Besides I did all this before!! (Ooops... I made some changes too.) Now we select the ' Extended Data' tab and then the 'Linked by' tab at the bottom. This reported http://www.trcompu.com/MySnippets.html as the culprit. Those shouldn't even be up on my site. They are just 'Editing Shortcuts' that I use when building my WebPages. We'll remove it and try again.
Also see: Find Broken Links. and HTML Response Codes.
I point out the above references cause I wish that I had found and read them before I complained to the author. -But- you have been informed.

Yep. Removing 'MySnippets.html' fixed that problem. Course it is later in the day and the Net is busier. Took 2 minutes and 6 seconds this time. So, remember that your scan speed will depend on the time of day. I also realized that they were examples that I was pointing to from another Page, and have since made changes. Caught again!

 Date Problem  We still have a date problem -even- though he had an explanation for it. Obtaining the last modified date should NOT be a problem. I do it on my Web Pages at the bottom. My ISP is providing that info. -But- we will let that one go, cause I don't need it and I am not going to use it in my SiteMap.
Refer: Last Modified and Timezones in Sitemap Generator Tool

Next we have an entry of C:\!! Hmmmm... now where in the heck did that come from?? Once again we go to the 'Extended Data' tab. This time none of them had any information until the 'Directory Summary' tab. It contained the following:

The 'rcVirtualItem' is a clue, or at least to me.( even though in the Docs he calls it just VirtualItem... unless he has changed it by the time you read this.) I am using both my Site Creator and this Sitemap Generator in Windows inside of VMware. -But- the code is up on my WebSite on another system..??

Ok now. Once again A1 Sitemap Generator has caught me. The C:\ had nothing to do with the way I was using the program. I was working on a program for a client who specializes in removing bugs... real bugs, creepy, crawly things. This has to be co-ordinated heavily with the State Government people. CompuTAR, a program from the State, was used to do it. It was interactive with the PC and needed to access the hard disc on this persons PC. The C:\ that was complained about was/is classified as a Folder -and- CompuTAR was underneath it. I am finished with that project and needless to say we will remove it. Well, this gets even more involved. Got a whole directory that shouldn't be there anymore. Once again Sitemap Generator has helped me clean up. Like I said before, it is one of the bennies of this program. Besides that you get a SiteMap!!

Ok. Another scan and we'll see what else I got ... that I shouldn't. Hmmm... It is Saturday around 11:40am and the scan time increased to 2 minutes 35 seconds. (have to try another one of my 2:00am to 3:00am stints and check the time) Allllrighty. The first item showing this time is the same one I had troubles with in previous excursions. 'Glossary.html' Well let's check it. Again 'Extended Data' tab is clicked and then we look at the bottom tabs. 'Linked by' shows:

  http://www.trcompu.com/Computers/LinNotes/NewSuSE-11-4.html

which I can see right off the bat is wrong!! Glossary.html is under the GenInfo directory. I didn't include the Full Path in the reference inside NewSuSE-11-4.html... shame on me.

Well, the next item is strange. It is 'MySnippets.html' again. But how?? I removed it! Well, as it turns out, there are still some places referencing it. Two of them are the SiteMaps previously created with 'MySnippets.html' in them. We will dump those old maps. The other reference is from a file covering an older version of openSuSE, version 11.1. Oooops, can not just dump the SiteMaps cause they are referenced from other files. Ok. We have to edit all 3 files. Done.

Next on the list is 'go.php?id=723' in 'Computers/LinNotes/LinCompile.html'. Upon examination we find that a 'cut and paste' has bit us again. Didn't get the full address of the external reference. Fixed.

We find an 'index.html' that is being referenced from down deep in an Oracle directory. Not a DB, but just information. Once again I don't know why I have this info up on my WebSite. Removed.

Had a copy of my bookmarks.html up on the WebSite. Caused problems with its references. Removed them. Well, then had problems from the places where they were referenced!! Fixed them.


Ok now, we have gotten rid of all the 's. Now all we have to do is get rid of all the 's. Don't know how, or understand why, I got all those -but- as can be seen by the previous exercises we do make mistakes and this Sitemap Generator can help immensely on the find and fix it part.

Well, I guess I was calling some of those items, that I thought were just for information. That's what some of these are. Others are just reference errors. Lack of a complete address or to much of one. ( This was some editing in my HTML files. In other words I had to fix some things.)

Ok. Finally, we have a good scan, except for the password protected areas. Now I contacted the Author about this and I have not read all the info that he pointed me to... yet. But these password protected areas can be handled. Even so, I'm not interested in them being in my map at this time anyway. They are both Private areas.

Create a Map

Allllrighty now. Here we are at the point to accomplish what all this was/is about in the first place. Creating a SiteMap.

As you can see, read, from the above, you need to fix a lot of things BEFORE you can create a useful SiteMap. In other words, your Web Pages need to follow a set of rules. (Which keep changing... but then that is another story.)

Now, once we have this 'clean' scan, we can create a reasonable SiteMap of our Site. The scan is used to 'find' all of our WebPages.

We next choose, or click on, 'Create Sitemap'. Inside this presentation, you will find a number of options: (Tabs across the top.)

  1.  First Tab we have Site file 'Paths'
     This will list a number of files that are to contain your Map(s). You will see the Full Path, Example:
    C:\Documents and Settings\Chuck Taylor\My Documents\Microsys\Sitemap Generator 2\temp\
    Tacked onto this are the files: sitemap.xml, sitemap.rss, urllist.txt, sitemap.html
    and Web.sitemap.
  2.  Next is the 'URL Options'
      Universal Resource Locator
  3.  Third is the 'Document Options'
      You can configure how the sitemap generator software creates XML sitemaps.
    Refer: UTF-8 or ASCII Format
  4.  Next in line is the 'XML Sitemap Options'
      You can ensure A1 Sitemap Generator includes the XML necessary for validating sitemaps by enabling options.
    Refer: XML Sitemap Validator
  5.  Then we have 'XML Sitemap Extensions'
      Think this should have been called 'Google Sitemap Extensions'.
    Refer: Google News Sitemaps
  6.  Next is the 'HTML Template Options #1'
      Refer: Generating HTML Sitemaps
  7.  Followed by 'HTML Template Options #2'
     One of the important items here is the Column Count. Instead of a Single column I wanted a column of 4.
    Refer: Generating HTML Sitemaps
  8.  And finally, the 'HTML Template Code'.
      This is where you can make the changes that I talked about. Most of my changes were for my own personal readability -and- to include that code that will create a Graphic type SiteMap using something called "Slickmap".

Reference: HTML Response Codes

Top

Sitemap Generator 3.3.0

Well, I am still not happy with the Slickmap generated by this system. The top level directories are supposed to be the same level and color as the Index file which is referenced by your IP address. Sitemap Generator is putting in extra <li> and <ul> combos that throw the sequence off by one. It is OK for his original Textual Sitemaps -but- not for Slickmap ones. Soooo... we need to analyze this and see IF we can come up with a fix. Now what makes this really tuff is that we do not have the source code for Sitemap Generator. Maybe, maybe we can come up with some ideas and suggest them to the Author.

 Analyzation:  Discussion will be above and below the following two boxes. I would like to keep them close so the items of importance can be seen. Now, obviously I have NOT included the whole output of A1SG for a Sitemap. Only the important parts that are in "question". The Author has graciously included the Original Slickmap Info. It can be found in the area of Documents and Settings that your Sitemap is created.

The items of concern are marked in Red in the first box. They are the ones causing the "problem". They need to be removed so that the Directories and files that are the same level as the Home page can get the correct color. Again, the question is how to do it without the source code. So far, it has been to Manually Edit the Sitemap file AFTER A1SG has created the map. Since the Author has included the CSS code at the top of the HTML Sitemap it makes it a little difficult to make changes. Therefore, we will remove the CSS code from the top and include our own file.

This is important. It would help greatly IF you have an Editor that will match the open and close tags. I use Homesite+ -but- it is no longer available. In searching the Web there are a number of Editors both -free- and for cost that claim to do tag matching. Just search for:
       HTML editor match tags
in Google and you will be surprised at what you will find. This is in Red and larger cause you must pay attention to the editing and make sure you get the correct pairs of tags. They are in pairs and there is more than onw set unless you have an extremely small site.
However.... see below... there is another way.

<div>
<ul id="primaryNav">
  <li id="home"><b><a href="www.trcompu.com/">TRComputing - PC tutoring or repair in your home.</a></b>
	<p>
  </li>
  <li>---
    <ul>---
         <li><b><a href="www.trcompu.com/ActionPages/">Index of /ActionPages</a></b>
            <ul>
                <li><a href="www.trcompu.com/ActionPages/ActionPage1.html">Action Pages 1</a></li>
                <li><a href="www.trcompu.com/ActionPages/ActionPage2.html">Action Pages 2</a></li>
            </ul>
         </li>

         <li><a href="www.trcompu.com/Computers/Hardware/MemoryTypes.html">Memory Info</a></li>

         <li><b><a href="www.trcompu.com/BuildingASite/">Index of /BuildingASite</a></b>
            <ul>
                <li><a href="www.trcompu.com/BuildingASite/Building1.html">TRComputing - Building a WebSite 1</a></li>
            </ul>
        </li>
    </ul>---
  </li>---
</ul>
</div>

<div>
<ul id="primaryNav">
    <li id="home"><b><a href="http://www.trcompu.com/">TRComputing - PC tutoring or repair in your home.</a></b>
        <p></p>
    </li>
    <li><b><a href="http://www.trcompu.com/ActionPages/">Index of /ActionPages</a></b>
        <ul>
            <li><a href="http://www.trcompu.com/ActionPages/ActionPage1.html">Action Pages 1</a></li>
            <li><a href="http://www.trcompu.com/ActionPages/ActionPage2.html">Action Pages 2</a></li>
        </ul>
    </li>
	
    <li><a href="http://www.trcompu.com/Textual-sitemap.html">Sitemap</a></li>
	
    <li><b><a href="http://www.trcompu.com/BuildingASite/">Index of /BuildingASite</a></b>
        <ul>
            <li><a href="http://www.trcompu.com/BuildingASite/Building1.html">TRComputing - Building a WebSite 1</a></li>
        </ul>
    </li>
</ul>
</div>

Now then, the other reason I wanted to include my own CSS file is cause I increased the number of levels from 3 to 5. See I want More below.

Ok. Back to the Level fix. Turns out we can do it trickily. The <li> and <ul> combos in question, as it turns out, are used as the columnizers. Soooo... we can leave that idea in and make a minor change in our CSS file. After all, HTML is for structing and CSS is for displaying. Home is coming out correctly and we will leave it alone. Level one is Blue and we will leave it alone even though it really does nothing. Well that's not true. It columizes the output. However, we will change the others and add one more level. Level One is actually blank in this case. Level Two will be changed to Blue and pretend that it is level One. Level Three will be changed and pretend it is Two and so on. In other words, all the Levels are being moved down one.



Allllrighty now. From this point on down is from my experiences with versions 2.x and the early 3.x. Why mention this here?? Cause I am experiencing some problems with the latest version. I copied over my Project files from before -and- they may be the problem. Before we start from scratch we will try to fix the current state with the old files. Which may be above and in a different color.


Praises and Minor Complaints

    Now you know that neither I, nor you, can use anything without some minor, or major, complaints. Well, I've already mentioned my first one and I have a second one. So, we'll start a list here. In fact we'll start two. One for Praise and one for Complaints.

Praises
  1. Informs/Teaches you A LOT about your Website files. Will help show you what you need to clean up.
  2. Produces the HTML SiteMap that I want ... plus a number of others.
Complaints
  1. Lack of indepent editing and saving of the HTML Template(s).
  2. No explanation of the symbols used in the GUI. (leastwise, none that I have found... yet)

    The above lists were created using CSS div's with the left and right floating parameters. This shows my, and others, complaints about MSIE. I had to change the width parameter to a smaller value in order to get them to stay side-by-side in MSIE. I wanted them 49% each and had to settle with 48% each. This causes them to have a wider separation in the other browsers, such a Firefox. Now I must say, before anyone says I'm full of it, that some of the "Other" Browsers also break the rules in CSS. It's just that MSIE seems to want to do their own thing all the time. You'd think that they started this whole business in the first place.

Found the explanation of those little graphic boogers that I complained about above.

 ok : Server response 200 - OK.
 error : Server error response code, e.g. 404 - Not Found.
 unknown : Server HTTP response code never checked or unknown.

Top

SlickMap

    This is a Graphical SiteMap comprised of some 'slick' (pun intended) CSS coding. What my hopes and plans are... is that I will be able to combine the two, Sitemap Generator and Slick Map to get really nice HTML Text and HTML Graphic sitemaps.

 Browsers and CSS  Now the biggest problem is the organization, or lack of it, of my site. The second biggest problem is the way some of the browsers "misinterpret" CSS. The main one that comes to mind is MSIE. (IE ver 6 in particular!!) I have my biggest problems with it and that is also where the author of Slickmap had his most problems. -But- we shall try. PIE might be the proper answer. PIE Ref

As mentioned down below, I have increased the number of levels that are shown with SlickMap. It makes my SiteMap look a lot better. There is still some minor editing required unless, or until, the A1SG program is changed -OR- I figure out a way to do in CSS. Please see the info at the Bottom of this page.

Top

Combining the two

    A1 Sitemap Generator uses an HTML table to create the columns on the map. It appears that there will be two rows and then the columns are the data cells in the second row. The first row will span the cells and be the Main heading. The cells will also have a heading which will be the name of one of the top directories. Under it comes the files and possibly more sub-dirs. And this can, and does, go on and on down through all the code.

    My first SiteMap created with A1 Sitemap Generator, was composed of two colums. The example Slickmap has four main columns. Both claim to be able to do more columns and in looking over the code, yes they can. The trick here is ... where to break for the columns??? Doing it manually is one thing, but automagically... and for a rash range of sites... is another. Then there is the problem, discussed and demonstrated on this very page, of the numeric calculations. Not all (the Browsers) agree on it either. So, we will try to accomodate all, -but- mainly my favorite... Firefox.

    Let's start this by trying to figure out where to "break" the columns. Ok, in A1 Sitemap Generator we have UL's inside UL's where the first one creates the reference to the main area and the one, or ones, inside reference the files or a further down UL to another sub-dir.

Example:
The top Reference is to the index file. The start of your site... also known as 'home'

href=www.trcompu.com [TRComputing]    index.html -or- index.php
  • href=FirstDir 'FirstDirName'
    • href=ItemfileName 'Titleline from file'
  • href=SecondDir 'SecondDirName'
  • href=ThirdDir 'ThirdDirName'
    • href=FourthItemName 'Titleline from file'
    • href=FifthDir 'FifthDirName'
      • href=SixthItemName 'Titleline from file'
    • href=SeventhItemName 'Titleline from file'
  • href=EighthItemName 'Titleline from file'

    As stated above, the first item is your Main File, index.html -or- index.php, or whatever applies. It is the first file that is accessed when you, or someone, types your WebSite Address into the address bar of the Browser being used. From there, there are 'access points' to the areas of your WebSite. In A1 Sitemap Generator the default is to sort the items Alphabetically. There is an option to sort by importance. -But- for my site I didn't really see any difference... at least in the HTML map. Hmmmmm... guess what?? I just read in the Help Guide that the Alphabetic way is the only way for the HTML map. Ok. So, anyway, where do we get the count for the column break??

Top

Enough already --- Just do it!!

    Ok. We need to stop fooling around and do something. As an experiment, I first stuck

    <link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css">

in the <head> section of the HTML file created by A1 Sitemap Generator. Then I placed

     id="primaryNav" class="col4"

inside the first <ul> of the file. I then viewed it and saw that a lot more was needed. All I got were 3 columns of Blue, Green and Yellow Boxes in the first column behind the verbiage, and the other three columns were disheveled and started way down at the end of the first. Not good.

 Ah, But a Browser diff Right Off.   Without the images dir present, the boxes had no lines to connect them, -and- in Firefox the corners were rounded, but in MSIE the corners were square. Bring in the images dir and we get some nice lines in Firefox, but they are blobs in MSIE.

    Ok now, let's get serious. The original A1 Sitemap Generator was using a Table with rows and cells to get the columns. We are going to use CSS instead. Thought I knew something about this CSS stuff -but- this is a little over my head. We are going to change that!!
References:
   MeyerWeb
   CSS Explanation
   CSS Structs and Rules
   CSS Tutorial
   CSS Nav Menu
   Nifty Nav Tricks Using CSS 1    Nifty Nav Tricks Using CSS 4
   Classes Vs IDs
   Object detection
   Conditional IE
   CSS3 selectors Test
   Conditional CSS
   IE Conditional Comments
   More IE Conditional
   CSS Snippets
   ..
   ..


We need to know and remember:
  HTML describes the structure of the document and CSS controls the appearance of the Web page.


    Now then, we have a couple, or more, problems here. NOT ALL Browsers interpret the CSS rules the same -and- there are three versions of CSS: CSS-1, CSS-2 and the up and comming CSS-3. We have the problem of Internet Explorer's difficulty in rounding numbers, you may find the farthest right column drops down instead of appearing in line. If need be, you can resolve this issue by adjusting the CSS to use a slightly smaller percentage than what you really need,
i.e. (pun intended) 24.9% instead of 25%.

    Now then, in a Net search I found John Resig's Web Page with some very interesting information. In short, Both Opera and Safari round down, Internet Explorer 6 and 7 round up and Firefox is somewhere in between. -But- even though you are told differently, the "exact" behavior of the browsers can vary. I can not stress this enough. The reasons for these differences stem from the Browser Wars, sloppiness and just flat out making their/your own rules. In the beginning I tried to comply to all the proper rules -but- I do believe that I broke some, partially cause of not paying attention and partially cause of not knowing. And they have changed.
Refe: Browser Modes with Doctype

    Now then, via reading and researching I tried using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
and it did not "fix" the calculations problem. Due to new, old and current code, things are and will be ... different.

Problem 1  In the slickmap.css file, the 4 column style uses 25% of 100%. I.E. rounded this up and made the last column drop off. Had to change it to 23.9% in order to get it to fit. I am investigating how to conditionally detect, fix... this.

Problem 2  The lines are png (Portable Network Graphics) images with "transparent" backgrounds 'which' apparently does not work in I.E. So, we need to look into that also. May have to change them to gifs.
Allllrighty now!! Changing the 'line graphics' to gif's fixed I.E. ... fixed the lines.

Problem 3  When I changed the lines from png to gif it caused the colors in the boxes to go away!! Change back to png and the coloring comes back!! Sometimes I hate computers!!!!!!
Now then, the other answer to this problem is ... just forget about the lines. You will get your map in pretty little boxes instead of just plain text. Just a thought... something to play with on your own.

Problem 4  There is a difference between Firefox version 3.5 and 3.6!!! And that is on my home page ... not counting the SiteMap!

Top

Template Code

Allrighty now. We need to make some changes to the "default" HTML Template code. Now it is fine for just the textual mode -but- IF we want some kind of graphics mode, then we are gona have to make some changes.

 Note:  These changes are specific to A1 Sitemap Generator for use within slickmap. This will require the slickmap.css file. In addition, the images dir that goes with SlickMap will need to be present. IF you are using I.E. ver 6 you will have to either convert the images from png to gif, or download them in gif format from somewhere... possibly here if I can get all this straight and accomplished. It is necessary for the images dir to be in the same dir as the SiteMap -or- you have to edit the slickmap.css file and change the location path.

The code marked as Yellow with a line-through is the default code that will get deleted. The code maked in Red will get added -or- is retained. IF you are copying this, make sure you look close. A couple of the changes are very subtle and possibly easy to miss.

The "extra" long comment lines around the body tags are not really necessary for the proper operation. Just my own personal thing I do.

I got un-happy with the results of my Slickmapping. So, I searched the Web for some more information. I found this:
Taos Ski Valley - Chamber of Commerce - Site Map
IF you look at it you will see that in addition to Home the first level of dirs are also Blue. I'm not getting that.

<ul id="primaryNav">
    <li id='home'><a href='/'>Home</a></li>

    <li id="stay"><a href="/p/stay">STAY</a>
    <ul>
        <li><a href='/pages/stay/Taos-Ski-Valley'>Taos Ski Valley Lodging</a>
        <ul>
            <li><a href='/pages/Taos-Ski-Valley/Taos-Ski-Valley-Hotels'>Hotels</a></li>
            <li><a href='/pages/Taos-Ski-Valley/Condominiums'>Condominiums</a></li>
            <li><a href='/pages/Taos-Ski-Valley/Bed-Breakfast'>Bed & Breakfast</a></li>

            <li><a href='/pages/Taos-Ski-Valley/Vacation-Rental'>Vacation Rentals</a></li>
            <li><a href='/pages/Taos-Ski-Valley/Reservation-Companies-TSV'>Reservation Companies</a></li>
            <li><a href='/pages/Taos-Ski-Valley/Necessities-and-Luxuries'>Necessities and Luxuries</a></li>
        </ul>
        </li>
        <li><a href='/pages/stay/Arroyo-Seco'>Arroyo Seco (8 miles from the ski valley)</a>
        <ul>

            <li><a href='/pages/Arroyo-Seco/Bed-and-Breakfast'>Bed and Breakfast</a></li>
            <li><a href='/pages/Arroyo-Seco/Casitas-Home-Rentals-and-Condos'>Casitas, Home Rentals and Condos</a></li>
            <li><a href='/pages/Arroyo-Seco/Youth-Hostel'>Youth Hostel</a></li>
        </ul>
        </li>
Code: Header
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta name="robots" content="index,follow">
  <meta name="description" content="Sitemap">
  <meta name="keywords" content="Sitemap">
  <title>Sitemap</title>
  <link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css">
</head>
<!-- ===================================================================== -->
<body>
<!-- ===================================================================== -->
<div class="sitemap">
<ul id="primaryNav" class="col4">
<table width="100%" border="0" cellspacing="0" cellpadding="2" summary="sitemap">
<tr>
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Start
</tr>
</table>
</ul>
</div>
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation Start
<p>
<div>
<center>
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation End
</center>
</div>
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation items address start
[<a href="
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation items address end
">
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation items title start

*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation items title end
</a>]
*-*=*-*=*-**-*=*-*=*-*
Code: Footer Navigation items spacer
 
*-*=*-*=*-**-*=*-*=*-*
Code: Footer end
<!-- ===================================================================== -->
</body>
<!-- ===================================================================== -->
</html>
*-*=*-*=*-**-*=*-*=*-*
Code: Root headline start
  <li id="home">
  <td colspan="2" valign="top" align="left">[<b>
*-*=*-*=*-**-*=*-*=*-*
Code: Root headline end
</b>]
<p>
  </li>
  </td>
</tr>
<tr>
*-*=*-*=*-**-*=*-*=*-*
Code: Column start
  <td valign="top">
  <li>
*-*=*-*=*-**-*=*-*=*-*
Code: Column end
  </td>
  </li>
*-*=*-*=*-**-*=*-*=*-*
Code: Before headline / directory combination
    <li>
*-*=*-*=*-**-*=*-*=*-*
Code: After headline / directory combination
    </li>
*-*=*-*=*-**-*=*-*=*-*
Code: Start of headline before start of directory
<b>
*-*=*-*=*-**-*=*-*=*-*
Code: End of headline before start of directory
</b>
*-*=*-*=*-**-*=*-*=*-*
Code: Start of directory
    <ul>
*-*=*-*=*-**-*=*-*=*-*
Code: End of directory
    </ul>
*-*=*-*=*-**-*=*-*=*-*
Code: Start of headline link address start
<a href="
*-*=*-*=*-**-*=*-*=*-*
Code: Start of headline link address end
">
*-*=*-*=*-**-*=*-*=*-*
Code: End of headline link title start

*-*=*-*=*-**-*=*-*=*-*
Code: End of headline link title end
</a>
*-*=*-*=*-**-*=*-*=*-*
Code: Start of item link address start
    <li><a href="
*-*=*-*=*-**-*=*-*=*-*
Code: Start of item link address end
">
*-*=*-*=*-**-*=*-*=*-*
Code: End of item link title start

*-*=*-*=*-**-*=*-*=*-*
Code: End of item link title end
</a></li>
Top

More... I want more...

Isn't that the way we always are?? I have used these two together and co-ordinated with the Author of A1 Sitemap Generator to get SlickMap CSS included with his A1SG. He did a good job of including it. Instead of having a separate CSS file that you had to keep track of, he inserted into the head of the HTML SiteMap template. Good idea. The only catch is, now you still have to keep track of the images dir. At last talk I do believe he is going to change the name of the dir so that there won't be any conflicts IF and WHEN you have to move it.

Now then, what about this "I want more"?? Well, SlickMap only goes 3 levels down. On top of that I only get one Blue Box ( and I like Blue!!). I have a public_html directory with an index.php for the starting file. At that "same" level I have a number of other dirs -but- they are not counted as Blue but as Green. Now as noted above, these maps are created from a "ul" (Unordered List).

 We have it!!  Wanted, and got. I modified the slickmap.css file to include to more levels. It will now handle Five(5). Made the Fourth Level Pink and the Fifth Level a Light Blue. The 'Fix' to get things at the correct levels is to remove the initial <li> <ul> and their counter </ul></li> end tags -AND- all the others at that level. IF you examine the A1SG produced SiteMap carefully they are easy to find. This will have to be the way until I -or- we can come up with an automatic solution. I do not have access to the code so I can not change it. The 'initial' <li> can be removed from the template -BUT- because of the way the dir's are handled they become a problem.

 Hold On!!!  We have pulled our head out and came up with a fix. A1SG is using the First Level to create Columns. The 'extra' <li> <ul> are technically 'empty' -but- they create the columns. So the change will be this:

  • First level is the column creator.
  • Top level, which includes Home, is Blue -and- will remain that way.
  • For this app, A1SG, the Second level is changed to Blue -cause- in this case it is really the Top level.
  • This demands level Three to become Two and change to Green.
  • Which cascades down and level Four becomes Three and Yellow.
  • Now my added Five becomes Four which is Pink.
  • And the added Sixth level becomes Five which is Lite Blue.
The structure of A1SG was created without Slickmap in mind. Therefore we modify Slickmap to fit A1SG and not the other way around. Even though the A1SG Author has done a number of things to accomodate Slickmap.

  System Environment

    I think it only fair to inform all readers of the System Environment this Operating System is being placed on / worked with / worked on. Different strokes for different folks. You may not experience the same successes, or failures, as I do because of different hardware.

Hardware Description
Item Specifics - HP Pavilion Media Center TV m7480n Desktop PC
  Brand: Hewlett Packard Memory(RAM): 4 GB (Got a smokin' deal on 2GB)
  Model: Pavilion m7480n Hard Drive Capacity: (2) 300GB Drives
  Processor Type: Intel PentiumD 940 (P) Operating System(s): Windows XP Media Center / SuSE 11.3
  Processor Speed: 3.2 GHz Optical Drive: Lightscribe DVD + DVD ROM
  Video Card: GeForce 7300LE Sound/Audio: Realtek ALC 882 chipset
  Wireless Keyboard & Mouse with USB receiver/transmitter, Modem, Memory card reader, Network Integrated 10/100 Base-T, Wireless LAN 802.11 b/g, TV tuner card with FM tuner, Remote Control - USB infrared remote and receiver
  Even though it is not included in the name, the processor is Dual-Core. An "older" technology but still a Multi-Core. Does make it faster. (...yes I am proud of it.)
  Printer: HP cp1700 Router: NetGear RT311    WNDR3700
  Printer Server: NetGear PS110 Switch: NetGear FS108

Top



Copyright © 2010 All rights reserved.