- SharePoint Designer Tutorial: Working with SharePoint Websites
- Mike Poole
- 4003字
- 2025-03-31 07:01:04
Tour of the Environment
Let's fire up SharePoint Designer and take a look around.
If you are familiar with Visual Studio, the first thing you will notice about the design environment is that SharePoint Designer looks remarkably similar to Visual Studio. The other thing that may catch your eye (especially, if you are using a large monitor) is that there is a big expanse of nothingness in the middle of the screen. This blank canvas is where we will build our creation.
Task Panes
Before we begin tinkering with SharePoint Designer, notice that by default four task panes are open for us to use:
- Folder List
- Tag Properties
- Toolbox
- Manage Styles
Because we are not currently editing a page, the contents of these task panes are either empty or grayed out.
We can open any of the 24 task panes that SharePoint Designer provides us with by selecting them from Task Panes on the menu bar. As we do this, notice that some of the task panes add extra tabs to existing task panes, forming groups of task panes. For example, when we go to Task Panes and click on Navigation, it groups the new Navigation task pane alongside the existing Folder List task pane. It is possible to "tear off" tabs and re-group them in a different pane, if we decide that the default groupings do not suit our design style. SharePoint Designer will save any changes to the environment to the registry when we close the program to ensure that our settings remain the same the next time we open the designer.
We can have up to six groups of task panes on our page and could in theory have all our task panes open simultaneously.
Let's take a look at what each of the task panes does:
- Folder List displays all the folders and files in our SharePoint site. As we have not created or opened a site, the list is currently empty. When we create a new site, this pane fills with all the content within the site, as in the following example of a newly created mysite (mysite contains the personal pages, which are displayed in a SharePoint site at
http://<SERVERNAME>/personal/<USERNAME>/).
- Navigation is similarly empty until we open a site. Once our site is open, we can use it to configure our site's navigational items, such as the navigation bar. We can see an example of a populated Navigation task pane in the image below. The Quick Launch items that you see in the image populate the Quick Launch bar that appears down the left-hand side of a SharePoint site.
- Tag Properties allows us to specify all manner of properties for the entity we have selected on our page. The options that are available vary depending on what type of item we are editing. If, for example, we have inserted an ASP.NET button control onto our page, we can specify formatting details (e.g. the background color or text that appears on the button), or we can specify actions that the button will perform (e.g. the tooltip text which appears that the user hovers their cursor over the button).
- CSS Properties allows us to see the style information for the element that we have selected on our web page and to edit that style. This task pane gives us a huge degree of control over the styles on our page, not only allowing us to specify one style but also to change the order of precedence of many different styles. In addition, there is a Summary button that allows us to easily see exactly what CSS is cascading to the selected element and understand exactly how to change its appearance.
- Layout Tables offers some very powerful features to allow us to instantly create the layout for our new page by creating a table from ten pre-specified table designs and specifying the dimensions of the table and its cells.
- Apply Styles allows us to choose a style that we will give to our selected entity. These styles might simply specify the font size and color, but can also be used to give us precise control of entity positioning and borders. This task pane can be set to show all styles used in our site, or just the styles used on the current page. In addition, we can create new styles or attach previously created CSS pages.
- Manage Styles is where we specify the styles that are used in the Apply Styles task pane. We can either create a new style or select an existing CSS style sheet. We can categorize our styles by CSS order, by element, or by type. We can also create new styles or attach CSS using this task pane. On the left side of the list of selectors, there is an icon indicating whether the selector is a class, an HTML tag, or an ID.
- Behaviors will be very familiar to the users of Adobe Dreamweaver. This task pane allows us to specify events that take place when an action is performed at run time. For example, a sound can play or a rollover effect can be displayed on an image.
- Layers will be familiar to those of us that have used DHTML in the past. It allows content to be placed in front of or behind other content to create effects such as those annoying adverts we see, obscuring the content of web pages. Fortunately, they can also be used to enrich our sites.
- Toolbox is our indispensible task pane. If we could take one task pane with us onto a desert island (along with our computer, power supply, broadband, etc., etc.), this would be the one to choose. We can drag HTML, ASP.NET, and SharePoint elements from here and drop them onto our page. The ASP.NET Web Parts in this task pane are not suitable for use in SharePoint sites. SharePoint Web Parts are displayed in the Web Parts task pane, when we are connected to a SharePoint server.
- Data Source Library controls the connections to the many different types of data sources that SharePoint allows us to use (e.g. ODBC database connections, XML files and web services, SharePoint lists, and libraries). The task pane displays the data sources for our current site, and can also display data sources for other sites (as long as we have the 'open web' permission on those sites).
- Data Source Details displays the information stored in our selected data source. It displays the contents of every field and allows us to page through the data, one record at a time. When we drag a data source from this task pane onto our web page, SharePoint Designer automatically creates a Data View, displaying the first five records contained in the data source on our page. This task pane allows us to see all of the data inside the data source of a currently selected Data View, or inside a data source we chose to view by clicking Show Data in the Data Source Library. We can also modify the source properties from this task pane, scroll through the records to see the hierarchy of our data source (this is particularly useful when working with XML data), view the XPath expression for each field, and to save space, can choose not to show the actual data, but rather just the schema for our source. When we drag a data source from this task pane onto our web page, SharePoint Designer creates a Data View, displaying all the records for that data source, unless there are more than 24 records, in which case, the view is paged to 10. For XML data, we insert the first five columns (if there are five) of the first repeating region. For List data, we insert three columns.
- Conditional Formatting is the same principle as the conditional formatting in Microsoft Excel. It allows us to automatically change the style of an HTML tag or data value in our Data View, depending on the values we specify. For example, if we want all account balances of less than $250 to be in bold text with a red background, this can be set up using Conditional Formatting.
- Find Data Source allows us to find the data source we would like to use. This is particularly important if our site contains a large number of data sources, or if we are working with multiple sites. To find the data source we would like to use, we simply select the location from the drop-down list, then type a search phrase (e.g. "links") into the For: field.
- Web Parts allows us to harness the power of the underlying .NET 2.0 framework by dragging and dropping all manner of ready-made controls onto our page. This is great because most, if not all, of the work for common tasks, such as displaying task lists or building forms, has already been done for us. SharePoint Designer regularly queries the server to check which Web Parts are available in order to keep this task pane up to date.
- Find 1 and Find 2 allow us to find or find and replace instances of a text string on our page or in the underlying code (depending upon whether Design view or Code view is selected). The find tools are extremely powerful and allow us to use regular expressions to conduct our search. We are also able to build highly complex HTML rules (e.g. find all instances of the word foo that exist inside table cells, that are inside divs, that have an attribute called bar and a value of baz). These searches can also be saved and then reused or shared.
- Accessibility allows us to check that design-time HTML complies with most of the disability legislation, which is in place to help users with visual impairments use our site. SharePoint Designer will not ensure that the run-time HTML is compliant, so it is a good idea to also check the site using an accessibility evaluation tool such as the ones listed at http://www.w3.org/WAI/ER/tools/.
- Compatibility allows us to ensure that our site conforms to the CSS, HTML 4.01, XHTML 1.0 and 1.1 standards used by standard-compliant browsers such as Firefox and Safari. We can also check that our site will run on various versions of Internet Explorer, which does not adhere to the standards as closely.
- Hyperlinks will display a report of the internal and external links on our site and check to see if any of these are broken.
- CSS Reports is great for detecting and removing unused styles from our site. It will also display a list of styles that are used on a page.
- Clip Art allows us to search our computer and Microsoft's online image bank for clip art and photos and display those on our web page. A word of caution before adding dancing telephones to your company's contact page. Just because you can to do, it does not mean your marketing department is going to approve of it.
- Clipboard will store up to 24 of the most recent items we have copied or cut from any of the applications on our computer and allow these to be pasted into our web page.
- Contributor shows us the contributor settings for our site. Collaboration is one of the most powerful features of SharePoint. It allows groups of users to be set up, each with different permissions for viewing and editing a site. By default, this task pane will probably show us as members of the Content Authors group, which has some power to edit our pages, but does not allow us complete world domination.
Once we have opened our task panes using the Task Panes menu, we have complete control over where we position those task panes on the page:
- Move a task pane by clicking and dragging on the title bar of our task pane. If we drag it to the edge of the program window and let go, it will dock neatly onto the page either vertically (if we drag it to the left or the right of the window) or horizontally (if we drag it to the bottom or the top of the window).
- Resize the task panes by hovering the mouse cursor over the edge of the task pane until the cursor changes to a double-headed arrow and drag the border out or up.
- Close task panes we are not using by clicking on the Close cross in the top-right of the task pane. If our task panes have been grouped together, then we can either click on the upper cross to close the whole group or on the lower cross to close the active task pane.
- Merge task panes together into groups by clicking on the title bar of a task pane and dragging it onto another task pane. We can even merge groups into other groups by clicking on the title bar of the group and dragging it onto another group.
- Stack your task panes or groups of task panes into one column by dragging the title bar of your task pane or group into an existing column of task panes. We can then use the Maximize button, when we would like to access the contents of that task pane. If you are using a monitor that has low screen resolution, you may find it helpful to stack your task panes in one column because you will then have enough room in the Design view to build your web pages.
- Float a task pane anywhere on the screen by right-clicking on the task pane's title bar and selecting Float from the very short shortcut menu. If you are fortunate enough to have a computer with multiple monitors, you may like to have SharePoint Designer filling one screen and float all your task panes on the other.
- Restore task panes to their default position once you have arranged them in a confusing enough manner by selecting Reset Workspace Layout from your Task Panes menu.
If you want to be a real whiz, try the keyboard shortcut Ctrl + Tab to cycle through the task panes in a group (or Ctrl + Shift + Tab to cycle through them backwards).
Another point to note is that in some of the task panes (e.g. Accessibility), it may not be immediately obvious that to run a report we must first click on the small green arrow.
Code View
In the center of our design environment, we have the area where we will be building our pages. Clicking in this area allows us to start typing the text that will be on our page. It works in much the same way as Microsoft Word does. We can type some text, highlight it, and format it using different font faces, colors, and sizes. This is of course what is known as the WYSIWYG (What You See Is What You Get) method of working and is nice and straightforward. Microsoft makes a big deal about the fact that we can build SharePoint sites in this way without the need to type any code. That is great for casual users who just want to copy and paste their information onto a web page, but it does not mean that more experienced developers cannot tinker under the bonnet if they want to. This is where the Code tab comes in; it allows the view to be flicked from the Design view to the Code view at the click of a tab. You can see the Code tab at the foot of the workspace pane.
When we click on the Code tab, the HTML of our page is displayed.
If you think the code that SharePoint Designer creates looks a little confusing, let me assure you that it is far tidier and easier to work with than the code that Microsoft FrontPage used to create.
The eagle-eyed among us will have noticed there is also a third tab called Split. When we click this, it takes us into Split view, which shows us the Code view in a pane at the top of the page at the same time as the Design view in a pane beneath it. When we work in either of these panes, it moves the other pane up and down, depending on where on the page we are working. Notice that when we highlight an element on the page, it highlights the associated item in the other pane. Nice!
If we are blessed with multiple monitors (and I really do recommend that if you are not, you do everything in your power to ensure that you are, because you will never look back!), SharePoint Designer allows us to make full use of our additional screen area. We can right-click on a page that is in Design view and select the Open Page in New Window option. We can move this window to our second monitor and change the view to Code view. This allows us to make changes on one screen and see the changes occur in the other automatically. Now that is slick.
In this book, we will concentrate on designing our site using the Design view, but occasionally we will flick into the Code view for a brief demonstration of how additional functionality can be added to our site, if we should feel so inclined. You may never use the Code view, but it can still be useful to know what can be done should you wish so.
The Button Bar
At the time when the majority of the Microsoft Office suite has upgraded to a shiny new chunky tabbed ribbon bar, SharePoint Designer has retained the traditional command bar at the top of its screen. By default, the Common button bar is displayed, which mainly allows us to format our highlighted text.
By right-clicking on the empty space to the right of the Common button bar, we bring up a shortcut menu, which allows us to display other button bars that are specific to various tasks, such as inserting tables or selecting which Master Page our page should use.
The Status Bar
The grey Status bar at the foot of the designer displays a host of useful information to help us design pages that not only look good in the designer but also work well in real life.
From left to right, the Status bar shows us the following helpful information:
- The Contextual Message will usually say For Help, press F1 (and this is a good tip because I have found the help in SharePoint Designer to be very comprehensive). The message will change occasionally as we develop our site to display useful information. For example, when we click on a hyperlink in the Design view, it will display the target address.
- Visual Aids are useful markers and error messages, which are displayed on the page at design time to help us compose our page. They do not appear to a visitor when they view our web page. The Visual Aids can be toggled on and off by double-clicking on the Status bar cell. Right-clicking on this cell displays a shortcut menu where we can select which visual aids are displayed in the designer, when Visual Aids is set to On. Personally, I find the Margins and Padding visual aid very useful.
- Style Application allows us to switch between automatic application of site styles and manual application of styles, which allows us more control of how our page looks. Manual style application can be at the expense of a uniform-looking site and should only be used by a developer with a good grasp of CSS. It allows us to render classes and selectors in exactly the way we would like them to appear (e.g. using our corporate colors rather than the default colors provided by SharePoint).
- Download Statistics displays the total file size of our HTML and the files embedded on the page. Over time, as the average user's internet connection has become faster, it has become less important that a page is small so that it downloads in good time, but the cost of bandwidth has also risen over the same period. If you pay for the bandwidth used by your web server, then keeping your page sizes small will help keep your bills small. Generally speaking, pages should not need to be more than 60-100KB in size. If the size of our pages is dramatically high, then the first thing we would want to try doing is reduce the quality of our JPEG images, which can halve the overall page size. It is also important to note that the statistics do not include the sizes of any images that are dynamically displayed on the page. For example, if we have a product page that displays information about a bottle of wine (if you like wine, you will love the example site we are going to build in this book), then that page will display one of hundreds of pictures of wine bottles automatically, depending on which product was selected. In this case, SharePoint Designer does not know which image will be selected, so does not include that file information in the download statistics. This is especially important to bear in mind because such dynamic images are cached less frequently and so will result in higher bandwidth usage.
- Standard Rendering Mode will display the word Standard if our site conforms to an agreed doctype. If we would like to check that our site renders nicely in Internet Explorer 6 (and we should!), then we can double-click on this area and change the Secondary Schema to Internet Explorer 6.0, thereby enabling the Quirks mode. More information about quirks mode can be found at http://en.wikipedia.org/wiki/Quirks_mode.
- Page Size displays the current dimensions of our Design view. The width of the page in pixels is displayed first, then the height. Right-clicking on this cell brings up a shortcut menu, which allows us to select different dimensions for our page or to create our own page sizes. The dimensions in brackets refer to the screen resolution, whereas the dimensions in front of the brackets refer to the available space within the typical browser window on that screen (given that users seem to collect toolbars, the available vertical space may be less than this guideline predicts). Setting the page dimensions is a feature that we should seriously consider using in all our sites, so that users with smaller screens can view our site without the need to scroll left and right. More importantly, it will mean we don't get an embarrassing phone call asking us why our site does not print off properly.
- Document Schema shows the HTML or XHTML doctype declaration that is displayed in the HTML. The doctype declaration tells the browser what type of HMTL is being used. By default, the more recent XHTML 1.0 Transitional is used. To change the doctype, double-click on this cell in the Status bar (or if you want to take longer to do exactly the same thing, use Tools | Page Editor Options on the menu bar). Choosing the correct doctype allows SharePoint Designer to suggest appropriate options through its built-in IntelliSense. SharePoint Designer will alert us to code that does not conform to our chosen doctype by using red squiggles and yellow highlighting. For more information about doctype standards, see the World Wide Web Consortium website at http://www.w3.org/MarkUp/.
- CSS Schema is similar to the doctype, but tells the user's browser which version of Cascading Style Sheets is being used on the page. By default, it is set to CSS 2.1, which is the most recent version. This tool works in a similar way to the Document Schema tool, by allowing us to check the validity of our code. For more information about CSS standards see http://www.w3.org/Style/CSS/.