6.1. Working in the Design View

Before discussing the Design view features of SharePoint Designer that enhance your designing experience, I want to discuss the Color Coding tab, as shown in Figure 6.1, in the Page Editor Options dialog box.

Figure 6.1. The Color Coding tab in the Page Editor Options dialog box

As shown in previous chapters, various SharePoint Designer layout tools, components, and controls are represented by certain colors in the Design view. For example, the layout table is represented with a green border, the layout table cell with a blue border, etc.

The Color Coding tab in the Page Editor Options dialog box allows you to set colors that represent these features in the Design view. If you don't feel comfortable with the default color settings, you can change the colors in the Color Coding tab. If you want to revert the changes you make to the colors here, click Reset Defaults.

6.1.1. Using visual aids and formatting marks

The View menu in SharePoint Designer allows you to enable visual aids and formatting marks in the Design view. You use these two tools to obtain a detailed visual look at tags, placeholders, spaces, carriage returns, etc., on a Web page in the Design view. It's especially useful to indicate and locate components and content formatting that normally hide in the Design view, such as layers with the visibility style set to hidden.

Choose View Visual Aids to choose from these menu options:

• Show: Shows the visual aids selected in the Visual Aids menu in the Design view. You can press Ctrl+/ to show all the selected visual aids. By default, all visual aids are selected.

• Block Selection: Displays a dotted rectangle around certain tags

• Visible Borders: Makes the borders visible only for reference in the Design view when the borders have been disabled for a component

• Empty Containers: Displays a dotted rectangle around empty objects in the page

• Margins and Padding: Displays the margins and padding applied to a Web page, tables, paragraphs, etc., in the Design view

• CSS Display:none Elements: Displays the elements (HTML tags or controls) that have the display:none style applied to them

• CSS Visibility:hidden Elements: Displays and indicates the location of the elements that have visibility:hidden style applied to them

• ASP.NET Non-visual Controls: Displays the ASP.NET controls that don't have a visual interface — for example, data source controls, such as SQLDataSource, for reference — on a Web page

• ASP.NET Control Errors: Displays the errors in the Design view for ASP.NET controls that error out while rendering the Web page

• Template Region Labels: Displays the names of the editable regions when working with Dynamic Web templates (DWTs)

You can also toggle visual aids on or off by using the Visual Aids panel in the status bar of SharePoint Designer. As previously discussed, you can enable or disable the status bar via the Application Options dialog box, which you access by choosing Tools Application Options.

Like Visual Aids menu, the Formatting Marks tool shows the locations in the Design view of HTML tags and other formatting applied on a Web page. Choose View Formatting Marks to choose from these menu options:

• Show: Shows the formatting marks selected in the Formatting Marks menu in the Design view. You can press Ctrl+Alt+/ to show all the selected formatting marks. By default, all formatting marks are selected.

• Tag Marks: Shows the HTML tags in the Design view

  The Layout Tables task pane is disabled when you enable Tag Marks.

  
  

• Paragraph Marks: Shows the location of the end of a paragraph

• Line Breaks: Shows in the Design view where the <BR> tags are present

• Spaces: Indicates the location of empty spaces (&nbsp;) inside a Web page

• Comments: Shows where the HTML comments are located inside a Web page. HTML comments aren't rendered in the Design view, so this option can help you quickly identify where in the Web page code HTML comments have been placed.

• Script Blocks: Indicates the location of the script blocks in the Web page code

• Positioned Absolute: Displays an anchor that shows the location of the content, such as layers with absolute positioning

• CSS Display:none: Indicates tags on which the display:none style has been used for reference in the Design view

• Hidden Form Fields: Shows the location of the hidden form fields on a Web page

Enabling formatting marks can act as a great way to learn about the HTML tags associated with the components that you can insert by using the SharePoint Designer user interface. However, they might cause confusion if you enable them on large Web pages.

6.1.2. Using rulers and grids

The Ruler and Grid functionality offered by SharePoint Designer allows you to quickly position components, such as tables and layers, on Web pages. Choose View Ruler and Grid to enable the Ruler and Grid menu for the Design view. The Ruler and Grid menu has these options:

• Show Ruler: Displays a ruler at the top and left edges of a Web page. You can use this ruler to quickly determine the top and left position of content on the Web page. It also helps you determine the width and height of pictures, tables, layers, etc., on a Web page. By default, the display unit of the ruler is pixels. You can change the measurement by choosing View Ruler and Grid Configure.

• Show Grid: This displays a grid on the Design view of the Web page, which, combined with the ruler, allows you to position content relative to each other.

• Snap to Grid: When selected, this option snaps the content to the grid when resizing in the Design view.

• Set Origin from Selection: This sets the origin of the ruler from the selection in the Design view; that is, the ruler begins from the left margin of the selection you make in the Design view.

• Reset Origin: This resets the beginning of the ruler to the default settings.

• Configure: This opens the Page Editor Options dialog box for modifying the settings for the ruler and grid.

The Configure menu option in the Ruler and Grid menu takes you to the Ruler and Grid tab, as shown in Figure 6.2, in the Page Editor Options dialog box.

You can use this tab to configure these attributes of the ruler and grid for the Design view:

• Ruler and grid units: Allows you to specify the units to use for the ruler and grid

• Display Grid: Provides settings that allow you to modify the spacing, line style, and line color

• Snapping Grid: Allows you to change the distance by which the content is snapped when the Snap to Grid option is enabled (which you access by choosing View Ruler and Grid Snap to Grid)

6.1.3. Using and configuring the tracing image

Tracing images is one of the features introduced in FrontPage 2003 that has been carried over to SharePoint Designer. The concept behind designing Web pages by using a tracing image is to provide a way to put an image in the background of the Design view interface, allowing the image to be used as a reference for placing and sizing the actual content of a Web page.

In scenarios exploiting a tracing image feature, a Web designer would create the layout for the Web page in the form of an image by using the tool of his or her choice. The designer would provide the image to the Web page developers, who then place the image as a tracing image in the background of the Design view in SharePoint Designer. They can then easily set the content of a Web page so that it fits the tracing image.

You can configure the tracing image you want to use for a Web page by choosing View Tracing Image Configure, which opens the Tracing Image dialog box, as shown in Figure 6.3.

Figure 6.2. The Ruler and Grid tab in the Page Editor Options dialog box

Figure 6.3. The Tracing Image dialog box

In the File Name text field, specify the location of the tracing image to be used. In the X and Y text fields, set the coordinates (top and left) for where on a Web page the tracing image should be placed. Also, the Opacity slider allows you to specify the transparency of the tracing image.