UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
•Télécharger en tant que PPT, PDF•
2 j'aime•885 vues
This is an old presentation from the SharePoint APAC Conference in Sydney.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
Similaire à UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007 (20)
Plus de Chandima Kulathilake
Plus de Chandima Kulathilake (9)
Dernier
Dernier (20)
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
- 2. UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server) http://www.chandima.net/Blog/ Provoke Solutions, New Zealand
- 8. SharePoint Style sheets WSS vs MOSS
- 9. Customizing SharePoint CSS core.css _layouts (on disk) default.master Normal <CssLink/> core.css _layouts (on disk) default.master core.css _styles (in web) Customized <CssLink/>
- 15. SharePoint Page Layout Application Pages /_layouts/ application.master .master /_layouts/ create.aspx .aspx Spweb.masterurl default.aspx /shared documents/ allitems.aspx /_catalogs/masterpage/ default.master .aspx .aspx .master Content Pages http://myserver File System Templates .ommon Filesicrosoft Sharedeb server extensions2EMPLATEiteTemplates SiteTemplatesTSdefault.aspx Pagesviewpage.aspx Globaldefault.master
- 16. Default.master Placeholders Default.master contains ~30 placeholders, ~22 of them in the page body All of them must be defined in a replacement master
- 19. MOSS Layout Architecture default.aspx gets “chrome” from tasks/forms/ allitems.aspx pages/ gearsofwar.aspx pages/ lostplanet.aspx gets “layout” from _catalogs/masterpage/ game.aspx _catalogs/masterpage/ default.master gets “chrome” from _catalogs/masterpage/ default.master spweb.MasterUrl spweb.CustomMasterUrl WSS Layout Architecture
- 22. Master Page Cast of Control Characters <WebPartPages:SPWebPartManager> Enables web part framework on MasterPages. WebPartManagers should generally always be defined in master pages. <asp:SiteMapPath id="GlobalNavigationSiteMap" > Provides top navigation breadcrumb. Connects to SPSiteMapProvider (also used for page breadcrumb) nonvisual control <wssuc:Welcome > Provides Welcome <user> dropdown with per-user options. <SharePoint:SPLinkButton>/ <SharePoint:ProjectProperty Property="Title“> Renders Title of the Site with a link back to the home page. <SharePoint:SiteLogoImage> Renders logo of the site if defined on the web, or the value of the LogoImageUrl property
- 23. Master Page Cast of Control Characters <SharePoint:AspMenu ID="TopNavigationMenu" Displays top navigation “tabs”. <SharePoint:SiteActions> Renders the SiteActions dropdown. Note that the SiteActions dropdown can be extended via ‘ features’ or directly in page. <wssuc:DesignModeConsole > In edit mode, shows the editing status of the page and provides an Exit Edit Mode button. <SharePoint:FormDigest> Renders a security hash into the page; needed for performing some updates. <SharePoint:SPNavigationManager> Manages a left hand navigation control (either the Quick Launch list, or the tree view) nonvisual control
Notes de l'éditeur
- Microsoft Dynamics
- Microsoft Dynamics Intro slides: 1-2 (3mins) Today I am going to talk about customising SharePoint. In order to customise SharePoint you will need to understand about the SharePoint default HTML, CSS and Master Page resources. I will try and cover off WSS V3 and MOSS 2007 customisations. There are two more sessions in this series that I highly recommend you to attend if you are a designer/developer. Main thing to note is that when I talk about customisation I am referring to the UI of SharePoint. I will not be talking about any development or coding at this session. This session is for User interface customisations. It’s important if you are a developer that for you to understand how the UI can be customised as SharePoint is heavily UI driven. So as part of this session We’ll look at how to customise SharePoint sites using the browser. Then we’ll take a quick look at SharePoint Designer and how to use SPD to make design changes to a SharePoint site. SharePoint designer is the new tool that you use to customise SharePoint sites. For more powerful layout changes you will be using Visual Studio .net and SharePoint Designer. Then we’ll wrap it all up with a summary and a round of questions. There will be demos all the way through.
- The session objectives for today will be to showcase about options available to you for customising SharePoint Learn about the CSS elements in SharePoint and how to change these to customise sites Learn how to create and modify existing master pages Learn about page layouts Microsoft Dynamics
- Slide 4 > Customisation options and the tools So there are 3 main options available for you to customize SharePoint Browser The first being using the browser you can achieve some minimum customisations and you don’t need to have any special skills in order to do that. SPD Then using SPD you can do a bit more by changing the CSS and the master pages and you need some level of web dev experience. Important thing to know is that when using SPD to customise sites you are actually editing pages inside the content database. What I mean by that is all SharePoint pages are in a content database and SPD interacts with that. You are not customizing pages found on the “_layouts” folder which is on the file system. Then the next available option is that you can use Visual Studio.net where you do complex customisations. This means you will be building site definitions and new site templates and coding new features. So this is most suitable if you are building apps based on SharePoint. For doing development you will need to have a ‘sandbox’ or a server box. The most popular way for doing this is to use Virtual PC Images with a SharePoint server. Microsoft Dynamics
- Slide 5 Customise SharePoint via the Browser So let’s look at what options you have when customising SharePoint via a browser. If you are a site user and want to make some changes to the site look and feel you can do that via the browser. The main things that you can change via the browser without any coding whatsoever are: Change the site logo Change the site web part layouts or add some new web parts Change the “Quick Launch” navigation Change or add a new tab navigation element Go to > “Look and Feel” Select “Navigation” > Apply a new “theme” And if the site is based on MOSS you can apply new “chrome” from the existing master page gallery Microsoft Dynamics
- Slide 6 Demo DEMO – Browser Customisation Here we have a typical WSS team site. And one of the most common things most people want to do is change the site title and the description and display the company logo. So let’s look at how we do that. Here I am logged in as an administrator to this ‘site collection’. And I will switch to “Modify All Site Settings”. Then I am going to change the “Site Icon” and “Site Title” Then I am going to change the “Quick Launch” menu to display this in a tree view. I am now applying a new “Theme”. Themes are located on the file system you can build themes by copying an existing theme and applying changes to CSS and Images. OK we saw what we can do with the browser customisation. Microsoft Dynamics
- Slide 7 : SharePoint Designer Customisations Let’s move on to SharePoint Designer and see what you can do with SharePoint Designer SharePoint Designer is the tool that you will use to customize SharePoint sites. It is the evolution of FrontPage. Go to the UX02 session for an in depth look at SPD and how to build no code solutions using SharePoint Designer. With SharePoint Designer you can do the following Modify default style sheets and create new style sheets Create and Edit master pages (I’ll come back to master pages) Create and edit publishing page layouts for MOSS Safety net! You can “un-ghost” = revert to site definition now available Master pages allows you to apply branding across SharePoint sites. Microsoft Dynamics
- Slide 8 CSS customisations (30 secs) SharePoint default Style sheets are located in the “12 Hive”. A WSS only installation has the following styles and when you have a MOSS install you get theses extra CSS style sheets as well. Microsoft Dynamics
- Slide 9 (CORE CSS mod creates a style sheet in _styles When you open up one of the style sheets from SPD and make an edit to the style sheet and save it the master page CSS link reference to the file system changes and a copy of the style sheet is made in the “_styles” folder. To get rid of your customisation you just delete the CSS from “_styles” Microsoft Dynamics
- Slide 10 (Demo) First we’ll look at editing the existing default style sheets that come with SharePoint. So I will open up a SharePoint site in SPD and then select a master page, open one of the pages and this shows the default style sheet. Then I am going to make a simple edit on the style. As soon as I save this change SPD will make a copy of the “Core.css” and add it to a folder named “_styles” in the content db. This concept is referred to as “ghosting”. In previous versions when this happened there was no easy way to recover but now with SPD you don’t need to worry about that because SPD allows you to revert your changes to the original state. To get rid of the customised CSS you can simply delete it. As you can see I can make site wide changes by editing and overriding the ‘core.css’ file. Now another tool I want to highlight is the IE developer toolbar. Enable developer tool bar. You can download this from the IE web site. I’ll provide the link to the download. Show some things with the developer toolbar. For a detailed list of each style go to Heather Solomon’s blog. I will make the URL available for you after this session. Microsoft Dynamics
- Slide 11 (Customisation Tips) As you saw in my demo you can use SPD to make changes to the style sheets. SPD allows you to do some smart editing and provides you with a very good visual way of editing style sheets. The style sheet task pane allows you to apply filters so that you only work on the styles that you need for that particular page or section. And if you have not downloaded IE developer tool bar I recommend that you download it. Because as you saw it provides you with good visual clues to what styles are used etc. Microsoft Dynamics
- Slide 11 (Master pages) The next level of customisation that I am going to talk about is about master pages. Master pages are not a new concept if you have built ASP.net 2.0 web sites you will have used master pages. SharePoint master pages are located on the file system in the “PublishingLayouts” directory. C:\\Program Files\\Common Files\\Microsoft Shared\\web server extensions\\12\\TEMPLATE\\FEATURES\\PublishingLayouts\\MasterPages Go to Slide 12 Microsoft Dynamics
- A single master page can control the look and feel of an entire web site or web application. Content pages are the other ‘half’ of master pages. Content pages define the content. Together they create the presentation layer of a web site. In SharePoint ‘content pages’ are called “ Page Layouts ” They work similar to content pages. The SharePoint master page file is combined with a page layout file to create the presentation layer of content in a SharePoint site. Microsoft Dynamics
- In SharePoint there are two dynamic tokens used for master pages. This is basically a separation between sites and system pages. Then there are two additional ‘static tokens’ used. Sitecollection/default.master Site/default.master This allows you to change the master pages used by sites in SharePoint. A site master page is where you do look and feel branding customisations. The master pages included with Office SharePoint Server 2007 are based on the ‘SPWeb.CustomMasterUrl’ of the ‘SPWeb’ class in Microsoft Windows SharePoint Services. Microsoft Dynamics
- Slide 15 What this slide is illustrating is the relationship of SharePoint page layouts and where these are stored. Inside a web site you have ASPX and Master Pages that has been created and setup based on the site definition rules of the “Site Templates” directory in the 12 hive. When you make a modification to the default.aspx in your site you are “ghosting” a page. You can now revert your changes back to the original format by going to the “site settings” and choosing “revert to site definition”. The other set of pages which is stored in the “_layouts” directory is part of the SharePoint application. You can customise these but you have to make extra care when you do that as these may be changed with service pack updates and such like. Microsoft Dynamics
- Slide 16 The “default.master” page has a series of Placeholders. Placeholders define where content goes in a master page and you can override these content placeholders. When you require a blank master page for use with a site you need to define all of the placeholders in the new master page you create. The easy way of doing this is to get hold of the “minimal” master page from the MSDN site. Microsoft Dynamics
- Slide 17 (Demo) We’ll now look at working with master pages in SharePoint designer. I am going to open up SharePoint designer and open a new web site. This SharePoint site is based on the ‘Team Site Template’. Open > http://apacdemosite/DemoCSS2/default.aspx Navigate to the “_catalogs” directory and choose the “default.master” I am going to make a copy of default.master. Call it “DEMO2.master”. Now I am going to open the master page. I am going to make some changes to the “master page”. I have some code that I have made earlier which I will paste on to the new master page I created. Now I will make a copy of “default.aspx” then set the reference of the copied page to that of the new master page I created. Now I can change the look and feel. Or the other option will be to set the new master page as the “default master page”. Microsoft Dynamics
- Slide 18 (Customisation) You can start from scratch but I highly recommend that you start with minimal master page. Or you copy an existing master page and remove all the markup by hand. Heather Solomon Master Pages http://www.heathersolomon.com/blog/articles/MOSS07DesignComponents.aspx http://www.heathersolomon.com/blog/articles/sp2007.aspx Minimal master page file http://msdn2.microsoft.com/en-us/library/aa660698.aspx Microsoft Dynamics
- Slide 19 (Layout architecture) When you are in a WSS site the aspx pages refer to the spweb.masterurl token which is from “_catalogs/masterpage/default.master” In MOSS there is a “Page Layout” which gives more flexibility for your layouts and token is spweb.CustomMasterUrl. This means that one master page can be used by different page layouts. Microsoft Dynamics
- When working in SPD and masterpages use split view. The master page tool bar gives you the ability to choose the placeholder control you need. The tag toolbar helps you to select various properties and the hierarchy. Version history will allow u to roll back. Microsoft Dynamics
- Create a new page layout Add a layout control Create a new page based on the layout Microsoft Dynamics
- http://heathersolomon.com/blog/articles/148.aspx Microsoft Dynamics