AL Part I MA TE RI The Basics Chapter 1: Exploring SharePoint Designer TE D Chapter 2: SharePoint from the User’s Perspective GH Chapter 3: SharePoint from the Administrator’s Perspective CO PY RI Chapter 4: SharePoint from a SharePoint Designer’s Perspective
Exploring SharePoint Designer Microsoft Windows SharePoint Services 3.0 and Microsoft Office SharePoint Server 2007 are large and sophisticated web applications. It should come as no surprise, therefore, that the tool meant to customize them — Microsoft Office SharePoint Designer 2007 — is a large, sophisticated desktop application. This chapter explores: ❑ How SharePoint Designer fits in Microsoft’s toolset. ❑ SharePoint Designer ’s basic editing features. ❑ SharePoint navigation.
Part I: The Basics Figure 1-1 The overall interface in SharePoint Designer is very much in the mold of an Integrated Development Environment (IDE) such as Visual Studio, or web design and development tools like Adobe Dreamweaver (formerly of Macromedia). As you learn about the various tools at your disposal, you will quickly feel at home in SharePoint Designer.
Chapter 1: Exploring SharePoint Designer Figure 1-2 The collection of files that is treated as a project unit in SharePoint Designer is called a site or web. (This nomenclature is independent of what the corresponding structures may be called on the target server. SharePoint sites have a similar naming structure, which is detailed in chapter 3.) The Open Site, Close Site, and Recent Sites menu items are for working with an entire site.
Part I: The Basics Page Editor The Page Editor in SharePoint Designer is the design surface where you compose the elements of your page. It offers three primary modes, or views, of the page that is currently open — Design, Code, and Split. These modes are selected with the Page Mode toolbar, at the left along the lower window margin. When no page is open for editing, the central area of the workspace shows the Web Site structural views (covered later in this chapter).
Chapter 1: Exploring SharePoint Designer ❑ Quick Tag Selector: Below the tab bar is the Quick Tag Selector, which superficially appears to be a simple HTML breadcrumb, displaying the hierarchy of tags nesting down to the currently selected element; it is much more than that. Clicking a tag in the Selector immediately selects that element in the current view (hence the name).
Part I: The Basics Figure 1-5 To keep your workspace uncluttered, you can enable or disable specific types of Visual Aids, either by selecting View Visual Aids (see Figure 1-6) or by right-clicking the Visual Aids segment in the status bar. You can also turn the current set of aids on and off by double-clicking the Visual Aids segment. Figure 1-6 The Visual Aids view submenu is designed to remain visible as you select multiple options. This is also true of the Ruler and Grid view submenu.
Chapter 1: Exploring SharePoint Designer 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 1-7 shows the same page as Figure 1-5, with the Visual Aids turned off.
Part I: The Basics Standard tables can be inserted two ways: ❑ Select Table Insert Table. This summons the Insert Table dialog, shown in Figure 1-8, which allows you to set all of the core properties of the table prior to its insertion. Figure 1-8 ❑ Click the Table tool on the standard toolbar and drag to visually select the initial number of rows and columns, as shown in Figure 1-9.
Chapter 1: Exploring SharePoint Designer Layout tables are inserted by using the Insert Layout Table link in the Layout Tables task pane. The code generated for a layout table uses standard table, row, and cell tags, but also includes dimension styles by default. In addition, SharePoint Designer inserts HTML comments in each element, allowing it to have content automatically rearranged to follow changes to the layout. Figure 1-10 shows how both a regular table and a layout table look in Design view.
Part I: The Basics First, you can fix the Design view to a set of dimensions. In the status bar, you can see the current dimensions of the window the Design view represents. Click the dimensions entry to see the menu shown in Figure 1-11, which allows you to choose from several page sizes. Dimension status Page Size menu Current dimensions Figure 1-11 If the selected dimensions are smaller than the current design window, the width of the working area is reduced to the horizontal dimension selected.
Chapter 1: Exploring SharePoint Designer Figure 1-12 Internet Explorer and Mozilla Firefox are automatically detected by SharePoint Designer if they are installed on your workstation. In addition, you can select any other installed browser for live preview. Follow these steps to add another browser to the preview list: 1. Select Preview in Browser shown in Figure 1-13. Edit Browser List. The Edit Browser List dialog box appears, as Figure 1-13 2. Click the Add button.
Part I: The Basics 3. 4. Type a name to represent the browser. Click the Browse button to open the Add Browser window (see Figure 1-15), and navigate to the .exe file that starts the application. (You may need to look at the properties of the application’s launch icon to find the file location.) Figure 1-15 5. Click Open, and then click OK on the other two dialogs. A page must be saved before it can be previewed in a web browser.
Chapter 1: Exploring SharePoint Designer Figure 1-16 Although it may be difficult to see on a book page, Code view uses color coding to help you recognize tags delimiters, parameters, inline text, comments, and many other code elements. In fact, Code view offers all of the assistance typical of any modern development environment, and then some, as discussed in the following sections. IntelliSense and More IntelliSense has been a part of Microsoft development tools for more than a decade.
Part I: The Basics Figure 1-17 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 1-18) of the Page Editor provides a complete list of IntelliSense settings available. Figure 1-18 IntelliSense in Code view further helps you by being sensitive to your settings for browsers, HTML, and CSS version.
Chapter 1: Exploring SharePoint Designer pressing Ctrl+Enter and typing the snippet name/keyword, or by selecting the one you want from a list just like an IntelliSense parameter. If you find yourself frequently typing the same thing, maybe with minor variations, you can define your own code snippets to help you. To define a snippet: 1. 2. Copy the code you want to include in the snippet to the Clipboard. Press Ctrl+Enter.
Part I: The Basics 4. 5. Enter appropriate information in the Keyword and Description fields. 6. 7. Specify insertion points and/or selection by using the pipe character (|) if needed. 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.) Click OK to save and close each dialog.
Chapter 1: Exploring SharePoint Designer Script Editor If you are familiar with development tools such as Visual Studio, you may have noticed something missing in SharePoint Designer — a way to test your code. (Many IDEs use the F5 key as the command to run the current program, often called the F5 experience.) Although Code view does provide IntelliSense code completion for several scripting languages, scripts do not run within the context of SharePoint Designer.
Part I: The Basics Microsoft Script Editor is essentially a lightweight IDE based on an older version of the Microsoft Visual Studio development environment. It was included and integrated with FrontPage for many versions, and is now carried through to SharePoint Designer. Access the Script Editor by selecting Tools Macro Microsoft Script Editor or via the icon on the Code view toolbar.
Chapter 1: Exploring SharePoint Designer Figure 1-23 As you make changes in the Design pane, you can immediately see the effect on your code. The reverse is not true. Changes you make as you are editing code are not visible in the Design pane right away.
Part I: The Basics Managing Toolbars and Task Panes With that many possible control elements in the application, showing them all at once is totally impractical. Assuming they fit at all, you’d have no room left on the screen for the Page Editor to perform any work. Fortunately, SharePoint Designer provides a great deal of flexibility in their display. In many respects, toolbars and task panes behave similarly. They can be individually shown or hidden, docked or floating.
Chapter 1: Exploring SharePoint Designer When both toolbars and task panes are docked to the same region, toolbars are always placed closest to the edge of the window. When docked to the top or bottom, toolbars fill the entire width of the window, while task panes — like the Behaviors task pane in Figure 1-24 — sit between anything docked at the sides. Toolbars can be placed on multiple levels within a docking region, each level farther away from the docking edge.
Part I: The Basics Notice that the Pictures toolbar remains floating as it was in Figure 1-24. The reset function only impacts task panes. You can show and hide individual toolbars either by right-clicking an existing toolbar, or by selecting from View Toolbars. You can also show and hide individual task panes by selecting them from the Task Panes menu.
Chapter 1: Exploring SharePoint Designer Task Pane Description Folder List A tree view of the files and folders in your site (shown by default). Navigation * Management of menu hierarchies. Tag Properties All parameters and properties available for the current HTML tag (shown by default). CSS Properties All the available CSS Properties for the current item (shown by default). Layout Tables Controls for configuring tables specially designed to help lay out web pages.
Part I: The Basics SharePoint-Specific Task Panes In addition to the general-purpose task panes, SharePoint Designer has some task panes that are used only when working on a SharePoint site. The following table briefly describes these panes: Task Pane Description Find Data Source Searches among the data sources defined in the current SharePoint site. Web Parts A gallery of the Web Parts available on the site. Contributor * For controlling access to SharePoint Designer functionality.
Chapter 1: Exploring SharePoint Designer Figure 1-26 Remote Web Site SharePoint Designer can be used to transfer files from one site to another. The Remote Web Site view, as shown in Figure 1-27, is used to control synchronization of the two sites.
Part I: The Basics Figure 1-27 The site you are editing, regardless of whether it is on your current machine, is considered the local web site. The Remote Web Site is usually considered the target of the synchronization. However, you have the option of pulling information back from the remote site (essentially taking a snapshot of its current state), or performing a two-way synchronization. When there are conflicting changes, SharePoint Designer prompts you to decide which change takes precedence.
Chapter 1: Exploring SharePoint Designer Figure 1-28 Several of these reports are useful to you as a designer. You can see at a glance which pages have broken hyperlinks, or might take an excessive amount of time to load for a typical user. You can use the Older Files report to check for potentially stale content. See chapter 18 for more information on the administrative and usage reports, as well as reports available from within SharePoint itself.
Part I: The Basics Figure 1-29 You can also create your own menu hierarchies, and insert them on pages using SharePoint Designer. Generally speaking, on SharePoint sites, you should allow the standard SharePoint web interface tools to manage the navigation (see chapter 3). Another way to look at how your users might navigate around your site is through the Web Site Hyperlinks view, as shown in Figure 1-30.
Chapter 1: Exploring SharePoint Designer Figure 1-30 This view allows you to see the hyperlinks leading to, and exiting, the individual pages in your site. As with the Folders and Navigation views, you can directly open a particular page for editing, set its properties, or launch a browser preview. You can also select any page to be the center of attention, and view the link tree from that perspective. The Hyperlinks view is based on links that are actually coded into your pages.
Part I: The Basics Summar y This chapter gave you an overview of Microsoft Office SharePoint Designer 2007. You learned about the Page Editor, and how to get around its various views. You discovered: ❑ SharePoint Designer is not just for SharePoint. It incorporates a wide variety of features that make it an ideal all-around web design tool. ❑ SharePoint Designer ’s user interface is very flexible, and can be adapted to almost anyone’s work style.