Northlite Designs

| Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Classes I Teach
Good Thunder
Terry Pratchett
About Me
Cards & Prints
SabreQuill Editing
Eclectic Academy
LVS Online
Contact Me

 Member of National Association of Photoshop Professionals


Making a Site Diagram


Object panelWe could double click on the index.htm file in the site window to open it in GoLive and start adding content, but it is always best to have a plan when you are making any web site, even a small one. We're making this site to display homework from our online class, and there are six weekly lessons, so the plan for this site is to have an index page and six homework pages.

In the object panel, click the Diagram icon to display the diagram options in the bottom half of the panel. These are all icons to represent things that can be added to your page.

In the menu, go to Diagram > New Diagram. (Note: If this is grayed out and you cannot access it, make sure the site window is the active window. To make it active, click once on it's title bar. If you opened the HTML file in the site window and it's active, then New Diagram will be grayed out. Close the html file and go to Diagram > New Diagram.)

You now have a new site diagram. It's a window with what looks like graph paper, and it has several tabs on the top. The active tab is Design.


In the object panel choose the page icon, and click on it, and drag a page to the diagram window and drop it. This creates a page in your diagram. Click once on the page name and change it from untitled to index. Press Enter to set the name change.


page icon in the object panel: drag and drop to diagram window Index page added to the diagram


Add six more pages the same way and name them lesson1.html. lesson2.html, lesson3.html, lesson4.html, lesson5.html and lesson6.html.


Add files


Go on to part 6 to link the pages in the diagram.

Index 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Links
GoLive for Dreamweaver Users: Making the Transition

Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Northlite Designs