Web Man Tutorial

Open another browser window or tab to Web Man home. It will be easier to follow this tutorial if you can quickly switch back and forth from this page to Web Man in the other window or tab. Start it with Web Man's home page, the main editor.

Main editor page, basic navigating.

The home page for Web Man is also the page where basic editing on one web is done. It has two views: the folder view on the left, and the navigation view on the right.

The folder view shows the folders and files in their physical location on the server. This is on the host where you installed Web Man, in the file system from which your web server hands out pages.

The navigation view shows how your web site is organized hierarchically. It shows which pages are children of a given page, which are siblings, etc. This map is used to generate the navigation bars, like those you see in Web Man itself. In fact, Web Man can generate its own navigation bars.

Let's explore these navigation bars and some of the other menus in Web Man. Click over now to your other window, the one holding Web Man's home page, the Main Editor.

• Go to "All Webs" from the menu under the banner.
• Back to home "Edit Web" using the bread crumbs in the banner.
• Go to the Help page using the "Views" menu at left.
• Go to the Help section for Format using the site map.
• Go back to Edit Web, the main editor page using the "Views" menu.
• Go to its own "Page Help" section at left. Go to the top. Go to the "Help" section for the folder and navigating views. Those links are at the top of each view, one in the thin yellow bar, and one in the thin pink bar.

top

Basic Editing

Now we'll use the main editor to manage a web. Use the drop-down selector at top to open wmsite, if it's not open already.

• In the folder view, look for wnsite's "js" folder. Click the icon to open it, and see the JavaScript inside. There's not much. Click again to close it. Note how the icon changes.
• We can do the same in the navigation view, over on the right. Look for the "kid2" group. Click the icon. You will see two templates inside.
• Now click the name of one. You will see the folder view file that it is linked to by the site map. A folder will open if necessary to see it.
• Now we'll actually edit something. Drag the "kid3" group up so that the "kid1" icon is underlined. Drop it there. That changed the order of the children of wmsite's home page.
  Dropping on an icon makes the dragged item a sibling of the item with that icon. Dropping on the input to the right makes the dragged item a child of the item with that input.
• Save the changed map (blue control panel, at left). Rebuild the navigation. Test the links.
• Oops! 5 broken links! Web Man can fix those, as you will learn in an advanced tutorial.
• In the folder view, make a new page. Do that by selecting an existing page, "kid3.htm" for example. When it's selected, press <Shift><Insert>: that will make "copyof_kid3.htm".
• Now we'll rename it. Click-delay-click on it (0.4 - 1.0 seconds delay). You will see the name selected in the folder view, and you can edit it. Name it "kid4.htm".
• Now drag it from the folder view to the navigation view, under the "Kid 2" group. Drag it so the icon is underlined, not the name itself.
• Save map, rebuild, test as before. Open a new browser window or tab, and point it to wmsite. That will be in your work space. Note now how there are 4 children of wmsite. But a couple of problems have cropped up. First, another broken link: kid4.htm inherited from kid2.htm. Second, the copied kid4.htm still has the title "Kid 3".
• Let's fix the second problem. Click-delay-click on the last item in the navigation view, the one for the page you just copied and dragged over. Edit the name to "Kid 4". Save, rebuild, test: no additional broken links. Refresh the browser view of wmsite: you'll see the navigation bars change.
• Move the new page kid4.htm into another folder, the one named "kinder". Do that by dragging it under the folder, so the folder name (not the icon) is underlined. Drop it there. We want kid4.htm to be a child of the "kinder" folder, that is, inside the folder and not alongside it.
  Test: no new broken links. Web Man adjusted all the links in kid4.htm to be valid in its new place on the server file system, then looked for all the other pages that linked to it, then adjusted those links.

top

Basic Operations with Whole Webs

Now go to the "All Webs" page. You've been here before. You will see a list of webs in your workspace, only three if this is a new installation: fpsite, wmsite, and wmsite.bak. Note the icons in front of each: fpsite was built and managed by Microsoft Front Page (TM). Web Man knows this, and put a icon in front of it.

Web Man has been managing wmsite; that's why it has the blue and red icon in front of it.

• Copy a web. This is done as in the folder view on the main editor page. Select wmsite, then <Shift><Insert> it. You'll see copyof_wmsite. Rename it to "wmsite2" by the click-delay-click edit method.
• Point your browser to wmsite2. Yes, it's all there. But the icon shows it's a generic web: it hasn't been configured for Web Man.
• We'll do that now. Double-click it to edit it. Recall that click-delay-click edits the name of an item, while double-click edits the item itself.
  Web Man will tell you what's probably wrong, but that's easy to fix. You'll see a folder view of wmsite2, but no navigation view. Web Man was worried about that.
• Look for wmsite.conf in the folder view. Wrong name! Rename it to wmsite2.conf. Refresh. Now you get a navigation view.
• Web Man really should do that renaming itself. I need to make it smarter.
• Back to All Webs. Press the <Delete> key to delete wmsite2. Back to the main editor, and open wmsite.

top

Options: Basic Configuration of Your Web

Remember that wmsite2.conf file from the All Webs tutorial? That was the configuration file for the wmsite2 web. Now, with wmsite open, you can see its configuration file, wmsite.conf, in the folder view. We can edit that file manually, but Web Man can help. Click over to the "Options" page and we'll see how.

• If you get an error, be sure Web Man is not trying to open wmsite2. That's gone. If necessary, get back to the main editor page and open wmsite.
• The form shows all the user-editable options in the configuration file. Get default configuration: you will see the options change.
• Take a look at the Page Help on this page to see the meaning of these options.
• Interesting, but not very useful. The defaults are incorrect for wmsite. We want wmsite's configuration file back. So, enter wmsite.conf in the form field that says "Its configuration file". Press "Get Configuration": you will get wmsite's configuration back.
• Put wmsite.conf2 in that file field. "Save Configuration": that saves a new and separate configuration for wmsite, "wmsite.conf2". On the main editor page, verify that wmsite.conf2 exists.
• Back to Options page. Put wmsite.conf2 in the configuration file input, and reload the configuration from it. Edit it: Change theme to theme2, includes to theme2/includes, etc. Save.
• This area is buggy.
• Back to the main editor page. Double-click wmsite.conf2 to edit it manually. An editor page will pop up with the new configuration file in it; you can change it here, too. Try a change, Save, then go back to the Options page and reload it. Don't forget to name it in the "Its configuration file" field. Verify that your changes show up in the form.

top

Formatting Your Web

You can format your entire website with tools below the "Format" page. Go there and let's try a few.

• Still working with wmsite. Go to the "Apply Styles" page. Enter "theme2" in the "its styles folder" input, which will select those style sheets for all of wmsite (except its templates). Apply them. On a new installation, wmsite uses style sheets from theme1, but now wmsite will look quite different in your browser. Notice that "Template 1" (under "Kid 2" did not get styled. "Template 2" did not change either; it came that way.
• This would be a good time to look at Web Man's two templates.
• Re-apply the styles of theme1. The templates of wmsite will not change.
• Go to the "Doc Type" page. Look at the source of a regular page in wmsite: note the <!DOCTYPE ... > there. On this "Doc Type" page, we can select another. Apply it, refresh that wmsite regular page in your browser, and check its source again. The DOCTYPE should be as you applied it.

This completes the basic tutorial.

top

Advanced Editing

You can select files from your local machine and upload them to the server, where Web Man can see them and put them into your webs. This makes sense if Web Man is installed on a remote server, and you're using a browser pointed to that server. If you're running Web Man on your own workstation, you can do this or just use your operating system to bring files into the area from which your web server serves pages.

• On the main editor page, open wmsite. Click on the white "Select" button.
• In the upload dialog, choose a few files from your local machine. Open.
• When the dialog closes, press the gray "Upload" button. You will see the uploaded files now in wmsite's folder view.

You can create, move, and rename whole folders in the folder view.

• Still on the main editor page with wmsite open, look for "wmsite" at the top of the folder view. Click on it to select it.
• Press the <Insert> key to create a new, empty folder under it. Plain <Insert> inserts a new item; <Shift><Insert> copies an item.
• Select the folder and delete it with the <Delete> key as before.
• Test the links.
• Select the "kinder" folder. Rename it to "kids". Web Man checks the links of every page that points to any file in that folder, and adjusts them to be valid with the new name.
• Test the links. You should see no change.
• Look for the "kid1" folder. Drag it under the "kids" folder, so the name is underlined (not the icon). It will seem to disappear, but you will see it if you open the "kids" folder.
Test the links. You should see no change.

top

More Tricks with Webs

The All Webs view allows you to make a new web, convert one from Front Page (TM) to Web Man, or open one in the main editor.

• Double-click a Web Man site to open it in the main editor. Look it over, then return to the All Webs view.
• Select a web by clicking on it. <Insert> to make a new web, child or subweb of the selected web.
• Select the workspace at the top. <Insert> to make a new web in the workspace, not a child of another web.
• Double-click fpsite. You will be taken to a page where you can convert it from Front Page (TM) to Web Man.
• This can get tricky. On the conversion page, you will see fpsite named in the "Convert Front Page web" input. The next "to this Web Man web" input is where you name the new Web Man web, product of the conversion. Let that be wmsite2. Recall that we deleted that in the basic tutorial.
• The chosen template "theme1/template1.htm" will do fine here. All the other configuration will also work for this first conversion.
• (Gulp) Go ahead and Convert. Then look at the detailed report in the gray area below the configuration form. It should brag about all the pages it converted.
• If it shows no errors, go ahead and Rebuild the navigation.
• Follow the link to the main editor page. Your newly converted wmsite2 should be open for further editing. You'll probably want to check the links.
• Point a browser window or tab to fpsite, and another to wmsite2. You'll see what Web Man kept from fpsite, and what it brought in from wmsite. The conversion has a different style, because the template used for it has a different style.
• Here's the tricky part. You can try the original Front Page styles. They are in the theme folder. The template contributed theme1. And theme_wm? Web Man made that but left it empty, for you to put new styles and shared borders in.
  Go the Format > Apply Styles. Let's try the original Front Page styles. Those are in the theme folder. Apply. Ugh! That didn't look good at all. Back to Format > Apply Styles, and re-apply those from theme1. The problem was that Web Man did not use the Front Page _borders, but kept them for you to ... uh, experiment with.
• That means making a template that uses these borders, a job we will try in the next tutorial. Web Man is not yet smart enough to get started on the job -- that would mean making and applying shared borders. Plus, the "Apply Template" page is still buggy. Look at a Web Man template, and look for things like <!--ng include startspan top.inc-->. That is how Web Man is supposed to apply shared borders.

top

Advanced Formatting

Applying a template is still buggy. Here's what Web Man should be able to do:

• In the main editor page, with wmsite2 still open, find a template for wmsite.
• Make a new one. Edit it. Get its stylesheets correct.
• Strip out all the generated navigation bar stuff, between the <!-- ng include... --> requests.
• Options: find where includes are supposed to go. Copy 'em from _borders if they're not in the correct folder already.
• Edit those shared borders. This is where you can put in navigation bar requests like <!--ng crumbs startspan-->Bread crumbs go here<!--ng crumbs endspan-->; Web Man will install those bread crumbs navigation links on every page when you apply the template.
• Back to Format > Apply template. That will format your whole site (except for its own templates) with your template, using your edited shared borders.

top

Reports, Link Repair

The main job we will do here is link repair.

• Open wmsite. Go to the Reports page. Look at the info about wmsite.
• Go to the Reports > Repair broken links page. Look for the list of bad links on the right. This is the Bad Links view. Look for wmsite's files and folders. This is the same as the folder view on the main editor page.
• Repair a bad link by dragging it from the bad links view to a the proper file in the folder view. Here, with wmsite, open theme1 in the folder view, then grab ../../theme1/nomucho.css out from under kids/kid2/kid2.htm and drag it over to one of the css style sheets in the open theme 1 folder.
• Test the links. You will see one less broken one.

top

The Help Page

Go to the Help page. You will see Web Man's own site map there, which is at the same time its own help system. Go to a few pages, and look at their individual help sections. Look at their bugs and feature request sections.

top

Web Man Can Manage Itself

If Web Man is inside your workspace, it can edit its own site map, install its own navigation bars, format itself with its own templates, just like a regular website. The advantage of this is that you can customize Web Man a great deal. The disadvantage is that Web Man can damage itself if you're not careful.

Skip this if Web Man was installed outside its WorkSpace.

If it's inside there, and you want to try this, the first thing to do is...

• Go to the the All Webs page and back up Web Man. It's named webmann.
• Go to the Main editor page again. Open webmann itself, if you put it under WorkSpace during installation. Explore its site map.
• Change the order of Help children, rebuild, test, navigate.
• There are other things you can do here, like applying a different set of style sheets to Web Man.

You're a qualified Web Man webmaster now. Experiment. Don't forget to make backups.

top