Create your own SharePoint Master Pages and Page Layouts
-
Upload
eric-overfield -
Category
Technology
-
view
1.449 -
download
0
Transcript of Create your own SharePoint Master Pages and Page Layouts
![Page 1: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/1.jpg)
SharePoint Advocate and EnthusiastPixelMill
ERIC OVERFIELD | @ericoverfield
CREATE YOUR
OWN SHAREPOINT
MASTER PAGES AND
PAGE LAYOUTS
Wednesday August 26th
8:30 AM – 9:45 AM
![Page 2: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/2.jpg)
Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate, Author
SharePoint Community Organizer
Located in Davis, CA
Co-author: “Black Magic Solutions for White Hat
SharePoint”
(August, 2013)
Co-author: “Pro SharePoint 2013 Branding and Responsive Web
Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
INTRODUCTION
ericoverfield.com @ericoverfield
![Page 3: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/3.jpg)
WHAT YOU WILL LEARN TODAY
1
2
3
ericoverfield.com @ericoverfield
TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW
DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS
DEMOS, IMPORTANT CONTROLS AND CONCEPTS
![Page 4: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/4.jpg)
TRADITIONAL SHAREPOINT MASTER PAGES
Provides main HTML wrapper used by all pages
Defines HTML <html />, <head /> and <body /> tags
Loads resources such as JS and CSS files
Defines page flow and shared page components
Header, footer, logo, navigation, suite bar / ribbon, etc.
Uses ContentPlaceHolders for replaceable areas
OOTB, no longer uses tables for layout!
ericoverfield.com @ericoverfield
![Page 5: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/5.jpg)
MASTER PAGE COMPONENTS
ericoverfield.com @ericoverfield
Suite Bar
Ribbon
Header
Current Nav
Page Wrapper
![Page 6: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/6.jpg)
TRADITIONAL SHAREPOINT MASTER PAGES BEST PRACTICES
Start with seattle.master, oslo.master or a starter Master Page
Always include all ContentPlaceHolders found in seattle.master
Use hidden <div /> to hide unneeded ContentPlaceHolders
Keep the suite bar / ribbon at the top of the page
Replace <PublishingRibbon:PublishingRibbon /> if more control needed
Include your custom layout HTML within #s4-workspace
Must use <SharePoint:AjaxDelta /> blocks to allow for MDS
Must register tag prefixes to access SharePoint and .Net controls
ericoverfield.com @ericoverfield
![Page 7: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/7.jpg)
DEMO
TRADITIONAL
MASTER PAGES
![Page 8: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/8.jpg)
TRADITIONAL SHAREPOINT PAGE LAYOUTS
Specific to Publishing sites
Defines content layout for a given page
Contains “Content” blocks that link to Master Page
Does not contain <html />, <head />, <body /> and other common tags
Associated with a Content Type
May surface Content Type columns
ericoverfield.com @ericoverfield
![Page 9: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/9.jpg)
PAGE LAYOUT COMPONENTS
ericoverfield.com @ericoverfield
Site Columns
Snippets
Content Place Holder
![Page 10: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/10.jpg)
TRADITIONAL SHAREPOINT PAGE LAYOUTS BEST PRACTICES
Start with an existing page layout
Stick with same content type if possible
Always keep custom code within <asp:Content /> blocks
Consider different content viewing and authoring experiences
Use <Publishing:EditModePanel /> controls
Bake in specific rollup webparts, or default webparts in webpart zones
Must register tag prefixes to access SharePoint and .Net controls
ericoverfield.com @ericoverfield
![Page 11: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/11.jpg)
DEMO
TRADITIONAL
PAGE LAYOUTS
![Page 12: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/12.jpg)
THE NEW SHAREPOINT
BRANDING TOOL
DESIGN MANAGER
![Page 13: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/13.jpg)
DESIGN MANAGER OVERVIEW
New to SharePoint 2013
Requires Publishing Infrastructure
Import a HTML prototype directly into SharePoint
SharePoint handles conversion
Interface for custom Master Pages and Page Layouts
Also includes Display Templates and Device Channels
No longer limited by SharePoint Designer
ericoverfield.com @ericoverfield
![Page 14: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/14.jpg)
HTML MASTER PAGES
Convert a HTML prototype directly into SharePoint
Some assembly required – Snippet Gallery
ericoverfield.com @ericoverfield
![Page 15: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/15.jpg)
HTML PAGE LAYOUTS
Must derive from a Master Page
Also tied to Content Types / custom Content Types
Also uses Snippets and Snippet Manager
Much easier way to include SharePoint controls
Only edit what is in “Content” blocks
ericoverfield.com @ericoverfield
![Page 16: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/16.jpg)
DESIGN MANAGER BEST PRACTICES
Only edit the .html files – SharePoint controls the .master and .aspx
Only rename, move, delete, check out, publish, etc the .html files even
HTML Master Pages manage unneeded ContentPlaceHolders!
The Snippet Gallery and snippets are your friend
All code must be valid HTML / XML, thus why controls are “comments”
SharePoint may mangle your HTML, bummer
ericoverfield.com @ericoverfield
![Page 17: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/17.jpg)
DEMO
DESIGN MANAGER
HTML MASTER PAGES
HTML PAGE LAYOUTS
![Page 18: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/18.jpg)
IMPORTANT CONTROLS AND TAGS
Found in Microsoft.SharePoint.WebControls
<SharePoint:SPSecurityTrimmedControl /> - AuthenticationRestrictions, HideFromSearchCrawler, EmitDiv
<SharePoint:FieldValue /> - FieldName (ID or Internal Name)
<SharePoint:TextField /> - FieldName, InputFieldLabel (for editing)
Found in Microsoft.SharePoint.Publishing.WebControls
<Publishing:EditModePanel /> - PageDisplayMode, GroupingText, SuppressTag (doesn’t do what you think)
<Publishing:RichHtmlField /> - FieldName, InputFieldLabel (for editing), AllowFonts (and many more)
References Src="~/_controltemplates/15/Ribbon.ascx"
<PublishingRibbon:PublishingRibbon /> - Great for Office 365
ericoverfield.com @ericoverfield
![Page 19: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/19.jpg)
A QUICK REVIEW
1 TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW
2 DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS
3 DEMOS, IMPORTANT CONTROLS AND CONCEPTS
ericoverfield.com @ericoverfield
![Page 20: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/20.jpg)
RESOURCES
ericoverfield.com @ericoverfield
Starter on learning SharePoint Branding
http://pxml.ly/1CHNXKc
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
SharePoint 2013 Design Manager branding and design capabilities
http://pxml.ly/1vBC3PD
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SP Blueprint for SharePoint 2013
http://pxml.ly/1ql6Dqa
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013
http://pxml.ly/1rBdcLJ
![Page 21: Create your own SharePoint Master Pages and Page Layouts](https://reader033.fdocuments.in/reader033/viewer/2022050614/589de9011a28ab773b8b58f1/html5/thumbnails/21.jpg)
CREATE YOUR OWN
SHAREPOINT MASTER PAGES
AND PAGE LAYOUTS
THANK YOUQUESTIONS?
@ericoverfieldSPTechCon Boston 2015
http://pxml.ly/EO-MP-PL
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)