Design & Layout Nodes
|
A web can contain multiple design nodes, each representing a template for layout and styling. Design nodes can inherit styles from each other and contain design-related content and functional nodes. The central element controlling a page layout is the canvas node. The design defines a layout via multiple canvas nodes that can be edited using WebPal's canvas editor. In the generated HTML template, a canvas represents a layout table, which can be of fixed or flexible width. If a design contains more than one canvas node, multiple layout tables are stacked vertically. Creating a LayoutInsert a canvas in the design, and start creating your canvas by selecting the canvas node, which opens the canvas editor. Create a layout by sequentially inserting layoutboxes via the context menu of the canvas editor. Layoutboxes must not overlap, however they will snap together to create a seamless layout. To insert nodes into a layoutbox, select "insert new..." from the box context menu.
Defining StylesAll font, link, and box styles are defined centrally within the design template. By setting the attribute inherit-styles-from-design to any design other than "(default)", the styles defined in that design will be re-used in the current design. This allows for central definition of styles for the entire site. |
Screen Shots
The Canvas
Layoutbox
wpDesign
This is the container node for a design template and all of its elements. Most webs will contain at least 1 design, potentially many more depending on the complexity of the site.
Where to use this node
Attributes
| Name | Use | Value | Help |
|---|---|---|---|
| name | required | every design needs a unique name, which should not be changed once published. The first design is the default design | |
| useraccess | optional | provide which users will have access to read and/or write the design definitions. Add additional users here by typing their username followed by a permission keyword: r, rw, none. Example: "bob:rw ingrid:r badguy:none" Click on the access node for more details on permissions | |
| groupaccess | default | all:r | provide which groups will have access to read/write the design definitions. Example: "all:none designers:rw" would give users in the group 'designers' write permissions, while blocking all access to everybody else. The group all has special meaning: It refers to all users except those otherwise declared in groupaccess or useraccess |
| inherit-styles-from-design | optional | specify the name of a design to inherit all style definitions from. Font- or box-styles redefined in this design will overwrite inherited definitions. | |
| optimize-images | oneof | auto, speed, quality | When in auto (default), images are generated either as jpg or png, depending on their purpose. Select "speed" to generate all images as jpg, "quality" for png format. |
| use-absolute-paths | oneof | no, yes | set this option to "yes", and all paths to images, scripts, etc will be generated as full paths. This option is useful when creating a design for a newsletter template. |
Sub Nodes
| Name | Type | Help |
|---|---|---|
| canvas | wpCanvas | this element defines the layout of this design template. The design may contain multiple canvas elements, to allow vertically stacked layouts with different width. |
| fontstyles | wpFontStyles | contains styles for all inline elements, such as fonts |
| linkstyles | wpLinkStyles | contains style definitions for inline links |
| styles | wpStyles | contains styles for all inline elements, such as fonts |
Sample
wpCanvas
Clicking on this node opens a page layout editor, similar to the ones professional designers use to position images and text elements on a page.
The advantage of using layout templates lies in the fact that editing a template need only be done once and this change will apply to all pages using this template.
Simply click on this node to open the editor, and move existing boxes by using the mouse. To access / set the properties of a canvas (background image / colour, width, margin etc.) simply right-click > properties on a blank part of the canvas. (Ie. Not inside a layout box.)
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|---|---|
| image | wpImage | |
| layoutbox | wpLayoutBox |
wpLayoutBox
The layout box is the fundamental building block of a canvas, or design template. A canvas will always start with at least one (1) layout box. To add more boxes simply right-click > insert > layoutbox, and then drag it / stretch it to where and what size you would like it.
To access the properties of a layout box simply right-click > properties inside each layout box. With this dialog you can set the size, padding, background and positioning of the box.
When using layoutboxes your goal is to essentially create a tabular layout with no empty space. (Ie. Each edge of a layout box is adjacent to another layout box.)
Where to use this node
Sub Nodes
| Name | Type | Help |
|---|---|---|
| html | wpHtml | click on the node type of this element to read more |
| html-code | wpRaw | click on the node type of this element to read more |
| include-remote-content | wpIncludeRemoteContent | click on the node type of this element to read more |
| navigation | wpNavigation | click on the node type of this element to read more |
| location-path | wpLocationPath | click on the node type of this element to read more |
| fontstyles | wpFontStyles | click on the node type of this element to read more |
| linkstyles | wpLinkStyles | click on the node type of this element to read more |
| group | wpString | click on the node type of this element to read more |
| group-background | wpGroupBackground | click on the node type of this element to read more |
| image | wpImage | click on the node type of this element to read more |
| banner | wpBanner | click on the node type of this element to read more |
| flash | wpDesignFlash | click on the node type of this element to read more |
| slide-show | wpSlideShow | click on the node type of this element to read more |
| language-selector | wpLanguageSelector | click on the node type of this element to read more |
| timestamp | wpTimeStamp | click on the node type of this element to read more |
| time-and-date | wpTimeAndDate | click on the node type of this element to read more |
| social-bookmarking | wpSocialBookmarking | Adds html code to display available social bookmarking links. |
| tabbed-pane | wpTabbedPane | Create tabbed area for displaying content |
| rssfeed | wpRSSFeed | Aggregates an RSS feed and displays a fixed number of the most recent items sorted by date |
| slideshow | wpSlideshowV5 | Allows a slideshow node to appear. |
| table | wpTable | Creates a table |
| data-table | wpDataTable | Creates a table |
| survey | wpSurvey | click on the node type of this element to read more |
| dynamic-content | wpDynamicContent | Create a area that display content in many different ways. |
