The program is divided into 4 main regions:
- Site Management Region: here lists all pages of the site, you can add, remove, copy, cut, paste, clone pages here, to switch between multiple pages, just click on the page you want to edit.
- Page Management Region: here lists all widgets of one page, you can do widget select, remove, copy, paste, etc here.
- Main Edit Region: this is the main page edit region, all you see here is what your page will look like.
- Properties Region: here is the properties of the selected widget. you can change it to apply CSS style to the widget.
The Page Shop is not designed for only as page designer, but a site builder. So site management is very important to know.
The basic function of site management is page management, you can add, remove, cut, copy, paste, clone pages from the "site view" or the "site" menu of the main menu.
The very important thing should know is that the site also has properties. You can show the site properties by clicking the menu "show site properties" from main menu "site", or by clicking the site item in the "site view", or by clicking the left first button of the toolbar of the "site view".
Just like "Site", each "Page" also has properties, and if you compare them, they are almost same. But the site properties will affect to all pages within the site, page properties only affect one page. If the property is set for both "page" and "site", the property of "page" will affect. In other words, the page properties have higher Priority than site properties.
What you can do in site/page properties ?
- Background: the most important properties is the background properties for site and page. There are two background properties, the "main" and the "side". The "main" region is where the web page main content layouts, the "side" is the background if the width of browser is wider than the width of main content region. You can see image below for details.
- Meta information: robots, keywords and description information for the pages.
- Stylesheet: external css files, in page css fragment, external fonts.
- Block: this is the basic widget and also is the most useful widget, it's just a rectangle region, you can drag and drop it to place it anywhere, you can inplace edit it by double-clicking it to trigger the edit mode. in edit mode you can do many things, including insert text, insert form elements, insert image, flash or iframe, etc.
- Page Width Block: this block has a fixed width as same as the page, it's very useful when you want to make something like the navigation bar of this site. It's perfect for doing as page background widget.
To insert a block, first click menu "Insert", "Insert Block", after that, the program will enter "Insert Mode", when you move mouse into "main region", you will notice the cursor has turned into a cross. Then just click the left mouse button, and hold it and drag it untill you get the rectangle region you want. After you released the mouse button, the block will be inserted at the same place you have dragged. Another way to insert block is just do a single click in the "main region", then a block will be inserted at the mouse click position with default width and height.
- Who have properties ?
Site has properties, Each page of site also has properties, of course, every widget has properties.
- How to view it ?
For Site, click on the site in "Site View", or click the "Show Site Property" button on the toolbar of "Site View", or use "Site" menu "Show Site Property".
For Page, click on the page in "Page View", or click the "Show Page Property" button on the toolbar of "Page View", or use the "Page" menu "Show Page Property". Notice: click page in "Site View" will only active the page, not show the property of that page.
For Widget, click on the widget in "Page View", or click the widget in "The Main Region", there are many ways to show widget properties, try find out by yourself.
- What is advanced properties ?
Because PageShop supports 77 different properties for Block widget, for advanced widget, the properties number is larger. To simplify it, we defined some less usage properties to be advanced properties. To show or hide advanced properties, please use the menu "View" "Show Advanced Properties".
- How to know what every property works for ?
Nearly every property has a related CSS style. For example, "padding-left" is related to CSS style "padding-left", if you don't know what it works for, just search for "css" + properties name in any search engine. Also on the bottom of the properties region, it will show hints for each property.
- What is Widget ?
- Show Widget List
By clicking menu "Insert", "Show Widget List", you can see a dialog with all supported widgets in it. It's the easiest way to know how widgets can do in PageShop. Inserting widget is just the same as inserting Block.
It's very easy to add external fonts to web site.
- How to add ?
By click menu "Site", "Add External Font", on the "Edit Data" dialog, click "New" button to add a new item, then give the new added font a name, which will be used when you want to set any text to that font in inplace edit or properties. Then point the file to the font file you want to add.
- How to use it ?
After added an external font, you can use it in inplace edit "Font" list or in property "font family". The name you have given to the font will be shown here, use it in the way of using any pre-defined font.
In PageShop, you may often see this dialog, the Data Dialog.
Here list some of the typical usage:
- Widget Data
This is the mainly usage of Data Dialog, for example, you can edit the menu text of a navigation widget. If the navigation widget support menu, the data edit dialog will support tree data management, or it will just support list data management.
To export site, you will need to specify a directory for the exported web page files to save to, you can specify any directory, but make sure it's an empty one, cause export site action will remove all contents in that directory first.
You have three ways to trigger the site export action.
- From Menu "Site", "Export Site".
- From toolbar button "Export Site".
- From shortcut key F7.