Tuesday, May 31, 2011

HTML Editor - PSPad

PSPad is an HTML coding editor found here.

By doing an Edit Page then HTML on Google Sites or Edit HTML on Blogger you can see the HTML code, if its lengthy, you may want to select it all (CTL-A), copy it all (CTL-C) and then paste (CTL-V) it into another HTML editor where you can use its power to update it.

PSPAD has a syntax highlighter that will show you the show the other part of paired tags (bright blue) or show you it is an unmaatched tag (in Red).

· Open new HTML document. This will also load the clip definition file for HTML, including syntax highlighting.  
· Press CTRL+SPACE, choose html (or write html and press SHIFT+SPACE) - you get HTML page base structure  
· Use other clips (CTRL+SPACE) or their assigned shortcuts (chapter about clips) to write what you need.  
· Create or open other pages  
· I recommend you use clips shortcuts like CTRL+Enter, CTRL+B, CTRL+I, .... See what these hotkeys do at: Settings / Clips Hotkeys, (This is empty if there are not shortcuts assigned in the .DEF file for this file type.) For example, when you are in an HTML document, CTRL+B creates a set of bold tags <b></b> with your cursor in the middle of them. If you select your text before hitting CTRL+B, the text will be surrounded by the bold tags.  
· Mark main HTML page (index.html) as "Main page" - Ctrl+M for better visibility.  
· Press F10 anytime to see result of your work in the default application, which in this case is the built-in browser.  
· Press SHIFT+CTRL+E to see Code Explorer for better code orientation  


How to effectively use program


· after selecting a block of lines, you can increase or decrease indentation - SHIFT+CTRL+U SHIFT+CTRL+I or Tab / Shift+Tab  
· use clips (CTRL+SPACE)  
· Use hotkeys. Intead Ctrl+Space, select "B" tag, you can select your text and press Ctrl+B (in HTML document).  
· you can use UNDO and REDO at any time  
· you can simply reopen file before you save it, if you are not happy with your changes Ctrl+R  
· use bookmarks for quick orientation in code CTRL+LEFT/Right, CTRL+DOWN/Up  
· use context menu - right mouse button  
· use help. Try pressing F1 in various contexts: in the Projects window, in a dialog box, when you mouse has highlighted a pull down menu item.  
· explore and try the various menu tools. Some functions can save you a lot of work  

Monday, May 30, 2011

Sites Navigation

There are five options for site navigation...
  1. Default - automatic sidebar
    as new pages are added, they appear alphabetically on the sidebar
  2. Manual sidebar - new pages won't appear until added
  3. Horizontal navigation (tabs) - no auto option, must add new pages
  4. No navigation - all linking must be done internally on page content
  5. Manual Sidebar and horizontal navigation - you wouldn't put the same info on both navigation areas, it would be a dual navigation process
Options 2,3,5 require ownership authority so they can select, "other options", "manage sites", "site layout".  At the bottom of the sidebar, click "edit sidebar" to add, delete, or move pages.  These options also allow you to add URLs that are not part of Google Sites.


To select option 2, you must click "change layout" and then deselect automatic updating.

To select option 3, you must click "change layout" and then select"horizontal navigation", you  can change the style of them by selecting "tabs" or 'Boxes"

The sidebar can have many entries as they will appear under each other.  The horizontal navigation can have levels that will show up by hovering over a tab.  If there are too many tabs or if their names are too long, it will cause a second row of tabs to appear.

Sites Page Content Layout

You can think of the layout in a hierarchy as follows:
  1. Site Layout - Highest level, applies to all pages
  2. Page Layout - Header, optional Horizontal Navigation (tabs), Sidebar, Content Box, optional footer.
  3. Content Layout - Where the major amount of your customizable content exists

Google sites typically has one large box for content, this is known as one column (simple).  The designation "simple" means one row, one column.

This is NOT controlled by the "other actions" top right button.  Site Layout affects all pages in the site.  This page layout is found by editing a page and then clicking "layout" in the action tabs above the toolbar.

There's also two column and three column.  And there's also "non-simple" versions that have a header and footer that are one long horizontal row (1 column) with one, two, and three columns. 

There's also sidebar layouts, these are narrow columns vs equal width columns.  There is a right, left, and both sidebar versions, all of them have a header and footer box.

See a description of this feature here.