Starting From the Top:Implementing SharePoint 2013

Master Pages using Dreamweaver and Design Manager

Troy LanphierSenior 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?

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 TODAYWE 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 TODAYWE 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 TODAYWE 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 TODAYWE 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 TODAYWE 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 TODAYWE 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 PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES

THE PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES

THE SOLUTIONFIND A WAY TO ENABLE DESIGN MANAGER

THE PROBLEMWE BUILD A LOT MORE INTRANET (COLLABORATIVE) SITE COLLECTIONS THAN INTERNET (PUBLISHING ONLY) SITE COLLECTIONS• DESIGN MANAGER ISN’T AVAILABLE IN COLLABORATIVE SITE TEMPLATES

THE SOLUTIONFIND 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 MANAGERPUBLISHING 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 MANAGERPUBLISHING 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 MANAGERINSTEAD 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 1

ENABLING PUBLISHING FEATURES IN A COLLABORATIVE SHAREPOINT

SITE

WHAT WE’RE FOCUSED ON TODAYHOW ARE WE DOING FOR TIME?• SETUP OUR SHAREPOINT SITES TO USE DESIGN MANAGER -

CHECK

MAPPING A DRIVE TO THE DESIGN FILESNOT 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 FILESSELECT THE DESIRED DRIVE LETTER AND THEN PASTE IN THE URL FROM DESIGN MANAGEROPTIONALLY, YOU CAN CHOOSE TO CONNECT USING DIFFERENT CREDENTIALS

MAPPING A DRIVE TO THE DESIGN FILESENTER YOUR CREDENTIALSIMPORTANT – SELECT “REMEMBER MY CREDENTIALS”

MAPPING ERROR

OCCURS MOST OFTEN WHEN MAPPING THE DESIGN FILES IN OFFICE 365IMPORTANT – SELECT “REMEMBER MY CREDENTIALS”, AS SHOWN IN THE PREVIOUS STEP.

DEMO 2

MAPPING A DRIVE TO THE SHAREPOINT DESIGN FILES

WHAT WE’RE FOCUSED ON TODAYTWO 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 HTML STRUCTURE – CHECK

DESIGN MANAGER OVERVIEWDESIGN 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 OVERVIEWMASTER 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 3

REVIEWING THE OUT-OF-THE-BOX SHAREPOINT MASTER PAGES

WITH DREAMWEAVER

WHAT WE’RE FOCUSED ON TODAYTHREE 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 HTML STRUCTURE – 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

DEMO 4

WHAT WE’RE FOCUSED ON TODAYWHEW – 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 HTML STRUCTURE – 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 INFORMATIONTROY LANPHIER

EMAIL: T.LANPHIER@GUIO.COMBLOG: HTTP://WWW.GUIO.COM/TROY

TWITTER: @TROYLANPHIER