IntroductionWelcome| 00:04 | Hi! This is Simon Allardice and
welcome to SharePoint Designer 2010:
| | 00:08 | Branding SharePoint Sites.
| | 00:10 | SharePoint is a powerful platform for
making web sites both for internal use and
| | 00:15 | for public-facing web sites.
| | 00:16 | But all of these SharePoint sites
begin by using standard templates.
| | 00:20 | And while they're very functional, they
can look dull unless we choose otherwise
| | 00:24 | and we choose to customize them.
| | 00:26 | So in this course, you'll see how to
take your current Web design skills and
| | 00:30 | change the look and feel of
SharePoint 2010 web sites.
| | 00:33 | From basic methods like changing and
creating themes to rearranging the layout
| | 00:39 | of pages, working with navigation,
applying simple CSS changes, all the way to
| | 00:46 | full custom designs using what are
called Master Pages and Page Layouts.
| | 00:51 | But here is the thing:
| | 00:53 | customizing SharePoint is not just
conventional Web design and it's very easy to
| | 00:58 | get frustrated if you don't
know your way around SharePoint.
| | 01:01 | So we'll also explore what you really
need to know about SharePoint from a
| | 01:04 | Web design perspective.
| | 01:06 | Welcome to SharePoint Designer 2010:
| | 01:08 | Branding SharePoint Sites!
| | Collapse this transcript |
| What you should know| 00:00 | I am making a couple of assumptions
about your background, and I need these
| | 00:04 | things to be true for this
course to be really useful for you.
| | 00:07 | I am expecting one, basic Web Design
skills, and two, basic SharePoint skills.
| | 00:12 | Let me explain what I mean by that.
| | 00:14 | First, you have the
fundamental skills of current Web design.
| | 00:17 | You know HTML and you know CSS.
| | 00:20 | You can work with colors and fonts,
layout and images on Web pages. Because
| | 00:25 | this course is not so much about Web
design in general as it is about taking
| | 00:30 | your existing Web design skills and being
able to apply them in the world of SharePoint.
| | 00:35 | You should be comfortable navigating
around SharePoint sites, know how to work
| | 00:40 | with lists and with document libraries,
be familiar with using the menu to get
| | 00:45 | to different settings of a SharePoint
site, and also how to work with the Ribbon
| | 00:50 | to edit and interact with individual Web pages.
| | 00:53 | Now, if that isn't the case,
take a look at our SharePoint 2010:
| | 00:56 | Getting Started course, or even better, the
SharePoint 2010 Essential Training course.
| | 01:01 | Now, if you are coming from a classic
Web designer role, you might think you
| | 01:06 | don't really need to know SharePoint.
| | 01:08 | Maybe you've been working on the Web for
years. You might have worked with other
| | 01:11 | content management systems like Joomla!
| | 01:13 | or Drupal and you are thinking you just
want to develop your great design, come
| | 01:18 | along, drop it into SharePoint, and walk away.
| | 01:20 | I understand where you are coming from, but
that approach doesn't usually work very well.
| | 01:25 | And that's because SharePoint is a
fundamentally different platform.
| | 01:28 | For a start, it isn't primarily a
website content management system.
| | 01:33 | What we are focusing on this course is
a small part of what SharePoint can do.
| | 01:38 | And that's important because if you
don't know the larger context of what
| | 01:41 | SharePoint is and how it is used, you
are likely to build a design that doesn't
| | 01:46 | work. Because even using SharePoint for
a short time will get you familiar with
| | 01:51 | things like working with the Ribbon.
| | 01:53 | It will get you understanding things
like the typical navigation structure
| | 01:57 | inside SharePoint, how to work with
lists and with libraries, how to use things
| | 02:02 | like the search functionality,
understand parts of SharePoint like the Recycle
| | 02:08 | Bin and the ability to tag content.
| | 02:11 | And this is all really important if
you are trying to build a design that
| | 02:14 | is going to allow people to use the
functionality that's already there in the SharePoint.
| | 02:19 | So while I need you to know your way
around SharePoint 2010, it isn't essential
| | 02:24 | that you have experience with the
application SharePoint Designer 2010.
| | 02:28 | We will be using it to do much of our
customization, but I will cover what you
| | 02:33 | need to know about it in this course.
| | 02:35 | Now one thing to bear in mind is
this course is very specific to the 2010
| | 02:39 | version of SharePoint.
| | 02:41 | If you are working with SharePoint
2007, take a look at the 2007 version of
| | 02:46 | this course.
| | Collapse this transcript |
| Server requirements| 00:00 | One of our first questions needs to
be, "What are you going to use when
| | 00:04 | learning how to do this, when you
are experimenting with creating and
| | 00:07 | customizing SharePoint sites?"
| | 00:09 | Now, I'm fully expecting that you
already have access to a SharePoint 2010
| | 00:13 | server, that the SharePoint 2010 product
has been installed somewhere on your network.
| | 00:19 | And you are just going to need a test
site, or two or three, that your SharePoint
| | 00:24 | administrator (and that may even be
you) has created for you to work with.
| | 00:28 | But at the end of the day, I'm
expecting that you can open up a Web browser, type in
| | 00:33 | the address of a SharePoint site
that you have access to, and go there.
| | 00:37 | Now I'm working with my own SharePoint
server here, but I'm expecting you can
| | 00:42 | see something similar to this, which
would be a team site, or it could be
| | 00:46 | something similar to this, which would
be a SharePoint publishing portal, or
| | 00:50 | even this, which is a SharePoint blank site.
| | 00:53 | But you should have a site to work
with that you can experiment with.
| | 00:57 | And if you have that, great!
| | 00:59 | We can just move ahead.
| | 01:00 | But what if you don't? Well, you
might think you can just quickly install
| | 01:04 | SharePoint 2010 on your own machine,
but that's not a great solution.
| | 01:08 | SharePoint is one of the most
complex products you could ever dream of
| | 01:12 | installing because it's
not a standalone program;
| | 01:15 | it's a really big platform that's
designed to be integrated with every part
| | 01:19 | of your organization.
| | 01:20 | It requires a database, it's integrated
with backend parts of your system like
| | 01:25 | IIS and DNS and Active Directory.
| | 01:27 | And while it is technically
possible to install SharePoint 2010 on a
| | 01:31 | well-configured desktop or laptop, I
won't be going into SharePoint installation
| | 01:36 | at all in this course.
| | 01:37 | Installing SharePoint is a
completely separate skill all in itself.
| | 01:41 | Now what I'm occasionally asked by
designers is if they can get say a quick
| | 01:45 | offline copy of a SharePoint site to work with.
| | 01:48 | But unfortunately, there really is no
such thing as having an offline copy of a
| | 01:52 | full SharePoint site so that you
can use your own Web design tool.
| | 01:56 | SharePoint doesn't work
that way, as we'll shortly see.
| | 02:00 | But once you've got a SharePoint site
we can actually navigate to, we can move
| | 02:04 | into what to do with it.
| | Collapse this transcript |
|
|
1. Getting StartedExploring the SharePoint product line| 00:00 | Before we get into using SharePoint
Designer 2010, we have to talk about
| | 00:04 | SharePoint 2010 itself.
| | 00:06 | As you probably know, SharePoint
2010 does not describe one product.
| | 00:11 | You can't go and actually install
something called SharePoint 2010.
| | 00:15 | It's a useful phrase that describes
several different products and technologies
| | 00:20 | that can be installed on a server.
| | 00:21 | But if we're going to customize
SharePoint 2010, we need to know which
| | 00:26 | particular flavor of
SharePoint we're dealing with.
| | 00:29 | And we have three possibilities.
| | 00:31 | First, your system administrator
could have installed something called
| | 00:35 | SharePoint 2010 Foundation.
| | 00:38 | This is a free download from Microsoft.
| | 00:40 | It's installed on a backend Windows
server and made available across a network.
| | 00:45 | And SharePoint 2010 Foundation actually
includes most of what people talk about
| | 00:50 | when they talk about SharePoint.
| | 00:51 | It includes the ability to make websites,
to work with collaboration tools,
| | 00:56 | document management,
office integration, and so on.
| | 01:00 | Alternatively, your sysadmin could
have installed SharePoint Server 2010.
| | 01:04 | Now this is not free, but many
organizations will use it SharePoint Server 2010
| | 01:10 | because it adds extra
functionality on top of SharePoint Foundation.
| | 01:15 | It is built around SharePoint Foundation.
| | 01:18 | And that means that if you have
SharePoint Server 2010, you automatically have
| | 01:23 | every feature that's in SharePoint
Foundation, and a bunch more besides.
| | 01:28 | Now, SharePoint Server 2010
actually comes in two editions:
| | 01:32 | the Standard Edition and the Enterprise Edition,
which adds even more features to this platform.
| | 01:38 | Now most of these features we don't
care about in this course, but there is one
| | 01:42 | feature available in SharePoint
Server 2010, both the Standard and the
| | 01:46 | Enterprise versions, that is highly
impactful when we're customizing web sites.
| | 01:51 | And that's something called the
Publishing feature, which we'll talk about shortly.
| | 01:55 | So it is important to know whether you
just have SharePoint 2010 Foundation or
| | 02:00 | SharePoint Server 2010.
| | 02:01 | Now, how do you know which one you have?
| | 02:04 | The easiest way: ask your
administrators, ask the people who installed it.
| | 02:08 | But there are ways of
telling, as we'll see later.
| | 02:11 | Now, in this course, we're going to begin
with how to customize sites that could be
| | 02:15 | created in every version of SharePoint
2010, and then we'll see how to customize
| | 02:20 | those sites that can only be
created in SharePoint Server 2010.
| | Collapse this transcript |
| Understanding the Publishing feature| 00:00 | SharePoint 2010 Foundation, the free
version of SharePoint, provides a lot of
| | 00:05 | functionality for making web
sites and for customizing them.
| | 00:08 | But if your organization has installed a
SharePoint 2010 Server, either Standard
| | 00:13 | or Enterprise, one of the extra
pieces you have that isn't in Foundation is
| | 00:17 | something called this Publishing Feature.
| | 00:19 | It's also referred to as
Web Content Management or WCM.
| | 00:24 | Now let's get something straight.
| | 00:26 | You can make and customize dozens or
even hundreds of web sites using any
| | 00:31 | version of SharePoint 2010.
| | 00:33 | You do not need this publishing
feature to make a web site in SharePoint,
| | 00:38 | but you might want it.
| | 00:40 | And it all comes down to
what is each web site for.
| | 00:44 | See when most end-users talk about
SharePoint web sites, they think Team Sites,
| | 00:50 | Document Workspaces, Meeting Workspaces.
| | 00:53 | These are sites that are designed for
the idea of collaboration, because if you
| | 00:57 | use that site, you don't just read it,
you take part in it, you upload documents
| | 01:02 | to the document libraries, you add
entries to the calendar, you add items to the
| | 01:07 | list in those sites.
| | 01:08 | And usually, the audience for each site is
small, just a few people working together.
| | 01:15 | And it's really an informal level of control
over the content that goes into those sites.
| | 01:20 | It's more important that people find
them easy to use and easy to add to.
| | 01:24 | But you could also create a SharePoint
site for completely different reasons,
| | 01:28 | say for a public Internet Web site or
for a large internal corporate portal
| | 01:33 | where the purpose of these sites is
not about collaboration but it's about
| | 01:37 | communication, about publishing information,
and suddenly the audience is much bigger.
| | 01:43 | But for now, most people of these
sites are consumers of the information,
| | 01:47 | not contributors to it.
| | 01:49 | And you almost certainly want much
tighter control over who can create pages,
| | 01:54 | over what those pages look like.
| | 01:56 | You might want workflows so the content
can be scheduled or the content can be
| | 02:01 | formally approved before it goes live.
| | 02:03 | And that's part of what this
Publishing Feature gives you.
| | 02:06 | But what exactly is it?
| | 02:08 | This term Publishing Feature is vague,
and publishing is a word used all over the
| | 02:13 | place in SharePoint.
| | 02:14 | There is something called the
Publishing Feature, but there is also something
| | 02:17 | called the Publishing Portal, there
is something called a Publishing Site.
| | 02:20 | Let's face it, it doesn't help very much,
it doesn't really tell you what this
| | 02:24 | Publishing Feature means.
| | 02:26 | See, when we talk about features of a product,
we usually just mean something the product does.
| | 02:32 | But in SharePoint,
features mean something special.
| | 02:36 | SharePoint features are chunks of
functionality that can be turned on or off
| | 02:40 | at the flick of a switch.
| | 02:41 | There are several places in SharePoint
where an administrator can have a series
| | 02:45 | of buttons to activate or deactivate features.
| | 02:49 | And Publishing is one of those features
that can be turned on or off for a site
| | 02:54 | collection or an individual site.
| | 02:56 | Now, if you have SharePoint Server 2010,
some site templates have this feature
| | 03:01 | activated automatically.
| | 03:03 | If you are creating new site
collections in SharePoint Central Administration
| | 03:08 | there is a template called the
Publishing Portal and one called the Enterprise
| | 03:12 | Wiki, and both of these have
that Publishing feature turned On.
| | 03:16 | Now we'll see both of
these sites a little later.
| | 03:19 | But although they are turned on
automatically for these site templates, you can
| | 03:23 | theoretically turn this Publishing
feature on on any site or site collection.
| | 03:28 | So I am looking here at a site called
a Publishing Portal in SharePoint 2010.
| | 03:33 | This is how it appears as soon as it
has been created, so I haven't done any
| | 03:37 | customization to this.
| | 03:39 | Now, this has the Publishing feature enabled.
| | 03:42 | And one visual difference would be that
the drop-down menu has a few more options.
| | 03:47 | If the Publishing feature was off,
you would have fewer options.
| | 03:50 | For example, with this site, I have this
option here called Manage Content and Structure.
| | 03:56 | And I if click that, I am going to see
kind of a tree structure of this entire
| | 04:00 | web site, which allows me to navigate through it.
| | 04:02 | Whereas if I was on a SharePoint site
that did not have the Publishing feature
| | 04:06 | enabled, I would not see that option.
| | 04:09 | But aside from this menu option, behind
the scenes there is a lot more going on.
| | 04:13 | If I go back to the site with Publishing
enabled and go into All Site Content, I
| | 04:19 | am going to find that there is a
bunch of libraries that have been created.
| | 04:22 | In fact, I will see that several of
them are described as being created by
| | 04:26 | the Publishing feature.
| | 04:28 | We have places suggested to store
images and pages and documents for the entire
| | 04:32 | site collection and images
for the entire site collection.
| | 04:35 | But we'll also find things have been
created to work with reusable content and
| | 04:40 | workflow tasks because the Publishing
feature brings with it the ability to work
| | 04:45 | with workflow and
approval and content scheduling.
| | 04:48 | As we'll see later, it's very
conscious of versioning and having the idea of
| | 04:52 | having multiple layout
options for pages on our site.
| | 04:56 | If I were look at the same equivalent
for a site without Publishing enabled, I
| | 05:00 | will not see as much content here.
| | 05:04 | But here is the thing:
| | 05:05 | the Publishing feature could be
activated anywhere, but typically you wouldn't
| | 05:10 | turn this on for something like a
SharePoint Team Site or a Document Workspace
| | 05:14 | because then you would be adding
substantial drag to the system;
| | 05:17 | it would get in the way.
| | 05:19 | If I am working with the Team Site,
it's more important that I can quickly
| | 05:23 | make a change here. Then it goes through
approval and versioning and content scheduling.
| | 05:28 | So the biggest single impact that you
will be concerned about as a Web designer
| | 05:32 | when visually customizing SharePoint
sites is not whether you are customizing a
| | 05:36 | SharePoint Foundation Site
or a SharePoint Server Site.
| | 05:40 | It's whether you are customizing a site
with the Publishing feature activated or
| | 05:45 | a site without the Publishing feature activated.
| | Collapse this transcript |
| Using SharePoint and SharePoint Designer| 00:00 | Now, if you have played around with
SharePoint for any time, you'll know you can
| | 00:03 | do a lot with it just using a Web browser.
| | 00:06 | If you have the right permissions, you'll be
able to use the menu options to make new pages.
| | 00:11 | You can take an existing page and use
the Edit option of the Ribbon to change
| | 00:16 | the content on that page.
| | 00:25 | You can grab Web parts used on these
pages and drag them around, move images
| | 00:30 | around, change them, delete them.
| | 00:32 | You can save your changes or just
discard the changes you have made.
| | 00:37 | You can use the menu options to add
new lists and libraries which themselves
| | 00:41 | will generate new pages to
edit those lists and libraries.
| | 00:44 | But you can't do everything through the
Browser and to customize these sites in
| | 00:48 | a significant way will require an
application called SharePoint Designer 2010.
| | 00:53 | Now unlike SharePoint 2010 Foundation
and SharePoint Server 2010 which are
| | 00:59 | installed on a shared server,
SharePoint Designer 2010 is a free application
| | 01:05 | from Microsoft that is installed on
your own machine, your own desktop or
| | 01:09 | laptop, like installing
Dreamweaver or Photoshop or Microsoft Word.
| | 01:13 | And once installed, instead of opening
a SharePoint site in a Web browser, you
| | 01:18 | can open that same site in
SharePoint Designer and do more with it.
| | 01:22 | SharePoint Designer 2010 is
really three programs squeezed into one.
| | 01:27 | People use it for three very
big but very different reasons.
| | 01:31 | First, they use it to change the visual
appearance of a SharePoint site, change
| | 01:36 | fonts and colors, define
custom layouts and custom templates.
| | 01:39 | And that's what we'll be doing in this course.
| | 01:41 | But you can also use SharePoint
Designer to create and edit workflows.
| | 01:46 | These are defined business processes,
sets of rules and tasks to be automated.
| | 01:52 | But this is not what we are doing here.
| | 01:54 | And three, you can affect the
structure of SharePoint site.
| | 01:58 | Not just the presentation, not how it
looks, but what the sites are actually
| | 02:02 | made off, their lists and their libraries.
| | 02:05 | You can also connect to data sources and make
the SharePoint site talk to the outside world.
| | 02:09 | Again, not really what we are focused on here.
| | 02:12 | But because it's used for three very
different reasons, do expect that we won't
| | 02:16 | explore every part of
this program in this course.
| | 02:19 | We are going to focus on using
SharePoint Designer to do visual customization of
| | 02:24 | SharePoint that cannot be done in the Browser.
| | 02:27 | So if you haven't already installed it,
now is the time to download it from the
| | 02:31 | Microsoft Office site.
| | 02:33 | SharePoint Designer is free and one of
the easiest ways to get it to is just to
| | 02:36 | search for it using your favorite Search Engine.
| | 02:41 | Do make sure that you are searching
for the 2010 version of this product.
| | 02:44 | I am just going to click this first
link that takes me to microsoft.com. That
| | 02:49 | itself gives me a point to download it.
| | 02:51 | And you'll find it's available in
both 32 bit and 64 bit versions.
| | 02:56 | Now the question might be,
which one do I install?
| | 02:58 | There is no difference in features.
| | 03:01 | What you need to find out is what
version of Microsoft Office you have.
| | 03:04 | So I am just going to jump down and open up
a Microsoft Office application such as Word.
| | 03:10 | I am going to jump to my File and to
Help, and I can see over here that is
| | 03:17 | telling me I have a Version 14, but it's 32-bit.
| | 03:22 | And that's because if you have
Microsoft Office 2010 installed, it's actually
| | 03:26 | quite sensitive to whether
it's the 32 bit or 64 bit.
| | 03:29 | It doesn't want to have a mixture of both.
| | 03:32 | And because SharePoint Designer is
technically part of Microsoft Office, I now
| | 03:37 | need the 32 bit version.
| | 03:39 | So I could just go ahead and
download this and install it.
| | 03:42 | Now SharePoint Designer 2010 is not
backwards compatible and it won't work with
| | 03:47 | sites created using SharePoint 2007.
| | 03:48 | So if you still have to work with
multiple versions of SharePoint on the
| | 03:53 | server-side, you can have
multiple versions of SharePoint Designer
| | 03:56 | installed, which is fine.
| | 03:58 | SharePoint Designer 2010 does not
overwrite SharePoint Designer 2007.
| | 04:03 | And that's unlike the other Office programs
which typically do overwrite any predecessor.
| | 04:08 | Now I'm often asked, can someone use
another Web development tool, something
| | 04:14 | they are more familiar with like
Dreamweaver or Coda to change SharePoint?
| | 04:18 | And while, technically, you can do some
level of customization using those tools,
| | 04:23 | after all we will be working with CSS
and with HTML, you'd really be making
| | 04:28 | life hard for yourself when you are
living in the SharePoint world because
| | 04:32 | there are things you can do in
SharePoint Designer in seconds that would take
| | 04:36 | hours do any other way.
| | 04:37 | SharePoint Designer is a program that's
built to understand SharePoint in a way
| | 04:43 | that all other Web design tools don't.
| | 04:45 | And it is the simplest way to do
many of these customization tasks, and
| | 04:49 | certainly the few hours you'll spend
learning it will be more than worth it.
| | Collapse this transcript |
| Understanding the different levels of site customization| 00:00 | The reason that I'm talking about
things like the Publishing feature and the
| | 00:04 | different versions of SharePoint is
that I want you to understand that visually
| | 00:07 | customizing SharePoint is not one
situation with one answer with one technique.
| | 00:14 | We will need several different
options available to us to cover a range of
| | 00:19 | complexity depending on
what we are being asked to do.
| | 00:22 | At one end, we might have a simple
requirement to take something we could create
| | 00:26 | in SharePoint Foundation, say a
typical SharePoint Team Site used internally.
| | 00:31 | And instead of the default SharePoint
look and feel, you want to give it a
| | 00:34 | company color scheme, add a logo,
and rearrange the layout of some pages.
| | 00:39 | A lot of this kind of customization is
pretty simple and can actually be done
| | 00:43 | just using the Web browser interface,
although there might be a few tricks worth knowing.
| | 00:49 | Now, at the other end of complexity,
the requirement might be instead to create a
| | 00:54 | public-facing Internet site with
Publishing enabled, with a total custom design,
| | 01:00 | including multiple formal templates
for different categories of Web pages and
| | 01:04 | the ability to schedule content and
control the approval of content, and where
| | 01:10 | anyone viewing this site would have no
idea it's being generated by SharePoint.
| | 01:14 | And we can do that too, but that
will require a whole different set of
| | 01:18 | techniques and a lot of
work in SharePoint Designer.
| | 01:21 | So in between these two, as you will see,
there is a range of different options,
| | 01:25 | all of which we are going to
cover by the end of this course.
| | 01:29 | But we are going to start from the
basic options, covering first what can
| | 01:33 | be done just using the Browser
itself, which is often more than what most
| | 01:37 | people realize.
| | Collapse this transcript |
|
|
2. Working with SharePointExploring a basic site| 00:00 | Now, I expect that you've already made
your way around a few SharePoint sites.
| | 00:04 | But here I'm going to show you
how to explore one from a slightly
| | 00:07 | different perspective.
| | 00:09 | What are the things you should be
paying attention to to get ready to
| | 00:12 | customize this visually?
| | 00:14 | Because there are some parts that will
be easy for you to change and some that
| | 00:17 | won't, and there are some that
you really shouldn't be changing.
| | 00:21 | So I'm going to show you two
very typical SharePoint sites.
| | 00:24 | Neither of them have been
customized; they are as they would appear
| | 00:27 | immediately after creation.
| | 00:29 | What I'm looking at right now
is a SharePoint 2010 team site.
| | 00:34 | This is available in SharePoint
Foundation and, by definition, also then available
| | 00:39 | in SharePoint Server 2010.
| | 00:41 | It's one of the classic built-in
collaboration sites and it's really intended
| | 00:46 | for internal use within a corporate intranet.
| | 00:49 | Now, this is a web site that gives
you this homepage that we're looking at.
| | 00:53 | I haven't changed this, so we're
seeing the default options, the default
| | 00:57 | content, the default navigation.
| | 01:00 | On the left over here under this
Libraries link, we have two document libraries.
| | 01:05 | One called Shared Documents; it's a
regular document library we can upload
| | 01:10 | things to. And the other called Site Pages;
| | 01:13 | this is the suggested location when
creating new web pages on this site.
| | 01:18 | It's actually what's called a Wiki Page
Library and we'll talk about what that
| | 01:23 | means a little later.
| | 01:24 | We also get a calendar
list and we get a task list.
| | 01:29 | We even get a Discussion Board.
| | 01:31 | But regardless of where we are on this
site, the most important area for us is
| | 01:37 | this Site Actions menu up here on the top-left.
| | 01:40 | And this menu, like most in SharePoint,
is very aware of who you are and what
| | 01:45 | you're allowed to do on this site.
| | 01:47 | So when I click it, I have a whole
bunch of options, a lot of which we're
| | 01:50 | going to be exploring.
| | 01:52 | But I'm just going to
change over to another browser.
| | 01:54 | Here, I'm signed on as a different user
with more limited permissions. And here,
| | 01:59 | when I click the Site Actions menu, I get a much
more limited set of options--in fact, just one.
| | 02:05 | But because of this, I would be
unable to do anything significant with
| | 02:09 | customization on this site because this
menu is where we get to create new parts
| | 02:15 | of the site and change the settings of the site.
| | 02:17 | So I'm switching back to
where I have better options here.
| | 02:21 | Although we're looking here at a
SharePoint team site, this could be a
| | 02:25 | document workspace, it could be a
blank site, it could be any classic
| | 02:29 | SharePoint collaboration site.
| | 02:31 | They all share a lot of the same features.
| | 02:34 | For example, they typically have this
section down the left-hand side, and this
| | 02:39 | is referred to as the Quick Launch Bar.
| | 02:41 | Now, there is no particular magic
about that name. There is nothing quick or
| | 02:45 | different about these links--
it's just links like on any site.
| | 02:49 | But in older versions of SharePoint,
there used to be a graphic that ran along
| | 02:53 | the side of the section that actually
said the words Quick Launch, and that's
| | 02:56 | why it's still called the Quick Launch Bar.
| | 02:58 | We also have the Top Link Bar, which
is this area that runs between the Home
| | 03:03 | Tab and the Search Box.
| | 03:05 | Right now, there really isn't
anything on my Top Link Bar except the
| | 03:08 | word Home, but you could have several links
here representing links to different sites.
| | 03:13 | So the Top Link Bar along the top,
the Quick Launch Bar down the left.
| | 03:17 | They're both navigation.
| | 03:19 | Now, navigation in SharePoint is flexible,
and as with any regular web site out there
| | 03:24 | on any place on the web, the navigation
tells you useful links, but it doesn't
| | 03:29 | have to tell you everything that exists.
| | 03:31 | But because SharePoint sites used for
internal collaboration should, for the most
| | 03:35 | part, behave in a standard way,
| | 03:37 | the guideline in SharePoint is that
the Top Link Bar can take you between
| | 03:42 | different useful SharePoint sites, and
the navigation on the left and the Quick
| | 03:46 | Launch Bar can tell you what's
important in this particular site that you're
| | 03:50 | currently looking at.
| | 03:51 | But there's one key link here,
| | 03:54 | simply because this navigation
doesn't have to tell you everything.
| | 03:58 | If you really want to know what exists
in the current site that you're looking
| | 04:03 | at, you're going to click the link that
says All Site Content at the bottom of
| | 04:08 | the Quick Launch Bar. And clicking this
link will take you to a page that will
| | 04:12 | tell you better than
anything what this site is made of--
| | 04:16 | the lists and the libraries, the
building blocks that make up this
| | 04:20 | particular SharePoint site.
| | 04:21 | Here I can see that even though my
Libraries section and my navigation told me
| | 04:26 | that I have two libraries, I can
really see I have a bunch more than that:
| | 04:29 | Customized Reports, Form Templates,
Shared Documents, Site Assets, Style Library.
| | 04:34 | And we have more lists as well.
| | 04:37 | So this page, the All Site Content page,
tells us what this site is made of, and
| | 04:43 | you'll find the ability to get to
this page on pretty much every single
| | 04:46 | SharePoint site there is.
| | 04:47 | Now, if you don't see the All Site
Content link on the page, look for it in the
| | 04:52 | Site Actions menu; you'll see
it as View All Site Content.
| | 04:56 | It tells you it's viewing all
libraries and lists in this site.
| | 04:59 | Now, on this page, I'm going to come
down a little bit past the Libraries and
| | 05:03 | the Lists and come to the section that
says Sites and Workspaces. And what this
| | 05:07 | really means is, are there any other
SharePoint sites that have been created
| | 05:11 | underneath this current one?
| | 05:13 | Now often, if there was, you would have
already seen a link to it on the Top Link Bar.
| | 05:18 | We didn't have a link, but this
tells me that there is a sub-site called
| | 05:22 | Annual Report, and if I click this link, it's
going to take me to a different SharePoint site.
| | 05:28 | Now, this site was created with a
template called a Document Workspace.
| | 05:32 | You might be wondering, well, if
it's a document workspace, is that a
| | 05:36 | workspace or is that a site?
| | 05:38 | Well, in SharePoint, a workspace is a site.
| | 05:42 | Microsoft decided to call some of their site
templates workspaces and some of them sites.
| | 05:47 | The idea is if a site doesn't need to
exist for a long time, say you're creating
| | 05:53 | it to work on a document or work on
a meeting, they're called Document
| | 05:57 | Workspaces and Meeting Workspaces.
| | 05:59 | But really, there is no structural
difference between these and other SharePoint sites.
| | 06:04 | I can see even in this area, I have my
own link to All Site Content that tells
| | 06:09 | me what this particular site is made of.
| | 06:11 | But what I'm going to jump to now is a
different kind of site entirely. It's a
| | 06:15 | slightly more complex SharePoint web site.
| | 06:17 | This one is called the Publishing Portal.
| | 06:20 | Now, this site template is only
available in SharePoint Server 2010.
| | 06:25 | It's intended as the basis for creating
either a public web site or for a large
| | 06:30 | internal intranet-portal, and it has
that publishing feature already activated.
| | 06:36 | And one clue for that is if I come to
the Site Actions menu, most of it looks
| | 06:40 | pretty similar, but I do have links
like this to Manage Content and Structure.
| | 06:46 | And that link only exists when the
publishing feature has been activated.
| | 06:49 | But I can also see that right beneath it,
I've still got a View All Site Content
| | 06:54 | link, and if I click that, it takes me to
an almost identical page that's telling
| | 06:59 | me what this site is made of.
| | 07:00 | I've got a few more
libraries here, a few more lists.
| | 07:04 | But I can see that regardless of if I
have SharePoint Foundation or SharePoint
| | 07:08 | Server, and whether publishing is on or
whether it's off, the internal structure
| | 07:13 | of these sites is managed the same way.
| | 07:16 | All SharePoint web sites are made of a
collection of lists and libraries, and
| | 07:21 | what you see in this All Site Content page is
really telling you what the site is made of.
| | 07:27 | And this is important for us because if
you're coming from a conventional web
| | 07:31 | design background where you kind of
unconsciously think of a web site as being
| | 07:35 | folders full of web pages, that's
not really true in SharePoint. Sure,
| | 07:40 | We can choose to just make a web page.
| | 07:43 | But the Lists and Libraries that exist
in the SharePoint site are what drive the
| | 07:47 | pages that exist and they can
automatically even create them.
| | 07:51 | That's really the key thought when
customizing SharePoint sites--that to be able
| | 07:55 | to change how they look, you need
to understand what they're made of.
| | 07:59 | In the next module, we're actually
going to talk about these building blocks of
| | 08:03 | all SharePoint sites.
| | Collapse this transcript |
| Understanding lists and libraries| 00:00 | When you've explored a few SharePoint
sites, you've probably seen that many of
| | 00:04 | them seem to share the same components.
| | 00:06 | They often have things like a
calendar, they often have task lists and
| | 00:11 | document libraries.
| | 00:13 | That's really because you make
SharePoint sites not by making individual web
| | 00:17 | pages, but almost like putting
together these self-contained building blocks,
| | 00:22 | these components, these lists and libraries.
| | 00:25 | You put them together one way, you'd
get a team site. Put them together another
| | 00:29 | way, you'd get what's called a document
workspace or a meeting workspace. Or put
| | 00:34 | together your own combination to make
a unique site of your own construction.
| | 00:38 | Once you learn the available
lists and libraries in SharePoint, the
| | 00:42 | available building blocks, you can
make some very useful sites, as easy as
| | 00:46 | putting a few blocks together.
| | 00:48 | Now, adding lists and libraries to an
existing site can all be done through the
| | 00:52 | Site Actions menu on the web browser.
| | 00:54 | We can do it using SharePoint
Designer 2.0 as we'll see later, but the end
| | 00:58 | result is identical.
| | 01:00 | I tend to stay in the web browser for the
things I can easily do in the web browser.
| | 01:05 | The best way to get to all of the
Lists and Libraries is to come down to the
| | 01:09 | Site Actions > More Options
section here. Click that.
| | 01:13 | It will show me all the different
things that I can do with this site.
| | 01:16 | I can even filter them down to the
different kind of libraries I can add to this
| | 01:20 | site, the different kinds of
lists I can add to this site.
| | 01:24 | Yours may look a little different from
mine, depending on how you have SharePoint
| | 01:28 | installed and what features you have activated.
| | 01:30 | But in a typical SharePoint site,
you have these building blocks, these
| | 01:33 | Lists and Libraries.
| | 01:35 | The web site and its pages are
generated around these building blocks, whatever
| | 01:41 | lists and libraries you've chosen. And
what that means as a designer is that you
| | 01:45 | don't have as much control over
individual web pages as you might first think
| | 01:50 | because many of them are generated.
| | 01:52 | So I was on a simple team site here, and
I am going to add a new list to the site.
| | 01:58 | I am going to add a place
to store useful contacts.
| | 02:01 | In fact, I'll select that Contacts
list and call it Useful Contacts.
| | 02:06 | Click the Create button.
| | 02:07 | It is now a new building block of this site.
| | 02:10 | What SharePoint is going to do is
automatically generate the page to say add a
| | 02:15 | new item to that list, allowing
me to fill in all the data here.
| | 02:20 | It would generate the page to
allow me to edit an item on that list.
| | 02:24 | It will generate the page to allow
me to view the settings of this list,
| | 02:28 | all done automatically.
| | 02:29 | If instead I decide to add a new
document library, which I can do directly from
| | 02:33 | the Site Actions menu here by
selecting New Document Library, though I could
| | 02:38 | also still do it through the More
Options part of the menu, that's under the
| | 02:42 | Library setting here,
| | 02:43 | it's going to do the same thing.
| | 02:45 | It will generate the page to view that
library, generate the page to upload a
| | 02:49 | document to the library, to edit
the library settings, and so on.
| | 02:52 | Now, if you haven't spent a lot of
time in SharePoint and you are wondering,
| | 02:55 | well, I hear these terms Lists and
Libraries. Is there a big difference between
| | 03:00 | a list and a library?
| | 03:01 | Well, the answer is no, there really isn't.
| | 03:04 | In fact, everything in
SharePoint is really a list.
| | 03:08 | We have the basic lists like lists
of Announcements, a list of Calendar
| | 03:12 | entries, a list of Contacts.
| | 03:13 | But when we start talking about
Libraries, well really, a document library is
| | 03:18 | simply a list of documents.
| | 03:20 | If you go to Picture Library, that's
a list of images, a Wiki Page Library,
| | 03:24 | that's a list of web pages.
| | 03:26 | It's just a way to keep these
things contained to keep them together.
| | 03:31 | Now, on the other hand, if you are
wondering, can I just ignore all of this
| | 03:35 | stuff and just create
some web pages in SharePoint?
| | 03:39 | Well, kind of, but even then you're
still using these Lists and Libraries.
| | 03:44 | If I am, say, on this team site, and I
use the Site Actions menu here and come
| | 03:48 | down to add a new page, the first thing
it is going to tell me is that this page
| | 03:53 | will be created in the Site Pages Library.
| | 03:56 | And even if I've created the
simplest possible SharePoint site, and a few
| | 04:00 | minutes ago, I made a new site using
what's called the Blank Site template, that
| | 04:05 | doesn't mean there is nothing there.
| | 04:07 | A Blank Site in SharePoint still
provides all this scaffolding, this plumbing,
| | 04:12 | this framework for building
out this site in SharePoint.
| | 04:16 | As soon as it's created, all
the menu options are there.
| | 04:19 | I have the Quick Launch
Bar, I have the settings.
| | 04:22 | I have the Top Link Bar.
| | 04:23 | I can use the All Site Content link to
see that in this particular site, I have
| | 04:28 | no lists, I have no libraries, but I
still have the page that's going to tell me
| | 04:33 | where these are once I start to make them.
| | 04:36 | And even if on this Blank Site I said,
"All I want is to create a new web page," I
| | 04:41 | could go to my More Options, ignore the
Lists and Libraries, and say, "No, I want
| | 04:46 | to jump straight to creating a web page,"
select this Page option here, give it a
| | 04:50 | name such as Test, and click Create.
| | 04:53 | What it's going to tell me is in
order to do this, there must be a Page
| | 04:58 | Library and a Site Assets Library, and would I
like to create those document libraries now?
| | 05:04 | You see, the Lists and Libraries are
really what SharePoint is all about.
| | 05:09 | The built-in site templates for making
sites in SharePoint are really nothing
| | 05:13 | more than a prewritten
arrangement of lists and libraries.
| | 05:17 | The great thing is there is a
terrific benefit from this, because we don't
| | 05:21 | have to worry about how to work with all the
possible different kinds of SharePoint sites.
| | 05:28 | We just have to know how to work
with the building blocks of SharePoint.
| | Collapse this transcript |
| Creating a new site| 00:00 | If you have the right permissions, you
can create a new site in SharePoint, and
| | 00:04 | this can be very useful when you are
learning how to make these customized
| | 00:07 | layouts because you can just
make a new site to experiment with.
| | 00:11 | Creating a site in SharePoint is really
nothing special. It can be done in a few
| | 00:16 | seconds and that site might last for a
few hours or a few days or a few years--
| | 00:21 | it all depends on what you need that site for.
| | 00:23 | But regardless, the process is the same.
| | 00:25 | If you have the correct permissions,
you can go to your Site Actions menu and
| | 00:29 | you will see an option that says New Site.
| | 00:32 | Now, permissions can
differ from one site to another.
| | 00:35 | So you may have this ability on one
site, but not have it on another site.
| | 00:39 | Now, but before you do make one, it's vital
to understand which site you are currently in.
| | 00:44 | You see, I'm in this existing site,
this Team Site that I have called Example
| | 00:49 | Team Site, and I'm making another site.
| | 00:52 | But what this actually means is I'm not
creating a completely independent site
| | 00:57 | that's detached from this one. I'm
actually making what is called a Sub-Site and
| | 01:01 | that to choose this way of doing it,
I'm creating a new site that will be
| | 01:05 | underneath this one.
| | 01:06 | Now, this may strike you as a bit
of a chicken and an egg situation.
| | 01:10 | If I have to be in a site to make a site,
well where did the first site come from?
| | 01:15 | We'll talk about that in just a moment.
| | 01:17 | But if I'm in this position, I use my
Site Actions menu, I say New Site. And I
| | 01:22 | get my Create Window, and it
gives me the available site templates.
| | 01:27 | Now, yours may look a little
different here depending on your version of
| | 01:30 | SharePoint or what your system
administrator has enabled or disabled.
| | 01:34 | I'm also seeing the Create Page
Here that I get when I have the
| | 01:37 | Silverlight plugin installed.
| | 01:39 | If you don't have that plugin
installed, you may have a slightly
| | 01:42 | different visual experience.
| | 01:44 | As I select each of the different
options that I can create, I'll see a bit more
| | 01:49 | information about them.
| | 01:50 | There's the Team Site that we've seen
before, we've got the document workspace,
| | 01:54 | all the different meeting workspaces.
| | 01:56 | I'm not going to go through these
different sites. I invite you to explore them
| | 01:59 | if you haven't already.
| | 02:01 | What I'm going to create is the
simplest kind of site, the blank site.
| | 02:05 | So I'll select that site template,
I'll come over. I have to give it a title--
| | 02:09 | all SharePoint sites need a
title--and I need to give it a URL.
| | 02:14 | Now, the URL of this new sub-site will
always be based on the URL of the existing site.
| | 02:20 | So it's really telling me here it's
already got a certain amount of the
| | 02:24 | address that's set.
| | 02:26 | I don't have any choice about that.
| | 02:28 | I just need to put something in
here like blank or a blank site.
| | 02:30 | I'm going to ignore the More Options
button for now and just click Create.
| | 02:34 | It thinks about it for a second and
makes my new blank site, and the URL of this
| | 02:40 | site will always be underneath the URL
of the site above it, of the parent site.
| | 02:45 | Now, another way I could see that is by
using the Navigate Up button which would
| | 02:50 | show me I'm currently in the homepage of
this new blank site, which is underneath
| | 02:55 | the example Team Site.
| | 02:57 | What's also happening here is it's
using the permissions of this parent site,
| | 03:01 | and that's the default behavior.
| | 03:03 | So if I'd added a user to my Team Site,
that person would now be a user of
| | 03:08 | this blank site as well.
| | 03:09 | But we are talking about customizing
things here, and every site in SharePoint
| | 03:14 | has its own settings, and every site in
SharePoint has its own All Site Content
| | 03:19 | link, which I can either get to here
from Quick Launch Bar or from the Site
| | 03:23 | Actions menu to view all site content.
| | 03:26 | In this case, this page is pretty much empty.
| | 03:29 | I have no libraries, I have no lists, I
have no discussion boards, no sub-sites;
| | 03:34 | this is a blank site.
| | 03:36 | So I could either start adding elements
to this to make it useful using either
| | 03:40 | the Create button here or again from
the Site Actions menu coming down to More
| | 03:45 | Options, or I could even go ahead
and delete the site if I wanted to.
| | 03:48 | But one of the pages I'll always be
interested in on any site that I'm
| | 03:52 | customizing is found under Site
Actions, and it's the Site Settings Page.
| | 03:57 | Clicking that will take me to the
site settings for this particular site.
| | 04:02 | As you've probably encountered, you
will see settings pages all over the place.
| | 04:06 | There are settings for every site,
there are settings for every library and
| | 04:10 | every list in every site.
| | 04:11 | So you will see settings everywhere you
go in SharePoint if you have the right
| | 04:15 | permissions to see them. And on this
site, I'll see things like the site theme
| | 04:19 | that this site is using--what's
the color scheme, and the fonts.
| | 04:22 | I'll see options to change the Quick
Launch Bar, the navigation on the left, the
| | 04:26 | Top Link Bar, the navigation along
the top, and I'll see other options like
| | 04:30 | saving the site as a template or
even deleting the site if I want to.
| | 04:34 | Of course, whenever you are deleting a
site, you want to be really careful that
| | 04:38 | you are in the right place, because
this delete message pretty much looks the
| | 04:43 | same for every site, whether it's
an important one or whether it's a
| | 04:46 | completely empty site.
| | 04:48 | I'm just going to leave this one alone for now.
| | 04:50 | I'm going to navigate all the way back
up to that example Team Site that's at
| | 04:55 | the top here, because one of the things
we haven't really talked about is where
| | 04:58 | did this site come from.
| | 05:00 | If I have to create a site by going
to the Site Actions menu of an existing
| | 05:04 | site, where did the first site
come from to give us this menu at all?
| | 05:08 | Well, this leads us a bit deeper
into the idea that every single site in
| | 05:12 | SharePoint is contained into
what is called a Site Collection.
| | 05:16 | Now, a Site Collection is invisible.
It's really just a way of grouping sites
| | 05:21 | together that belong together, usually
because they have a similar business use,
| | 05:25 | say a similar set of users.
| | 05:27 | And you can have dozens of site
collections or hundreds of site collections in
| | 05:31 | SharePoint. Each could contain 1
site, or 5 sites, or 1000 sites.
| | 05:36 | Now, these site collections
themselves are typically created by your farm
| | 05:41 | administrator and that's someone
with access to the SharePoint Central
| | 05:45 | Administration web site.
| | 05:47 | When a new site collection is created,
that's where the first site comes from.
| | 05:52 | It's what's called the top
level site in any site collection.
| | 05:56 | In this case, this example Team Site is
the top-level site in this site collection.
| | 06:01 | There is nothing above it.
| | 06:03 | Site collections can be really useful
for us when we are working with designs
| | 06:07 | because they allow us to have folders
that contain assets, and style sheets
| | 06:11 | that can be shared across an entire
site collection but kept separate from any
| | 06:16 | other site collection.
| | 06:18 | Now, while I'm not going to do much
with SharePoint Central Administration in
| | 06:21 | this course, I'm going to show you
one of the screens you have here.
| | 06:25 | So I'm actually in a SharePoint
Central Administration page here to create a
| | 06:29 | new site collection.
| | 06:30 | Now, when I do that, it will always ask me,
what is the first site in that site collection?
| | 06:36 | And we do have the usual suspects;
| | 06:37 | we have things like the Team Site, the
Blank Site, the Document Workspace, you
| | 06:41 | have all the Meeting Workspaces.
| | 06:43 | In SharePoint 2010, there is an
option to select the template later.
| | 06:48 | So create the site collection, but the
first time anybody tries to use it, they
| | 06:51 | are going to be asked, what is that first site?
| | 06:54 | Now, one option I can find when I'm in
SharePoint Central Administration is this
| | 06:58 | Publishing option that gives me the
Publishing Portal or the Enterprise Wiki.
| | 07:03 | Now, these templates aren't typically
available when I'm making a sub-site, when
| | 07:08 | I'm just using that Site Actions > New
Site menu, because with some sites, it's
| | 07:13 | suggested that they are only created at
the very top of a new site collection.
| | 07:18 | After all, if you are making a new
public Internet site using the Publishing
| | 07:23 | Portal template, you really don't want
to make it as a sub-site beneath your
| | 07:26 | company's annual report document workspace.
| | 07:30 | Now, if you don't have access to
SharePoint Central Administration, and usually
| | 07:34 | it is pretty locked down, you may need
to ask your administrator to make you a
| | 07:39 | site collection with, say,
one of these at the top of it.
| | 07:43 | But for most people, the options that
they will have of creating sites will be
| | 07:47 | from an existing site already.
| | 07:49 | But this is the process to create one.
| | 07:51 | I'm not going to explore all the
possible SharePoint sites in this course. I do
| | 07:55 | encourage you to try a few of them out
if you can, just to become familiar with
| | 07:59 | the functionality that's already
built into the current SharePoint sites.
| | Collapse this transcript |
| Creating new pages| 00:00 | So when we have our web site in SharePoint,
how do we make new web pages in SharePoint?
| | 00:05 | Well, like many things, there
are multiple ways to do it.
| | 00:09 | We can create new pages using the
application SharePoint Designer, but you can
| | 00:13 | also make new pages in any given
site just using the web browser.
| | 00:16 | You take a classic SharePoint team site.
| | 00:18 | If I am in the browser and I use the
Site Actions menu, I've got an option here
| | 00:23 | to say that I want to create a new page.
| | 00:25 | Now, selecting this option, notice that
it will tell me that this page will be
| | 00:29 | created in the Site Pages library.
| | 00:32 | Now the Site Pages library is the
default location for new pages in most
| | 00:37 | SharePoint 2010 collaboration sites.
| | 00:40 | I'm actually going to cancel out of
this for a moment, because I'll see that in
| | 00:43 | my site here, I do have a link over here to
the Site Pages library in the quick launch bar.
| | 00:49 | And I see there are actually two pages
in there. The homepage, which literally
| | 00:54 | takes me to the homepage.
| | 00:55 | This page is being stored
in the Site Pages library.
| | 00:58 | I can even see that up here in the URL.
| | 01:01 | So, going back into that library and I
can see that I have got another page
| | 01:04 | called How To Use This Library, which
actually has some useful information
| | 01:08 | about working with these.
| | 01:10 | These are what are called wiki pages.
| | 01:12 | In fact, the Site Pages library is
what's called a wiki page library.
| | 01:17 | It's a new kind of library in SharePoint 2010.
| | 01:19 | Don't get too worried about the name.
| | 01:22 | You don't have to be
making your own Wikipedia here.
| | 01:25 | This library is just a SharePoint library;
it's a container. It's a location for
| | 01:30 | new web pages to go so they
don't just end up all over the place.
| | 01:34 | Now, if I am in this Site Pages
library here, I could also use the ribbon to
| | 01:39 | create a new document. That's just
going to make me a New Wiki Page.
| | 01:43 | It's the same thing as doing
it from the Site Actions menu.
| | 01:48 | So, I create a new page, I
give it a name--whatever I want.
| | 01:51 | You can use spaces if you want to. Click
create, and when I make one I instantly
| | 01:57 | get dropped into this inline editing
view, just really a big container of
| | 02:03 | content. The things that I can
change here within this blue box here.
| | 02:07 | Now we'll talk much more about the
editing options available to us here in just
| | 02:11 | a moment, but we do have a
full web-based editing experience.
| | 02:15 | I can use the ribbon to do some basic
formatting of the content that I have here.
| | 02:22 | Any change that I make to this page I
can instantly save by just hitting the
| | 02:26 | Save & Close button.
| | 02:27 | This is now considered the
current version of this page.
| | 02:31 | It's available to anyone who can see this site.
| | 02:34 | Now this page I've made is
what's called a wiki page.
| | 02:37 | Wiki pages are the default option when
we create a new web page using this New
| | 02:42 | Page section of the Site Actions menu.
| | 02:45 | However, if I was to go into the
Site Actions menu and instead choose More
| | 02:49 | Options, and I can see here it says Create
other types of pages, I can select that.
| | 02:55 | I could look through this big long
list over here, but it's easier if I just
| | 02:58 | filter down by page, and
I see I have two choices.
| | 03:03 | Aside from a normal page, and that is a
wiki page, I'll also see this, a Web Part Page.
| | 03:09 | Now this is a bit of a bad name here.
| | 03:11 | What they are calling a web part page is
really the older SharePoint 2007 style page.
| | 03:17 | It's a little more formalized, a
little less flexible than a wiki page.
| | 03:21 | When I create a Web Part Page, I
select this option and click Create, and the
| | 03:26 | first thing it's going to make me do
before the page even is created is choose a
| | 03:31 | formal layout for this page.
| | 03:34 | Does it have a header and a footer?
Four columns and a top row? Does it just
| | 03:38 | have a left column and a body and a header?
Is it a full page vertical? We give it a name.
| | 03:43 | I'll call it exampleWPP,
for example, Web Part Page.
| | 03:49 | It is an asset in SharePoint.
| | 03:51 | So we have to choose
where it's going to be stored.
| | 03:54 | SharePoint doesn't really care;
| | 03:56 | I can put it anywhere I want.
| | 03:57 | In fact, I'll just leave this right
now as the default Site Assets document
| | 04:01 | library and click Create.
| | 04:03 | Now, typically when you make a Web
Part Page you are going to lose the quick
| | 04:07 | launch bar on the left-hand side.
| | 04:08 | Now, you wouldn't lose it
when you are making a wiki page.
| | 04:11 | That may or may not be what you want.
| | 04:13 | Now, these Web Part Pages can come in
handy when making very content-heavy pages.
| | 04:18 | Say, here I just wanted lots of tabular-
driven data coming from a database and a
| | 04:23 | big spreadsheet kind of appearance.
| | 04:25 | You'll notice that I don't have this
instant ability to just start typing and to
| | 04:30 | have the bold and left align and right align.
| | 04:33 | The only option I really
have here is to Add a Web Part.
| | 04:36 | In fact, I'm just going to go ahead
and delete this page from the ribbon.
| | 04:40 | Notice that when I delete it, it
doesn't really disappear forever;
| | 04:43 | it's sending this page to the site Recycle Bin.
| | 04:45 | I am going to click OK.
| | 04:46 | Back to the homepage of my site, I am
going to go ahead and make a wiki page.
| | 04:52 | Because although those older style Web
Part Pages can be useful for informal,
| | 04:57 | quick, easy page creation,
wiki pages are the way to go.
| | 05:01 | And despite the name, if you want to use
SharePoint Web Parts, you don't have to
| | 05:06 | make a Web Part Page.
| | 05:08 | We can still put Web Parts on wiki pages too.
| | 05:11 | Notice that when editing this wiki
page, I have got an Insert section of the
| | 05:15 | ribbon which allows me to
insert Web Parts just fine.
| | 05:18 | Again, we'll explore this in just a moment.
| | 05:20 | So in a typical collaboration site, like
a team site, in SharePoint 2010 you can
| | 05:26 | make wiki pages and you can make web part pages.
| | 05:32 | The default page created would be a wiki page.
| | 05:35 | It's a very easy page to
create and to edit in the browser.
| | 05:39 | But there is a third kind of page that
can be created when you are using a site
| | 05:43 | with the publishing feature enabled.
| | 05:45 | I am looking here at a publishing
portal as it exists just after creation.
| | 05:51 | The process to make a page in
this site looks pretty similar.
| | 05:55 | I am going to go my Site
Actions menu and create a New Page.
| | 05:59 | But there is a little more depth to it.
| | 06:01 | Now, instead of being created in the
Site Pages library, it's telling me this
| | 06:05 | page will be created in the Pages library.
| | 06:07 | Well, that itself doesn't seem
like a big deal, and it's really not.
| | 06:15 | But this is a clue to me that
this will be not a wiki page.
| | 06:18 | It's what's called a publishing page.
| | 06:21 | Now at first look here, it's a little similar,
which will be good for anyone who is
| | 06:25 | working with SharePoint just creating content.
| | 06:28 | It doesn't really care about what
kind of page that they are dealing with.
| | 06:31 | But there is quite a lot of
difference under the hood between wiki pages
| | 06:34 | and publishing pages.
| | 06:36 | One thing I can immediately see
is this yellow status bar here.
| | 06:40 | It tells me that this page is checked
out and editable, because publishing pages
| | 06:45 | typically are more oriented to the idea
of having draft and published versions.
| | 06:50 | They can be a work in progress for
days or even weeks or even months, as
| | 06:54 | opposed to wiki pages which, when you make
your change and save it, it's done, it's saved.
| | 06:59 | Now, another difference is that I actually have
more options available up here on the ribbon.
| | 07:04 | Even if it doesn't look all that
different, there really are some new things
| | 07:08 | here, such as the Publish section.
| | 07:10 | Because let's imagine I am a content
contributor, one of a dozen people working on
| | 07:15 | a really large public web site.
| | 07:17 | Well, I maybe able to create content,
but I may not be allowed to just publish
| | 07:22 | this page and have it
automatically go live on the web site.
| | 07:25 | I might have to submit it for approval,
to start a workflow to make sure that
| | 07:30 | somebody signs off on this, maybe the legal
department, maybe the content style department.
| | 07:35 | Now, all of these settings can be configured;
| | 07:38 | they can be changed. And we'll go
deeper into all of this as we go.
| | 07:41 | But for now, realize that you don't just
make empty HTML files in SharePoint and
| | 07:47 | then start to fill them up.
| | 07:48 | With collaboration sites, you typically
make wiki pages, but you can also make
| | 07:53 | Web Part Pages. And when you have a site
with publishing enabled, you will have
| | 07:58 | the more formalized, but
very powerful, publishing page.
| | Collapse this transcript |
|
|
3. Browser-Based CustomizationCustomizing wiki pages| 00:00 | Now, before we launch into using a
web design application like SharePoint
| | 00:04 | Designer, know that there is a lot
that can be done using the browser itself.
| | 00:10 | Now, while you may have done some of
this already, it's certainly worth a
| | 00:13 | recap through the abilities that
you have for doing browser-based
| | 00:17 | customization in SharePoint.
| | 00:19 | So let's say in a typical Team Site,
I go ahead and make a new page.
| | 00:24 | This is, of course, a Wiki page, and it
will jump me directly into editing mode.
| | 00:29 | Or if I'd already saved this page
before, I could just jump into Edit mode by
| | 00:33 | clicking the Edit button on the tool bar,
or by selecting Site Actions > Edit Page;
| | 00:39 | they'll all do the same thing.
| | 00:41 | Now it shifts the ribbon into this
editing tools tab, where we'll have options to
| | 00:46 | save it, we'll have options to save and
keep editing or to stop editing and just
| | 00:52 | discard anything we've done.
| | 00:54 | I'm going to just paste in some
placeholder text that I have here, and I could
| | 01:01 | select to save and keep editing if I wanted to.
| | 01:05 | We could mark this
document as being checked out.
| | 01:07 | Now the Check In/Check Out
functionality here is exactly the same as it is in
| | 01:12 | any other part of
SharePoint, like a document library.
| | 01:16 | You could change the settings of this
site pages library to require that all
| | 01:21 | pages be checked out before anyone can
work on them, but that's not what's on
| | 01:25 | by default, because the idea here is that on a
collaboration site, it's all about ease of use.
| | 01:31 | It's about minimal interference.
| | 01:33 | You just want to jump into Edit mode, you just
make a simple change, save it, and you are done.
| | 01:42 | Jump back into Edit mode, make
another change, and repeat as necessary.
| | 01:48 | Now, when we are in Edit mode, I'm
not going talk much about these basic
| | 01:54 | formatting options here,
| | 01:56 | the Font section and the Paragraph section.
| | 01:59 | You know what these are, you know what these do.
| | 02:01 | It's much more interesting over here
on the right-hand side where we have
| | 02:05 | Styles, we have Layout, we have Markup Styles.
| | 02:09 | But first, what's the difference between
Styles that we have here and Markup Styles?
| | 02:15 | Well, think about it this way.
| | 02:17 | This Styles section, this really
represents in-line styles, where I can
| | 02:22 | take a selection of text, for example
this sentence, click the Styles button,
| | 02:27 | and say apply a Highlight to it, or add a
Style that might represent a comment or a caption.
| | 02:34 | Now, notice that I'll get a preview
of these just by mousing over them;
| | 02:39 | I don't actually have to
select one to have it take effect.
| | 02:41 | If I don't want to apply any of them, I
can actually just click off somewhere.
| | 02:46 | So these styles are really inline styles;
| | 02:48 | you are basically applying Span tags in CSS.
| | 02:51 | They won't actually change the
block style of the paragraph or the text
| | 02:55 | that you've selected.
| | 02:56 | Now on the other hand, Markup Styles can do.
| | 02:59 | Let's say I select this sentence
here and I jump to the Markup Styles
| | 03:03 | section, I can see that I
really do have Markup Styles.
| | 03:06 | There are things like headings;
| | 03:07 | you are making something an H1 or an H2.
| | 03:11 | You can make them colored headings,
which will also apply a CSS style. And then
| | 03:16 | the sections down here like different Callouts,
a left aligned one and a right aligned one.
| | 03:21 | Just again, as I mouse over them,
I'll see a preview of these.
| | 03:24 | Now, these Callout options will
actually surround the selected text with a
| | 03:28 | div and then give that div a
predefined class. Or I can even change them
| | 03:33 | back to regular paragraph.
| | 03:34 | Now let's say I had changed something to,
say, a Colored Heading 2, and I wanted
| | 03:39 | to know what exactly had happened here.
| | 03:41 | Well, from this right-hand section, I
can select the HTML button and say to
| | 03:46 | Edit HTML Source, and I'm going to
see the source just of this editable
| | 03:50 | section here in my page. Or I can see
first here just a regular paragraph, then
| | 03:55 | I can see here is H2, my Heading 2 with a
class. It's a Microsoft class that's been added.
| | 04:01 | Now you might already be wondering,
well, how do I do my own styles?
| | 04:05 | We'll get to that. We're going to talk
about the CSS that's being used behind
| | 04:09 | the scenes, but for now, let's just
focus on what we can do with the built-in
| | 04:13 | rich editing ability here.
| | 04:15 | Now, although you can edit the HTML
source here, do be aware that you can't just
| | 04:20 | paste anything in here.
| | 04:22 | If you were to try and paste in, say,
JavaScript or links to assets on other
| | 04:26 | sites, you are likely to find them
stripped out when you try and save the page.
| | 04:30 | Now that can feel really inconvenient
if it's what you want to do, but it's
| | 04:34 | really a security issue, because most
SharePoint sites are afterall being used
| | 04:40 | for internal use behind a firewall.
| | 04:43 | There is a lot of confidentiality
issues, and allowing JavaScript to be pasted
| | 04:47 | into any page just by anyone who can
edit that page would allow for big security
| | 04:52 | risks. So you could have script that
might, say, scrape the contents of the page
| | 04:57 | and silently send those contents
to a web site outside the firewall.
| | 05:01 | So, at this level, basic page editing,
you don't get to do things like that.
| | 05:06 | If you need that level of change,
we can do it, but it will require
| | 05:10 | SharePoint Designer.
| | 05:11 | So again, I can continue making
changes, saving them, and continue to edit.
| | 05:16 | One of the other options I have
here is this Text Layout option.
| | 05:21 | To change the basic layout of this Wiki
Page, go from One column to Two columns,
| | 05:27 | or from Two to Three.
| | 05:29 | Choose to have a header
or a header and a footer.
| | 05:32 | Now, do be careful with this because if,
for example, you've created multiple
| | 05:38 | columns of content and split some of
your content across different places, and
| | 05:43 | then you are experimenting with other
layouts and you switch back to, say, two
| | 05:47 | columns, it will combine them into two, and
to one column will combine this back into one.
| | 05:52 | It's making a few guesses at giving us
some paragraph breaks, but that can make
| | 05:56 | things a little messy.
| | 05:57 | I did a few too many deletes there, but
do know that you have the ability to do
| | 06:04 | a undo with Ctrl+Z. But if I was to
split this back into three columns, it's not
| | 06:12 | going to recover the layout I had
before, everything has been combined.
| | 06:17 | I'm going to switch that back into two columns
and just make this a little bit more readable.
| | 06:21 | Now, one thing to know is you cannot
actually create your own new text layouts yourself.
| | 06:37 | These layouts here are predefined, and
if you want to be able to create, say,
| | 06:43 | different layouts for different kinds
of pages, say, one layout for a product
| | 06:46 | page, and another for an article page,
and another for a press release, well,
| | 06:51 | that can be done, but that
is in the publishing feature.
| | 06:55 | It's not here on the basic Wiki pages.
| | 06:58 | This is, once again, a useful but
an informal way of changing a page.
| | 07:03 | Now what we'll also find in this
section is we have another section to the
| | 07:07 | Insert part of the ribbon.
| | 07:09 | So switching to the Insert part,
I have ability to insert a table.
| | 07:13 | Clicking this arrow will give me this
table designer. I can just mouse over what
| | 07:17 | I want, say, inserting a five columns
by two rows table. Click that, and it will
| | 07:23 | just insert it wherever my cursor is.
| | 07:26 | That itself will change the ribbon
again, give us more options here.
| | 07:31 | I can insert new rows above or below, I
can change the width of it, the height
| | 07:35 | of it. I can switch the design part
and select, for example, a different kind
| | 07:40 | of style and then just continue to
type to start to fill out the different
| | 07:46 | parts of this table.
| | 07:51 | Back in the Insert section of the
toolbar, we, of course, have the ability
| | 07:54 | to insert a picture.
| | 07:55 | If that picture has already been
uploaded somewhere on my SharePoint site, I can
| | 08:00 | say it's from a particular
address and I give it the URL.
| | 08:03 | If the picture is on my computer
right now, I can select From Computer. It
| | 08:07 | will allow me to browse to that
location and then also give me the opportunity
| | 08:12 | to upload that to a library on this
current site such as Site Assets, which
| | 08:17 | would be a good one.
| | 08:19 | And then when inserting, we also
have this section, the Web Part section.
| | 08:23 | Now, you'll find a lot of these are grayed
out if you are not clicked in the right place.
| | 08:27 | So Web Parts will only be able to be
inserted in the right edited part of your page.
| | 08:33 | Now again, we don't need an
actual Web Part page to add web parts.
| | 08:38 | A Wiki page can have web parts added just fine.
| | 08:41 | Now web parts, of course, are these
self-contained pieces of functionality in
| | 08:46 | SharePoint that can be
positioned and configured and rearranged.
| | 08:50 | Now, by default, a lot of the web parts
will represent a window to other pieces
| | 08:55 | of the current site.
| | 08:56 | For example, here it's saying that the
current lists and libraries I have on
| | 09:00 | this site are Announcements, and a
Calendar, and a Task list, and a Discussion list.
| | 09:05 | And by selecting one of these, I can
then choose to add it to the current section
| | 09:10 | that I'm editing, and it's going to add
this self-contained web part that shows
| | 09:14 | me the task that have been created.
| | 09:16 | Now, right now, there aren't any,
but this is where they would appear.
| | 09:19 | Again, this web part is very
much a self-contained unit.
| | 09:23 | If I've clicked off somewhere else and I'm
editing, I don't see the ability to change it.
| | 09:27 | When I select the web part, I'll see
new options appearing up here on the
| | 09:32 | ribbon, the Web Part Properties, the
ability to delete it or minimize it. Or I
| | 09:36 | could just select the web part and
hit the Delete key and get rid of it.
| | 09:41 | Go back to may Insert tab and
choose to insert another one.
| | 09:44 | So while many of them do represent a
window to another part of this site, they
| | 09:49 | can also be used for things like
media and for picture slide shows.
| | 09:53 | If I go this section called Media
and Content, I'll find web parts that
| | 09:57 | are content editors.
| | 09:59 | These are just self-contained chunks of
content I could move around from part of
| | 10:04 | the page to another part of the page.
| | 10:06 | We have the Picture Library Slideshow Web Part.
| | 10:08 | Now not all of these web parts are
going to always be relevant on every page.
| | 10:13 | So explore the ones you have available
and again, this could be different based
| | 10:17 | on how your SharePoint
installation is configured.
| | 10:20 | I'm going to cancel out of this because
unlike editing pages in SharePoint 2007,
| | 10:25 | where you had to pretty much do
everything in a web part, here you can, as you
| | 10:30 | can see, at least change and control
your page content without web parts being
| | 10:34 | absolutely necessary.
| | 10:36 | So I'm going to go back to the Page
section of the ribbon and just say Save &
| | 10:41 | Close, and it takes us to
the normal view of this page.
| | 10:44 | Now, as you make these changes and
save them, you may be pleased to know that
| | 10:48 | SharePoint is actually versioning these changes.
| | 10:51 | It's saving the different state
of this page every time I saved it.
| | 10:55 | Now it doesn't always turn on
versioning for every library in SharePoint,
| | 11:00 | but Wiki page libraries do usually
have versioning turned on in a typical
| | 11:05 | collaboration site, because this is
really just textual content, it's very small.
| | 11:10 | It has very little impact
on the SharePoint database.
| | 11:13 | And if I'm interested in that, what I
can do, even without editing the page, I
| | 11:18 | can go to the Page section of the
ribbon and then come down and select Page
| | 11:22 | History for the current page that I'm on.
| | 11:24 | If I click that it will tell me that
I've actually saved this eight times right
| | 11:30 | now, and it's showing me the
different versions and when they were saved.
| | 11:34 | I can actually click on each of the
versions and it will actually show me, in
| | 11:39 | this case, what was added--that's
highlighted in green, what was deleted--
| | 11:42 | nothing was deleted.
| | 11:44 | In this version, this text was added.
| | 11:47 | Step one more version forward, we
can see where the text was deleted.
| | 11:51 | And I can just go on through and
figure out who made those changes.
| | 11:56 | I can even decide to delete a
particular version or restore an earlier version.
| | 12:01 | Or I can just ignore it and go
back to the way the page was.
| | 12:05 | Now finally, even though we've seen to
use this Site Actions menu to make a new
| | 12:09 | page, you don't even have to do
this to make a new page in SharePoint.
| | 12:13 | Let's imagine I am editing this page,
so I'll shift into Edit mode, and as I am
| | 12:18 | typing, I know that I
need to link to another page.
| | 12:22 | Well, although you will see the
ability on the Insert tab to insert a link,
| | 12:28 | that's kind of a long-winded way of doing it.
| | 12:30 | I really don't need to do that.
| | 12:31 | Instead, what I can do it as I am typing
just in the normal view here, I can do
| | 12:36 | two opening square brackets.
| | 12:39 | Now what will happen here is that we'll
get this pop up that shows me the pages
| | 12:43 | that exist on this site.
There's not very many right now;
| | 12:46 | we've got the Home page, the page
called How To Use This Library, and then
| | 12:50 | I could drop down into individual Lists
or Views. I'm not going to drop into those.
| | 12:55 | Here I'm actually going to use my arrow
keys, my cursor keys, to select Home and
| | 12:59 | just hit the Enter key. And we'll see
it gets surrounded by these opening and
| | 13:04 | closing square brackets,
and I can continue to type.
| | 13:07 | Well, let's say, for example, what I
want to do is make a link to another page
| | 13:15 | that doesn't exist yet.
| | 13:16 | Well, that's okay too.
| | 13:18 | I just do those two opening square
brackets and I'm going to type the name of
| | 13:22 | the page that I want to make.
| | 13:23 | Let's say I'm linking to a page about
a new project called Project X. It's
| | 13:28 | telling me Item does not exist.
| | 13:30 | That's okay, that's not an error.
| | 13:32 | I'm just going to use the two closing
square brackets and close that, and I can
| | 13:37 | even add some more text, and so on.
| | 13:39 | Now, I'm going to save this and
close it, and notice what we have here.
| | 13:44 | The page is instantly changed
and says here is a link to Home.
| | 13:48 | I can mouse over, I can
see that is actually a link;
| | 13:51 | it's showing up in the kind of
default purple-red color because I've
| | 13:54 | already been to that page, but if I
were to click that link, it will take
| | 13:57 | us to the homepage.
| | 13:58 | I am going to click Back, and notice
that the Project X is also a link but it's
| | 14:04 | a different kind of link;
| | 14:05 | it's got this dotted line underneath it.
| | 14:08 | Well, usually, I'd think, I need to go
and manually make a new page and then come
| | 14:13 | back here and make a manual link to
that page I just made, but here I don't.
| | 14:18 | Because I put this in the square
brackets, all I can do here is now click it.
| | 14:22 | It realizes that page does not
yet exist and it's going to make it.
| | 14:26 | It's telling me, This page will be
created in the Site Pages library.
| | 14:28 | Do you want to create it? Yes, I do.
| | 14:31 | SharePoint makes that page for me and
takes me straight into editing mode, where
| | 14:36 | I just add my content.
| | 14:48 | Use the same Markup Styles and Styles
that I'm interested in, and I could even
| | 14:53 | use those square brackets and link to
more pages and link back to the Home page
| | 14:57 | or to where I've been before.
| | 15:00 | As I add recent pages, what you'll
actually see here is also this Recently
| | 15:05 | Modified area, which can give me a quick
jump to those pages that I've made recently.
| | 15:11 | So, very easy to start building
out the pages on your web site.
| | 15:16 | Using these square brackets is what's
called a Wiki Link and it's one of the
| | 15:19 | benefits of using the
Wiki Page in SharePoint 2010.
| | 15:23 | Now, just be aware that if you
occasionally forget the method for doing this,
| | 15:28 | just go into any Wiki Page library, so
I'm going to go into my All Site Content
| | 15:33 | view, find my Site Pages library which
is a Wiki Page library. And what you'll
| | 15:38 | find, if you haven't deleted it, is a
document, a good summary document called How
| | 15:43 | To Use This Library, which will give
you the hint on creating those Wiki links
| | 15:48 | and little tips and tricks for doing that.
| | 15:51 | But that's the basic idea for a lot
of the stuff we can do in the browser.
| | 15:54 | Of course, we can get much more
involved like this with Page Design, but as you
| | 15:58 | can see this is valuable stuff to be
able to do and it's very quick to make
| | 16:03 | some major changes.
| | Collapse this transcript |
| Customizing web part pages| 00:00 | If instead of Wiki Pages you decide to
make the older style Web Part page, you
| | 00:05 | are certainly a bit more limited in the
browser-based customization you can do.
| | 00:10 | Again, the default new page is a Wiki
Page, so we create a web part page through
| | 00:14 | More Options, I'll Filter By
Page and select Web Part Page.
| | 00:19 | Now the first part of the journey
is that you will need to choose a
| | 00:22 | layout before the page is actually
created and unlike the Wiki Page this
| | 00:27 | can't be change later.
| | 00:31 | So I'll give it a name, I can flick
through the different Layout Templates, it
| | 00:34 | gives me a preview over here on the
left of what these might look like.
| | 00:39 | I'm just going to choose the Header, Left
Column and Body, and then choose where this goes.
| | 00:43 | In this case, I can put in any of these
libraries Site Assets, Site Pages is fine too.
| | 00:49 | Even though Site Pages is a Wiki Page
Library, we can put a Web Part Page in
| | 00:53 | there just fine, and click Create.
| | 00:56 | And second, everything that we do
on a Web Part page does need to be
| | 01:00 | contained inside a web part.
| | 01:02 | Now that's fine when you are doing
something like adding a web part that
| | 01:06 | represents a list or library, in fact,
say here in the Body I'll click to Add a
| | 01:11 | Web Part and I'll select from my built-
in Lists and Libraries here, I'll just
| | 01:15 | select from say the Calendar section.
| | 01:19 | And yes, I can choose to Add the Web
Part to any of the web part zones that I
| | 01:24 | have, I'm going to say add it to the
Body, and even though, I've added this web
| | 01:28 | part to the body I could still add
another web part to the body here or one to
| | 01:32 | the Header or one to the Left Column.
| | 01:34 | Now here is one of the problems, if I
just want to add some textual content I
| | 01:39 | just want to type in some text in the
header, well what I'll find is there is
| | 01:43 | really no way of doing it, there is
no way to type it in, everything has to
| | 01:48 | be inside a web part.
| | 01:50 | So what I'll need to do here is add a
web part like the Content Editor Web Part
| | 01:55 | which I'll find in the Media and
Content section, and the Content Editor web
| | 02:00 | part really is just a container for
some generic content, whatever you want.
| | 02:05 | So you've got this new Content Editor Web
Part, it says Click here to add new content.
| | 02:10 | I will oblige, I click, and
now I can actually start typing.
| | 02:17 | Within this web part itself I actually
have pretty similar experience to editing
| | 02:22 | a section of a Wiki Page.
| | 02:24 | I have the editing tools up here, I have
the Alignment tools, Styles and Markup Styles.
| | 02:30 | I don't get the ability to change the
text layout of the page, but I do get the
| | 02:35 | ability to insert say an
image or another web part.
| | 02:39 | Now if you need multiple pieces of
content you can have Multiple Content Editor
| | 02:47 | web parts on a page.
| | 02:48 | So if I wanted to add some text over
here in the left column, I again would have
| | 02:53 | to go my Media and Content section, add
another Content Editor web part to the
| | 02:57 | left column and then configure it.
| | 03:04 | I can select that text, I can use
some of these Markup Styles like say the
| | 03:08 | Colored Heading and do some basic formatting.
| | 03:11 | Now Web parts can also be dragged from
one section of the page to another, we
| | 03:16 | can grab this title bar here and I can
actually drag this around and add it to
| | 03:22 | another area what's called the Web Part Zones.
| | 03:25 | In this case, dragging from the Left
Column zone to the Body zone or from the
| | 03:29 | Body zone up into the Header zone, you can't
drag them anywhere that's not a web part zone.
| | 03:34 | If I try and drag them up here on to
the top I'll get the no entry sign.
| | 03:41 | And back into the Left Column.
| | 03:42 | Now web parts of course always have
this title bar on them turned on by
| | 03:47 | default, so here I've got the Calendar,
here I've got Content Editor [1], and
| | 03:51 | Content Editor [2].
| | 03:53 | This is what's referred to as the chrome of
the web part and it's fine while we were editing.
| | 03:58 | But let's say I go back to my page
part of the toolbar and tell it to Stop
| | 04:02 | Editing and save this, it's not really a
problem that I have the calendar chrome
| | 04:06 | here, but this Content Editor [1] and
Content Editor [2] is kind of ugly, so you
| | 04:11 | don't always want to see the chrome,
particularly with simple web parts.
| | 04:15 | It doesn't add anything.
| | 04:16 | So I'm going to switch back into
editing this page, because with web parts and
| | 04:21 | this is true on Wiki Pages too, you
can change the settings of each of them.
| | 04:25 | I first need to select the web part
just by clicking somewhere in it so I can
| | 04:29 | see that it's surrounded by the blue
box, and then up on the ribbon I will
| | 04:33 | have the Web Part tools Options
section that I can select, each web part can
| | 04:39 | be configured differently, each web
part has its own settings, what I call the
| | 04:43 | Web Part Properties.
| | 04:45 | So with this one selected I can jump up
here and click the button for web part
| | 04:49 | properties and it opens up this
section on the right-hand side very much
| | 04:54 | identical to the way it used to look in
SharePoint 2007, but what I'll find is
| | 04:58 | there is an Appearance section that I
can expand, where I've got information
| | 05:02 | about the Chrome, so it
is Minimized, is it Normal.
| | 05:06 | What type of chrome do I have,
Default, Title and Border, Title Only?
| | 05:10 | I'm going to choose None.
| | 05:13 | Choose that and click OK.
| | 05:15 | Now after clicking OK here, well I can
still see the Chrome for this web part,
| | 05:20 | but that's okay because I'm in Edit
Mode and I want to be able to see that,
| | 05:24 | otherwise there would be no way of
actually identifying that, that web part
| | 05:28 | existed or understanding what that web part was.
| | 05:30 | But when I go back to Page section of
the ribbon and I say Stop Editing what
| | 05:35 | you're going to find is that
Content Editor Web Part no longer has the
| | 05:39 | chrome header to it.
| | 05:41 | Again, I could switch into the Edit
Page mode, select the second one and
| | 05:45 | basically repeat the same method,
go into Web Part Properties, open up
| | 05:50 | Appearance and change the Chrome Type to None.
| | 05:56 | Back to page and save it again.
| | 05:58 | When you're working with web part
pages you do typically lose the Quick
| | 06:01 | Launch Bar, the navigation on the left-
hand side, but if you're after maximum
| | 06:06 | real estate that might be okay, sure the page
we're looking at right now here is pretty ugly.
| | 06:11 | But in fact, in my course on creating
data driven web pages in SharePoint 2010 I
| | 06:16 | do typically use web part pages because,
a, I do want maximum screen real estate
| | 06:22 | and b, I actually want
more formality to the layout.
| | 06:25 | Sometimes it's okay that the layout is
fixed and with something like complex
| | 06:30 | data driven page it's not really a plus
point to have everybody easily able to edit it.
| | 06:35 | One last thing about web part pages is
that unlike Wiki Pages you do not get an
| | 06:41 | option to easily view the page history
and compare different versions of it.
| | 06:46 | If you save it in a library that has
versions supported you can actually get to
| | 06:51 | the version information of that page
but you won't get an easy way to compare
| | 06:55 | what's happened to it.
| | Collapse this transcript |
| Using built-in themes| 00:00 | Perhaps the first visual issue that
most people run into with SharePoint sites
| | 00:04 | is you create a few of them, say team
sites, and blank sites, and document
| | 00:09 | workspaces, and they all kind of look the same.
| | 00:12 | They have the same color scheme, they
really feel like you're in the same place,
| | 00:16 | even if you are in completely different sites.
| | 00:18 | Now, in SharePoint 2007, the previous
version, we had something called Themes.
| | 00:23 | This was the ability to have
different color and font schemes that could be
| | 00:27 | applied to an existing SharePoint site.
| | 00:29 | And in SharePoint 2007 themes
were pretty bad and pretty ugly.
| | 00:34 | Now, the theme engine was completely
rebuilt from the ground up for SharePoint
| | 00:39 | 2010 and they are still pretty bad,
although we can find some find use for them.
| | 00:44 | A little later in this course we'll see
how to make complete custom themes, but
| | 00:48 | let's first explore what
we already have built-in.
| | 00:51 | Now I've already said that one of the
most important links under your Site
| | 00:55 | Actions menu is the View All Site
Content to really understand the lists and
| | 01:00 | libraries that you have on this site.
| | 01:02 | But the other most important one is
Site Settings, to change a lot of the
| | 01:07 | underlying settings of this particular site.
| | 01:10 | And again, you have a different Site
Settings page for every single site and
| | 01:15 | every single site collection in your
SharePoint Farm, and in the same way you
| | 01:19 | have settings pages for every list
and every library in every single site.
| | 01:23 | Now I am in the Site
Settings page for my Team Site here.
| | 01:27 | Your Site Settings pages will almost
certainly look a little different from mine
| | 01:30 | because these options do change based
on your SharePoint license and what kind
| | 01:35 | of site you're in, but most of what
we are interested in will be the same.
| | 01:39 | You can do quite a bit of
customization from this Look and Feel section--
| | 01:44 | everything from changing the Title and
the description of this current site,
| | 01:48 | giving it a custom logo.
| | 01:50 | Here's where we'd actually change the
Quick launch and the Top link bar, so
| | 01:54 | changing our links, our navigation.
We'll see that a little later.
| | 01:58 | And then we have this option
here to change the Site theme.
| | 02:01 | Clicking this will allow us to select
from a group of predefined color and font
| | 02:06 | schemes, some of which are pretty
useable and some of which really aren't.
| | 02:11 | We can flick through them and you'll
actually see kind of a preview of the color
| | 02:15 | scheme here. Some of them actually
don't look too bad, but you can't always tell
| | 02:20 | from looking at this preview.
| | 02:21 | I am going to select here Bittersweet.
| | 02:24 | If I come down a little bit further
instead of just applying this theme, I can
| | 02:27 | click Preview to just get a snapshot
of what this is going to look like.
| | 02:32 | And yeah, I really don't know what
they were thinking to offer this one as an
| | 02:35 | option, so I am going to just close that window.
| | 02:37 | I don't think I want Bittersweet.
| | 02:40 | In fact, as you can see here, you
can actually build up your own theme by
| | 02:44 | selecting a color and, say, a
heading font and body font.
| | 02:48 | But this is not quite as
straightforward as I would have liked it to have been.
| | 02:55 | You see what Microsoft are doing with
the idea of a theme is they're using the
| | 03:00 | same theme file across PowerPoint and
Microsoft Word and all of the applications
| | 03:06 | in Office, and unfortunately I don't
think it really transfers to the world of
| | 03:10 | SharePoint all that well.
| | 03:11 | For example, we have this idea here
that we have Text/Background - Dark 1,
| | 03:16 | Light 1, Dark 2, Light 2, but it's not
really that obvious what these colors represent.
| | 03:23 | You know, which part of the page is
actually represented by say Light 2, what
| | 03:28 | color is a heading using?
| | 03:30 | So you may have to do a bit of experimentation
if you want to create your own color schemes.
| | 03:35 | So start off by looking at
some of the pre-provided ones.
| | 03:39 | Although they don't all look that good,
there are a few that aren't too offensive.
| | 03:42 | Let's, for example, I'll take
Construct and Preview that one.
| | 03:48 | It's not the best but it's actually not too bad.
| | 03:51 | It would at least allow us to make a
bit of a distinction between a regular
| | 03:55 | SharePoint color scheme and
this being a different site.
| | 03:58 | And if, for example, you are lucky
enough to have your corporate color scheme be
| | 04:02 | close to this, you might use it as a
starting point to make your own themes.
| | 04:06 | Now we'll look at creating these custom themes
from scratch a little later on in the course.
| | 04:11 | But for now you can see how you can at
least apply a basic change, a basic color
| | 04:16 | change, to your SharePoint sites to at
least distinguish one from the other.
| | Collapse this transcript |
|
|
4. PermissionsIntroducing permissions| 00:00 | If you've played around with
SharePoint for more than a few minutes, you will
| | 00:03 | know that SharePoint cares about
permissions. It's very, very picky.
| | 00:08 | When you use a SharePoint site, at every
step of the way, it wants to know who you
| | 00:12 | are and what you are allowed to do.
| | 00:14 | What that means in a branding and
redesign project is that you have to have very
| | 00:18 | specific permissions in order to make
the changes that you will need to make.
| | 00:22 | Now let's recap some basic
SharePoint permission information.
| | 00:26 | In SharePoint every site is in a site
collection and every new site collection
| | 00:31 | in SharePoint begins with three security groups:
| | 00:34 | visitors, members and owners.
| | 00:37 | You can change this and you can
create new security groups, but this is the
| | 00:41 | default, and if you aren't in any of
those groups, you don't even get to see the
| | 00:45 | sites in that site collection.
| | 00:47 | If you are in the Visitors group, you
have a permission called read, and that is
| | 00:52 | exactly what it sounds like.
| | 00:53 | You get to read the site. You don't
get to change anything, you don't get to
| | 00:57 | make pages or sites or lists and
libraries, and you certainly don't get to affect
| | 01:02 | the way the site looks.
| | 01:03 | Now, above that is a group called
Members, and if you are in the Members group
| | 01:07 | you have a security privilege called
contribute, and that means you can edit and
| | 01:12 | delete items on the site, you can
upload documents and even create pages, but
| | 01:17 | you can't really change
anything about the way the site looks.
| | 01:21 | You are a contributor, but that's all you
are. You are not in charge of it in any way.
| | 01:26 | Now, above the member security group is
the third group, the most powerful one,
| | 01:30 | the Owners group, where you have full
control. And full control really means
| | 01:35 | that you do get to make new sites, you
get to make new pages, you get to change
| | 01:39 | the way the site looks. You get to do a lot
with it, and you even get to create sub-sites.
| | 01:45 | The Owners group is a pretty good group to
be in if you want to make visual changes.
| | 01:50 | Now, above owners there is the idea of a
Site Collection Administrator and this
| | 01:55 | person effectively has full
control over every single site in a site
| | 02:00 | collection and can do things like
activating features and changing the site
| | 02:04 | collection settings.
| | 02:05 | Now there is one more higher, God-like
permission called a Farm Administrator,
| | 02:10 | and this person can create and delete
entire site collections in SharePoint.
| | 02:14 | But we don't need anything like that
to do this course. Being a member is not
| | 02:19 | good enough. Being an owner, that's
pretty good. Being a Site Collection
| | 02:24 | Administrator, even better. To really
affect a design you need to have at
| | 02:27 | least full control.
| | 02:28 | Now, there is one more thing. If you are
working on a site with what's called the
| | 02:32 | publishing feature activated, you
could be in a group called the Designers
| | 02:36 | Group, which has a privilege called
design. It's somewhere between contributor
| | 02:41 | and full control, meaning
somewhere between member and owner.
| | 02:45 | You don't quite have as much as an
owner but you have more than a member. You
| | 02:48 | can rearrange web parts, you can change
the theme, you can change a little bit
| | 02:52 | of the look and feel, but
you can't make new sub-sites.
| | 02:56 | And this one can be okay for doing some
basic designs, but you will need pretty
| | 03:00 | high permissions and you may
need very high permissions.
| | 03:03 | If part of your job is going to be
creating the site itself, you may need even
| | 03:07 | to be a Site Collection Administrator,
but if you are just working with the
| | 03:11 | design of an existing site, you
should be able to get by with just the
| | 03:14 | designer privilege.
| | Collapse this transcript |
| Discovering what permissions you have| 00:00 | Here is how to figure out what
permissions you have on an existing site if you
| | 00:04 | don't know for sure.
| | 00:06 | Let's breeze pass the obvious one.
| | 00:07 | I am assuming you can actually get to
the site already and you are not getting
| | 00:11 | an access denied message.
| | 00:12 | So you are seeing a page. It might be a
team site like this one, it could be a
| | 00:16 | publishing portal, but you are
seeing a SharePoint 2010 site.
| | 00:20 | Now step two is going to the Site
Actions menu and, when click the arrow beside
| | 00:25 | it, figuring out how many options you have.
| | 00:28 | If you only see one option, say View
All Site Content, that pretty much means
| | 00:33 | you are a reader, you don't get to do
anything, and that won't be good enough to
| | 00:36 | make any change to the site.
| | 00:38 | If you see several options like I
am seeing now, that's a good sign.
| | 00:42 | The place to come down to is Site Settings.
| | 00:46 | If you can get to the Site Settings
page, you can at least have some level of
| | 00:51 | power, because SharePoint trims its menus.
| | 00:55 | What that means is it understands who
you are, what you are allowed to do, and it
| | 00:58 | doesn't tend to show any link you can't click on.
| | 01:01 | So if you can get here, we
are getting even further.
| | 01:04 | If you are on the Site Settings
page, do you see a column called Site
| | 01:08 | Administration? If you do see that
column, that's a good thing. You are a
| | 01:12 | Site Administrator.
| | 01:14 | Now, if I also see a column called Site
Collection Administration, even if there
| | 01:19 | is only one link beneath it, that's even better.
| | 01:22 | That means I am a Site Collection Administrator.
| | 01:25 | I own or administer the entire site collection.
| | 01:28 | Now if I don't see either of these two
columns, but I can still go to the Site
| | 01:32 | Settings page, then the most I am
likely to be is a designer, which means I can
| | 01:36 | do things like move web parts around,
but I can't really affect the entire site
| | 01:41 | or the site collection, at
least not without someone's help.
| | 01:44 | Now if your Farm Administrators do a
lot of custom permissions, you may have
| | 01:48 | some arrangement that's a little weirder, but
the ones I am describing are the most common.
| | 01:53 | Now it's very common that the farm
administrators don't actually know the
| | 01:57 | permissions that you will
need in order to do your job.
| | 02:00 | And most places default to being a
little too restrictive, so you may have to
| | 02:05 | educate them on upping those permissions a bit.
| | Collapse this transcript |
| Getting upgraded permissions| 00:00 | So if your permissions are not enough,
you need to know what to ask for.
| | 00:03 | You do need to have at least the
designer permission in a SharePoint site to do
| | 00:07 | anything significant with visual customization.
| | 00:10 | And again, this first clue is, how many
options do you have in the Site Actions
| | 00:14 | menu, and can you get to Site Settings?
| | 00:16 | Now, to improve your permissions, what
you need to find is the person with one
| | 00:21 | level higher than what you want as a permission.
| | 00:24 | It's no use finding someone who is just
a member of the site and who can create
| | 00:29 | pages on it. You need to find someone
who is at least an owner of the site,
| | 00:33 | because the site owner can
give you the Designer permission.
| | 00:36 | Now, if you know who the Site Collection
Administrator is, you could ask them and
| | 00:40 | they could give you full control on a site.
| | 00:43 | If you are on good terms with the
SharePoint Farm Administrator, they could make
| | 00:47 | you a site collection owner.
| | 00:49 | And you could see all the settings here,
including Site Administration and Site
| | 00:52 | Collection Administration.
| | 00:54 | Now, do be wary here.
| | 00:55 | There is a bit of a downside of being a
site collection administrator. Is that
| | 00:59 | you get access to a lot of these great
features that you can play around with,
| | 01:03 | but you may be roped into doing a
lot of site collection tasks and doing
| | 01:07 | reporting and working with security,
which may or may not be what you want.
| | 01:11 | With great power comes great
responsibility, and one of the downsides of being
| | 01:15 | a site collection administrator is it's
quite easy to accidentally really affect
| | 01:21 | the site in the site collection. It's easy to
delete entire sites with a click of a button.
| | 01:27 | So if you tend towards doing
accidental things, you may want to restrict
| | 01:31 | your own capabilities.
| | 01:32 | As a rule, what we are always looking
for is the minimum permissions necessary.
| | 01:36 | Yes, it's always nice to have god-like
permissions in SharePoint, but if you can
| | 01:40 | do what you want with designer
privilege, then that's the best one to have.
| | 01:43 | But your key is to find the person
with the privilege one level higher than
| | 01:48 | the one you want.
| | Collapse this transcript |
|
|
5. Introduction to SharePoint Designer 2010Exploring the interface| 00:00 | So let's finally get into
working with SharePoint Designer.
| | 00:03 | Now, I have a SharePoint site here. This
is a regular SharePoint 2010 team site,
| | 00:08 | the one I've been using all along.
It's on my own SharePoint Server.
| | 00:13 | Now, I already know that I have a lot
of options under my Site Actions menu.
| | 00:18 | And I have all these because I'm a
site collection administrator of this site
| | 00:22 | collection, and that's a really
good permission level to have when
| | 00:26 | customizing SharePoint sites.
| | 00:27 | SharePoint does care deeply about
permissions, whether you're in the browser or
| | 00:32 | whether you're in SharePoint Designer.
| | 00:34 | Now, we know that we get to any
SharePoint site in a web browser by typing in a
| | 00:39 | URL, and that will be the SharePoint
Designer. That's how we know what site to go to.
| | 00:45 | So we need the address of the site, but
as you probably know, SharePoint site
| | 00:49 | URLs can get pretty long. The simplest
way to find the address of the current
| | 00:54 | site without all the extra library
and page URLs is just hover over the top
| | 00:59 | level breadcrumb here, the title of
site, and down at the bottom left on the
| | 01:04 | status bar I'll see the shortest
address for this site, which for me is
| | 01:08 | ldcsharepoint.com/sites/team.
That's my own SharePoint Server.
| | 01:14 | So I'm going to copy that address
because I'll use it in a moment.
| | 01:18 | Now, actually, if I'm already in the web
site, in the web browser, and I want to
| | 01:22 | open this in SharePoint Designer, I
could just go to my Site Actions menu and
| | 01:27 | say Edit in SharePoint Designer. But
let's say I wasn't in the browser; I want
| | 01:31 | to this manually. What I'm going
to do is open SharePoint Designer.
| | 01:36 | I do have it installed already.
Typically, it's installed under a SharePoint
| | 01:40 | category here, although I've
actually pinned it to my start menu, so I'm
| | 01:44 | just going to launch it.
| | 01:46 | Now, if you were using SharePoint
Designer 2007, you'll know that it could be
| | 01:50 | used almost as a conventional web design
tool. You could make regular web pages,
| | 01:55 | even regular conventional web
sites in it. This is no longer true.
| | 02:00 | With the 2010 version of SharePoint
Designer, we don't have those options to
| | 02:04 | make regular web sites or individual pages. The
unit that we work with here is a SharePoint site.
| | 02:11 | In fact, I can even create a
new SharePoint site directly from
| | 02:14 | SharePoint Designer.
| | 02:15 | Here I've got options here for a new
blank web site or adding a sub-site, and I
| | 02:20 | see some of the common
templates, like blog and team site.
| | 02:23 | But most of the time we'll
work with existing sites.
| | 02:27 | Now, after you've opened sites in
SharePoint Designer, they'll appear over here in
| | 02:31 | the Recent Sites area as bookmarks, but
I don't have any listed, so I'm going to
| | 02:35 | click Open Site, and all I'm going
to do down here for a site name is just
| | 02:40 | paste in the address of the site I
want to go to, and then click open.
| | 02:45 | SharePoint Designer takes a few
seconds to talk to SharePoint, to get
| | 02:48 | information about the site, and
then it will open it up in the
| | 02:52 | SharePoint Designer program.
| | 02:53 | Now, if you need to provide a username
and password when you're viewing the site
| | 02:57 | in the browser, you'll almost certainly
need to provide a username and password
| | 03:01 | when opening it in SharePoint Designer.
| | 03:03 | My system is configured to pass those
credentials automatically so it's not
| | 03:07 | asking me for authorization here.
| | 03:09 | And here is an important concept:
having SharePoint Designer does not magically
| | 03:14 | give you any permissions
you didn't already have.
| | 03:17 | If you couldn't access this site in a
web browser, you won't be able to access it
| | 03:21 | using SharePoint Designer.
| | 03:22 | If you can't make changes to it in a
web browser because you don't have the
| | 03:26 | right permissions, you won't
suddenly have better permissions when using
| | 03:30 | SharePoint Designer.
| | 03:31 | So if you need to have those
permissions elevated, contact whoever gave you
| | 03:34 | access to the site in the first place.
| | 03:37 | So, we're in SharePoint Designer 2010.
| | 03:38 | Now, if you've used SharePoint Designer
2007, you'll immediately see that while
| | 03:43 | this might have the same name,
it's a very different application.
| | 03:47 | In the past, SharePoint Designer 2007
would open up almost pretending that
| | 03:52 | your SharePoint site was a
regular web site of folders and files.
| | 03:56 | But now, with SharePoint Designer 2010,
this really does feel like a SharePoint
| | 04:00 | focused program, not a web design application.
| | 04:03 | It doesn't show you some fake
representation of your site, something you might
| | 04:08 | see in Dreamweaver or another web design
program, it tells you what this site is made of.
| | 04:14 | This section over here on the left
under the word navigation, this shows you
| | 04:19 | the building blocks that your
SharePoint site is created of, the Lists and
| | 04:23 | Libraries in this site.
| | 04:25 | I can click List and Libraries,
see my list, see my libraries.
| | 04:28 | The workflows--I don't have any custom
workflows here but if I had, I'd see them here.
| | 04:34 | Site pages, the Wiki pages that I've
created myself, or the Web Part Pages, any
| | 04:39 | site assets that I have or content
types. And clicking the Home icon at the top
| | 04:45 | will take us to the top level
information and settings of this site. And you'll
| | 04:50 | also see that as I click around, the
ribbon for SharePoint Designer changes. If
| | 04:55 | I'm in the Lists and Library section, I
have options to make a new SharePoint
| | 04:59 | list, a new document library,
| | 05:01 | create a new list from a spreadsheet.
| | 05:04 | If I've clicked on the Home icon, I
will instead see things like the ability to
| | 05:08 | add users and groups, to create a sub-site.
| | 05:11 | Now, a lot of these options will
actually just take us back to the web browser.
| | 05:15 | If, for example, I come over here
and I click this option to go the
| | 05:19 | Administration web page, it's just going
to open up a web browser to take me to
| | 05:23 | the same page I'd get by
hitting Site Actions > Site Settings.
| | 05:28 | In a similar fashion, if I hit the
Recycle Bin option, it's going to take me to
| | 05:33 | the recycle bin section of that web site.
| | 05:36 | But there are a lot of things we
can only do in SharePoint Designer.
| | 05:39 | Now, if you're coming from SharePoint
Designer 2007, the closest thing to what
| | 05:45 | you're familiar with you can get by
clicking this all files folder here. This
| | 05:50 | gives you a kind of top-down folder
style view of the structure of your
| | 05:55 | SharePoint site and the containers
inside it. It gives you folders that
| | 05:59 | represent, say, your Site Pages
library and your Shared Documents library.
| | 06:04 | Now, we might use this view from time to
time, but I only use the All Files view
| | 06:09 | when there is no other option. It's
much friendlier going through the very
| | 06:13 | specific options above it.
| | 06:15 | Going directly into the Lists and
Libraries section and being able to drop into
| | 06:19 | a particular list or library, going
directly into the Site Pages section and
| | 06:24 | making a new page here.
| | 06:25 | Now, we're going to get a lot deeper
into SharePoint Designer as we go forward.
| | 06:29 | But we're now connected to a
SharePoint site and this is what we're going to
| | 06:34 | use to do more significant
customization of our pages, and it will allow us to
| | 06:38 | start creating overall site designs
instead of just affecting individual pages
| | 06:44 | one at a time.
| | Collapse this transcript |
| Making new pages| 00:00 | So, we have a site open in SharePoint Designer.
| | 00:03 | So how do we go ahead and make new
web pages in SharePoint Designer?
| | 00:07 | Well, sometimes the best answer is... you don't.
| | 00:12 | See, here's the thing.
| | 00:12 | We know that using the browser, if I
create a new page on this Team Site, it's
| | 00:18 | going to tell me that it will be
created in the Site Pages Library.
| | 00:22 | Now, it's the default location for new
pages in most SharePoint 2010 sites, at
| | 00:27 | least the ones that don't
have publishing enabled.
| | 00:30 | And if I am in SharePoint Designer, I
can see that I have this shortcut to that
| | 00:34 | library; Site Pages shows
up as part of my navigation.
| | 00:38 | I can see various pages that I have
already created and I can click them.
| | 00:42 | In fact, if I select them, and by
selecting them I mean I click somewhere in the
| | 00:47 | highlighted line as I mouse over but
not on the name directly, what will happen
| | 00:53 | is that by selecting, them I'll see
different parts of the ribbon will appear.
| | 00:58 | If, on the other hand, I click directly
on the name of the file itself, in this
| | 01:02 | case to ProjectX.aspx, I am going to get
taken to a Settings page about that web page.
| | 01:09 | It will tell me who made it, when it
was last edited, who can see it over here,
| | 01:14 | and permissions, how many
versions there has been of this page.
| | 01:18 | And it will even give me a
link over here to edit this file.
| | 01:22 | So, I am going to click that to edit
the file. IT thinks about it for a second and
| | 01:26 | then SharePoint will show it in this
Design view. It's complaining a lot of my
| | 01:30 | Latin placeholder text here, no big surprise.
| | 01:34 | But I could even use the cursor to
come over, see this that I am getting a
| | 01:38 | paragraph here. I can type directly
in and add some content. All the usual
| | 01:44 | things that you would
expect in a web editing tool.
| | 01:48 | However, notice that if I move my
cursor around, say up here a little bit, I am
| | 01:52 | getting the no entry sign around the
navigation, around the quick launch bar,
| | 01:58 | all this information.
| | 01:59 | And that's SharePoint Designer telling
me that this stuff is not available for
| | 02:04 | me to edit. I can't just click in here
and change this. It's being controlled
| | 02:09 | somewhere else and I can't
change it, or at least not here.
| | 02:12 | Now, also notice the breadcrumb trial
that we have at the top here. That's
| | 02:17 | telling me I am in the site called
Example Team Site, I am in the library called
| | 02:21 | Site Pages, and the file called ProjectX.aspx,
in the editing view of that file.
| | 02:28 | And that can be useful to kind of
navigate your way back up. If I click
| | 02:31 | that, it's going to say, do I want to save
the changes. I am going to say no right now.
| | 02:35 | So I can see the settings of the page,
I can go back up to see Site Pages in
| | 02:39 | general, I can go back up one level
just to see the entire site. Go back down
| | 02:44 | here into Site Pages.
| | 02:46 | Selecting one of these files by
clicking not on the name, but beside it, will
| | 02:52 | activate some of these areas on the ribbon.
| | 02:54 | So, for example, I can select ProjectX,
I can come over here and select to
| | 02:59 | Preview in the Browser. And notice
that I am getting multiple options here,
| | 03:03 | depending on the browsers that I have installed.
| | 03:05 | So viewing it in IE9 at a particular
size or even previewing in multiple
| | 03:11 | browsers at the same time.
| | 03:14 | And that can come in handy if you
are testing that your design works across
| | 03:18 | multiple browsers like Firefox and IE.
| | 03:20 | But we are meant to be talking not just
about editing pages and viewing pages,
| | 03:24 | but also about creating new ones.
| | 03:26 | Now, if you look up here on the ribbon,
when I am in this site pages library,
| | 03:31 | I do have two buttons here: to create
a web part page and to create a page.
| | 03:36 | Now, this seems like it would be the
same choice as when using the browser, but
| | 03:41 | it isn't. In fact, the web part
page here is the closest experience to how
| | 03:45 | it is in the browser.
| | 03:46 | If I click this, I am going to see
the dropdown that gives me multiple
| | 03:51 | layouts here of predefined layouts, different
columns like the header left column and body.
| | 03:56 | The dark rectangles
representing these web part zones.
| | 04:00 | But the other button over here is Page,
and that seems like it would make a Wiki
| | 04:05 | page, but it's not going to be the same thing.
| | 04:08 | In fact, page will require you to first
make a choice--is this an HTML page? And
| | 04:13 | that means literally a regular
static web page file or an aspx page.
| | 04:20 | Now, as you've probably noticed, pretty
much all of our pages end in .aspx, and that
| | 04:24 | simply means they are built to use
the Microsoft asp.net technology that
| | 04:29 | SharePoint itself is built on.
| | 04:31 | So I might think, okay I'll just go
ahead and make an aspx page. I click that.
| | 04:36 | It's going to create a new page here
that by default will be untitled underscore
| | 04:41 | something, in this case untitled_1.
| | 04:43 | Let me just go ahead and make this, let's
say, I'll call it SimplePage. Hit Enter.
| | 04:52 | It will rename it.
| | 04:53 | Now,, it says here that this is
wiki page, that's a little misleading.
| | 04:56 | The best example of the difference here,
well, let's preview this page in the browser.
| | 05:03 | That's it, completely blank, completely empty.
| | 05:07 | You see, when you make a page in
SharePoint Designer by using this option with
| | 05:12 | an aspx page, we are not getting a wiki
page. It's giving us either a completely
| | 05:18 | blank aspx file or an HTML file
where we have to provide everything.
| | 05:23 | You are kind of on your own.
| | 05:25 | In fact, if I drill into this page,
into the settings of it, and then say I want
| | 05:30 | to edit this file, its going to tell
me that I need to open this page in
| | 05:34 | advanced mode. It actually means I
just need to go directly into this view.
| | 05:39 | There is nothing else to see; it's empty.
| | 05:41 | Now, this is occasionally useful, if
what you want is a completely empty HTML
| | 05:47 | or aspx file, but for the most part, if you are
creating wiki pages, make them in the browser.
| | 05:54 | You can always edit them in SharePoint
Designer, but make them in the browser
| | 05:58 | because otherwise you'll just
end up with these empty ones.
| | 06:01 | I am just going to go ahead and
delete that; I really don't need it.
| | 06:04 | Now, you don't have to put all
these pages in your Site Pages Library.
| | 06:09 | You could go in directly into, say,
the All Files locations and you'll still
| | 06:15 | see the options there to
make your web part page.
| | 06:18 | But this is a very uncontrolled way of
doing it just directly in the root of the site.
| | 06:24 | It's something that I see a lot of
people do if they were familiar with
| | 06:27 | SharePoint 2007, where you had a lot
less control over where your pages went.
| | 06:31 | But I do recommend putting all your
stuff in the Site Pages Library, and that's
| | 06:36 | what I'll be doing going forward until
we get to the publishing sites, where
| | 06:40 | I'll be putting them in the Pages Library.
| | 06:42 | Now, dropping back into one of these
pages, whether it's a wiki page like this
| | 06:48 | one which I can edit, or a web part page,
but either way you might be wondering
| | 06:53 | why can't we edit this navigational area?
Why can't I click in here and change a
| | 06:59 | color or change a font or change a logo?
| | 07:01 | Well, it's because all pages in a SharePoint
site are using something called a master page.
| | 07:07 | And a master page is something that
describes the overall look and feel of that site.
| | 07:12 | In this case, it's describing what
the navigation is going to look like,
| | 07:16 | what the top bar is going to look like, where
the search box is, what colors are being used.
| | 07:22 | So, it's not directly editable here,
but we can use SharePoint to edit our
| | 07:28 | master page and give
ourselves a completely new design.
| | 07:31 | In fact, if you look over here in the
navigation section, there is in fact a
| | 07:35 | Master Pages section that contains
master pages, and we can edit all of these,
| | 07:41 | but that we'll come a little later.
| | Collapse this transcript |
| Using the Code and Design views| 00:00 | Some web developers like to work with the
raw HTML code and others want to avoid it.
| | 00:06 | In SharePoint Designer, as in most web
development tools, when you open a web
| | 00:11 | page for editing, you have the option of
staying all visual in this Design view,
| | 00:16 | a what you see is what you get view.
| | 00:19 | You can switch down here on this
status bar to the Code view and look at the
| | 00:24 | behind-the-scenes HTML and ASP.NET code
that we have here, or there is a mixture
| | 00:29 | of the two, which is the Split view.
| | 00:31 | Now, even if you like to stay in one
particular view in your other web design
| | 00:35 | applications, I find that in
SharePoint Designer, it's useful to often
| | 00:39 | switch between them.
| | 00:41 | There are some great drag-and-drop
capabilities available for Design view, but
| | 00:45 | for complete accuracy you will
often want to switch over to Code view.
| | 00:49 | Now, the shortcut between these is to
use the Control and Page Down buttons or
| | 00:54 | Control and Page Up. That will just
toggle around the three different views--
| | 00:59 | Design, then Split, then
Code, and back to Design.
| | 01:03 | Now, in Design view, I can select this
View section up here on the ribbon where I
| | 01:08 | have a couple of useful
options here such as Visual Aids.
| | 01:11 | Now, turning these on or off allows
me to see things like the areas, the
| | 01:16 | different DIV tags or different
table tags that I'm working with.
| | 01:20 | So they are turned on by default, but you
can actually use the drop down arrow to
| | 01:24 | select which particular things you
are actually seeing here, like Empty
| | 01:28 | Containers and Visible
Borders and Web Part Zone Borders.
| | 01:32 | And it's just trying to make those
invisible pieces selectable so that if
| | 01:36 | I want, I can use my mouse and
come around and select and highlight
| | 01:40 | different pieces here.
| | 01:42 | Up here on the ribbon, I can also use
this Task Panes button to enable sections,
| | 01:47 | very similar to a lot of web design tools.
| | 01:50 | We can come down and turn on the
toolbox; it will appear over here on
| | 01:54 | the right-hand side.
| | 01:55 | Or come down and turn on, say,
the CSS Properties section.
| | 01:59 | And these task panes are very sensitive
to what I actually have selected in the
| | 02:04 | design part of the window.
| | 02:06 | Now, switching to Split view, there
are a couple of things worth noticing.
| | 02:10 | First of all is when you are selecting
different parts of the page in, say, the
| | 02:14 | Design view, you'll find the
equivalent being highlighted up here in code.
| | 02:19 | And if you need to change something
about your page, that can be very helpful.
| | 02:22 | And because SharePoint can generate a
lot of code before you actually get to
| | 02:27 | insert yours, you often want to see
what exactly is this particular part of the
| | 02:32 | page embedded in, is it inside a
table, is it inside a DIV, where is it?
| | 02:37 | We have two ways of doing this.
| | 02:39 | With an element selected, I can
select a word here, and it shows me what
| | 02:43 | paragraph it's inside.
| | 02:44 | I could click this invisible element
here, this P tag, to select the paragraph.
| | 02:49 | But also down here at the bottom, I
have this tag hierarchy where I can see
| | 02:54 | the paragraph is inside a DIV with a
particular class, which itself is inside
| | 02:59 | another DIV, which itself is inside a
table cell, inside a table row, inside
| | 03:04 | a table body, inside a
table, and so on and so forth.
| | 03:09 | And by mousing around you can actually
select these if you want to, to select
| | 03:13 | the actual containers that they are in.
| | 03:15 | In SharePoint 2010, we also have
another way of doing this, which is
| | 03:19 | called Skewer Click.
| | 03:20 | If I select the Home section of the
ribbon, I find that there is a Skewer
| | 03:25 | Click option over here.
| | 03:26 | I click that once and then the cursor
changes, and I'm going to Skewer, or just
| | 03:31 | highlight, the thing that I'm interested in.
| | 03:33 | We'll go and the same thing here.
I'll click this word tristique, and it
| | 03:37 | pops up the equivalent of the
hierarchy but in this kind of modal,
| | 03:40 | mouseoverable window. So I can
mouse over the P and then figure out that's
| | 03:45 | inside another DIV, which is inside
another DIV, which is inside a table cell,
| | 03:49 | inside a table row.
| | 03:51 | And if you notice that as I'm
mousing over the different sections, we can see the
| | 03:55 | CSS Properties panel on the right-hand
side is actually changing. It's sensitive
| | 04:02 | to what I'm highlighting and what styles
are then being applied to that section.
| | 04:07 | And it can be very useful to find out
exactly where is a particular color or a
| | 04:12 | particular font being applied.
| | 04:14 | That can be quite difficult in
SharePoint because of the amount of nesting
| | 04:18 | that always goes on.
| | 04:20 | So that's Skewer Click.
| | 04:22 | Now, for those of you who are used
to working with very well-structured,
| | 04:25 | handwritten, clean, and perfectly
formatted Symantec HTML and CSS, if you have
| | 04:31 | ever viewed a SharePoint page and then
decided to view the source of that, you
| | 04:35 | are likely to be a little bit
disappointed about what has been delivered to you.
| | 04:40 | Because you will find as you go through it
that there is kind of a lot of messy stuff here.
| | 04:44 | In fact, the HTML generated by
SharePoint 2010 is much better than what was
| | 04:49 | generated by SharePoint 2007.
| | 04:52 | It does work now primarily with DIV
tags and SPAN tags and it uses CSS
| | 04:57 | classes and IDs properly.
| | 04:59 | But you will still see the occasional
thing like nested tables being used for
| | 05:04 | layout and just messy code in general.
| | 05:07 | This code is, after all, being generated
and a lot of it has to do with building
| | 05:12 | things like the ribbon and the dropdown
menus, and that's complex stuff.
| | 05:17 | You typically find that the generated HTML
is technically valid; it's just kind of ugly.
| | 05:22 | But if you are someone who likes to
work in your pages and ensures that any
| | 05:26 | nested DIV tag is always on a new
line and indented three perfect spaces,
| | 05:31 | SharePoint is not going to be your friend.
| | 05:33 | Some of this ugliness you are just
going to have to live with, though some of
| | 05:36 | it you will be able to change and improve,
particularly if you are doing a total redesign.
| | 05:41 | And that's one of the reasons why you
will some times want to work in the Code
| | 05:44 | view of SharePoint Designer to
get the accuracy that you need.
| | 05:47 | Now, just as there are settings in Design
view, we also have settings in Code view.
| | 05:52 | With that highlighted, I have a
different section of the ribbon which allows me
| | 05:55 | to create a few things like bookmarks.
| | 05:57 | Over here I have this Option section
that allows me to say turn on or off line
| | 06:02 | numbers for this code or auto indentation.
| | 06:05 | Now, depending on what you are editing
you will often see a lot of this code
| | 06:09 | shows up in yellow, and that means
SharePoint Designer is actually going to
| | 06:13 | prevent you from editing
it, or at least initially.
| | 06:16 | And you might be thinking, well, why do
they show me this code if I can't edit it?
| | 06:20 | Because it's useful, it shows you
this yellow code because it's often very
| | 06:25 | beneficial to know the larger
context of the page you are in.
| | 06:29 | The yellow code in Code view is kind of
like the idea of the no-entry sign that
| | 06:34 | I get when I'm in Design view.
| | 06:36 | It's really saying, if you want to edit
this, you don't want to edit it this way.
| | 06:41 | It's trying to stop you from
accidently making a change in the wrong context
| | 06:46 | because so much of what you
have is common to multiple pages.
| | 06:50 | So let's say, we were editing this
page in Design view and I wanted to change
| | 06:54 | the navigation over here on the left-hand side.
| | 06:57 | Well, this is site-wide navigation.
| | 06:59 | So if it let me do that, would I be
changing the navigation for just this page, or
| | 07:04 | would I be changing it for the entire site?
| | 07:05 | It's not clear, so it
doesn't let me do it this way.
| | 07:09 | Same idea with the Code view.
| | 07:11 | This is being generated and it will
be the wrong place for me to change it.
| | 07:15 | As you will see, everything is editable,
but it's not always editable in the
| | 07:20 | first place you look.
| | 07:21 | And we will see later where to change
some of this code properly, but in this
| | 07:25 | code there is no getting past the fact
that there is a lot of stuff generated by
| | 07:29 | SharePoint that we may just not understand yet.
| | 07:32 | We'll see a lot of tags here that aren't usual
HTML tags. There are things like SharePoint:
| | 07:38 | UIVersionedContent and tags
that begin with asp:Content.
| | 07:44 | And we are going to get into
these a little later on in the course.
| | 07:46 | When I'm changing something that can be
changed in both views, say just some of
| | 07:50 | this placeholder text here, I'll see
that up here in the Code view, this shows up
| | 07:56 | without the yellow background and
it's kind of indicating that yes, I can
| | 07:59 | continue and go on and change it.
| | 08:01 | Now, any time you do make a change to
the file, whether it's in the Code view or
| | 08:05 | the Design view or the Split view, as
soon as you make the change you are going
| | 08:09 | to notice that the tab up here that
says Sample.aspx has an asterisk after it.
| | 08:14 | And that's telling you that this file
has been changed but has not been saved.
| | 08:19 | And you will find that when you have
multiple pages open, you will have
| | 08:22 | multiple tabs along the top, and it's
very easy to scan them and see which ones
| | 08:26 | have been changed and which ones haven't.
| | 08:28 | So this isn't the kind of course where I
go through this program like SharePoint
| | 08:32 | Designer and go through every single
menu option and every tool pane. I do
| | 08:36 | invite you to explore what is here,
but now we know enough to move on.
| | Collapse this transcript |
| Using the Normal and Advanced editing modes| 00:00 | When I open a web page for editing in
SharePoint Designer, I actually have two choices.
| | 00:05 | What we've seen so far is what's called
Normal Mode, and that's what gives us a
| | 00:10 | lot of these locked sections
when we are in Design view.
| | 00:14 | Or if we switch to Code view, it's what's
really giving us a lot of this yellow code here.
| | 00:18 | It's attempting to prevent us from
changing this content that currently right
| | 00:23 | now is actually shared
across multiple pages in the site.
| | 00:26 | And really what it's doing
is telling me, focus here.
| | 00:30 | Focus in this content area. Not in the
navigation on the left, not in the area
| | 00:35 | on the top. In the content of this page.
| | 00:38 | But what if I wanted to change this?
| | 00:40 | Well, I can also open this page not in
Normal mode but in what's called Advanced Mode.
| | 00:46 | If I am already editing it, I'll
actually see an option up here on the ribbon to
| | 00:50 | edit this in Advanced Mode.
| | 00:51 | But let's say I haven't opened it yet,
I can go back into that Site Pages
| | 00:55 | library and either right-click the
file and select to Edit in Advanced Mode,
| | 01:00 | or with it highlighted and selected
you'll also find that is an option on
| | 01:04 | the ribbon here too.
| | 01:05 | So I am going to open that up in Advanced Mode.
| | 01:08 | Now I'll see somewhat of a difference
in the Design mode, where I do still see
| | 01:13 | the no entry sign but I've got other
areas that I seem to be able to select and
| | 01:18 | even start to write code if I want to.
| | 01:20 | If I switch into the Code view, no
more yellow code. I can actually change
| | 01:25 | everything here that I see.
| | 01:26 | Now, do be aware that this is still
not a completely independent page.
| | 01:31 | For example, in my Code view, I am not
seeing things like normal, expected HTML
| | 01:37 | head tags and body tags or
links to CSS files and JavaScript.
| | 01:42 | Those are still being provided and
driven by some other part of the system,
| | 01:46 | what's called the Master Page.
| | 01:48 | But I do have the ability, should I choose to,
to customize what I have been given here.
| | 01:53 | And in Design view, that's why I can't
still edit every single part of the page.
| | 01:58 | I am still seeing the sign, but I can
edit a lot more than I could do a moment ago.
| | 02:02 | I find that there are parts of this page
that, for some reason, I can now start to
| | 02:07 | type some content in here.
| | 02:08 | Now, if I do make a change and then
save this page, what it's going to do is
| | 02:13 | give me a warning that saving my
changes will customize this page, so it's no
| | 02:17 | longer based on the site definition.
| | 02:20 | I am changing this page from what it
would usually be, from many of the default
| | 02:25 | options this page might use.
| | 02:27 | Now this is not a big problem,
but it does have an impact.
| | 02:30 | I am going to click Yes here, and
depending on what kind of page you are editing,
| | 02:34 | you may get a message like this, and
this is really saying that some of the
| | 02:38 | content I had embedded on this page
was from the wiki page so it's going to
| | 02:43 | check and make sure it's
still all safe; that's okay.
| | 02:45 | So this page has now been saved, but
customized from that underlying site definition.
| | 02:51 | If I click the button up here on the
ribbon to preview it in the browser, it
| | 02:55 | looks okay and it will still work just fine.
| | 02:58 | I can see that I have got that new
change up here where I've put "Type some
| | 03:02 | content" in that customizable area.
| | 03:04 | So I have changed the page from what it
would usually look like, even though most
| | 03:08 | of this is still being
provided from the Master Page.
| | 03:11 | But I do have this kind of annoying
yellow status bar telling me that the
| | 03:15 | current page has been customized
from its template. And it will give the
| | 03:19 | message to anyone with the right
permissions, the ability to revert to the
| | 03:23 | underlying template.
| | 03:24 | Now this yellow bar is one of the
reasons why I try to minimize editing normal
| | 03:31 | SharePoint pages in Advanced
Mode, things like Wiki Pages.
| | 03:34 | For a start, you'll see this yellow
status bar, and secondly, it's really not needed.
| | 03:41 | The main reason that I avoid going
into Advanced View for these normal
| | 03:45 | SharePoint web pages is that if I am
wanting to change something about these
| | 03:49 | navigation areas or the header or the
footer or the color scheme, this is just
| | 03:54 | not the best place to do it.
| | 03:55 | So, what can I do if I have changed my mind?
| | 03:58 | Well, I could have clicked that
message on the yellow bar, but in SharePoint
| | 04:02 | Designer, if I am looking at the Site
Pages library, what I also see is this little
| | 04:07 | i here, this informational blue icon.
| | 04:11 | And that's telling me that this
page has been customized from the
| | 04:13 | underlying definition.
| | 04:15 | I can actually select the page here and
tell it to reset to the site definition.
| | 04:20 | That doesn't mean that it will change
the content back, so the text that I typed
| | 04:25 | in, in my case the place holder text.
it just means it will reset all the other
| | 04:29 | defaults back to the way they were.
| | 04:31 | I am going to say Yes. In fact, doing it
in SharePoint Designer will revert the
| | 04:36 | original one but make a copy of
the changes I have done before.
| | 04:40 | Now, going back into this and just
clicking to Edit the File will give us it
| | 04:43 | back in normal mode with the yellow
code with more of the no-entry signs here.
| | 04:50 | And when I preview this in the browser,
we are not getting that status bar.
| | 04:56 | In fact, I don't even need that
copy of the page so I am just going to
| | 04:59 | right-click that and choose to delete it.
| | 05:02 | Advanced Mode by itself isn't a bad thing.
| | 05:05 | You will find a little later on that
some pages may only be able to be opened in
| | 05:09 | Advanced Mode for editing.
| | 05:11 | But if I can stay in Normal mode, I will.
| | Collapse this transcript |
|
|
6. CSSWorking with CSS| 00:00 | As a web developer or a designer, you
should be very familiar with using CSS, or
| | 00:05 | Cascading Style Sheets, to change
the way that a web site appears.
| | 00:09 | Now, SharePoint uses a lot of CSS, and
not just the usual classes and IDs, but
| | 00:14 | complex combined selectors and pseudo classes.
| | 00:17 | So be prepare to have your CSS skills
tested, because when you are customizing
| | 00:22 | a SharePoint site, you are not just
going to create your own CSS, you are going
| | 00:26 | to need to tap into what SharePoint is already
doing with it and add to it, not just replace it.
| | 00:31 | Now if I'm looking at any web site,
and I really want to know what's going on
| | 00:35 | with the CSS, say with this Team Site
here, the first thing I'm going to do is
| | 00:39 | something simple like right-click the
page, and click View Source just to see
| | 00:43 | what I can see behind the scenes here.
| | 00:46 | And without even doing a search, I can
see that I've got three links here to
| | 00:50 | stylesheet file, something called
search.css and wiki.css and corev4.css.
| | 00:58 | Now, whether I recognize the rest
of the path or I give it meaning
| | 01:02 | doesn't really matter.
| | 01:04 | We are linking to external CSS files.
| | 01:08 | But if I were to come down a little
further, I'm also going to see that I have
| | 01:12 | some inline styles being created.
| | 01:14 | It's not just a link to external files,
but I can see some CSS rules here.
| | 01:19 | In fact, if I searched on the word "style,"
I'd be able to click Next and actually
| | 01:24 | navigate and see various places where
that style is being used. And I've got
| | 01:28 | some displays being turned on or off.
| | 01:31 | Now, you may see more or less of this
if you are looking at something different
| | 01:36 | than a typical Team Site, but we're
both linking to external stylesheets and we
| | 01:41 | are using inline styles here.
| | 01:43 | But the most important part of this
is this line here, the link to the
| | 01:48 | stylesheet called corev4.css.
| | 01:52 | This is the main cascading
stylesheet file for SharePoint.
| | 01:56 | It's really the key to 99% of SharePoint CSS.
| | 02:00 | We've got another couple of files
here-- wiki.css, because this site is using
| | 02:05 | Wikis, and search.css.
| | 02:07 | If search was disabled, that
file would actually disappear.
| | 02:10 | But the thing is we can't just say,
okay there are three CSS files. Great!
| | 02:15 | Show me where they are, so
I can go and change them.
| | 02:17 | It's not that easy, because
these files can actually change.
| | 02:21 | For example, here I'm
linking to this corev4.css.
| | 02:26 | But if, for example, I went into this
site, changed the settings of it, decide
| | 02:33 | to change the theme... I'll select
Construct, click Apply, go back to the homepage,
| | 02:43 | and then do a right-click View Source again.
| | 02:46 | Now I can see that here I'm not
linking to corev4.css anymore, I'm linking to
| | 02:51 | something that for me is corev4-8A0ABD2F.css.
Because what's happening is during
| | 03:00 | the process of requesting a SharePoint
page, the fact that I have this browser
| | 03:05 | open and I clicked a link, or I typed-in a URL,
| | 03:08 | the SharePoint server is getting a
request for this page, it's looking up
| | 03:12 | information in the database, and it's
actually combining several different CSS
| | 03:16 | files and sending me back that
constructed link, that generated link, in my
| | 03:20 | source that's building on the
fly the CSS that I'm looking at.
| | 03:25 | I'm going to change this theme back,
because I really don't need it right now.
| | 03:28 | So I'll just go back, and right at
the top I've got the Default (no theme)
| | 03:32 | selection, click Apply, and back to the homepage.
| | 03:36 | The thing is, we need to understand
these CSS files that are being linked to,
| | 03:42 | but we typically don't replace any of
the provided CSS files that SharePoint
| | 03:47 | has; we are going to add to them.
Because even if we wanted to change something
| | 03:52 | that's been written in this corev4.css
file, we might not change it directly.
| | 03:57 | We'll simply redefine it, and we'll
make sure that our definition will come
| | 04:01 | last, and we'll use the idea that CSS has of
the last in wins rule to provide our own styles.
| | 04:08 | But you see CSS is everywhere in SharePoint.
It's how most of this layout is being done.
| | 04:14 | It's easy to assume that we can just
change an existing CSS file and be done with it.
| | 04:18 | But as you've seen, the CSS pipeline, if
you will, in SharePoint is complex, and we
| | 04:24 | need to understand exactly where to
insert ourselves into it in order to achieve
| | 04:28 | the visual results that we want.
| | Collapse this transcript |
| Exploring the core.css file| 00:00 | You won't get very far with CSS and
SharePoint without running into this most
| | 00:05 | important file called corev4.css.
| | 00:09 | Now, if I look at the path that I am
currently using to link to it on this Team
| | 00:14 | Site, it looks a little strange.
| | 00:15 | We are using this /_layouts/1033, we
seem to be in several subfolders, we're
| | 00:22 | even using some strange URL parameter here.
| | 00:26 | Well, I can kind of ignore all of this.
| | 00:29 | I really want to know how do I get to this file,
how do I change it, how can I change the CSS?
| | 00:35 | Now, one thing you might be tempted to
do is jump into SharePoint Designer, open
| | 00:40 | up the site, and go looking for it.
| | 00:43 | But I am typically not going to find it.
Even if I start drilling through the
| | 00:48 | different parts of the site, I could
drop down into the All Files section which
| | 00:53 | itself would allow me to drop down into
multiple folders being represented here.
| | 00:58 | But I won't find that corev4
.css, at least not this way.
| | 01:02 | Now, early on working with
SharePoint, you have no doubt found out that
| | 01:06 | everything in SharePoint is coming
from a database. And in fact, this folder
| | 01:11 | structure that looks like folders and
files on a web server doesn't really exist
| | 01:15 | as folders and files; it's all in the database.
| | 01:18 | If I look at, say, my Site Pages Library
here for this particular site, I could
| | 01:23 | search my SharePoint
server to my heart's content;
| | 01:25 | I will never find these files called
ProjectX.aspx and How To Use This Library.aspx.
| | 01:32 | They are all stored in the database.
| | 01:35 | But let me show you
something that's a little different.
| | 01:38 | I am going to switch over to a remote
desktop window which I have here, and I am
| | 01:42 | actually logged on to my
remote SharePoint server machine.
| | 01:47 | Now, you don't need to have this level
of access to your SharePoint server, and
| | 01:51 | you typically won't.
| | 01:52 | But I am going to use it just to
navigate into a fairly long path here, that's
| | 01:58 | my Program Files > Common Files >
Microsoft Shared > Web Server Extensions, and
| | 02:03 | there is going to be a folder called 14.
| | 02:06 | This is what's sometimes referred to as
the 14 hive on the SharePoint server.
| | 02:10 | It's a folder that contains a lot of
the files that are actually installed as
| | 02:16 | part of SharePoint on that server,
whether you've got SharePoint Foundation 2010
| | 02:21 | or SharePoint Server 2010.
| | 02:23 | And in this 14 folder, I am going to drill
down a little bit further, I am going to
| | 02:27 | drop down into Template, then into
Layouts, then into 1033, which represents the
| | 02:33 | language English in the US--you might
have something slightly different--and
| | 02:37 | then finally into the Styles folder.
| | 02:39 | Now, if you are looking at this thinking,
am I supposed to remember this path?
| | 02:44 | Well, no, you are really, really not.
| | 02:46 | I've just done it often
enough that I know where it is.
| | 02:49 | But what I am trying to show you here
is that internally, SharePoint has a lot
| | 02:55 | of different CSS files
actually stored on the server.
| | 02:59 | Some of them are pretty small, and
they represent individual pieces like date
| | 03:04 | pickers whereas some of them are pretty large.
| | 03:06 | I am going to order by size, and
I will see that the largest one is
| | 03:10 | actually this corev4.css.
| | 03:13 | It's 188k if I am looking
at a file directly here.
| | 03:16 | Now, what's really happening is that
these are the shared underlying versions of
| | 03:21 | the CSS files that will be used across
every single SharePoint site that could
| | 03:26 | be created using the SharePoint server.
| | 03:29 | So you could potentially have thousands of
SharePoint web sites sharing this one corev4.css.
| | 03:35 | Now, a lot of designers might
think, well, great! This is cool!
| | 03:38 | Can I just open this up and edit it
even, say, with notepad or another tool and
| | 03:42 | make my changes here?
| | 03:44 | Well, technically you could, but it
would be an astoundingly bad idea, and really
| | 03:48 | you're never likely to change it here,
because first off, any change that you
| | 03:53 | make to this will instantly take effect
and impact every single SharePoint site
| | 03:57 | created on the server, not just yours.
| | 04:00 | And secondly, because this file is
stored inside the internal structure of the
| | 04:05 | SharePoint program, Microsoft reserved
the right to update this file with any
| | 04:09 | service packs or hot fixes on
SharePoint, so any change you make could be
| | 04:13 | overwritten. But it is useful
to know that these files exist.
| | 04:18 | It's one of the few times in SharePoint
where the files aren't just stored in a
| | 04:22 | database, this actual file does exist
on the web server on the file system.
| | 04:26 | We want to know: how do we impact it, how do
we change it, how do we affect it for our site?
| | 04:31 | Well, I am going to come back to
my own machine here, my own desktop.
| | 04:35 | The question is, if I can't immediately
see that file in SharePoint Designer and I
| | 04:39 | am not supposed to change the one on
the server, how do I start making changes?
| | 04:43 | Well, I am going to show you how, and
this is really going to be in two steps--
| | 04:46 | first show you how you would change it,
and then we'll talk about why you wouldn't.
| | 04:50 | So I am going to jump into any page
that I know that's using it, which is
| | 04:54 | pretty much all of them.
| | 04:55 | I'll say open up a Wiki Page that I had
created earlier, and I'll just click Edit File.
| | 05:01 | Just editing this in Normal
Mode is fine. I am in Design View.
| | 05:04 | Now, what I want to do is open up
one of my panes to deal with CSS.
| | 05:09 | Now if I go to the View section of the
Ribbon here, I can open up my Task Panes.
| | 05:14 | If you've moved things around a bit and
you've lost some of the arrangement, you
| | 05:17 | can come down and reset the workspace layout.
| | 05:20 | But what I am interested in is a pane
that will help me deal with CSS, and in
| | 05:25 | fact, there a few of them.
| | 05:27 | We do have the ability to
have a Manage Styles pane.
| | 05:31 | I could use this. It's not the one I want.
| | 05:33 | We also have an Apply Styles pane.
| | 05:35 | Again, could use this,
it's not the one I prefer.
| | 05:38 | I am actually going to open up the one
called CSS Properties, and I'm even going
| | 05:42 | to close the others, because I
don't have an awful lot of room here.
| | 05:45 | Now, this looks fairly blank right now,
but as I click around in the Design
| | 05:50 | View, what you are going to see is that
the CSS Properties pane changes based on
| | 05:54 | where I am in the page.
| | 05:56 | You've even got this divided; you can
move up and down a bit to either see the
| | 06:00 | direct CSS properties or up here,
what's more interesting--the Applied Rules.
| | 06:06 | What are the CSS rules that are being used when
we are on a particular section, say this headline?
| | 06:12 | What you'll see as you click around
is that this will actually change.
| | 06:17 | If I click inside a paragraph, I
have a different set of applied rules.
| | 06:22 | But if I have the header, that changes.
| | 06:24 | Now, I have a pretty simple page here,
so there is not a lot of places I can
| | 06:27 | click, but you will see that.
| | 06:29 | Do bear in mind that because of
the complexity of the CSS and SharePoint,
| | 06:34 | you often have multiple rules being
applied to a single piece of text or a
| | 06:39 | single image or a single table.
| | 06:41 | It can be a little challenging to
figure out what's actually making the change
| | 06:45 | that you are looking at.
| | 06:46 | So with this headline selected, I can
see that I have got the rules for this H1.
| | 06:50 | I have got various inline styles that
are being applied, the styles that are
| | 06:55 | being applied from the table
cell and from the table row.
| | 06:59 | I can see the CSS classes, the ones that
have the leading dot, and when I select
| | 07:03 | one of the classes or one of the IDs
rather than an inline style, it's going to
| | 07:09 | give me a hint of where this is coming from.
| | 07:11 | It's actually pointing here to corev4.css.
| | 07:15 | So let's say I wanted to
see the style for the body.
| | 07:18 | I'll click here and in corev4.css,
that's the file that's being used,
| | 07:23 | I can even click that link.
| | 07:25 | I instantly see this actually opened up here.
| | 07:28 | Now I am still really looking at the
shared version of it, but it allows me to
| | 07:32 | see what's in this file.
| | 07:34 | Now, kind of the depressing part of
this is if I start scrolling down, I'll see
| | 07:39 | that there are about 7500 lines of CSS,
some of it being fairly simple, but some
| | 07:45 | of these selectors being
really complex stuff going on here.
| | 07:50 | Back up--I am going to switch over
here using the Tab back to this ProjectX
| | 07:54 | page--because I want to
directly go and look at the Body Style.
| | 07:58 | So what I can do is right-click it
and actually say Go to Code. And that
| | 08:02 | actually drops me into that
Body Style in my corev4.css.
| | 08:08 | These comments here are being used for
us to use themes a little later on, like
| | 08:13 | this color can actually be
replaced if we decide to theme our site.
| | 08:17 | That's not important right now.
| | 08:19 | I can actually see with that selected
that I can either directly change the CSS
| | 08:24 | file here, or I've even got the kind of
quick way of editing it over here with a
| | 08:28 | dropdown menu--all the usual kind of
things you'd expect in a CSS editor.
| | 08:33 | Now, right now I'll notice that corev4.css
does not have a little asterisk to
| | 08:38 | it, because SharePoint understands I'm
still using the shared version of it.
| | 08:42 | However, as soon as I make a change...
let's say, for example, I am going to
| | 08:46 | change the body text color
to something fairly ugly.
| | 08:50 | Again, I could do either in the Code
View or over here. Let's make it red, so
| | 08:54 | it's nice and visible. It makes the
change in the CSS file, that is now marked
| | 08:58 | as having the asterisk here.
| | 09:00 | It's got an unsaved change.
| | 09:01 | Well, I am going to go ahead and save it.
| | 09:03 | It's giving me a warning:
| | 09:05 | Customizing this stylesheet and saving
it may cause themes and regional settings
| | 09:10 | not to display in the browser.
| | 09:12 | It's basically saying, hey!
| | 09:13 | You are now kind of cutting
yourself off from the default stylesheet.
| | 09:18 | You are changing things;
| | 09:19 | is this what you want to do?
| | 09:21 | Well, let's say, Yes, and you could.
| | 09:23 | This does not mean I am changing
that corev4.css file on the web server.
| | 09:29 | What's actually happened right now is it's
copied this file and stored it in my site.
| | 09:34 | Actually now, if I went back to my All
Files view, I'll actually see a folder
| | 09:40 | here that I didn't have a few minutes
ago called _styles and in that folder is
| | 09:45 | a copy of corev4.css,
| | 09:48 | the one that I've customized
from the default definition.
| | 09:52 | So changes I have made here are not
shared across other sites but are shared
| | 09:57 | with every page on this site.
| | 09:59 | Going back into my Project X, I can see
that the ugly change I made to the CSS
| | 10:04 | does seem to have had an effect on the text
of the page, which is what I'd expect to see.
| | 10:09 | You won't always find it as easy to
make a change in the CSS and have it have
| | 10:13 | the impact you want, simply because most
of the rules in SharePoint have multiple
| | 10:18 | levels of complexity.
| | 10:19 | But we'll talk about that a little later on.
| | 10:22 | Now, while you could certainly make
any changes you wanted to in corev4.css
| | 10:26 | because you've now got your
own copy, here is the problem.
| | 10:30 | You now have a pretty complex 8000
line CSS file to manage, most of which you
| | 10:37 | are not at all interested in.
| | 10:39 | So in a lot of circumstances, it's a
much better choice that you'd make your own
| | 10:43 | CSS file and just make sure that
your file is loaded in after corev4.css.
| | 10:49 | Let it bring in either replacement
rules or completely new ones, and we'll see
| | 10:54 | how to do that next.
| | 10:55 | Now, one thing you might occasionally
run into is customizing corev4.css and
| | 11:00 | realizing you didn't really mean to.
You want to go back to the default rule,
| | 11:05 | which is using the shared one.
| | 11:07 | Again, I can find this file.
| | 11:09 | Best way is to go into the All Files
section and drop into the Styles folder or
| | 11:14 | the _styles folder and then
click Reset to Site Definition.
| | 11:18 | It's one way of doing it, and that would
actually give me a copy I could take a look at.
| | 11:23 | Alternatively, you can actually go to your
All Files area and just delete that folder.
| | 11:29 | Always be careful that you
don't have anything extra in there.
| | 11:31 | But if I say yes, I want to delete it,
it's going to remind me that it will undo
| | 11:35 | any customizations made to
SharePoint stylesheets for this web site.
| | 11:39 | Do I want to proceed? Yes, I do.
| | 11:42 | In this case, I am getting another warning
that we are reverting to the default version.
| | 11:46 | Do I want to revert to the default stylesheet?
| | 11:48 | Yes, I do, and that's how we'd reset it.
| | 11:51 | So as you see, you can use SharePoint
Designer to quite easily change the styles
| | 11:56 | that are being provided by corev4.css.
| | 11:59 | But I prefer to make a new one,
particularly if you are going to make styles that
| | 12:03 | are applied across multiple pages.
| | Collapse this transcript |
| Detecting what CSS styles are being applied| 00:00 | When you're working with CSS in
SharePoint, here is one of your first challenges.
| | 00:05 | You're going to look at an existing
page and really need to find out what
| | 00:08 | styles are currently being applied to
one particular element. Maybe that's
| | 00:12 | trying to figure out what's actually
affecting the link over here in the
| | 00:16 | navigation section or the tab being
used on the top link bar, or what font is
| | 00:22 | being used over here in the search
box, or even something basic like this
| | 00:26 | Information about Project X header.
| | 00:29 | Now sure I know I can edit this page
and change it, but that would be a page
| | 00:34 | level change; I want to know where
this style is actually coming from.
| | 00:37 | Now, on other more simple web sites, I
might just open View source, find that
| | 00:42 | element, and visually browse to see what
classes or IDs are being applied to it.
| | 00:47 | But that doesn't really
work too well in SharePoint.
| | 00:50 | There are too many CSS rules being
applied to virtually every element.
| | 00:54 | So if I were to open up View source on
this page and then just find that string
| | 01:00 | of text which was information about
Project X, well, I find it here. And I can
| | 01:06 | see that it's in an h1 heading tag, but
it has a CSS class being applied here,
| | 01:13 | we've got ms-rteElement-H1.
| | 01:16 | Okay, I could go and look for that,
and I would actually find that in
| | 01:20 | corev4.css. But before I leave, I can
actually see that I seem to be contained
| | 01:25 | in a div, which itself has a class,
which is contained in another div, which
| | 01:31 | itself has a class and an inline
style, and that's in a table cell with an
| | 01:36 | inline style and a table row with an inline
style, and so on and so forth, all the way back up.
| | 01:41 | So there is a lot of stuff going on here.
| | 01:44 | It's not just this one class
that's going to affect what we see.
| | 01:49 | So how do I figure this out?
| | 01:51 | Well, I'm going to open this up in
SharePoint Designer. Just drop into my Site
| | 01:55 | Pages and into that Wiki
page that I have right now.
| | 01:59 | And I've opened this up in Normal mode
in Design view, and to figure out what CSS
| | 02:05 | is actually being applied, I'm going to
go to my view section of the Ribbon and
| | 02:09 | open up the Task Pane called CSS Properties.
| | 02:12 | There are a couple of task panes like
Apply Styles and Manage Styles that also
| | 02:16 | work with CSS, but this is my
favorite one for this kind of situation.
| | 02:21 | So with that open, I'm going to select
the text in here and then use SharePoint
| | 02:26 | Designer to just click on
the actual surrounding element.
| | 02:29 | Over on the right-hand side, I can
actually see all the applied rules that
| | 02:34 | are happening here.
| | 02:35 | Now some of these rules will have a
visual effect. Most of them won't, but
| | 02:39 | it can be a bit of a tedious process to
figure out which ones are actually impactful.
| | 02:43 | So as far as SharePoint Designer is
concerned, we're in this h1. I can see
| | 02:48 | the actual class here.
| | 02:50 | It's actually telling me that this
has got a font-size of 2ems and a
| | 02:53 | font-weight of normal.
| | 02:55 | Up there it's telling me also that
it's coming from corev4.css; that isn't
| | 03:00 | really a particular surprise.
| | 03:02 | If I start to click up, we can see that
there is a few inline styles, say inline
| | 03:06 | styles on the table cell and the table
row. But navigating all the way back up I
| | 03:11 | can even see that I've got things
like the body tag. This is what's really
| | 03:14 | setting the color of this
particular font in this case.
| | 03:18 | It's just being cascaded down from
the body tag, again in corev4.css.
| | 03:24 | Now, if I wanted to see the full rule
of this, I can either mouse over it, or I
| | 03:29 | can right-click it and say Go To Code,
and that will open me up just a copy of
| | 03:34 | corev4.css. This will not detach it
from the underlying definition, so I don't
| | 03:40 | have to worry about that.
| | 03:41 | It just lets me see that actual style here.
| | 03:44 | This is useful because I may
occasionally want to grab it so that I can later
| | 03:49 | make my own version of this
and have it in my own CSS file.
| | 03:53 | Closing corev4.css down, I'm not
saving it, I've made no changes to it here.
| | 03:58 | So navigating through these in
SharePoint Designer can be useful, but let me
| | 04:02 | show you what I prefer.
| | 04:03 | I'm going to go back
into Internet Explorer here.
| | 04:06 | Now I'm on IE version 9, which has a
built-in feature called the Internet
| | 04:10 | Explorer Developer tool.
| | 04:12 | This is build into IE 8 as well.
| | 04:14 | If you go to the tools section of the
Browser, you can find an entry that says
| | 04:19 | F12 developer tools, and you can just either
click this or, not surprisingly, just hit F12.
| | 04:26 | It opens up this whole lower section of
the screen which you can move up and down.
| | 04:31 | IE Developer tools is very much like
the well-known plug-in called Firebug on
| | 04:35 | the Mozilla FireFox Browser, and you
could use that too if you prefer it.
| | 04:39 | This developer tools plug-in is not
just for SharePoint; it allows you to
| | 04:44 | diagnose and understand any web page.
| | 04:47 | It's broken up into different sections.
| | 04:49 | We can look at the HTML tab here,
the CSS tab. It allows us to do some
| | 04:54 | diagnosing of things like JavaScript of
seeing how many files were actually sent
| | 04:58 | back and forth over the network.
| | 05:01 | For us I'm particularly interested
in the CSS, and when I switch to this I
| | 05:05 | actually get a dropdown that says, okay,
it immediately understands which CSS
| | 05:09 | files this page is using.
| | 05:11 | We've got search.css, wiki.css,
corev4.css of course.
| | 05:17 | Now sometimes when you switch to this
file, it might take a little while because
| | 05:20 | it's so huge. There are 8,000
lines here, so it's going through and
| | 05:24 | understanding it. And rather than
showing it to you in the raw CSS format, it
| | 05:29 | basically breaks it down into the
different rules and you can even turn them off
| | 05:34 | and on to see how they actually
affect the page as you are looking at it.
| | 05:37 | But the best thing about this is this
rather innocent looking arrow here on the
| | 05:42 | CSS part of the developer tools.
| | 05:44 | It's called Select Element by Click, and
it's a little bit like the Skewer Click
| | 05:48 | in SharePoint Designer.
| | 05:50 | So I'm going to click it till it's indented.
| | 05:52 | Then as I mouse over different parts of
the web page, it allows me to select one
| | 05:58 | of them and I am able to break down
exactly what's happening here with CSS.
| | 06:02 | So I highlight the header and I click it once.
| | 06:05 | On the left-hand side over here it's
dropped down to that exact part of the HTML and
| | 06:11 | showing it in a tree structure, but on
the right-hand side--and I'll just drag
| | 06:15 | this up to see it a little better--
| | 06:17 | what we're seeing is the combined rules
that are being applied to this section.
| | 06:21 | So I can see that I'm getting my color
which is the #676767, and that's part of
| | 06:27 | the body style. Here is where I get the font.
| | 06:30 | Then I'm also getting some values
inherited from a table style, and then I've
| | 06:34 | got the actual class itself, the
.ms-rte-element-h1, which is where we are getting
| | 06:40 | font-size of 2em and font-weight of normal.
| | 06:43 | Now the great thing here is I can
actually experiment with these as I'm looking
| | 06:48 | at it. If I'm trying to test, say, a new
style, I might want to take a look and
| | 06:52 | see, what would that look like
with 3ems? So I just click in the value,
| | 06:56 | hit Enter, it takes a second sometimes
to refresh it, again because there is so
| | 07:00 | much going on, and then
this actually gets updated.
| | 07:04 | Now we're not actually changing
anything here; we are not affecting any of the
| | 07:07 | files. But we can see what
effect our changes would have.
| | 07:12 | I'm going to select another element
by click, and go and, say, pick up this
| | 07:15 | paragraph here, and we see that we are
getting the same styles here from the
| | 07:20 | body. That's where the color is coming from.
| | 07:22 | And the great thing is it would let us
know that say if we change the font-size
| | 07:25 | from 8 points to 12 points. We might
think we are just affecting the paragraph,
| | 07:30 | but of course once this updates and
refreshes we'll see that we are having
| | 07:34 | knock-on effect with everything, all
the navigation as well, so that really
| | 07:38 | wouldn't work too well.
| | 07:39 | Let's just change that back.
| | 07:43 | You'll also have what's called the Trace
Styles option here in the Developer tools.
| | 07:48 | That is telling you the same
information but it's the other way around.
| | 07:52 | It's where is the color coming
from? Where is the font size from?
| | 07:57 | So it kind of drills up into the
individual rules and the styles that are being
| | 08:01 | applied and can be useful as well.
| | 08:03 | You also have the Layout option, just kind
of giving you some hints and reminders
| | 08:08 | on the box model and the margin
and the padding that it's using.
| | 08:11 | So there is an awful lot you can do
with this Developer tools, and definitely
| | 08:15 | something worth
exploring if you haven't already.
| | 08:17 | And using either of these tools, either
the IE Developer tools or Firebug, you
| | 08:21 | can find exactly how a particular
piece of CSS is affecting your elements.
| | 08:26 | So you do want to pick one of these
tools and become very comfortable using it,
| | 08:30 | because taking just your own eyes to the
mockup that SharePoint generates is a
| | 08:35 | recipe for frustration.
| | Collapse this transcript |
| Creating inline and embedded CSS styles| 00:00 | When using CSS on any web site, you
have three choices of how to do it.
| | 00:05 | You've got inline, embedded, or external CSS.
| | 00:09 | Now most of what we'll focus on in this
course is linking to external CSS files,
| | 00:14 | simply because that's the
most powerful way of doing it.
| | 00:17 | And that's what we do with any web site,
regardless of if we're using SharePoint or not.
| | 00:22 | But let's also talk about the inline
and the embedded methods here because they
| | 00:26 | can be useful for those one-off situations.
| | 00:29 | Inline and embedded CSS always affects
only one page, so we start with the page
| | 00:35 | that we want to change.
| | 00:35 | Now, with a typical SharePoint web page
like this Wiki page I'm looking at here,
| | 00:40 | I can do it either in the browser or I
can do it in SharePoint Designer, but if
| | 00:45 | you're on a site with the publishing
feature enabled, you won't be able to edit
| | 00:48 | most pages directly in SharePoint Designer.
| | 00:51 | That's an intentional restriction, and
we'll talk about that issue in a later section.
| | 00:56 | So I have this page open here and in
just the normal design view, normal mode,
| | 01:00 | not advanced mode, and I can select a
piece of text. Let's say I just want to
| | 01:06 | apply a background color to
this one sentence on this one page.
| | 01:11 | I could shift into split or code
view and type the CSS myself, or I can
| | 01:15 | actually come up here into this section
of the Ribbon and select this text and
| | 01:20 | make it highlighted.
| | 01:21 | Now the question is, what did it actually do?
| | 01:24 | Well this is an inline CSS Style.
| | 01:26 | If I switch to Split View, I can
actually see that the text that I have here has
| | 01:31 | been surrounded with a span tag with a
style in it of background color FFFF00.
| | 01:37 | This is a perfectly
acceptable way of doing it here.
| | 01:42 | If I wanted to select that text again
and, say, change the font, I could do that
| | 01:47 | too. And we can just see that it's
starting to extend that inline style here.
| | 01:52 | Now if I wanted to, I could also
create an embedded style. Nothing
| | 01:57 | SharePoint-specific here, just
creating a style tag and I'll create, say, a
| | 02:01 | custom class called .highlight.
| | 02:08 | Give it a background color and you can
actually see that SharePoint Designer
| | 02:11 | is helping me create this CSS Rule.
I'll use the Color Picker and will choose
| | 02:17 | that one. Click OK.
| | 02:19 | Now this is not a great way of doing
an embedded style because technically, I
| | 02:27 | shouldn't have a style tag inside a div tag.
It's messy, but it would work in a pinch.
| | 02:32 | And if I wanted to, I could then use
the style that I've just declared, come
| | 02:37 | down to, say, this paragraph and use it
and say, this is a class. And SharePoint
| | 02:42 | Designer already understands that I now
have a highlight class defined on this page.
| | 02:47 | I don't immediately see the change in
my second section of the Split View until
| | 02:52 | I click in here, and now I can actually
see the difference. We've got one color
| | 02:57 | actually highlighting the entire
paragraph and a slightly different color just
| | 03:01 | highlighting this spanned area.
| | 03:04 | I'm going to save this page. Because
it's a Wiki page, I'm just getting a message
| | 03:09 | that it may reload the content in
those Wiki sections, which is perfectly
| | 03:13 | acceptable. But I could switch over to
the web browser and refresh it and we
| | 03:17 | should see the changes that we've
applied here, ugly though they may be.
| | 03:21 | If I wanted to, I could shift into
Edit mode on the page itself. And while
| | 03:27 | anything that's applied inline we'll
actually see changing up here. So, for
| | 03:31 | example, it's recognizing we've got
Courier New. I could also use the HTML
| | 03:36 | section of the Ribbon, jump into that,
and we're actually seeing the inline span
| | 03:41 | style here and my
embedded style that I've created.
| | 03:45 | You'll also notice that SharePoint
seems to have done something strange
| | 03:49 | about it here where it's prefixing it with
this external class 910000 et cetera, et cetera.
| | 03:55 | And you'll see this quite a bit
where if you're trying to do inline or
| | 03:58 | embedded styles, it's going to kind of throw in
its own way of keeping track of some of this.
| | 04:03 | We can pretty much ignore this right
here, or I could go ahead and make a
| | 04:07 | change on this side.
| | 04:08 | Not just background color,
but let's try text-align:
| | 04:16 | right, and this should affect that
entire paragraph, and indeed it does.
| | 04:20 | It's giving me warning that the
HTML source we entered might have been
| | 04:24 | modified. Okay, that's fine.
| | 04:26 | But it seems to have had the effect that I
wanted, so I'm just going to save that page.
| | 04:30 | But of course, what we really want to
able to do is to have more significant CSS
| | 04:35 | classes, things that deal with layout
and background images and be able to share
| | 04:39 | those classes across multiple
pages, even all pages in our site.
| | 04:43 | And we can really only do
that by using external CSS files.
| | Collapse this transcript |
| Creating custom CSS files| 00:00 | Aside from the times where you really
only do want to make a change to just one
| | 00:04 | part of one page, we are going to
want to work with external CSS files.
| | 00:09 | Well we already are, after all.
| | 00:11 | We always have to deal with the
SharePoint-provided CSS files like coreV4.css,
| | 00:17 | because they are taking care of a
tremendous amount of stuff that even if you
| | 00:21 | are doing a complete custom design,
you don't want to have to reinvent.
| | 00:25 | Even basic things like the dropdown
menus on a typical site or working with the
| | 00:29 | Ribbon, or if you jump into any of the
behind the scenes settings pages. Lots
| | 00:35 | of SharePoint visuals that you and all
the other people who'll be working with
| | 00:38 | these sites are going to take for
granted. And these are all coming from those
| | 00:42 | provided CSS files.
| | 00:44 | But I still want to make some new CSS
and then automatically have it available
| | 00:49 | on every page in my site.
| | 00:51 | Now, once again, I don't recommend
that you edit coreV4.css directly.
| | 00:56 | If you want to change something that's
in it, you can redefine a style, and just
| | 01:00 | make sure that our definition will
come last. Or, of course, you could be doing
| | 01:05 | this to create completely new styles as well.
| | 01:08 | I am going to jump over to SharePoint
Designer and open up the homepage of
| | 01:14 | this particular site.
| | 01:15 | In SharePoint 2007 you'd usually
find your homepage under the all files
| | 01:19 | equivalent just called default.aspx at the
root of the site, but for us it's not that.
| | 01:26 | It's actually in our Site Pages library--
this one with the Home icon. That's how
| | 01:31 | I can quickly recognize it.
| | 01:32 | You can actually nominate any page as
being the default homepage for your site.
| | 01:37 | Even if I made a new one like that
Project X page, I could actually right-click
| | 01:41 | it and say, Set as Home Page.
| | 01:44 | And of course, if you are not
completely sure you can always just go to the
| | 01:46 | homepage of the site and look at the
URL to figure out which one it is, in this
| | 01:51 | case home.aspx inside Site Pages.
| | 01:54 | So I'll open that up. If you've
already been experimenting with SharePoint
| | 02:00 | Designer, you may have tried to make
your own styles or to edit existing styles.
| | 02:05 | And if so you've probably seen things
like the Apply Styles and Manage Styles
| | 02:10 | panes, which you can get to from the View
section of the Ribbon if they are not there already.
| | 02:15 | We have Apply Styles, I'll
also turn on Manage Styles.
| | 02:19 | Now these panes can first seem a
little confusing, because there is actually
| | 02:23 | a lot of crossover between them and you
really can do most things with either of them.
| | 02:28 | They have a very similar look here. They
have this Options dropdown that allows
| | 02:32 | us to show all styles or just the
styles used on the current page or the styles
| | 02:37 | used on, say, the current element.
| | 02:39 | So if I highlight this h1 here, I can
do that for both the Manage Styles Pane
| | 02:44 | and for the Apply Styles Pane.
| | 02:47 | However, you'll also see fairly
attractive options grayed out and unavailable,
| | 02:52 | like New Style and Attach Style Sheet.
They are on both panes, but I can't get
| | 02:57 | to either of them, and once again,
that's because SharePoint Designer here is
| | 03:00 | trying to lock down this page as
much as possible in the same way that it
| | 03:04 | prevents me from editing sections of
the navigation or along the top here.
| | 03:09 | Having said that, it's not always
consistent about preventing you from changing
| | 03:13 | things. If, for example, I have this
h1 highlighted and I can see the styles
| | 03:19 | that are being used here, I can mouse
over to see the full style. I can actually
| | 03:23 | right-click it and one of the
options I'll get is to modify this style.
| | 03:27 | So I am going to click that and I get
this great little CSS editing window. It
| | 03:32 | shows me the color, it shows me
the font-weight and the font-size.
| | 03:34 | Let's say I change this font-
size to 3 ems and I click OK.
| | 03:40 | We see the change on the page, but
it's a little bit deceptive, because the
| | 03:43 | question is: what just happened here?
| | 03:45 | Well, here is the thing, notice that
what I have got up here in my tab section.
| | 03:51 | Just making that change using the
Manage Styles Pane has actually split off a
| | 03:56 | copy of coreV4.css, and it's now
sitting there with the asterisk
| | 04:01 | telling me it's waiting to be saved,
but I've got all 8000-odd lines of coreV4
| | 04:06 | with my one single change in it.
| | 04:09 | And if I were to hit the Save button,
it's going to give me that message
| | 04:13 | remanding me that, oh, by the way, you
are now detaching your own copy of coreV4
| | 04:18 | and you are customizing the core
style sheet; is that what you want to do?
| | 04:21 | Now, as a general rule, it's not what I
want to do, we have to live with coreV4
| | 04:26 | but I don't want to have to manage it myself.
| | 04:28 | So I am going to come out and just
cancel that and stop it from saving. We'll
| | 04:32 | basically go back to the beginning
where we were a moment ago with the style
| | 04:36 | reset back to 2 ems.
| | 04:37 | Now, one thing to mention--if you are
actually editing this page in Advanced
| | 04:42 | Mode, meaning you've either opened it
that way or from the home section of the
| | 04:46 | Ribbon, you've clicked Advanced Mode.
| | 04:48 | When it refreshes you'll actually
see the options for both New Style and
| | 04:53 | Attach Style Sheet will become
available. And if I were to click New Style it
| | 04:57 | gives me that same window allowing
me to define a new, in this case, Class
| | 05:02 | Selector to find it in the current
page or in a new style sheet or in an
| | 05:06 | existing style sheet.
| | 05:09 | Similarly, clicking this Attach Style
Sheet gives me the option to provide it
| | 05:13 | with a URL, and by default it's going to
attach it just to the current page as a link.
| | 05:18 | These seem tempting options, but
once again, I like to avoid shifting into
| | 05:22 | Advanced Mode on just one page if I am
trying to make a change that's going to
| | 05:27 | end up affecting every page in the site.
| | 05:29 | So once again, I am going to cancel
out of this. I don't want to do this. I
| | 05:32 | didn't make a change to that page.
| | 05:34 | What I want is a new CSS file, and
then to automatically be able to have that
| | 05:39 | included on every page.
| | 05:41 | So step one is, how do I make
that file and where does it go?
| | 05:44 | Well, we can make a CSS
file just about anywhere.
| | 05:47 | I could, for example, go to my
Site Pages library and put it here.
| | 05:51 | Now, the question is, well, how? We
might have seen that there's options up here; I
| | 05:56 | don't see an option for a new CSS file.
I see Web Part Page, I see Page, which
| | 06:01 | we've seen before, I see Folder.
| | 06:03 | But if you actually just right-click a
blank area in the New option of the menu,
| | 06:07 | you get an option to make a CSS file.
| | 06:09 | I could do it that way.
| | 06:10 | Also, and we haven't really explored
this yet, if I had used the File section
| | 06:15 | of the Ribbon, there are options here to
add items. We've got Web Part Page and
| | 06:21 | New Page From Master (we'll see that
later) but in the More Pages section we
| | 06:25 | can add text file, CSS, JavaScript,
XML. So you can just do it through
| | 06:29 | SharePoint Designer.
| | 06:31 | Having said that, I really want to
leave my Site Pages section just for pages,
| | 06:36 | not for CSS files. There is no reason
why I can't put a CSS file here but it's
| | 06:41 | not my preferred location.
| | 06:42 | Now another place I could go is I
could click on the All Files section over
| | 06:47 | here on the left-hand side of the
Navigation and put it somewhere here.
| | 06:51 | I could actually just put
it in the root of the site.
| | 06:53 | Again, I could right-click, say New
and CSS file. It's right in the root; it
| | 06:58 | would be very easy to get to.
| | 07:00 | Although it is a little mess, it's not
that organized, particularly if we think
| | 07:03 | we are going to have multiple CSS
files and maybe multiple supporting images.
| | 07:09 | Now in SharePoint 2010, if you are in
the All Files view of the top level site
| | 07:15 | of a site collection, you are likely to
see there's quite a few folders--things like
| | 07:20 | Shared Documents, Site Assets,
Site Pages, Style Library.
| | 07:24 | Now these really represent document
libraries that SharePoint has created at the
| | 07:28 | root of this site collection and
these are actually great places to put it.
| | 07:32 | In fact, I am going to put it
in the Style Library location.
| | 07:36 | Now whatever I put here will be
accessible from every site in this site collection.
| | 07:40 | Now having said that, if you are working
with a sub-site in SharePoint Designer
| | 07:44 | not a top level site--I am just going
to open one here--your view of all files
| | 07:49 | is likely to look a little different;
it will look a lot more limited.
| | 07:52 | We don't have all those extra places.
| | 07:55 | But you can certainly create a CSS file
directly in the root of the site here,
| | 07:59 | or you could create a folder or
a document library to put it in.
| | 08:02 | It really doesn't matter where you put
it as long as you remember where you put
| | 08:07 | it and you can figure out the path to that file.
| | 08:09 | Now one final thing to be aware of is
if you are working with a publishing
| | 08:13 | site, you'll see something similar to
this, but actually even more folders.
| | 08:18 | And these folders, which are really
just document libraries in SharePoint, may
| | 08:22 | have check in and check out
enforced on a publishing site.
| | 08:26 | Now, it doesn't sound like a big deal,
but what it means is it can be a bit of a
| | 08:30 | gotcha for CSS, because your CSS won't
be available until you check it in for
| | 08:36 | every change you make to that file.
| | 08:38 | But I am not on a publishing site
right now. I am on a team site, the top
| | 08:42 | level site of a new site collection, so I am
going to put it here in this Style Library.
| | 08:47 | Style Library has got a Forms folder; I
am just going to ignore that. I am going
| | 08:51 | to right-click here, click New, CSS,
and it starts it off as untitled_1.css. I am
| | 08:58 | just going to rename that to custom.css.
| | 09:03 | I can then click to go in and edit it
and a little earlier when I have been
| | 09:08 | looking at coreV4.css I had actually
copied the body style, so I am just going
| | 09:14 | to paste it in here. Or we could, of
course, create our own new custom styles like
| | 09:20 | highlight, for example.
| | 09:22 | Editing a CSS file in SharePoint Designer does
give you this auto-complete option. We
| | 09:27 | can just start to use our cursor keys
and drop down into things like background
| | 09:31 | colors. We've got color pickers to play with.
| | 09:34 | It's all very useful, standard stuff
that you'd expect in any enterprise
| | 09:39 | level web design tool.
| | 09:41 | And if you notice, if you have the
Manage Styles area over on the right-hand
| | 09:45 | side, it's already smart enough to
realize that you are in custom.css, you've
| | 09:49 | got something called body, you've got
something called .highlight, and this
| | 09:53 | lets you navigate through a CSS file of
your own making as it starts to become
| | 09:57 | bigger and more complex.
| | 09:59 | Now I haven't made any changes to the
body style yet, but I am just going to go
| | 10:02 | ahead and save this file.
| | 10:04 | So our custom.css is saved, it's
inside this Style Library section which is
| | 10:10 | inside our top level, All Files.
| | 10:13 | But the question is, well,
so what? I mean, what now?
| | 10:17 | I have a CSS file but what I can do with it?
| | 10:20 | Is anything linking to it automatically?
| | 10:23 | No, no pages are linking to this at all.
| | 10:25 | Again, I said I wanted this file
available from every page on the site,
| | 10:30 | automatically, including all the
new pages that I am going to make.
| | 10:34 | And that leads us into a key question,
how do we describe something that is
| | 10:38 | shared, something that's common across
all pages? Things like links to a new CSS
| | 10:43 | file or different headers or different
footers, and that will lead us into a key
| | 10:48 | idea in SharePoint, the idea of master pages.
| | Collapse this transcript |
|
|
7. Customizing Foundation SitesIntroducing master pages| 00:00 | So you have seen that most pages on
SharePoint sites look very similar to each other.
| | 00:05 | They've got their Quick Launch
Navigation on the left, they have the top link
| | 00:09 | bar, they have the breadcrumbs,
and they have the Search section.
| | 00:14 | And as I change between pages on this
site, it's really just the main body, the
| | 00:19 | main part of content, that is changing.
| | 00:22 | The rest of it is staying pretty
similar, if not exactly the same.
| | 00:27 | That's because all SharePoint sites
use something called Master Pages, pages
| | 00:31 | that define the standard
layout of every page in the site.
| | 00:35 | And this is really helpful for us when
customizing SharePoint sites, because
| | 00:39 | if we can change the Master Page we can
instantly affect the layout of every page in that site.
| | 00:46 | When we've been creating pages so far,
we haven't worried about the area on the
| | 00:50 | top or the area on the left.
| | 00:52 | We've just been filling out our content.
| | 00:54 | In this situation these are
actually referred to as content pages.
| | 00:58 | We haven't had to worry about
defining headers and footers or links to CSS
| | 01:02 | or JavaScript files.
| | 01:03 | That's all being done in the Master Page.
| | 01:07 | Because when somebody opens a web
browser and types in the address of a page of
| | 01:11 | content, SharePoint first fetches the
Master Page for this site, which does
| | 01:16 | describe all that common content.
| | 01:18 | The pages are then combined and it's
the full result, the content page combined
| | 01:24 | with the Master Page,
that's delivered to the user.
| | 01:27 | Every site has its own Master Page.
| | 01:29 | Sure, when you create a new site it
begins with a copied version of the
| | 01:33 | standard Master Page, but each site has its own
and each site's Master Page can be customized.
| | 01:39 | So we can have hundreds or thousands of
content pages and just one Master Page in our site.
| | 01:44 | If you change the Master Page, you
change it for everything. You can shift your
| | 01:48 | layout around, you can change from
the typical full width-layout to a fixed
| | 01:52 | size. You can change it a little,
or you can completely reinvent it.
| | Collapse this transcript |
| Understanding the placeholders in master pages| 00:00 | In SharePoint, Master Pages are
created as a file ending in .master.
| | 00:05 | Now when defining a Master Page, you are
creating a complete web page layout from
| | 00:10 | the opening HTML tags to the closing
HTML tags, but you are also marking out
| | 00:16 | areas for content to come later.
| | 00:18 | So in this case, I might say I don't know
what's going to come in this main div section.
| | 00:22 | What I'll do instead is I'll
use these odd looking tags called
| | 00:26 | asp:ContentPlaceHolder tags, and this
marks the spot in this file where we can
| | 00:33 | inject our own content.
| | 00:35 | Now the user will never see these
tags, because when they ask for a page
| | 00:39 | that uses this Master Page, this
placeholder will be replaced by whatever
| | 00:44 | content needs to fill it.
| | 00:45 | Now this is a simple example.
| | 00:48 | In reality, they are always
substantially more complex than this.
| | 00:52 | You can't make do with just one placeholder.
| | 00:55 | You actually need to have a lot of placeholders.
| | 00:58 | Think about what the
typical SharePoint page has.
| | 01:01 | You've got dropdown menus, you have the ribbon,
you have the search box, the tag functionality.
| | 01:09 | This all has to be provided by the Master Page.
| | 01:12 | Well, you don't want to have to hand
write all the HTML for all these dropdown
| | 01:16 | menus and search box and navigation structure.
| | 01:19 | So in your Master Page, you don't just
have one placeholder for the main content.
| | 01:24 | You need multiple placeholders for
your logo, for your navigation, for your
| | 01:29 | search box, for the Ribbon.
These are all content placeholders.
| | 01:33 | You will fill the main content area
with your page content but let SharePoint
| | 01:38 | fill many of the other content placeholders.
| | 01:41 | So let's explore what's
inside an actual Master Page.
| | 01:45 | I am in a typical SharePoint
Foundation team site opened in SharePoint
| | 01:48 | Designer and I'll see that there is
actually a MasterPages section in my
| | 01:53 | navigation pane on the left.
| | 01:55 | Going into this I see several files.
The ones I am interested in are the ones
| | 01:59 | that end in .master.
| | 02:02 | These other files that end in .aspx are
describing some basic layouts like the
| | 02:06 | welcome page and the search results page.
| | 02:08 | So let's ignore those.
| | 02:10 | I have three here that end in .master
and I can ignore two of them.
| | 02:16 | The only important one for a typical
SharePoint 2010 site without publishing
| | 02:21 | enabled is v4.master.
| | 02:25 | If publishing is enabled, we
would have another Master Page here
| | 02:28 | called nightandday.master.
| | 02:30 | Now, Microsoft decided in their
infinite wisdom to do something in this Master
| | 02:34 | Page area that trips a lot of people up.
| | 02:36 | You see, every SharePoint site has a
specified default Master Page. And what we
| | 02:41 | mean by that is the Master Page that
this site is using, but the default Master
| | 02:46 | Page by default is not default.master.
| | 02:50 | The default Master Page by default is v4.master.
| | 02:55 | I am sure that sentence
sounded a little puzzling.
| | 02:58 | Here is what's happening.
| | 02:59 | We do have a file called default.master
and it's the one that a lot of people
| | 03:04 | would jump to and assume that this is
the one we need to look at. But this not
| | 03:08 | what we are interested in here.
| | 03:09 | You see, this file is the old SharePoint
2007 style Master Page, because it used
| | 03:14 | to be called default.master, and it's
only needed here when you are upgrading an
| | 03:19 | old site. You would never use this one
unless you had to as part of a migration
| | 03:23 | from an old version of SharePoint.
| | 03:25 | Now, similarly, there's one
here called minimal.master.
| | 03:29 | If you are someone who used the previous
version of SharePoint, a minimal Master
| | 03:33 | Page was a well-known term used for a
basic stripped down Master Page layout to
| | 03:38 | build our own on top of, but
this is not what it is here.
| | 03:42 | This minimal.master file is
something completely different and is used by
| | 03:46 | SharePoint for some of its internal
application pages like settings pages in the
| | 03:51 | search center and pages that use their
web-based office functionality. So we need
| | 03:55 | to leave this one alone too.
| | 03:57 | V4.master is the only important one for us here.
| | 04:01 | Let's take a look at it.
| | 04:02 | I am going to click in and
then click through to edit it.
| | 04:06 | This file will open automatically in
Advanced Mode, because we do have access to
| | 04:11 | every piece of this file.
| | 04:12 | If I switch to code view, I am not
seeing any yellow code that's preventing me
| | 04:17 | from typing anything here.
| | 04:18 | Now as I start to look at this, I can see
there is an awful lot of stuff in here,
| | 04:22 | but it is actually including things
like the HTML tags and the head tags.
| | 04:28 | Yes, there is a lot of other things
going on here, a lot of which is ASP.NET,
| | 04:33 | but as I scan through this I can
probably make a guess that some of the tags I
| | 04:37 | am looking at are being executed
on the SharePoint server to do some
| | 04:41 | interesting things.
| | 04:42 | We have this SharePoint:CssLink tag here.
| | 04:46 | This you might imagine is going to be
replaced by the actual links to things
| | 04:51 | like corev4.css and any extra
CSS files that we are using.
| | 04:56 | So a lot of what is here in the Master
Page will never be sent to a user's computer.
| | 05:01 | These tags are going to be processed
when the page is requested, and it's the
| | 05:05 | result of executing these tags, in
this case, to go and look up the CSS
| | 05:09 | information, that's going to be replaced
here. And we'll talk about how to inject
| | 05:13 | our own CSS files in a moment.
| | 05:15 | Now as I start coming down a little
further I am going to see a lot of these
| | 05:21 | asp:ContentPlaceHolder tags.
| | 05:24 | Now don't worry too much about what the
rest of the things are that are going on
| | 05:28 | here, but just see that we've got a
lot of content placeholder tags; they're
| | 05:32 | appearing again and again.
| | 05:34 | As I mentioned in the previous
section, the idea of a ContentPlaceHolder in
| | 05:38 | a Master Page is we are describing an area
that's going to be filled with something.
| | 05:43 | We are creating a placeholder
that later will have content for it.
| | 05:46 | Maybe we are providing it,
maybe SharePoint is providing it.
| | 05:49 | But there isn't one placeholder for the
main content and one for the navigation;
| | 05:54 | there are dozens of them.
| | 05:56 | Placeholders for the page title,
placeholders for the breadcrumb, the top of the
| | 06:00 | quick launch bar, the
bottom of the quick launch bar.
| | 06:03 | Again, many are going to be
filled by SharePoint itself.
| | 06:05 | Let me switch back to Design View,
because we can see them here too.
| | 06:10 | To see the Content placeholders in
Design View as well as possible, I am going
| | 06:14 | to go to the View section of my
Ribbon, and under Visual Aids I am going to
| | 06:19 | select the section that says Template
Region Labels. And while they are a little
| | 06:24 | dim, you'll see these Content
placeholders and little ghostly tags popping up
| | 06:29 | that I can click on.
| | 06:30 | There is one for the site name, one
for the page title, one for horizontal
| | 06:35 | navigation, one for the top
navbar, one for the left navbar.
| | 06:38 | You can also go to the style section
of the ribbon and click the button that
| | 06:42 | says Manage Content Regions.
| | 06:44 | That shows me that there are actually
about 30 different Content placeholders
| | 06:50 | that are defined in this Master Page.
| | 06:52 | Now, you may not care about all of
these placeholders, but that doesn't
| | 06:57 | mean SharePoint doesn't.
| | 06:58 | If you are doing a major design rework
of this Master Page you could delete a
| | 07:03 | few of these placeholders, but
there are a lot of placeholders that are
| | 07:07 | required in a Master Page.
| | 07:09 | And if you remove them, when
SharePoint tries to run and tries to find that
| | 07:13 | placeholder and can't, it
will error out your page.
| | 07:16 | So we need to be able to experiment a little
bit on Master Pages when we are making them.
| | 07:21 | We'll see that next.
| | Collapse this transcript |
| Creating a copy of the default master page| 00:00 | If you want to create your own Master Page the
best way to do it is to copy an existing one.
| | 00:05 | End of story.
| | 00:06 | Now I understand that this v4.master
file is really complex and when you look
| | 00:12 | through this you'd certainly be
forgiven for thinking surely it must be easier
| | 00:15 | just to start from a blank slate.
| | 00:18 | Start to build our own and we'll have a
lovingly crafted example of HTML perfection.
| | 00:23 | But you'll probably find that starting
with an existing one and either ripping
| | 00:27 | out or adding your own content is by
far the preferable way to go if you value
| | 00:32 | your time at all, because there are
just so many placeholders and so many
| | 00:36 | dependencies that you must have in
your Master Page, it's easier to copy one.
| | 00:40 | Now your first question might be
can I just directly edit v4.master?
| | 00:46 | Can I make my changes in either
design view or code view and save that?
| | 00:51 | Well, sure you absolutely can,
though I do recommend copying it anyway,
| | 00:55 | particularly because any change you
make to v4.master will instantly be used by
| | 01:01 | anyone viewing any page on this
web site as soon as you save it.
| | 01:05 | So if you make a simple mistake, you could
break the site for everyone who's using it.
| | 01:11 | So it's pretty simple to do.
| | 01:12 | I'll go to my Master Pages section
either by clicking on the breadcrumb on the
| | 01:16 | left-hand side and literally just do
a right-click>Copy, then right-click
| | 01:21 | blank area and say Paste.
| | 01:23 | I want to rename this one.
| | 01:25 | So I'll just call it mynewlayout.master.
| | 01:29 | They do have to end in .master.
| | 01:32 | I could click in here
and start to edit this one.
| | 01:36 | Even if I decided just to make this is
an experimentation, I just want to go
| | 01:40 | through and start ripping things out
and see what happens, this is certainly a
| | 01:44 | worthwhile thing to do.
| | 01:46 | As a very simple example, maybe I'm
looking some of these tags, I'm not sure
| | 01:51 | what impact they'll have if there not there.
| | 01:53 | So I'll grab just one, this
line 19 SharePoint:CssLink.
| | 01:58 | I'm just going to cut this out and save this.
| | 02:02 | It's going to give me a warning that
I'm customizing this page. That's fine.
| | 02:06 | Now I'm editing mynewlayout.master,
but the site is still using v4.master.
| | 02:11 | So I have to change the default Master
Page for this site. How do I do that?
| | 02:17 | Very, very easy.
| | 02:18 | We go back into the MasterPages sections.
| | 02:20 | I can even see the little i that's
telling me here that this file has been
| | 02:24 | customized from the basic site definition,
which is good and all I need to do is
| | 02:29 | right-click it and come down and say
Set as Default Master Page. That's it.
| | 02:34 | This is now the Master Page
for every page on this site.
| | 02:38 | Now if you have site with the
Publishing feature enabled you'll be able to
| | 02:41 | change the Master Page using the web interface.
| | 02:43 | There's actually a settings
page that will let you do it.
| | 02:46 | But you can't do it with a site
without the Publishing feature enabled.
| | 02:50 | We have to do it in SharePoint Designer.
| | 02:52 | So I jump back into the site and
refresh this and we'll instantly see that;
| | 02:58 | that one line changed that we did,
that pulling one tag out seemed to make
| | 03:02 | quite a big difference.
| | 03:03 | That's because in fact the tag that I
pulled out is the one that will generate
| | 03:07 | the links to corev4.css.
| | 03:10 | We can immediately see how much that's
actually been adding to our site even
| | 03:15 | before we start to touch it.
| | 03:17 | So this is kind of an example that
even though you can use these files and
| | 03:21 | start to play around and experiment with them,
a typical Master Page has a lot of dependencies.
| | 03:27 | It needs a lot of tags inside there which is
why we often don't want to go from scratch.
| | 03:32 | I'm going to paste that tag back
in that I'd copied out a moment ago.
| | 03:35 | Now if what you really want in a new
design is a customized version of the
| | 03:40 | current v4.master, more that just say
color changes, you just want some basic
| | 03:45 | layout changes to play around
with this, then this would be fine.
| | 03:49 | You could start with this and use
this as your basis for development.
| | 03:52 | But this is a complex page and it
takes a lot of experimentation if you're
| | 03:57 | intending to make really big design changes.
| | 04:00 | So let me show you another option.
| | Collapse this transcript |
| Restoring the default master page| 00:00 | It's very common that at some point
you are going to mess up a Master Page
| | 00:03 | that you are working on.
| | 00:05 | That's actually not a big deal.
| | 00:06 | If you are working on say a copy of
this, do know that by default you'll have
| | 00:11 | versioning enabled on this Master
Page library, what's called a Master Page
| | 00:16 | gallery here that we're looking at.
| | 00:18 | What that means is in SharePoint
Designer I could right-click this file and look
| | 00:22 | for version history and it gives
me all the versions that I have.
| | 00:26 | I could just select a
previous one and then restore it.
| | 00:29 | If on the other hand I've been
changing v4.master and I have broken it and I
| | 00:34 | didn't mean to, say by taking out one
too many content placeholders so that the
| | 00:39 | Master Page just doesn't work anymore,
because it recognizes that this file has
| | 00:46 | been customized from the underlying
site definition I can get it back, without
| | 00:50 | even worrying about versioning.
| | 00:52 | I simply select the file and either
from the ribbon here or from right-clicking
| | 00:58 | it I'll tell it to reset to site definition.
| | 01:01 | Now if you are making a lot of changes,
one good thing about this is it'll make
| | 01:04 | a copy of the current change that you have.
| | 01:07 | So by clicking yes we reset the
original and we still get a copy of it, and I'm
| | 01:12 | a big fan of leaving v4.master alone
as much as you can and just using it as
| | 01:17 | reference and as a fallback point.
| | Collapse this transcript |
| Creating new pages based on master pages| 00:00 | So let's see another perspective of
these placeholders and of Master Pages
| | 00:05 | themselves and that perspective
is coming from the other side.
| | 00:08 | Now I showed a little earlier that
when I'm in the Site Pages section of a
| | 00:13 | site, I really only have these two
option up here on the ribbon, that to create
| | 00:17 | a Web Part Page and the different
layouts available there, and then we had this
| | 00:22 | page button that let me make a raw ASPX or a raw
HTML page which really weren't all that useful.
| | 00:29 | But in fact I also have another
option which wasn't as obvious.
| | 00:32 | If I instead go to the File section of
the ribbon here, I have this ability, a
| | 00:38 | New Page from Master.
| | 00:40 | It will be an ASPX page, but it
allows us to choose the Master Page here.
| | 00:45 | So that's in the Add Items section.
| | 00:47 | Where we say we want to use a Master
Page it's asking which one, and it's just
| | 00:51 | pointing to the same folder
that all my Master Pages are in.
| | 00:55 | Again, we're interested in
anything that ends in .master, but if you
| | 00:59 | remember we're not after default.master,
we're after v4.master unless you got a custom one.
| | 01:05 | I've reverted back to just using v4.master.
| | 01:08 | It even has the little hit that this
is currently the default Master Page.
| | 01:13 | I'm going to click create.
| | 01:14 | It's asking what is the name for this,
I'll just call it New Content Page, and
| | 01:19 | yes I'll store it in Site Pages, and
when opening it it's going to tell me
| | 01:23 | that this page does not contain regions
that are editable in safe mode or normal mode.
| | 01:29 | Do I want to open this in
advance mode? Yes, I do.
| | 01:32 | So this is the page that
I have now in Design View.
| | 01:36 | We can see that we are using a Master Page.
| | 01:39 | We've got the Site Actions menu the
ribbon, we've got the logos, the titles, the
| | 01:43 | navigation, but if I actually look
at the code for this page this is it.
| | 01:48 | I've actually got one tag here.
| | 01:51 | It's splitting across a couple of
lines here just because I've got Word Wrap
| | 01:54 | turned on, but it's really one tag.
| | 01:57 | And all this line is saying is I'm a content
page who uses this Master Page file v4.master.
| | 02:06 | I can even preview this file in the
browser, and I'm going to see everything
| | 02:10 | provided by the Master Page, because
I'm just not providing any content yet.
| | 02:15 | I'm not coming along and
filling that main content area.
| | 02:19 | So I can do this back over here.
| | 02:21 | I'm going to flip over into Design View.
| | 02:23 | Now I might move my mouse around and
expect to be able to type in here, but I'm
| | 02:26 | getting that good old no entry sign
again, and the reason is right now we need
| | 02:30 | to be specific about saying
where we are providing this content.
| | 02:34 | Now I'm going to turn on my Visual Aids
this Template Region Labels part so that
| | 02:41 | I can see some of these different placeholders.
| | 02:44 | The one I'm interested in is
actually this one, PlaceHolderMain.
| | 02:47 | Now these tags right now are
coming from the Master Pager.
| | 02:53 | It's saying these are available
to you, what do you want to do?
| | 02:56 | And I actually am going
to choose now to fill this.
| | 02:59 | So I'm going to highlight PlaceHolderMain.
| | 03:00 | Now I still can't type anywhere, but
if I see I've got this little drop down
| | 03:05 | arrow over here, I'm going to click
that and the only option I have is to
| | 03:09 | create custom content.
| | 03:12 | So I'll click that link.
| | 03:13 | It doesn't look like anything has
actually changed, but what it can actually now
| | 03:16 | do is type in here and
provide my custom content.
| | 03:21 | It's a little difficult to read so
I'll go and just turn that Template
| | 03:26 | Region Labels off here.
| | 03:28 | So now this ASPX page of mine is
actually saying here are some custom content
| | 03:34 | that I want to fill the
PlaceHolderMain content placeholder, and what does
| | 03:39 | that look like in code?
| | 03:40 | So just as we had the asp:
ContentPlaceHolder tags in the Master Page, we have
| | 03:47 | asp:Content tags in the Content page
and they use this attribute here called
| | 03:53 | contentplaceholderid to say what is it
I'm trying to fill here, in this case
| | 03:58 | just by putting in a paragraph
with some custom content in it.
| | 04:01 | So this is all my content page has, but
when I save it and then view it in the
| | 04:08 | browser it's going to combine my
custom content fill that placeholder tag,
| | 04:13 | surround it with a Master Page,
and deliver me all the results.
| | Collapse this transcript |
| Using starter master pages| 00:00 | Because the v4.master Master Page is
very complex and not very well commented it
| | 00:07 | is difficult to use this as a
starting point for a really big redesign.
| | 00:13 | There is just so much going on here,
it's quite difficult to pull it apart.
| | 00:17 | Now while I suggested that you don't
just start from an empty file, there are
| | 00:22 | some other options available to you,
because there are some Master Pages out
| | 00:26 | there on the web that are stripped down
as much as possible and you can use them
| | 00:31 | as a starting point for
building a more substantial redesign.
| | 00:34 | Now the first file you can
get is actually from Microsoft.
| | 00:38 | It's what is called a Starter Master Pager.
| | 00:41 | With SharePoint 2007 this concept was
commonly called minimal Master Pager, but
| | 00:45 | we use the Starter Master Page now,
because Microsoft went and used the
| | 00:50 | minimal.master for a different reason.
| | 00:53 | So I'm just going to grab
this from the download section.
| | 00:56 | It doesn't really matter where you get it from.
| | 00:57 | It's just about 12K. So I'll grab that.
| | 01:01 | I'm just going to save it to my
Downloads folder. And now what?
| | 01:05 | Well, I can actually bring
it into my current web site.
| | 01:07 | I'm going to go to the MasterPages
section of the site in SharePoint Designer
| | 01:12 | and then come up here on the ribbon
and click the Import Files button.
| | 01:16 | I will then go ahead and
add file up from my Downloads.
| | 01:20 | There I have starter.
master, click Open, click OK.
| | 01:25 | It recognizes that it is a Master Page
file and let's take a quick look at this.
| | 01:30 | I am going to open it up and edit it.
| | 01:31 | It starts off looking fairly similar and
that's no surprise, because of a lot of
| | 01:36 | these tags here really are required.
| | 01:39 | I'm just going to go into my Code View
tools here and just turn off Word Wrap to
| | 01:44 | make it a bit more readable.
| | 01:45 | But if I come down I can actually see
instead of several hundred lines it's a
| | 01:50 | much smaller layout here and, for
example, it actually gathers a lot of the
| | 01:56 | content placeholders
together and this is very bare bone.
| | 02:00 | So what I'm going to do is just jump
into the Master Pages area, and then I'm
| | 02:04 | going to right-click starter.master and
say, Set as Default Master Pager just so
| | 02:09 | we can see what the impact is here.
| | 02:12 | Jumping over to this team
site homepage I then refresh it.
| | 02:15 | Now we are still getting some of the
color scheme information, because that's
| | 02:18 | using corev4.css which is being loaded, but
I see that I'm losing a lot of stuff here.
| | 02:25 | I don't see the search box, I don't see
the navigation, I don't see the ribbon,
| | 02:31 | and the Site Actions menu, I don't see
the top link bar, and that's because this
| | 02:35 | starter.masterpage is really
as striped down as you can get.
| | 02:39 | Even though it's, including all the
essential content placeholders, you will
| | 02:43 | actually find that some of them are hidden.
| | 02:46 | What does that mean?
| | 02:47 | If you notice that several of these
content placeholders which represent
| | 02:51 | things we could take a good guess at
like the placeholder for the search area
| | 02:55 | or the placeholder for the site name
are actually contained inside a div with
| | 03:00 | a class of ms-hide.
| | 03:01 | Now ms-hide is a CSS class in corev4.css
that simply has the style display:none,
| | 03:11 | which basically means make this
invisible, and this is actually a pretty good
| | 03:15 | example of what do you do if there is a
placeholder that you technically need in
| | 03:20 | SharePoint, but you don't want it to
show up in your design, or you can put it
| | 03:24 | in a div with the display:none.
| | 03:27 | Now the idea is that you are not going
to hide everything and in fact their own
| | 03:32 | comment here is basically that this is
currently hidden from UI, but you can
| | 03:37 | move any of these out to a non-hidden
location if there is a use for them.
| | 03:42 | But for ground up redesigns this
is probably about as simple as you
| | 03:46 | could possibly get.
| | 03:48 | There is another alternative, because
my preferred starting point is actually
| | 03:52 | different starter Master Page, and
these are the ones available at the address
| | 03:57 | startermasterpages.codeplex.com.
| | 04:01 | Again, they are still free
like the one from Microsoft.
| | 04:03 | I'll click Download.
| | 04:05 | Now these Master Pagers are from Randy
Drisgill who is author and a SharePoint MVP.
| | 04:12 | It's still a small download.
| | 04:13 | So I'm going to open the folder that
they are in and that downloaded as a zip.
| | 04:17 | So I'm just going to extract all of those.
| | 04:19 | Now you will actually see
there are three Master Pages here.
| | 04:23 | There is one for regular sites _starter_
foundation, there is one for sites with
| | 04:29 | the publishing feature enabled and we
will see this one later, and then there is
| | 04:33 | one specifically for meeting workspaces,
which has its own special arrangement.
| | 04:38 | I personally have never needed this one.
| | 04:39 | So I'm going to go back into SharePoint
Designer and import that other Master Page.
| | 04:44 | So back into Master Pages section,
Import Files, go and find that folder and
| | 04:51 | import the _starter_foundation Master Page.
| | 04:55 | Again, by the term Foundation
they don't mean you have to only have
| | 04:59 | SharePoint Foundation.
| | 05:00 | We are really talking about any
SharePoint web site that doesn't have
| | 05:03 | publishing enabled.
| | 05:04 | Now I'm going to go into this one.
| | 05:07 | Now what you will instantly see there
is actually a lot more here, there is
| | 05:11 | still many lines, there is actually
about 550 lines here, but here is what is
| | 05:17 | great about this one.
| | 05:18 | It's commented really, really well
and this is really the way that I think
| | 05:23 | Microsoft should have commented v4.
master, because you can start to break down
| | 05:29 | the different areas. What is this?
| | 05:31 | Well, there is a comment here.
| | 05:32 | It's the top navigation area.
| | 05:34 | These are styles needed to have the
left nav to the left of the main area, here
| | 05:38 | is where the quick launch bar is, here
is where the page editing status bar is,
| | 05:43 | and it really lets you start to
break down exactly where the content is.
| | 05:47 | Here is where you can put an
optional footer, here is the most important
| | 05:52 | line for most of us.
| | 05:54 | It's the content
placeholder for PlaceHolderMain.
| | 05:57 | This is this one line that's actually
going to be filled with what we primarily
| | 06:01 | think of as our regular
content of our web pages.
| | 06:05 | Everything else is support.
| | 06:07 | So if you are intending to do a large
scale redesign certainly take a look at
| | 06:11 | these other available Master Pages.
| | 06:13 | In fact, I would suggest having a copy
of these starter Master Pages around just
| | 06:17 | to act as reference even if
you don't intend to use them.
| | Collapse this transcript |
| Linking to a custom CSS file in a Foundation site| 00:00 | Earlier I talked about creating custom
CSS files and I had said that the best
| | 00:05 | place put those files is in the top
level site in your site collection, because
| | 00:09 | anything here can be easily shared
across all sites in that site collection.
| | 00:14 | And the best place to put them in that
top level site is in the Style Library
| | 00:19 | which I can get to from the All Files section.
| | 00:22 | Now in SharePoint 2010, even with
just the free SharePoint 2010 foundation,
| | 00:27 | every time a new site collection is
created, it adds this Style Library to the
| | 00:32 | top level site, and it makes it a good
place for deploying CSS files and image
| | 00:36 | files in a branding situation.
| | 00:38 | Now there is nothing magical about
the Style Library, it's just a library.
| | 00:42 | It's just becoming the expected
place to put this kind of content.
| | 00:45 | Now I've reset everything
in this site collection;
| | 00:49 | it's just a team site at the top
level site here right out of the box.
| | 00:52 | So I am going to start from scratch here
and put in a really simple CSS file here.
| | 00:59 | I'll call it custom.css and in that,
put in a very straightforward rule just so
| | 01:06 | we can see it take effect.
| | 01:12 | And I'll just put a font-style of italic
and I'll save that in my Style Library.
| | 01:17 | Now if you are working with a sub-site
instead of a top level site, you are not
| | 01:21 | going to have a Style Library
under your All Files section.
| | 01:25 | But that's not a big problem;
| | 01:26 | you could either create a CSS file
directly in the root of the site or just
| | 01:30 | create your own folder or library to put it in.
| | 01:33 | Okay, so we have this file, then what?
| | 01:34 | Well, we need to edit the
master page to point to this.
| | 01:38 | Now in sites with publishing enabled,
you can use a web page to change this, but
| | 01:43 | without publishing enabled, like this
site, we need to change the master page if
| | 01:47 | we want every page to
link to this custom CSS file.
| | 01:51 | So I'm going to open up and edit v4.
master, and I had reset this to the
| | 01:56 | basic site definition.
| | 01:58 | So we're going from scratch here.
| | 02:00 | Now in the head section, there is
nothing that would prevent us from anywhere
| | 02:04 | here coming down and just putting in
a standard link tag, and just actually
| | 02:09 | linking to our own content the
way I would on any SharePoint site.
| | 02:14 | This would be perfectly fine,
although do remember that there is actually a
| | 02:18 | little CSS tag that's being done here.
| | 02:20 | Here on line 19 in v4.master,
we've got this SharePoint:CSSLink.
| | 02:28 | What's happening here is this is
what's responsible for generating the CSS
| | 02:33 | entries if I look at the
source of this homepage here;
| | 02:37 | the CSS link tag in the master page is
what's going to cause these style sheets
| | 02:43 | to be linked to when the page is rendered.
| | 02:45 | So while we can add a standard link
tag, the official SharePoint way is to
| | 02:51 | volunteer to be part of this CSS
link area and here is how we do that.
| | 02:55 | I'm going to jump into my master page,
and I'm going to add a new tag and it
| | 02:59 | actually doesn't really matter where we
put it, but I'm going to put it beside
| | 03:03 | the CSS link here, before
or after, doesn't matter.
| | 03:08 | And the tag is this, SharePoint:CSSRegistration.
| | 03:16 | We are registering our CSS file so that
when the CSS link tag is generated will
| | 03:22 | be included in that.
| | 03:23 | Now because this is executed on
the server, I'm going to put in a
| | 03:28 | little runat="server" tag.
| | 03:30 | You'll see that on a lot of those
SharePoint tags, if not all of them, in fact.
| | 03:35 | And then what we need to have
is the name of our CSS file.
| | 03:39 | Now the path here can get a little tricky.
| | 03:42 | Depending on how your SharePoint server
machine is configured, you may be able
| | 03:45 | to just get away with typing in a
forward slash and then saying Style library
| | 03:49 | and then the name of your file.
| | 03:51 | But what I'm going to do is a path
from the route of my server, which means I
| | 03:58 | need to put in the site/team/custom.css.
| | 04:04 | Now there is one more little
attribute to put which is the after attribute,
| | 04:09 | because we want to make sure that
when our CSS file has been linked to, it
| | 04:13 | comes after corev4.css. That should do.
| | 04:19 | Forward slash to close this tag
and there is our CSS registration.
| | 04:24 | Well, let's go and see if it worked.
| | 04:26 | Before I've saved v4.master, I'm just
going to go over to my team site homepage
| | 04:30 | and just refresh the page, make sure I'm
just seeing an up-to-date version here.
| | 04:35 | It looks pretty normal.
| | 04:36 | So I'm going to jump back into SharePoint
Designer and I'm going to save my change here.
| | 04:41 | It's going to give me a warning that I
am changing this file from the underlying
| | 04:45 | site definition, the default master
page and I know that, that's okay.
| | 04:49 | Then it makes the change, going to
jump back over to the browser, refresh the
| | 04:54 | page, and I can see all the
text is now changing to italicized.
| | 04:57 | So it certainly did seem to
pickup for that custom.css file.
| | 05:02 | Let's double check it.
| | 05:03 | I'm going to right-click and view
source and I can see that yes, indeed, we are
| | 05:06 | now linking to that custom.css file
and that link is coming after corev4.css.
| | 05:13 | You can add multiple CSS
registration tags and use the after attribute to
| | 05:19 | control where they're going to be located.
| | 05:21 | But do bear in mind, it's the same
thing as on any web site that you don't want
| | 05:26 | to go crazy with the amount
of CSS files that you have.
| | Collapse this transcript |
|
|
8. Customizing Sites Using the Publishing FeatureIntroducing master pages in Publishing sites| 00:00 | So far we've been looking at master
pages for sites without the publishing
| | 00:04 | feature enabled, where we describe
the general structure of every page in
| | 00:09 | our SharePoint site;
| | 00:10 | the navigation, what goes along the top,
along the sides, where our search goes,
| | 00:14 | and all the placeholders for
the SharePoint provided pieces.
| | 00:17 | But if you're creating a large site, this
is probably not going to be good enough.
| | 00:23 | You can't just describe a couple
of headers and footers and be done;
| | 00:26 | you'd want more specific templates for
different pages on your site, maybe you
| | 00:30 | have things like product pages and article
pages, and they want their own custom layouts.
| | 00:35 | But when we turn on this
publishing feature, we have that ability.
| | 00:40 | We still deal with master pages and
content pages but we have something extra.
| | 00:46 | We also have this idea of page layouts.
| | 00:49 | Now these don't replace master pages;
| | 00:52 | they are in addition to master pages
and all three of them are used together
| | 00:56 | in a publishing site.
| | 00:58 | Master pages describe what's
common across the entire site;
| | 01:03 | page layouts describe a common type of page.
| | 01:06 | Say you have 1,000 product pages that
should all share the same basic structure,
| | 01:11 | while you describe a product page, page layout.
| | 01:14 | And then another page layout for your
500 article pages and maybe a slightly
| | 01:20 | different page layout for the 200
article pages when they have a video on them,
| | 01:24 | another page layout for your
knowledge based entries, and so on.
| | 01:28 | And then instead of your content page,
providing just one big generic block of
| | 01:33 | content, your content pages provide
very specific pieces that fit exactly into
| | 01:40 | the described page layout and what
happens is that all three of these are
| | 01:44 | combined into one result, which to
the user just looks like a regular page.
| | 01:49 | Now one impact of this is that when you
create a page in a publishing site, you
| | 01:54 | don't just make a generic
page and fill it with stuff.
| | 01:57 | You say that this page is an article
page or a product page or a job posting
| | 02:02 | page or whatever it is makes sense
for you and you have a very controlled
| | 02:06 | structure to that page.
| | 02:08 | And it allows you to have many people
creating content without knowing HTML and
| | 02:13 | still have good looking pages.
| | 02:14 | Let me show you an example.
| | 02:17 | So I've opened up a publishing portal here
which has the publishing feature enabled.
| | 02:22 | I'm going to use my Site Actions
menu here to create a new page.
| | 02:26 | This one is going to be created in the
Pages Library, a little different from
| | 02:30 | the Site Pages Library, which
is what we've seen up till now.
| | 02:34 | We are just going to give
it a name and click Create.
| | 02:37 | Now the page that I get here looks kind
of similar, but there is more going on
| | 02:43 | than first meets the eye.
| | 02:44 | One of the most important things I'll
find up here on the Page section of the
| | 02:48 | ribbon, I have section I didn't
have before called Page Layout.
| | 02:52 | This allows me to choose from the
different page layouts that have been
| | 02:56 | defined for this site.
| | 02:57 | Now all of these still use the same
master page, but they allow me to have, for
| | 03:02 | example, this Body only page
which is the default one right now.
| | 03:07 | I can change to a page with an image on
the left, I can go back change this page
| | 03:12 | and come down and change it to a Splash Page.
| | 03:16 | And notice that on a lot of these pages,
there is a significant level of formality;
| | 03:21 | we don't just get one generic area to
type into or even three columns to type into.
| | 03:27 | I have, for example, a
place here to write the title.
| | 03:33 | But when I'm writing the title, it's
not allowing me to change the font.
| | 03:37 | That's not up to me here, I have a place
to put the page image, but I don't just
| | 03:42 | get to insert it in a raw piece of
content and put it maybe at the top or maybe
| | 03:46 | at the bottom, this is controlling
exactly where this is going to go.
| | 03:49 | I'm going to change back to a
different page layout here and actually shift
| | 03:53 | to Image on the left.
| | 03:55 | Here I've got an Article Date, I'll
just put today's date and a Byline.
| | 04:00 | I'll just put my own name here.
| | 04:05 | We've got an area here for an Image Caption;
| | 04:07 | Click here to add new content,
and a place here for a page image.
| | 04:16 | Click Insert, go and browse, I'll find an image.
| | 04:19 | I'll jump into my Site Collection Images
folder that I have here, where I've got
| | 04:25 | a couple of generic ones.
| | 04:27 | Select this one, click OK.
| | 04:31 | And then I have this section here called
Page Content with a link, Click here to
| | 04:34 | add new content, and just type a little text.
| | 04:42 | The thing to stay aware of is the
control and the formality of what's
| | 04:46 | actually happening here.
| | 04:48 | When I save this, it's actually
enforcing it into a particular layout.
| | 04:52 | I didn't get to choose the font and
the size of the title, that's been
| | 04:55 | defined in the Page Layout.
| | 04:57 | The position of the byline has been defined;
| | 05:00 | the position of the date has been defined.
| | 05:02 | Okay, right now, this is looking very
simple, but the idea is we can shift into
| | 05:07 | Edit mode and I could edit this page
without really knowing anything about HTML
| | 05:12 | and if my designer has created a good
page layout, it would enforce a particular
| | 05:16 | arrangement on this page.
| | 05:18 | Now a publishing portal right out
of the box only has a few very basic
| | 05:22 | page layout examples.
| | 05:24 | But the idea is, of course, that you're
going to make your own page layouts for
| | 05:28 | all the different unique kinds of
pages that you have on your site.
| | 05:31 | Now what should hopefully becoming
clear is that you'd want this publishing
| | 05:35 | feature on a large scale site that's
about communication, where you've got many
| | 05:40 | more consumers of this information than
you have contributed, and you're wanting
| | 05:45 | to really tightly control how it's
presented, but you would not want it on a
| | 05:49 | site that's more casual and
collaborative like a team site or a document
| | 05:52 | workspace, because it would just get in the way.
| | 05:55 | So publishing sites do add some more
work in your design, but it's all about
| | 06:00 | structure and it's going to
save you a lot of headaches later.
| | Collapse this transcript |
| Exploring the Master Page Gallery| 00:00 | So when we are working with a
publishing site, it's easy to think that there
| | 00:03 | must be something really
different about master pages.
| | 00:06 | Well, not really, but they can be a
little simpler. Let's take a look.
| | 00:11 | I am going to switch over to
SharePoint Designer here where I have this
| | 00:15 | Publishing Portal opened up, and
most of what I see here is identical.
| | 00:20 | I still have, for example, a Master
Pages section, but if I click on that, and
| | 00:24 | look in here, I actually see that I
have got less files than I had in that
| | 00:28 | normal team site in the other site collection.
| | 00:31 | But they are not so different, in
fact, these are all my .master files.
| | 00:36 | Once again, we can ignore default.
master and we can ignore minimal.master.
| | 00:40 | v4.master, we already know and this
is the same as on non-publishing sites.
| | 00:46 | But we have one new one here.
| | 00:48 | It's called nightandday.master.
| | 00:51 | And this is actually the master
page that you are seeing when you see a
| | 00:54 | publishing portal with the
gradient and the logo for AdventureWorks.
| | 00:58 | Now if you've seen this and thought it
was ugly, you are completely right and
| | 01:03 | it's kind of meant to be.
| | 01:05 | Microsoft don't intend you to ship a
public web site or an Internet site that
| | 01:09 | looks like this, you are meant to change it.
| | 01:12 | So this is the master page that's being
used by a publishing portal but the idea
| | 01:18 | is it's really just a simple
master page that you're going to alter.
| | 01:21 | So I am going to open this up in
SharePoint Designer and click Edit File and
| | 01:26 | it's giving me a message here that I
didn't get when I was working with my team
| | 01:29 | site earlier, but this
file is under source control.
| | 01:32 | Do you want to check it out? Well, yes I do.
| | 01:34 | We'll talk about this a lot later on.
| | 01:36 | Now this nightandday.master is
actually simpler than v4.master.
| | 01:41 | It's still a few hundred lines of code,
it's about 430 rather than about 650,
| | 01:47 | and that might seem
counterintuitive for a second.
| | 01:51 | Think about it, we are using this
advance publishing feature, but you've now
| | 01:55 | been given a simpler master page than v4.
master which we know is actually in the
| | 02:01 | free version of SharePoint.
| | 02:03 | So what's going on?
| | 02:04 | Think about it this way;
| | 02:05 | v4.master is meant to be
complete, it's ready to go.
| | 02:10 | v4.master is what you use to make a
team site, make a document workspace, start
| | 02:15 | using these sites in five seconds.
| | 02:17 | But nightandday.master is a pretty
basic layout that they don't think you are
| | 02:21 | ever going to really use;
| | 02:22 | you are just going to change it.
| | 02:24 | So it is really a starter master page and in
fact, it has its own set of hidden regions.
| | 02:30 | Right down here near the bottom of it,
I can see that I have got an asp:panel
| | 02:34 | with Visible="false" and that's
really meaning that all these required
| | 02:39 | placeholders that I have to have on
this page right now aren't even showing up
| | 02:44 | when I view this in the web site.
| | 02:46 | And it's actually a pretty good starting
point, but having said that, I am still
| | 02:50 | a fan of the startermasterpages.
codeplex.com project for publishing sites.
| | 02:56 | So I am going come out of this and
just close that down and notice that I am
| | 03:00 | back in my Master Pages section in
SharePoint Designer and I can see that
| | 03:04 | checkmark here and I'll be very
conscious of these icons that you see.
| | 03:09 | We've seen the blue icon with the
exclamation mark, which most of the time
| | 03:13 | you can kind of ignore as long as you
understand that means you've customized a page.
| | 03:17 | But this one is pretty important;
| | 03:20 | we've checked this file out.
| | 03:22 | Well, for right now, what I want to do
is undo or discard that checkout because
| | 03:28 | I didn't actually make any change to it.
| | 03:30 | So I can select the file by clicking beside
it and then say Undo Check Out and say Yes.
| | 03:35 | That's correct.
| | 03:36 | You want to be very
conscious of the Check Out icon.
| | 03:39 | Now even though we've seen
nightandday.master, don't make the mistake of
| | 03:43 | thinking v4.master is not needed
if we are using publishing sites.
| | 03:47 | It's absolutely still relevant
and we'll see that in a moment.
| | 03:51 | Okay, so we've got master
pages, same old, same old.
| | 03:55 | But what about these page layout
things we've been talking about?
| | 03:57 | Well, if you have a publishing site
open in SharePoint Designer, you'll also
| | 04:01 | have this Page Layout section over here.
| | 04:04 | Now this is where our page layouts is stored.
| | 04:07 | Now out of the box, the publishing
portal has a few, there are things like the
| | 04:12 | article with an image on the left,
article with an image on the right, a
| | 04:16 | welcome splash page.
| | 04:18 | There's this thing called
the variations root page.
| | 04:21 | Now variations are concept that
you can use in SharePoint to create
| | 04:25 | multi-lingual versions of your site.
| | 04:28 | You can create a root page in the native
tongue, the actual primary language and
| | 04:33 | then multiple variations in other languages.
| | 04:35 | This is not something we are going
to cover in this course, but it is
| | 04:39 | available in SharePoint.
| | 04:40 | Now we are going to come back to
creating our own page layouts, but this is
| | 04:44 | where they will go when we do make them.
| | 04:46 | So in publishing sites, we can get to
our master pages and our page layouts, but
| | 04:50 | there is another way to getting to them.
| | 04:52 | I am going to jump over to the web
site because there is something called a
| | 04:56 | master page gallery.
| | 04:58 | Now SharePoint is really big on
calling certain things galleries and you'll
| | 05:02 | actually find a set of them under the
Site Actions>Site Settings for any site.
| | 05:07 | If you notice that over here, I
have a section called Galleries.
| | 05:11 | Now the idea of gallery in the real
life is that you put something in it that
| | 05:15 | you want on display like a piece
of art, you want it accessible.
| | 05:19 | And in SharePoint the idea with a
gallery is it's basically a library
| | 05:24 | where anything you put in it is
viewable and accessible by any site in
| | 05:28 | that site collection.
| | 05:30 | So in this central section here, we
have galleries for content types and site
| | 05:34 | columns, list templates and solutions,
a lot of stuff we are not really talking
| | 05:38 | about in this course, but we also have
this master pages and page layouts link.
| | 05:44 | Now in a site without publishing, you
just have a master pages link because only
| | 05:49 | publishing sites have page layouts.
| | 05:51 | If I click that, where we'll be taken to
is a normal kind of SharePoint library page.
| | 05:56 | And what I'll actually see here is
that we have a mixed up section of .aspx
| | 06:01 | pages and .masterpages.
| | 06:03 | You might actually recognize that it
looks like they are a combination of both
| | 06:07 | the Master Page section in
SharePoint Designer, like minimal.master and
| | 06:11 | nightandday.master and v4.master and
the pages that we saw in the Page Layout
| | 06:17 | section like ArticleLeft and ArticleRight.
| | 06:19 | And that's indeed exactly what's
happening here, the gallery through the web
| | 06:24 | browser is basically showing us what we
can see split up in SharePoint Designer
| | 06:28 | into master pages and page layouts.
| | 06:31 | In SharePoint 2007 using the gallery was
often the easier way to get to all this
| | 06:36 | information, but in SharePoint 2010, I
actually prefer going through SharePoint
| | 06:40 | Designer because they are
split up and better organized.
| | Collapse this transcript |
| Switching master pages| 00:00 | Here is something that is a little
different about master pages in publishing sites;
| | 00:05 | publishing sites use two
master pages, not just one, but two.
| | 00:10 | Now, this sounds like some added layer
of complexity, but the reason for it is
| | 00:15 | really simple and the best way to
explain why is just to show you.
| | 00:19 | I'm going to jump over to this
example Publishing Portal that I have here
| | 00:23 | where I have this layout with the
logo and the gradient and this is coming
| | 00:28 | from nightandday.master.
| | 00:31 | If I was making a public Internet site,
this might be the starting point I would
| | 00:36 | use to change my layout.
| | 00:38 | I might really change it, change it from
this basic layout to a thick size, make
| | 00:43 | it center aligned, change the
fonts, make it look really different.
| | 00:46 | But if I'm an owner or administrator of
a SharePoint site, I don't just see this
| | 00:52 | kind of public pitch.
| | 00:53 | I'll also see Settings pages where I
will jump behind the scenes into lists, and
| | 00:57 | libraries and I'll change Options.
| | 00:59 | Notice that even by selecting my Site
Actions, Site Settings, we've shifted back
| | 01:04 | immediately to a conventional SharePoint look.
| | 01:08 | That's because I'm using two master pages.
| | 01:11 | I'm using v4.master here and
I'm using nightandday.master here.
| | 01:18 | When I jump into say looking at View
All Site Content or jumping into a library
| | 01:24 | itself and seeing the view of the
library, I'm using that v4.master, the same
| | 01:29 | one we'd be using on a non-publishing site.
| | 01:32 | The thing is someone with only basic
Read Permissions would never end up
| | 01:37 | seeing these behind the scenes
settings pages, they are only seeing this one,
| | 01:41 | the presentable one.
| | 01:43 | Because I'm an admin, I am seeing both.
| | 01:45 | So there is one master page for what we
can think of as public facing pages, the
| | 01:49 | web pages that we make by using Site
Actions, New Page and then there is another
| | 01:54 | for the automatically generated
web pages, and this is a good thing.
| | 01:59 | If I'm creating a custom design, I don't
want to worry about my design having to
| | 02:03 | work with all the internal
SharePoint Settings pages.
| | 02:06 | And more importantly, I don't want
these pages to change from the default, it
| | 02:10 | takes long enough to learn your
way around all the settings pages.
| | 02:14 | I don't want the menu Options to suddenly
jump around and be in a different place.
| | 02:18 | So we specify not just one,
but two for a publishing site.
| | 02:22 | Having said that, in all likelihood,
you won't ever change the master page for
| | 02:26 | these behind the scenes pages;
| | 02:28 | there is no reason to.
| | 02:29 | But where would we change them?
| | 02:31 | Well, in a site without publishing,
like a Team Site, we can only change master
| | 02:36 | pages in SharePoint Designer.
| | 02:38 | But in a site with Publishing enabled,
we have the option to change them in the
| | 02:41 | browser, and we do them
through the Site Settings page.
| | 02:44 | So from Site Actions, Site Settings, and
then we have a section for master pages.
| | 02:50 | Now, be aware that on this page, you will
actually see two links with the words master page.
| | 02:54 | You'll have one under the Galleries,
and you'll have one under Look and Feel.
| | 02:59 | The difference here is the one where
the Galleries is saying, which master
| | 03:03 | pages do I have available, and the one under
Look and Feel is which master page do I use?
| | 03:09 | So I'll click the Master Page link
under Look and Feel here where I get the
| | 03:13 | option to specify two master pages.
| | 03:16 | This first one is currently selected as
nightandday.master and the second one is v4.master.
| | 03:23 | In the browser, this is known as the
Site Master Page used by all our publishing
| | 03:28 | pages, the pages that we will make, and
the System Master Page used by all the
| | 03:34 | generated forms and view pages.
| | 03:36 | Now, when you build large publishing
portals, you often have multiple sub-sites.
| | 03:41 | So one of the great things you can
also do if selecting or changing is you
| | 03:46 | can reset all the sub-sites to inherit a
master page setting, and do this from the browser.
| | 03:51 | So I could, for example, just grab this,
change that to v4.master, come down and click OK.
| | 03:58 | Looks the same here, because I
didn't change the system master page;
| | 04:01 | but if I jump back up to the homepage,
we now see that we've shifted from the
| | 04:06 | Gradient Blue just back to the normal
v4.master and then just go back and I
| | 04:11 | could change it again. Very simple to do!
| | 04:18 | Now, here is a slightly tedious thing.
| | 04:21 | You can do this in SharePoint Designer as well.
| | 04:24 | But it seems like Microsoft
couldn't decide what they wanted to call
| | 04:27 | them, because while in the browser
they are known as Site Master Page and
| | 04:31 | System Master Page.
| | 04:33 | When I right-click the master page over
here in SharePoint Designer, we have a
| | 04:37 | choice of default master
page, and custom master page.
| | 04:42 | Now, in a publishing site, the
default master page is the one used by
| | 04:47 | the Settings Pages.
| | 04:49 | So it's the one I'm never likely to change.
| | 04:51 | It's actually the custom master
page for the public facing pages.
| | 04:55 | So, for example, nightandday.master is
currently what's being used on the web
| | 05:01 | site and that's actually why when I
right-click it, that one is grayed out
| | 05:04 | because it's already set
as the custom master page.
| | 05:07 | But this is how I could do the
equivalent, would be right-click v4.master, set
| | 05:12 | it as custom master page.
| | 05:14 | Now, that means it's both the default
master page, and the custom master page,
| | 05:18 | and then it's used for the homepage, and
any custom page I create, and it's used
| | 05:23 | for all the internal settings pages.
| | 05:26 | Very easy to change it in either place;
| | 05:28 | you just have to bear in mind that
they are called by different names.
| | 05:31 | So I'm going to select back to nightandday.
master and make it the custom master page.
| | 05:36 | That's how you switch master
pages in a publishing site.
| | Collapse this transcript |
| Customizing an existing master page| 00:00 | So we've seen that the most reliable
way to create your own master page is to
| | 00:04 | start by copying an existing one,
because that gives you all the placeholder
| | 00:08 | elements that SharePoint is
going to need along the way.
| | 00:11 | You can use either nightandday.master
or v4.master as a starting point for your
| | 00:17 | own master pages in a publishing site.
| | 00:19 | But again, I do believe there are
better master pages or more useful ones that
| | 00:23 | you can download, and use particularly
if you are looking to do a big redesign.
| | 00:28 | However, with a publishing site, there are
a couple of other things to look out for.
| | 00:32 | So I'm going to go out to
startermasterpages.codeplex.com and download their
| | 00:38 | starter master page.
| | 00:40 | I am just going to save that, and in
my Download folder, I'm going to extract
| | 00:49 | those files, and again, it
has three starter master pages;
| | 00:55 | one for foundation, one for meeting
workspace, and one for publishing, and this
| | 01:00 | is the one that we're interested in this time.
| | 01:02 | There is not a lot of difference
between the Publishing Starter and the
| | 01:07 | Foundation Starter file.
| | 01:09 | But publishing sites do have
slightly different navigation controls.
| | 01:13 | So I'm going to bring it into
SharePoint Designer, I first make sure I'm in my
| | 01:17 | Master Pages section, I'll then come up
on to the Ribbon and click Import Files,
| | 01:22 | go ahead and navigate out to that
location, select the Publishing Master page
| | 01:27 | and click Open and click OK.
| | 01:30 | Now interestingly, I don't
actually see it appear in master pages.
| | 01:34 | And if you don't immediately see it
there, go look in the Page Layouts section,
| | 01:39 | in fact, for whatever reason, it's in there.
| | 01:42 | Sometimes SharePoint Designer is a
little slow to realize that this is a
| | 01:46 | master page, and should be in the Master
Pages Section instead of the Page Layouts section.
| | 01:51 | Now, sometimes it's useful to just make a
quick change to this and edit this file.
| | 01:56 | I'm not actually going to do anything
other than just put a few spaces in there,
| | 01:59 | so it's marked as having a
change, and then I'll save it.
| | 02:04 | Closing that file down, yes, it seems
to have disappeared from Page Layouts and
| | 02:08 | it's in its rightful
location which is in this location;
| | 02:12 | the Master Pages Section.
| | 02:14 | So let's say I've uploaded it and I
immediately want to turn this on and
| | 02:18 | see what it looks like.
| | 02:20 | I want to replace nightandday.master
that I'm currently using here with that
| | 02:25 | starter master page.
| | 02:26 | So I'll go into SharePoint Designer
and I might just right-click it here and
| | 02:31 | say, Set as Custom Master Page.
| | 02:34 | Again, custom master page is the one
for the actual presentable pages like the
| | 02:39 | homepage and any page we make.
| | 02:41 | And didn't seem to complain about it, I'm
going to jump across here and refresh this page.
| | 02:47 | Now, we're fairly simplistic now.
| | 02:49 | We are actually using that starter
master page which means we have a very basic
| | 02:53 | layout that includes the Ribbon, but
it seems to have taken effect correctly.
| | 02:57 | However, that's not always a useful
way of doing it, here is the problem.
| | 03:02 | I'm going to switch over to another browser.
| | 03:05 | Now, in this browser here, I'm logged
in as a different user who just has Read
| | 03:11 | Access to this web site.
| | 03:13 | So I could browse it if I wanted to.
| | 03:15 | But if I refresh the page here, I'm
going to have a problem and here is the
| | 03:19 | issue, the user that I'm logged in
as does not have access to that master
| | 03:25 | page that I'm now using.
| | 03:27 | There is a couple of reasons
for that. Here is the first.
| | 03:30 | One, this file is checked out,
we've got that checkmark here;
| | 03:34 | not necessarily by itself a big deal but
the file has never been checked in at all.
| | 03:39 | That means that SharePoint is smart
enough to know that when I'm using this IE
| | 03:43 | browser, it recognizes it's me, and says,
okay, I understand you have access to
| | 03:47 | that master file but nobody else does.
| | 03:49 | And the fact that this file is checked
out to me is a good thing if I want to
| | 03:52 | work on it and prevent others from
working on it, but not if I want to use it as
| | 03:56 | the shared master page right now.
| | 03:58 | I'd need to check it in first.
| | 04:01 | Well, I can do that.
| | 04:01 | I can click beside the name here just
to select it, and then either check it in
| | 04:06 | from the Ribbon or right-click and say Check In.
| | 04:10 | But here, I have another choice.
| | 04:12 | What kind of version do I want to check in?
| | 04:13 | Do I want to check in a
minor version or a major version?
| | 04:17 | And by default, it's considered a
minor version which in SharePoint means a
| | 04:21 | draft version, which means even if I
do check it in like this, it's only
| | 04:25 | going to be available to people with
edit permissions, not people who can
| | 04:29 | just read the site like Bob.
| | 04:32 | So I'm going to make this a major version.
| | 04:34 | I'm going to publish a
major version and click OK.
| | 04:37 | I could put some comments there if I wanted to.
| | 04:39 | Now, I get another message
because I'm still not done.
| | 04:42 | You see I'm on a Publishing Portal here
and the way that the Publishing Portal
| | 04:46 | site is configured by default is that
approval is required for changes to master
| | 04:52 | pages, and page layouts.
| | 04:54 | So not only did I check it in, I marked
it as a Published version that's telling
| | 04:57 | me well, it still has to be approved.
| | 05:00 | This is considered pending right now.
| | 05:02 | Now I'm in a position where I can
actually select from this drop-down and
| | 05:06 | approve this file because I have
all the permissions in the world here.
| | 05:10 | But in some circumstances, I would be
allowed to edit and save the master page
| | 05:14 | file, but somebody else
would have to approve it.
| | 05:17 | So I'm going to mark it
as Approved and click OK.
| | 05:20 | Now, if I switch over to Bob and
refresh this page, he should at least see the
| | 05:26 | ugly shared master page that we
have and he does indeed see that.
| | 05:31 | All this control over the content
editing is sometimes a little much.
| | 05:35 | The intention of course is to prevent accidental
changes to live sites without a proper process.
| | 05:41 | And if you are starting with the
Publishing Portal, know that the control over
| | 05:45 | content is about as tight as it can get.
| | 05:48 | But do know that it is configurable and it
can be loosened or tightened as you see fit.
| | 05:53 | But do be aware that if you are ever not
seeing a change that you're expected to
| | 05:58 | see, take a moment to consider whether
the changes you made have been saved,
| | 06:03 | they've been checked in, and they've
been published and approved as necessary.
| | 06:07 | We'll talk in a moment about how you
might change that control and those
| | 06:12 | requirements if you need to.
| | Collapse this transcript |
| Designing a new master page| 00:00 | When you first start editing things
like master pages in a publishing site, the
| | 00:04 | process for making any change
can often seem heavy-handed.
| | 00:09 | To edit a file, you are
often asked to check it out.
| | 00:12 | You then can make a simple change, but
after you save the change, you have to
| | 00:16 | check it in, you have to decide if
it's a draft or a published version.
| | 00:20 | You may even have to go through
approval just to get it up there and working.
| | 00:24 | In the early stages of a design, when
you are making 30 changes an hour to your
| | 00:29 | CSS files and master pages,
this all seems way too much.
| | 00:33 | But know that we can change this
behavior, but there isn't just one place,
| | 00:37 | just one security page where you
change it, because this idea of check in or
| | 00:42 | check out a versioning, of approval
can be different for different assets in
| | 00:47 | your site, and it's all based on the
libraries that your different assets are contained in.
| | 00:52 | In any typical SharePoint custom
design, you really have three primary
| | 00:56 | categories of stuff that you are changing.
| | 00:58 | You've got your Master
Pages and your Page Layouts.
| | 01:01 | Now, these are actually contained in
the same SharePoint library even if it
| | 01:05 | doesn't look like it here.
| | 01:06 | You have your CSS files, or any images,
and supporting files things like JavaScript.
| | 01:11 | The best idea here would be that
you'd keep them together in your Style
| | 01:16 | Library, which you can get to in
SharePoint Designer through the All Files
| | 01:20 | entry in the navigation.
| | 01:21 | And then you have your pages themselves
on a publishing site, these are usually
| | 01:26 | contained in your Pages Library,
although you may make more libraries as you go.
| | 01:31 | The thing is each of these libraries
can have different settings, and it's the
| | 01:35 | settings of the library that drive the
behavior that you see with check in and
| | 01:40 | check out, and content approval and publishing.
| | 01:43 | Now, you can get to the information about
these libraries a couple of different ways.
| | 01:48 | But there's one easy way just to jump
between them and see all of them in the
| | 01:52 | same place, and compare and contrast them.
| | 01:54 | I am going to go to the
homepage of my Publishing Portal here.
| | 01:58 | I am going to come down into Site
Actions, and select the Manage Content and
| | 02:03 | Structure option because this is going
to give me one of the easiest ways to
| | 02:06 | actually see most of my containers,
most of my libraries in one place.
| | 02:11 | So here I have got my Master Page
Gallery and this is the library that contains
| | 02:17 | my master pages and my page layouts.
| | 02:19 | Then I have got my Pages Library
that contains the web pages themselves.
| | 02:23 | Then I have my Style Library that
contains my CSS, my supporting images, or
| | 02:28 | stylesheets, anything that I want here.
| | 02:30 | All of these locations have
different settings available to them.
| | 02:35 | So let's drill into one and take a look.
| | 02:36 | I am going to see my Master Page Gallery here.
| | 02:39 | I am going to click the dropdown box,
and come down, and Edit Properties.
| | 02:43 | This takes me to a conventional
Document Library Settings page in SharePoint.
| | 02:48 | So no matter what SharePoint call them,
they're calling this the Master Page
| | 02:52 | Gallery, it's really just a document library.
| | 02:55 | All document libraries have
their own set of settings.
| | 02:58 | There is actually several of them.
| | 03:00 | The one we are interested in
here is the second link which is
| | 03:03 | Versioning Settings.
| | 03:05 | It's what you'll find here that drives
the behavior that we see often in the
| | 03:09 | browser and in SharePoint Designer.
| | 03:11 | Clicking that takes me
to four different options.
| | 03:14 | I am actually here going
to go from the bottom up.
| | 03:17 | So coming all the way down,
here is our first choice.
| | 03:20 | Do we require documents to be checked
out before they can be edited? Yes or no?
| | 03:25 | And in this case, it's turned on with Yes.
| | 03:27 | The effect that this has is that in
SharePoint Designer, if I am in my Master
| | 03:32 | Pages or Page Layout section, and I say,
for example, I want to edit v4.master,
| | 03:37 | I can edit it without saying,
yes, I want to check it out.
| | 03:41 | This is where it's enforced is
by this setting in the library.
| | 03:45 | Then I am going to go up to section to
the Document Version History, which is
| | 03:50 | asking when you make changes, are
we making versions of this document?
| | 03:54 | Our choices are, no versioning, or just
major versions, or major and minor versions.
| | 04:01 | The idea of minor versioning in
SharePoint is that a minor version is considered
| | 04:05 | a draft version, a work-in-progress
and it means that any change you make is
| | 04:10 | considered a draft version unless
you publish it as a major version.
| | 04:15 | Now, this has absolutely no impact on
the amount of space that these versions
| | 04:20 | take up or anything like that.
| | 04:22 | The real impact is actually a knock-on
effect, it's this lower section here,
| | 04:27 | that if we do have draft versions
available, meaning minor versions, it's
| | 04:32 | asking, who can see draft items?
| | 04:35 | Is it any user who can read these
items or only users who can edit items?
| | 04:40 | And the end result of this is I might
make a change to a master page file,
| | 04:44 | even check it back in.
| | 04:46 | But if I've checked it back in as a
minor version, the only people who can
| | 04:50 | see my changes are the people who can
actually edit the master pages in that library.
| | 04:55 | Now, this is often exactly what you want.
| | 04:58 | It allows you to work on this in the
background, making a whole bunch of
| | 05:02 | changes, you and anybody else who can
edit these can all see them, but anyone
| | 05:07 | who just has Read Access will
see the last published version.
| | 05:11 | And finally, up at the very
top here, we have this option;
| | 05:14 | do you require content
approval for submitted items?
| | 05:19 | This is what required me to have to go
through that whole approval process for
| | 05:23 | that new starter master page, and that
actually would have to happen again every
| | 05:28 | single time I decided to make a
major version of that master page.
| | 05:33 | And it's all of these settings that
drive the behavior that we see in SharePoint
| | 05:37 | and in SharePoint Designer.
| | 05:38 | Now, if you have worked with
SharePoint for any length of time, you maybe
| | 05:42 | looking at the settings and saying,
hang on a second, these are just classic
| | 05:46 | SharePoint settings.
| | 05:47 | They are the settings that all document
libraries in SharePoint have had for years.
| | 05:52 | That's absolutely true.
| | 05:53 | You see the publishing feature is
not bringing anything new to the table.
| | 05:57 | It's just using standard
SharePoint functionality.
| | 06:00 | It just feels a little different when
you are working with web pages, and master
| | 06:04 | pages, and CSS files than when you
are working with say Word documents.
| | 06:08 | But I am going to go back to my Site
Actions menu, come down to my Manage
| | 06:13 | Content and Structure, and this time
look at the settings for the Style Library.
| | 06:18 | Again, this page looks exactly the same.
| | 06:21 | That's because each library
has its own set of settings.
| | 06:25 | I click on this one and we can see that,
for example, we do not require content
| | 06:30 | approval for submitted items.
| | 06:33 | We are creating major and minor draft
versions, and we do require documents to
| | 06:38 | be checked out before they can be edited.
| | 06:39 | But the end result of these settings
mean that if I made a change to a CSS file
| | 06:45 | and then published it, saved it as a
major version, I don't have to go through
| | 06:49 | an approval process.
| | 06:51 | That published version will instantly
take effect for everyone, everyone who can
| | 06:56 | edit this site and everyone who can view it.
| | 06:58 | So in the early days, you may find
that it's worthwhile to change some of the
| | 07:03 | settings of say your Master Page Gallery
just to make it little more casual when
| | 07:08 | you are first creating those initial
master pages and making those changes.
| | 07:12 | But you have complete freedom over
what amount of workflow and what amount of
| | 07:17 | control you are actually going to
impact on every single piece of your site.
| | Collapse this transcript |
| Linking to custom CSS files in Publishing sites| 00:00 | We saw earlier that if we have a custom
CSS file and we want to link to it, we
| | 00:05 | can edit our master page and add a tag
in the HTML to make sure it comes in and
| | 00:10 | comes after corev4.css.
| | 00:13 | Well, when you have publishing enabled,
it's even easier than that, specifying
| | 00:17 | a custom CSS file can actually be done through
the browser without a change to the master page.
| | 00:22 | But first we better have a CSS file.
| | 00:26 | Best place to put it is going to be
in the Style Library, there is nothing
| | 00:30 | magical about this, it's just a useful
place and the place most SharePoint folks
| | 00:35 | would look these days.
| | 00:36 | I'm going to go into my Style Library
right-click and say New CSS file, I'll
| | 00:41 | call this custom.css and just make a
super simple CSS entry in here, let's do a
| | 00:50 | Body rule with perhaps a Font style
of italic and I'm going save that.
| | 00:57 | In a typical publishing portal you
will find that the style library does
| | 01:01 | have the check in/check out enforced
although it doesn't have content approval enforced.
| | 01:06 | I'm just going to leave this without
checking it in right now, we'd find that
| | 01:10 | this would be considered a
minor version. Okay so what?
| | 01:14 | Well, right now if I look at the
homepage of this web site and I'll just refresh
| | 01:18 | it right now, it just looks fairly
boring and here is where you go to actually
| | 01:22 | point to that custom CSS file.
| | 01:25 | I am going to come into my Site Settings,
that's a completely non-intuitive link that I find.
| | 01:31 | It's actually here in the
master page link under Look and Feel.
| | 01:36 | This is where we can specify our two
different master pages for a publishing
| | 01:41 | site, but we can also
specify an alternate CSS URL.
| | 01:46 | Alternate I think is a poor choice of
words here, it's really additional CSS
| | 01:51 | URL, so I'm going to select this and
then browse and I'll be given this tree
| | 01:56 | view here, again, I need to make my way
to the Style Library where in my case I
| | 02:00 | can select this custom CSS file,
I'll check the link down here that looks
| | 02:04 | correct, click OK, and I have this
check box here that I can even include all
| | 02:09 | sub-sites and enforce all sites in the
site collection to inherit the CSS URL.
| | 02:15 | And that can come in handy, because
you typically do start to build out
| | 02:19 | publishing portals and larger
publishing sites by creating multiple sub-sites.
| | 02:24 | Click OK, and it certainly
seems to have had an effect.
| | 02:27 | It looks like everything now is on
italics, might not be the most attractive
| | 02:34 | change in the world, but it certainly
proves the point that this has worked.
| | 02:37 | In fact, if I view the source of this
page and I could just right-click and say
| | 02:41 | View Source or use my developer tools,
I can actually see, here we are, here is
| | 02:47 | the link to our custom.css
that's come after corev4.css.
| | 02:53 | And one thing to be aware of, I'm going
to switch over to Firefox here where I'm
| | 02:56 | logged in as a different user,
Bob Tester who only has read access.
| | 03:02 | I'm going to refresh this page and
I don't see the italic changes here.
| | 03:08 | I could right-click and view the page
source here and I see that I am trying to
| | 03:13 | link to custom CSS, that looks correct.
| | 03:16 | So the change that I made is having
an effect for Bob Tester, but I don't
| | 03:21 | actually see the actual CSS impact and
that's simply because back over here I
| | 03:28 | have not checked it in.
| | 03:30 | This is one of these small changes
that can have a significant impact, most
| | 03:34 | SharePoint web developers at some
point will scratch their heads trying to
| | 03:38 | figure out why they can't see the
change they thought they should see, until
| | 03:41 | they realize they hadn't checked in the
file and they were looking at it under
| | 03:45 | somebody else's identity.
| | 03:46 | So I'm going to right-click this, I'm
going to check it in, and because Bob is
| | 03:51 | just a reader of the site, that means
he will never see any minor versions.
| | 03:55 | I have to publish this as a major
version before he would be allowed to see it.
| | 03:59 | So I click OK, it thinks about it.
| | 04:02 | Now the Style Library in a default
publishing portal does have that whole major
| | 04:07 | minor idea, but it doesn't require me
to go through a content approval process.
| | 04:12 | So if I flick back over here into
Firefox and refresh this page, I should
| | 04:16 | instantly see now the impact of making that
change to the CSS file and checking it in.
| | 04:23 | So very easy to make this change, it's
just under Site Settings in the master
| | 04:29 | page area and that's the master page
link in Look and Feel, not the master page
| | 04:33 | in Page Layouts area and the Galleries.
| | 04:36 | And that's all we need to do.
| | 04:38 | Unfortunately this is not on option that
is available unless you have publishing
| | 04:42 | enabled, so for sites without publishing
enabled, you will need to make a change
| | 04:46 | to your master page in SharePoint Designer.
| | Collapse this transcript |
|
|
9. Using Page LayoutsIntroducing page layouts and content types| 00:00 | So the real difference when we have
Publishing Sites is that we have these
| | 00:04 | things called Page Layouts that we can
define multiple formalized layouts for
| | 00:09 | different kinds of pages.
| | 00:11 | All our pages are still going to use
the same master page, but we can provide
| | 00:15 | more structure for our content pages.
| | 00:18 | Now there are a few page layouts
provided for you when you create a site with
| | 00:23 | publishing enabled, but really the power
of them is that we're going to make our own.
| | 00:27 | So how do we make one?
| | 00:29 | Well first, we need to know that these
page layouts are based on an existing
| | 00:33 | feature in SharePoint,
something called Content Types.
| | 00:37 | Content Types are a great feature in
SharePoint and they let you move away from
| | 00:41 | dealing with all these generic
documents, hundreds of Word files or Excel
| | 00:46 | spreadsheet or PDFs.
| | 00:47 | But instead understanding that these
documents are really something specific,
| | 00:52 | everything represents perhaps a Resume
or a specification or a Contract or a
| | 00:57 | Business Plan or an Expense
Form or a Manuscript or a menu.
| | 01:01 | And each of these types of documents
you're going to deal with differently and
| | 01:05 | you care about different information.
| | 01:08 | So you fix this problem in
SharePoint by defining Content Types.
| | 01:12 | You are defining extra metadata, extra
data about the type of content you're
| | 01:19 | interested in and the type of content you have.
| | 01:21 | So if, for example, you deal with a lot
of resumes, you might define a content
| | 01:26 | type called resume, and that adds extra
information, it adds extra metadata, so
| | 01:31 | we can easily get to the name, the
date received, the position, the status.
| | 01:35 | Or I might define another content type
for a legal contract, and that would have
| | 01:40 | a case number and a representative
and a date, whatever information is
| | 01:44 | meaningful to you, because all
content types are just collections of these
| | 01:49 | fields what are called site columns.
| | 01:52 | They're just ways of taking all these
little pieces of data, wrapping them up
| | 01:56 | and giving them a name.
| | 01:57 | And in SharePoint, defining content
types allows us to say, well, if something
| | 02:02 | you say a health record,
everything about it will be audited.
| | 02:05 | But if it's a menu, we don't care about that.
| | 02:09 | If it's a new expense form content
type, we're going to send an email
| | 02:13 | automatically to someone in HR to
read that expense form and approve it.
| | 02:18 | Now you might be thinking, well, this
all sounds like the inner workings of
| | 02:22 | conventional SharePoint, but why would I
care when I'm working with a branding project?
| | 02:26 | Well, because web pages in
SharePoint are content types.
| | 02:31 | There is no getting away from it.
| | 02:33 | Every page you make in SharePoint is
based on a predefined content type.
| | 02:38 | There is a content type for basic pages,
it just doesn't describe very much,
| | 02:43 | because we can't specify it more
than really a title and some content.
| | 02:48 | There is a content type for a wiki page.
| | 02:50 | When we turn on this publishing
feature we have something called a
| | 02:53 | publishing page content type.
| | 02:54 | Now that has a little bit more information.
| | 02:57 | We can specify that we also have a
scheduling start date, a scheduling end date,
| | 03:01 | a contact email address, and this is
extra metadata that helps us have this more
| | 03:06 | powerful functionality
of the publishing feature.
| | 03:09 | But for a bigger web site, we
don't want to be generic like this.
| | 03:12 | We know that we're going to have web
pages that represent products, or web pages
| | 03:16 | that represent press
releases or articles or people.
| | 03:20 | So instead of having these generic pages,
we want specialized pages to represent
| | 03:26 | just that kind of content that we have,
because these are types of content.
| | 03:31 | So what we do is we define our own
content type first by just describing the
| | 03:37 | different columns we need.
| | 03:38 | So if I know I'm going to working with
a lot of products on my web site, I'll
| | 03:43 | define a product content type, and I'd
say that I need that product to have a
| | 03:47 | skew, a stock keeping unit.
| | 03:49 | I need it to have an image, a
description, a price and a category.
| | 03:52 | Now at this point I'm not doing
anything about what this looks like, I'm just
| | 03:56 | saying that is the data that I'm
interested in, and once I've defined that
| | 04:00 | content type, I can then build a page
layout based on that content type, because
| | 04:05 | if you define the content type
first and they're really easy to do.
| | 04:09 | When it comes time to build these page
layouts, SharePoint can actually help you.
| | 04:14 | In this case if it will say, hey,
you're creating a page to show a product,
| | 04:17 | okay, well, you're going to need a place
to put the image and a place to put the
| | 04:20 | skew and a place to put the description
and the price and the category, and it
| | 04:24 | will actually help you with
arranging and formatting this page.
| | 04:28 | Content types can easily be overlooked,
but they should be done early in the
| | 04:32 | process, as early as possible, because
as we'll shortly see, they can really
| | 04:37 | help you when it comes time
to creating your page layouts.
| | Collapse this transcript |
| Creating a custom content type| 00:00 | Creating a new content type is very simple;
| | 00:03 | it can be done through the web
browser or through SharePoint Designer.
| | 00:07 | So I'm looking at a publishing portal
right now, and I have just recreated
| | 00:10 | this as a default publishing portal
with all the same setting as they are
| | 00:15 | right out of the box.
| | 00:16 | And sometimes it's actually useful to
reverse engineer the existing situation.
| | 00:21 | So we know that when we create a new
page in this kind of site that we will have
| | 00:27 | the ability to choose from a few
exiting Page Layouts because SharePoint
| | 00:32 | actually gives us a few of them
just with the default site template.
| | 00:36 | So what are these, what
is actually going on here?
| | 00:39 | I can see that I have got Page Layouts
for Body only, Image on the left that I
| | 00:44 | can change to, it gives me a slightly
different layout, back to the page section
| | 00:48 | of the ribbon, image on the right,
gives me another one, and so on.
| | 00:53 | But where are these?
| | 00:55 | I'm going to go to my Site
Actions, Site Settings on the site.
| | 00:58 | I want to find is the
Masterpages and the Page Layout gallery.
| | 01:03 | Clicking that will take to me
an area where I can see, there is
| | 01:06 | Articleleft.aspx, that's my Page Layout
for an article with an image on the left.
| | 01:11 | There is my page layout for an
article with an image on the right.
| | 01:15 | Now, if I look over here on the right
-hand side, I can see that I have an
| | 01:18 | associated Content Type with each of these.
| | 01:22 | Sometimes this is missing, but that's
when I'm looking at a Master page, because
| | 01:26 | it's the Page Layouts that
need these Content Types.
| | 01:29 | So we are always using content types,
even if you don't really think about them
| | 01:33 | and notice that there seem to be
multiple page layouts for the same content type
| | 01:39 | and that's perfectly acceptable.
| | 01:40 | If we are working with articles, well,
let's say that in our web site all
| | 01:45 | articles are the same, we just want to
have a variety of different formalized
| | 01:49 | layouts for them with the image on the right,
the image on the left or a set of links.
| | 01:53 | What I can also do is just click on
the associated content type name to find
| | 01:58 | some information about this.
| | 01:59 | Now remember the content types aren't
anything visible, all they are, are a
| | 02:04 | collection of columns of pieces of
information, we are actually saying, well,
| | 02:09 | what does it mean to be an article?
| | 02:11 | In this case it means we have a title,
which is a single line of text, we have
| | 02:15 | comments that can be multiple lines of text.
| | 02:17 | We have a Scheduling Start Date and End Date;
| | 02:19 | these are being used to support some
of that scheduling functionality in
| | 02:23 | the publishing feature.
| | 02:25 | We have A Contact Name and an Email
Address, we have Page Image and Page
| | 02:29 | Content, we can have Article Date and a
Byline and this is what has been defined
| | 02:34 | by Microsoft for the Article Page Content type.
| | 02:39 | I can choose to use this, or I can choose
to make my own, or even make several of them.
| | 02:44 | Now one thing that's worth seeing here
is that this Content Type called Article
| | 02:48 | Page actually has a parent
content type, just called Page.
| | 02:53 | And in fact, any content type that you
make is going to have an existing content
| | 02:58 | type, we are going to base it on
something that already exists, and this
| | 03:01 | actually makes our life easier.
| | 03:03 | I can click directly through here and
go to Page and see that page is a Content
| | 03:07 | Type that seems to just have
a little bit less information.
| | 03:10 | In fact, Page is a built in content
type that has pretty much the basics that
| | 03:15 | you need for using the publishing feature.
| | 03:17 | There we have a Title, some Comments,
Scheduling Start Date and End Date,
| | 03:21 | Contact Information and
some Audience Information.
| | 03:24 | And in fact, I could use this;
| | 03:26 | this would actually be a pretty good
starting point for my own content type.
| | 03:30 | So, to get directly just to the content
types I go back to my Site Settings page
| | 03:35 | and I notice that I have a
site content type gallery.
| | 03:39 | Like most things in SharePoint, if you
are defining this kind of information,
| | 03:42 | you really want to do it at the root or
the top level site of a site collection.
| | 03:47 | So clicking on content types actually
shows me all the content types I have
| | 03:51 | available in the site collection.
| | 03:53 | As you can see there is quite a lot of
them, these are all the content types
| | 03:56 | that appear with a
publishing site right out of the box.
| | 04:00 | And I can see here that I even have
my Page Layout content types they are
| | 04:03 | grouped, I've got Article Page,
Project Page, Redirect Page, a Welcome Page,
| | 04:08 | Enterprise Wiki Page.
| | 04:10 | I'm going to come up to the top and I'm
going to click the Create button and make my own.
| | 04:13 | I want a content type for products
and that doesn't exist right now, so I'm
| | 04:18 | going to create them and I will call it
Product Page, because it is for making web pages.
| | 04:24 | You don't have to use the word page,
but it makes it a bit more specific about
| | 04:28 | what you are doing, and give
it an optional Description.
| | 04:30 | And here is where we have to specify
a parent, what I'm going to do is come
| | 04:34 | down into my Publishing Content Types
and select page, another option here
| | 04:40 | could have been finding the Article
Page which is under Page Layout content
| | 04:45 | types, and selecting that one.
| | 04:46 | But I'm going to select Publishing
Content Types and Page, what that will do is
| | 04:51 | just give me the basic data that I
already need, things like Scheduling
| | 04:55 | Information and Contact Information,
so I don't have to write it all myself.
| | 04:59 | And then down here it's going to ask, well,
where is this new content type going to go?
| | 05:03 | I might create my own group, it's just
like creating a folder to put it in, but
| | 05:07 | actually I'm just going to leave this one.
| | 05:09 | Put it in the existing group of
Custom Content Type, so it will be easy to
| | 05:12 | find there and click OK.
| | 05:14 | I now have a content type, that's it
and I can see that because I based it on
| | 05:19 | page, page is my parent content type.
| | 05:22 | I have all the same columns that page
had, Title, Comments, The Scheduling
| | 05:26 | Information, the Contact
Information, but I want to add my product
| | 05:30 | specific information. I want to say;
| | 05:32 | well, what's important to me
about a product on my web site.
| | 05:37 | So maybe I need a product SKU or
Stock Keeping Unit, maybe I want a
| | 05:41 | category, because all products are based on
the category, maybe I want a price or an image.
| | 05:47 | And the way that I add that is I come
down and I say can I Add from existing
| | 05:52 | site columns or Add from a new site column.
| | 05:54 | Now what does this mean?
| | 05:56 | This is standard SharePoint stuff,
if I select to add from existing site
| | 06:01 | columns, I'll see a whole lot of
built in columns that have been defined by
| | 06:06 | SharePoint that may or may not be useful,
phone numbers and address fields and
| | 06:11 | workflow names, in fact for me they
are really not going to be useful because
| | 06:15 | I'm talking about custom stuff here.
| | 06:17 | So I'm going to say add from a new
site column and I give it a name and say
| | 06:22 | what kind of data is it.
| | 06:24 | So let's say first I want a product
SKU, a Stock Keeping Unit and it's just
| | 06:29 | going to be a Single line of text.
| | 06:32 | Down here I can have some choices, I
can give it a Description, I could give it
| | 06:36 | a Default Value, I'm just going to
leave all the stuff as is, and I click OK.
| | 06:42 | Now I can see that my Product Content
Type has product SKU in it, I'm going to
| | 06:47 | add another one, let's add a
Product Price, and this will be currency.
| | 06:54 | By selecting currency I then have the
option of having some minimum, maximum
| | 06:59 | values, I can select what format should
this currency take, I'm going to leave
| | 07:03 | all these values as their
default, just click okay.
| | 07:08 | That's now been added to my content type,
I'm now going to come down and add one
| | 07:12 | more and I'm going to say Choice.
| | 07:15 | I'll call this one Product Category.
| | 07:20 | By selecting Choice, I have
a few different options here.
| | 07:23 | I can type each choice on a separate line;
| | 07:25 | let's say that I wanted my products to
be in perhaps the Industrial or Consumer
| | 07:33 | or Medical categories.
| | 07:36 | Again, it's up to you, it's whatever is
important on your web site and your organization.
| | 07:42 | Now it also typically have say a Product
Name, but I can see that I have already
| | 07:47 | got a Title here as a Single line of
text, and title is pretty common across
| | 07:51 | every content type in SharePoint and
that will actually work for me, so I'm
| | 07:55 | going to add one more thing,
which will be the Product Description.
| | 08:02 | I could make this multiple lines of
texts but one of the other options I have
| | 08:06 | here if I wanted to be a bit more
free form, is full HTML content with
| | 08:10 | formatting and constraints for publishing,
that will be a good one, I'm going to click OK.
| | 08:16 | I could then build this out with more
images or descriptions or notes, because
| | 08:21 | typically in a real production site
I'm going to spend a lot longer thinking
| | 08:25 | about exactly what these
individual pieces of data are going to be.
| | 08:29 | But keep in mind what we are doing
here, we're defining a Content Type as
| | 08:33 | preparation, because what we can do in a
moment is create a web page template, a
| | 08:38 | page layout based on this content
type, and the more control and the more
| | 08:42 | defined that we do it in our content
type itself, the easier we are going to
| | 08:47 | have a time of it, when we
build our page layout in a moment.
| | Collapse this transcript |
| Creating a page layout based on a content type| 00:00 | Once we have the content type defined, the
next step is to make our first page layout file.
| | 00:06 | I am going to do this in SharePoint
Designer where I have my publishing portal open.
| | 00:10 | And although I had created my content
in the browser, you could have done it in
| | 00:15 | SharePoint Designer too.
| | 00:15 | If you see the Content Types section,
it shows you all the available content
| | 00:19 | types, including my new Custom
Content Type or Product Page here.
| | 00:23 | But I am interested in is in the Page
Layouts section which currently just has
| | 00:28 | the default page layouts that
were provided to me by SharePoint.
| | 00:32 | I want to make my own, so up to
the ribbon and click New Page Layout.
| | 00:37 | And the first thing it's going to ask
is well what Content Type am I based on?
| | 00:41 | And if I selected the one that I
want in my Custom Content Type group
| | 00:46 | called Product Page.
| | 00:47 | I then need to give it a name, this is
really a File Name, so I'll just call
| | 00:51 | this ProductPage.aspx, and there I am
just taking a leaf out of the examples
| | 00:57 | here, like ArticleLeft.aspx and
PageLayout.aspx and then give it a proper title,
| | 01:04 | which I'll just call this
one, Product Page, click OK.
| | 01:09 | It creates that page layout and it
dumps me into the edit mode here.
| | 01:14 | Now I am in Code view currently but you
could also be in Design view, flicking
| | 01:18 | over there I see that it has --
obviously connected to the current master page
| | 01:22 | of this publishing portal and that's okay.
| | 01:25 | As ever I am seeing a lot of the no-entry
signs, which is what I would expect to see.
| | 01:29 | We are still using the master page,
which means we don't change what the
| | 01:33 | master pages provides.
| | 01:34 | We just have these placeholders that
have been created and we get to fill
| | 01:39 | those placeholders.
| | 01:40 | Then the most important one is going
to be this one called PlaceHolderMain.
| | 01:45 | And in fact, if I look at my Code view,
I can see that really all I have been
| | 01:49 | given here are two tags, two asp content tags.
| | 01:53 | The first one says here is where I can
provide some content that will fill a
| | 01:59 | placeholder in the master
page called PlaceHolderPageTitle.
| | 02:02 | And here is where I can provide
content that will fill a placeholder in the
| | 02:06 | master page called PlaceHolderMain.
| | 02:09 | And of course, it doesn't know what
you want to do just yet, but any content
| | 02:13 | that I want needs to be
inside these content tags.
| | 02:17 | And the most important one is to
be inside the opening and closing
| | 02:21 | PlaceHolderMain content tag.
| | 02:24 | So what could I do here?
| | 02:25 | Well, remember that I am not building
an actual web page here, what I am trying
| | 02:30 | to do is build a
template for multiple web pages.
| | 02:33 | And let's say, for example, that what I just
wanted to do is start to mock up a product page.
| | 02:39 | Well, I could of course just kind of
start typing, I could say, well, on this
| | 02:43 | page I want to have the PRODUCT TITLE,
so I'll just write some text there and
| | 02:48 | then hit Enter and think, well, below
that I want to have the Category and
| | 02:53 | the SKU and the Price.
| | 02:55 | And perhaps, I'll put them all on one
line by themselves and below that I'll
| | 03:01 | have the Description.
| | 03:02 | Well then, I could start to grab hold
of this and change this, maybe I am going
| | 03:06 | to select the product title and come up
to the home section of the ribbon where
| | 03:11 | I'll say I'd like this to be an h1.
| | 03:14 | So I can apply a little bit of simple
formatting here, grab this next line
| | 03:18 | that combines three pieces of
information, Category, SKU and Price and say,
| | 03:22 | well, what would that look like with say a
heading for, and Description, I'll leave alone.
| | 03:28 | And I am doing some very simple stuff
here, what I could also do is use the View
| | 03:32 | menu, turn on my Manage Styles task
pane and start looking and say, all the
| | 03:39 | available styles that I might have
either in corev4.css or any custom file that
| | 03:44 | I am connecting to and apply those instead.
| | 03:47 | And now surprisingly I could jump
into the Code view and start marking this
| | 03:51 | out with divs and using standard ways of
splitting up and controlling layout on a web page.
| | 03:57 | I have just done something
very simple here to prove a point.
| | 04:01 | But of course, what we don't want is
something that always says Product Title.
| | 04:05 | We want the actual title
from the individual pages.
| | 04:08 | And this next thing is the real
benefit of building that custom content type
| | 04:13 | and defining those site columns, is
because we are basing this page layout on
| | 04:18 | the content type of product page, I can go
to my Task Panes area and open up the toolbox.
| | 04:25 | I'll just close down my styles
here, so I can see this properly.
| | 04:28 | Now in the toolbox, we've got
standard HTML toolbox stuff, the text and the
| | 04:34 | labels in the text areas, I don't care about
that, nor do I care about ASP.NET controls.
| | 04:39 | What I am interested in is in
the SharePoint Controls section.
| | 04:43 | So I want to make sure that that has
been expanded and I am going to come down
| | 04:47 | towards the bottom where I see
this section called Content Fields.
| | 04:51 | What it's doing is looking at my
product page content type and saying, hey,
| | 04:56 | you've got a Product Category and a
Product Description and a Product Price
| | 05:00 | and a Product SKU, I am going to allow
you to drag and drop these on the page
| | 05:05 | and create placeholders there for
positioning and that people can come along and fill.
| | 05:10 | Now the full impact of this might not
be apparent until a few minutes time when
| | 05:15 | I show you what this does.
| | 05:16 | But what I am going to do is take this
placeholder text that I had for Product
| | 05:20 | Title, get rid of it, just make sure my
cursor is in the right place between the
| | 05:25 | h1 tags, actually my Product Title
just comes from the Title field, which was
| | 05:30 | already built in there.
| | 05:31 | I didn't have to define that one myself.
| | 05:33 | So I am going to right-
click it and click Insert.
| | 05:35 | And what it's doing is its inserting
a SharePoint web controls text field.
| | 05:40 | Okay, fine, what that means is this will
be replaced by the actual title of each
| | 05:46 | individual Product Page.
| | 05:47 | Next, I am going to go and find category,
position my cursor properly and come
| | 05:53 | down find my Product Category,
right-click and click Insert.
| | 05:56 | You can also drag and drop, but I
actually prefer to do the right-click and Insert.
| | 06:01 | There is SKU and we'll
right-click and Insert SKU.
| | 06:06 | And there is Price, right
-click and Insert price.
| | 06:10 | And finally just in this regular
paragraph of description, I'll get rid of that,
| | 06:16 | position my cursor and right-
click and Insert Product Description.
| | 06:20 | Now what it's doing if you can
notice is that we've got slightly
| | 06:24 | different fields here.
| | 06:26 | The title is a TextField, the
category is called a DropDownChoiceField.
| | 06:30 | The description is a RichhtmlField.
| | 06:33 | Okay, we can't really see the impact of
this right now, although I could switch
| | 06:37 | back to Design view and we'll see a
slightly different view of these, some of
| | 06:41 | which will contain kind of a little bit
of dummy information, but that's okay.
| | 06:46 | And I am going to go ahead and save this file.
| | 06:50 | Now I will agree that right now this is
not looking like the prettiest page in
| | 06:55 | the world, and you might be looking at
it and thinking, okay, there are some
| | 06:58 | placeholder tags, big deal.
| | 07:00 | Well, this is very useful
as we'll see in a minute.
| | 07:03 | Now after I have saved this, what I am
doing is, going to go back to my Page
| | 07:06 | Layouts section, because I am working
with a Publishing Portal, which is pretty
| | 07:11 | locked down, what that means is
anything in here needs to be published and
| | 07:16 | approved before it's really unusable.
| | 07:18 | So I am going to right-click my
ProductPage which is currently checked out, I am
| | 07:22 | going to check it in as a major
version and it's going to remind me that this
| | 07:26 | also needs content approval,
do I want to modify the status?
| | 07:30 | Yes, I do, it's currently pending, I am
going to approve it. Well, then what?
| | 07:37 | Well, the end result of this is I will
be able to create a page based on this
| | 07:42 | new page layout, and that's next.
| | Collapse this transcript |
| Editing a page layout| 00:00 | So I have my new page layout saved,
checked in, published, and approved.
| | 00:05 | And here is the benefit.
| | 00:06 | I'm going to go back to
the Home page of the portal.
| | 00:09 | And now when I create a New Page, I'll
give it a name here, call it Blue Widget,
| | 00:15 | I want to make this a new product page.
| | 00:18 | Now I am using a page layout, but it's
actually using the default page layout
| | 00:22 | which is the pretty basic body only.
| | 00:25 | If I jump to the Page section of the
Ribbon, let me expand this, I'll find the
| | 00:29 | Page Layout drop-down.
| | 00:30 | And in here, not only do I have the built-in
SharePoint ones but I now have Product Page.
| | 00:36 | Clicking that one will allow me to
change the page layout, and here we go!
| | 00:40 | We've got the title here, Blue Widget.
| | 00:43 | It's up to us, that's coming
from the page name that I just used.
| | 00:46 | We've also got Product Category.
| | 00:47 | This is going to allow me to select from the
drop-down I had defined for this content type.
| | 00:53 | I'll say this was in Industrial.
| | 00:55 | The Product SKU was ABC123
and the Product Price was 500.
| | 01:00 | Now Product Description I had defined as
being able to support full rich HTML editing.
| | 01:07 | So instead of just typing directly in
here, I have this box that says Click
| | 01:12 | here to add new content.
| | 01:13 | I click that and I get a much richer
editing experience where I can say Here's
| | 01:20 | the description of the product, even
allowing me to select some of this text and
| | 01:25 | apply some basic rules up here too.
| | 01:28 | And this is the chief benefit the
creating page layouts has given me, that even
| | 01:31 | I have created this really simple one,
we've got this very predefined structure
| | 01:36 | of things that I'm allowed to do.
| | 01:38 | And when I save this, it's now
controlling the fact that I couldn't change the
| | 01:43 | title, I just typed it.
| | 01:45 | The title showing up is an h1.
| | 01:47 | The Category and the SKU and the Price
are being formatted and showing up with
| | 01:51 | my rules in the page layout as
is the description of the product.
| | 01:55 | And the benefit of course is that
somebody editing this page doesn't need to
| | 01:59 | know anything about HTML.
| | 02:00 | They can just shift into this editing
mode, make a change to it, save it again,
| | 02:07 | and we are still using
that formalized structure.
| | 02:09 | And yes, of course, the page layout
structure that I had is about as simple as
| | 02:13 | it could possibly get.
| | 02:15 | But this is the benefit of creating
content types in page layouts, that you have
| | 02:19 | real granular control over
every little part of your layout.
| | 02:24 | You have a lot of power and a lot of control.
| | 02:26 | You could have potentially 10 or 15
people contributing and creating pages
| | 02:31 | without knowing anything about HTML.
| | 02:33 | They are just filling in the blanks.
| | 02:36 | They can do it directly in the
Browser and still create a controlled
| | 02:39 | and templative page.
| | Collapse this transcript |
| Creating multiple versions of a page layout| 00:00 | All page layouts are based on
content types, but it isn't a
| | 00:03 | one-to-one relationship.
| | 00:05 | You can make multiple page
layouts based on the same content type.
| | 00:09 | And this is already actually happening.
| | 00:11 | Out of the box in SharePoint, we have,
for example, these three Article content
| | 00:17 | types, ArticleLeft, ArticleRight, ArticleLinks.
| | 00:19 | They're all actually based on the same
Article page content type, it's just a
| | 00:24 | slightly different layout.
| | 00:25 | And we could do this ourselves.
| | 00:27 | If I wanted to make a second choice of
product page on a new page layout, I just
| | 00:32 | go ahead, create another page layout,
base it on the same content type, give it
| | 00:37 | a different URL name and a different
title say product page with image on the
| | 00:42 | right or even different product pages
for my different kinds of categories, the
| | 00:46 | medical products, the industrial
products, the consumer products, it's
| | 00:50 | completely up to me.
| | 00:51 | You could do it to have a slightly
different layout like article with an image
| | 00:56 | on the left, article with an
image on the right, or you could have
| | 00:59 | substantially different layouts.
| | 01:01 | There is no restriction on the number
of page layouts that you can make for
| | 01:05 | any one content type.
| | Collapse this transcript |
| Creating new pages based on page layouts| 00:00 | Now every time you make a page in a
publishing site, you are using one of the page layouts.
| | 00:07 | But it doesn't immediately ask you.
| | 00:10 | It just goes ahead and creates
your page and gives you one of them.
| | 00:14 | It does let you change the layout.
| | 00:16 | But in this case, for example, I'm
starting with the Basic Body only.
| | 00:20 | And that's because there is a default
page layout, but we can change it to one
| | 00:25 | of the others or to one of ours.
| | 00:27 | If I go to my Site Actions>Site
Settings, the ability is in here.
| | 00:32 | Now you might be tempted to go to the
Master pages and page layouts gallery, but
| | 00:36 | in fact what you are looking for is
the section under Look and Feel where it
| | 00:40 | says Page layouts and site templates.
| | 00:43 | I'm going to click through to that.
| | 00:44 | I'm going to jump down to the end where it
asks me to select the default page layout.
| | 00:50 | Say for me, maybe I wanted to have my new
Product Page as now the default page layout.
| | 00:55 | If I have multiple subsites, I can actually
enforce that on all of the subsites as well.
| | 01:00 | And notice that if you didn't want
people to use say the Article pages, if I
| | 01:05 | go up a little bit, I can actually
restrict these and I can say pages in this
| | 01:09 | site might only use, for example, the Product
Page, the Body only, and the Table of contents.
| | 01:19 | Click okay, our changes are applied.
| | 01:22 | I go back to the Home page and I won't
affect anything I've already done, but
| | 01:27 | when I make a new page, what's going
to happen is we're going to just jump
| | 01:31 | directly in to the product page,
page layout into edit mode.
| | 01:35 | And if I go to the Page section of the
Ribbon and use the drop-down, I get my
| | 01:41 | restricted view here, a Body only, a
Product Page, or a Table of contents.
| | Collapse this transcript |
|
|
10. Customizing Publishing SitesWhat is the Publishing Portal?| 00:01 | SharePoint's main reason for
existence for most organizations is as a
| | 00:05 | collaborative internal platform.
| | 00:08 | It's focused on these collaboration
sites and the Team Sites, Document
| | 00:11 | Management, and so on.
| | 00:12 | And it does a great job of that.
| | 00:14 | But first with SharePoint 2007 and then
with SharePoint 2010, there is a growing
| | 00:19 | use of SharePoint for
public-facing web sites too.
| | 00:21 | Now if you are looking, for example,s
of these, you could take a look at the
| | 00:25 | site called wssdemo.com.
| | 00:28 | Now while this site itself was created
as a normal Foundation site, that's not
| | 00:33 | the reason I'm pointing you to it.
| | 00:35 | It has a list of public SharePoint web sites.
| | 00:38 | You can first look at a few
screenshots of the latest ones, but there is over
| | 00:43 | 2,300 at this particular time and you
can flick through these and find some
| | 00:47 | inspiration and see what people are
actually doing with SharePoint for
| | 00:51 | public-facing web sites.
| | 00:53 | You see we wouldn't use a Team Site or a
Document Workspace for that kind of job.
| | 00:58 | So the Publishing Portal is that part
of SharePoint suggested as a starting
| | 01:02 | point for a public Internet site,
although you'll also hear it used as a
| | 01:06 | starting point for a larger
scale Intranet internal portal.
| | 01:10 | Now like all sites in
SharePoint, it is just a suggestion.
| | 01:14 | You don't have to use it.
| | 01:16 | You can construct a public site from
the other building blocks that we've seen.
| | 01:19 | But if you want to know what part of
SharePoint 2010 that Microsoft provide as
| | 01:24 | the suggested starting point
for an Internet site, this is it.
| | 01:27 | Now one of the first things you run
into when experimenting with a Publishing
| | 01:32 | Portal and we've already seen it a
couple of times is the enforced workflow
| | 01:37 | whether you are creating a new Master
page or pages layout, or just making a
| | 01:42 | simple title change to say the Home Page.
| | 01:45 | When you save any change, it's counted
as being checked out, it's counted as
| | 01:50 | being a draft version.
| | 01:52 | So you have to check it in, publish it as a
major version, go though an approval process.
| | 01:57 | Now as we explored early in the
course, this content control is
| | 02:01 | completely configurable.
| | 02:02 | You would just need to change the
settings of the library that the asset is in.
| | 02:07 | In this case, I just changed something
about the Home Page which is the Pages library.
| | 02:11 | And it's the Pages library that controls
this content control here that I'm seeing.
| | 02:16 | Now occasionally people make the
mistake of thinking, oh, if I want to use the
| | 02:20 | SharePoint Publishing feature, I
have to use the Publishing Portal.
| | 02:23 | And no, you really don't.
| | 02:25 | This site does as we've seen, have
Publishing turned On which I can see both
| | 02:30 | from the Status Bar here and even just
from looking at the Site Actions menu.
| | 02:34 | I've got the Manage Content and
Structure option which only appears when
| | 02:38 | Publishing is enabled.
| | 02:40 | But the Publishing feature can be
turned On for other sites and is On for
| | 02:44 | another template too like the Enterprise Wiki.
| | 02:46 | It's not unique to this one.
| | 02:48 | Now making a Publishing Portal
like this is done in SharePoint
| | 02:52 | Central Administration.
| | 02:54 | And it does nothing magical to make this
site suddenly public and out there on the Web.
| | 02:59 | You see all SharePoint sites
behave as if they are internal.
| | 03:03 | They want to authenticate
everybody and this one is no different.
| | 03:07 | One of the things you'll see on the
Publishing Portal right out of the box is a
| | 03:12 | message on the Home page saying that you
need to turn on anonymous access if you
| | 03:17 | want to allow people to see
this site without logging in.
| | 03:19 | Now I could click this link here and
we jump to one of the settings pages
| | 03:24 | about anonymous access.
| | 03:26 | Now this may not mean much to you,
but it's really telling you that just
| | 03:29 | because you made a Publishing Portal,
it does not mean that people can get to
| | 03:33 | this site over the Web.
| | 03:34 | You are going to have to get involved
with your Farm Administrators to make sure
| | 03:38 | that first off, the machine that
SharePoint is running is reachable over the
| | 03:42 | Public Internet and then that the
Web application this is running on is
| | 03:46 | reachable, and then that this site
collection has anonymous access turned On
| | 03:51 | because until this point, it's
going to try and authenticate anyone.
| | 03:55 | And if this site doesn't know who you
are, you will get an Accesses Denied
| | 03:59 | message as on any other SharePoint site.
| | 04:02 | And in this case, even though I've
jump to this setting, I am not actually
| | 04:05 | allowed to change it simply because
SharePoint is recognizing that there are
| | 04:10 | settings higher up the ladder that will not
allow anonymous users to get to this site.
| | 04:15 | But we are not really focused on the
technical side of allowing this site to be
| | 04:19 | visible over the Internet.
| | 04:20 | We're really talking
about how do you work with it.
| | 04:23 | Now I am looking at a Publishing Portal
pretty much as it was created right out
| | 04:28 | of Central Administration.
| | 04:29 | And the Publishing Portal can only be
created as a top-level site, not as a
| | 04:33 | subsite, and it's important to understand why.
| | 04:36 | And it's really because the
Publishing Portal isn't just a SharePoint site.
| | 04:41 | It is a site collection by itself.
| | 04:44 | And that's very important into
understanding how we start to build it out.
| | 04:48 | Well, above everything else, it is a
SharePoint site, so I can go to my Site
| | 04:53 | Actions menu and click View All Site Content.
| | 04:56 | I will see your classic SharePoint structure.
| | 04:59 | This site is made of lists and libraries,
there is nothing remarkable about it.
| | 05:03 | In fact, if I come down a little bit, I
can actually see that not only do I have
| | 05:08 | this site, I have two subsites underneath it:
| | 05:11 | Press Releases and Search.
| | 05:14 | And these sites are created when
the Publishing Portal is created.
| | 05:18 | You actually get three SharePoint sites
and a new site collection, the top-level
| | 05:23 | site and then a Press Releases
subsite and then a Search site.
| | 05:27 | And the Press Releases site is here as
an example of how you are supposed to add
| | 05:32 | new areas to this web site
and we'll explore that next.
| | Collapse this transcript |
| Growing portal sites| 00:00 | So if you are going to use the
Publishing Portal, let's take a look at how you
| | 00:03 | start to build this out into
something more substantial.
| | 00:07 | Now I made a simple change to this page and I
am actually just going to go and back it out.
| | 00:12 | In fact, I am going to Discard my
Check Out to lose any changes that I made.
| | 00:16 | So we are back to pretty much the
way it is after it's been created.
| | 00:20 | If you notice over here on the left-hand side,
I have this link that says Press Releases.
| | 00:25 | And if I click that link, it will
take us to another really bland page.
| | 00:30 | But what it's doing here is actually
taking us from the Publishing Portal Home
| | 00:35 | page site into a Press Releases subsite.
| | 00:39 | I am now in a different site
than I was in one page ago.
| | 00:42 | And that might sound like a strange
thing to do, but it's the way that the
| | 00:45 | Publishing Portal is built.
| | 00:46 | And you are probably very used to
building out web sites and building out
| | 00:50 | say your navigation bars to have a Catalogue
or an About Us section or a Contact section.
| | 00:56 | Well, the way that we start to build
out different sections of a Publishing
| | 00:59 | Portal is by adding new web
site to this site collection.
| | 01:03 | That might sound like a bit of overkill,
but in fact it's really, really simple
| | 01:08 | because you expand this Publishing
Portal just by creating new sites.
| | 01:12 | So I am going to go back to the Home
page of the Portal and get ready to create
| | 01:18 | a new site in the site collection.
| | 01:20 | As ever, I am going off my Site
Actions menu down to New Site.
| | 01:24 | And you might already be thinking well,
what kind of site am I going to add?
| | 01:27 | Am I going to add a Team Site or a Blank Site
or a Document Workspace or a Blog? What do I do?
| | 01:33 | Well, clicking this, I have
basically two choices, a Publishing Site with
| | 01:39 | Workflow and an Enterprise Wiki.
| | 01:42 | I am going to talk about
Enterprise Wikis in the next movie.
| | 01:45 | For the most part, we are going to
be working with Publishing Sites with
| | 01:48 | Workflow when we are using a Publishing Portal.
| | 01:51 | So what does this actually mean?
| | 01:53 | Well, you can think of this Publishing
Site with Workflow as being a repeatable
| | 01:58 | unit, a repeatable
section of your public web site.
| | 02:01 | So if I wanted to build say an About Us
section with ten biography pages inside
| | 02:07 | of it, I might create a new site, call
it About Us, I'll put the location of
| | 02:15 | parent site forward slash
(/) about, and click Create.
| | 02:19 | And what it immediately did is create
a site underneath my Publishing Portal
| | 02:23 | Home site and it's also added that
About Us section to the bar here.
| | 02:29 | But the About Us section is just
another SharePoint site with its own site
| | 02:34 | settings, its own View All Site Content link.
| | 02:37 | It's very basic, it has a Pages
library with one page in it, which is the
| | 02:42 | default page of this section.
| | 02:44 | And here would be where I'd add the
ten new biography pages, for example,.
| | 02:48 | I could go back up to the Home page of
the Publishing Portal, come down, make
| | 02:53 | another site, call this one Contact Us,
at the same URL as the parent forward
| | 03:00 | slash (/) content, click Create.
| | 03:03 | And even if I was only going to
have one page in this area, this is it.
| | 03:07 | And as I start to build out these sites
directly under that top-level Home page,
| | 03:12 | it will start to automatically add
them to the navigation area here.
| | 03:16 | Now the navigation is of course customizable.
| | 03:19 | We can change this, we don't
have to just take what it gives us.
| | 03:23 | But this is the way that it will
build out this site structure by default.
| | 03:27 | Now these subsites that we are making,
these Publishing Sites with Workflow, are
| | 03:31 | really behaving the same way as
the top-level site in the portal.
| | 03:36 | If I make any change to them and then
save those changes, those are going to be
| | 03:44 | regarded as Checked out.
| | 03:46 | I would have to go to my page, check it
in, mark it for submission, mark it for
| | 03:51 | approval, and run it through
that whole process if necessary.
| | 03:54 | By going once again back all the way
up to the top level of the Publishing
| | 03:58 | Portal and dropping back into my View
All Site Content, I can start to see that
| | 04:03 | this is really the simple
way that we build out the site.
| | 04:06 | The structure of a Publishing
Portal is very straightforward.
| | 04:09 | It's really one of the
simpler SharePoint sites there is.
| | 04:12 | Yes, because we've got the Publishing
feature enabled, we do have the toolbars,
| | 04:17 | we have to think about versioning and
the status of the pages and whether this
| | 04:21 | is published and whether it's approved.
| | 04:23 | But all the way through this site
collection, we are working with these same
| | 04:26 | Master pages and page layouts and CSS
that we have been working with all along.
| | Collapse this transcript |
| What is an Enterprise Wiki?| 00:00 | There is another site that has the
Publishing feature already turned On and it's
| | 00:04 | a site called the Enterprise Wiki.
| | 00:06 | Here is the simplest comparison.
| | 00:08 | If you were to look at the
Publishing Portal and think starting point for
| | 00:12 | Internet sites, you should look at the
Enterprise Wiki and think starting point
| | 00:17 | for a knowledge base.
| | 00:18 | Now you probably remember that we have
basic Wiki functionality in a normal Team Site.
| | 00:23 | And the Wiki functionality here is
quite similar to what we've already been
| | 00:27 | working with, but it does add a few
features because the idea is that this
| | 00:31 | site is larger scale.
| | 00:33 | It's not just for one team,
it's for your entire organization.
| | 00:38 | So it adds simple things like a Page
Rating and Categorization, the idea being
| | 00:44 | that you'll be creating
much more content in the site.
| | 00:46 | Now the Enterprise Wiki is typically
created as a top-level site and a new site
| | 00:51 | collection because the idea is it can
grow very large and site collections can
| | 00:56 | be given their own database.
| | 00:59 | So that's why you won't typically see
it available as a subsite although it can
| | 01:03 | be created as a subsite for a Publishing Portal.
| | 01:06 | Now this Enterprise Wiki as we can
tell just from looking at it is using
| | 01:11 | v4.master as a Master page.
| | 01:14 | It's the standard SharePoint 2010 Master page.
| | 01:17 | And you can do all the same things on
this site as in any publishing site,
| | 01:21 | making use page layouts, work with
Master pages, use your own CSS, and so on.
| | 01:26 | You can open it up in SharePoint
Designer and work with it that way.
| | 01:30 | Now there is nothing wrong with using an
Enterprise Wiki as a starting point for
| | 01:34 | a branding project, but neither is
there anything particularly supportive about
| | 01:38 | it, because even though the Publishing
feature is turned on for this site, it's
| | 01:43 | not turned on primarily
for a big branding change.
| | 01:46 | It's more for content control and
providing modified page layouts if necessary.
| | 01:51 | Now if you did open this site in
SharePoint Designer and went to Page Layouts
| | 01:55 | section, you would find a
collection of page layouts.
| | 01:59 | Having said that, if you are in the
site itself and when you are, say, editing
| | 02:03 | a page, you'll actually find that the page
layouts available to you are more restricted.
| | 02:08 | If I jump to the Page section of the
Ribbon and my Page Layout, I really don't
| | 02:13 | have many options here.
| | 02:14 | I have a basic page which
is an Enterprise Wiki page.
| | 02:17 | That's called a Basic Project Page
and a Redirect page is that just sends
| | 02:21 | you somewhere else.
| | 02:23 | And in essence, this page is
intended to be quite simple.
| | 02:26 | We have this one main area of content
and this is wiki content, so we can do
| | 02:32 | things like the two opening square brackets (
| | 02:34 | [[) to link to other pages on the site.]
| | 02:34 | But we can use the rich editors up here on
the toolbar to do things like Insert Pictures.
| | 02:42 | We have these two new controls on this
side, the Rating control that with large
| | 02:46 | scale sites with a lot of content
can be useful for social filtering.
| | 02:51 | And then we have this Categories section.
| | 02:53 | Now this can be driven by SharePoint's
feature of managed metadata, meaning you
| | 02:57 | can define company-wide categories
and start to tag some of your content.
| | 03:02 | But it's not something we are
really going to cover in this course.
| | 03:04 | Now while the Publishing feature is
turned On, you might notice that making a
| | 03:10 | change to a page on an Enterprise Wiki
does not seem to certainly jump up with
| | 03:15 | that yellow bar saying that
I'm checked out and editable.
| | 03:18 | And that's because the approval process
for changes is not enforced by default
| | 03:22 | on an Enterprise Wiki the same
way it is on a Publishing Portal.
| | 03:26 | I can just make a change and save it.
| | 03:29 | I don't have to publish it and I don't
have to have it approved like all content
| | 03:34 | control in the Publishing feature
that is based on your library settings.
| | 03:38 | And it's because in an Enterprise Wiki,
at least right out of the box, if I were
| | 03:43 | to look at the All Site Content here and
look at my Pages Library which is where
| | 03:48 | the pages are stored, I can check the
settings of this Library and find that
| | 03:52 | they are a little looser than they
would be for a Publishing Portal.
| | 03:56 | In my Versioning settings on my Pages
Library here, I can see that content
| | 04:01 | approval is not required, which is
why I don't have to go through it, that
| | 04:05 | versioning is happening,
but it's just major versions.
| | 04:09 | That means we have versions, every
change is saved, but every change is
| | 04:13 | regarded as a live change.
| | 04:16 | There are no draft versions here.
| | 04:18 | And I don't even have to check
a page out before I can edit it.
| | 04:22 | So although the Publishing feature is
turned On for Enterprise Wikis, it's
| | 04:26 | primarily for a little bit of content
control and for providing those modified
| | 04:31 | page layouts if necessary.
| | 04:33 | Now personally, I'm a fan of
the Enterprise Wiki as a wiki.
| | 04:36 | I don't tend to use this
site as a branding project.
| | Collapse this transcript |
| Security concerns for internet-facing sites| 00:00 | If you are intending to use SharePoint
2010 for your public web site, you've got
| | 00:04 | a couple of things to consider.
| | 00:06 | First off is licensing.
| | 00:08 | SharePoint is typically licensed per
user but -- and obviously it isn't going
| | 00:12 | to work for a public web site where
you could have hundreds of thousands of
| | 00:16 | people visiting you.
| | 00:17 | So Microsoft does have a different
license that you need for SharePoint
| | 00:21 | for Internet sites.
| | 00:23 | Now we're not going to cover licensing
at all in this course, there are many,
| | 00:26 | many different options there.
| | 00:28 | So talk to your Microsoft rep if
there's something that you need.
| | 00:31 | The key technical question is how do
people actually get to your site because as
| | 00:36 | we've covered just creating a
publishing portal does nothing to make this
| | 00:40 | accessible via the web.
| | 00:41 | Well first off, the machine that this
is installed on will need to be available
| | 00:46 | and visible on the public Internet and
that's going to be your administrator's
| | 00:49 | job to make sure the domain names hook
up correctly and point to the correct
| | 00:54 | site collection SharePoint.
| | 00:55 | Now you'll find administrators will
also need to do some work in SharePoint
| | 00:58 | central administration to make this
particular site collection visible over the web.
| | 01:03 | You have to turn on Anonymous Access and
that will be done in several places not
| | 01:09 | just for this site but for
the entire site collection.
| | 01:11 | It has to be done in central
administration as well as something called the web
| | 01:16 | application and the web server as a whole.
| | 01:19 | One of the issues here is what if I'm
using the SharePoint both for internal use
| | 01:24 | and I want to use it for a public web site?
| | 01:26 | Well, I would be very, very wary about
putting this site collection out on the
| | 01:31 | public Internet on the same
machine as my internal content.
| | 01:35 | Typical practice with SharePoint as a
public web site is that you put the public
| | 01:40 | part of it on its own
machine out there on the web.
| | 01:42 | So if it does get compromised no one
has access to both your Internet site and
| | 01:47 | your internal pages.
| | 01:48 | Now a question that I occasionally get
asked is, is there some way SharePoint
| | 01:52 | can save off its pages as a static
pages and we can just FTP those up to some
| | 01:57 | location on the public Internet?
| | 01:59 | And unfortunately SharePoint really doesn't
work that way, it's not how it does things.
| | 02:03 | However, the idea is sound because
really the situation that you want is to work
| | 02:09 | on an internal SharePoint server behind
a firewall and you develop your pages on
| | 02:14 | this machine that's only visible and
only available inside your organization.
| | 02:19 | And then you are going to create
your changes and move them to the public
| | 02:24 | SharePoint server that is available
outside the firewall, but only contains that
| | 02:29 | part of the site that's necessary to be outside.
| | 02:32 | Now this functionality is
supported, you can do this.
| | 02:35 | Now both of these machines have to
have SharePoint installed but there's an
| | 02:39 | option in SharePoint central
administration to do what are called content
| | 02:43 | deployment jobs where you can develop
on the internal machine and when you
| | 02:47 | finish developing all your pages on a
nightly or a weekly or hourly basis or
| | 02:52 | just on demand, it can find all the
latest published and approved pages and move
| | 02:57 | them to a different SharePoint server.
| | 02:59 | Now most of what I've talked about in
the last couple of minutes are really
| | 03:03 | systems engineering tasks but they are
things you should be aware of if you are
| | 03:07 | using SharePoint to make a
public web site available.
| | Collapse this transcript |
|
|
11. Creating ThemesCustom themes in Foundation sites| 00:00 | Earlier in the course we briefly
explored the built-in themes available
| | 00:04 | in SharePoint 2010.
| | 00:06 | Themes give you an easy
to change a color scheme.
| | 00:09 | Although the color schemes on offer
are somewhat lacking, but these can
| | 00:13 | occasionally be useful so let's see
how to take them a little bit further.
| | 00:17 | Now themes behave slightly differently
in foundations and publishing sites so
| | 00:21 | I'm going to cover them one at a
time, either way we go into the Site
| | 00:26 | Actions>Site Settings area.
| | 00:27 | I'm currently in a Team Site, a classic
foundation site and I'll jump into the
| | 00:32 | Site theme setting under Look and Feel.
| | 00:35 | This is where we have about 20
themes to select from and then this
| | 00:39 | customization section down here.
| | 00:41 | So when customizing you have a set of
colors and you have a couple of fonts
| | 00:45 | that you may see here.
| | 00:47 | Well, if you see this option to change
the heading font and body font this will
| | 00:50 | be an exercising frustration for you if
you wanted to have any effect, because
| | 00:55 | in foundation sites the
font changing does nothing.
| | 00:58 | It's more accurate to say that the V4
master file does not support changing
| | 01:02 | fonts just with a theme.
| | 01:04 | Now in publishing sites the font
change can actually have an effect as we'll
| | 01:08 | see in a moment, but really what we can work
with the foundation sites are these colors.
| | 01:14 | And the names look fairly
straightforward by the issue is they really aren't,
| | 01:18 | you've got Text/Background - Dark 1,
Light 1, Dark 2, Light 2 and several
| | 01:24 | accents, but of course it's not
really clear which one is which.
| | 01:28 | Now you can do some level of
experimentation just by selection some of the
| | 01:32 | built-in themes and you kind of get an
idea of the effect that they have, but
| | 01:36 | what you'll often find is that the
colors selected here might be affecting more
| | 01:41 | pieces than you might at first think.
| | 01:43 | So Dark 1, for example, is actually
being used for a significant amount of
| | 01:48 | text but it's also being used and will
affect the links that you will find in
| | 01:53 | the quick launch bar.
| | 01:54 | The Text/Background - Light 1 color is
being used for the main body color here.
| | 02:01 | The Dark 2 color is being used for the
ribbon background but it will also be
| | 02:05 | used for the quick launch heading sections.
| | 02:09 | And Light 2 is fairly straightforward,
it's actually being used for most of the
| | 02:13 | menu sections that you see.
| | 02:15 | However, it gets a bit more complex
when we get down into the Accents.
| | 02:18 | Accent 1, well this one is actually
used for the gradient behind the top link
| | 02:24 | tab, it's also used a heading 1 on a
Wiki page and it's also used for the
| | 02:28 | mouseover on the Site Actions menu,
whereas in a foundation site Accent 2, 3, 4,
| | 02:33 | 5 and 6 don't appear to do anything at all.
| | 02:36 | So while you can get some decent
looking results by selecting from these color
| | 02:41 | schemes certainly a bit of
experimentation is called for.
| | Collapse this transcript |
| Custom themes in Publishing sites| 00:00 | Changing the themes in publishing
sites can have a bit more impact.
| | 00:04 | The font changes, for example, can
take effect at least to some level.
| | 00:08 | They are accessed in the same place
under your Site Actions' Site Settings in
| | 00:11 | the Site Theme area and you
have the same ones to select from.
| | 00:16 | I'm going to just select Azure here,
which is a fairly monochromatic one, and
| | 00:21 | not just except the default font of
Verdana, but I'm going to come and find some
| | 00:26 | fairly obvious fonts, just to prove
the point here, Impact is pretty obvious,
| | 00:32 | and let's say Comic Sans;
| | 00:35 | that's very obvious.
| | 00:36 | I'm going to now click apply.
| | 00:38 | Now we won't see a font change in the
Settings page, because the Settings page
| | 00:42 | is using V4.master, but if we head
back up to the homepage of the publishing
| | 00:47 | portal we can at least see some impact here.
| | 00:51 | The title seems to be using the Impact
font, and then we've got our navigation
| | 00:55 | here using Comic Sans.
| | 00:57 | This is using Comic Sans over on the
top right as well, but the actual content
| | 01:02 | of this page is being
rendered out the way it always was.
| | 01:05 | So it doesn't necessarily have the
impact that you think, and as we can see some
| | 01:09 | of the colors are having an impact on
the gradient, but once again they are kind
| | 01:13 | of difficult to figure out,
jumping back into the theme settings.
| | 01:17 | Again, I find often the best way to
figure out what each color is doing in any
| | 01:22 | particular situation is to select a
fairly monochrome layout like Azure and then
| | 01:27 | pick, let's go to Accent 3
here, a very vivid color.
| | 01:33 | Click Apply and see if we can
notice an effect from just changing that.
| | 01:37 | Nothing is obvious from the Site
Settings page, but going back to the homepage,
| | 01:41 | what we can see here is it looks like
the only impact that I can see is a small
| | 01:46 | line at the top and bottom of the Search Box;
| | 01:49 | so as ever a bit of experimentation required.
| | 01:53 | One thing you can also do with
themes that's worth mentioning is you can
| | 01:57 | actually use Microsoft
PowerPoint to generate these theme files.
| | 02:02 | And this is really because what we're
looking at in SharePoint is basically
| | 02:06 | Office 2010 theme color schemes.
| | 02:08 | What do I mean by that?
| | 02:10 | Well, if I jump to the
design area of PowerPoint here.
| | 02:14 | This is where I see the different
themes for a PowerPoint slide, but beside
| | 02:18 | them is this area of colors, with all
the different selections I can choose
| | 02:24 | from, but I can also create my own
theme colors from this menu, Create New
| | 02:28 | Theme Colors, and we can notice that
the theme colors being used here are
| | 02:32 | exactly the same as the settings we are
seeing in SharePoint, and this is where
| | 02:36 | these names come from.
| | 02:38 | So I could actually create a color
scheme like this one and give it a name.
| | 02:41 | I'll call it Simon right now and save it.
| | 02:44 | I can then also select from the
fonts and whatever I'm using is basically
| | 02:50 | being applied to this PowerPoint
slide, but what I can do clicking this
| | 02:55 | dropdown here is it understands what
the presentation is currently using,
| | 02:59 | their color scheme and font setup
that I just picked, and what I can do is
| | 03:03 | save that theme as a .thmx file.
| | 03:07 | You don't get any extra abilities
just by using PowerPoint, it's the same
| | 03:11 | selections of colors, but you can
create them as a file which can then be
| | 03:17 | imported into SharePoint, instead of
just setting them here you can import them
| | 03:21 | into what's called the Theme Gallery.
| | 03:24 | The only real benefit here is that you
could copy the same color scheme across
| | 03:28 | multiple sites by providing this .thmx file.
| | 03:32 | Now the thing is, it's very easy
to be underwhelmed by the themes
| | 03:37 | functionality in SharePoint.
| | 03:38 | The actual theme-ing engine here and
what's going on is complex and it's really
| | 03:42 | powerful and technically it's very impressive.
| | 03:45 | If I actually jump over to SharePoint
Designer here, I have a copy of corev4.css
| | 03:52 | open, all 8,000 lines of it.
| | 03:54 | I'm not going to edit it, I just
want to show you something here.
| | 03:57 | See SharePoint is using its own
scheme of tokens inside this CSS.
| | 04:02 | We have these comments like
ReplaceColor, ThemeColor, Accent1, ThemeShade 0.8
| | 04:08 | and what happens when you use these
comments, these tokens in CSS is that
| | 04:13 | SharePoint will dynamically replace
these colors with the relevant theme color
| | 04:18 | based on whatever theme is selected.
| | 04:20 | So there is an awful lot of thought and
an awful lot of functionality that goes
| | 04:24 | into this, however I have never actually
seen an instance where it was worth the
| | 04:28 | trouble putting these in your own
branding and I do recommend that you focus on
| | 04:33 | your own custom CSS without using these tokens.
| | 04:37 | This is the reason why you might
occasionally see them when you are
| | 04:40 | experimenting with corev4.css and it's
what these tokens represent, but I doubt
| | 04:46 | that you'll find them useful in your own CSS.
| | Collapse this transcript |
|
|
12. Customizing NavigationDefault navigation| 00:00 | Every SharePoint site has built in navigation.
| | 00:04 | In a typical site you may have the
navigation along the top, you may have the
| | 00:08 | navigation down the left-hand side
and I'm not even considering the ribbon
| | 00:12 | here, I'm just talking about the actual
links you are likely to click on to get around.
| | 00:17 | What's not so obvious is what they
can and what they do always represent.
| | 00:21 | Now, one of the challenges that we
first come across is even though the
| | 00:25 | navigation conceptually is similar in
foundation sites like Team Sites and in
| | 00:30 | publishing sites the ways to change
these options are very different, and we are
| | 00:35 | going to explore both of them.
| | 00:36 | But really you need to know two
things, what will the navigation show if
| | 00:41 | left alone and what can it be
changed to show and if you assume that
| | 00:46 | regardless of what kind of site you
are on these links can be changed to
| | 00:49 | show pretty much anything.
| | 00:51 | The first thing to understand is what
will they show when you leave them to
| | 00:55 | their own devices because bear in mind
SharePoint will try to help you and it
| | 00:59 | will automatically create a lot
of these navigation links for you.
| | 01:04 | So step one, assume that out of the box
without any customization the top link
| | 01:10 | bar is going to have links between
different sites whereas the left-hand side,
| | 01:15 | the quick launch bar is links to
things inside the site you are currently in.
| | 01:20 | But as we've seen multiple times this
might be the standard behavior but this
| | 01:25 | navigation is not authoritative,
it could have been changed.
| | 01:29 | The top link bar doesn't have to tell
you exactly what sub-sites exist and the
| | 01:33 | quick launch bar doesn't have to
point to every list and library.
| | 01:37 | The only authoritative view of your
sites content, including your sub-sites is
| | 01:43 | going to be the view All Site Content
link, everything else is changeable, what
| | 01:49 | it is, what it says, and how it looks.
| | 01:52 | So let's see how to change it.
| | Collapse this transcript |
| Customizing the Quick Launch and Top Link bars| 00:00 | Let's see how to edit navigation in
a SharePoint Foundation site, a site
| | 00:04 | without publishing.
| | 00:05 | So I am looking at a very simple Team
Site here and it's at the top level site
| | 00:10 | of a site collection which I can verify
just by clicking this Navigate Up button
| | 00:15 | and seeing that there is nothing
above me in the Breadcrumbs here.
| | 00:18 | Now the way that I have just build out
this site collection is I have one top
| | 00:22 | level site and I have made two sub-sites
underneath it, a Document Workspace and
| | 00:28 | a Meeting workspace.
| | 00:32 | And going back up to the top level site
if I create a new site under here, let's
| | 00:36 | make a blank site, it's going to create
that site and it's going to change the
| | 00:45 | Top Link Bar of the parent site to point to it.
| | 00:48 | Now, it's jumped into the blank site,
so I need to navigate back up to the top
| | 00:53 | level where now I have three links,
that's the default behavior of SharePoint.
| | 00:57 | You create a new site, it will put a
link in the top link bar to that site.
| | 01:01 | Now you can of course change this and
to change to anything that we are looking
| | 01:04 | at here I am going to go to the Site
Actions menu, down to Site Settings and
| | 01:09 | over into Look and Feel where I have
an entry for both the Quick launch bar,
| | 01:13 | which is on the left and the
Top link back along the top.
| | 01:16 | Clicking Top link bar gives me the
links that I see, one for Home, Document
| | 01:20 | Workspace, Meeting and Blank Site.
| | 01:23 | I can click this link here to change
the order, move the Blank Site up to the
| | 01:26 | second position the others will
reorder themselves, just click OK.
| | 01:31 | I can add a New
Navigation Link, it's vey simple.
| | 01:34 | All I have is a web address and a description.
| | 01:37 | Now, this doesn't have to
be a SharePoint address.
| | 01:40 | It's quite fine that I just put in
the address of any site, a little bit of
| | 01:44 | descriptive text, click OK.
| | 01:46 | It adds it here in the Top link bar.
| | 01:49 | What's not so obvious is how I might say
change the text on one of these or delete one.
| | 01:55 | Usually in SharePoint you can mouse
over the entries and you'll see the pop-up,
| | 01:59 | or you'll see a link appear
and that doesn't appear here.
| | 02:02 | It's actually very simple.
| | 02:03 | The icon is clickable even if the text is not.
| | 02:07 | So let's say I wanted this Document
Workspace to have a different name, I click
| | 02:11 | the icon beside it and while I can't
change the address of the site because
| | 02:16 | SharePoint created the link to it and
it's using that address to make sure I can
| | 02:20 | navigate to it so it's not
going to let me change it.
| | 02:22 | I am going to change the description to say
Annual Report, very simple, very easy to do.
| | 02:30 | Now, if I jump into any of these
sub-sites like the Blank Site I just
| | 02:34 | created, notice that this Top link bar
is empty because I have no sub-sites,
| | 02:39 | there is nothing beneath me.
| | 02:41 | Now the default behavior in SharePoint
2007 if you came from that was to share
| | 02:46 | the Top link bar of the parent site,
but that's not what happens now.
| | 02:50 | If I am in sub-site I could choose to
have that behavior, I go to the Site
| | 02:55 | Actions and Site Settings of this site
and I am in this Blank Site, my sub-site,
| | 02:59 | click on Top Link bar and I have this
option here to Use Links from Parent.
| | 03:05 | I don't need to do that, because I think
it works just fine as it is, but if you
| | 03:08 | wanted that SharePoint 2007
behavior that's how you get it.
| | 03:12 | So I am going to use my Navigate Up
button just go to back all the way up to the
| | 03:15 | top and we also have the Quick launch
bar by default over here on the left.
| | 03:20 | Similar idea for editing it, we are
going into Site Settings, there is a
| | 03:24 | link for Quick launch.
| | 03:26 | I'll see there is a slightly
different look to this now because we have
| | 03:30 | groupings available.
| | 03:31 | We have these headings of
Libraries, Lists and Discussions.
| | 03:35 | We can still change the order of them,
maybe I'll move the Discussions up to
| | 03:38 | position one, click OK, it instantly
reorders them here and in my Quick Launch bar.
| | 03:43 | I can click the icon to change the link or
change the text or also delete the link entirely.
| | 03:50 | I can also create a New Heading, but be
aware a heading is just a link, so you
| | 03:54 | need both a web address of something and
a description, but it's a fairly manual
| | 03:59 | process but this is all there is to it.
| | 04:02 | Now, one of the things I am
occasionally asked is how do I get rid of one of
| | 04:05 | these links just temporarily, and
really there is no temporarily when you are
| | 04:10 | working with the Quick Launch bar or the
Top Link bar in SharePoint Foundation sites.
| | 04:14 | If I want to get rid one of these links
the only way I can do it is to click one
| | 04:19 | of the icons and click Delete and that is gone.
| | 04:23 | If I want it back I need to recreate that link.
| | 04:26 | Bear in mind of course I am not
actually deleting that library, I was just
| | 04:30 | deleting the link to it
from the Quick Launch Bar.
| | 04:33 | So although this might seem quite
manual and it is truly only an issue if you
| | 04:37 | changing the default navigation, so
remember that SharePoint will add many of
| | 04:41 | these links for you and it will take
care of security trimming them, it does a
| | 04:45 | very good job of not showing
you a link you can't click on.
| | Collapse this transcript |
| Editing navigation in sites with Publishing enabled| 00:00 | If you're working with publishing sites,
your navigation options go a little
| | 00:04 | deeper and how you edit them is going
to change but you can also get to do some
| | 00:09 | things you can't do with foundation sites.
| | 00:11 | One of the first things we have
to deal with is a name change.
| | 00:15 | I'm going to go looking for the
navigation options in my Site Actions>Site
| | 00:19 | Settings, but I'll find that Quick
Launch and Top Link Bar links have completely
| | 00:24 | disappeared and instead they are
replaced by one single navigation link.
| | 00:30 | If I drill into that navigation link
what I see here is it split into two
| | 00:35 | different sections, what it calls
Global Navigation and Current Navigation.
| | 00:40 | And in fact, what I'm looking at here
on this page my Global Navigation is the
| | 00:45 | Top Link bar, my Current
Navigation is the Quick Launch bar.
| | 00:50 | Not quite sure why they change the names just
because you turn Publishing on but they did.
| | 00:54 | Well, I can tell just by looking at this
page that there is a little bit more to
| | 00:59 | it than working with the Quick Launch
bar and the Top Link bar, there seems to
| | 01:02 | be more options, more choices, more checkboxes.
| | 01:06 | Going back up, I have this first section here.
| | 01:09 | It says, with Global Navigation do
I show subsites? Do I Show pages?
| | 01:15 | I may not know the impact of that right
now but we'll explore that in a second.
| | 01:19 | Same thing with Current Navigation,
do I show subsites, do I show pages?
| | 01:23 | What are the maximum
number of dynamic items to show?
| | 01:26 | Coming down a little bit it
asked do I sort these manually?
| | 01:30 | And that's checked by default, and that
really just means you have the options
| | 01:34 | of moving these things around.
| | 01:36 | Then this lower section, probably the
most important part, it's showing me what
| | 01:40 | it believes to be both the global
navigation and the current navigation, and
| | 01:45 | that typically means along
the top and along the left.
| | 01:48 | Although here is an issue.
| | 01:50 | If I go to the homepage of the
Publishing Portal that's using
| | 01:53 | NightAndDay.master, well it's really
actually only showing the equivalent of a
| | 01:57 | Quick Launch bar, it doesn't have a
Top Link bar here, and that's simply
| | 02:02 | because the NightAndDay.master page
does not have an area for top navigation,
| | 02:07 | it's got an area for the ribbon and an
area for the Site Actions bar and even
| | 02:11 | an area for a breadcrumb.
| | 02:13 | But it only really has the current navigation.
| | 02:16 | Now that's actually okay.
| | 02:18 | Our main question is not does every
master page look exactly like SharePoint
| | 02:22 | v4.master, but just can someone
find what they're looking for.
| | 02:26 | So I'm going to go back into Editing,
again I could go back through Site
| | 02:30 | Settings, although on a default
publishing portal you'll also see there is
| | 02:34 | direct link to Manage navigation here.
| | 02:36 | And coming down, I'm going to
look at my Current Navigation.
| | 02:41 | This is what's actually showing up in
the NightAndDay.master area, an entry for
| | 02:46 | Libraries and then a link to a library.
| | 02:49 | A link to the About Us sub-site, a
link to the Contact Us sub-site, and the
| | 02:53 | Press Releases sub-site, we even have
another site called Search and this is Hidden.
| | 02:59 | When you're working with navigation
and publishing sites you can actually
| | 03:02 | temporarily hide and show links, so I
could select Press Releases, click this
| | 03:07 | button to Hide it and then click
Search and click that button to Show it.
| | 03:12 | Come back down and click OK, back to
the homepage of the portal just to see
| | 03:16 | the impact that it's had and as we see press
releases has gone but search is now showing up.
| | 03:22 | Back into navigation.
| | 03:24 | Down in this lower section you do have
the options to Add Heading and Add Link,
| | 03:29 | the same way we could with the Top Link
bar and the Quick Launch bar, although
| | 03:32 | there is a little more to them this time.
| | 03:34 | We can still add a link to external
sites but we get a bit more of a choice.
| | 03:39 | We get the opportunity to Open the
link in a new window, we get to give it a
| | 03:42 | Description, and we even get to give it
an Audience, a way of explicitly saying
| | 03:47 | who should this link be shown to.
| | 03:48 | Now even if you are working with
NightAndDay.master, bear in mind some of
| | 03:54 | the changes that I make here in Global
Navigation and Current Navigation are
| | 03:58 | very easy to check.
| | 03:59 | I just don't go back all the way to
the homepage, I can actually see the
| | 04:03 | impact or the changes that I've made
right here on the Settings page, because
| | 04:07 | it's using V4.master.
| | 04:09 | And notice one thing that we're
getting with this publishing site too is the
| | 04:13 | opportunity to have it generate drop-down menus.
| | 04:16 | Now what is this showing here?
| | 04:18 | Well, usually these links are to sub-
sites and that's exactly what I have.
| | 04:23 | The way I've built out this publishing
portal, About Us is a sub-site, Contact
| | 04:27 | Us is a sub-site, Press Releases is a
sub-site, and what I had done a little
| | 04:31 | earlier is in the About Us site I
created another site called Job Opportunities,
| | 04:37 | which itself is just a publishing site
with workflow in this publishing portal.
| | 04:42 | Coming down all the way into Job
Opportunities I could click that Navigate
| | 04:45 | Up button, see the little breadcrumb
here which shows up slightly different
| | 04:49 | on a publishing site.
| | 04:51 | The reason that I'm showing you that
and I'll jump back into my navigation is
| | 04:55 | that the drop-down is being generated
because of these options here, but I've
| | 05:00 | chosen to Show subsites, and there is
also the maximum number of dynamic items
| | 05:06 | to show within this level of navigation.
| | 05:08 | Now I don't have a very complex
structure but you could actually have multiple
| | 05:12 | drop downs appear here and multiple fly-outs.
| | 05:15 | So even though the default publishing
portal only shows a Current Navigation
| | 05:20 | section, this is of course up to
you and you could change it yourself.
| | 05:23 | You could use V4.master as starting
point which has both or any of the starter
| | 05:29 | master pages which also have both, and
this is the core way that you and your
| | 05:34 | contributing users will be working
with navigation in your publishing sites.
| | 05:38 | But what would be useful to know is
how we might change these visually a bit
| | 05:42 | more than what we're seeing right now.
| | Collapse this transcript |
| Customizing the navigation controls in master pages| 00:00 | If you want to manage your navigation
using SharePoint you are going to do it
| | 00:04 | through the browser and using the
Site Settings, Modify Navigation link.
| | 00:11 | But even though this controls the
actual structure of navigation, we can use
| | 00:15 | SharePoint Designer and work some
magic about how these links are going to
| | 00:19 | appear, because your navigational
links both the Top Link bar and the Quick
| | 00:23 | Launch bar or if you'd rather the
Global Navigation and Current Navigation
| | 00:28 | that's part of the master page.
| | 00:29 | So I'm going to go into SharePoint
Designer and first look at a site where I
| | 00:33 | have a Team Site open and I'm looking
at the classic v4.master master page.
| | 00:39 | I'm looking at this in Design View,
I can actually see the control that's
| | 00:43 | generating the navigation, that's
actually showing me my information dynamically
| | 00:47 | here, both for the Top Link bar
and here for the Quick Launch bar.
| | 00:50 | So where are these
navigating sections coming from?
| | 00:54 | We know they are not static.
| | 00:55 | There is not just HTML in here
because they change, they are dynamic.
| | 00:58 | Well, they're both actually using
what's called an ASP.NET control, and even if
| | 01:03 | that's not something you are
comfortable messing with, what it really means is
| | 01:07 | that drawing this information from some
data, from the database and we know that
| | 01:12 | must be the case, and the benefit of
these is these controls are customizable,
| | 01:16 | we can change things about how they appear.
| | 01:18 | I'm just going to switch to Split View
here and highlight that Quick Launch bar
| | 01:23 | and I see this rather complex
looking control here called a
| | 01:28 | SharePoint:SPNavigationManager with
the bunch of information down here about
| | 01:33 | menuStyles and SelectedStyles.
| | 01:36 | Clicking the Top Link bar, I see
similar kind of idea, something here
| | 01:41 | saying SharePoint:Aspmenu.
| | 01:42 | Now you might be looking at this
thinking, I don't want to mess with any of
| | 01:47 | this, particularly if you are not
comfortable working with ASP.NET controls.
| | 01:51 | We do have another option, I'm going to
jump back all the way into Design View.
| | 01:56 | Then go to the View section of my
ribbon and open up the task pane called Tag
| | 02:00 | Properties, and then
selecting that top navigation section.
| | 02:04 | What it's going to show me here is a
Properties Inspector for that, and the
| | 02:08 | reason that I'd look at this is just to
look and see what's interesting about it.
| | 02:12 | I can see, for example, that there
seems to be something saying CssClass.
| | 02:17 | Now anytime you see a blue property,
it means it's actually been change, it's
| | 02:21 | not the default property, it's
actually been set to something.
| | 02:25 | So we've set the CssClass here
that might come in handy later.
| | 02:29 | If I come on down I can see I've
got some interesting stuff here.
| | 02:33 | UseSeparateCSS is false,
MaximumDynamicDisplayLevels is 1,
| | 02:38 | StaticDisplayLevels is 2.
| | 02:41 | Coming down even further I see things
like DataSourceID is topSiteMap and even
| | 02:47 | if I don't know exactly what
that means it kind of make sense.
| | 02:50 | This must be drawing its data from some
source of information that's meant to be
| | 02:54 | just telling me the Top link
bar, the information at the top.
| | 02:58 | Here is an interesting thing, the Layout,
Orientation is Horizontal, but I have
| | 03:03 | the choice of Vertical.
| | 03:05 | Now selecting this might blow out the
design a little bit, but I can instantly
| | 03:09 | see just even in the Design
View how it's changed it here.
| | 03:13 | So without knowing anything about this
actual control it's worth experimenting
| | 03:17 | a little bit with it.
| | 03:18 | Not only that but if I come down a
little further I've got the Styles area.
| | 03:23 | Opening up each part in turn I've got
the DynamicHoverStyle, what CssStyle are
| | 03:28 | we using, DynamicmenuItemStyle,
StaticHoverStyle, StaticmenuStyle.
| | 03:34 | The different between static and
dynamic is what does it always show and what
| | 03:38 | might it generate as fly-outs.
| | 03:39 | Now typically when you're working
with just v4.master on a foundation site,
| | 03:44 | you are not going to end up working
with fly-outs or drop-down menus, but that
| | 03:48 | capability is built into that control and
we'll find it by selecting the Quick Launch bar.
| | 03:53 | I actually have the same information,
it's the same control being used, except
| | 03:58 | this time around it's got
an Orientation of Vertical.
| | 04:03 | This time around there's a
couple of different settings.
| | 04:05 | MaximumDynamicDisplayLevels is set to zero.
| | 04:09 | There are going to be no hovers and no flyouts.
| | 04:12 | StaticDisplayLevels is 2.
| | 04:14 | We still have all these abilities
to start messing around with styles.
| | 04:19 | We've got the menuItemStyle.
| | 04:21 | I can define the BackgroundColor, the
BorderColor, the CssClass, the Font.
| | 04:25 | And of course, you can do and probably
should do a lot of this in your separate
| | 04:29 | CssClass, but you see that is accessible here.
| | 04:32 | I'm going to switch over to another copy
of SharePoint Designer that I have here
| | 04:37 | and in this one I'm
looking at a publishing site.
| | 04:40 | In fact, what I'm going to do here is
jump into the master pages section because
| | 04:43 | I just imported in a starter
master page for this publishing site.
| | 04:48 | The reason that I did that is
NightAndDay is little limited.
| | 04:51 | It only has one menu on it and I want
a master page with two, because I just
| | 04:55 | imported it, it's still sitting there
in page layout, so I'm going to edit that
| | 05:00 | file and sometimes you'll find that
SharePoint Designer has a problem rendering
| | 05:05 | some of this information, but again I
can see this navigation section here.
| | 05:09 | I'll open up my Tag Properties.
| | 05:12 | Same information that I saw in v4.master.
| | 05:16 | This one is rendering out Vertical
because it's actually the CurrentNav, the
| | 05:20 | equivalent of the Quick Launch bar.
| | 05:22 | This navigation selecting this along
the top is rendering out horizontal, but
| | 05:30 | it's these settings here that
are instantly having an affect.
| | 05:33 | I currently have it set to the
MaximumDynamicDisplayLevels of 1 and
| | 05:37 | StaticDisplayLevels of 1,
changing that, for example, to
| | 05:41 | MaximumDynamicDisplayLevels of 0 and
StaticDisplayLevels of 2 means that instead
| | 05:47 | of having the drop down for Job
Opportunities it's actually rendered statically
| | 05:52 | across the top here, and the great
thing is just by working with the setting of
| | 05:56 | these controls you can affect a
lot of things about how they show up.
| | 05:59 | Now I do recommend that you particularly
take a look at the Styles section where
| | 06:03 | you can see how you can build out your
different styles for both the static and
| | 06:06 | dynamic parts of the menu.
| | 06:08 | You have these things like Orientation,
if you wanted to you can make the left
| | 06:11 | side horizontal and the top link bar
vertical, it's completely up to you.
| | 06:15 | But there's a lot you can experiment
with here and using these you can do
| | 06:18 | a really major part of rewriting how your
navigation is presented in your own designs.
| | 06:23 | Of course, there is nothing that
stops you with a major redesign from just
| | 06:27 | handwriting it all in HTML and if you've
got a hugely defined structure that may
| | 06:33 | even be very efficient, but do take
some time to experiment with the Aspmenu
| | 06:38 | controls that SharePoint is using by default.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks for joining us for the
SharePoint 2010 Designer course.
| | 00:03 | Well, SharePoint is a huge topic
and Branding just one part of it.
| | 00:07 | In just a few hours we've covered the
core of the application and we've explored
| | 00:11 | the concepts that you really need to
know, Master Pages, and Page Layouts,
| | 00:15 | Content Types, and Custom CSS, things
that you need to be able to take your own
| | 00:20 | web skills and bring them
into the SharePoint world.
| | 00:22 | You should now be able to begin
branding your own SharePoint sites.
| | 00:27 | So good luck with your own sites in SharePoint.
| | 00:29 | See you next time.
| | Collapse this transcript |
|
|
