360 likes | 444 Views
Starting From the Top: Implementing SharePoint 2013 Master Pages using Dreamweaver and Design Manager. Troy Lanphier Senior SharePoint Solutions Developer – GUIO,LLC. Special Thanks to our Platinum Sponsor. …and our Gold Sponsor. Who’s This Guy, and Why is he talking about SharePoint?.
E N D
Starting From the Top: Implementing SharePoint 2013 Master Pages using Dreamweaver and Design Manager Troy Lanphier Senior SharePoint Solutions Developer – GUIO,LLC
Special Thanks to our Platinum Sponsor …and our Gold Sponsor
Who’s This Guy, and Why is he talking about SharePoint? Troy Lanphier, MCT, MCSE • Background in server infrastructure, storage design, and disaster recovery • Strictly focused on the SharePoint platform since SharePoint 2003 beta
Who’s This Guy, and Why is he talking about SharePoint? Troy Lanphier, MCT, MCSE • Background in server infrastructure, storage design, and disaster recovery • Strictly focused on the SharePoint platform since SharePoint 2003 beta Technical Editor and Author for O’Reilly/Microsoft Press • Co-Author/Tech Editor of Microsoft SharePoint Foundation 2010 Inside Out • Author of Exam Ref 70-331, Core Solutions of Microsoft SharePoint Server 2013
Who’s This Guy, and Why is he talking about SharePoint? Troy Lanphier, MCT, MCSE • Background in server infrastructure, storage design, and disaster recovery • Strictly focused on the SharePoint platform since SharePoint 2003 beta Technical Editor and Author for O’Reilly/Microsoft Press • Co-Author/Tech Editor of Microsoft SharePoint Foundation 2010 Inside Out • Author of Exam Ref 70-331, Core Solutions of Microsoft SharePoint Server 2013
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do : • Setup our SharePoint sites to use Design Manager
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do: • Setup our SharePoint sites to use Design Manager • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTML structure
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do: • Setup our SharePoint sites to use Design Manager • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTML structure • no, that’s not a typo, I really did mean HTML - not ASPX
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do: • Setup our SharePoint sites to use Design Manager • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTML structure • no, that’s not a typo, I really did mean HTML - not ASPX • Take a first look at Design Manager, focusing on its interaction with Master Page design
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do: • Setup our SharePoint sites to use Design Manager • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTML structure • no, that’s not a typo, I really did mean HTML - not ASPX • Take a first look at Design Manager, focusing on its interaction with Master Page design • Discuss what is (and isn’t) readily available within Design Manager
What We’re Focused On Today We have about 55 minutes left – In that time, we have five things to do: • Setup our SharePoint sites to use Design Manager • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTML structure • no, that’s not a typo, I really did mean HTML - not ASPX • Take a first look at Design Manager, focusing on its interaction with Master Page design • Discuss what is (and isn’t) readily available within Design Manager • Convert and apply our Master Page
The PRoblem We build a lot more Intranet (Collaborative) Site Collections than Internet (Publishing Only) Site Collections • Design Manager isn’t available in Collaborative site templates
The PRoblem We build a lot more Intranet (Collaborative) Site Collections than Internet (Publishing Only) Site Collections • Design Manager isn’t available in Collaborative site templates The SOLUTION Find a way to enable Design Manager
The PRoblem We build a lot more Intranet (Collaborative) Site Collections than Internet (Publishing Only) Site Collections • Design Manager isn’t available in Collaborative site templates The SOLUTION Find a way to enable Design Manager Why can’t we just use Publishing Site Templates all the time, then? – Here’s Why…
Setting Up Your SharePoint Site For Design Manager Publishing Sites are already setup for Design Manager, but they’re not terribly useful as intranet sites • Out of the box, several intranet features are not enabled at the Site Collection level • Library and Folder Based Retention • SharePoint Server Enterprise Site Collection features (!!!) • No InfoPath Forms Services, Visio Services, Access Services, or Excel Calculation Services • SharePoint Server Standard Site Collection features • User Profile Services and Search (from the SharePoint Server Standard License) • Site Policy (Retention Schedules) • Three State Workflows
Setting Up Your SharePoint Site For Design Manager Publishing Sites are already setup for Design Manager, but they’re not terribly useful as intranet sites • Even worse, more critical intranet features are not enabled at the Site level • Minimal Download Strategy • Only downloads the portions of a page that change • Mobile Browser View (for Document Libraries and Lists) • SharePoint Server Standard and Enterprise features (IFS, AS, VS, and ECS – again) • Team Collaboration Lists • No Document Libraries, Issues List, etc. • No Wiki Home Page • Wait, WHAT – no, I don’t use Wiki Pages! (We’ll come back to this shortly – read on)
Setting Up Your SharePoint Site For Design Manager Instead of building a Publishing site, we choose to enable Publishing on a Collaborative Site • Here’s what we need • Enable SharePoint Server Publishing Infrastructure at the Site Collection Level • Enable SharePoint Server Publishing at the Site Level • Switch from a Wiki welcome page to a Publishing welcome page • This is optional, but recommended.
DEMO 1ENABLING PUBLISHING FEATURES In a Collaborative SharePoint Site
What We’re Focused On Today How are we doing for time? • Setup our SharePoint sites to use Design Manager - CHECK
Mapping a Drive to the Design Files Not really a whole lot different from mapping a standard network drive • Works the same whether you are in an on-premise SharePoint 2013 installation or in a cloud based, Office 365 installation
Mapping a Drive to The Design Files Select the desired drive letter and then paste in the URL from Design Manager Optionally, you can choose to connect using different credentials
Mapping a Drive to The Design Files Enter your credentials IMPORTANT – Select “Remember my credentials”
Mapping Error Occurs most often when mapping the design files in Office 365 IMPORTANT – Select “Remember my credentials”, as shown in the previous step.
What We’re Focused On Today Two down, three to go • Setup our SharePoint sites to use Design Manager – CHECK • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTMLstructure – CHECK
Design Manager Overview Design Manager is a new functionality in SharePoint 2013 • Addresses major branding and design requirements for SharePoint, including: • Design Channels • Placing Design Files within SharePoint for use • Editing Master Pages • Editing Display Templates (Search and Search-related items) • Editing Page Layouts • Publishing and Assigning your design • Packaging up your design as a Solution • Works the same whether you are in an on-premise SharePoint 2013 installation or in a cloud based, Office 365 installation
Design Manager Overview Master Pages within SharePoint 2013 • Start as an HTML Design with NO controls specified (the core HTML design you create in Adobe Dreamweaver) • Have “Snippets” copied in from the Snippet Gallery to provide SharePoint-specific functionality • Top and Vertical Navigation • Search Box • Site Title and Logo • Sign In control • All Design Manager Snippets are contained within a <DIV> tag and begin with a tag that looks like “<!--CS:”>
DEMO 3Reviewing the Out-of-the-box SharePoint Master Pages with Dreamweaver
What We’re Focused On Today three down, almost home • Setup our SharePoint sites to use Design Manager – CHECK • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTMLstructure – CHECK • Take a first look at Design Manager, focusing on its interaction with Master Page design – CHECK
Building a Basic Site with Design Manager • Upload the HTML File – make sure you save a copy first • Notice that the HTML file is fundamentally rewritten to suit SharePoint • We’re cheating – I built a really crummy HTML page with minor branding in it
Building a Basic Site with Design Manager • Upload the HTML File – make sure you save a copy first • Notice that the HTML file is fundamentally rewritten to suit SharePoint • We’re cheating – I built a really crummy HTML page with minor branding in it • Insert the appropriate Snippets and preview the changes • Snippets are inserted in Dreamweaver • Changes are previewed in the browser
Building a Basic Site with Design Manager • Upload the HTML File – make sure you save a copy first • Notice that the HTML file is fundamentally rewritten to suit SharePoint • We’re cheating – I built a really crummy HTML page with minor branding in it • Insert the appropriate Snippets and preview the changes • Snippets are inserted in Dreamweaver • Changes are previewed in the browser • Save and Publish the file • Apply to Site Collection
What We’re Focused On Today Whew – we made it! Any Questions? • Setup our SharePoint sites to use Design Manager – CHECK • Tie Adobe Dreamweaver (insert HTML editor of your choosing) to SharePoint so we can edit Master Page HTMLstructure – CHECK • Take a first look at Design Manager, focusing on its interaction with Master Page design – CHECK • Discuss what is (and isn’t) readily available within Design Manager – CHECK • Convert and apply our Master Page – CHECK
Contact Information Troy Lanphier Email: t.Lanphier@guio.com Blog: http://www.guio.com/troy Twitter: @TroyLanphier