1 / 36

Implementing SharePoint 2013 Master Pages with Dreamweaver

Learn how to set up SharePoint sites to use Design Manager, connect Adobe Dreamweaver to edit Master Page HTML, explore Design Manager functionalities, and overcome limitations in collaborative site templates. Discover expert tips from Troy Lanphier, a SharePoint professional.

keegan
Download Presentation

Implementing SharePoint 2013 Master Pages with Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Starting From the Top: Implementing SharePoint 2013 Master Pages using Dreamweaver and Design Manager Troy Lanphier Senior SharePoint Solutions Developer – GUIO,LLC

  2. Special Thanks to our Platinum Sponsor …and our Gold Sponsor

  3. Who’s This Guy, and Why is he talking about SharePoint?

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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…

  16. 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

  17. 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)

  18. 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.

  19. DEMO 1ENABLING PUBLISHING FEATURES In a Collaborative SharePoint Site

  20. What We’re Focused On Today How are we doing for time? • Setup our SharePoint sites to use Design Manager - CHECK

  21. 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

  22. 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

  23. Mapping a Drive to The Design Files Enter your credentials IMPORTANT – Select “Remember my credentials”

  24. Mapping Error Occurs most often when mapping the design files in Office 365 IMPORTANT – Select “Remember my credentials”, as shown in the previous step.

  25. DEMO 2Mapping a Drive to the SharePoint design files

  26. 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

  27. 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

  28. 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:”>

  29. DEMO 3Reviewing the Out-of-the-box SharePoint Master Pages with Dreamweaver

  30. 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

  31. 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

  32. 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

  33. 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

  34. DEMO 4

  35. 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

  36. Contact Information Troy Lanphier Email: t.Lanphier@guio.com Blog: http://www.guio.com/troy Twitter: @TroyLanphier

More Related