To assist you with your page designs, SharePoint Designer provides a number of visual aids. Visual aids provide a way for you to see and access page elements that may not normally be visible, such as ActiveX controls, content placeholders, or items with a hidden attribute. Figure 2-3 shows a page with all visual aids enabled.

Figure 2.3. Figure 2-3

To keep your workspace uncluttered, you can enable or disable specific types of visual aids, either by using the drop-down menu on the Visual Aids icon in the View tab (see Figure 2-4) or by clicking the Visual Aids segment in the status bar. You can turn all enabled visual aids off or on at once by clicking the ribbon icon directly or by clicking the Show link at the top of the menu.

Figure 2.4. Figure 2-4

Visual aids only appear in the Design and Split views, although the setting displays in the status bar and is configurable in Code view.

Although visual aids can make the design of a page much easier, they also can significantly affect the layout as seen in Design view. Turn off visual aids occasionally to verify precise positioning. Figure 2-5 shows the same page shown in Figure 2-3, with the visual aids turned off.

You can further improve the accuracy of your layout experience by setting the Design view to a specific set of dimensions. In the status bar, you can see the current dimensions of the window that the Design view represents. Click the dimensions entry to see the menu shown in Figure 2-6, which allows you to choose from several page sizes.

Figure 2.5. Figure 2-5

If the selected dimensions are smaller than the current design window, the width of the working area is reduced to the horizontal dimension selected. If the selected dimensions are larger than the current design window, the workspace is expanded horizontally, and the scroll bar at the bottom of the window is activated.

Figure 2.6. Figure 2-6

Several common page sizes are provided by default. You can add your own dimensions.

When you select a fixed page size, the dimension status shows a hash symbol. The Page Size menu is also available under the View menu.

As noted earlier, SharePoint pages are very complicated beasts. As such, accidentally changing "the wrong thing" and rendering a page unusable is possible. Visual aids and Skewer Click are two ways SharePoint Designer 2010 helps you select the right thing. SharePoint Designer can also help prevent selecting the wrong thing by offering two different modes for editing pages — Safe mode and Advanced mode.

Advanced Mode

Advanced mode brings the full power of SharePoint Designer's editing tools to bear. For example, in a site page, you are no longer limited to modifying the contents of a content zone. In particular, you can now override the contents of many of the default components (the <asp:ContentPlaceholder> tags) specified in your master page.

Warning

Overriding master page elements for specific pages via SharePoint Designer can result in significant inconsistencies in the look or operation of your site. This is why these operations are not considered "safe."

Figure 2.7. Figure 2-7

Master pages themselves are a special case. SharePoint Designer always opens master pages in Advanced mode because you use them to actually define the look and feel of your site. By definition, you need the functions available in Advanced mode to control the layout and style of these pages. See Chapter 3 for details about creating master pages and including content placeholders.

IntelliSense has been a part of Microsoft development tools for more than a decade. Usually manifesting as a pop-up, it detects what you are typing and offers suggestions for completing your task. Though originally limited to program code, in SharePoint Designer Code view, IntelliSense has been expanded far beyond that. It now includes such features as:

Not everyone wants or needs this level of automatic assistance. You can therefore enable or disable IntelliSense for each of the available elements. The IntelliSense tab (see Figure 2-10) of the Page Editor Options dialog provides a complete list of IntelliSense settings available.

IntelliSense in Code view further helps you by being sensitive to your settings for browsers, HTML, and CSS version. For example, the primary IntelliSense options shown in Figure 2-10 are the Authoring options that are available in a tab on the Page Editor Options dialog. You can access this dialog either by clicking one of the authoring mode indicators on the right side of the status bar (Standard, XHTML 1.0 S, and CSS 2.1 are the indicators, shown earlier in Figure 2-8), or by selecting File

Figure 2.9. Figure 2-9

Figure 2.10. Figure 2-10

Notice that the bottom section of the IntelliSense tab shows options for Code Hyperlinks. These are not hyperlinks you create for your users. Rather, they are links created by SharePoint Designer to help you navigate within your code. When you hover over such a link, SharePoint Designer displays the tooltip shown in Figure 2-11, indicating that you can press the Ctrl key when you click in to open the target.

Figure 2.11. Figure 2-11

Another handy shortcut offered by Code view is code snippets. SharePoint Designer includes pre-defined snippets for such things as HTML document types, script blocks, and style sheet links. You can insert a snippet by pressing Ctrl+Enter and typing the snippet name/keyword, or by selecting the one you want from a list just like an IntelliSense parameter.

Watch IntelliSense in Action as You Create a Code Snippet

1. Open a site in SharePoint Designer.

2. Click the All Files section in the Site Objects list. Observe that the ribbon changes to the All Files tab.

3. In the New section of the All Files tab, click File, and select HTML.

4. Name the new file Snippet.html.

5. Click the filename to open the file.

6. Click Code in the Page Mode toolbar.

7. Click between the <body> and </body> tags.

8. Begin to type the following line of code:

   <div class="|"><div>

   While typing, observe the operation of IntelliSense as it offers to complete the tag for you.

9. As soon as the class parameter is highlighted by IntelliSense, press the Tab key. Observe that the cursor is placed between the "quotes." Also observe that SharePoint Designer creates red squiggled underlines to indicate that the code following the inserted text doesn't (yet) match the expected syntax for HTML.

10. Type the vertical bar/pipe symbol (|).

11. Use your right-arrow key to move the cursor outside of the quotes, and type the > character. Notice that IntelliSense automatically adds the closing </div> tag and SharePoint Designer now recognizes the remaining page syntax as correct.

12. Copy the typed text to the Clipboard.

13. Press Ctrl+Enter. Select the first item on the pop-up list (Customize List), which opens the Code Snippets tab (see Figure 2-12) of the Page Editor Options dialog.

14. Click Add to summon the Add Code Snippet dialog (see Figure 2-13).

15. Type DIV into the Keyword field.

16. Type A fully built DIV tag into the Description field.

17. Paste your code into the Text box. (Alternatively, you can manually enter any desired text, but using copy and paste from a known-good source is more reliable.)

18. Click OK to save and close each currently open dialog.

19. Place your cursor on a blank line.

20. Press Ctrl+Enter. Notice that the snippet you created is now available on the list.

21. Select the DIV snippet and hit enter.

Figure 2.12. Figure 2-12

Figure 2.13. Figure 2-13

How It Works

If you find yourself frequently typing the same thing, maybe with minor variations, you can define your own code snippets to help you. You can define a text entry point with a pipe symbol, as shown in the exercise. If you surround some text with two pipe symbols, you define a range to be selected upon insertion of the snippet.

In addition to using the copy/paste/Ctrl+Enter method to create a snippet described in the exercise, you can directly add and edit snippets through the Code Snippets tab of the Page Editor Options dialog.

In the past, you might have gone back and forth between an application's Design and Code views, depending on what you needed to change. For example, after editing a piece of script in Code view, you would return to Design view to set some text formatting. Otherwise, you would need to enter or edit the formatting tags in code manually. In SharePoint Designer, that kind of toggling is much less necessary. SharePoint Designer allows you to use many of the same techniques for formatting text in Code view as in Design view.

Figure 2-14 shows that formatting options (bold, italic, and underline) are available while you are editing in Code view. In fact, they are fully active and interactive with your HTML.

Figure 2.14. Figure 2-14

Just as in Design view, selecting a formatting command from the toolbar applies that format to (or removes it from) your selection. Unlike Design view, Code view does not show you the item in its formatted state. Instead, you see the HTML tags that are applied to make that format happen.

In addition, the state of the toolbar icons follows the current HTML. In Figure 2-14, the highlighted text is inside an <em> (emphasis) tag, which is rendered in italic on a web page. Also, notice that the Quick Tag Selector for the emphasis tag is active.

The same holds true when adding elements to a page. You can easily drag an item from the Toolbox task pane into the Code view editing window. SharePoint Designer automatically creates and inserts the appropriate HTML, just as if you had dropped the item into position in Design view.

The Tag and CSS Properties panes show a grid of their respective type of properties and allow you to edit them. Properties that are changed from their default values are shown in bold font. The properties available vary depending upon the particular object currently selected on the design surface. Figure 2-17 shows the Tag Properties and CSS Properties panes.

Figure 2.17. Figure 2-17

CSS properties may come from a number of different sources. The CSS Properties pane therefore lists the sources that contribute to the current object.

Four task panes deal with the management of styles on your page. They are the Manage Styles, Apply Styles, Behaviors, and Layers task panes. Unlike the CSS Properties task pane, which modifies the specific properties of a single object, the task panes in this group deal with items that can apply to multiple objects.

Figure 2-18 shows the Manage Styles and Apply Styles task panes.

Figure 2.18. Figure 2-18

The Manage Styles task pane helps you manage the classes (style attribute groupings) that you can apply to various objects. The Apply Styles task pane enables you to apply specific style classes to the currently selected object.

The Behaviors task pane enables you to assign one or more behaviors to the currently selected object. Behaviors are small script or CSS attribute segments that perform specific actions when certain events take place, such as rolling the mouse pointer over the object.

The Layers task pane manages <div> tags in your page, but not just any <div> tags. To be considered a layer in this task pane, the <div> must have a defined position type other than "none." Such layers are frequently used to lay out content and placeholders for content (see Chapter 3 for more details on placeholders).

The "internal" insertable elements are those items that are sourced from within the SharePoint Designer application. From a content perspective, these may still represent items that come from an external source (such as a database or web service). However, SharePoint Designer is the primary control mechanism for the objects themselves.

Three task panes are in this group. Two of them — Data Source Details and Conditional Formatting — relate to using data view web parts. Both task panes and their functions are described in more detail in Chapters 7 and 8.

The third task pane in this group is the Toolbox — a compendium of almost every individual element that can be added to a page. The primary exceptions to this are tables and SharePoint "web parts," which you add through the Insert ribbon tab (described later in this chapter).

The Toolbox task pane is organized into three collapsible sections, as shown in Figure 2-22.

Figure 2.22. Figure 2-22

Each section represents a different class of objects that can be added to a page and is further broken down into related groups of individual controls. The sections are as follows:

The tools in the Toolbox task pane can be displayed in three different modes:

You choose one of these modes by right-clicking the Title tab and selecting the desired mode from the context menu. You can also choose to expand or collapse all the Toolbox control groups from this menu. Figure 2-23 shows the same section of tools in each of the three views.

You can add a control to your page from the Toolbox in several ways:

When you use the drag-and-drop method, you can drop the control in any valid place in your open document. Double-clicking a control in the Toolbox inserts the control at the current document text cursor position.

Figure 2.23. Figure 2-23

Right-clicking a control in the Toolbox displays two choices. The Insert option inserts the control at the current text cursor, just as double-clicking would. Certain controls, however, such as <div> or <span> tags, also activate the Wrap option. If you have a block of text highlighted when choosing this option, an opening tag will be inserted at the beginning of the block, and the corresponding closing tag will be inserted after the block.

The task panes in the reporting group share a few unique characteristics (besides "reporting," that is). For example, they are the only task panes whose default position is docked to the bottom of the window. In addition, they are not limited in scope to a single document.

Figure 2.24. Figure 2-24

Each reporting pane has a toolbar along its left edge. Figure 2-24 shows the toolbar from the Accessibility task pane, which contains tools found across many of the reporting task panes. See the callouts for descriptions of the shared icons. Icons specific to a particular report type are described later in its respective section.

The icons shown in the figure are as follow:

The Find 1 and Find 2 task panes are identical in function. As you might expect, they allow you to find or replace text. By having two of them, however, you can perform two independent searches and have them available to re-execute at your leisure.

When you click the Execute icon in a Find task pane, or press Ctrl+F, you summon the Find and Replace dialog, shown in Figure 2-25.

Figure 2.25. Figure 2-25

Notice that in the lower-left corner of this dialog, you can select which of the Find task panes will receive your results. The Find and Replace tabs of this dialog are very similar, except that in Replace, you have an extra block for the replacement text, as well as buttons to invoke the actual replacement.

Because of the complex nature of page code, you can perform searches based on more than just static text. In the Find and Replace panes, you can enter regular expressions for the search text. Figure 2-26 shows the list of regular expression elements available.

Figure 2.26. Figure 2-26

Finally, you can find and replace individual HTML elements without needing to define them with regular expression syntax using the HTML tab of the Find dialog, shown in Figure 2-27.

Figure 2.27. Figure 2-27

One of the most powerful elements of HTML Find is the HTML Rules builder. This allows you to select tags based on attributes, value strings, or virtually any other aspect of a tag. Figure 2-28 shows the HTML Rules builder with a simple attribute rule defined.

Figure 2.28. Figure 2-28

The Accessibility task pane report examines your file(s) for compliance with various standards. It then reports on design issues that may cause problems for people with limited vision. Figure 2-29 shows the options and standards you can include when running the Accessibility report.

The Accessibility report includes one icon not described at the beginning of this section. The circle containing the letter i will display a pop-up containing the details of the currently highlighted result item.

Figure 2.29. Figure 2-29

The Compatibility task pane produces reports on design issues that may cause problems with particular browser and CSS standards. As Figure 2-30 shows, the options available in this report are selected via dropdowns rather than with checkboxes (as were the Accessibility Checker report options).

Figure 2.30. Figure 2-30

Because so many possible HTML and CSS standards exist, some of which are mutually exclusive, you can only explicitly check against one of each per report. In addition, you can tell the report to validate each individual page against its embedded type declaration, if any.

The Hyperlinks task pane reports on the status of hyperlinks used on the site. This report has several unique characteristics:

The unique toolbar icons are shown and called out in Figure 2-31, and described thereafter.

Figure 2.31. Figure 2-31

The CSS Reports task pane shows styles in use, style sheet files, and references to styles that do not exist. Unlike the Compatibility reports, the CSS reports do not validate against any particular standard. See Chapter 6 for more information about using CSS in SharePoint and SharePoint Designer.

Unlike the internal insertable elements block, these task panes allow you to work with specific objects that were created outside of SharePoint Designer and bring them into the application. These are typically individual elements like images or blocks of text.

Figure 2.33. Figure 2-33

The Clip Art and Clipboard task panes form a special group and behave differently from the other task panes you have encountered so far. They always occupy the same space. Only one of them can be displayed at a time, and you can toggle between them via a drop-down menu in the task pane's title bar. They can be floated and docked like other task panes, but will not join any other pane in the same zone. Rather than docking within the design surface, they dock at the actual edge of the window; therefore, any elements other than the ribbon itself will be "inside" relative to this pane.

Figure 2.34. Figure 2-34

The Clip Art task pane allows you to search for and select images and other media from various sources. The results of your query are shown as a gallery of tiles within the task pane. Figure 2-34 shows an example result set from the Clip Art task pane.

The Clipboard task pane shows a history of items copied or cut from various Office applications. You can then specify which (if any) you want to paste into your document.

Regardless of whether you are using the Clipboard or Clip Art task panes, selecting one of the items therein will insert it at the current position of your text cursor.

SharePoint Designer Design view supports creating traditional HTML tables either visually or through the entry of parameters. You can insert standard tables three ways:

Figure 2.36. Figure 2-36

As long as your text cursor is within a table object on your page, the Table Tools Layout contextual ribbon tab will be visible. This tab is specific to working with tables, and other than its name, has nothing in common with the global Layout ribbon tab. Figure 2-37 shows the Table Tools Layout tab.

Figure 2.37. Figure 2-37

You can insert pictures in your page two ways. If you click the Picture icon in the Insert Ribbon tab, you get a standard Windows file browser dialog (entitled Picture). You can then browse your file system and network for any image files you may have available.

Figure 2.38. Figure 2-38

You can also use the Clip Art icon to summon the Clip Art task pane, which was described earlier in this chapter.

In either case, after you have selected the image you want to insert, by default, an Accessibility Properties dialog appears, as shown in Figure 2-38. This allows you to enter extra descriptive information that screen readers can detect and read.

At the bottom of the dialog is a checkbox you can activate to keep it from popping up every time.

After you have inserted a picture, regardless of its source, you have a great deal of control over it. Clicking on a picture activates the Picture Tools' Format contextual ribbon tab, shown in Figure 2-39.

Figure 2.39. Figure 2-39

Most of the elements on this tab are similar to functions you would find in any image manipulation tool, and therefore not described here. However, a few of these tools are specific to the use of an image on a web page:

Two icons are in the links section of the Insert ribbon tab. Both insert what, in HTML lingo, are called anchor tags (<a></a>). The parameters within the anchor determine whether it forms what is commonly called a hyperlink (an anchor that goes someplace), or a bookmark (an anchor that serves as a destination inside a page).

Bookmarks are the simpler of the two. Clicking the Bookmark button in the Insert ribbon summons the Bookmark dialog shown in Figure 2-41.

Figure 2.41. Figure 2-41

All a bookmark requires is a name. If you have text highlighted when you click the Bookmark button, that text will be used as the basis for the default name. The dialog will also show any other bookmarks already defined in the current page. Although no "content" is mandatory for a bookmark anchor, making the anchor tags surround the text of a page section heading is good practice.

To refer to a bookmark, you append a hash or pound sign (#), plus the name of the bookmark, to the name of the page when entering a URL. When such a link is clicked, the browser opens the indicated page and scrolls immediately to the position of the bookmark.

Inserting a hyperlink is a little more complicated. When you click the hyperlink button, you summon the Insert Hyperlink dialog, shown in Figure 2-42. This dialog is also used when you're defining image hyperlinks and hotspots as described earlier in this chapter.

Figure 2.42. Figure 2-42

Just as with a bookmark, if you have text highlighted when you click the Hyperlink button, that text will be wrapped in the anchor tag. Unlike the bookmark, that anchor becomes the active hyperlink you can click on. This text is typically shown and editable in the Text to display field of the Insert Hyperlink dialog. If you are inserting a hyperlink on an image or for a hotspot, the Text to display field is grayed out and contains code representing the hotspot or image.

The bulk of the Insert Hyperlink dialog is dedicated to a file browser for the destination of your link. This operates much like the File Open and Save As dialogs, with icons to select different areas to browse, and a list of files and folders through which you may drill. The address of any file selected appears in the Address field of the dialog.

The buttons to the right of the file browser allow you to choose various options for your hyperlink:

The Controls section of the Insert ribbon tab includes icons for HTML, ASP.NET, and SharePoint controls, as well as Data Sources (described in later chapters). These are the same controls you found in the Toolbox task pane described earlier in this chapter; however, in the ribbon context, they are presented in the form of individual drop-down galleries. The HTML gallery is shown in Figure 2-43.

The galleries have sections that can be displayed individually, or all at once. To select a section, you click on the small triangle in the gallery's title bar (next to All HTML Controls in the figure). If you right-click a displayed gallery, the context menu allows you to add a link to that gallery directly to the Quick Access Toolbar. This allows you to keep your ribbon minimized and insert objects from that gallery while other ribbon tabs are displayed.

Figure 2.43. Figure 2-43

The Web Parts section of the Insert ribbon tab contains two icons. The Web Parts icon displays a gallery that allows you to insert many of the web parts available on the currently open site. Unlike the Controls galleries, this gallery does not allow you to collapse to an individual class of web parts. In addition, the web parts displayed can vary considerably from site to site. Several types of web parts and how to manipulate them in SharePoint Designer are described in other chapters throughout this book.

A web part zone is a container on your page for web parts. SharePoint contains tools that allow your users to easily add web parts to a zone, delete them, or even move them from zone to zone — all within the web interface. Within SharePoint Designer, you have the option of limiting some or all of this functionality.

When you click the Web Part Zone button, if you have an ASPX page open, SharePoint Designer will also add any other supporting components the page may need to support its functionality. When you highlight a web part zone on the page, the Web Part Zone Tools

Figure 2.44. Figure 2-44

The Web Part Zone Properties dialog provides the same Title and Layout control that the ribbon tab contains, plus:

The Symbols section simply contains the option to insert a character onto your page that may not appear on your keyboard. Clicking this icon displays a limited gallery for quick insertion, as well as a More Symbols menu item. The More Symbols item summons the Symbol dialog, shown in Figure 2-45.

Figure 2.45. Figure 2-45

The Symbol dialog allows you to insert virtually any character, from any language, supported by your computer.