Creating a page Layout

Previous / Next

Layout Tools in Maqetta

There are several widgets and elements you can use to setup a page layout in the Maqetta canvas:

BorderContainer widget

This widget gives you a page layout with header, footer, 2 sidebars and a content area. All panes have sliders, allowing you to resize the pane. BorderContainer is made up of 5 ContentPanes inside the BorderContainer. You can delete any of the inner panes except the center pane. BorderContainer is by far the easiest and quickest way to produce a layout in Maqetta.

ContentPane widget

ContentPane is the simplest container widget and provides you with a rectangular area that can be sized and styled. It's similar to an HTML DIV but is a dojo widget instead of an HTML element, and it comes with a 5px padding built in.

HTML DIVs

DIVs are HTML elements so they do not require any dojo code in the source, DIVs give you the greatest flexibility, but they do require a good knowledge of CSS to use for layouts. DIVs are the most common method used today for creating layouts.

HTML tables

Tables are HTML elements so they do not require any dojo code in the source. With HTML tables you can create a layout using rows and columns. The layout structure is created with HTML table row and table column tags. Drawbacks to tables are that they require more HTML markup than DIVs, and do not have the flexibility of DIVs. Tables can only be defined in a row/column, grid-like fashion, whereas DIVs can be positioned in any way that you desire.

CSS Primer

DIVs and container widgets are all types of boxes, so if you aren't familiar with CSS Box Model styling, take a quick look at the links below. In addition, here are some basic rules:

• Setting a width on a box will cause it to be a fixed width. Same goes for height.
• Setting the width to 100% will cause the div to expand to the width of its parent container. Same goes for height.
• Having no width on a DIV will cause the div to expand to the width of its parent container.
• Having no height on a DIV gives you a flexible height. The height will expand to fit it's content. An empty DIV has no height.
• DIVs by default have no height or width, making them flat and horizontally spanned across the width of their container.
• Container widgets are usually created with a starting fixed height and width, but you can adjust the properties and the same rules apply as with DIVs.

Note: The width property does not include padding, borders or margins, so do not not use padding, borders or margins on DIVs set to 100%.

In the containers below, the left-hand container has no width set on the inner divs, and the right-hand container has a 100% width set on the inner divs. Note that on the right-hand container, the inner divs are overflowing from the container.

CSS Box Model Explained

• w3schools: The CSS Box Model
• w3.org: Box model dimensions
• Box model diagram

Using BorderContainer

1. Create a new file
2. Drag the BorderContainer widget onto the canvas
3. Size the widget by dragging the lower-right corner of the widget.
4. Preview in the browser.
5. To delete any panes you don't want, click inside the pane and hit Delete, or right-click and select delete.
6. Drag widgets, images or HTML elements inside the panes.
7. Preview in the browser.
8. To center the widget in the browser window, follow the steps below to create a centered, fixed-width page.

Creating a centered, fixed-width page

1. Create a new file
2. Drag a DIV onto the canvas (this will create a backdrop so you can give it some color).
3. Drag the div down to cover the entire canvas.
4. Set the background color or background url as desired.
5. Set the width to 100%.
6. Drag another DIV or container widget onto the canvas (this will be the container for your page).
7. Set the width to your desired page width (abut 980px is common).
8. Set the background color as desired (something different from the backdrop)
9. Set "margin: auto;" and set the height to 100%. (Tip: Don't put borders on the top or bottom of this.)

On BorderContainer make the height 99% to allow for the borders, or you may want to give it a fixed height.
10. Optionally, you can set padding to the backdrop div to give some padding to the top and bottom of the backdrop.

Using one of the BasicLayouts templates provided in the Maqetta Explorer palette

1. Make a copy of the template (right-click on the template name and select copy).
2. Open the template copy.
3. Modify the layout as desired.
4. Add your content to the layout panes (see Adding Content for more information).

Creating a layout using DIVs

Follow the tutorial Creating a basic layout.