How do buttons relate to pages?
Most or all of the buttons on the web pages you will make will represent links to other pages within the same website, often pages you will be building with SiteGrinder. SiteGrinder generally assumes you want to make a page for every button in your document that has a unique name.
If you have two layers in Photoshop, one named "page one-button" and one named "page two-button", SiteGrinder assumes you are making 2 pages. If both of the layers are named "page one-button" then SiteGrinder will assume you are making only one page and that both buttons will link to it.
SiteGrinder matches the names of your buttons with the names of your pages. So if you have a button layer named "gallery-button" and a page named "gallery-page" then SiteGrinder has all the information it needs to link the button to the page. If you add a button with a corresponding"-link" layer to some other site, like "www.google.com", SiteGrinder is smart enough to know this button doesn't represent a page you want to build.
Example: Making a basic multi page site with SiteGrinder from scratch.
From a Photoshop document with two "-button" layers and no "-link" layers, SiteGrinder will, by default, build two web pages corresponding to these buttons and set up the links on both pages so the buttons navigate correctly between them. This is very important to understand and is the primary concept demonstrated in the following example.
Begin with a blank Photoshop document.
That's it! Sitegrinder has now created two HTML web pages named after the buttons, each with the two buttons on it. It has also programmed the buttons to jump to their corresponding pages. Click here to see the pages SiteGrinder created and be sure to click on the buttons to navigate between them. Notice the page names in your browser's address bar as you do so. |
 |
This is a most dramatic example of how much information SiteGrinder can glean from your Photoshop document with just a few hints. From a two layer document we have two HTML pages with text buttons that respond to rollovers and link between the two pages. The pages are automatically coded so that their names ("Apples" & "Oranges") show up as the title of the internet browser window. Their file names ("apple.html" and "oranges.html") also reflect the button names. All with one click of the build button!
Using graphic layers for the "-buttons" instead of text will accomplished the same purpose. Try it yourself.