Flexible/Complex Page Layouts
An optional caption may appear below any graphic. The font, color, etc., can be controled by the user. This sample graphic is centered to give it a little extra space from the text at left.
NABC uses Sitemaker for its own calendar, directory, etc., and also makes sites available to members.
This text is in its own component. Using the advanced component controls, the style of the component is set to a selected width, font, size and color, and the component's content is centered.
The Seattle Press uses Sitemaker's web publishing tools for many features. (Opens in new window.)
Do your own thing!
When you want to free yourself of the templates you can gradually include more and more individually defined content, while taking advantage of Sitemaker's robust navigation. This lets your pages appear as you wish without risk of "404 page not found" mistakes. The following resources can help you be prepared to set yourself free step by step.
Design Tutorials Podcasts / Webcasts Search Engines Software Templates Sharing / Mashups Online Magazines
This complex page has a unique layout that contains several components. It is an example of the many ways you can use Sitemaker to build your own page style. All the body content has been prepared using Sitemaker's internal controls. No user-specified HTML tags are present on the page.
The first component is a start-container that in combination with and end-container component at the bottom defines the right half of the page. Its width is set to fill 50 percent of the main body space, and it is right-justified. All the components within the container will lie within the right half of the main body. (Actually we've set the width to 45% to create a "galley" down the center.)
The left side lies within another container pair that creates a constrained text space down the left hand side.
In the positional logic of HTML, the right side occurs first. Because it is right justified the left side "flows" around it, and because each has an assigned width the result is a two-column layout.
Now we can put content into the columns. Each contains a mixture of text, links and graphics, which are the most common elements of any page.
The first component is a start-container that in combination with and end-container component at the bottom defines the right half of the page. Its width is set to fill 50 percent of the main body space, and it is right-justified. All the components within the container will lie within the right half of the main body. (Actually we've set the width to 45% to create a "galley" down the center.)
The left side lies within another container pair that creates a constrained text space down the left hand side.
In the positional logic of HTML, the right side occurs first. Because it is right justified the left side "flows" around it, and because each has an assigned width the result is a two-column layout.
Now we can put content into the columns. Each contains a mixture of text, links and graphics, which are the most common elements of any page.
This graphic is preceded and followed by text components.
The third component is the preceding graphic. Because it is inside the container, its position conforms to the container's settings. The graphic can be re-justified without affecting the justification of the container. It is important to consider the width of contained graphics when setting the width of the container.
The fourth component is more (this) text. It continues to the end of the container.
The fifth component is an end-container that ends the grouping of components and also ends the forced justification of components (in this case at the left). The next component (a graphic) will wrap to the right.
The sixth component is another graphic. Because the container is left-justified, it wraps to the right of the entire container. Thus the sixth (graphic) component appears at the top right of the page body.
The seventh component is a link. It closely follows the graphic.
The eighth component is more text whose font style has been specified in the advanced component settings. This is easy to do with information provided in Sitemaker's help files. (Depending on the operating system and browser you are using, you may not see the exact font we specified.)
The ninth and final component is another link. In the component settings we've forced a break before the content, so it drops below all other components and appears to follow the text that is inside the previous container along the left side of the page. Some extra blank lines are included in the end of the last text block in the container to force the link away from the text.
The fourth component is more (this) text. It continues to the end of the container.
The fifth component is an end-container that ends the grouping of components and also ends the forced justification of components (in this case at the left). The next component (a graphic) will wrap to the right.
The sixth component is another graphic. Because the container is left-justified, it wraps to the right of the entire container. Thus the sixth (graphic) component appears at the top right of the page body.
The seventh component is a link. It closely follows the graphic.
The eighth component is more text whose font style has been specified in the advanced component settings. This is easy to do with information provided in Sitemaker's help files. (Depending on the operating system and browser you are using, you may not see the exact font we specified.)
The ninth and final component is another link. In the component settings we've forced a break before the content, so it drops below all other components and appears to follow the text that is inside the previous container along the left side of the page. Some extra blank lines are included in the end of the last text block in the container to force the link away from the text.
Flash
Flash is a great way to display animations and movies. Both Flash and QuickTime movies can be embedded in Sitemaker pages. Many of our guest sites employ Flash movies to display content and to navigate within that content. To add Flash content, users merely create an HTML-enabled text component and paste the Flash procedure into it. The component then behaves as any other Flash content.
We do not support Flash-based navigation at this time within Sitemaker. We recommend the use of CSS where "animated" navigation is desired.
PS: Note that we've modified the color, border and position of this text using the built-in style control for the component.
We do not support Flash-based navigation at this time within Sitemaker. We recommend the use of CSS where "animated" navigation is desired.
PS: Note that we've modified the color, border and position of this text using the built-in style control for the component.
The Bottom Line
Our Client Gallery has a sample of user-defined layouts. By using the justification and detailed positioning of components, you can make highly distinctive pages. Sitemaker is very cool.