Note SharePoint Designer 2010 connects only to SharePoint 2010. To connect to sites based on Office SharePoint Server 2007 or earlier versions, you must use SharePoint Designer 2007. If you install SharePoint Designer 2007 and SharePoint Designer 2010 side by side, you must download the 32-bit version of SharePoint Designer 2010. Sharepoint designer consider as a part of the office family so that its version should match with other installed office products. In your case you have 64 bit of Windows and 32 bit of office so you need 32 bit of designer. Now either reinstall the office with 64 bit or install the sharepoint designer with 32 bit. Download sharepoint designer 32 bit for free. Development Tools downloads - Microsoft SharePoint Designer 2010 by Microsoft and many more programs are available for instant and free download. Mar 26, 2016 - Microsoft SharePoint Designer 2010 (32-bit) download free! Download Click to download.
Internet Explorer 32-bit DownloadIn this exercise, you create an ASP.NET page. SET UP Using SharePoint Designer, open the team site you used in the previous exercise if it is not already open.1. In the Navigation pane, click Site Pages. On the Pages tab, click Page and then click ASPX. A file, Untitled-1.aspx, is created and displayed in the Site Pages gallery page. Untitled 1.aspx is selected. 2. Type OfficeFurniture.aspx, and then press Enter to rename the page. 3. On the Pages tab, click Edit File. Edi Fi e A dialog box opens, warning that the page does not contain any regions that are editable in safe mode. 4. Click Yes to open OfficeFurniture.aspx page in advanced mode. A blue-bordered rectangle with the label form#form1 is displayed in Design view. 5. On the workspace status bar, click Split. Sp i Microsoft Sharepoint Designer 2010 (32-bit) DownloadIn Code view of the page, the HTML and tags are surrounded by tags. The tags contain tag.7. Select Oak Furniture, and on the Home tab, click Center. Cen er SharePoint Designer creates a new class-based style in the current page, named .style1, and associates it with the
tag. This new tag appears in the Apply Styles and CSS Properties task panes. Izotope rx pro tools 11. The Current Page heading is lower in the Apply Styles task pane, indicating that the styles defined on the current page are applied after styles in the MyStyles.css file. Tip If a class style is not created, verify that the CSS tab of the Page Editor Options dialog box is set to Auto Style Application.
352 Chapter 10 Branding SharePoint Sites 8. Place the insertion point on the line below Oak Furniture (outside the ![]()
tag), and then type Office Furniture.
The text is placed inside a
tag, and the tag is associated with the style1 class. Tip You can remove styles from an element by selecting the element and then clicking Clear Styles on the Apply Styles task pane.
9. Select Office Furniture, and then on the Home tab, and click Align Text Right. Quickbooks for mac reinstall download. A ign Tex Righ SharePoint Designer creates a new class-based style, .style2. Tip You can create a new style by using an existing style as its basis. In the Apply Styles task pane, right-click the style you want to use as the basis of the new style, and then click New Style Copy. 10. Click Office Furniture, and then in the Apply Styles task pane, click .style1 to revert the Download Sharepoint 2010 Designer 32 Bit
tag to .style1. The class-based style .style2 is deleted from the current page.
11. In the Apply Styles task pane, point to .style1, click the arrow that appears, and then click Modify Style. The Modify Style dialog box opens. Tip Notice that the Block category is bold. Click that category, and you will see that text alignment is set to Center. Using the Style Application Group Commands 353 12. Under Category, click Border. Under border-style, in the top list, click double. Free reflector download for mac. Click OK to apply the style and close the Modify Style dialog box. The two
tags are now surrounded by a double-line border.
13. In Code view, hold down the CTRL key and click style1. Adobe reader installer download for mac. Code view displays the .style1 rule enclosed in a <style> tag in the portion of the page. 14. Right-click the MyPage.aspx tab, and then click Save. If the Save Embedded Files dialog box opens, click OK. CLEAN UP Leave SharePoint Designer open if you are continuing to the next exercise. Using the Style Application Group Commands On the Style tab, the Style Application group of commands provides quick access to components you often use. By using the Page Editor Options dialog box, you can configure SharePoint Designer to automatically create styles on your behalf (auto mode), or you can configure SharePoint Designer to allow you to manually create styles (manual mode). If you are comfortable working with CSS, you might find that staying in auto mode or manual mode all the time does not suit you. In this situation, commands in the Style Application group can come in handy. 354 Chapter 10 Branding SharePoint Sites Use the Mode list to switch between auto and manual mode, which provides you with control over how styles are generated. When you are in manual mode, the other commands in the Style Application group become active. The Target Rule list allows you to quickly apply styles you have already created. By default, the style that has the highest precedence is targeted. The Target Rule list can also be used to modify a particular style or create a style for the selected element. You can choose to create CSS properties on the style attribute of the selected element (Inline Style) or allow SharePoint Designer to generate a new style class (New Auto Class). Tip The SharePoint Designer status bar indicates whether you are editing a page in Style Application auto or manual mode. You can change modes or open the CSS tab in the Page Editor Options dialog box by right-clicking Style Application in the status bar. In this exercise, you use the Style Application group of commands. SET UP Using SharePoint Designer, open the team site you used in the previous exercise if it is not already open, and display MyPage.aspx in Split view. 1. In the Design view portion of the workspace, place the insertion point on the line below Office Furniture (outside the Download Microsoft Office Sharepoint Designer
tag), and then type Garden Furniture.
2. On the Style tab, in the Mode list, select Manual, and in the Target Rule list select New Inline Style. In the Style Application group, the Show Overlay button, the Target Rule list, and the Reuse Properties button are active. The SharePoint Designer status bar displays Manual. 3. On the Home tab, click the arrow to the right of Font Color, and click Red. Fon Co or In Code view, the color property, with a value of #FF0000, is added to the style attribute on the ![]() Sharepoint Designer 2010 Sp1 32 Bit Download
tag.
Using the Style Application Group Commands 355 4. Press CTRL+Z to undo the last edit. On the Style tab, in the Target Rule list, select New Auto Class. On the Home tab, click the arrow to the right of Font Color, and click Red. In Design view, the label for the
tag is p.style1 style2. In Code view, you can see a new class, .style2, applied to the
tag that surrounds the text Garden Furniture.
5. Press CTRL+Z to undo the last edit. On the Style tab, in the Target Rule list, select Apply New Style. The New Style dialog box opens with Font selected under Category. 6. Delete .newStyle1, and then type .red. With Font selected under Category, select Red in the color list. 7. Click Apply, and then click OK to close the New Style dialog box. The text Garden Furniture is colored red and justified to the left with no border. The classes .style1 and .style 2 are no longer applied to the text. The label for the Sharepoint 2010 Designer 64 Bit
tag is p.red, and in Code view, the class value is now set to red.
8. Right-click the MyPage.aspx tab, and then click Save. CLEAN UP Close MyPage.aspx and MyStyles.css. Leave SharePoint Designer open if you are continuing to the next exercise. 356 Chapter 10 Branding SharePoint Sites Understanding SharePoint’s CSS Inheritance As with many other files you have worked with in this book, corev4.css and the other style sheets live in the root directory on each Web server. If you modify and save them with SharePoint Designer, you create customized pages. Child sites do not inherit styles from a customized version of corev4.css. They will still point to the uncustomized page in the root directory. If you customize corev4.css on a number of sites, each site will have its own copy of the file. If the version of corev4.css in the root directory is changed and distributed to the Web server(s), those changes do not affect your sites. See Also For more information about the root directory, see Chapter 1. When you need all the sites in a site collection to have the same branding, breaking the link to the uncustomized corev4.css file can be a major problem. It’s a best practice to not change corev4.css or any of the other built-in style sheets by using SharePoint Designer or any other product. To use SharePoint Designer to customize one site, you should make a copy of the styles in corev4.css that you want to amend. Then place those styles in a master page surrounded by <style> tags, or place them in your own style sheet. You might need to consult with a developer to obtain a greater understanding of the inheritance structure of all the styles in all the style sheets that both SharePoint Foundation and SharePoint Server use. If your aim is to brand more than one site, SharePoint has a mechanism for attaching an alternative style sheet that can be used on multiple sites. Styles defined in this file are always applied after the styles in corev4.css, whether or not you customize corev4.css. SharePoint Server exposes a method of assigning alternate style sheets by using the browser. SharePoint Foundation does not. There are also other methods of applying your custom styles. Add themes to this discussion and the ability to define additional cascading style sheets in site definitions and features, and you can understand why you might need the skills of a developer. In this exercise, you review the relationship that corev4.css has with the default master page. You will also edit a style within corev4.css, resulting in a customized page that you then revert to a file on the Web server. SET UP Using SharePoint Designer, open the team site you used in the previous exercise. 1. In Navigation pane, click Master Page to display the gallery page in the workspace, and then double-click the icon to the left of v4.master. The v4.master page opens in the workspace. Understanding SharePoint’s CSS Inheritance 357 2. In the Apply Styles task pane, click corev4.css, and then continue to point to it until a ScreenTip appears. Troubleshooting If the Apply Styles task pane is not open, on the Style tab, click Apply Styles in the Create group. The ScreenTip points to a location in the layouts directory, which is a folder in the root directory on the Web servers. 3. In the Design view of v4.master, on the Quick Launch, click Libraries, and then in the CSS Properties task pane, click Summary. Troubleshooting If the CSS Properties task pane is not open, on the Style tab, click CSS Properties in the Properties group. The Quick Launch Navigation control is selected, and only styles that are applied to that control are listed in the CSS Properties task pane. 4. In the CSS Properties task pane, click the arrow to the right of font-size, and select medium. The corev4.css file opens as a tab. Both v4.master and corev4.css have an asterisk on their tab labels, indicating that you have changed both files. 358 Chapter 10 Branding SharePoint Sites Tip If the corev4.css file does not open in the workspace, you might have another SharePoint Designer window open. Look in this window for the corev4.css file. When working with styles, you should have only one site open in SharePoint Designer. 5. Right-click the corev4.css tab, and then click Save. A Warning dialog box opens. 6. Click Yes to close the Warning dialog box. The All File mini-gallery opens below the Navigation pane, and a folder is created named styles. You might need to scroll down to see this folder. 7. In the All Files mini-gallery, expand styles. The file corev4.css is listed with a blue information circle to its left. 8. In the workspace, click the v4.master tab. Then, in the Apply Styles task pane, click corev4.css, leaving your pointer over it so that a ScreenTip appears. The ScreenTip indicates that corev4.css is now stored in / styles. 9. Click the corev4.css tab, and then in the All Files mini-gallery, right-click corev4.css, and click Reset to Site Definition. When the Site Definition Page Warning dialog box opens, click Yes. The styles folder contains core.css and corev4 copy(1).css. 10. Click the v4.master tab, and in the Apply Styles task pane, click corev4.css, leaving your pointer over it so that a ScreenTip appears. The ScreenTip states that corev4.css is still located in / styles. 11. Click the corev4.css tab, and in the All Files mini-gallery, right-click corev4.css and click Delete. The Customized Stylesheet Warning dialog box opens, stating that this action will cause you to use a default version of the style sheet. Using IntelliSense to add CSS 359 12. Click OK to close the Customized Stylesheet Warning dialog box. When the Confirm Delete dialog box opens, click Yes. The style folder now contains only the corev4 copy(1).css file. 13. Close v4.master and corev4.css. Click No when prompted to save the file. CLEAN UP Leave SharePoint Designer open if you are continuing to the next exercise. Using IntelliSense to add CSS Like many of Microsoft’s Web editing programs and development environments, SharePoint Designer provides IntelliSense to help you write code quickly. When you type in Code view, a list appears suggesting possible tags, declaration names, properties, and values. Selecting items from the list reduces the amount of code you need to type, and the list also acts as a reference source and learning aid. In this exercise you add CSS rules to Code view for a master page file by using IntelliSense. The CSS rules will change the title, also known as the banner area, of the master page. SET UP Using SharePoint Designer, open the team site you used in the previous exercise. To complete this exercise you need the practice file bg.jpg in the Chapter10 practice file folder. 1. In the Navigation pane, click Site Assets, and then click Import Files in the New group. The Import dialog box opens. 2. Click Add File. In the Add File to Import List dialog box, click the practice file, bg.jpg. 360 Chapter 10 Branding SharePoint Sites 3. Click Open, and then click OK. The Add File To Import List and Import dialog boxes close. 4. In the Navigation pane, click Master Pages. Right-click v4.master, and click Copy, and then right-click in the workspace, and click Paste. A file named v4 copy(1).master appears. 5. With v4 copy(1).master selected, on the Master Pages tab, click Rename in the Edit group. Type SPDSBSprototype.master, and press Enter. 6. On the Master Pages tab, click Edit File. The SPDSBSprototype.master page is displayed. Note It is common practice when developing a prototype to insert CSS code into a master page to confirm that you have identified the CSS declarations and properties you want to amend. After you have developed the code, you can move it to a CSS file. 7. On the View tab, click Split, and then in the Code view portion of the page, find Sp i the closing tag; it should appear at about line number 35. Place the insertion point to the left of , and press Enter to create a new line before the tag. 8. On the new line, type <st, and then press Tab to select style. 9. Press the Spacebar, type ty, and then press Tab to select type=””. Press the Down Arrow key, press Tab to select text/css, and then type >. The closing tag is automatically appended to the line. Press Enter twice to insert two new lines. Using IntelliSense to add CSS 361 10. On the new line between the two style tags, press Tab, and then type .s4-t. Press Tab to select .s4-title. 11. Type {b, and then press the Down Arrow key twice to select background-color. Type #336699; and then press Enter to place the insertion point on a new line. 12. Continue to use IntelliSense where possible, and add the following code to your master page: background-image: url('/SiteAssets/bg.jpg'); background-repeat: repeat-x; background-position: left top; min-height: 80px;} /* Recolor header text */ .s4-titletext h1 a, .s4-title h2, .ms-socialNotif-text {color: #fff;} Note If your site is not the root site of a site collection, replace the URL value in the CSS property background-image code with ‘<site>/SiteAssets/bg.jpg’, where site is the relative address of your site. For example, if your team site name is http:// wideworldimporters/sites/human resources, the CSS property should be backgroundimage: url(‘/sites/human resources/SiteAssets/bg.jpg’);. The code on the master page should look like the following: <SharePoint:SPHelpPageComponent Visible='false' runat='server'/> <style type='text/css'> .s4-title { background-color: #336699; background-image: url('/SiteAssets/bg.jpg '); background-repeat: repeat-x; background-position: left top; min-height: 80px;} /* Recolor header text */ .s4-titletext h1 a, .s4-title h2, .ms-socialNotif-text {color: #fff}; } 13. Click in the Design view portion of the master page for the CSS coding to take effect. 362 Chapter 10 Branding SharePoint Sites 14. Right-click the SPDSBSprototype.master tab, and then click Save. A Site Definition Warning dialog box opens. Note Because the original master page is a site definition page, when you made a copy of the master page, you also created a template page. Customizing master pages is not best practice, but because this master page was created for prototyping purposes, customizing this copy is a fast method of developing a branding solution. 15. https://zegreat656.weebly.com/os-x-application-bundle-plugin-for-maven.html. Click Yes. Tip You can change the site’s logo in the browser by using the Site Settings, Title, Description And Icon page. CLEAN UP Close SPDSBSprototype.master. Leave SharePoint Designer open if you are continuing to the next exercise. Using CSS Reports As you can with any other customization technique, you can easily make mistakes when developing styles or produce a solution that is hard to maintain. This is where SharePoint Designer CSS reports can help you. CSS reports check one or more pages within your site and produce a usage report showing you where class, ID, and HTML tag selectors are used and on what lines. These reports can help you find errors and identify styles that are defined but not used. Using CSS Reports 363 In this exercise, you use CSS Reports to determine the usage of CSS styles in the Home. aspx page. SET UP Using SharePoint Designer, open the team site you used in the previous exercise. The site settings page should be displayed. 1. In the Customization area of the workspace, click Edit file, and then on the Home tab, click Advanced Mode in the Editing group. The Home.aspx page opens in the workspace in advanced edit mode. 2. On the View tab, click Task Panes, and then click CSS Reports to open the CSS Reports task pane. 3. On the View tab, click Code, and then in the CSS Reports task pane, click the Play P ay button to open the CSS Reports dialog box. Troubleshooting If the commands on the View tab are inactive, click in Code view in the workspace. 4. Click the Usage tab, and verify that Current page is selected as well as the three check boxes under Check for. Click Check. The Check Reports task pane lists the CSS selectors that have been applied to the current page and indicates the line on which the selector is used and the location where the selector is defined. 364 Chapter 10 Branding SharePoint Sites 5. In the CSS Reports task pane, double-click the first line. In the Code view portion of the workspace, the line where the style is used is highlighted. 6. In the CSS Reports task pane, on the first line, click the corev4.css link in the Definition Location column. Corev4.css opens at the line where the style is defined. CLEAN UP Close Home.aspx, corev4.css, and the CSS Reports task pane. Leave SharePoint Designer open if you are continuing to the next chapter. Key Points ● SharePoint Designer provides you with a range of tools to help you manipulate cas- cading style sheet styles and files. ● SharePoint Designer uses a set of configuration options to decide how it should add the cascading style sheet tags to your page. ● The main cascading style sheet for both SharePoint Foundation and SharePoint Service is corev4.css. ● The Manage Styles and CSS Properties task panes provide useful tools to iden- tify where styles are used and the cascade order of those styles. With the Style Application group commands, you can switch between automatic and manual CSS modes and quickly apply styles. ● You can save your styles in files that you can attach to pages. ● IntelliSense is Microsoft’s implementation of auto-completion and acts as a refer- ence source and learning aid. ● Use CSS reports to check your styles and to produce CSS usage reports. 11 Working with Master Pages In this chapter, you will learn how to ✔ Understand master pages. ✔ Copy and save a master page. ✔ Customize a master page. ✔ Change the default master page. ✔ Manage content placeholders. ✔ Create a Web page from a master page. ✔ Export a master page. ✔ Reset a master page to the site definition. You have already worked with master pages earlier in this book. For example, in Chapter 4, “Creating and Modifying Web Pages,” you saw that when you use a browser to request a page from a site, it combines two Microsoft ASP.NET pages: a master page and a content page. You discovered that when you open a content page in Microsoft SharePoint Designer 2010, Design view displays the merged page (not only the content page). You also attached a master page to a newly created page. Microsoft SharePoint Foundation 2010 and Microsoft SharePoint Server 2010 make heavy use of master pages to control the general layout of pages within a SharePoint site. The default master page, usually a file named v4.master, is the master page that is applied to all pages in your site when you first create the site. When you install SharePoint 2010, the default master page and other master pages are located on the Web server. Each master page contains multiple core controls, called ContentPlaceHolder controls that must be included to display site pages correctly. SharePoint Designer is an excellent tool to use to customize master pages and manipulate content placeholders. 367 368 Chapter 11 Working with Master Pages In this chapter, you will explore the master pages provided with SharePoint 2010 and learn about some of the new items on those master pages as well as the differences between them. You will modify a master page, manage ContentPlaceHolder controls, and reset a master page to its site definition. You will also create a content page from a master page. If you worked with SharePoint Designer 2007, some of this will not be new to you. However, if you are just starting out in SharePoint and want to change the layout of your site, it is important to understand master pages and how they are used in SharePoint. Important To complete the exercises in this chapter, you must have permission to modify master pages. By default, site owners and designers are not allowed to modify master pages; you must be a site collection administrator. A site collection administrator or Web application administrator can give site owners and designers permission to modify master pages. For more information, see “Controlling the Use of SharePoint Designer” in Chapter 1, “Exploring SharePoint Designer 2010.” Practice Files Before you can complete the exercises in this chapter; you need to copy the book’s practice files to your computer. A complete list of practice files is provided in “Using the Practice Files” at the beginning of this book. Understanding Master Pages Master pages were included as part of ASP.NET. SharePoint Foundation 2010 is built on top of ASP.NET and supports master pages, which help to provide a common look and feel across entire sites. Because SharePoint Server 2010 is built using SharePoint Foundation, it too uses ASP.NET. The best way to plan the structure of a master page is to follow the same steps you take to structure a regular Web site page. Create a diagram of the layout of the master page, and indicate where you want to locate components that will remain consistent across all pages on the site—for example, a header area, a left or right navigation area, or a footer area. Also indicate where you want to locate components from the content pages. The parts that contain unique content—on a page-by-page basis—are usually located in the center of the page. 370 Chapter 11 Working with Master Pages Default Master Pages As with other pages, site definitions play a key role with master pages. Each site definition can contain a number of master pages, one of which can be set as the default master page for the site. However, most site definitions do not contain master pages and use a global default master page instead. When a site is first created, a site property, referred to by the token ~masterurl/default.master, is used to save the default master page’s location. After a site is created, you can change the value stored in this token. Each page in a site is initially configured to use the site’s default master page. However, you can modify which master page a content page uses. For example, you can specify whether you want to use the default master page or a different master page. Theoretically, each page within a site collection could use a different master page. Such a scenario would defeat the purpose of using master pages, however, because, as stated earlier, master pages were introduced to support a common look and feel across entire sites. So how many master pages does a SharePoint installation have? In a default installation of SharePoint Foundation, only the following master pages are used: ● Global master pages There are three default master pages: ❍ default.master Provides the look and feel and controls included in a Windows SharePoint Services 3.0 or Microsoft Office SharePoint Server 2007 installation. This means that the ribbon is not included. ❍ v4.master The primary master page for a SharePoint 2010 installation. ❍ minimal.master This is not the same minimal master page you might have used with a Windows SharePoint Services 3.0 or SharePoint Server 2007 installation. The minimal master in SharePoint 2010 is applied to pages that use the Office Web Applications as well as the Search Center. ● Global meeting workspace master pages All meeting workspaces use one of the global meeting workspace master pages: mwsdefaultv4.master or mwsdefault. master. By using global master pages, all your team sites will look the same and all your meeting workspace sites will look the same. SharePoint Server has additional master pages, such as mysite.master, which is used on My Sites, and DynamicView.master, which is used with the PerformancePoint Web Parts. Other master pages can be found in the layouts Understanding Master Pages 371 folder on each Web server, such as application.master, applicationv4.master, simple. master, simplev4.master, and pickerdialog.master. These master pages and a number of content pages that also usually live in the layouts folder cannot be modified by SharePoint Designer. These content pages (including Login.aspx, SignOut.aspx, Error.aspx, ReqAcc.aspx, Confirmation.aspx, WebDeleted.aspx, and AccessDenied.aspx) do not use the same master pages you use for your SharePoint sites, and if you corrupt your site’s master pages, these pages will still display. You can find instructions for how to modify these pages at msdn.microsoft.com/en-us/library/ee537576(v office.14).aspx, however, you should carefully consider any customizations, and developer skills will often be required. Note In a default SharePoint Server installation, team and meeting workspace master pages work as they do in SharePoint Foundation. Publishing sites also use the default master page mechanism described earlier—that is, each site is configured to use a default master page. Publishing sites, however, can use an alternate type of master pages, called custom master pages. The site property that contains the location of a custom master page is referred to by the token ~masterurl/custom.master. On publishing sites, when you are working in the browser, if you click Master Page under Look And Feel on the site settings page, the Site Master Page Settings page is displayed. Use this page to choose a custom master page in the Site Master Page section or a default master page in the System Master Page section. The default master page section is named System Master Page because it is used for nonpublishing pages and for system pages, such as those used to display the contents of lists and libraries. If a master page is selected in both the Site Master Page and System Master Page sections, publishing sites will use the master page selected in the Site Master Page section. In other words, when custom master pages are set, they are used in preference to default master pages on publishing sites. 372 Chapter 11 Working with Master Pages Controls Used on the Master Page Much of the functionality of a master page is provided by components that comprise application logic and user interface declarations in the form of ASP.NET or SharePoint Server controls. See Also More information on controls can be found in Chapter 14, “Using Controls in Web Pages.” Several controls are required for a master page. These requirements can be different if you are creating a master page for a SharePoint Foundation installation or a SharePoint Server installation, and they also depend on the type of functionality you want to use on your SharePoint site. For example, when you create or modify a master page, the following controls should be placed on your page within the tag (…): <SharePoint:SPPageManager runat='server' /> <SharePoint:ScriptLink defer= 'true' runat='server'/> Similarly, the following ASP.NET server control should be placed in the Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |