Intro to SharePoint 2010 Branding

Slides:

Advertisements

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

Advertisements

MICHAEL MARINO CSC 101 Whats New in Office Office Live Workspace 3 new things about Office Live Workspace are: Anywhere Access Store Microsoft.

April Dunnam Lead SharePoint Consultant/Developer SharePoint 2013: Intro to Branding and Design Manager.

Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013

Learn the techniques to create a SharePoint 2010 web site from an existing branded web site.

Browser Toolbars You Shouldn’t Do Without How the WAT and WDT Can Help You Design Accessible Websites.

How to make SharePoint 2010 not look like SharePoint Branding for Developers By Matt Huber.

Overview of Office 2003 Corinne Hoisington Central Virginia Community College.

1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.

Chapter 8 Designing with Cascading Style Sheets. Chapter 8 Topics Building three different types of complete Web pages using CSS: Build a style sheet.

Developing Branding Solutions for 2013 Thomas Daly,

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

UX01 A Guided Tour Through SharePoint HTML, CSS, and Master Page Resources Chandima Kulathilake Microsoft MVP (Microsoft Office SharePoint Server)

Microsoft SharePoint 2010 Upgrade Preview FSU SharePoint Users Group Presents: Thursday, December 1 st, 2011.

2. Introduction to the Visual Studio.NET IDE 2. Introduction to the Visual Studio.NET IDE Ch2 – Deitel’s Book.

Working with Layouts and Graphics. 1. The layout of a slide can be changed at any time during the creation of the presentation. 2. Various types of slide.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?

With Microsoft Office2007 Intermediate© 2008 Pearson Prentice Hall1 PowerPoint Presentation to Accompany GO! with Microsoft ® Office Volume 1 Intermediate.

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Customize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan.

Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.

Extreme Makeover: SharePoint 2013 Edition

Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.

Responsive Design using PeopleTools 8.54

Cascading Style Sheets: Got Branding?. What is CSS? CSS = Cascading Style Sheets Styles define how HTML (web) elements are displayed. One (or more) style.

SHAREPOINT BRANDING SHAREPOINT PAKISTAN USER GROUP – FEB 2012.

Lesson 19: Site Development with FrontPage 2003 – Advanced Features.

SharePoint Branding "just not look like SharePoint!" Branding is the act of creating a specific image or identity that people recognize in relation to.

Daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Wijmo Troy Taylor. What is Wijmo? -Wijmo is a kit of over 40 UI widgets, optimized for client-side web development. -HTML5 -jQuery -CSS3 -SVG.

Pasewark & Pasewark 1 PowerPoint Lesson 4 Expanding on PowerPoint Basics Microsoft Office 2007: Introductory.

Tutorial 3 Adding and Formatting Text with CSS Styles.

XP Browser and Basics COM111 Introduction to Computer Applications.

Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Browser Wars (Click on the logo to see the performance)

Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.

Planning Site Design and Page Layout. Identify Best Practices Demonstrate Consistency: – One way to ensure a professional look and feel to a website –

1 © Xchanging 2010 no part of this document may be circulated, quoted or reproduced without prior written approval of Xchanging. MOSS Training – UI customization.

OV Copyright © 2007 Element K Content LLC. All rights reserved. Exploring the Word Environment  Explore the User Interface  Work with the Ribbon.

Word 2003 The Word Screen. Word 2003 Screen File Menu –Holds the options for creating a new document, opening a document, saving a document, printing.

Designing an Internet-Facing Web Site Using SharePoint 2010 Elisabeth Olson Program Manager - Microsoft SharePoint.

How does it work and what has been changed? Commands EVERYWHERE.

Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.

Thực hiện: D3 GVLT: BROWERS. Browser Compatibility I Check the compatibility II Tools III.

COM: 111 Introduction to Computer Applications Department of Information & Communication Technology Panayiotis Christodoulou.

Internet Searching the World Wide Web. The Internet and the World Wide Web The Internet is a worldwide collection of networks that allows people to communicate.

Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.

COMP 143 Web Development with Adobe Dreamweaver CC.

XP Creating Web Pages with Microsoft Office

Microsoft Office Illustrated Creating a Web Publication.

Microsoft FrontPage 2003 Illustrated Complete Creating a Web Site.

Intro to SharePoint 2013 Branding

Planning Site Design and Page Layout

Kentico CMS Essentials Training Self Paced

Objectives At the end of this session, students will be able to:

Jon Flanders Senior Consultant MCW Technologies

Getting Started with Dreamweaver

Driving User Adoption with Custom Branding Development

Driving User Adoption with Custom Branding Development

Developing Branding Solutions for 2013

Introduction of FrontPage

Browser Engine How it works…..

Tech Ed North America /1/2019 2:58 AM Required Slide

Microsoft PowerPoint 2007 – Unit 2

Branding with SharePoint 2010

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Presentation transcript:

Intro to SharePoint 2010 Branding Presented by Thomas Daly tdaly@bandrsolutions.com

Who am I? A SharePoint developer who specializes in implementing designs and creating web components to enhance the user interface and user experience.

Outline What’s New in 2010 Tools & Supported Browsers Approaches to Branding Master Pages Themes Demo

What’s New – Changes Table < Div Dialog Boxes Better & More cross browser support Office Theme Engine Tie custom CSS into theme engine

Tools & Supported Browsers IE Dev Toolbar (embedded in IE8) Firebug / Firebug Lite SharePoint Designer 2010 ColorPic Supported Browsers Internet Explorer 7 & 8 Mozilla Firefox 3.6 Safari 4.04

Other Browsers & Tools Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome; Chrome Built in developer tool bar Opera Dragonfly

Approaches to Branding Theme – covers the overall color scheme of the site Master Page & Custom CSS – complete control over look and feel.

Master Pages Starter Master Pages – new term for Minimal Master Pages http://startermasterpages.codeplex.com/ Includes 3 master pages: regular, foundations, meeting workspaces Provides clean starting point for branding Well documented for easy understanding V3 Master Page Support

Classes s4-notdlg - prevent from showing in dialog window Team Site Home Page Elements and CSS Classes - http://msdn.microsoft.com/en-us/library/ms438349.aspx

Ribbon Customizing the Ribbon Position - http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx

Themes Set of graphics and cascading style sheets that control the look of your site. Uses Office themes (.THMX) 12 colors, 2 fonts

Themes 3 Approaches to creating/updating the theme Existing theme can be modified in UI (Publishing Features) New theme can be created in PowerPoint and imported Microsoft Theme Builder Tool http://connect.microsoft.com/themebuilder

Theme Engine Attach Custom CSS – EnableCssTheming Enable custom CSS to see themes - /Style Library/en-us/Themable Capabilities – ref Replace colors, Replace fonts Recolor images - Blending, Tinting, Fill

Upgrading Branding Master Page MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx

Demo Theme Show V3 Master Page Support Show Starter Master Create through PowerPoint, Import Update through UI Theme Tool Show V3 Master Page Support OOTB v3.master Heather base master page Show Starter Master Apply Blank Master Page Apply Customized Master Page Tie into theme engine w/ custom css (/theme site)

Questions? Questions / Comments Contact information Thomas Daly tdaly@bandrsolutions.com

Things to add Mobile Page Layouts