Making Sense of the SharePoint World


Configuring Page Sizes and Browser Preview in SharePoint Designer

Jan-262009

287613 cover.indd

An excerpt from Professional Microsoft Office SharePoint Designer 2007
This segment also published in on End User SharePoint.

One of the most frustrating things about designing for the Web is the wide array of browsers and screen formats in which your site may be displayed. SharePoint Designer helps mitigate this problem by giving you several preview options.

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.

clip_image002[18]
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. The chosen vertical dimension is shown by a dotted line across the visible area of the page.

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.

Note: The default page sizes represent Microsoft Internet Explorer in its default configuration. You can create your own set of dimensions to choose from.

When a fixed page size is selected, the dimension status shows the hash symbol seen in Figure 1-11. The Page Size menu is also available under the View menu.

Design view provides a close approximation of the rendering of your page, especially with the visual aids turned off. However, even with the fixed page size option, SharePoint Designer cannot perfectly reproduce the environment of a web browser. To resolve this, SharePoint Designer provides the option to preview your page directly in web browsers.

Not only can a page be rendered differently in a browser than within SharePoint Designer, but different browsers and even different versions of the same browser have their own ways of rendering pages. It is best practice, therefore, to test your pages in each of the browsers you expect to view your site. SharePoint Designer's Preview in Browser function enables you to select an exact environment in which to test your pages. Figure 1-12 shows the Preview in Browser menu as selected from the icon in the Common toolbar.

clip_image004[6]
Figure 1-12 [f0112.bmp]

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@@>Edit Browser List. The Edit Browser List dialog box appears, as shown in Figure 1-13.

clip_image006[6]
Figure 1-13

2. Click the Add button. The Add Browser dialog box appears (see Figure 1-14).

clip_image008[6]
Figure 1-14

3. Type a name to represent the browser.

4. 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.)

clip_image010[6]
Figure 1-15

5. Click Open, and then click OK on the other two dialogs.

Note: A page must be saved before it can be previewed in a web browser.

287613 cover.indd

Professional Microsoft Office SharePoint Designer 2007

Woodrow W. Windischman, Bryan Phillips, Asif Rehmani

ISBN: 978-0-470-28761-3

 
Posted by Woody Windischman | 2 Comments | Trackback Url | Bookmark with:        
Tags: Administration, Customization, SharePoint Designer, Design

Comments

Sunday, 28 Feb 2010 10:08 by Ram
How do I change the current page size in Sharepoint Designer?

Sunday, 28 Feb 2010 03:20 by Woody
Hi Ram, If you are trying to force the size of the actual output page, that actually isn't a function of SharePoint Designer, because it isn't a capability of HTML. What you need to do instead, is set the size of elements within your page. For example, you can set the width of your body tag. This is usually accomplished with CSS (Cascading Style Sheets) which you can easily manipulate with SharePoint Designer. That wasn't the topic of this excerpt, though. It just covered how to force SPD to use different conditions to display the HTML you have created.

Name:
URL:
Email:
Comments: