Site Structure Planning and Mapping- The Procedure, Steps 7-9
Author's Site: YouNeedaWebstore.com
Steps 7 - 9
7. Click inside the (yellow) layer named "rootfiles." Make
sure your cursor is at the last line within the layer.
Next, highlight the list of files (not folders) that are at the root
level of your site, that TreePrint produced. Copy that list (Ctrl+C) including
the " | " characters and paste inside the rootfiles layer. Press
the [Enter] key to add an extra line break at the end. Here is what it
should look like at this point.
Next, press Ctrl+F to do a Find & Replace or Edit» Find and Replace. We are going to get rid
of those " | " characters. For "Find In" select Current
Document. "Search For" must be set to Source Code. In the box
to its right, enter the | character, which should be above the backslash
on your keyboard. In the "Replace With" box enter <br>.
Here is what it should look like:
Now click the "Replace All" button. This will open the Code
Inspector. Close it and the Find & Replace box as well. When you click
on the page you will see that all of the | characters have been replaced
with line breaks so that each filename appears on every other line.
8. Click the shut-eye next to the column1overlay layer name in the Layers
panel so it becomes an open-eye. You will now see the table overlaying
the file list. Leave it that way for now. We will assign labels to the
CSS files, etc. before proceeding further.
Setting Up The Assets
9. Within the cssunder layer you will see a 2-column table. Copy the
list of files in your site's css folder (including the folder name itself)
from the TreePrint output and paste it inside the righthand column of
that table. Here is what it should look like:
Next, press Ctrl+F to eliminate the | characters. This time, instead
of entering <br> in the Replace With box, make sure there is nothing
at all in that box.
Note: In this case we do NOT want a blank row
between filenames. The reason for this change is that each file will only
have one label and that will be to the left of the filename. These are
your site's "assets." By contrast, the html pages of your site
will have several labels, some css, some templates, etc. showing which
assets are referenced by or associated with each page. Therefore for the
pages, we place up to nine different labels in a blank row below the filename,
but for these asset files, we only need one label and that appears to
After you click the Replace All button, the layer and table should look
If you wish, you may replace the +--- in front of the folder name with
a backslash. Now, click the shut-eye next to the cssoverlay layer and
the overlay will become visible. Make sure that you leave cssoverlay highlighted
in the Layers Panel.