Wiley Professional Microsoft Office SharePoint Designer 2007
Contents
1. eF height crer E Pag pi e hidefocus 2 id ca lang lt tri of language 7 onactivate 7 onbeforeactivate Pa onbeforecopy 7 onbeforecut 33 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 Page Editor Options General_ AutoThumbnail_ Default Fonts Code Formatting css Color Coding Authoring Picture Code Snippets RulerandGrid IntellSense FontFamiles The following settings are for the Code pane only Auto Popup FI CSS statement completion V ASP NET statement completion V Scripting statement completion F Script parameter information Auto Insert F Close tag V HTML attribute value quotes 7 XSLT attribute value quotes V ASP NET attribute value quotes F CSS selector closing brace Code Hyperlinks V Enable Code Hyperlinks for the following elements V CSS dasses and IDs Script functions Document hyperlinks cd V Figure 1 18 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 1 18 are the Authoring options that are available in a tab on the Page Editor Options dialog You can access th2. As you learn about the various tools at your disposal you will quickly feel at home in SharePoint Designer If you are new to the IDE experience you want to be aware of the need for development and design tools to manage projects consisting of many interrelated files Some commands operate on individual files and others work on a project as a whole This need will surface in a number of different ways For example examine the File menu shown in Figure 1 2 Notice that there are two options each for Open Close and Recent items Chapter 1 Exploring SharePoint Designer Eile i Edit View Insert Format _ New gt Open Ctrl O R gt Open Site Close Save Ctri S Save As Save All taD Import Preview in Browser gt Print gt Properties Recent Files gt Recent Sites gt X Exit 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 The plain Open and Close items as well as Recent Files Save and Save As are for working with individual component files within a site When you open an existing file type item the containing site if any al
3. Browser List The Edit Browser List dialog box appears as shown in Figure 1 13 f Edit Browser List k 8 x Browsers Use the checkboxes in the list to select the group of browsers that wil be launched when using Preview in Multiple Browsers M Ere id IV Windows Internet Explorer 7 0 aaa Additional window sizes i io g00 x 600 F 1024 x 768 Automatically save page before previewing Go bots Figure 1 13 2 Click the Add button The Add Browser dialog box appears see Figure 1 14 Add Browser apt Name Apple Safari 3 1 Command Figure 1 14 13 Part The Basics 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 rs _ em sm i G amp Program Files Safari gt v s Search P2 By Organize Sse Views v BB New Folder Name Date modif CFNetwork resources IE Documents 8 Recently Changed 287613 chiS Ml Desktop E Recent Places CoreFoundation resources Plugins PubSub resources Sefari resources SefanTheme resources pf Computer E Pictures IB Music p Searches Public Folders a Fie name Safariexe Figure 1 15 Type Size Program Files ex
4. 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 gt Macro gt Microsoft Script Editor or via the icon on the Code view toolbar It is considered an optional component of SharePoint Designer so upon first invocation you may see Setup run to install it The Script Editor starts with the current page from SharePoint Designer open in its HTML code view A link is maintained between the two environments so any change you make in the Script Editor is transferred to SharePoint Designer and vice versa In the Script Editor press F5 to launch Internet Explorer with the current state of your page without first saving it You can set breakpoints debug variables and do many of the other things you can do in other development environments Selecting which browser to use for preview in the Script Editor is independent of the configuration of the main SharePoint Designer application To make multiple browsers available you need to configure each via File gt Browse With The browser you set as the default is the one that F5 launches About the Script Editor One reason the Script Editor is an optional component is that SharePoint Designer is focused toward editing SharePoint sites and the editor doe
5. 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 Chapter 1 Exploring SharePoint Designer Mew Insert Format Jools Table Site Data View ajc None Default Font D 1 Windows Internet Explorer 7 0 F12 Wyo A 2 Windows Internet Explorer 7 0 640 x 480 He D 3 Windows Internet Explorer 7 0 800 x 600 D 4 Windows Internet Explorer 7 0 1024 x 768 ta 3 Mozilla Firefox 2 0 0 12 6 Mozilla Firefox 2 0 0 12 640 x 480 T Z Mozilla Firefox 2 0 0 12 800 x 600 es D 8 Mozilla Firefox 2 0 0 12 1024 x 768 Preview in Multiple Browsers 50 Preview in Multiple Browsers 640 x 480 51 Preview in Multiple Browsers 800 x 600 Preview in Multiple Browsers 1024 x 768 Edit Browser List 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 gt Edit
6. 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 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 To actually see scripts run you need to shell out of the primary SharePoint Designer environment There are two ways to do this One as you have seen is to use the Preview in Browser tool The disadvantage of this option is that you must save your page and all changes before invoking the preview The other way is to use the Microsoft Script Editor see Figure 1 22 G9 hittp pro spd Microsoft Script Editor design http pro spd ProSPD aspx File Edit View Debug Table Tools Window Help Hg 4 2B 9 c 8 B gt LVEF g i Rb as EES Mh Document Outline 2x 4 gt x Project Explorer http 2 X http pro spd ProSPD aspx am
7. as you are editing code are not visible in the Design pane right away You must act to indicate to SharePoint Designer that you are done with your edits such as by clicking in the Design pane or saving your file before the edits are reflected because while you are editing in the Code pane much of the time your markup may be in a transitional state that does not have a valid rendering By waiting until you explicitly select the Design view SharePoint Designer helps avoid the confusion that can result from page elements jumping all over the place as the rendering engine tries to make sense of the invalid markup Toolbars and Task Panes SharePoint Designer is a versatile powerful application Helping you control that power and versatility is the province of the toolbars and task panes SharePoint Designer proffers 11 toolbars not counting the menu and any custom toolbars you may create and no fewer than 24 task panes Each toolbar or task pane controls a related set of functions Earlier in the chapter you were introduced to the Layout Tables task pane and the Common toolbar The following sections briefly discuss these as well as the other various toolbars and task panes and how to manage them 21 Part 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 E
8. help Zp A E 0 E Folder List Cal o x d hittp dlroy sites showmanacgement i E cans d sstalgs AA New Style Options A Attach Style Sheet sites showmanagement _catalogs masterpage defaultmaster 9 400 459 590 60c EAR A A 620 p cts J private aj Enty Photos E Jy images J Lists aim G default aspx Ganis entries xsl SiteMapDataSource topSiteMap L Fonaments SiteMapDataSource QuickLaunchSiteMap Pictures Entry Photos Documents Lists Breeds Entries Judges Breeders 3 8 Canis Equuis Exposition Management 34 SPProxyWebPartManager ProxyWebPartManager TSR Select CSS style to apply Gear Styles LE core css lt SharePoint csshi ms alphaimage ms alignleft ms alignright ms toolbar ms viewtoolbar SI In Show Yes 42 IJ Group Herding 6 Group Hound 6 IJ Group Nonsporting 7 EE Inine Frame Player M Paragraph E Form Controls E Group Terrier 4 Group Toy 8 Group Working 11 5 Advanced Button Figure 1 5 To keep your workspace uncluttered you can enable or disable specific types of Visual Aids either by selecting View gt 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 a
9. make it an ideal all around web design tool Q SharePoint Designer s user interface is very flexible and can be adapted to almost anyone s work style Q How to access the Microsoft Script Editor a powerful code debugging environment The next few chapters take you on a walk through a SharePoint site as seen from several different perspectives by a user through the web by a site owner administrator both on the web and on the file server and by you via SharePoint Designer Along the way you will pick up valuable insight and tips on what to change for your customizations and how as well as a few things that might be better left alone
10. 0 4 459 500 60 m pa Feel zeal fi 1 EATR EATR E AA EA aal TE M al i 2 Kiroy gt Canis Equuis Exposition Management Jd private 4 2 7 m Gal Entry Photos E 3 Canis Equuis Exposition Management J images FE Canis d sts PlaceHolderMain Custom aim View All Site Content OG default aspx The worlds greatest dog and pany show GP enties xsl Breeds Group g Tite Subgroup a ta Shee Ye ms toolbar 4 w Group Herding 6 i A ms l Tag Properties ox Group Hound 6 ms viewtoolbar Tag Properties f B Group Nonsporting 7 2 B lt asp Content gt El Behavior ContentPlace PlaceHolderMain f El Misc ID B Group Terrier 4 Group Toy 8 B Group Working 11 3 In Show No 155 Group Herding 34 Group Hound 29 B Group Nonsporting 11 A Grew Terrier 20 m Figure 1 7 Table Editing Tools SharePoint Designer Design view supports traditional HTML tables in two different ways each with a slightly different toolset Q Standard tables are traditional grids of rows and columns along with tools for merging and splitting cells inserting rows and so on for the presentation of tabular information Q Layout tables are of interest to web designers because tables have historically been used as a layout tool for HTML pages SharePoint Designer s layout tables
11. 1 3 The Page Editor has the following elements see Figure 1 3 Q Tab bar Across the top of the Page Editor is a tab bar which gives access to each file that is currently open in SharePoint Designer Files that have been modified since being opened or last saved are indicated with an asterisk The leftmost tab Web Site gives access to the site structural views described later in this chapter Chapter 1 Exploring SharePoint Designer Q 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 In addition each tag in the Selector provides a context menu as shown in Figure 1 4 allowing you to quickly adjust the parameters of the tag create a containing tag or even remove the tag without removing any child controls Q Status bar The status bar tells you all about your page design experience but like the Quick Tag Selector the status bar is also your active partner in the editing process In addition to being context sensitive the set of elements displayed on the status bar is dependent upon the current selection many status segments also provide the option to edit the setting they are reporting Q Page Mode toolbar Selects which of the three editing
12. Part The Basics Chapter 1 Exploring SharePoint Designer Chapter 2 SharePoint from the User s Perspective Chapter 3 SharePoint from the Administrator s Perspective 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 Q How SharePoint Designer fits in Microsoft s toolset Q SharePoint Designer s basic editing features Q SharePoint navigation It also provides an overview of site administration tools SharePoint Designer as a Web Editor SharePoint Designer is a descendant of Microsoft FrontPage and a close relative of Expression Web Microsoft s dedicated Web design tool In fact SharePoint Designer provides a true superset of Expression Web functionality and therefore makes an excellent all around tool for Web design In addition to the SharePoint related features SharePoint Designer includes more features for backward compatibility with existing FrontPage based sites than are a part of Expression Web 1 0 For the 2007 Microsoft Office System Microsoft has replaced many of the traditional user interface elements in several client applicat
13. ditor 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 The possible docking positions are the four edges of the SharePoint Designer window above below right and left of the design surface which is always visible Figure 1 24 shows toolbars and task panes in many of their possible visible states Menu bar and toolbars docked at top of window Floating toolbar Formatting toolbar s fly out menu sy Untitled 1 http pro spd ProSPD a px Microsoft Office SharePoint Designer lo G Ps File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help Type a question for helg y 2 A A l None gt Default Font Default Size 2 9 BF UJ es z http pro spd execom _private themes images Lists ji m 5 a Managemen E SJ Shared Do Cy Workfiows r GA default asp Welcome to Professional SharePoint Designer AQ drect css 1 SharePoint Designer is amazing A indirect css L ProSPD asox 3 Thisisa Regular Table This is test Why are we here Pictures 2 390px gt Tag Properties Thisisa Header Zone layout table Navigation Body Text goes here Visual Aids On Style Application Auto 1 56 KB Quirks 588x330 166 CSS21 Cohabit
14. e width 1008 gt E gi private 9 lt tdoThis is a lt td gt break H d themes 2 lt egular Table lt td gt E Horizontal Line m d mages 21 lt tr gt E 3 lists 22 er gt a Image a Be 23 lt td gt sndsp lt td gt HE Inine Frame F 4 lt td gt This is vest lt td gt Eila B 5 Management Documents 25 lt tr gt 1 ayer Eil Shared Documents 261ble gt MT Paragraph H Workflows 3 Form Controls a dekka igs Advanced Button A drect css EE Drop Down Box A indrect css a De ProsPO aspx j Welcome to Professional SharePoint Designer Form SharePoint Designer is amazing Group 80x a tabl Tag Properties 4 EI Apply Styles ox Tag Properties Css Properties x 4 This is a Regular Table Apply Styles Manage Styles Bx 3 x HE This is test 7 PE ah or a4 A New Style Options lt tr gt E Attributes A Attach Style Sheet Select CSS style to apply GF accesskey a Thisisa Header Zone ae E layout table Clear Styles ri bgcolor F indirect css i borderc Navigation Body Text goes here E drect cos a bordere zing pa borderc j a choff s7 dass A content EE af dir ia a 44 heioht Sdesion Eispit Elcode lt u Visual Aids On Style Application Auto 154KB Quirks 588x387 IE6 CSS21 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
15. e com v took gt 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 Code View Although the SharePoint Designer Design view provides an easy and powerful way to create lay out and edit the pages of your site at the end of the day these pages remain what they have always been plaintext HTML and script Fortunately SharePoint Designer is just as adept at helping you work with code as it is with page design Figure 1 16 shows the same page you have seen in the prior shots in SharePoint Designer s Code view 14 Chapter 1 Exploring SharePoint Designer B Untitled 1 http pro spd ProSPD aspx Microsoft Office SharePoint Designer File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help iD Er DQ None Default Font gt Default Size J http fpro spd G execom a d _catalogs p cts Private I themes J images Ji lists im 3 Management Documents E Ll Shared Documents m Cy Workflows f defauit aspx drect css Aj indrect css e width 100 gt lt tdoThis is a lt td gt lt td gt Regular Table lt td gt lt tr gt lt tr gt lt tr gt lt table gt pap a L accesskey g align L atomics a content cae dir arid gF lang g language c nowrap Header Zone lt td gt lt tr gt text html charset utf 8 gt indirect cs3 gt gF hidefocus T
16. et lt td gt E Attributes a Thisisa Header Zone TENERA ERTS a style height 6 1px layout table ce valign top Cex Styles A abbr ce Er d A a accesskey Navigation Body Text goes here LA en pee S align direct css zo k ca axis F oger or bgcolor L borderc Inline Style if borderc SF borderc Inline Style Sh gt j Visual Aids On Style Application Auto 156KB Quirks 588x413 IE6 CSS21 Figure 1 25 23 Part 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 gt Toolbars You can also show and hide individual task panes by selecting them from the Task Panes menu Toolbars In general toolbars provide quick access to functions that are also available in other places in SharePoint Designer but may be buried deep in a menu tree or dialog box By default SharePoint Designer shows the Menu which itself is a special toolbar and the Common toolbar The following table briefly describes each of the toolbars that come with SharePoint Designer The actual functions contained therein are described in detail as appropriate throughout the book Toolbar Description Standard A basic toolbar containing an array of features except formatting F
17. hi table lt td gt cap style it tahindex Visual Aids On Style Application Manual 153KB Quirks 1 CSS21 E Horizontal Line lal Image HE Inine Frame fii Layer 7 Paragraph Form Controls igs Advanced Button E Drop Down Box ii Form Group Box Apply Styles AA New Style A Attach Style Sheet Select CSS style to apply Clear Styles E indirect css E drect css 2 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 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 Automatic tag and brace closure CSS statement completion Automatic code hyperlinks Oooo do Programming code completion Parameter selection as shown in Figure 1 17 15 Part The Basics tyles width 100 gt lt td gt This is a lt td gt
18. 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 lt body gt lt div gt lt table gt lt tr gt lt td gt mg 5D Ra z5 755 300 750 55 z5 PD PO R APO Ne ARRA E A F AA i Thisisa Regular Table div _ 372 This is a FE 61 Jayout table 61 Navigation Body Text goes here 390 390 gt on 7a ont EE CiDesign B Split code lt Figure 1 10 The Layout Tables task pane shows many of the options available with a layout table including several predefined common page layouts If you have content in a table based on one of these layouts and later decide to change to a different layout the content is moved to the corresponding cell in the new layout Page Sizes and Browser Preview 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 11 Part The Basics 12 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 588 x 579 Curre
19. ing task Task pane docked panes between sides Figure 1 24 22 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 Multiple toolbars can occupy the same level If a toolbar docked on a given level cannot fit in its allocated area the items in the bar are hidden and added to a fly out menu as shown in the upper right corner of Figure 1 24 Floating toolbars such as the Pictures toolbar in the figure always show all of their available items but will rearrange them as needed to fit a resized window All task panes in a docking region are arrayed along the edge of the region inside any toolbars In addition you can place multiple task panes in the same space These cohabiting task panes are selectable via tabs in that space as are the Tag Properties and CSS Properties task panes in the figure You can maximize a task pane to take up its entire docking zone and restore it to its former size After showing hiding and moving task panes around extensively you may find it difficult to locate a particular item SharePoint Designe
20. ions such as Microsoft Word with what it calls the fluent user interface the most noticeable feature of which is a tabbed mega toolbar called the Ribbon Microsoft has not done this in SharePoint Designer 2007 which sports menus toolbars and so on in all of their historical profusion See Figure 1 1 Part The Basics B Untitled 1 http pro spd ProSPDaspx Microsoft Office SharePoint Designer lt l Homa File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help D Pye D None Default Font Default Size BZU JE http pro spd execom _catalogs acts private di _themes images d lists pm E Management Documents m D3 Shared Documents TT Paragraph m G Workflows Form Controls fid default aspx Eag Advanced Button B direct css m A indirect css Drop Down Box L ProSPO aspx Horizontal Line Li Imace iz Inline Frame fi Layer Tag Properties Ox Tag Properties A Attach Style Sheet Select CSS style to apply Clear Styles indirect css direct css e content a dr g hidefocus eid i l an For Help press F1 Visual Aids On 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
21. is dialog either by clicking one of the authoring mode indicators such as Quirks IE6 or CSS 2 1 on the right side of the status bar or by selecting Tools gt Page Editor Options Another handy shortcut offered by Code view is code snippets SharePoint Designer includes snippets for such things as HTML document types script blocks and style sheet links You can insert a snippet by 16 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 Copy the code you want to include in the snippet to the Clipboard 2 Press Ctrl Enter Select the first item on the list Customize List which opens the Code Snippets tab see Figure 1 19 of the Page Editor Options dialog You can also summon this dialog by selecting Tools gt Page Editor Options and picking the Code Snippets tab Page Editor Options k 8 General_ AutoThumbnail_ Default Fonts Code Formatting Css Color Coding Authoring Picture Code Snippets Ruler and Grid IntellSense FontFamiles Use Code Snippets to insert frequently entered text in the Code pane by pressing CTRL ENTER followed by one of the keywords specified below Keyword Description dt4f HTML 4 01 F
22. ished HTML Local Web site http pro spd Remote Web site C WUsers WoodyW Documents My A i X Am xXx Name Status Modified Name Status Modified catalogs 2 MSNBC com Unmatch 3 26 2008 1 46 P cts private themes a execom images Lists m 8l Managemen LEl Shared Docu i t Workflows gt ff default aspx Unmatch 3 17 2008 10 20 A direct css Unmatch 3 23 2008 4 15 P Aj indirect css Unmatch 3 23 2008 3 52 P gt ProSPD espx Unmatch 3 26 2008 2 37 P 4 m 4 m Status Publish all changed pages Last publish status unknown Local to remote Completed at Kad Remote to local View your Remote Web site amp O synchronize Open your Remote Web site in SharePoint Designer Stop GFolders Remote Web Site BReports deNavigation B Hyperlinks 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 This function does not work for data stored in SharePoint Lists and Libraries Reporting Tools In addition to the Accessibility Compatibility and CSS report
23. lipboard A tree view of the files and folders in your site shown by default Management of menu hierarchies All parameters and properties available for the current HTML tag shown by default All the available CSS Properties for the current item shown by default Controls for configuring tables specially designed to help lay out web pages The style classes currently defined and available and tools to add more shown by default Defines new styles and arranges where they are stored css which file in page and so on shown by default Sets actions to perform on events for various page elements Creates and manages layers Quick access to the elements that you can place on a page shown by default Data sources available for use on pages Shows the schema and data from a data source allows drag and drop onto a page Changes the way data is presented based on conditions set by the page designer Results from a find operation Results from a find operation Reports on design issues that may cause problems for people with limited vision Reports on design issues that may cause problems with particular browsers and standards Reports on the status of hyperlinks used on the site Shows styles in use style sheet files and references to styles that do not exist Allows search and selection of images from various sources Shows a history of items clipped in various Office applications A
24. lthough these task panes are available on non SharePoint sites on those sites they manipulate different objects behind the scenes than they would on a SharePoint site The Clip Art and Clipboard task panes behave like toolbars in the way they dock Only one of them may be visible at a time and you can toggle between them with a menu in the task pane title bar 25 Part 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 This task pane is shared with the Clip Art and Clipboard panes and behaves in the same fashion Web Site Structural Views When you don t have a file open in the Page Editor the design surface shows a variety of structural views of your web site These are also available by clicking the Web Site tab in the design surface when you have files open Files and Folders Like the Folder List task pane the Folders web site view shows the files and folders currently in the web site If the Folder List task pane is shown the Folders view shows the contents of the currently
25. make table based page layout much easier SharePoint Designer also fully supports the use of CSS for page layout as you ll see in chapter 6 Part The Basics Standard tables can be inserted two ways Q Select Table gt 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 Insert Table Size Rows al Coms 2 Layout Alignment Default m V Specify width Float Defauit z 100 Drm p In percent Cell padding 1 E Specify height x ons In pixels Cell spacing 2 lal lo A ae In percent Borders Size o 4 Color X F Collapse table border Background Color Automatic X Use background picture a 7 Properties Layout Tools E Enable layout tools Set Set as default for new tables Figure 1 8 Q 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 i Seesnennn 10 by 8 Table Figure 1 9 10 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
26. might navigate around your site is through the Web Site Hyperlinks view as shown in Figure 1 30 30 Chapter 1 Exploring SharePoint Designer Gai Web Site Hyperlinks for default aspx _catalogs users 3_ 000 EA _catalogs users 4_ 000 Ce _catalogs users 5_ 000 _ a ___ gt E masterurl default master ProSPD aspx Ej Folders Remote Web Site BReports doNavigation B Hyperlinks 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 On a SharePoint site most links are generated by the server at run time and therefore they will not reflect in the Hyperlinks view On non SharePoint sites changes to the navigation structure embed links directly into the pages at design time and therefore do appear 31 Part The Basics Summary 32 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 Q SharePoint Designer is not just for SharePoint It incorporates a wide variety of features that
27. modes to display lt div gt lt div gt Select Tag Select Tag Contents Edit Tag Remove Tag Insert HTML Wrap Tag Positioning gt Iag Properties Figure 1 4 Design View The Design view offers a what you see is what you get WYSIWYG editing experience It supports many traditional GUI document editing functions Q Fonts styles and item placements in the Design view map very closely to the final page rendering Q It allows you to drag and drop Q You can copy cut and paste Design view also supports the use of the Ruler and Grid with and without snap to options typically found in graphics and page layout programs In addition there is a wide array of specialty tools provided to improve your design experience Some of them such as Visual Aids and Table Tools are described in this chapter while others are covered later in the book for instance the CSS editing features are discussed in chapter 6 The following sections discuss some of the features of the Design view Visual Aids 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 1 5 shows a page with all Visual Aids enabled Part l The Basics WE Fite Edit View 21 BF kd A l None Type a question for
28. nd off by double clicking the Visual Aids segment View Inset Format Tools Table Site DataView Task Panes Figure 1 6 Page Defaut Font Default Visual Aids gt ZF Show Ctrle Formatting Marks gt Block Selection Ruler and Grid gt E Visible Borders Tracing Image gt S Empty Containers Page Size gt if Margins and Padding E Folder List Alt F1 CSS Display none Elements B Navigation Pane CSS Visibility hidden Elements w Quick Tag Selector ASP NET Non visual Controls Toolbars p ASP NET Control Errors Refresh F5 Template Region Labels 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 Visual Aids only appear in the Design and Split views although the setting is displayed in the status bar and configurable in Code view 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 i File iDO e H A None d htip Milroy sites showmanagemeni i i sites showmanagement _catelogs masterpage defaultmaster catalogs HE Fa 100 18 22 250 399 35
29. nt Page Size 1536x196 640 x 480 Default 2 600 x 300 640 x 480 Maximized 3760 x 420 800 x 600 Maximized 4795 x470 832 x624 Maximized 5955x600 1024 x768 Maximized Modify Page Sizes Visual Aids On Style Application Manual 1 53KB8 Quirks t 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 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 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
30. 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 manually enter or edit the formatting tags in code 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 1 21 shows that the toolbar formatting bold italic and underline is available while you are editing in Code view In fact they are fully active and interactive with your HTML Tools Table Site DataView TaskPanes Window Help Default Font Default Size BHU Z gt Welcome to Professional SharePoint Designer lt div gt m gt SharePoint Designer lt em gt is amazing lt div gt lt m gt Figure 1 21 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 notice that the state of the toolbar icons follows the current HTML In Figure1 21 the highlighted text is inside an lt em gt 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
31. ormatting Contains selectors for fonts sizes styles and so on Code View Assists with formatting items in SharePoint Designer s Code view Common A single toolbar containing the most frequently used elements from both the Standard and Formatting toolbars shown by default in SharePoint Designer Dynamic Web Template For managing the editable regions of Dynamic Web Templates DWT files Master Page For managing the content regions of NET Master Pages Pictures For manipulating the properties of images included on a web page Positioning For adjusting the positions of items with the absolute position style such as layers Style For managing the style of a selected item or attaching a style sheet to a page Style Application For controlling how styles are applied by SharePoint Designer Tables Assists with table manipulation General Purpose Task Panes Most task panes in SharePoint Designer are useful in web editing regardless of whether you are editing a SharePoint site The following table briefly describes these general purpose task panes 24 Chapter 1 Exploring SharePoint Designer Task Pane Description Folder List Navigation Tag Properties CSS Properties Layout Tables Apply Styles Manage Styles Behaviors Layers Toolbox Data Source Library Data Source Details Conditional Formatting Find 1 Find 2 Accessibility Compatibility Hyperlinks CSS Reports Clip Art C
32. p Cient Objects amp Events No Events z am x E i p 5 pro By http pro spd ProSPD aspx lt 8 Page Eanguage c a gt http pro spd amp lt 80DY gt lt html diz 1tr gt a http pro spd ProSP amp B form1 lt head te server gt lt base http pro spd ProSPD aspx fptype TRUE gt lt META WebPart PageExpansion full gt lt meta equiv Content Type co text html charsetwutf 8 gt lt title gt Untitled 1 lt title gt rel stylesheet type text css href indirect css gt ead gt formi runat server gt lt div gt lt div zing gt Welcome to Professional SharePoint Designer lt div gt lt div gt lt em gt SharePoint Designer lt em gt is amazing lt div gt lt div gt m G E lt TABLE gt Be ee ere Properties 2 x G E lt TR gt lt tr gt DOCUMENT x f lt TD gt lt td gt This is a lt td gt o gt 5 lt TD gt lt td gt Regular Table lt td gt tej lt TR gt lt tr gt Custom a S lt TD gt lt tr gt aLink i lt TD gt lt td gt aspCompat test za gt background bgColor E bgProperties text align center gt bottomMargin rder 0 r yle width 450px h buffer True lt MSTableTy charset Unicode UTF lt tr gt clientTaraet____ E er wal z bgColor s 2l Document background color S Toolbox E Document B Design amp HTML L Ready Ln 25 Col 26 Ch 20 INS Figure 1 22 19 Part The Basics
33. r offers a quick way to reset the task panes to a known state Select Task Panes gt Reset Workspace Layout The task panes return to the state shown in Figure 1 25 i J 7 amp Untitled 1 http pro spd ProSPD aspx Microsoft Office SharePoint Designer Loin e File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help pe o ye i ea A 0 2 yelp Ap E Gr D None Default Font Default Size gt O BZU 33 Folder List 4 _ O X Web Site Prospp aspx x Toolbox ox ji htto pro spd lt body gt lt div gt lt table gt lt tr gt lt td gt pene i execom amp Tags Ja a E catalogs s pe cad Raks 7 Header Zone td gt lt tr gt EE lt span gt E private lt tr gt Y Break os hemes Horizontal Line ma soe lal Image 5 S ans m i Pictures EH Inline Frame a 3 Management Doa i 4 Layer L Shared Documents 5 ST Paragraph a wi E Workflows E Form Controls G3 default aspx E Advanced Button t F rn r st z Welcome to Professional SharePoint Designer E Drop Down Box rect css J 1 o 3 nol B ProsPo aspx j SharePoint Designer is amazing c1 Form J __ Group Box 3 This isa Regular Table ss Apply Styles ox This is test Why are we here po Apply Styles Manage Styles x AA New Style Options A Attach Style She
34. rameset DOCTYPE ali dtds HTML 4 01 Strict DOCTYPE 7 dt4t HTML 4 01 Transitional DOCTYPE dtx11 XHTML 1 1 DOCTYPE dtxif XHTML 1 0 Frameset DOCTYPE dtxis XHTML 1 0 Strict DOCTYPE dtxit XHTML 1 0 Transitional DOCTYPE zed lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Frameset EN http www w3 org TR htn m nii Cei Beno Figure 1 19 3 Click Add to summon the Add Code Snippet dialog see Figure 1 20 Add Code Snippet L Keyword Description rollover Rollover Event Handler Text Use a single pipe character to mark the caret position after insertion Add a second pipe character to create a selection that comprises everything between the pipes lt script language javascript gt WPSC RegsterForEvent urn prospd searchrolover setPreview WPO function setPreview_WPQ_ showurl previewPane_WPQ_ location showurl lt script gt Figure 1 20 17 Part The Basics 4 Enter appropriate information in the Keyword and Description fields 5 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 6 Specify insertion points and or selection by using the pipe character if needed 7 Click OK to save and close each dialog Visual Coding 18 In the past you might have gone back and forth between an application s Design and Code views depending
35. s not work effectively on live SharePoint Web Part Pages It remains extremely useful however for debugging client side scripts before inserting them into a SharePoint page chapter 13 provides some tips to this effect as well as workarounds for Web Part Pages and for working on non SharePoint sites The online help for the Script Editor contains very useful references for JavaScript and VBScript languages Finally the script editor can be used as the editing environment for InfoPath forms Split View 20 The Split view of the Page Editor provides all of the advantages of both Design and Code view Each half of the view behaves exactly like its dedicated view Code view for example gives you IntelliSense while Design view maintains rulers and any page sizes you have set In Figure 1 23 a table row has been selected from the Quick Tag Selector Notice the highlighting in both the Code and Design panes of the Split view Chapter 1 Exploring SharePoint Designer fz Untitled 1 http pro spd ProSPD aspx Microsoft Office SharePoint Designer 2 8 File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help 1 gt G Ao None Default Font Default Size B FUE za Folder List 4 0 x Gii Web Ste ProspD aspx J http foro spd lt lt body gt lt table gt lt tr gt lt td gt E execom E catalogs 6 les h 1008 gt i ps
36. selected folder in the task pane as shown in Figure 1 26 26 Chapter 1 Exploring SharePoint Designer hitp pro spd Microsoft Office SharePoint Designer File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help ERTE http fpro spd G execom m J _satalogs itie Modified Date J ets EE New Task aspx Workflows Success New 3 19 2008 11 29 AM J private EE success aspx Workflows Success Succ 3 19 2008 11 26 AM J _themes A Success xomi Work ows Success Succ 3 19 2008 11 29 AM 4 8 J images ta Success xoml wf Success xoml wfconfig xml 3 19 2008 11 29 AM Horizontal Line Lists Image m 3 Management Documents Layer 3 Shared Documents 4 Paragraph Cy Workflows Re Advanced Button A ram A A drect css A indrect css m pap BaB E inline Frame Tees E Form Controls Tag Properties ox Tag Properties CSS Properties X i Select CSS style to apply Folders Remote web Site BReports 3 Navigaton amp Hyperinks 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 27 Part The Basics Web Site View Folder Contents X Remote Web Site Properties 3 Optimize Publ
37. so opens With SharePoint Designer you are usually working against a live though not necessarily production environment When combined with the duality described above this has the result that certain changes have immediate effect while others aren t visible unless or until you save the component you are working on In general changes to overall site structure such as renaming deleting or moving a file are immediate while you need to save changes within a page or graphic file to see them on the site In a source controlled or content managed environment your file s may need to go through a check in and approval process before certain changes become visible The major elements of the SharePoint Designer workspace include the menu various toolbars the design surface usually containing the Page Editor the status bar and a wide array of task panes The workspace is quite customizable Other than the design surface which will resize itself based upon the remaining available space virtually every workspace component can be resized shown hidden set to float or docked Menu and toolbar items can be added or removed The menu bar cannot be hidden but it can float and be dragged offstage like toolbars and task panes The rest of this chapter describes these workspace elements in detail Part The Basics Page Editor The Page Editor in SharePoint Designer is the design surface where you compose the elements of your page I
38. t 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 All three views are available for web page file types htm aspx and master for example Files suchas css js and txt that do not have a direct visual component only have Code view and do not display the Page Mode toolbar Figure 1 3 shows the Page Editor in Design view with the menu and all of the toolbars and task panes removed This can be accomplished either by closing or floating each item and dragging the floated items someplace unobtrusive This is sometimes referred to as dragging the element offstage What remain are the design surface itself and the status bar r Quick Tag Selector Tab bar j E Untitled 1 http pro spd ProSPD aspx Microsoft Office SharePoint Designer kc to xe aj Web Site Prospo aspx direct css N lt body gt lt formform1 gt lt div gt lt dv gt Welcome to Professional SharePoint Designer SharePoint Designer is amazing GDesign E Split Hcode lt r or Help press F1 Visual Aids On Style Application Manual 736 bytes Quirks 696x256 IEG CSS21 Status bar Page Mode toolbar Figure
39. task panes SharePoint Designer offers a wide array of Web Site reports Figure 1 28 Shows the Site Summary report which itself offers links into many of the other reports available 28 Web Site Chapter 1 Exploring SharePoint Designer Site Summary fed Unlinked files lab Linked files LD slow pages Tay Older files PyRecentty added files Di checked out fies Hyperlinks Unverifi Broken hyperlinks Count EE 98 d m 94 Sxou ne ei BBokno 448 Description Hits and download bytes for the period from 3 17 2008 to 3 25 2008 Al files in the current Web site Picture fies in the current Web site GIF IPG BMP etc Fies in the current Web site that cannot be reached by starting from Fies in the current Web site that can be reached by starting from you Pages in the current Web site exceeding an estimated download time Files in the current Web site that have not been modified in over 72 di Fies in the current Web site that have been created in the last 30 da Fies in Web site that are currently checked out Al hyperlinks in the current Web site Hyperlinks pointing to unconfirmed target files Hyperlinks pointing to unavailable target files Hyperlinks pointing to files outside of the current Web site Hyperlinks pointing to other files within the current Web site Fies in the current Web site with components reporting an error Al Style Sheet Links in the current web ste Al files that are associa
40. ted with a Dynamic Web Template Al files that are associated with a Master Page Fies from the SharePoint site definition that have been customized Figure 1 28 ni Golders Remote Web Site BReports doNavigation B Hyperlinks 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 Navigation and Hyperlinks The Navigation Web Site view Figure 1 29 shows the same tree as the Navigation task pane In the case of a SharePoint site they show the links used for the Quick Launch and Top level tab menus 29 Part The Basics i Quick Launch I I 1 z T Documents Usts Discussions Sites People an e_ e Shared D Managem Calendar Tasks Team Disc Executive Folders Remote Web Site BReports deNavigation B Hyperlinks 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
Download Pdf Manuals
Related Search