Hints for Creating Web Designs

A Web design is a collection of page layouts and named styles that share a consistent look. Web designs are created by defining page layouts and named styles, then saving these changes as a file with the .tld file extension. Before you begin, consider your Web design options.

Do you want to provide named styles for your users?

CuteSITE Builder lets authors create named styles, bundles of attributes that can be applied to text paragraphs. These can be useful, to speed editing and provide a consistent look across pages.

However, it is not necessary to use named styles to create good-looking text within CuteSITE Builder. Each CuteSITE Builder page layout has its own default styles, one for each page area. If named styles are not applied, all text users enter is automatically expressed in these default styles.

Default styles are convenient when users plan to frequently change among Web designs and page layouts: text is automatically switched from one default style to another, and it always looks good with the new layout or design. In contrast, if you apply a named style with a light text color so that it shows up well against a dark border, and then apply a new page layout that changes that border to a light color, the text would remain in a light color, which would be hard to read. However, users who are experienced in working with styles prefer the power of named styles and know to adjust them in such situations.

CuteSITE Builder designs support the use of both approaches: they contain a number of standardized named styles, but they also include carefully-chosen default text styles encoded in each page area. Your designs can likewise support both approaches.

Do you want your Web designs to be interchangeable with the CuteSITE Builder designs?

CuteSITE Builder provides Web designs that are constructed to be interchangeable – that is, you create a file using one design and then you can switch to another design without adjusting your content. You can choose to create your Web design to work seamlessly with CuteSITE Builder designs, or not.

• If you want to be able to switch between your new Web design and any of the Web designs that CuteSITE Builder provides, modify an existing Web design by opening an existing design and saving it with a new Web design file name. You can then apply any changes of your own as long as you do not change key page layout mappings (primary sidebar content in area 1, title in area 2, secondary sidebar content in area 3 are standard no matter which borders contain these areas).

• If you do not plan to switch between your new Web design and the CuteSITE Builder designs, create the Web design from scratch. Open a new file, delete all the page layouts and styles, and create your own.

Once you have chosen your strategy with respect to the issues of styles and interchangeability, there are a number of issues to keep in mind while creating designs.

Considerations While Creating Designs

When you modify or create a Web design, you design and create a group of page layouts and named styles and save them together in a single file. Planning is essential to ensure that the page layouts in the Web design work well together, especially if you’re planning to distribute the design to others.

• Design your page layouts to be consistent yet flexible – Web designs create a look for a file by using similar design elements consistently across different page layouts. But, when you start to design your page layouts, you may find that you need to be flexible to accommodate different content. For example, a page layout for large graphics and a page layout for pages that contain large amounts of text may have similar design elements but not look that much alike. The Page Layout Editor lets you quickly move among all the layouts in the current file to establish similarities and differences.

• Determine what users can and can’t change on a page – You can add design elements that users can’t change or delete, called static text, while you control where they can enter their own content, called user text. Navigation links are often included as static text, but it can be any images or text information that you don’t want users to change. User text is always below the static text, and is where users can add their own content to a file. You can add prompts to help users see where they can add text in an area. When you mark your layouts Finished, all of their content is saved as static text. Be sure to delete any content that you don’t want to appear as part of the page layout (each time the page layout is applied). If you do save content in a page layout that users later want to change, they can edit static text by unlocking it.

• Work with sample content – It's important to work with sample content to help you test a page layout’s visual appeal. At a minimum, apply each new layout to a page and then add several paragraphs of text with headings and make a sample list. If you use images, note that images in text are aligned with the baseline of the text. To work with images in the background, use Border Properties. You can align background images in the border, tile images horizontally or vertically, and scroll the image with text.

• Use the power of fields in page layouts – Fields let you update information in one place and have the change ripples throughout the file. In the design of your page layouts, use fields for information that is used in several places but might change as you work in a file. For example, you might enter a title field in a page’s top border, so that if you change the page’s title through the Page Properties dialog box, the changes will also appear in the border.

• Take advantage of the navigation that CuteSITE Builder provides by default – CuteSITE Builder lets you include navigation links in borders that can optionally appear only if the navigation links are needed.

• Ensure that default styles and named styles work with your design elements – For each part of the page area, you can set a default text style. You can also create named styles that work well with the layout's other design elements. If you are simply modifying named styles, be sure to save the changes using the same name. If you want your styles to work seamlessly with styles in CuteSITE Builder designs, don’t delete or add any named styles. If you are creating named styles from scratch, keep the following in mind:

• CuteSITE Builder applies named style attributes on the paragraph (not character) level

• Test your style on the correct page areas of the size and color where you expect them to be used

• Create names for your styles that will fit in the Style drop-down list on the Format toolbar

• Use similar names to group related style together, for example “Bullets - Regular” and “Bullets - Indented”.

• Understand CuteSITE Builder HTML output mechanisms – Most browsers automatically tile all background images provided for pages. CuteSITE Builder HTML output adds a trick whereby background images seem not to tile in high-resolution browsers: we automatically extend the bottom of the image. Some CuteSITE Builder designs contain background images that take this trick into account. The image extension does not affect file size (due to compression) but it may place a burden on page load times. When you create your own page layouts, we recommend:

• If your users will be creating mostly short pages, tile your background images both horizontally and vertically.

• If your users will be creating pages with large amounts of content, tile background images horizontally only.

In other words, tile both ways wherever possible; to avoid placing a burden on load times and users with high resolution monitors, choose non-tiling background images only if the lack of tiling is central to your design.

For more information on CuteSITE Builder HTML output, see Getting Great Results with CuteSITE Builder.

• Decide if you are really creating a template instead of a Web design If you want to include a lot of content along with design elements, chances are you should create a template instead of adding content to a Web design. Templates provide already-created pages, sequences, map elements, and so on for file that have a consistent format, such as planning or analysis files. For more about templates, see Save a Web site file as a template.

For more information on the mechanics of creating Web designs, consult the help for modifying page layouts and named styles.

Once you have created a new Web design, there is one more optional step you can take to make sure your design shows up seamlessly within CuteSITE Builder.

Create a thumbnail image of a Web design to display in dialog boxes

When a user creates a new file or changes Web designs, CuteSITE Builder displays a sample image as a preview of the basic look of the Web design in the dialog box.

To create a thumbnail image of your Web design:

1. Create a new file and select your Web design.

2. Choose a page layout that represents the overall look of your Web design. Be sure that there is no text in the title field, that any borders that are showing, and that any navigation links are visible.

3. Capture the screen using a screen capture utility or by pressing Alt+Print Screen.

4. Edit the screen capture as follows:

• Remove any text in any of the borders.

• Crop the title bar and any other parts of the application window from around the text area. You should leave only the borders and the page area.

• Reduce the image to 154 x 104 pixels.

5. After reducing, save the image as an 8-bit color image (256 colors), using the CuteSITE Builder palette.

6. Open an existing CuteSITE Builder design bitmap and copy your new bitmap over it, making sure that you don't cover up the shadow on the right side and bottom.

7. Save the bitmap with the name of your new Web design and copy it to the directory where other CuteSITE Builder designs are stored.

When you choose File > New and select your new Web design, CuteSITE Builder displays the bitmap as a preview of the Web design.