Date(s) - 03/20/2017 - 03/23/2017
8:00 am - 4:00 pm - Central timezone unless otherwise noted.
Duration: 4 days – Online Only
SharePoint Brand Camp 2013 is an intensive 4-day course for web designers and advanced SharePoint users who need to learn SharePoint-specific techniques to design web pages and brand websites in a SharePoint 2013 environment. You will also learn how to create and design custom master pages that work in Publishing sites as well as in Team sites. You will learn how to override and extend the core CSS styles that give SharePoint 2013 sites their standard look and feel. You will also learn how to customize the look and feel of publishing pages by creating custom page layouts. SharePoint Brand Camp 2013 spends time focusing on the SharePoint branding features that are new with SharePoint Server 2013. You will learn how to configure Managed Navigation within a Publishing site as well as how to create publishing pages with friendly URLs.
The course examines the new Designer Manager features along with its strengths and limitations. You will learn to use Design Manager to convert a pure HTML page layout into a SharePoint master page and to add common SharePoint page elements using Design Manager snippets. You will also see how to leverage the Content By Search Web Part as well as how to customize it output using a display Template. The course examines responsive design and device channels and discusses best practices for targeting users with tablets and various types of mobile devices. The last part of the course covers other advanced SharePoint publishing features including Variations, Catalog Sites and Cross-site Publishing.
Students should have a basic knowledge of HTML and CSS. It is also recommended (but not required) that students have previous experience with
SharePoint, working with team sites and/or publishing sites, as well as web design tool such as SharePoint Designer or Dreamweaver.
Module 01: Branding and Website Design
This module begins with an overview of branding, website design, and usability best practices. It poses essential questions that should be asked at the start of any SharePoint 2013 branding project, such as who is the intended audience and which browsers and devices should be supported. The module introduces the developer tools built into Chrome and the Internet Explorer as well as Firebug in FireFox. The module will also discuss which aspects of HTML5 should be used in a modern website design.
- Branding and Website Design
- Determining the target audiences
- Cross-browser compatibility
- Web designer tools for HTML and CSS
- Tablets and mobile devices
- What do you need to know about HTML5?
Module 02: Team Sites Versus Publishing Sites
This module discusses essential similarities and differences between Team sites and Publishing sites. You will learn how to create and utilize site columns and content types to track content in a SharePoint list. You will also be given an overview of the Publishing features in SharePoint 2013 and learn how the SharePoint publishing scheme is based on publishing pages and page layouts. The module will also discusses the differences between how navigation is configured in a Team site versus a Publishing site.
- SharePoint Site Fundamentals
- Understanding Team Sites
- Site Columns and Content Types
- Understanding Publishing Sites
- Navigation in a Publishing Site
Hands-on Lab: Working with Team Sites and Publishing Sites
- Exercise 1: Working with a Team Site in SharePoint 2013
- Exercise 2: Activating and Deactivating the MDS Feature
- Exercise 3: Working with a Publishing Site in SharePoint 2013
- Exercise 4: Configuring Anonymous Access for Testing Purposes
- Exercise 5: Creating, Editing and Approving Publishing Pages
Module 03: SharePoint and Branding Assets Overview
This module explains how SharePoint 2013 processes pages in a SharePoint site by integrating .aspx pages together with master pages and CSS. You will learn about the standard SharePoint branding elements added to every sites such as the Master Page Gallery and the master pages included out of the box. The module also explains the difference between site pages and application pages from the perspective of a web designer. The final section of this module introduces the new Composed Looks feature of SharePoint 2013 and shows how it can be used to change the look and feel of the current site.
- Branding in SharePoint
- Team Site Design Assets
- Applying a Composed Look
- Publishing Site Design Assets
- Applying a new Master
Hands-on Lab: Working with SharePoint Branding Assets
- Exercise 1: Opening SharePoint Sites using SharePoint Designer 2013
- Exercise 2: Use SharePoint Designer 2013 to Upload a Custom Master Page
- Exercise 3: Approving and Applying a Custom Master Page
Module 04: Using CSS in SharePoint 2013
This module teaches students best practices for working with CSS in SharePoint. The module begins with an overview of CSS in SharePoint, then discusses the role of corev15.css, and how to work with and around it. The next section covers implementing a custom CSS and takes a deep dive into the use of browser Web Developer Tools to target and override default SharePoint styles.
- Quick review of CSS
- CSS in SharePoint
- Styling a SharePoint site using a custom CCS file
- Reverse Engineering HTML and CSS
- Writing and maintaining CSS for SharePoint
Hands-on Lab: Using CSS in SharePoint 2013
- Exercise 1: Styling a Layout Using CSS
- Exercise 2: Use Developer Tools to Find and Overwrite corev15.css Styles
- Exercise 3: Add Web Font with @font-face
- Exercise 4: Adding an Alternate CSS
Module 05: Introduction to Design Manager
This module provides an in depth look at what the Design Manager is and its role in branding SharePoint Publishing sites. You will learn how to create a branded SharePoint site from an HTML and CSS prototype. This module will introduce the Snippet Gallery and Device Manager, which will both be discussed greater detail in later modules of this course. The final section of this module will cover creating, exporting, and importing Design Packages.
- Introduction to Design Manager
- Mapping a drive to a Publishing site
- Converting HTML pages into Master Pages
- Working with Design Manager Snippets
- Other Design Manager Features
- Design Packages
Hands-on Lab: Working with Design Manager
- Lab Setup: Change Site and System Master Page back to Seattle
- Exercise 1: Mapping the Master Page Gallery
- Exercise 2: Upload brand assets to the Master Page Gallery
- Exercise 3: Converting an HTML file to a Master Page (.master)
- Exercise 4: Publish and Apply wingtip.master
- Exercise 5: Adding a Snippet to a Master Page
- Exercise 6: Creating a Design Package
Module 06: Master Pages in SharePoint 2013
This module is dedicated to understanding and customizing master pages in a SharePoint 2013 environment. The first section provides a thorough walk through of seattle.master, reviewing necessary placeholders, server controls, and their location within the master page. You will also learn about the additional placeholders and server controls available in the Snippet Gallery, and their uses. This module also covers configuring the Ribbon, as well as changing the location and appearance of the standard SharePoint navigation controls.
- Master Pages in SharePoint 2013
- Walkthrough of seatle.master
- Creating Custom Master Pages
- Designing your own Starter Master Page
Hands-on Lab: Creating and Testing Custom Master Pages
- Exercise 1: Creating a Custom Master Page
- Exercise 2: Linking a Custom Master Page to a CSS File
Module 07: Page Layouts
This module provides students with the knowledge to create custom page layouts. The first sections discusses the role of Page Layouts in a SharePoint Publishing Site. Next, you will learn how to create a Page-derived content type which can be associated with one or more page layouts. Next, you will then learn how to create and customize page layouts using SharePoint Designer, as well as using Design Manager. The final section covers configuring page layouts in publishing sites to control which page layouts are available in a specific site as well as how to assign the default page layout.
- Overview of Page Layouts
- Creating Page-derived Content Types
- Creating Page Layouts with SharePoint Designer
- Creating Page Layouts with Design Manger.
- Configuring Page Layouts in a Publishing Site
Hands-on Lab: Creating and Configuring Page Layouts
- Exercise 1: Creating Site Columns and a Page-derived Content Type
- Exercise 2: Creating a Custom Page Layout
Module 08: Web Parts and XSLT
This module covers the use of web parts, and styling them using CSS and XSLT. First, the module presents an overview of web parts available in SharePoint 2013 out of the box. The module will emphasize web parts commonly used in publishing sites which include the Table of Content Web Part, the Summary Links Web Part and the ever-popular Content Query Web Part. The modules then moves on to discuss how to style these web parts using XSLT which will involve a quick primer on the XSLT language and simple ways to use it along with CSS to customize the look of content displayed using web parts such as the Content By Query Web Part.
- Overview of Web Parts in SharePoint 2013
- The Table of Content Web Part
- The Summary Links Web Part
- The Content Query Web Part
- Customizing Web Part Display using XSLT
Hands-on Lab: Customizing Sites using Web Parts and XSLT
- Lab Setup: Master Page Change and Content Builder
- Exercise 1: Configure the Summary Links Web Part
- Exercise 2: Adding Web Parts to a Publishing Site
- Exercise 3: Working with the Content By Query (CBQ) Web Part
- Exercise 4: Customizing Content By Query (CBQ) Web Part Output using XSLT
Module 09: Display Templates in SharePoint 2013
- Creating a Display Template for a Standard List
- Display Templates used in SharePoint 2013
- Using Display Templates with Search Results
- Using the Content Web Search (CBS) Web Part
Hands-on Lab: Creating and Configuring Display Templates
- Exercise 3: Creating Display Templates for Search Results
- Exercise 4: Configuring the Content By Search Web Part with a Display Template
Module 10: Responsive Design and Device Channels
- Introduction to Responsive Design
- Understanding Media Queries
- Device Channel Configuration for Mobile
- Customizing Page Layouts with Device Channels
Hands-on Lab: Working with a Responsive Design and Device Channels
- Lab Setup: Master Page Change
- Exercise 1: Writing Media Queries
- Exercise 2: Creating a Device Channel
- Exercise 3: Associate a Master Page with a Device Channel
Module 11: Composed Looks
This module covers creating and applying a customized composed look to a team site. The module begins by reviewing the OOB look, and how to make simple modifications to them. Next you will learn to create custom font and color files that can be used to create a composed look. The last section addresses when and how to create a custom master page and CSS to add to the font and color files to create a fully branded team site.
- Anatomy of a Composed Look
- Modifying a Composed Look
- Creating an .spcolor file using the Color Palette Tool
- Creating an .spfont file for a custom Composed Look
- Creating and Configuring Custom Composed Looks
- Packaging and Distribution
Hands-on Lab: Composed Looks
- Exercise 1: Changing the Logo of a Team Site
- Exercise 2: Modify an OOB Composed Look
- Exercise 3: Create a Custom .spcolor File
- Exercise 4: Create a Custom .spfont File
- Exercise 5: Create a Custom Composed Look
Module 12: Advanced Publishing SharePoint Features
This module gives an overview of a few additional advanced Publishing features provided by SharePoint 2013. Discussions will include configuring SEO, using variations, creating catalog sites and implementing cross-site publishing.
- Understanding SharePoint SEO Features
- Adding Multilingual Support using Variations
- Understanding the Use of Catalog Sites
- Implementing Cross-site Publishing
This class is fully booked. Please contact firstname.lastname@example.org or view our schedule for upcoming dates.