IntroductionWelcome| 00:04 | Hi! I'm Simon Allardice, and
welcome to SharePoint Designer 2007:
| | 00:08 | Branding SharePoint Sites.
| | 00:10 | If you've used SharePoint, you
probably have the same thought many of us have
| | 00:13 | had: that a SharePoint Web site default
layout can look dull and standardized.
| | 00:18 | In this course, we'll explore using
SharePoint Designer 2007 to alter the
| | 00:22 | appearance of these Web
sites, but here is the issue:
| | 00:25 | Customizing SharePoint is not
conventional Web design, and to do it
| | 00:29 | successfully, you must
know how SharePoint works.
| | 00:32 | So in this course, we'll explore
the architecture of SharePoint from a
| | 00:34 | designer's perspective, and see
different options for styling Intranet and
| | 00:38 | Internet sites, from creating
themes and simple CSS changes to a full
| | 00:43 | replacement with master pages and page layouts.
| | 00:46 | SharePoint is one of the fastest
growing products in Microsoft's history, and
| | 00:49 | it's just getting bigger.
| | 00:51 | But very few people know how
to change the way it looks.
| | 00:53 | You're going to be one of those people.
| | 00:55 | So let's get started with
SharePoint Designer 2007:
| | 00:58 | Branding SharePoint Sites.
| | Collapse this transcript |
| Prerequisites| 00:00 | This course is all about Web
design in SharePoint, but it's not an
| | 00:04 | introduction to Web design.
| | 00:06 | I expect you're already creating Web
sites, that you know HTML and CSS very well,
| | 00:11 | and that you're familiar with all the
core skills of modern Web design, like
| | 00:15 | working with image editors
and working with databases.
| | 00:19 | This course is designed to let you
take those existing Web skills and
| | 00:23 | successfully apply them to SharePoint.
| | 00:25 | In one sense, this course isn't about
design, at least not from the sense of
| | 00:29 | what's right and wrong.
| | 00:30 | It's just about the application of the design.
| | 00:33 | Sure, we're going to talk about
things like layout, fonts, and colors.
| | 00:36 | How do you take whatever it is you
want to do, and bring it into SharePoint?
| | 00:40 | Now to do this, we're going to work
with core SharePoint concepts and core
| | 00:44 | SharePoint knowledge.
| | 00:45 | Terms like site collections, master
pages, page layouts, features, Web parts,
| | 00:51 | these all need to become
very familiar and they will.
| | 00:54 | So the more time you've already
spent using SharePoint the better.
| | 00:58 | If you are brand-new to SharePoint, you
might think you don't need to know it,
| | 01:01 | that you can just develop your great
design, drop it into SharePoint and walk
| | 01:05 | away, but as you might guess from my
tone, that that's not going to work.
| | 01:09 | You need to know SharePoint
to customize it successfully.
| | 01:12 | You won't need to become an expert
in every area of SharePoint, but you
| | 01:15 | will need to know it.
| | 01:17 | So in the first section of this
course, I'll go through some core
| | 01:20 | SharePoint concepts.
| | 01:21 | If you've already spent a lot of
time in SharePoint, you might be tempted
| | 01:24 | to skip that section.
| | 01:25 | I understand that temptation, but
let me suggest you complete it anyway.
| | 01:29 | I'll be going through SharePoint from a
different perspective than you may be used to.
| | 01:33 | I can pretty much guarantee you'll
see something new, or something will have
| | 01:36 | new meaning for you.
| | Collapse this transcript |
| Using a SharePoint virtual image| 00:00 | One of your first questions should be this:
| | 00:03 | What are you going to use
when learning how to do this?
| | 00:06 | What I'm fully expecting is that you
already have an existing SharePoint Server
| | 00:10 | installation to work with,
someone else has already installed.
| | 00:13 | You're just going to need perhaps a test
site or two that you can play around with.
| | 00:18 | But I'm expecting that right now,
you can open a browser and go to an
| | 00:22 | existing SharePoint site.
| | 00:23 | It might look like this, which
would be a Collaboration Portal.
| | 00:27 | It might look like this, which is a Team Site.
| | 00:30 | But you can open a browser, type in
the address of a SharePoint site you have
| | 00:35 | access to, and go there.
| | 00:36 | If you have that, great! But what if you
don't? Well, you need a SharePoint Server.
| | 00:43 | This is going to be a pretty pointless
course if you don't have one, because you
| | 00:46 | won't be able to create or
customize a SharePoint site.
| | 00:50 | Now, if you think you can just
quickly install SharePoint, you're
| | 00:53 | unfortunately mistaken.
| | 00:54 | This is a very complex product
you could ever dream of installing.
| | 00:58 | It requires a database.
| | 00:59 | It's usually integrated with IIS,
with DNS, with Active Directory.
| | 01:04 | It can't even be installed on a typical
client operating system like Windows XP
| | 01:09 | or Windows 7, which is what I'm using here.
| | 01:11 | It requires a Server Operating System,
Windows Server 2003 or Windows Server 2008.
| | 01:18 | I'm not going to go into SharePoint
installation at all in this course.
| | 01:22 | Installing SharePoint is a
completely separate thing all in itself.
| | 01:25 | Now what I'm often asked by designers
is if they can just get a quick offline
| | 01:30 | copy of the SharePoint site.
| | 01:32 | Unfortunately, there is no such
thing as having an offline copy of
| | 01:35 | the SharePoint site.
| | 01:36 | SharePoint doesn't work that
way, as we'll shortly explore.
| | 01:39 | Now, if you do need your own SharePoint
Server, a common method to do it is to
| | 01:44 | have a Virtual Server, a virtualized machine.
| | 01:46 | You can create one yourself
or you can use someone else's.
| | 01:50 | If I go out and search the Web for the
phrase 'SharePoint virtual image,' what
| | 01:56 | I'm going to find is this first link
here, which is actually a link on the
| | 02:00 | Microsoft site for a
preconfigured virtual hard drive.
| | 02:04 | This is actually a free download.
| | 02:06 | It's time bombed, so it'll run
out, I believe, it's 2011.
| | 02:10 | Now if I actually come down a little bit on
here, we see that this is a huge download.
| | 02:15 | It's multiple gigabytes that you can do.
| | 02:17 | But if you do need to have your own
copy of a SharePoint Server, you can
| | 02:21 | actually download this one, which
is preconfigured from Microsoft.
| | 02:25 | If you've never worked with virtual
server images, do be prepared to take some
| | 02:29 | time getting to grips with this.
| | 02:31 | But happy to see you back here, once
you've gotten a SharePoint site that you
| | 02:34 | can actually navigate to.
| | Collapse this transcript |
|
|
1. Getting to Know SharePointUsing SharePoint core components| 00:00 | A lot of people find it hard to wrap
their head around SharePoint, and you might
| | 00:04 | be one of those people.
| | 00:05 | Perhaps you've been playing with this
thing called SharePoint for a while, and
| | 00:08 | you don't really get it yet.
| | 00:10 | You're waiting for that one simple
description, that one simple sentence that
| | 00:14 | will suddenly make it all make sense.
| | 00:17 | Well, unfortunately, you won't
get that one sentence from me.
| | 00:21 | The reason that it's hard to have a
simple description is that SharePoint is not
| | 00:25 | a simple thing to explain.
| | 00:27 | The main reason for that is
that SharePoint isn't one thing.
| | 00:31 | SharePoint isn't a program. It's a platform.
| | 00:34 | It's 100 different products and
technologies, all wrapped up and given a name.
| | 00:39 | From one perspective, working with it
is a bit like learning the Microsoft
| | 00:42 | Office or Adobe Suites.
| | 00:45 | You can't really learn Office.
| | 00:47 | You can learn Word, and Excel, and
OneNote and so on, or with the Adobe Suites,
| | 00:52 | you don't really learn the Master Collection.
| | 00:55 | You'll learn Photoshop, then
After Effects and then Premiere.
| | 00:59 | You might buy Master
Collection and never use InDesign.
| | 01:03 | You might buy Office and never use Excel.
| | 01:05 | You're interested in your
own combination of solutions.
| | 01:09 | In the same way, you can't really
learn SharePoint, because SharePoint is a
| | 01:14 | massive, massive set of
features and technologies.
| | 01:19 | It's really grouped into six main areas.
| | 01:21 | You have a whole entry here about collaboration.
| | 01:24 | It's got office integration.
| | 01:26 | There is a way of creating Web sites
that allow people to work together.
| | 01:29 | You have business intelligence, being
able to analyze the numbers that you have
| | 01:33 | in your organization to
really understand your business.
| | 01:36 | You have business forms, integrating
the kind of things that you do every day:
| | 01:40 | expense forms, requisitions, and
making electronic versions of those.
| | 01:44 | You have a full enterprise
search engine inside SharePoint.
| | 01:48 | You have content management, not just
for Web sites, but for your own documents.
| | 01:52 | You have a portal idea, creating one
place where everyone can go for all their
| | 01:57 | company information.
| | 01:58 | This is what SharePoint is really made of.
| | 02:01 | You could spend years working on just
one little part of this part of SharePoint.
| | 02:07 | Now for us, we're in the enviable
position where that's kind of okay.
| | 02:11 | We really are interested in one
part of SharePoint, primarily the part
| | 02:15 | that makes Web sites.
| | 02:16 | We're also interested, in this course,
in the part that allows us to manage that
| | 02:21 | content, and work with navigation and audiences.
| | 02:25 | But it's worth always keeping in mind
that the sites we're going to develop are
| | 02:28 | just the tip of the SharePoint iceberg,
and that at some point, they may need to
| | 02:33 | integrate with the rest of SharePoint.
| | Collapse this transcript |
| Exploring the SharePoint product line| 00:01 | Before we talk about SharePoint
Designer, we have to talk about SharePoint.
| | 00:06 | That's a problem, because there
is no such thing as SharePoint.
| | 00:10 | You'll actually can't go and buy SharePoint.
| | 00:12 | It's just a useful phrase that describes
several different products and technologies.
| | 00:17 | So, what do you actually
install when you install SharePoint?
| | 00:20 | Well, there is a product called WSS
or Windows SharePoint Services 3.0.
| | 00:27 | This is actually free.
| | 00:29 | You can just download it from Microsoft
if you own a copy of Windows Server 2003
| | 00:33 | or Windows Server 2008.
| | 00:34 | You can think of WSS as
being the engine of SharePoint.
| | 00:40 | It's the foundation of SharePoint,
and what SharePoint provides.
| | 00:44 | It's really the core of the platform.
| | 00:46 | Now one of the things
WSS does is make Web sites.
| | 00:49 | It makes a special kind of Web site
called a collaboration Web site, and we're
| | 00:53 | going to be exploring that a little later.
| | 00:56 | But on top of WSS, you can get a
product called MOSS or Microsoft Office
| | 01:01 | SharePoint Server, MOSS 2007. This is not free.
| | 01:05 | It can range from
expensive to very expensive, indeed.
| | 01:09 | It gives you a whole great deal of
functionality on top of WSS, but what we're
| | 01:14 | looking at here is the
idea that MOSS includes WSS.
| | 01:17 | Everything you get in WSS is also in MOSS.
| | 01:22 | Now there is one more version of MOSS
called MOSS Enterprise Edition, which
| | 01:27 | actually adds more functionality
on top of the MOSS Standard Edition.
| | 01:31 | In this particular course, we don't
really care about any of that extra stuff.
| | 01:35 | So it's not too relevant.
| | 01:37 | One thing to understand, however,
about all of these products, is they are
| | 01:41 | installed on a server.
| | 01:42 | They're not installed on your Desktop.
| | 01:44 | They're installed on a server, or a
series of servers, and shared across hundreds,
| | 01:48 | or thousands, of people.
| | 01:50 | One of the questions you might have if
you're new to SharePoint is well, how do
| | 01:53 | you know which one you have? Do I have WSS?
| | 01:56 | Do I have MOSS?
| | 01:57 | Well, the easiest way is to
ask the people who installed it.
| | 02:00 | However, in this course, you'll soon
be able to recognize the difference,
| | 02:04 | because we're going to cover
customization of both WSS and MOSS sites.
| | Collapse this transcript |
| Understanding SharePoint and SharePoint Designer| 00:00 | So you have SharePoint, the
server product, and then you have
| | 00:04 | SharePoint Designer.
| | 00:06 | Now, SharePoint Designer is
installed on your desktop or your laptop.
| | 00:10 | It's like having a copy of
Word or Photoshop installed.
| | 00:12 | You're going to open SharePoint
Designer and use it to connect to a SharePoint
| | 00:17 | Server to do customization of a SharePoint site.
| | 00:19 | So, if you don't have it installed
already, here is the way to find it.
| | 00:23 | I'm just going to search for
SharePoint Designer 2007, and I want to be
| | 00:31 | very specific here.
| | 00:32 | I am using the 2007 version of the product.
| | 00:37 | When you search for this, you are
likely to find a link for SharePoint
| | 00:39 | Designer 2010 as well.
| | 00:42 | Now, unfortunately, you can't use
SharePoint Designer 2010 to customize
| | 00:46 | SharePoint Server 2007 Web sites.
| | 00:49 | The version numbers go along with
each other, so SharePoint Server 2007,
| | 00:53 | SharePoint Designer 2007.
| | 00:55 | Now, you can download this
product for free, as you'll see on the
| | 00:59 | Microsoft Office site.
| | 01:01 | It was made free in mid-2009 and
Microsoft has said that every subsequent
| | 01:06 | version will be free as well.
| | 01:08 | If you take a little look around the
Microsoft Office SharePoint Designer page,
| | 01:12 | you can find a lot of information about this.
| | 01:14 | And you'll find that SharePoint Designer
actually has come from the FrontPage
| | 01:18 | product, but don't let that put you off.
| | 01:19 | It's a pretty good tool.
| | 01:21 | It is very closely related to
Expression Web, Microsoft's Web design tool.
| | 01:25 | Now, one of the things I am often
asked is can I use another Web design tool
| | 01:30 | to affect SharePoint?
| | 01:31 | Can I use something like
Dreamweaver, for example?
| | 01:33 | Well, if you want to use those programs,
there are things you can do, but you'll
| | 01:37 | be making life hard for yourself.
| | 01:39 | SharePoint Designer is built to
understand SharePoint, and it is the simplest
| | 01:43 | way to do customization of SharePoint sites.
| | 01:46 | And certainly, the couple of hours
you'll spend learning it will be more than
| | 01:49 | safe than even a very simple customization.
| | 01:52 | And on the flip side of that, SharePoint
Designer itself is not really all that
| | 01:56 | useful without SharePoint.
| | 01:58 | Sure, there are a couple of things
that you can do, but there is no reason to
| | 02:01 | have SharePoint Designer if you don't
have a SharePoint Server you can connect to.
| | 02:04 | So, if you haven't already installed it,
now is the time to download and install
| | 02:09 | it from the Microsoft Office site.
| | 02:11 | It will then appear under your
Microsoft Office part of your programs.
| | Collapse this transcript |
| Understanding collaboration sites and portal sites| 00:00 | So you already know that SharePoint
generates Web sites, and you know you want
| | 00:04 | to change the way they look, but you
might not know is that SharePoint can make
| | 00:08 | very, very different kinds of Web sites,
and that you really need to know what
| | 00:12 | kind of SharePoint Web
site it is you need to change.
| | 00:15 | Not surprisingly, the primary
question here is whether you only have WSS, in
| | 00:21 | which you have one kind of site, or if
you have MOSS, which adds another kind.
| | 00:25 | Now, if you have just WSS, the Web
sites you can create can be categorized
| | 00:30 | as collaboration sites, like a team
site that I'm looking at here, or a
| | 00:34 | document workspace.
| | 00:36 | These sites are always about a few
people working together on something.
| | 00:40 | Most people who use these
sites are collaborators.
| | 00:43 | They get to change these
sites as well as use them.
| | 00:45 | They get to edit items and upload documents.
| | 00:48 | They are simple and quick to create,
and they're very simple to customize.
| | 00:52 | Now, you probably don't want to go
crazy customizing the visual appearance of
| | 00:56 | these collaboration sites.
| | 00:58 | The idea here is that people get very
used to working with them, and it might
| | 01:01 | be considered counterproductive to have them
substantially different from the base model.
| | 01:05 | Now, if you have MOSS, however, you of
course have those collaboration sites,
| | 01:09 | but you also have portal sites
targeted at a much wider audience, perhaps the
| | 01:15 | entire company, or even
out on the public Internet.
| | 01:18 | These sites tend to be bigger and need
much tighter control over the content.
| | 01:23 | Now, the idea with most of these sites
is that most people who use them don't
| | 01:28 | get to collaborate on them.
| | 01:29 | They are designed for publishing
information to a wide audience, and that's why
| | 01:34 | the main split between the kind of
sites you'll customize are between sites
| | 01:38 | targeted at collaboration and
sites targeted at publishing.
| | 01:43 | Publishing sites allow much more
control over navigation and allow different
| | 01:47 | kinds of pages to be
created based on your content.
| | 01:48 | Now just as I'm making the
assumption that you're probably going to be
| | 01:53 | working with MOSS, I'm making the
assumption that you'll need to do both
| | 01:56 | basic customization of WSS
collaboration sites and complex customization of
| | 02:03 | MOSS publishing sites.
| | Collapse this transcript |
| Introducing site collections| 00:00 | Here's another piece of
SharePoint jargon: Site Collections.
| | 00:04 | Site Collections can make your life easier.
| | 00:07 | They can let you work on your
designs without affecting others.
| | 00:10 | They can stop your life
becoming a constant stream of requests.
| | 00:13 | They can allow your designs to be
reused, and many people don't even really
| | 00:17 | know what they are.
| | 00:19 | The concept is actually not all that complex.
| | 00:21 | It simply means a collection of
SharePoint Web sites, because regardless of
| | 00:26 | whether you have WSS or MOSS, you're using
SharePoint as a Web site creation engine.
| | 00:32 | When SharePoint is used to make a Web site,
that site is always contained in a Site Collection.
| | 00:38 | Now, in a typical SharePoint
installation in a large organization, you can have,
| | 00:43 | and should have, multiple site collections.
| | 00:46 | Each Site Collection can contain one
site, or five site, or 1,000 sites. In fact,
| | 00:51 | the official limit is 250,000
sites in one Site Collection.
| | 00:55 | These are created for a variety of reasons,
| | 00:58 | many technical, things like security,
scalability, administration, but in
| | 01:02 | essence they are created when a
group of SharePoint sites belong together,
| | 01:07 | because they all belong to the same
department or location or they're being
| | 01:10 | used for similar tasks.
| | 01:11 | I'm a fan of kind of liberal use of
Site Collections, but at this point, you
| | 01:16 | might be thinking: what's in it for you?
| | 01:18 | Well, when doing visual customization,
you need to know that assets in one Site
| | 01:23 | Collection aren't available in another
Site Collection unless you copy them.
| | 01:28 | So, things like images, resources,
stylesheets actually belong inside each Site
| | 01:34 | Collection, and if you need them to
cross Site Collections, you'll have to take
| | 01:37 | care of copying them yourself.
| | 01:39 | Now, one thing you may be
wondering is, okay, how do I make one?
| | 01:43 | How do I get one of these Site Collections?
| | 01:45 | Well, they are actually created in
a special Web site called SharePoint
| | 01:49 | Central Administration.
| | 01:51 | This is a site that you
can use to manage SharePoint.
| | 01:54 | And Site Collection isn't
abstract hand-wavy term.
| | 01:57 | You can actually create a Site Collection.
There's options in SharePoint Central Admin to do this.
| | 02:03 | We're not getting into this site in
this particular course, but if you are
| | 02:07 | wondering how you make one, you do
typically need access to this site, and that's usually
| | 02:11 | limited, but you do need to know what
it is because you may need to ask for a
| | 02:16 | Site Collection, because one thing
they are very good for, you can create a
| | 02:20 | sandbox for you to do your
experimentation in, because it is detached from every
| | 02:26 | other SharePoint Site Collection.
| | 02:27 | And if you want to go crazy
experimental on your own site design, having your
| | 02:31 | own Site Collection can be very
useful, because you can wreck it without
| | 02:35 | affecting anybody else's.
| | 02:37 | Now, at the very least, you need to
understand the idea of SharePoint Site
| | 02:41 | Collections, as they're going to impact
how you'll deploy your customizations.
| | Collapse this transcript |
| Introducing WCM and the Publishing feature | 00:01 | If you have MOSS, one of the pieces of
functionality you have that's not in WSS
| | 00:06 | is something called the Publishing
feature, and this is also referred to as Web
| | 00:10 | Content Management, or WCM.
| | 00:13 | But what does this all mean?
| | 00:15 | Content Management is rather vague as a
phrase, and Publishing is a word used all
| | 00:20 | over the place in SharePoint.
| | 00:22 | There is something
called the Publishing feature.
| | 00:24 | There is something called the Publishing portal.
| | 00:26 | There is something called the Publishing site.
| | 00:29 | Let's face it. That doesn't really tell you
what Publishing actually means in SharePoint.
| | 00:34 | To understand it, let's step back
a bit - super-quick history lesson.
| | 00:38 | Go back a few years
| | 00:40 | and there is a product called
Microsoft Content Management Server.
| | 00:44 | This was the Microsoft technology people
used to manage large-scale, complex Web sites.
| | 00:49 | If you wanted to have a bunch of
content creators and moderators, templates and
| | 00:54 | workflow, this was the product that you chose.
| | 00:57 | Now, what happened was when MOSS 2007
came along, Microsoft Content Management
| | 01:02 | Server was rolled into it
as the Publishing feature.
| | 01:07 | Now, when we talk about features of a
product, we usually just mean something
| | 01:11 | the product does, but in SharePoint,
features mean something special.
| | 01:16 | There is something called a
SharePoint Feature, and it's a chunk of
| | 01:19 | functionality that can be turned
on or off at the flick of a switch.
| | 01:23 | There are several places in SharePoint
where you may have a series of buttons to
| | 01:27 | activate or deactivate features.
| | 01:29 | Now, what happens is Publishing is one of
those features that can be turned on or off.
| | 01:35 | If you turn it on, the first, most
obvious visual difference is the dropdown menu
| | 01:40 | has many new options.
| | 01:41 | If Publishing is off, you typically
only have two or three options here.
| | 01:46 | But behind the scenes,
there is a lot more going on.
| | 01:49 | The Publishing feature adds workflow
and versioning, and the idea of having
| | 01:54 | multiple layout templates for your site,
and it adds multiple libraries to the
| | 01:58 | Site Collection and for a designer,
that's great, because it gives you places to
| | 02:03 | put your stylesheets and your images
and resources to share across multiple
| | 02:08 | sites in a Site Collection.
| | 02:10 | Now, in SharePoint, some sites have this
feature enabled by default, and if you
| | 02:15 | see the big menu, you know it's one of those.
| | 02:17 | Again, you'll often hear a site with
the Publishing feature turned on as using
| | 02:21 | WCM, or Web content management.
| | 02:24 | It's the same thing.
| | 02:26 | And essentially, the main difference
you're likely to be concerned about when
| | 02:30 | customizing SharePoint sites is not whether
you're customizing a WSS site or a MOSS site;
| | 02:36 | it's whether you're customizing a site
with the Publishing feature or a site
| | 02:40 | without the Publishing feature.
| | Collapse this transcript |
|
|
2. Working with SharePointExploring a basic SharePoint site| 00:01 | So I expect that you've already
made your way around a few SharePoint sites, but
| | 00:04 | in this lesson, I'm going to show you
how to look at one from a designer's
| | 00:07 | perspective - what are the things you
should be paying attention to? Because
| | 00:11 | there are some parts that will be
easy for you to change and some that
| | 00:14 | won't. Now, as a designer, you're
probably a little annoyed that most of the
| | 00:17 | SharePoint sites that you see kind of
look the same, but really that's a blessing.
| | 00:22 | Once should know how to work with one,
| | 00:23 | you know how to work with the others.
| | 00:25 | So I'm going to show you two
very typical SharePoint sites.
| | 00:28 | Neither have been customized, and they are as
they'd appeared immediately after creation.
| | 00:32 | What I'm looking at right now is a Team
Site, available in WSS and by definition
| | 00:39 | also available in MOSS, one of the
classic built-in collaboration sites.
| | 00:44 | This is a Web site that gives you
this homepage that we're looking at.
| | 00:48 | It gives you a place to put
Documents, called Shared Documents.
| | 00:52 | It gives you a Calendar.
| | 00:54 | It gives you a List of Tasks.
| | 00:56 | There's also a Discussion Board.
| | 00:58 | Now, if you're clicking around a Team
Site and you don't see this menu over
| | 01:05 | here on the top right, the Site Actions
menu, the Power menu here, you're going
| | 01:09 | to be unable to do anything
significant with customization, because that's
| | 01:13 | where we get to create new parts of
the site and change the Settings of the
| | 01:16 | site. But although we're looking here at
a Team Site, this site really could be
| | 01:22 | a Document Workspace.
| | 01:24 | It could be a Blog Site.
| | 01:25 | It could be a Blank Site.
| | 01:27 | It could be any Classic WSS Collaboration Site.
| | 01:31 | They all share a lot of the same features.
| | 01:33 | For example, they have got a section
down the left-hand side, which is often
| | 01:38 | referred to as the Quick Launch bar,
and there's no particular magic about
| | 01:43 | that name. In older versions of
SharePoint, there used to be a graphic along
| | 01:47 | the side of it that said Quick Launch, and
that's why it's still called the Quick Launch bar.
| | 01:52 | We also have the Top Link bar, which not
surprisingly, is across the top of the page.
| | 01:58 | Now right now, there isn't
a lot on my Top Link bar.
| | 02:00 | You would normally see several tabs
here representing links to different sites.
| | 02:06 | So the Top Link bar on the top,
the Quick Launch bar on the left.
| | 02:09 | They're both navigation.
| | 02:11 | And navigation in SharePoint is
flexible, just like being on a regular
| | 02:15 | Website out there on the Web, the
Navigation doesn't have to tell you
| | 02:19 | everything that exists.
| | 02:21 | As a general rule, what you'll find
is the top-level navigation takes you
| | 02:25 | between different SharePoint sites, and
the Navigation on the left, in the Quick
| | 02:29 | Launch bar, shows you what's in this
particular site that you're looking at.
| | 02:33 | But there's one key link here, if you
really want to know what exists in a
| | 02:38 | particular site, you're going to
click the link that says View All Site
| | 02:42 | Content, at the top of the navigation bar.
| | 02:45 | This will actually tell you,
better than anything, what exists in
| | 02:48 | this particular site.
| | 02:51 | You'll find this link, this View
all Site Content Page, on every single
| | 02:57 | SharePoint site that exists.
| | 02:58 | Sometimes you may have to click
around to find it. Sometimes it won't be
| | 03:02 | there on the left, but it will exist,
for every SharePoint site in your
| | 03:06 | SharePoint Installation.
| | 03:07 | Now I'm going to come down a little
bit in this All Site Content and actually
| | 03:12 | see that there's a section down here
that says Sites and Workspaces, and what
| | 03:16 | this really means is are there any
other SharePoint sites underneath this one?
| | 03:20 | Now sometimes, if there was, you'd
actually see a Link to it on the Top Link bar.
| | 03:25 | We didn't have one, but I'm actually
saying that there is one called Annual
| | 03:29 | Report and if I click on that, I'm
being taken to another SharePoint site.
| | 03:33 | This is actually called a Document
Workspace, and you might say well, is it a
| | 03:37 | workspace, or is it a site?
| | 03:38 | Well, a workspace is a site.
| | 03:41 | Microsoft decided to call some of their
SharePoint Site Templates Workspaces,
| | 03:46 | if the idea was that they wouldn't
necessarily live for all that long.
| | 03:51 | So if you are creating a site to
work on a Document or site to work on a
| | 03:54 | meeting, those are called Document
Workspaces and Meeting Workspaces.
| | 03:59 | But there's really no difference
between them and other SharePoint sites.
| | 04:04 | Well, also notice here is that we
have got a bit of a breadcrumb going on.
| | 04:09 | Now these breadcrumbs are basically
telling us what exists in this Site Collection.
| | 04:13 | In fact, as we get more into navigation,
and you'll see that the breadcrumbs
| | 04:17 | can look very different, but this is trying
to tell me where am I and what's above me?
| | 04:22 | In this case, that Team Site is above
me. I'm currently in the Annual Report.
| | 04:26 | Breadcrumbs, very much like anything
else out there on the Web, can be very
| | 04:30 | useful, but you have to know
how they work in SharePoint.
| | 04:33 | Now what I'm going to jump into now is a
slightly more complex SharePoint Web site.
| | 04:38 | This one is a Collaboration Portal.
| | 04:40 | This is only available in MOSS and has
the Publishing Feature activated, which I
| | 04:45 | can tell just by coming over here to
the menu and seeing that I've got multiple
| | 04:50 | Options and not just two or three.
| | 04:53 | But even though there are a whole bunch
of options over here, if I come over to
| | 04:57 | the Quick Launch bar on the left, I
see that I've still got a View All Site
| | 05:02 | Content link, that if I click that, it
can actually tell me all the lists and
| | 05:06 | libraries that exist inside this site,
so we can see the regardless of if we
| | 05:11 | have WSS or MOSS, we're still having
the same kind of structure, the same
| | 05:16 | building blocks of SharePoint that exist.
| | 05:18 | Now I am not trying to make you an
expert on using these sites. What I'm trying
| | 05:23 | to show you is that regardless of
whether it's a classic WSS Collaboration Web
| | 05:27 | site or a MOSS Publishing Website,
their internal structure is similar.
| | 05:32 | All SharePoint Web sites are made of a
collection of lists and libraries, and
| | 05:37 | what you see in the View All Site Content
page is really telling what the Site is made of.
| | 05:42 | And that's the key thought
when customizing SharePoint sites,
| | 05:45 | to be able to change how they look,
you need to understand what they are and
| | 05:49 | in the next module, we're actually
going to talk about the Building Blocks of
| | 05:52 | all SharePoint Sites.
| | Collapse this transcript |
| Understanding lists and libraries in SharePoint| 00:00 | When you've seen a few of the most
common SharePoint sites, you've probably
| | 00:04 | realized that many of them
seem to reuse the same components:
| | 00:08 | things like Calendars,
Document Libraries and the Task List.
| | 00:12 | And that's because SharePoint sites
are really created almost like a bunch of
| | 00:16 | interchangeable wooden blocks.
| | 00:17 | If the Red ones are Document Libraries
and the Green ones are Calendars, and if
| | 00:22 | the Yellow ones are Task Lists, then if
I decide to try and arrange these blocks
| | 00:27 | in one way, I will end up with the Team Site.
| | 00:31 | If I decide to arrange these blocks in a
different way, I'm going to end up with
| | 00:36 | a Document Workspace, or a
Meeting Workspace, or a Training Portal.
| | 00:43 | Once you learn the available List and
Libraries, you can make some very powerful
| | 00:47 | sites, as easy as putting a few blocks together.
| | 00:49 | In a basic SharePoint site, you
select the building blocks, the List and
| | 00:52 | Libraries, and the Website, and
it's Pages are generated around these
| | 00:57 | building blocks, but what this means,
as a designer, is that you don't have
| | 01:00 | as much control over individual pages as you
might first think, because many are generated.
| | 01:06 | Now adding List and Libraries
is all done through the browser.
| | 01:09 | I add a Task List to a site and
SharePoint will generate the page to actually
| | 01:14 | add a new entry to that list.
| | 01:16 | It'll generate the page to view that list.
| | 01:18 | It will generate the page to edit
settings of that list, all done automatically.
| | 01:23 | If I, instead, add a Document Library,
SharePoint will generate the page to view
| | 01:27 | that library, to upload a new Font
to the library, to edit the library
| | 01:31 | settings and so on.
| | 01:33 | Now if you're new to SharePoint, and you're
wondering, I hear about Lists and Libraries.
| | 01:37 | Is there a big difference between a
List and a Library? The answer is no.
| | 01:41 | There isn't.
| | 01:41 | Everything in SharePoint is a List.
| | 01:44 | Everything in SharePoint is a List.
| | 01:46 | A Library is just a List of Documents,
or a List of Images, or List of Web pages.
| | 01:52 | Now, if you're wondering, can I just
ignore this, can I just ignore all this
| | 01:56 | stuff and just create a
Web page using SharePoint?
| | 01:59 | Well yes, but even then, you're
still using Lists and Libraries.
| | 02:03 | If you use the screen to add a page to
a basic SharePoint site, the first thing
| | 02:08 | SharePoint will ask is what Library
does this go in. Now the built-in Site
| | 02:13 | Templates are really nothing more than
a pre-written arrangement of Lists and
| | 02:17 | Libraries, and there is a
real great benefit from this.
| | 02:20 | You don't have to worry about how to work
with all the different SharePoint sites.
| | 02:24 | You just have to know how
to work with SharePoint.
| | Collapse this transcript |
| Exploring automatic navigation| 00:01 | Every site created by SharePoint has
Navigation, whether it's a Collaboration
| | 00:05 | Site or a Publishing Site.
| | 00:07 | SharePoint attempts to generate useful
Navigation itself, but sometimes you'll
| | 00:11 | need to change, or extend,
what SharePoint has done.
| | 00:15 | And the Navigation that you'll see
is usually along the top and down
| | 00:18 | the left-hand side.
| | 00:20 | The Navigation along the top is
typically referred to as the Top Link bar, and
| | 00:23 | the Navigation down the left-hand
side is not referred to as the Left-hand
| | 00:27 | Sidebar, but as the Quick Launch bar,
and there is nothing remarkable that makes
| | 00:32 | it called Quick Launch bar.
| | 00:33 | It's just that in
previous versions of SharePoint,
| | 00:36 | it actually used to have a graphic that said
the words, Quick Launch, running up and down.
| | 00:42 | So what are we looking at? Well, with
the Top Link bar, by default, what you see
| | 00:46 | is a Home tab, linking to the top-
level site in the site collection and other
| | 00:52 | tabs representing first level subsets,
meaning sites created directly beneath
| | 00:58 | the top-level sites, but not
any further down than that.
| | 01:02 | This Top Link bar can be shared across
multiple sites in the Site Collection.
| | 01:06 | On the left-hand side, in the Quick
Launch bar, you'll see the contents of this
| | 01:10 | particular site, things like Lists and
Libraries and again, any subsites here.
| | 01:17 | However, none of these authoritative,
they can't be trusted as a description of
| | 01:21 | what actually exists.
| | 01:23 | If I'm looking at a Portal, I might
have six sites existing here, but there
| | 01:28 | could be more, and I wouldn't necessarily know.
| | 01:30 | If I'm looking at the Quick Launch
bar, there may be more things going on
| | 01:33 | than I'm seeing here.
| | 01:35 | Navigation in SharePoint is
like Navigation on any Web site.
| | 01:38 | It's useful, but it's not authoritative.
| | 01:41 | If you really want to understand what a
SharePoint site is made of, you need to
| | 01:45 | go to it's View All Site Content window,
which will take you through the Lists
| | 01:50 | and the Libraries that make up this site.
| | 01:53 | Changing Navigation is different whether
you're in WSS or in a MOSS Publishing Site.
| | 01:59 | They're both done through the Site
Settings Window, so if I'm in a WSS site, I
| | 02:03 | go to my Site Actions, Site Settings
and I have links for both the Top Link bar
| | 02:09 | and the Quick Launch bar.
| | 02:11 | In the Top Link bar, you'll see
examples of what sites are added right now.
| | 02:15 | You can change links yourself,
and this is what I mean by it not
| | 02:18 | being authoritative. You can change it.
| | 02:20 | You can add your own links.
| | 02:21 | You can delete links.
| | 02:23 | Changing Navigation in a WSS site is a
very manual process, if you don't want to
| | 02:28 | accept what SharePoint offers.
| | 02:29 | When you're working with a MOSS
Publishing Site, you also get to this through
| | 02:34 | the Site Settings > Modify All Site
Settings Window, but instead of having Quick
| | 02:39 | Launch and Top Link bar, you
have one Link called Navigation
| | 02:42 | that gives you a slightly different window.
| | 02:44 | Now we're going to cover a lot about
Manipulating Navigation toward the end
| | 02:49 | of the course, but knowing the basics
of the Navigation that's automatically
| | 02:52 | added by SharePoint, we can move
forward without either the Top bar or the
| | 02:56 | Left bar surprising us.
| | Collapse this transcript |
| Understanding the SharePoint content database| 00:01 | If your background includes
conventional Web Design and Development, at some
| | 00:04 | point, you're probably going to
ask, okay where are my Web pages?
| | 00:08 | And you may even go looking on the Web
server machine to try and find something.
| | 00:12 | You'll be looking for a folder
structure with folders and subfolders, places to
| | 00:17 | put images and styles and Web pages.
| | 00:19 | You're never going to find this
on the SharePoint Web Server.
| | 00:23 | That's because everything in a
SharePoint site is stored in a database called a
| | 00:28 | Content Database and those files that
you might expect to find, even if you
| | 00:34 | could get access to that machine,
you'll never find those Files because they're
| | 00:38 | existing inside a database.
| | 00:40 | SharePoint can't even run without a
database to store its content in.
| | 00:45 | When you create a Site, or Page, or a List
or Library, or you upload a Document, or
| | 00:50 | an Image, it may feel like you're
creating a File on the Web server, but you're
| | 00:54 | really making an entry in a SQL Server Database.
| | 00:58 | Now really, what actually happens is
SharePoint is built on two databases: a
| | 01:04 | Configuration, or Config
Database and a Content database.
| | 01:08 | What's stored in the Configuration
Database is a list of what sites exist, what
| | 01:13 | are they called, who can use them - all
that configuration information, and then
| | 01:18 | in the Content Database, is all your stuff:
| | 01:21 | your Pages, your Documents, your Images.
| | 01:24 | If you're worried that you need to
become a database expert, we'll you don't.
| | 01:28 | You never need to open the database
directly, and in fact, even if you could, you
| | 01:32 | shouldn't. You're going to be
effectively interacting with the databases either
| | 01:36 | through the browser or
through SharePoint Designer.
| | 01:39 | However, that doesn't mean you can ignore
the fact that everything is in the database.
| | 01:44 | As your SharePoint Sites start to grow,
you'll understand that your Content
| | 01:49 | Database starts to grow and in fact,
in larger SharePoint installations,
| | 01:53 | it's very, very common that you
won't just have one Content Database.
| | 01:56 | You'll have two, or three, or four, or five, or 10.
| | 02:01 | You'll always just have one
Configuration Database, because there needs to be
| | 02:05 | one place to go to say, okay does
this Site exist? Does this Webpage exist?
| | 02:11 | What's it called? And then all the
stuff can be stored in different databases,
| | 02:15 | even on completely different machines.
| | 02:17 | But as a designer, you need to
understand the impacts of things like this,
| | 02:21 | because you don't ever, for example, need
to FTP your Pages up to the SharePoint Box.
| | 02:27 | It doesn't work that way.
| | 02:28 | SharePoint doesn't have a File
structure for you to put your stuff. It's
| | 02:31 | going in the database.
| | 02:33 | So consequently, you can't just shift
Files around on the Web Server to make
| | 02:37 | them more or less accessible.
| | 02:38 | It doesn't really work that way.
| | 02:40 | However, in this course, the reason
why we are really interested is one is
| | 02:43 | this role of SharePoint Designer or
when this program is installed on your
| | 02:49 | machine, what it can do is act as a
middleman, as a go-between, between the
| | 02:54 | database, the Config and Content
Databases, and being able to read those
| | 02:58 | databases and present the details to
you as if these files and folders existed
| | 03:04 | on the Web server, and one of the
primary benefits is that it understands the
| | 03:08 | SharePoint Content Database and can
show its content to us in a way that
| | 03:13 | makes sense as Web designers.
| | Collapse this transcript |
| Creating a new site in SharePoint| 00:01 | I made my first Web site in 1995,
and I have been a Web guy ever since.
| | 00:05 | Now as Web developers, we tend to get
very attached to the Web sites that we make.
| | 00:09 | We view them, hopefully, as impeccably
crafted pieces of genius, that we've
| | 00:14 | shed blood, sweat and tears over, little
unique things that are very valuable in themselves.
| | 00:20 | SharePoint has, shall we say, a bit more
of a production line mentality to the
| | 00:25 | idea of creating Web sites.
| | 00:27 | It's very much a work-a-day, boring tasks.
| | 00:31 | These are casual, almost throw-away things.
| | 00:34 | You can make one. Use it. Delete it.
| | 00:36 | Make another one. Use it. Delete it;
a very repeatable task that, as a Web
| | 00:42 | designer, is kind of a new mindset to get into.
| | 00:45 | But it's a useful thing when it comes to
customizing them, the idea that you can
| | 00:50 | quickly create a Web site,
work with it, delete it.
| | 00:53 | SharePoint very much has the
idea of this rubber stamp thing.
| | 00:57 | We can just repeat this again and
again and again and again, based on one
| | 01:02 | template for a Web site.
| | 01:03 | Now remember that when you create a
SharePoint site, that site must be inside
| | 01:08 | a Site Collection.
| | 01:09 | There is no such thing as a SharePoint
site that's not in a Site Collection.
| | 01:13 | If it was the first site created, when
that Site Collection was made it would be
| | 01:18 | what's called a Top-Level site.
| | 01:20 | If it's been created after that Top-
Level Site, it's referred to as a subsite.
| | 01:25 | Now there is no inherent difference about
whether it's the Top-Level or beneath it.
| | 01:31 | All SharePoint sites really
are created the same kind of way.
| | 01:35 | But the important thing is to know where
you are when you create a SharePoint site.
| | 01:41 | If you have your Farm Administrator
create a new Site Collection, the first
| | 01:46 | thing he is going to ask is what's
the site at the Top-Level of the Site
| | 01:50 | Collection, because you have to have one.
| | 01:52 | Beyond that point, you can
create sites underneath it.
| | 01:55 | And I'm going to go ahead and do that.
| | 01:58 | So right now I'm looking
at an existing Team Site.
| | 02:01 | This is actually a Top-Level Site
of a Site Collection, and there's no
| | 02:05 | other sites underneath it.
| | 02:07 | And what I'm going to do
is use my Site Actions menu,
| | 02:11 | Come down and click Create. I'm going to
say this is where you add a new list,
| | 02:15 | library, or discussion
board, or survey page, or site.
| | 02:19 | Site almost seems to be pushed to the
background here, as if it is unimportant.
| | 02:23 | And in fact, it's the last option of the
last column here, is the idea of adding
| | 02:28 | a site or workspace to this particular site.
| | 02:32 | So we are in the Team Site right
now. I'm going to click this option.
| | 02:35 | And it's going to say okay
create a new SharePoint site.
| | 02:37 | What do you want to call it?
| | 02:38 | Again, this should be something that you
almost get used to creating as a work a
| | 02:42 | day, very repeatable task.
| | 02:45 | So in here I could just say this is Demo.
| | 02:47 | And I give it a Title.
| | 02:48 | The Title can be changed later.
| | 02:49 | The important thing is what comes next.
| | 02:51 | You don't have to give it a
description, but you do have to give it a URL.
| | 02:56 | And really, the URL that it's selecting
here is going to be what's the address
| | 03:01 | of the parent site?
| | 03:03 | In our case, it was the Team Site that
existed at ldcsharepoint.com/sites/team.
| | 03:10 | We will be underneath that.
| | 03:12 | And SharePoint is going to enforce that URL.
| | 03:15 | We can then call it anything underneath that.
| | 03:17 | Again, I could say Demo.
| | 03:19 | That'll be the address of this site.
| | 03:21 | And then it will ask, what is the site template?
| | 03:25 | What, of the predefined sites
that exist, do we want to use?
| | 03:29 | Do we want to make a Team Site, or a Blank Site,
or a Document Workspace, or a Wiki Site, or a Blog.
| | 03:35 | These are all previewed over
on the left when you select one.
| | 03:39 | The other temps have other SharePoint sites.
| | 03:41 | Again, in this particular course, we
are not really going through what all
| | 03:45 | of these exactly are, what they mean.
| | 03:46 | In fact, I'm going to create the
simplest kind here, which is a Blank Site.
| | 03:51 | Going down a little further, the couple
of things it's going to ask are, what
| | 03:55 | permissions do you want to use?
| | 03:57 | Well I'm going to leave the default, use
the same permissions as the parent site.
| | 04:01 | So if I could see the
parent, I will see the child.
| | 04:03 | If I am a reader of the parent, I'll
be a reader of the child or subsite.
| | 04:07 | If I was a contributor of the parent site,
I'll be a contributor on the subsite and so on.
| | 04:12 | And then there's a few Navigation options.
| | 04:14 | Do you want to display this site on
the Quick Launch bar of the parent site?
| | 04:18 | And it has giving me a little
highlight, that it's the left-hand side.
| | 04:21 | Yeah. Sure. I'll accept the defaults here,
but I'll display it on the top link bar.
| | 04:26 | And that this site will use the
top link bar from the parent site.
| | 04:29 | So accepting all of those, so really all
I did was give this thing a Title and a
| | 04:34 | URL, and select a Blank Site
template. I can hit Create.
| | 04:38 | I can either use the Create
button at the top or the bottom.
| | 04:41 | It'll do the same thing.
| | 04:43 | We have now a Blank SharePoint Site.
| | 04:46 | Because it was created with a parent site
in the Site Collection, we have a Home Site.
| | 04:52 | I can switch between the two.
| | 04:53 | It may not look drastically different.
| | 04:55 | This is one of the reasons we are
learning how to style these SharePoint Sites
| | 04:59 | because they are all going to start
off with the basic SharePoint blue.
| | 05:02 | But this is now a subsite called
Demo underneath our Team Site on the
| | 05:07 | Home location here.
| | 05:08 | Now if you haven't already explored
these options, I suggest that you get that
| | 05:13 | ability and create a few sites.
| | 05:16 | Create them, mess around with them,
delete them, get used to that kind of
| | 05:20 | procedure of creating and
manipulating Web sites in SharePoint.
| | 05:24 | Of course, being careful if you're
deleting them, but allowing yourself to
| | 05:27 | be able to do that.
| | 05:27 | Now yes, while SharePoint is more
casual about creation and deletion of Web
| | 05:33 | sites than we might be used to, it is
worth bearing in mind that the sites that
| | 05:37 | we are going to be customizing are
likely to be that ones that will hang around
| | 05:41 | the longest.
| | Collapse this transcript |
|
|
3. Permissions in SharePointIntroducing permissions| 00:00 | SharePoint cares about permissions.
| | 00:03 | It's very, very picky.
| | 00:04 | When you use a SharePoint Site, at
every step of the way, it wants to know who
| | 00:09 | you are and what you are allowed to do.
| | 00:11 | What that means as a designer is that
you have to have very specific permissions
| | 00:15 | in order to make the changes you need.
| | 00:17 | If you only have permission to read a
particular SharePoint Site, you're not
| | 00:21 | going to be able to change
its look or its navigation,
| | 00:23 | and certainly not be able to create a
whole new Layout. Here is the deal.
| | 00:28 | Every new site collection gets created with
three groups: visitors, members and owners.
| | 00:33 | You can change this and create
new groups, but this is the default.
| | 00:37 | And if you aren't in any of those
groups, you don't even get to see the sites in
| | 00:41 | that site collection.
| | 00:43 | Let's start off with the Visitors group.
| | 00:45 | If you are in the Visitors group,
you have a permission called Read.
| | 00:49 | And as that sounds, you
just get to read the site.
| | 00:52 | You don't get to change anything.
| | 00:54 | You don't get to create new sites.
| | 00:55 | And you certainly don't get to
affect the look and feel of the site.
| | 00:58 | Above that is a group called Members.
| | 01:01 | And if you're in the Members group, you
have a security privilege called Contribute.
| | 01:05 | That means you can edit
and delete items on the site.
| | 01:08 | You can upload documents.
| | 01:10 | You can create pages, but still you can't
really change anything about how the site looks.
| | 01:15 | You are contributor, but you
are not in charge of it in any way.
| | 01:19 | Above the member security group is the
third group, the most powerful one, the
| | 01:24 | Owners group, where you have full control.
| | 01:28 | Full control really means
that you get to make new sites.
| | 01:32 | You get to change the way the
site looks and that way it feels.
| | 01:34 | You get to change things.
| | 01:36 | You get to do a lot with the site.
| | 01:39 | However, one of the problems with the
Owners group as in the lot of locations,
| | 01:43 | you don't get to be in that group.
| | 01:44 | They are very restrictive about the
amount of people that are in the Owners group.
| | 01:49 | Now above this, there is also a
Site Collection Administrator.
| | 01:53 | And this person effectively has full
control over every site in a site collection,
| | 01:57 | and can do things like activating
features, change the site collection settings.
| | 02:01 | There is one more higher God-
like permission called a Farm Admin.
| | 02:06 | This person can create and
delete entire site collections.
| | 02:09 | But we don't need anything
like that to do with this course.
| | 02:12 | Here is the issue. For a designer,
being in this Members group is not enough.
| | 02:18 | To affect a design, you need to
either have full control, or if you have
| | 02:23 | Publishing activated, you can be in a new
group called Designers group, which has
| | 02:28 | a privilege called Design Privilege.
| | 02:30 | What does that mean?
| | 02:31 | Well, design privilege is somewhere
between contributor and full control.
| | 02:36 | You don't quite have as much as full
control, but you have more than contributor.
| | 02:39 | You can rearrange Web parts.
| | 02:41 | You can change the theme.
| | 02:42 | You can change the look and feel.
| | 02:44 | You just can't create a new subsite.
| | 02:47 | The thing is your Designers group is
actually a part of several new groups that
| | 02:51 | are added when you turn
on that Publishing feature.
| | 02:55 | And those can come in very, very handy
for particularly the role that you're
| | 02:58 | looking for in the course.
| | 03:00 | So you will need pretty high permissions.
| | 03:02 | And you may need very high permissions.
| | 03:04 | If part of your job is going to be
creating the site itself, and activating
| | 03:08 | features, you may even need to be
a Site Collection Administrator.
| | 03:12 | But if you're just working with the
design of an existing site, you should be
| | 03:15 | able to get by with just the designer privilege.
| | Collapse this transcript |
| Discovering what permissions you have on an existing site| 00:01 | Here is how to figure out what
permissions you have on an existing site, if
| | 00:04 | you don't know already.
| | 00:06 | What you'll find is that there are
some clues that can quickly tell you what
| | 00:10 | permissions you have.
| | 00:11 | Now let's breeze past that one.
| | 00:12 | I am assuming that you can
browse to the site already.
| | 00:15 | If you get an Access Denied message like
this, well there is your first problem.
| | 00:19 | You are going to find who sent you the
original invitation, or who owns the site,
| | 00:23 | and get them to give you access to it.
| | 00:25 | But let's say you can, at least, get to the site.
| | 00:29 | So step 2, is do you see the Site
Actions menu on the upper right-hand side?
| | 00:36 | Now if you don't see it, meaning
if it's just a white space here,
| | 00:40 | you don't see that blue, could
be a different color for you,
| | 00:42 | you don't see that dropdown menu,
| | 00:44 | what that means is you don't have
permissions on that site to do anything
| | 00:48 | substantial with it.
| | 00:49 | You might be a contributor to that site,
which means you can edit Lists and Library items.
| | 00:54 | But without that menu, you won't even be
able to move Web parts around or change
| | 00:58 | a theme, and that's probably not
going to be enough for you as a designer.
| | 01:02 | Now, if you can select that menu,
| | 01:05 | and you might either see three options if
you're in WSS, or several more, if you are in MOSS.
| | 01:10 | I am going to come down to Site Settings.
| | 01:14 | And just to show you if was on a
MOSS Publishing Site, click Portal,
| | 01:19 | I would instead see Site Settings
and then Modify All Site Settings.
| | 01:23 | But it's taking me to the same kind of place.
| | 01:25 | But can you get to the Site Settings page?
| | 01:30 | If you can, you at least
have some level of power.
| | 01:34 | And when you are on the Site
Settings page, do you see a column called
| | 01:39 | Site Administration?
| | 01:40 | And if you do, then you are a Site
Administrator. That's a good thing.
| | 01:44 | If you don't, it means that you might
only have designer privileges, which
| | 01:48 | is okay but not great.
| | 01:51 | So once I'm in the Site Settings screen,
the area that I'm interested in to kind
| | 01:56 | of tell me what I've got is
this right-hand side of things.
| | 01:59 | If I see a column called Site
Administration, that's a good thing.
| | 02:03 | If I see a column called Site
Collection Administration, that's even better.
| | 02:08 | Now it's really telling me, do I own
or administer this site, which is good.
| | 02:12 | And do I own or administer the whole
Site Collection, which is even better.
| | 02:16 | If I don't see either of these two columns,
then the most I'm likely to be is a designer,
| | 02:22 | which means I can do things like move
Web parts around, but I can't really
| | 02:26 | affect the entire site or the Site Collection.
| | 02:30 | Now if your Farm Administrators do a
lot of custom permissions, you may have
| | 02:33 | something that's little weirder.
| | 02:35 | But the ones I'm describing are the most common.
| | 02:38 | It's very common that the Farm
Administrators don't actually know the
| | 02:41 | permissions that you will
need in order to do your job.
| | 02:44 | And most of them will
default to being too restrictive.
| | 02:47 | So you may have to educate them
on upping those permissions a bit.
| | 02:50 | But your first key question is that
Site Actions menu up at the top right.
| | 02:56 | If you don't even see that, you won't
have enough privileges to do what you need
| | 03:00 | to do with SharePoint.
| | Collapse this transcript |
| Getting upgraded permissions | 00:01 | If your permissions are not enough,
you need to know what to ask for.
| | 00:04 | Now you do need to have at least the
designer permission in a SharePoint site to
| | 00:08 | do anything significant
with visual customization.
| | 00:11 | Again, that first clue is do you have
the Site Actions menu on the upper-right,
| | 00:16 | because you'll need that to do even
the most basic customization of that site
| | 00:20 | with the SharePoint.
| | 00:21 | Now essentially, what you need to find
is the person with one level higher than
| | 00:28 | what you want as a permission.
| | 00:30 | So what might you ask for?
| | 00:31 | Well, if you can get
designer, you can get designer.
| | 00:34 | How do you get that?
| | 00:34 | Well, you need to find who has
full control over that Web site.
| | 00:38 | If you know who the site owner is,
| | 00:40 | they can give you designer permission.
| | 00:42 | Now if you know who the site
collection administrator is, you can ask them.
| | 00:47 | They could give you full control on a site.
| | 00:50 | If you know who the farm administrator is,
they could make you a site collection owner.
| | 00:55 | And here's the downside of that.
| | 00:57 | If you're a site collection
administrator, which you may think is a really good
| | 01:00 | thing, and that is pretty good.
| | 01:02 | And how to tell that as go to your
Site Settings and see do you have a column
| | 01:06 | called Site Collection Administration.
| | 01:09 | The benefit of that is you get a lot
of great site-collection-level features
| | 01:13 | that you can play around with.
| | 01:15 | There's a down side to being a side
collection administrator, because if you are
| | 01:19 | a site collection admin, you may be
roped into doing site collection tasks and
| | 01:23 | actually doing reporting and working
with security, which may or may not be what
| | 01:28 | you want. With great power
comes great responsibility.
| | 01:32 | One of the downsides of being a site
collection admin is it's quite easy to
| | 01:35 | accidentally delete entire sites.
| | 01:38 | So if you tend towards doing oopsy things,
you may want to restrict your own capabilities.
| | 01:43 | As a rule, what you're looking for
is the minimum privileges necessary.
| | 01:47 | Yes, it's always nice to have Godlike
permissions in SharePoint, but if you can
| | 01:52 | do what you need with designer
privilege, than that's the best one to have.
| | 01:56 | But your key is find the person with the
privilege higher than the one you want.
| | Collapse this transcript |
|
|
4. In-Browser CustomizationCustomizing Web Parts| 00:01 | So we've gone through a
lot of conceptual stuff.
| | 00:03 | Let's actually start making some start
making some visual changes on a SharePoint site.
| | 00:07 | In this section of the course, you're
going to explore the things you can do
| | 00:10 | using the browser before you even
get into using SharePoint design.
| | 00:15 | And I understand if you want to leap
ahead into using SharePoint design and all
| | 00:19 | the cool things you can
do with a Web design tool.
| | 00:22 | But you want to make sure that there
isn't actually simpler ways of doing what
| | 00:27 | you want to do because there's a
lot you can do through the browser.
| | 00:30 | We're going to take one of the
simplest SharePoint sites, the Team Site,
| | 00:34 | and change it around.
| | 00:35 | Well, we've seen a couple of things
beforehand, like the idea of the View All
| | 00:38 | Site Content link, which is telling
us the existing Lists and Libraries.
| | 00:44 | So we can see there that I've got things
like an Announcements List, a Calendar,
| | 00:48 | a Links list, a Tasks list.
| | 00:50 | If I go back to the Homepage of my
Team Site, I can see that I've got this
| | 00:55 | Announcements area, this
Calendar area, this Links area.
| | 01:00 | These all are Web parts, little modular
pieces that are really exposing the data
| | 01:06 | that's in those underlying lists or libraries.
| | 01:09 | And it's important to not make the
mistake of thinking that these Web parts,
| | 01:13 | what you're looking at on
this page, actually are the data.
| | 01:16 | They're not the data.
| | 01:17 | They're windows to the data.
| | 01:19 | What does that actually mean?
| | 01:21 | Well, you can see over here that
I've got this Links area, what's called
| | 01:25 | a Links Web part.
| | 01:27 | It says there's no links right now because
this is a default Team Site out of the box.
| | 01:31 | I'm going to Add a new link over
here to, let's say http://www.lynda.com.
| | 01:37 | Type the description,
which can be whatever you want,
| | 01:40 | and any Notes, which are optional. Click OK.
| | 01:43 | Now this says okay, in my
Links now, I have lynda.com.
| | 01:47 | I also have this little dropdown list
over here, where I've got a Minimize
| | 01:50 | option, a Close option, and Modify
Shared Web Part, which really means modify
| | 01:55 | the settings of this Web part, and
whatever you change, everybody else will see.
| | 02:00 | That's why it's talking
about to being a shared Web part.
| | 02:03 | Any changes you make aren't
just to you. They're everybody.
| | 02:06 | Well, what is a Web part?
| | 02:08 | Well, it's a modular, movable
piece of code that's exposing some data.
| | 02:14 | In fact, if I go to my Site Actions
menu and shift into this Edit Page mode,
| | 02:19 | what you'll see is the page breaks apart
into what are called different Web part zones.
| | 02:24 | We have two zones here.
| | 02:26 | The Left zone is taking up about 70%
of our working area of the page, and the
| | 02:32 | Right zone about 25-30%.
| | 02:36 | What I can actually do is grab these title bars.
| | 02:39 | You'll see how my cursor changes to the
crosshair as I move across the word Site
| | 02:43 | Image and Links and Calendar.
| | 02:45 | And I can actually take
these and move them around.
| | 02:48 | I can start to manipulate what this
page looks like, drag Announcements over
| | 02:52 | here to the Right, have the links on
the Left, grab my Site Image to the Left.
| | 02:57 | It's completely up to you.
| | 02:59 | But bear in mind, you're editing
the shared version of the page.
| | 03:02 | If you don't remember that, it's
telling it to you in the status bar up here.
| | 03:06 | That means any changes that you make are
what everybody is going to see when you
| | 03:11 | finish editing this page.
| | 03:13 | And how do I finish editing this page?
| | 03:15 | Well, over on the right, I have Exit Edit mode.
| | 03:18 | That is now is us. We've moved around
the Web Parts of this page. Okay, so what.
| | 03:22 | Not a drastic amount of things that
we've done so far. But it can be.
| | 03:27 | What your Web parts are often exposing
is the data in your Lists and Libraries,
| | 03:33 | the things that you see
when you view All Site Content.
| | 03:36 | There's a big difference, however,
between the Web parts and the data.
| | 03:40 | If I go back to the Homepage,
| | 03:42 | I shift back into my
Site Actions Edit Page mode,
| | 03:46 | and if I delete this Links Web Part
with the lynda.com link, Exit Edit mode, so
| | 03:52 | I don't see it anymore,
| | 03:53 | it's quite a common misconception to think
that I have just actually deleted that data.
| | 03:58 | And I really haven't.
| | 03:59 | The Links list is still there.
| | 04:01 | And the only authoritative way of
getting this is to go to my View All Site
| | 04:04 | Content, which will tell me, yup!
| | 04:07 | You still have a Links list.
| | 04:08 | And if I go into it, it says
there's your link to lynda.com.
| | 04:12 | But what if I wanted that Web Part back,
or what if I wanted to have a Web Part
| | 04:18 | that had never been on
that page in the first place.
| | 04:20 | Well, once again, I go into my
Site Actions > Edit Page mode.
| | 04:24 | But instead of moving things around, I'm
going to click the link that says Add a Web Part.
| | 04:28 | I have that link on both
of that Web Part zones here.
| | 04:32 | Let's click the Right one, Add a Web part.
| | 04:35 | The first section of this page is
telling me what Lists and Libraries you have.
| | 04:39 | And it's saying, well, on this
site, you have the Announcements list.
| | 04:43 | You have the Calendar list.
| | 04:44 | You have Links, Shared Documents, Tasks.
| | 04:46 | There are a couple of internally used
ones, in this case, Form Templates, which
| | 04:50 | you may or may not see.
| | 04:51 | But what this is basically saying is
show me, or Add a Web Part, that represents
| | 04:58 | this underlying list or library.
| | 05:00 | So I can select the Links on
and click Add. Very simple.
| | 05:05 | It's added it over here on the Right.
| | 05:07 | One of the common things I hear from
people very new to SharePoint is they have
| | 05:11 | seen this Web Part window
before, they click Add a Web Part,
| | 05:14 | and they're looking for
something like a project task list.
| | 05:18 | And they say, now, I know I've seen it
before somewhere, but I don't see where
| | 05:21 | to add the Web Part.
| | 05:22 | Or I know, I've seen the Links Web
Part somewhere, but I don't see it here.
| | 05:26 | Again, remember what this is trying to show you.
| | 05:28 | It's trying to expose the Lists
and Libraries that already exist.
| | 05:33 | If you want to show a Web Part on
your homepage for the Links, you better
| | 05:36 | make sure you have a Links list on that Web
site. Otherwise, it's not going to show up.
| | 05:42 | Now after the existing Lists and Libraries,
you'll also see a section called All Web Parts.
| | 05:48 | Now this may look very different
depending on whether you have WSS or MOSS, and
| | 05:52 | depending on which version of MOSS you have,
and which features have been turned on.
| | 05:56 | I'm actually seeing a whole bunch of
Web Parts that are only available in the
| | 06:00 | MOSS Enterprise feature.
| | 06:01 | We've got Business Web Parts, Site
Aggregator Web Parts, RSS Viewers, Business
| | 06:07 | Data Catalogs, a whole bunch of stuff
that we can play around with, some of
| | 06:11 | which are very complex, and some of
which are quite simple, such as the Image
| | 06:15 | Web Part to display pictures and
photos, and the Content Editor Web Part,
| | 06:20 | which is really a Web Part that
doesn't expose an underlying List or Library
| | 06:24 | but simply allows you to type some data,
and in fact, I've just checked both of those.
| | 06:29 | So I can click Add.
| | 06:30 | And it tells me that for
the Content Editor Web Part,
| | 06:33 | it says To add content, open the
tool pane and click Rich Text Editor.
| | 06:37 | And what's the tool pane?
| | 06:38 | Well, we click the link and find out.
| | 06:41 | When you're editing the settings of
an individual Web Part, you have the
| | 06:44 | section over here on the right-hand
side that allows you to change things like
| | 06:49 | the appearance of it and whether you see
the title bar, and what the title bar says,
| | 06:54 | and very specific settings
for that individual Web Part,
| | 06:57 | in this case, the Rich
Text Editor that I can click.
| | 07:01 | And I can literally just type
Some simple content goes here.
| | 07:06 | If I just want a few paragraphs or a
few words of text, I can type that in,
| | 07:12 | click OK, exit my Edit mode, and I have
a Web Part. Not the most exciting thing
| | 07:17 | in the world, obviously,
| | 07:18 | but it's actually showing some content.
| | 07:20 | Same thing with the Image Web Part.
| | 07:21 | I can open the tool pane, and
the Link to an existing image.
| | 07:25 | Now we're going to get much more into
doing some custom content on the pages as
| | 07:29 | we go through this course.
| | 07:31 | But understand that what we're trying
to do is create a framework where the
| | 07:35 | power user, and that may not be you,
has the ability to add and move around
| | 07:41 | Web Parts on the page
| | 07:42 | and you need to be enabling that.
| | 07:43 | You need to be working with
designs that actually allow that.
| | 07:48 | Web Parts are one of the most common
ways of manipulating pages in SharePoint.
| | 07:52 | Yes, you're still somewhat at the
mercy of whatever content might be shown in
| | 07:55 | that Web Part, whether that's
today, or weeks, or months down the line.
| | 07:59 | For example, I don't know if my Links
Web Part here might have one link in it, or
| | 08:04 | ten, or a dozen, or none at all.
| | 08:07 | And I have to create a design
that's flexible around that.
| | 08:09 | But now you know they're controllable.
| | 08:12 | And that there's a lot of Web Parts
that are available to you in SharePoint.
| | 08:15 | And there might be more or less available
depending on if you have the WSS or MOSS.
| | 08:20 | And some only appear when
certain features are activated.
| | 08:23 | So yours may look a little different.
| | 08:25 | But you can create very, very
flexible Web sites by manipulating these,
| | 08:30 | and moving them around.
| | Collapse this transcript |
| Creating custom lists| 00:00 | The out-of-the-box Web sites in SharePoint
were never meant to be all that important.
| | 00:05 | Too many people treat team sites and
document workspaces as if there were some
| | 00:09 | magical prescriptive
content handed down from on high.
| | 00:13 | But you will always meant to customize
these sites to make them more useful.
| | 00:17 | As a designer, however, the
temptation is that you customize your sites by
| | 00:21 | adding new pages, and with
SharePoint that's not really it.
| | 00:25 | Remember, in SharePoint,
it's not about your pages.
| | 00:27 | It's about your stuff.
| | 00:30 | Your stuff, your content comes first.
| | 00:33 | Your pages come second.
| | 00:34 | And often your pages come automatically,
once you've defined what your stuff actually is.
| | 00:40 | One of the simplest ways of defining new stuff
in a SharePoint site is to make a custom list.
| | 00:47 | If I look at a Team Site like this and
realize that there isn't a place for some
| | 00:52 | data that I want, I can make it myself.
| | 00:55 | If I look at what I've got and
think no, that doesn't do it.
| | 00:58 | I'm going to go to my Site Actions menu,
hit Create, look at my available Lists
| | 01:02 | and Libraries, say Links, Calendar, Tasks.
| | 01:06 | No, none of that does it either.
| | 01:08 | Perhaps what I need is a place
to store a list of movie titles and
| | 01:12 | movie descriptions.
| | 01:14 | Well, if it isn't there already in my
first few columns, I can make a Custom List.
| | 01:18 | So I want to make a
Custom List called Movies.
| | 01:20 | Do I want to display it on the
quick launch bar? Yes, I do.
| | 01:25 | And what SharePoint is doing is
just by me describing this new list,
| | 01:30 | it says, well, I'm giving
you a page to look at it.
| | 01:33 | And I'm adding the link to your
quick launch bar over here on the left.
| | 01:36 | Now what it's given me is a little
boring right now because if I say I want to
| | 01:41 | add a new item, then it's giving me the
standard SharePoint blue bar across the top here,
| | 01:47 | all that I've got as a Title. And
that's probably not good enough.
| | 01:51 | That's the default for a new list
in SharePoint is just a Title.
| | 01:55 | It's recording a couple of other things
under the hood, but just the title is editable.
| | 01:59 | Let me cancel that.
| | 02:00 | I'm going to go into the Settings of this List.
| | 02:03 | Every list and every library and every
SharePoint site has its own list Settings
| | 02:10 | page, or Library Settings page,
| | 02:12 | not one settings page for everything,
If you have a thousand SharePoint
| | 02:16 | sites, each with a thousand lists
inside them, you'll have a million
| | 02:21 | different list settings pages.
| | 02:22 | This is the one for my
Movies list in this site.
| | 02:26 | When I click the settings of that, it says
well, you've got three columns right now:
| | 02:31 | Title, Created By, and Modified By.
| | 02:34 | And Created By and Modified By are being
done and worked with by SharePoint itself.
| | 02:39 | I'm going to say that I want to add a few
more columns here to describe the extra data.
| | 02:44 | So I'm going to hit Create Column.
| | 02:47 | And say well, we've already got Title.
| | 02:48 | So let's say, I'll put in a Genre.
| | 02:50 | And then it'll say what kind of data is this?
| | 02:53 | And it's very much like defining a
custom database in, say Access, or FileMaker,
| | 02:57 | or SQL Server, or Oracle.
| | 03:00 | What's the title of the data that you
want to store and what type of data is it?
| | 03:04 | SharePoint really forces you into these
choices, Single line of text, Multiple
| | 03:09 | lines, Choice, a Number,
Currency and then a few others.
| | 03:12 | I'm going to say here, this is really a Choice.
| | 03:15 | The Genre is a never-ending open-ended format.
| | 03:18 | So we can say that Genre, Choice.
| | 03:20 | And when we select Choice in the radio
buttons, it actually says well, what are
| | 03:24 | your choices? Enter choice
number 1, 2 or 3 and so on.
| | 03:28 | We could say it's Action, and Comedy, and
Romance and Sci-Fi, and Animation and so on.
| | 03:39 | We can keep going.
| | 03:40 | It asks do you want to display these
choices with a dropdown menu, or radio
| | 03:44 | buttons, or check boxes.
| | 03:45 | Well, I'm going to leave the default.
| | 03:47 | Dropdown menu is fine.
| | 03:49 | It says is there a default value?
| | 03:51 | It's going to select the first one, which
is Action, by default. I could change that.
| | 03:55 | I'm going to just leave it, and click OK.
| | 03:59 | I'm then going to use the same
method and add a couple of more columns.
| | 04:02 | Create a new Column.
| | 04:03 | I'll say for Date Released.
| | 04:06 | And that will be a Date, which itself
just as a choice, had a few options,
| | 04:11 | selecting Date and Time has a few
options. Is it just the Date, or Date and Time.
| | 04:16 | Is it today's date for the
default value or no default value.
| | 04:20 | I'm going to click OK.
| | 04:22 | I'm going to come down, create
another column for Rating.
| | 04:29 | And that can be a Number.
| | 04:31 | Number has its own set.
| | 04:33 | Do we want to have a minimum and maximum value?
| | 04:35 | Sure, we'll have a Minimum
value of 1 and a Maximum value of 5.
| | 04:39 | I can select things like
saying there's no decimal places.
| | 04:42 | Again, right now I'm not trying to
make you an expert on all these options.
| | 04:45 | I'm just trying to very quickly take you
through some of the examples, and then click OK.
| | 04:50 | And I'll do one more Column.
| | 04:53 | Create a Column called synopsis,
which can be Multiple lines of text.
| | 04:59 | And I'm going to just click OK on that.
| | 05:02 | So we've now actually changed this list,
| | 05:04 | so it has multiple columns giving me
a Title, a Genre, Date Released, a
| | 05:08 | Rating, and a Synopsis.
| | 05:10 | The other two things are taken
care of by SharePoint itself.
| | 05:13 | I'm going to go back to the homepage of
my site by clicking on the Home button.
| | 05:17 | I can see that my Movies list has a
link in my quick launch bar. I click here.
| | 05:22 | I click New.
| | 05:23 | And it opens up this page.
| | 05:25 | And this page is generated based on
what I've described that list to be.
| | 05:30 | So we have a Title here.
| | 05:31 | And let's type in Ponyo.
| | 05:33 | The Genre here is going to be Animation.
| | 05:37 | I'm going to say that the Date
Released was the 2nd March, 2010.
| | 05:42 | The Rating of 5, and I'm not going to
bother typing in a Synopsis the notes
| | 05:47 | would go here, and click OK.
| | 05:51 | We're now adding to this List, but you
might think this is all very internal,
| | 05:55 | and, of course, we want to
often see this on our page.
| | 05:58 | We're saying it's important.
In fact, let's show it on the homepage.
| | 06:00 | Well, we've defined a Custom List.
| | 06:03 | If I go to the homepage, and then use
my Site Actions menu and shift into Edit
| | 06:08 | Page mode, I can click Add a Web Part.
| | 06:11 | You might be thinking that there
won't be a Web Part because we've just
| | 06:13 | created something custom.
| | 06:15 | But no, SharePoint is good enough.
| | 06:16 | It understands that this list exists.
| | 06:18 | I see that my Movies List appears in my
Lists and Libraries section. I click Add.
| | 06:24 | And it will add that automatically to my page.
| | 06:27 | It's maybe giving me a bit too much information.
| | 06:30 | If I click out of Exit Edit mode,
it looks a little ugly here, a little
| | 06:34 | non-standard, because it's adding it
there would the big blue bar, allowing me
| | 06:38 | to add a New option, and change Settings.
| | 06:40 | And maybe I want that, maybe I don't.
| | 06:42 | Like any other Web part, I can change
my Settings using this dropdown menu,
| | 06:46 | Modify Shared Web Part.
| | 06:49 | What I'm actually seeing here is the
toolbar, which is the big blue bar here.
| | 06:53 | My choices actually are for any Web Part, a
Full toolbar, a Summary toolbar, No toolbar.
| | 06:59 | Let's change that to No toolbar and click OK.
| | 07:02 | And there we've got a bit more standard stuff.
| | 07:05 | Yes, it's obviously a listing of data.
| | 07:07 | But we're starting to see how we can
start to easily change our pages and what's
| | 07:12 | generated by SharePoint.
| | 07:14 | Now if you're viewing this as
somewhat simplistic, you're absolutely right.
| | 07:18 | If you're thinking, but I don't need to be
an HTML, CSS, Web design person to do it, yes.
| | 07:24 | You are right.
| | 07:25 | But you need to know this, because
otherwise, you'll be tempted to fix
| | 07:28 | your problems by creating custom Web pages
that enter information into custom databases.
| | 07:34 | I need an insert page, and a delete
page, and then edit page and a view page.
| | 07:39 | But you don't with SharePoint.
| | 07:41 | Because all you really need to do is
describe your content to SharePoint and let
| | 07:46 | it figure the pages out.
| | 07:47 | Later, we'll see and how you might,
if you really needed to, create custom
| | 07:51 | versions of these pages.
| | 07:53 | And obviously, if you got a lot of
content on say a public Intranet site, you may
| | 07:58 | need a more controlled way of doing
this, but understand that this is a core
| | 08:03 | skill for SharePoint.
| | 08:04 | And oftentimes, this is
what your users actually need:
| | 08:07 | the easy way to contribute
information into the sites that you're going to
| | 08:11 | be designing, and you'll need to be
building a design that understands this
| | 08:15 | and works around it.
| | Collapse this transcript |
| Creating site columns| 00:01 | After you've created a couple of those
new custom lists, you often going to find
| | 00:05 | the columns you defined in one could be
used in other, particularly when it's
| | 00:09 | information unique to
your team or to your company.
| | 00:12 | But it's a little tedious to have to
redefine this information again and again.
| | 00:16 | It would be nice to define a column
once and then reuse it across multiple
| | 00:21 | lists and libraries.
| | 00:22 | No doubt you've made the leap.
| | 00:23 | That's exactly what I am about to describe.
| | 00:25 | I am going to show
something called a Site column.
| | 00:28 | These are, as the name might suggest,
columns defined on a site-level, not on the
| | 00:33 | individual list, that are then
available across multiple lists and libraries.
| | 00:36 | I am at the homepage of a top-
level site here of a site collection.
| | 00:41 | I am going to go to my Site
Actions > Site Settings menu.
| | 00:44 | Then in the middle of this, I am
going to see a section called Galleries.
| | 00:49 | Now, in SharePoint, a gallery is a place
that you put something that you want to
| | 00:53 | be on display to other
sites in that site collection.
| | 00:58 | In this case, we have several
galleries in this middle section here:
| | 01:02 | Master Page galleries, Site content
types gallery, Site columns galleries.
| | 01:06 | At this point, I am not expecting
that you know what all of these or most
| | 01:09 | of these even mean.
| | 01:10 | We are going to go
through a couple in this course.
| | 01:12 | Now, if you are from a real designer
background, right now, at this point, you
| | 01:16 | may be tempted to dismiss this
content as not all that relevant.
| | 01:19 | You kind of saying, well
how is this relevant to me?
| | 01:21 | Once again, let me assure you right now, if
it wasn't relevant, I wouldn't be including it.
| | 01:25 | Site columns are invaluable later on when
you're creating more complex Web site designs.
| | 01:30 | They are a core skill in SharePoint.
| | 01:32 | I am going to select the Site columns gallery.
| | 01:36 | Now because I'm at the top level
site of the site collection, whatever is
| | 01:40 | in this gallery is available not only in this
site, but any subsite in the site collection.
| | 01:46 | What I am looking at right now is
the Site column gallery and all these
| | 01:50 | columns that exist here, I didn't create.
| | 01:52 | They are actually the way they
are in SharePoint out-of-the-box.
| | 01:56 | These are a whole bunch of available
columns that you can use in any list or library.
| | 02:01 | The idea is that you might look
through them, see if there is something that
| | 02:04 | you are looking for in all the
different ones that we have here, like Fax
| | 02:08 | numbers, and Nicknames,
and Office, and other facts,
| | 02:11 | all sorts of things you can do.
| | 02:13 | But let's say you've looked through
them and the one you want isn't there.
| | 02:16 | You are creating a catalog of
information for your company.
| | 02:19 | Let's say you've got a product catalog
where things break down into books and
| | 02:23 | DVDs and CDs and electronics.
| | 02:26 | That's not going to be in SharePoint.
| | 02:27 | SharePoint doesn't know what your company does.
| | 02:30 | So, I am going to Create a new
column that I am going to call Category.
| | 02:35 | I am going to say that this one
will be a Choice because it is only a
| | 02:40 | predefined list of things.
| | 02:42 | When I select the Choice, just like
doing this on an individual list, I'll get
| | 02:46 | this ability to enter multiple choices.
| | 02:49 | Let me quickly put a few in.
| | 02:50 | We'll leave it at that right now.
| | 02:55 | I am going to leave some of the rest as
default just because I am just trying to
| | 03:00 | demonstrate this and click Ok.
| | 03:02 | You may get this message pop-up, which
will tell you the column name that you
| | 03:06 | entered is already in use or reserved.
| | 03:07 | That's very common.
| | 03:09 | If you pick really straightforward
things like category or department or e-mail,
| | 03:13 | then it's not really
surprising they have already been taken.
| | 03:16 | I am going to click OK and go okay.
| | 03:18 | Apparently, I have to choose another name.
| | 03:20 | But I can do whatever I want.
| | 03:22 | I don't have to worry about
bizarre naming conventions and underlines.
| | 03:25 | So, I am just going to say that this one is
Product Category, and come down and click OK.
| | 03:31 | What I'll find is this
will be put in it's own group.
| | 03:35 | Like we have a group here called Base
Columns, we have a group called Core
| | 03:38 | Content and Calendar Columns.
| | 03:40 | These are all predefined.
| | 03:42 | If I keep coming down,
we've got Document Columns.
| | 03:44 | That's where a Category was.
| | 03:46 | So, we may end up using that later on.
| | 03:49 | If I keep coming down, Custom
Columns is what I created my one in.
| | 03:53 | So, I have got Product Category there.
| | 03:56 | You might think okay, so
what? What's the point here?
| | 03:59 | The point is we have this column.
| | 04:02 | It's predefined with all its choices
that can be used in any list or library.
| | 04:07 | While this doesn't seem completely
relevant now, what's going to happen is when
| | 04:10 | we create complex site
designs and complex pages,
| | 04:13 | we are going to start building our
page templates from Site columns.
| | 04:18 | So we need to know how to create this.
| | 04:20 | Yes, Site columns are an unexciting,
somewhat-tedious, but completely necessary
| | 04:26 | part of SharePoint.
| | 04:27 | One of the things to remember
about these guys is they exist at the
| | 04:30 | site collection level.
| | 04:32 | So, if you are working across
multiple site collections, they don't
| | 04:36 | automatically span across them.
| | 04:37 | They either need to be copied manually
or there are few third-party tools that
| | 04:41 | can help you sync these across.
| | 04:43 | But you'll find that these Site
columns are invaluable later on.
| | 04:46 | When it comes time to create a complex
site with a multiple page template, you'll
| | 04:50 | be creating them based on Site columns.
| | Collapse this transcript |
| Creating basic pages and Web Part pages| 00:00 | So, I've been insisting for awhile now
that you should shift your approach away
| | 00:04 | from this whole making Web pages idea
and more to thinking about your stuff
| | 00:09 | inside SharePoint and your content.
| | 00:12 | But sometimes, not very often, but it happens,
| | 00:14 | you just need to make a Web page.
| | 00:16 | You just want a page to put some content on.
| | 00:19 | It doesn't need to be a custom list.
| | 00:21 | It's simpler than that.
| | 00:22 | Of course, you can do this.
| | 00:23 | Now, here is where there is a really
big split between making Web pages in WSS
| | 00:28 | collaboration sites and making
Web pages in publishing sites.
| | 00:32 | Creating Web pages in WSS is easy,
but it is simple, and it's limited.
| | 00:38 | Creating pages in MOSS publishing
sites is easy too, but there's much more
| | 00:42 | baggage when doing it, many more hoops
to jump through, because your pages are
| | 00:46 | not regarded as casual.
| | 00:48 | In this module, I'm going to focus
on making Web pages in regular WSS
| | 00:53 | collaboration site, like a team site,
a document workspace and meeting
| | 00:57 | workspace, that kind of thing.
| | 00:59 | So, I am at the homepage of a team site.
| | 01:01 | I'm going to go to Site
Actions, go to my Create menu.
| | 01:05 | Under this, I'm going to
ignore the first four columns.
| | 01:08 | In the last one, we've got the Web
Pages column, which is not only where you
| | 01:12 | make Web pages, but where you
make whole new sites as well.
| | 01:15 | I've got two choices: a
Basic Page and a Web Part Page.
| | 01:20 | Really, they're not all that different.
| | 01:22 | A Basic Page is about as
simple as it possibly gets.
| | 01:25 | A Web Part Page just means a
page you can put Web parts on.
| | 01:29 | So, let's take them one by one.
| | 01:31 | Basic Page, all it's going to ask you
is what's it called and where does it go?
| | 01:36 | You have to give it a name,
and the name will end in .ASPX.
| | 01:40 | That's because SharePoint
is an ASP.NET Web Application.
| | 01:44 | What that really means is it's a
Web site written in Microsoft's
| | 01:48 | ASP.NET Technology.
| | 01:49 | Now, if you're just from a design perspective,
you really don't need to worry too much
| | 01:53 | about that, other than the fact that if
you're wondering why your pages aren't
| | 01:57 | ending in .HTM or .HTML, that's
because they're written in ASP.NET.
| | 02:03 | I'm going to just give this a name, like demo.
| | 02:06 | The second question is where does it go?
| | 02:09 | You can see I've got a dropdown here.
| | 02:10 | Now, yours may look a little
different depending on what site you're on.
| | 02:14 | I've got Form Templates and Shared Documents.
| | 02:17 | This page has to go somewhere.
| | 02:20 | It's asking what library does this go in?
| | 02:22 | This again, goes back to this whole
idea of lists and libraries driving
| | 02:26 | everything on your SharePoint site.
| | 02:28 | Because, even in this case, we want to create
a very simple Web page, and it's saying, okay.
| | 02:32 | It has to go in a library.
| | 02:34 | I'm going to select my Shared
Documents library and click Create.
| | 02:39 | As soon as this page is created,
it's going to open the Rich Text Editor.
| | 02:42 | Now, a word of warning: If you are
working with the 64-bit version of Internet
| | 02:47 | Explorer Version 8, or IE 8, you
may get a JavaScript error here.
| | 02:52 | That's just because it isn't
compatible with the 64-bit version.
| | 02:55 | You need to run the 32-bit version to make
sure that you get the Rich Text Editor open.
| | 03:01 | I'm going to just type in Some demo content.
| | 03:06 | As you might expect, you've got a few
very simple things that you can do with
| | 03:10 | Bold and Italicizing and a few bullet points.
| | 03:12 | There is really not a lot of power to this.
| | 03:15 | But again, it's intended to be a
very simple way for you to create a very
| | 03:19 | straightforward page.
| | 03:20 | You may be looking at this as a designer
and thinking, you've got to be kidding me.
| | 03:23 | This is what I've got?
| | 03:24 | Well, no. Bear in mind what it's doing here.
| | 03:27 | This capability is being provided for
your typical user who doesn't have any
| | 03:33 | HTML experience, just wants to be able to dump
some content in a page and kind of walk away.
| | 03:39 | That's really it.
| | 03:40 | We do have a lot more power in
creating Web pages, particularly when we get
| | 03:45 | into MOSS publishing.
| | 03:46 | But I'm showing you the
very, very basic page idea.
| | 03:48 | Again, I've got this Edit
Content link on the right.
| | 03:51 | I can just reopen it, make
a few changes, click Save.
| | 03:54 | This page has no workflow, no control,
no approval, no publishing structure.
| | 04:00 | It's instantly there.
| | 04:01 | The only issue is if you went back to
the homepage of this site, you maybe have
| | 04:05 | no idea that there is a link to this page.
| | 04:08 | There is no link to it on the top link bar.
| | 04:10 | There is no link down the left-
hand side on the Quick Launch bar.
| | 04:13 | Yes, if I went into my Shared
Documents Library, which is where I saved it,
| | 04:17 | I can see it there.
| | 04:19 | But otherwise, there is no link to it.
| | 04:21 | Here is really the deal.
| | 04:22 | If I wanted a link to that page in my
Quick Launch bar, I have to add it manually.
| | 04:27 | A Basic Page is really just a dumping
ground for uncontrolled generic content.
| | 04:32 | But it can be useful as a very quick
and very easy way of doing the stuff.
| | 04:36 | Now, one of the other options you
have in my Site Actions > Create is to
| | 04:41 | create a Web Part Page.
| | 04:43 | On WSS, this is the only other option.
| | 04:46 | This gives you a few more layout options.
| | 04:48 | It's giving me the same idea,
but I have to give it a name.
| | 04:51 | So, I'm going to say demowp for demo Web part.
I've got a check box to overwrite it, if it exists.
| | 04:57 | Then you have some layout
options, Full Page, Vertical.
| | 05:00 | As I select that, it's giving me kind
of a preview, a little animated GIF of
| | 05:05 | that layout, Header with a Left Column and Body;
| | 05:08 | Header with a Right Column and Body;
| | 05:09 | Header, Footer, 3 Columns;
| | 05:11 | Left Column, Header, Footer, Top Row, 3 Columns.
| | 05:14 | You can click around and do whatever you want.
| | 05:16 | I'm going to pick a fairly simple one.
| | 05:18 | Again, it says what Document
Library you want to save this in?
| | 05:22 | Now, if I was going to do quite a
few of these, I might create a Document
| | 05:26 | Library and call it Web pages, but for
right now, I'm going to save it in my
| | 05:29 | Shared Documents library.
| | 05:31 | There is no real magical
difference about where you save it.
| | 05:35 | Any Web site in SharePoint will allow
you to have dozens, or even potentially
| | 05:39 | hundreds, of document libraries.
| | 05:40 | You just need to create
one and put your stuff in it.
| | 05:44 | SharePoint is behaving as a
container for your content, for your stuff.
| | 05:48 | So, I now have a Web Part Page.
| | 05:52 | I've got these Header
zones and Left-Column zones.
| | 05:55 | The zone, again, is the idea of we have a
controlled area of where to put a Web part.
| | 05:59 | We can't just drag on a Web part and
drag it up to the top-left and have it
| | 06:03 | overwrite our logo and our navigation.
| | 06:05 | It has to go in one of these
particular controlled zones.
| | 06:08 | But of course, this page is brand-new.
| | 06:10 | There are no Web parts.
| | 06:11 | So, to fill this out, I'd have to click.
| | 06:14 | What do I want in the Header?
| | 06:15 | I have my normal set of Lists and Libraries.
| | 06:18 | Maybe I'll click on my Movies one and click Add.
| | 06:21 | I've got my Left Column, I
can click Add a Web Part.
| | 06:24 | I can either select from my List or Libraries,
or even come down and pick another Web part.
| | 06:28 | We've got some whole
bunch of different ones here.
| | 06:30 | Let's take a very straightforward one
like the Content Editor Web Part, which
| | 06:34 | again, is just a way of adding
some generic content in there.
| | 06:38 | In my Body, I'll add a Web part for
Announcements and Links, and click Add.
| | 06:44 | So, I'm starting to build this out and, of
course, we can drag these things around.
| | 06:48 | We can move different parts around,
because it is a Web part page.
| | 06:52 | Once I exit out of Edit mode, yup,
| | 06:54 | it's completely ugly, but
at least you get the picture.
| | 06:57 | Now, if you wanted to have more
control over the zones that you have here, we
| | 07:02 | can do that, but we're going to
have to go into SharePoint Designer.
| | 07:05 | There is definitely a limited amount of
functionality that we can do working in the browser.
| | 07:10 | But it's still useful to know.
| | 07:12 | It's useful to know what kind of
framework that we actually have.
| | 07:16 | A Web Part page has several layout
options, but is otherwise kind of the same as
| | 07:20 | your default homepage.
| | 07:21 | Once again, this page exists, but if
you didn't know it was here, you wouldn't
| | 07:26 | have navigation to it.
| | 07:27 | There is no automatic
navigation generated on the homepage.
| | 07:31 | If you wanted a link to this on the top
or on the left. You're going to have to
| | 07:34 | go to the page, which, again, if you
don't remember where it is, you go to the
| | 07:37 | Shared Documents library wherever
you saved it and click on it itself.
| | 07:41 | You could right-click and say
I want to copy the shortcut.
| | 07:45 | Then say, go to my Site Actions > Site Settings.
| | 07:49 | Come to my Quick Launch bar, for example.
| | 07:51 | Create a new link, paste
in the address of that page.
| | 07:56 | Type the description, My New Web Part Page,
and choose whatever heading it goes under.
| | 08:04 | That's just informational.
| | 08:06 | It's just what's going to
appear on the left-hand side.
| | 08:08 | Click OK. Click Home.
| | 08:11 | Then there we have My New Web Part Page,
all very dull and very kind of tedious.
| | 08:16 | Again, if you're coming from a
complex Web development background, you may
| | 08:19 | think, that's what I get to do?
| | 08:21 | We do have more power,
but this is where it starts.
| | 08:24 | If your focus is indeed on making sites
with hundreds or thousands of Web pages,
| | 08:29 | know that this is
obviously not the method for you.
| | 08:31 | Microsoft never intended anyone to
build a site with a thousand pages or even
| | 08:35 | a hundred this way.
| | 08:37 | This method is for just adding
occasional pages to a collaboration site that's
| | 08:41 | mostly generated from Lists and Libraries.
| | 08:43 | If you want a thousand-page Web
site with manual control over your
| | 08:47 | content, you'll get that with MOSS
publishing sites, and we'll see that
| | 08:50 | later in the course.
| | Collapse this transcript |
| Using themes in SharePoint| 00:00 | The first question any designer is asked
when working with this product, can you
| | 00:05 | make this Web site look a
little less SharePointy?
| | 00:09 | One of the core issues is you can
create 100 team sites that kind of look like
| | 00:14 | the one we're looking at right now.
| | 00:15 | You get 100 team sites, all sharing
the same basic blue SharePoint look.
| | 00:19 | If you are a member of several of
those sites, it becomes quite difficult to
| | 00:23 | tell where you are, when
everything looks the same.
| | 00:25 | So, is there a way to quickly and
simply change the look of a SharePoint site?
| | 00:29 | The short answer is yes, but, and
it uses something called Themes.
| | 00:33 | Themes are available out
of the box in SharePoint.
| | 00:36 | I'm going to go to my
Site Actions > Site Settings.
| | 00:39 | I have a section over here called Look and Feel.
| | 00:42 | In there, I have the Site theme.
| | 00:44 | You can change the theme if you have a
designer permission or above, and there
| | 00:48 | are several, as I can see, that
they're supplied out of the box.
| | 00:51 | They've even got a little
kind of preview to them.
| | 00:54 | I've got Belltown, Citrus,
Classic, Granite, Jet.
| | 00:59 | You're probably likely to be very
unimpressed by most of them, and I quite sympathize.
| | 01:04 | I'm going to hit the
Vintage one and click Apply.
| | 01:07 | Go back to the Home page. All the
themes do look as if they were created by the
| | 01:12 | same person with about half-an-
hour before the product shipped.
| | 01:16 | They don't substantially change the
look and feel of a SharePoint site other
| | 01:21 | than really just giving a
few things a different color.
| | 01:24 | However, what often happens is a
designer will look at some of these themes,
| | 01:29 | be very unimpressed, and then peg the whole
idea of themes as being not all that useful.
| | 01:34 | What we're going to see a little
later is how we can create our own.
| | 01:39 | Right now, here's the thing to take from this:
| | 01:42 | that even by looking at some of what
we've just done there by hitting Site
| | 01:47 | Settings, selecting a site theme and
clicking Apply, we seem to see that the
| | 01:53 | color scheme, at least, appears to be
separated from the SharePoint layout itself.
| | 01:58 | That is indeed the case.
| | 01:59 | A SharePoint theme is really a skinning idea.
| | 02:02 | Do CSS changes, color changes, font changes.
| | 02:05 | Even though you don't really see many
font changes, you can do them with themes.
| | 02:09 | Themes can be very useful.
| | 02:11 | We're going to explore later how to
make our own and make them available
| | 02:15 | to multiple sites.
| | Collapse this transcript |
| Installing and using a new site template (.stp) file| 00:01 | So we've lived with the Team Site for
a little while here, but obviously, we
| | 00:04 | have things like Document Workspaces, and
Wiki Sites, and Blogs all built-into WSS.
| | 00:10 | As you've seen, WSS, or if you have MOSS,
the WSS part of MOSS, comes with a few
| | 00:16 | site templates installed out of the box.
| | 00:18 | If I were to click Create and say
that I want to make a new web site, I
| | 00:22 | have things like the Team Site, the
Blank Site, the Document Workspace, the
| | 00:26 | Wiki Site, the Blog.
| | 00:27 | I have several Meeting Workspaces.
| | 00:31 | I'm going to ignore these other
tabs here because they are MOSS pieces.
| | 00:36 | But what most people really see when
they're looking at these collaboration
| | 00:39 | sites is they were kind of expecting a bit more.
| | 00:44 | You wouldn't be alone expecting a bit
more, and you'd be disappointed, because
| | 00:47 | there aren't any more.
| | 00:49 | However, what you can do is install more.
| | 00:53 | You can get new site templates.
| | 00:56 | Obviously, you can make your own.
| | 00:57 | You could create a blank site and
just start populating it with lists and
| | 01:01 | libraries, but you can actually download more.
| | 01:04 | One of the pieces of feedback Microsoft
had were we wanted a few more site templates.
| | 01:08 | In fact, what you can do is I'm
just going to go and search for WSS
| | 01:14 | Application Templates.
| | 01:17 | If I find that, I've got a couple of
links here, Windows SharePoint Services,
| | 01:22 | so this is just WSS.
| | 01:24 | You don't need MOSS, though,
obviously, if you have MOSS, it will work.
| | 01:27 | I'm going to click this link, and it
says here Application Templates for Windows
| | 01:31 | SharePoint Services 3.0.
| | 01:32 | WSS 3.0, which is the 2007 version.
| | 01:37 | What it actually gives
you is 40 extra new sites.
| | 01:42 | In fact, they're often referred to
as the Fantastic 40 in SharePoint.
| | 01:46 | If you search for that phrase,
you'd find these as well.
| | 01:49 | I'm going to click on this link that
says Get all 40 Application Templates.
| | 01:53 | It's a free download.
| | 01:54 | It is from Microsoft.
| | 01:55 | I'm going to click Continue.
| | 01:57 | I'm going to say, right now, I don't
want to register and just download this.
| | 02:00 | Do you want to save it? Yes, I do.
| | 02:03 | I'll just save it to my Desktop, and then what?
| | 02:07 | Well, once it's downloaded, you need to run it.
| | 02:12 | All this really is is a compressed file,
so running it, it's going to say, where
| | 02:17 | do you want to extract these 40 files to?
| | 02:20 | Each of these templates
comes in its own separate file.
| | 02:23 | I'm just going to extract
them to a location called fab40.
| | 02:28 | It doesn't exist right now, so it says,
do you want to create it? Yup, sure!
| | 02:32 | But you can extract it anywhere.
| | 02:33 | I didn't extract it to the Desktop,
because I would have covered my Desktop in stuff.
| | 02:37 | So I'm going to drop in there.
| | 02:40 | I actually see in here that in my fab40
folder, I have a whole bunch of files now.
| | 02:45 | They all end in WSP and STP.
| | 02:50 | If I actually sort them by type, I see
I have a bunch of STP files, a couple of
| | 02:55 | text documents, readme files,
and a whole bunch of WSP files.
| | 02:59 | Really, it's 20 STP files, which are
site templates, and 20 WSP files, which are
| | 03:06 | Web Solution Packages.
| | 03:08 | What's the difference?
| | 03:09 | Well, for us, in this particular
course, the difference is this:
| | 03:12 | we can use the STP files, being owners
or administrators of a site collection.
| | 03:19 | To use the WSP files, we have to have
farm administration privileges, the really
| | 03:25 | high godlike privileges, because these
need to be installed on the web server.
| | 03:29 | We need to run command-line
prompts, all that kind of stuff.
| | 03:33 | So I'm going to
concentrate on the STP 20 of them.
| | 03:38 | We've got things like
ClassroomManagement, DisputedInvoice,
| | 03:41 | ManufacturingProcess, SportsLeague.
| | 03:44 | And the core question is okay, what do we do?
| | 03:45 | Can we just double-click these?
| | 03:47 | Well, no, obviously not.
| | 03:48 | You can't just double-click and run them.
| | 03:50 | It wouldn't know what to do.
| | 03:51 | What we have to do is really import them into
SharePoint, and I'll show you how to do that.
| | 03:55 | I'm going to go to the
homepage of a top-level site.
| | 03:59 | What I'm going to go to is its Site Settings.
| | 04:02 | We've talked about Galleries a couple of
times here, the idea of a gallery being
| | 04:06 | a place you put stuff, so it's
visible and viewable to a whole bunch of
| | 04:12 | locations in the site collection.
| | 04:15 | I see here I've got a
Site templates gallery link.
| | 04:18 | That means put an STP file here, and it
will be visible and usable from all over
| | 04:24 | this site collection.
| | 04:25 | So, I'm going to click that.
| | 04:27 | Right now, it says I'm completely
empty because the Site template gallery
| | 04:31 | doesn't include things like the
Team Site and the Document Workspace.
| | 04:34 | Those are built into SharePoint out of the box.
| | 04:37 | This is extra stuff.
| | 04:38 | I'm going to click the Upload Document.
| | 04:40 | You could also upload multiple ones.
| | 04:42 | I'm just going to pick one.
| | 04:44 | I'm going to navigate out to the place
that I had extracted it out of my C drive.
| | 04:49 | I need to pick an STP.
| | 04:50 | Again, a WSP will not work.
| | 04:52 | We can't use them that way.
| | 04:54 | So, let's say that I'm going
to bring in a MarketingCampaign.
| | 05:00 | Click Open, click OK.
| | 05:03 | It reads a bit of information
from that MarketingCampaign.stp.
| | 05:07 | I've got some notes, obviously,
baked into it. I click OK.
| | 05:10 | It is now in my Site
template gallery. Well, so what?
| | 05:14 | Well, just because it's in the gallery,
it doesn't mean we're actually using it.
| | 05:17 | It just means it's available.
| | 05:19 | The next step is to make a new site.
| | 05:22 | Once again, we do that from
our Create menu. Click Create.
| | 05:25 | It's the last option at the lower-right,
Sites and Workspaces, click that one.
| | 05:31 | This page looks the same, but the
difference is we have a new tab here called
| | 05:34 | Custom for our templates.
| | 05:36 | In this case, it says the
Integrated Marketing Campaign Tracking.
| | 05:39 | So, I'm going to give this site a title
just as I have to normally do, Marketing.
| | 05:44 | Give it a URL.
| | 05:46 | I'm going to accept all the defaults
about using the same permissions and
| | 05:50 | displaying it on the Quick Launch bar
and the Top Link bar, and click Create.
| | 05:55 | We have a new marketing site with
a whole bunch of web parts on it.
| | 05:59 | It looks like we've got
some Libraries and Lists here.
| | 06:03 | You might have to explore this.
| | 06:04 | Obviously, there are some demo data in here.
| | 06:06 | There is a Getting Started Guide located in
the Assistance Folder in the Quick Launch bar.
| | 06:11 | So you could take a look at this stuff.
| | 06:12 | It has its own instructions.
| | 06:14 | Once again, the real place to look for
what this site is made of is in the View
| | 06:20 | All Site Content link, where I can see I've
got five Document Libraries and four Lists.
| | 06:25 | It looks like there is some
content in these libraries and lists.
| | 06:28 | If I look at the Items column, it shows
me that there is some content in there.
| | 06:32 | And yes, I might have to explore
them, but this is an available option.
| | 06:36 | So, if you're looking to create
certain kind of sites based on functionality,
| | 06:40 | it's worthwhile taking a look at those
WSS Application Templates and see if any
| | 06:44 | of those will meet your needs.
| | 06:46 | Now, you need to be at least a site
owner of a top-level site to do this.
| | 06:50 | With the Designer privilege,
you're not going to be able to do this.
| | 06:54 | Once they're uploaded, you can create
new sites based on this new template.
| | 06:57 | Now, STP files, Site Template files,
are useful, but they're not magical.
| | 07:02 | They don't include custom code.
| | 07:03 | What we're really looking at here, when
I look at this site, that seems to have
| | 07:08 | a whole bunch of stuff to it,
| | 07:09 | it's as if you started with a regular
blank site and you had started to add a
| | 07:14 | bunch of Lists and a bunch of
Libraries and pre-populate them with content
| | 07:19 | and add items to the List and items to the
Libraries and then you saved those changes.
| | 07:24 | An STP file, a Site Template file, is a
set of saved customizations to SharePoint.
| | 07:31 | But it's repeating things you could have done
using the browser if you wanted to spend the time.
| | 07:37 | The idea is if you'd created say a Team
Site, you'd move some web parts around,
| | 07:42 | you'd customized and changed
several Lists and Libraries.
| | 07:45 | You'd changed the theme.
| | 07:46 | You'd added some content and then sat
back and thought, oh, I wish I could save
| | 07:50 | all these changes, so I
could repeat them elsewhere.
| | 07:52 | That's what an STP file is.
| | 07:54 | And that's why you don't need super-
high permissions to use them, because you
| | 07:58 | could have done these things
yourself, if you wanted to take the time.
| | 08:02 | As we'll see later, you can even make your own.
| | Collapse this transcript |
| Saving a customized site as a site template| 00:01 | If you've created a site, customized
its List and Libraries, changed its theme,
| | 00:05 | customized the navigation, moved Web
parts around, added items to the Lists and
| | 00:09 | Libraries and then thought,
| | 00:10 | it would be really useful if I could
reuse this site, if I could duplicate it,
| | 00:14 | if I could do it again and again,
| | 00:16 | well, you can do this by
saving your site as a Site Template.
| | 00:20 | It's an option that's
available for every site in SharePoint.
| | 00:23 | If you can get to your Site Actions >
Site Settings menu, under the Look and
| | 00:28 | Feel section is a link that
says Save Site as Template.
| | 00:33 | On this page, there are
just a few options to give it.
| | 00:35 | I'm going to give it a file name, and
we can notice the first option even says
| | 00:39 | this is going to end in .STP.
We don't even have a choice about that.
| | 00:42 | Well, the site that I'm working on right now is
a benefit site, so I'll say it's benefits.stp.
| | 00:49 | Don't really mind how descriptive that
is because we can then give it a proper
| | 00:53 | name, a template name.
| | 00:55 | So, I'll call this a Benefits Site.
| | 00:59 | I could give it a description. I'm
just going to leave that as blank for the
| | 01:01 | moment, but a description would be useful.
| | 01:04 | Then here's the interesting option here,
a check box for Include Content, which
| | 01:08 | is defaulting to no.
| | 01:10 | But if check it, it really means, in
each of the Lists and Libraries, if
| | 01:14 | there is an item added or a document
added to the library, do I include it
| | 01:18 | when I recreate this site?
| | 01:19 | I'm going to say, yes I do.
| | 01:22 | What that means is say you've created
a Web site with some useful links and
| | 01:27 | useful documents and some starter
templates inside the Document Libraries.
| | 01:32 | You can choose to include all that
in your template, so that they're all
| | 01:36 | automatically there when it's
repeated and when it's created again.
| | 01:39 | I'm going to click OK.
| | 01:42 | All this is going to do is package up
my changes, the changes I made to the
| | 01:46 | theme, the way that I moved the Web
parts around, the new Lists and Libraries
| | 01:50 | that I created, the items that I
uploaded, wrap it all up in that STP file and
| | 01:56 | upload it to the Site template gallery.
| | 01:58 | This is completed successfully.
| | 02:00 | It even says, do you want to go
look at the Site template gallery?
| | 02:02 | I'm going to do that.
| | 02:04 | I can see that I not only have my new
one there, the Benefits Site, but I also
| | 02:08 | have the MarketingCampaign one that I
had uploaded from the Fabulous 40 or the
| | 02:13 | Fantastic 40, whatever you prefer.
| | 02:15 | What does this mean?
| | 02:16 | Well, it does mean that from now on, I
can go to my Site Actions menu inside
| | 02:20 | this site collection and create a new
Web site based on that new site template.
| | 02:25 | If I hit my Sites and Workspaces option,
what I'll see as I have the usual title
| | 02:30 | and URL, but on my Custom tab, I should
now have my Benefits Site that I've just
| | 02:36 | saved as a template.
| | 02:37 | So, I'm going to make a new one, I'll
call it Second Benefits, just to prove
| | 02:42 | that it's different.
| | 02:43 | Of course, it's a new site in SharePoint.
| | 02:45 | We need to give it a URL, which will
be based on whatever its parent URL was.
| | 02:51 | So, we're in the parent site of the Team Site.
| | 02:53 | I'm going to just call it second.
| | 02:56 | I'll accept all the other default options about
security and navigation and just click Create.
| | 03:02 | What it's going to do is take
all those changes and repeat them.
| | 03:06 | So we now have two sites that right
now will kind of look exactly the same.
| | 03:10 | On the Top Link bar, once again,
we've got the Home site, which is the Team
| | 03:14 | Site at the top-level of this site collection
and a couple of different sites underneath it.
| | 03:19 | These may look identical,
but they're not the same site.
| | 03:22 | They're just repeated.
| | 03:24 | So, any change that I would make to
say the Second Benefits Web site, such as
| | 03:29 | closing the Announcements Web part, if
I go back to the Benefits Web site, the
| | 03:34 | Announcements Web part is still there.
| | 03:35 | They are independent of each other.
| | 03:37 | Now, this site template is saved in the
Site template gallery of this site collection.
| | 03:43 | If I wanted it available in another
site collection, I'd have to copy it from
| | 03:47 | one place to another.
| | 03:48 | Well, how do you do that?
| | 03:50 | Step one is you go to your Site template
gallery where you have that site template.
| | 03:56 | Site template gallery is available from
the top-level site of the site collection.
| | 04:00 | So, I'm going to the top-level site
here, go into my Site Settings into my
| | 04:06 | Galleries section into
the Site templates gallery.
| | 04:08 | What I can just do here is literally
right-click - if I mouse over this
| | 04:14 | benefits, I can see that my Status
bar says this is pointing to a file
| | 04:18 | called benefits.stp.
| | 04:20 | I can just right-click, say Save Target
As, choose where to save it. I'm going
| | 04:25 | to save it to my Desktop and
just going to call it benefits.stp.
| | 04:30 | If I take a quick look, just minimizing
this here, I can see that it's actually
| | 04:33 | saved to my Desktop. It's about 230K.
| | 04:36 | It's quite small. All that is is
really the changes that I've made before.
| | 04:41 | What I could do is go to another site
collection's site template gallery and
| | 04:45 | upload it there just by
uploading it the same way I uploaded the
| | 04:48 | MarketingCampaign one, and then
repeat it in a different place.
| | 04:53 | Once again, Site Templates, whether
you make them yourself or you use someone
| | 04:56 | else's, are a set of saved
customizations to a SharePoint site.
| | 05:01 | In that sense, what they're really doing
is repeating things you could have done
| | 05:05 | through the browser if you
wanted to spend the time.
| | 05:08 | But it's very useful to be able to
package these up, include some content, and
| | 05:13 | repeat them from one place to another,
from one site collection to another, from
| | 05:17 | one site to another.
| | Collapse this transcript |
|
|
5. Introduction to SharePoint Designer 2007The three things you can do with SharePoint Designer 2007| 00:01 | Let's talk about SharePoint Designer itself.
| | 00:03 | While there are a thousand reasons why
you might use SharePoint Server, there are
| | 00:07 | really three main reasons you'd use
SharePoint Designer, and in this course,
| | 00:11 | we're only interested in one of those reasons.
| | 00:14 | First and most simply, SharePoint
Designer is a pretty good conventional
| | 00:18 | Web design application.
| | 00:20 | As it's based on Expression Web, you can
use it just to create regular Web sites
| | 00:24 | that have nothing to do with
SharePoint. It's very capable.
| | 00:27 | It knows XHTML and CSS, but
that's not why we are here.
| | 00:31 | On top of that ability, SharePoint
Designer knows and understands SharePoint Server.
| | 00:37 | You can point SharePoint Designer at
an existing SharePoint site, and it will
| | 00:41 | interrogate the Config and the Content
databases and allow you to customize that
| | 00:46 | site in a way that make
sense as a Web developer.
| | 00:49 | For most Web developers, that's a
list of folders and files or at least
| | 00:53 | the appearance of that.
| | 00:54 | It will take care of those background details.
| | 00:56 | It understands the internal
plumbing of SharePoint, that it helps you
| | 01:00 | customize existing pages.
| | 01:01 | You can even use SharePoint
Designer to create new SharePoint content,
| | 01:06 | things like Lists and Libraries, and even
create new SharePoint sites using this program.
| | 01:11 | Now, the third reason that
SharePoint Designer can be used is to create
| | 01:15 | something called Workflows in a SharePoint site.
| | 01:18 | Workflows are automated business
processes and SharePoint Designer, has a very
| | 01:22 | powerful wizard tool to
let you build these things.
| | 01:25 | This is not something we're
going to cover in this course.
| | 01:28 | Our focus is on the visual
customization of SharePoint sites, which we can
| | 01:32 | use this program for.
| | 01:34 | While there are things you can do in
SharePoint Designer that can also be done
| | 01:38 | in the browser like adding Lists and Libraries,
| | 01:40 | there are many things that cannot be
done in the browser that you can do using
| | 01:44 | this program, significant
customization, things beyond themes, for example.
| | 01:48 | So, the impact of there being three
main reasons to use SharePoint Designer
| | 01:54 | is that you'll find we won't cover
every little part of this program as we're
| | 01:58 | really interested in the parts of it that
help us visually customize a SharePoint site.
| | 02:02 | And we're going to focus on
those pieces going forward.
| | Collapse this transcript |
| Connecting to an existing SharePoint site| 00:01 | So SharePoint Designer knows SharePoint.
| | 00:03 | Give it the address of the SharePoint
site, and it knows how to talk to it, but
| | 00:06 | there are a few things to know about
opening sites in SharePoint Designer.
| | 00:10 | First and most basic, like any
Web site, you need to know the URL.
| | 00:15 | Remember that there could be
hundreds, or even thousands, of sites on
| | 00:18 | one SharePoint server.
| | 00:20 | So the site you're going to open
could be anything from yourserver.com to
| | 00:24 | yourserver.com/sites/something/somethingelse
/somethingelse. The URL could be very long.
| | 00:31 | The key question here is, if you are
just going to open this site in a Web
| | 00:35 | browser, what would you type?
| | 00:37 | I'm looking at a team site here,
where the server I'm using is being called
| | 00:41 | ldcsharepoint.com/sites/team/default.aspx.
| | 00:48 | Now I don't need the name of the page itself.
| | 00:52 | I need the URL of the site without any .aspx.
| | 00:55 | I'm going to copy that address. I'm now
going to open up SharePoint Designer,
| | 00:59 | which I'll find under the Microsoft
Office section, and depending on what I've
| | 01:06 | done before with this program, I might
be trying to open an existing site or a
| | 01:10 | blank page, like this.
| | 01:11 | I'm going to go to my File menu
and say not Open, but Open Site.
| | 01:15 | I'm not interested in
going to an individual page.
| | 01:18 | I'm interested in opening a SharePoint site.
| | 01:21 | So I click Open Site.
| | 01:23 | It says, what is it?
| | 01:24 | It may have a list of existing ones.
| | 01:26 | I'm going to paste in the
site name here and click Open.
| | 01:31 | Now depending on how you have
authentication set up by your farm administrators,
| | 01:37 | you may need to put in some
authentication information here.
| | 01:42 | Because of the way that SharePoint is
installed - and again, I don't always have
| | 01:46 | to do this, but in this case I'm
showing you how you may be asked to repeatedly
| | 01:49 | authenticate, in some cases three times.
| | 01:52 | What's its doing right now is
interrogating the conflict in the content databases.
| | 02:00 | The reason that I have to authenticate
is that SharePoint always cares who I am.
| | 02:06 | SharePoint Designer doesn't give me
anything extra regarding permissions.
| | 02:10 | If I couldn't have browsed to this site
using a Web browser, I certainly can get
| | 02:14 | to it from SharePoint Designer.
| | 02:15 | So it's asking for that authentication
information to figure out can I look at this site?
| | 02:19 | Am I allowed to edit it?
| | 02:21 | Am I allowed to do designer things on it?
| | 02:23 | What can I do here?
| | 02:24 | Now I don't have any pages open yet,
but my site is open, and it's kind of
| | 02:30 | returning some folders to me.
| | 02:32 | Some of the things may look fairly
obvious, like I've got a folder called Lists
| | 02:36 | and a folder called Shared Documents.
| | 02:38 | Some of them may be a bit less
obvious _catalogs, _private, _themes.
| | 02:44 | We're going to explore those shortly.
| | 02:46 | Now what about if you had a portal
that you wanted to connect to a MOSS
| | 02:50 | publishing site, for example.
| | 02:52 | Once again, your key question is, what do you
do if you are opening this up in the browser?
| | 02:57 | In this case, I have
ldcsharepoint.com/Pages/Default.aspx.
| | 03:03 | Now this is an interesting one.
| | 03:05 | Typically, when you have a pages
in your URL, you can ignore that.
| | 03:10 | The actually address of the site here
is just @ldcsharepoint.com. I can prove
| | 03:16 | that because if I actually went to that
address and just pressed Enter, I would go there.
| | 03:20 | That's the address that works
and actually that is the address,
| | 03:24 | that's the only thing that I
need if I wanted to give that to
| | 03:27 | SharePoint Designer.
| | 03:29 | Go back here, say File > Open Site,
paste in ldcsharepoint.com, click Open.
| | 03:36 | Once again, you may be asked to do
authentication depending on how your farm
| | 03:40 | administrator has set up your credentials.
| | 03:42 | I'm doing this here just
to kind of show you that.
| | 03:45 | It often happens that you'll be asked to
authenticate a couple of different times.
| | 03:50 | But once you have proven to SharePoint
that you are who you say you are, you should be
| | 03:55 | able to get that information back, and
it will interrogate the databases and
| | 03:59 | return that information.
| | 04:01 | I'm now looking at the virtual files and
folder structure of a MOSS Publishing site.
| | 04:06 | We can see there's obviously a lot
more stuff going on here, and there is.
| | 04:10 | Because of this site collection, we
have a lot more things to deal with.
| | 04:13 | But once we're in here, we can kind of
forget about the fact that it's always
| | 04:18 | going against the database,
at least for a little while.
| | 04:21 | There are ways that we can go to our
File menu and say, I want to add a new page
| | 04:27 | or new SharePoint Content, which is
the very common way of doing things.
| | 04:30 | We can also right-click on a blank
area here and mess around with opening
| | 04:35 | things, copying them, renaming them.
| | 04:37 | I would suggest that you don't
rename anything for a while yet.
| | 04:41 | One other thing that can do if you
start clicking around is we can notice that
| | 04:45 | down towards the bottom here, I have
Docs, SearchCenter, SiteDirectory, News
| | 04:50 | and Reports folders.
| | 04:51 | Those folders actually
represent other SharePoint sites.
| | 04:55 | They have the little globe icon on
them, and they are representing the
| | 04:58 | subsites, the DocumentCenter
subsite, the SearchCenter subsite, the
| | 05:02 | SiteDirectory subsite, News and Reports.
| | 05:05 | I can double-click on any of those and
actually go into those sites themselves,
| | 05:10 | I can see that this is
showing me the contents of
| | 05:12 | http://ldcsharepoints.com/Reports/.
| | 05:16 | What actually happened there is that SharePoint
Designer opened that site as a separate window.
| | 05:22 | I now have multiple copies of
SharePoint Designer actually open with
| | 05:25 | different sites in them.
| | 05:27 | Sometimes that can get a little
annoying, so I'll show you shortly how to
| | 05:30 | change a couple of preferences if you
don't want multiple copies of SharePoint
| | 05:33 | Designer open all the time.
| | 05:35 | Right now, the core power of SharePoint
Designer is primarily in its ability to
| | 05:40 | look inside the SharePoint Content
database and figure out there's a virtual
| | 05:44 | folder and file structure to be
able to show it you in a way that more
| | 05:47 | approximates regular Web site structure.
| | 05:51 | As we go forward, we'll go much
deeper into these different structures and
| | 05:54 | these different folders.
| | 05:55 | But for now, you need to know that to
open a site in SharePoint, the URL is
| | 06:00 | all you need.
| | Collapse this transcript |
| Exploring the SharePoint Designer interface| 00:01 | So I have SharePoint Designer open with
a very basic team site open inside it.
| | 00:06 | Like a lot of applications, SharePoint
Designer has a workspace that's divided
| | 00:09 | into different panels, or panes
| | 00:12 | to deal with things you can do in
the application, like applying styles or
| | 00:15 | working with data or, in our
case, working with Web parts.
| | 00:19 | SharePoint Designer calls its panels
Task Panes, and they are available from
| | 00:22 | the Task Panes menu.
| | 00:24 | They are split into groups here, which is
nothing more important than where they appear.
| | 00:28 | So if I select the Navigation Task
pane, it will appear on the top-left.
| | 00:32 | If I select the CSS Properties, it will
appear on the bottom-left and so on as I
| | 00:37 | turn them on or off.
| | 00:40 | As you might expect, these Tasks
Panes themselves can be detached.
| | 00:44 | They can be dragged around and moved around.
| | 00:46 | You can rearrange them.
| | 00:47 | If you prefer to have an alternate layout,
you can quite easily do that, docking
| | 00:52 | them to the side, having them detached.
| | 00:54 | If you make a mistake with that and you
kind of messed the whole layout up, the
| | 00:58 | last option on the Task Panes menu is
Reset Workspace Layout, which takes it
| | 01:04 | back to the default when it was installed.
| | 01:06 | There are also toolbars, which
are available from the View menu.
| | 01:10 | You have several toolbars:
| | 01:11 | Standard, Formatting,
Common, Master Page, Pictures.
| | 01:15 | I'm not going to really explore these
beyond what we'll naturally see as we go
| | 01:19 | through the program, but feel
free to explore these too.
| | 01:22 | Sometimes there is a bit of
crossover between what you expect on a Task
| | 01:26 | Pane versus a toolbar.
| | 01:28 | But at the start, you'll almost
certainly be more interested in the Task Panes
| | 01:32 | than you will on the toolbars.
| | 01:34 | Now when SharePoint Designer is
installed out of the box, there are some options
| | 01:37 | set that personally I find a little annoying.
| | 01:40 | I'm going to show you what I like to
immediately change and then show you some
| | 01:43 | other cool things you can do along the way.
| | 01:45 | I'm going to go to my Tools menu
and then down to a couple of options.
| | 01:49 | I have options for Application and
options for the Editor for when I'm
| | 01:53 | editing an individual page.
| | 01:55 | In my Application options, one of the
things I like to uncheck is the default
| | 01:59 | option to Open the last Web site
automatically when SharePoint Designer starts.
| | 02:04 | Because I work on a lot of different
SharePoint sites, I want to choose that
| | 02:07 | myself, that's up to you, and then I'm
going to click on Tools, come down to
| | 02:11 | Page Editor options, and I'm going to
select Word wrap, simply because I don't
| | 02:17 | have a huge workspace to work with here.
| | 02:20 | So I want to make sure that I'm wrapping the
code when I'm looking and editing my pages.
| | 02:25 | And because we have this Web site
opened, but we don't particularly have an
| | 02:28 | individual page or a file open,
| | 02:30 | we're kind of seeing the same thing
in the folder list as we are on the Web
| | 02:34 | site, and that's just natural.
| | 02:35 | It's the way it's going to work.
| | 02:37 | To open an individual page, not
surprisingly, you just find say your page.
| | 02:41 | We've only got one here right now, the
default.aspx, which is our Home page, has
| | 02:45 | the little home icon.
| | 02:47 | When I double-click it, it will open
up in the central section and sometimes
| | 02:51 | these pages can take awhile because
SharePoint is fetching information from the
| | 02:56 | databases behind the scenes.
| | 02:58 | It's not just opening up one simple file.
| | 03:01 | It's actually showing a lot of things going on.
| | 03:02 | And we're going to explore this page
and all the things we can do on it in
| | 03:07 | the next movie.
| | Collapse this transcript |
| Using the Code and Design views| 00:01 | Some Web Developers like to edit raw code.
Some want to avoid it as much as possible.
| | 00:06 | Like many Web Development tools,
when you have a page open in SharePoint
| | 00:10 | Designer you have the option of staying
all visual in a WYSIWYG, what you see is
| | 00:14 | what you get view, being all code,
just seeing the behind the scenes HTML and
| | 00:19 | ASP.net code that there is, or a
mixture of the two, what SharePoint
| | 00:23 | Designer calls Split View.
| | 00:25 | I find that in SharePoint Designer,
you'll often want to switch between them.
| | 00:29 | Some of the great drag and drop
capabilities are best in the WYSIWYG view,
| | 00:33 | whereas other things you'll need the
accuracy of directly working with the code.
| | 00:38 | You can actually use the Ctrl and Page
Down button, or Ctrl and Page Up to just
| | 00:44 | toggle through those three different
views: All Visual, All Code and the Split.
| | 00:49 | Now for those of you who are used to
working with very well structured XHTML
| | 00:53 | and CSS, you might be looking the code
that SharePoint generates and being quiet
| | 00:59 | disappointed with it.
| | 01:00 | It certainly looks very old school, and it is.
| | 01:03 | There is a lot of nested tables that
you're going to have to live with, and
| | 01:06 | that's one of the reasons why sometimes
you'll have to live in the code itself
| | 01:10 | to get the accuracy that you need.
| | 01:12 | There's a couple of things worth noting.
First of all is when you are selecting
| | 01:18 | different parts of the page in the
WYSIWYG view, the corresponding part will be
| | 01:23 | highlighted in the Code View. If you
need to change something about that, that
| | 01:28 | can be very helpful.
| | 01:29 | Another part is that when you have a
certain element selected, and you want to
| | 01:33 | see exactly what this is
contained inside. Is this inside a Table?
| | 01:37 | Is it inside a Div? What's it in?
| | 01:40 | Well, if you have say an element
selected, you can take a look up here at this
| | 01:45 | tag hierarchy, which is actually going
to show you what is the current element
| | 01:49 | and what are the parent elements of that?
| | 01:51 | In this case, I can see on a table
cell inside a table row, inside a table,
| | 01:56 | inside another cell, inside another
Row, inside another table and so on.
| | 02:00 | And actually by mousing around these,
you can actually choose to select the
| | 02:04 | parent tag or select the
contents of the entire element,
| | 02:08 | very useful when it comes time to
editing a lot of your pages and grabbing the
| | 02:12 | right piece. But there's certainly no
getting past the fact that there's a lot
| | 02:17 | of code generated by SharePoint
that we may or may not want to change.
| | 02:22 | You see a lot of things
like ContentPlaceHolders.
| | 02:24 | We're going to get into those a
little later on in the course.
| | 02:28 | If you were to make a change to this
file, whether it's in the Code View or the
| | 02:32 | Design View or the Split View, as soon
as you make the change, you're going to
| | 02:35 | notice that the tab up here
that currently says default.aspx*
| | 02:39 | has the asterisk after it.
| | 02:41 | This is common in a few applications,
but if you haven't come across it, it
| | 02:44 | simply means that I've changed this file,
and it's detected the file has changed
| | 02:48 | and I have not saved that change yet.
| | 02:51 | And you'll find that when you have
multiple pages open, you'll have multiple
| | 02:55 | tabs along the top, and it's very
easy to scan and see which ones have been
| | 02:58 | changed and which ones haven't.
Couple of other pieces to look at.
| | 03:02 | We have a Status Bar down at the bottom
here that has things like Visual Aids,
| | 03:06 | and this is an interesting piece to
SharePoint Designer and in fact, I'm going
| | 03:09 | to just double-click it quiet
quickly, change it from on to off.
| | 03:14 | Let me change that so you see the Design View.
| | 03:17 | It's very easy to see what's actually
happening, just switching them between on and off.
| | 03:21 | But it seems to be an awful lot
of difference between the two.
| | 03:24 | In fact, when you right-click this area
of Visual Aids, it can actually tell you
| | 03:28 | what it's showing, what it's hiding.
| | 03:30 | I'm turning Visual Aids on, I'll click
Show, and then when I right-click it,
| | 03:34 | I can see that what its actually
trying to highlight in the Design View is
| | 03:37 | yes, it's trying to show visible borders
and empty containers and margins and padding.
| | 03:42 | Really, what it's trying to do that is
make those invisible pieces selectable,
| | 03:46 | so I can manipulate them.
| | 03:48 | It may be worthwhile. You may have to turn
then on and off as you're working with the
| | 03:51 | design to see actually what's happening there.
| | 03:54 | Now as you click around some of the
options in SharePoint Designer, you might
| | 03:57 | find things under say the View
menu where you got the Page Size here.
| | 04:01 | You can actually select from
multiple different page sizes.
| | 04:05 | Now depending on what you're doing, this may
or may not be all that useful with SharePoint.
| | 04:09 | If I come down to a small one, it
shows kind of a fixed size thing and how
| | 04:14 | much am I going to see?
| | 04:16 | This is really just trying to
emulate a smaller browser window, but it's
| | 04:18 | probably of more use if you were
building Fixed Size page Layout and SharePoint
| | 04:22 | unfortunately does not really like
to be created as a fixed sized layout.
| | 04:26 | We're going to explore a
lot of this as we go on.
| | 04:29 | So I'm going back to my current page size.
| | 04:32 | Although you do have to work with
some ugly pre-created code in SharePoint,
| | 04:36 | you'll actually find that by kind of a
judicious use of the Split-View and by
| | 04:40 | using the Tag hierarchy of
the elements up at the top here,
| | 04:44 | you'll be able to stay
very clean most of the time.
| | Collapse this transcript |
| Unghosting and reghosting a site| 00:01 | When you have SharePoint Designer
connected to a typical SharePoint Site, you'll
| | 00:04 | see something like this, folders and files.
| | 00:07 | You can click around, jump into
folders and double-click pages to open them.
| | 00:12 | But always remember, this
is really smoke and mirrors.
| | 00:14 | This is an illusion.
| | 00:15 | These files and folders don't
exist on the SharePoint server.
| | 00:19 | You're really connecting to a database.
| | 00:21 | I'm going to open up this homepage here,
and it's taking a few seconds to load
| | 00:26 | in the information, and the reason for
that is it's not opening a single file.
| | 00:30 | It's making multiple calls to the
database to see what actually is this?
| | 00:35 | And what it's asking the database is
what is default.aspx for this site?
| | 00:39 | And the database is looking up its own
information and saying, oh, it's a Team
| | 00:43 | Site, and this is what the Homepage
looks like, and it's using a shared
| | 00:47 | definition of what a homepage for a
Team Site looks like and then adding in
| | 00:51 | some changes to it.
| | 00:53 | This is a good thing.
| | 00:54 | What it means is you can create
hundreds or thousands of Web sites created off
| | 00:59 | the same base shared definition.
| | 01:01 | But what happens if I want to change it?
| | 01:04 | Let's say, for example, that I'm going
in here and I'm wanting to add a little
| | 01:09 | bit of information myself.
| | 01:10 | Well, I can do something very simple.
| | 01:12 | I'm just going to click in a blank
area and just to prove that I can make a
| | 01:16 | change and put in just the letter x.
Now it immediately changes up here to an
| | 01:21 | asterisk at the top to say, yup, this
file has been changed but not saved.
| | 01:25 | I am going to close it.
| | 01:28 | It's going say, do you want to
save changes to your file? Yes I do.
| | 01:31 | I click Yes. That's not it.
| | 01:34 | It's immediately going to pop up with
another dialog box that's actually going
| | 01:37 | to say, Saving your changes will
customize a page from the site definition.
| | 01:42 | Are you sure you want to do this?
| | 01:44 | What that really means is you've changed
something about this Homepage, that it's
| | 01:49 | not now sharing the definition
with a whole bunch of other sites.
| | 01:53 | I'm going to say, Yes I do.
| | 01:55 | It's perfectly valid for you to say that.
| | 01:57 | That's not an error message.
| | 01:58 | It's just reminding you that
you're actually customizing this page.
| | 02:02 | Up until this point, it was using
the shared definition of that Homepage.
| | 02:07 | It was finding your unique data and
adding it in, but it was based on a shared
| | 02:11 | definition with a whole bunch of other sites.
| | 02:13 | Now I've got this blue icon with the
eye symbol in it, and that's actually
| | 02:19 | telling me that this page has been customized
from the base definition shared by all team sites.
| | 02:25 | Now a little quick history note,
because you'll sometimes hear these terms.
| | 02:29 | In previous versions of SharePoint,
they used to talk about pages being
| | 02:33 | ghosted and unghosted.
| | 02:34 | Ghosted meant it was still sharing the
same definition and unghosted meant it
| | 02:39 | had been customized.
| | 02:41 | And in the old version of SharePoint,
unghosting or customizing a page was a bad thing to do.
| | 02:46 | It wasn't very good for performance.
| | 02:48 | These days we don't really mind.
| | 02:50 | So it's not a bad thing to have it
customized, but you do want to know when
| | 02:54 | you have customized it.
| | 02:55 | Now if all I'd done was make that
really simple change and say, Oh, I didn't
| | 02:59 | really need to do that,
| | 03:00 | I could go back in, open this page,
find that change that I'd made and think,
| | 03:07 | okay, I'm going to remove that and surely
I'm taking that back to the way it was.
| | 03:10 | Well, I save those changes.
| | 03:13 | It doesn't give me a second error
message because I've already customized this.
| | 03:16 | But even though I'm back to what the
original definition was, it doesn't know that.
| | 03:20 | It's saying, no, as far as I'm
concerned, you're still customized.
| | 03:23 | If I wanted to revert back to the
original, I could right-click this, and I've
| | 03:28 | got an option that says,
Reset to Site Definition.
| | 03:31 | I click that, and it's going to say,
Resetting to the site definition will
| | 03:35 | replace the content of this with the
original contents from the site definition.
| | 03:39 | A backup copy will be created.
| | 03:41 | Do you want to do this?
| | 03:42 | I'm going to say Yes.
| | 03:44 | Now I'm going to open up this page again, and
we were really back to the way we were before,
| | 03:48 | even though you don't see a lot of
changes. What I'm going to do is open this up
| | 03:52 | in the browser because I do want to
show you something impactful here.
| | 03:56 | I'm going to go to that Team
Site that I just customized.
| | 03:59 | It doesn't mean reset the site.
| | 04:02 | It didn't change anything.
| | 04:04 | I still have my New Navigation options,
I have my Custom Movie List that I had
| | 04:08 | created, and even if I'd added some
Web parts, those are still regarded as
| | 04:13 | changes that come after the
base page from the Site Definition.
| | 04:17 | So it's not a bad thing to
revert back to a Site Definition.
| | 04:21 | We've still got a fine working site.
| | 04:22 | You're not resetting the site.
| | 04:24 | You're just resetting that Homepage.
| | 04:26 | So bear in mind this course
really is all about customization.
| | 04:30 | It's not a bad thing to
customize a SharePoint page.
| | 04:33 | We're going to have to customize, or
unghost, our pages if we want to apply that
| | 04:37 | cool new design we're looking to do.
| | Collapse this transcript |
|
|
6. CSS Files in SharePointFinding the CSS files in SharePoint| 00:01 | As a Web developer and designer, you
should be very familiar with using CSS,
| | 00:05 | Cascading Style Sheets, to change
the way that a Web site appears.
| | 00:09 | SharePoint is no different. It uses CSS.
| | 00:11 | It uses a lot of CSS.
| | 00:14 | When you're customizing a SharePoint
site, for the most part, you want to tap
| | 00:18 | into what SharePoint is doing and
add to it, and not just replace it.
| | 00:21 | Well, if I was looking at this Web site,
I've got a Team Site here, and I wanted
| | 00:26 | to know what it was doing with CSS,
| | 00:28 | I might just do something simple first
off like View the Source of this page,
| | 00:34 | and do a search for say CSS, which I
can find appearing a couple of times.
| | 00:38 | I appear to have a link
here to a file called core.css.
| | 00:42 | It's at a path that I may
not recognize right now.
| | 00:45 | We'll talk about that in a second.
| | 00:46 | If I come down a little further, I
can see some inline CSS as well.
| | 00:51 | This may differ, if you're
looking at a Team Site or a Portal or a
| | 00:54 | document workspace. But going back
up, this file is really the key to
| | 00:59 | everything in SharePoint CSS.
| | 01:02 | This is the Core CSS file called core.css.
| | 01:07 | The path here is a little strange.
| | 01:09 | It looks like it's linking to
an _layouts/1033/styles/core.css.
| | 01:16 | You might think well, where is that?
| | 01:19 | It's a little odd, the
way that it's being generated.
| | 01:21 | Again, we know that everything in
SharePoint is coming from the database.
| | 01:25 | When you see _layouts in the path, you
know that SharePoint is doing something
| | 01:30 | in the background to deliver this file.
| | 01:33 | So let me show you something.
| | 01:34 | What I'm going to do is actually switch
over to a Remote Desktop window, which
| | 01:39 | I have right now, which is actually me
accessing the Web Server that SharePoint has installed.
| | 01:45 | Now you don't need to have access to
this, and you may not, depending on your
| | 01:49 | organization, but I've got a very
complex path along here to my Program
| | 01:54 | Files/Common Files/Microsoft
Shared/Web Server Extensions/12.
| | 02:00 | You'll occasionally hear this path
called the 12 Hive, going to this very long
| | 02:05 | path to the number 12.
| | 02:06 | 12 has to do with the version of SharePoint.
| | 02:09 | No, there hasn't been 12 versions of
SharePoint, but this version of SharePoint
| | 02:13 | went along with Office 2007, which
internally was the Office 12 build, a little
| | 02:19 | bit of trivia for you there.
| | 02:20 | So it was SharePoint's 12, effectively.
| | 02:22 | Now I'm really then looking in this
location at the files that SharePoint
| | 02:28 | installs on the Web Server when it's installed.
| | 02:31 | So I go into Template, and then into Layouts,
and then into 1033, and then into Styles.
| | 02:39 | Now you might be looking at this going,
am I mean to remember this path? Well, no.
| | 02:43 | You're not.
| | 02:44 | I've done it often enough that I know
where it is, and when you actually do a
| | 02:47 | lot of SharePoint customization, it may
come naturally that it's very easy for
| | 02:51 | you to find this particular path.
| | 02:52 | But what I'm trying to show you
here is there is a bunch of CSS files.
| | 02:56 | I'm going to order them by Size,
the biggest one being core.css.
| | 03:02 | What's really happening is this is
the shared underlying version of the CSS
| | 03:06 | file that's going to be shared by every
SharePoint site that's going to be used on this machine.
| | 03:11 | So it could be potentially thousands of
SharePoint sites using this one core.css.
| | 03:15 | A lot of designers might
then think, Oh cool, great.
| | 03:18 | This is where I change it.
| | 03:19 | I would suggest, absolutely not.
| | 03:21 | This is not where you change it.
| | 03:22 | In fact, you never change it here.
| | 03:25 | You want to know that it exists,
because this is going to be reused.
| | 03:29 | In fact, in your sites, it's typically
going to be combined with other CSS files
| | 03:35 | to kind of create a generated CSS file,
of a lot of various things combined,
| | 03:41 | including, potentially, your own code.
| | 03:43 | But the actual file does exist on the
Web Server, and one of the few times where
| | 03:48 | it's not immediately in the database,
it's actually on the file system.
| | 03:52 | So I'm coming out of that server
and back to our regular machine.
| | 03:58 | When I'm looking at the code that has
been sent back from the Web Server, and it
| | 04:02 | has this path here, the
_layouts/1033/styles path,
| | 04:07 | it's because this is using that
core.css file, but in a lot of cases, it's
| | 04:12 | combining it with other things.
| | 04:14 | It's checking to see whether I've made
any changes to it, whether I've made any
| | 04:17 | customizations, and it's delivering a path.
| | 04:20 | It's really going to be drawing
something effectively from the database for us.
| | 04:24 | Now let me show you a slightly different look.
| | 04:26 | If I go to a say Collaboration Portal,
a MOSS publishing site, and in this one
| | 04:31 | say, right-click View Source.
| | 04:33 | I will see a few different CSS files.
| | 04:36 | I'm still going to have the core.css
file being returned, which I'll always
| | 04:41 | have, but I've also got some extras.
| | 04:43 | There is an
HtmlEditorTableFormats.css. HtmlEditorCustomStyles.css
| | 04:49 | controls.css, and that's because in
MOSS publishing, there is a lot more
| | 04:53 | things being styled.
| | 04:55 | So you may find a few more things.
| | 04:57 | Yes, you'll also then see
some inline styles there too.
| | 05:01 | What's really happening is that during
the process of requesting a SharePoint
| | 05:05 | page, the fact that I have a browser
open, I click to link or type the address
| | 05:11 | of this SharePoint homepage.
| | 05:14 | It's getting the request on the server.
| | 05:15 | It's looking up information in the database.
| | 05:18 | It's combining several CSS files, and
it's sending me back this constructed link
| | 05:23 | in my source that generates
what it is that I'm looking at.
| | 05:26 | That might include things like has it had a
theme selected, do we need to add a theme CSS file?
| | 05:32 | So we typically don't replace any of the
provided CSS files that SharePoint has.
| | 05:38 | We're going to add to them.
| | 05:40 | Even if we want to change something
that's been written in that core.css file,
| | 05:45 | we won't really change it directly.
| | 05:46 | We'll simply redefine it, and make
sure that our definition comes last, or use
| | 05:51 | CSS as last in wins idea
to provide our own styles.
| | 05:56 | CSS is everywhere in SharePoint.
| | 05:59 | It's very easy to assume
| | 06:00 | we can just change an existing
CSS file and be done with it.
| | 06:03 | As you've seen, the CSS
pipeline in SharePoint is complex.
| | 06:07 | We need to understand where to insert
ourselves into it, in order to achieve the
| | 06:11 | visual results that we want.
| | Collapse this transcript |
| Exploring Core.css| 00:01 | There is one CSS file you have
to become familiar with, core.css.
| | 00:06 | It contains about 4000 lines of CSS.
| | 00:08 | Now you're not going to have to learn this all.
| | 00:10 | That would take way too long, but you do
need to be able to find your way around it.
| | 00:15 | Now if this was any other Web site,
and I needed to look at the CSS for it, I
| | 00:19 | typically do a right-click View Source,
find the link to the CSS file here,
| | 00:24 | which is here is a pretty long one,
maybe Copy that and Paste it into the
| | 00:30 | address of the site.
| | 00:31 | I've got a couple of missing characters.
| | 00:37 | I'm going to just Save this
to my Desktop, and click Open.
| | 00:42 | Typically, what would happen?
| | 00:43 | Then it was open up in SharePoint Designer
as being the default editor for CSS files.
| | 00:48 | You may have a different default
editor for CSS files, which is fine.
| | 00:52 | But I'm looking right now at a
completely offline saved copy of the CSS.
| | 00:57 | This has no connection anymore to any
SharePoint site, but it would allow me
| | 01:01 | to kind of take a look through this and
see that yes, there is indeed a lot of stuff.
| | 01:05 | There are 4300 lines of CSS here.
| | 01:10 | There is some fairly complex
CSS being done in this file.
| | 01:15 | Now again, you don't have to learn
everything that's going on here, but we will
| | 01:19 | need to explore certain parts of this.
| | 01:21 | So if you just wanted to take a look,
this is one way of having your own copy.
| | 01:25 | And that actually does come in handy
sometimes, just having a quick copy of
| | 01:28 | core.css that you can pull from,
because you don't have access to the Web
| | 01:33 | Server as a general rule.
| | 01:34 | I'm going to close that.
| | 01:36 | But if I have a SharePoint site open,
and I'm looking at a particular Web page,
| | 01:42 | I do have the pane called Apply Styles.
| | 01:44 | Well, I have two Styles panes here, I've
got the Manage Styles and Apply Styles.
| | 01:49 | These are actually showing me all the
CSS classes, for the most part, that are
| | 01:55 | being contained in core.css.
| | 01:58 | There are hundreds of them, and it's
very difficult to find which ones you
| | 02:03 | should be playing with.
| | 02:05 | Sometimes you can get a good kind of
guess as to what they're representing.
| | 02:09 | We've got a class here called .ms-
pagebottommargin, pagebottommarginleft,
| | 02:15 | pagebottommarginright, bodyareapagemargin,
but sometimes they're a bit more obscure.
| | 02:22 | Maybe I don't know what vh-icon is
or inputformdescription and where that
| | 02:27 | would be changing things.
| | 02:28 | We'll see a little later how we can
find out exactly what styles are being
| | 02:31 | applied to what parts of our page.
| | 02:33 | But this is showing me some of
the CSS Styles, and downloading it
| | 02:38 | directly is showing me that.
| | 02:40 | What I often hear is people expecting
to be able to browse through the Folder
| | 02:44 | List of their SharePoint site,
and find their CSS files.
| | 02:47 | After all, that's the way it would work
if you're editing a "normal site," but you
| | 02:52 | won't find it here, at least not for awhile.
| | 02:55 | The way that you could do this is this.
| | 02:57 | Let's say, I pick one of the Styles
that's defined in core.css, and you might be
| | 03:03 | asking how do I know it's from core.css?
| | 03:06 | Well, if I come all the way up to the
top, it's actually showing me that these
| | 03:10 | are inside the core.css file.
| | 03:13 | If I minimize that, it's really telling
me that this is an inline style defined
| | 03:18 | on this current page, but otherwise
everything is coming from core.css.
| | 03:22 | So if I were to say, I'm
going to select one of these.
| | 03:25 | I'm going to pretty much select one
at random like the toolbarItem, and
| | 03:29 | click the dropdown,
| | 03:31 | I have some options here Apply the Style,
a New Style, Modify the Style, Rename
| | 03:35 | it, Delete it or Go To Code,
which is an interesting one here.
| | 03:39 | I'm going to click Go To Code.
| | 03:41 | I can see that what it's done here is
open up core.css, and it's actually moved
| | 03:45 | it to the point that I want it to
be, the .ms-toolbarItem CSS style.
| | 03:50 | Now the question might be, well, if
it wasn't coming from our Folder List,
| | 03:54 | where is it coming from?
| | 03:55 | Well again, SharePoint
Designer is kind of being smart.
| | 03:58 | It's reading in the database and going
okay, I need to pull that information out.
| | 04:02 | Here is where it becomes interesting.
| | 04:04 | If I make a change to anything here,
let's say I randomly pick something like
| | 04:09 | the .ms-menutoolbar and I
change this font-size to 10 points.
| | 04:13 | Then I say I'm going to Save this.
| | 04:15 | Do I want to save these changes? Yeah, sure!
| | 04:18 | Notice it's that constructed path right now,
and say Yes, and it's giving me a Warning.
| | 04:23 | You're about to customize
a SharePoint stylesheet.
| | 04:25 | Do you want to do this?
| | 04:26 | I'm going to say Yes, but while I'm
doing this, have a little look over here.
| | 04:30 | I've got a blank area of this
Folder List under default.aspx.
| | 04:35 | As I click Yes, what it's doing is
detaching core.css from the shared
| | 04:42 | underlying definition of it.
| | 04:43 | Now it's completely making a separate
copy, just for this Web site, and putting
| | 04:48 | it in this folder called _styles, and
then giving me the little icon that says,
| | 04:53 | letting you know, or at least
reminding you this is customized from the
| | 04:57 | underlying base site definition.
| | 05:00 | So, if I make that change to core.css, I
am not changing core.css for everybody.
| | 05:07 | I'm just changing it for me,
just for my site, just here.
| | 05:11 | This is not the same as reaching into
core.css on the Web Server and making a
| | 05:16 | physical change, which you
wouldn't want to do anyway.
| | 05:18 | It is customizing it just for this site.
| | 05:21 | The reason that I really don't like
doing this anyway, even though you can, is
| | 05:24 | core.css is a real pain to work with.
| | 05:28 | I don't really want to be making my
additions and my changes to a file with
| | 05:32 | 4300 lines of CSS in.
| | 05:36 | As a general rule, what you're going
to do and what I suggest you do is you
| | 05:39 | don't change core.css.
| | 05:41 | It's enough of a mess without you adding to it.
| | 05:43 | Instead, you're going to create your
own CSS files that will override the
| | 05:48 | ones found in core.css.
| | 05:51 | We'll see how to do that in the next movie.
| | Collapse this transcript |
| Creating a custom CSS file| 00:00 | You might think you can just pull core.css
from the picture, but it's really not feasible.
| | 00:05 | Bear in mind that this core.css file
is taking care of a tremendous amount of
| | 00:10 | stuff that you probably
don't want to have to deal with,
| | 00:12 | things like the dropdown menus and
views inside SharePoint, lots of SharePoint
| | 00:17 | visuals you'll take for granted.
| | 00:18 | So one way or the other, you're
going to have to deal with core.css.
| | 00:22 | You do often want to
replace part of what's there.
| | 00:26 | Now once again, I don't
recommend you touch core.css directly.
| | 00:30 | You simply take advantage of CSS's natural
ability to provide multiple versions of
| | 00:35 | the same class, that you can redefine a style.
| | 00:39 | I'm looking at this page right now,
and I'm just kind of browsing through
| | 00:42 | the Apply Styles menu.
| | 00:45 | I can see that I've got
something called .ms-sitetitle.
| | 00:48 | Now what that actually affects, not
surprisingly, is the site title up here.
| | 00:53 | So I'm going to show you one of
the ways you might change this.
| | 00:56 | I'm going to kind of do this in
ascending order of difficulty,
| | 01:00 | so really simple, quick and dirty
stuff to more complex ways of doing it.
| | 01:04 | We've seen that we can click this
little dropdown, and I could say Go To Code,
| | 01:09 | if I really want to see what that is
made of. And I see here that from line 567
| | 01:14 | to 582, we've got both .ms-sitetitle
and .ms-sitetitle a. Both of them are
| | 01:21 | important, because whether you've
clicked it or not, the typical SharePoint Web
| | 01:25 | site title is a link.
| | 01:27 | It's an anchor tag.
| | 01:28 | So the a is really what's being
applied here most of the time.
| | 01:31 | What I'm going to do is I'm going
to take both of those and copy them.
| | 01:37 | I could directly change core.css.
| | 01:40 | It's kind of up to me if I want to do it.
| | 01:42 | I don't like doing that, but I could.
| | 01:45 | I'm gong to show you a very kind of
quick and dirty way of adding a CSS file.
| | 01:48 | This is in a WSS site.
| | 01:50 | MOSS publishing sites have a
more suggested place to put it.
| | 01:53 | We don't really have anywhere
obvious to put our own custom styles.
| | 01:57 | So I'm going to use my mouse and kind
of just right-click in a blank area and
| | 02:01 | say give me a New > CSS file.
| | 02:03 | I call it custom.css.
| | 02:05 | It's just at the root of my site.
| | 02:07 | I'm going to open that guy. Paste in the
complete class definitions, which I try
| | 02:13 | and get in the habit of doing, because
even though I may only want to change
| | 02:16 | one thing, such as the font-size,
| | 02:18 | remember that with CSS, if it's been
defined once in core.css, and I want to
| | 02:23 | redefine it, I need to pick all of the
styles and all of the different selective
| | 02:28 | pieces that I want to change.
| | 02:30 | So I'm going to copy the whole thing.
| | 02:31 | It's just a habit I like getting into.
| | 02:33 | I'm going to just change, hopefully for
the purposes of making this obvious, the
| | 02:37 | font to 22 points here.
| | 02:40 | I'm going to save custom.css.
| | 02:42 | Now right now, I have not changed
core.css, but I do have this custom.css file.
| | 02:48 | The question is, well, so what?
| | 02:50 | I mean really, what now?
| | 02:52 | What can I actually do with this?
| | 02:54 | Well, one very quick way you can do it
is actually just grab my custom.css file,
| | 02:59 | and just drag it over somewhere into the page.
| | 03:01 | You just really need to drop it somewhere
where you don't get the not allowed sign.
| | 03:05 | It doesn't really matter.
| | 03:06 | Now it might look a little silly to be
dropping it into a visible part of the
| | 03:10 | page, but when I let go, I can
actually instantly tell it seemed to get applied
| | 03:14 | because my Team Site that I had
change the style of has just jumped up and
| | 03:19 | doubled in size and the fonts.
| | 03:21 | If I actually go into my Code View,
and go up towards the top, coming down a
| | 03:26 | little bit, I can see that it has
added a link here to my custom.css.
| | 03:32 | Now to make no mistake about this,
| | 03:34 | this is a very quick, and not all that
elegant way of doing it, but it would work
| | 03:39 | for this particular page.
| | 03:40 | Of course, what I could do is also have copied
in that style and put them in as inline styles.
| | 03:47 | I'll just undo that, because there
is a section of inline styles in your
| | 03:51 | typical WSS homepage.
| | 03:53 | So it could have done it there, but I'm
a big fan of doing external style sheets.
| | 03:58 | But at the moment, we have limitations.
| | 04:00 | This new style would only affect
the homepage of this particular site.
| | 04:04 | It wouldn't affect any of the other
pages, any of the entry pages, any of the
| | 04:08 | view pages, nothing else, and that
leads us into a key question of where should
| | 04:13 | you put the custom.css, which we'll see shortly.
| | 04:17 | Now switching back to my Design View,
so that I can make my Styles Pane appear,
| | 04:22 | I can understand if you may be tempted
to say well, what's really the problem
| | 04:25 | with say, selecting one of these and
then saying Modify Style, which will bring
| | 04:30 | me up this little wizard menu where I
can actually select from a selection of
| | 04:35 | font sizes and fonts?
| | 04:37 | It's showing the highlighted ones, which are any
of that have been changed from the default.
| | 04:41 | Making a change to it that way
is changing the core.css file.
| | 04:46 | I can see that from the Asterisk there.
| | 04:48 | Once again, and I'm kind
of repeating this process,
| | 04:51 | if I then close this file down and say,
Save changes, it's going to say, yep,
| | 04:55 | you're going to customize this.
| | 04:56 | Do you want to do this?
| | 04:57 | I'm going to say Yes.
| | 04:59 | It's immediately going to create this
new _styles folder, and put in core.css
| | 05:03 | customized from the underlying site definition.
| | 05:06 | I don't see that icon, obviously, in my
own custom.css, because that wasn't in the
| | 05:11 | basic site definition.
| | 05:13 | That is custom to begin with.
| | 05:15 | But I'm not a big fan of changing core.css.
| | 05:18 | even though it's very tempting to do
it very quickly for one or two changes.
| | 05:22 | But you'll find that if you want to do
substantial changes, trying to edit and
| | 05:25 | keep track of all the 4000 lines in core.css
| | 05:28 | is going to be very, very time-
consuming, and it's much better to
| | 05:31 | create your own.
| | Collapse this transcript |
| Saving custom CSS for accessibility| 00:01 | If you are going to make your own CSS
file, and you'll probably need to, the
| | 00:05 | question is where does it go?
| | 00:06 | Now that might sound like a simple
situation, but it really isn't. Your first
| | 00:10 | question should, in fact, be how many
places, meaning how many pages and how
| | 00:14 | many sites, do I want to use this?
| | 00:17 | If your situation is that you just want
a style for one page and one site, well,
| | 00:22 | then you have one answer.
| | 00:23 | If you say you want to change a style
that affects every page and every site
| | 00:27 | and every site collection, well,
that's a quite a different thing.
| | 00:31 | Now with something like a basic WSS site,
| | 00:34 | I've just manually created a
custom.css file at the root of the site.
| | 00:39 | I've dragged and dropped it onto my
homepage, and that would work for one page,
| | 00:43 | but it isn't gong to
change any of the other pages,
| | 00:45 | and particularly not the generated
pages on the site like my Entry pages, my
| | 00:50 | List of View pages, my
Settings pages, anything like that.
| | 00:53 | To change all the generated pages
that SharePoint is going to create, we're
| | 00:57 | going to have to get into master pages,
which we will get into very shortly.
| | 01:01 | Now while I could put
this at the root of the site,
| | 01:04 | there is another place.
| | 01:05 | I could actually have a Document Library.
| | 01:07 | There is no real reason why a CSS file
couldn't go in say my Shared Documents Library.
| | 01:13 | I might even create a new SharePoint
Document Library to hold my custom.css.
| | 01:18 | It's not a problem there, and then I can
even manage it using the browser in SharePoint.
| | 01:22 | I could turn versioning on.
| | 01:24 | I can have multiple versions of my CSS files.
| | 01:26 | Now what I'm gong to do is actually
open up another site in SharePoint
| | 01:30 | Designer, which is going to be my Portal site,
the Collaboration Portal at ldcsharepoint.com.
| | 01:39 | The reason I'm going to show
you this is we've talked about the
| | 01:41 | Publishing feature before.
| | 01:43 | One of the things that the
Publishing feature does is create a library
| | 01:47 | called the Style Library.
| | 01:49 | This is the suggested place for you to
put your own custom styles when you are
| | 01:54 | creating them for a MOSS publishing site.
| | 01:57 | We even have the capability
of having multiple languages.
| | 02:01 | I've only got English for the US right now.
| | 02:03 | We've got Core Styles inside there, and
a lot of these are the extra styles that
| | 02:08 | MOSS needs for what it does with its
own custom controls and its own areas.
| | 02:13 | But it's quite common that I might, for
example, right here, create a New Folder
| | 02:19 | called Custom, and I put my
own Custom Styles in here.
| | 02:23 | What that really means is any CSS that
I put here is going to be available to
| | 02:29 | the entire Site Collection.
| | 02:30 | It's in the Style Library at the root
of this Site Collection, and it could be
| | 02:34 | available anywhere here.
| | 02:36 | The suggestion is that you do put it
under the specific language folder.
| | 02:41 | Now one question I'm often asked is what
if I want to create a custom stylesheet
| | 02:45 | and want it available
everywhere, created server wide,
| | 02:49 | so any Site and any Page and any
Site Collection could see the CSS file?
| | 02:54 | Well, that would require access actually
to the Web Server itself, but you could
| | 02:59 | end up storing your own CSS file
beside the ones on the file system here,
| | 03:04 | perhaps creating a custom folder here
called Custom Styles and linking to that.
| | 03:08 | It's an unusual way, and you would need
to have access to the Web Server to do
| | 03:12 | it, but it is possible, and that
would make it available server wide.
| | 03:16 | The core question, and we're going
to repeat this a few times as we start
| | 03:20 | creating these custom CSS files,
| | 03:22 | the core question is not where do I save my
CSS? It's where do I save my CSS so it's
| | 03:28 | only accessible by the sites that need it?
| | 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:04 | You are going to look at a page and
want to find out what styles are being
| | 00:07 | applied to one particular link, whether
that's the header or one of the tabs or
| | 00:12 | say the link View AllSite Content here.
| | 00:14 | Now you might think that you can just
open View Source, find the element and
| | 00:19 | visually look to see what classes, or
IDs are being used on it, and that kind of
| | 00:24 | works a little bit, but
it's not always that reliable.
| | 00:27 | Once again, if you're coming from a
background of validating well-structured
| | 00:31 | XHTML and CSS, you might
be very happy with this.
| | 00:34 | That will too be very reliable.
| | 00:35 | In SharePoint, not so much.
| | 00:37 | It's still can be useful.
| | 00:39 | So if I right-click and say View Source,
do a Find for View All Site content,
| | 00:44 | I can see it here, and I might just
take my eyeballs and look around it.
| | 00:49 | And see it seems to be
contained in a div with a class equals
| | 00:53 | ms-quickLaunch header.
| | 00:55 | I could take that and find
out what's being applied there.
| | 00:58 | Well how would I do it?
| | 00:59 | By switching back over into
SharePoint Designer, if you don't have a copy
| | 01:04 | of core.css, which as I've mentioned is a
useful thing just to have one lying around.
| | 01:08 | But if you have, say, the page open in
Design View, you will see your Apply Styles menu.
| | 01:14 | If you go up to the top of that where
you see the phrase core.css and just
| | 01:18 | double-click that, and it should open it up.
| | 01:20 | And in here I could do a Find on the
phrase ms-quicklaunchheader. Jump down.
| | 01:28 | It's at line 917.
| | 01:30 | We appear to have quite a few things around it.
| | 01:32 | Because if you see here we've got
a ms-quickLaunch at line 909 and
| | 01:37 | quicklaunchheader, quicklaunchheader
with an anchor tag, quicklaunchheader with
| | 01:41 | an anchor tag of a hover state.
| | 01:43 | There's a whole bunch of
stuff that could be going on.
| | 01:46 | And yes, changing these
may be completely reliable.
| | 01:49 | But sometimes you'll also find that
because that's been embedded in another div,
| | 01:54 | or another table tag, you might have
multiple styles being applied to it.
| | 01:58 | So I am going to show you a better way
to reliably find where you have to change.
| | 02:02 | Going back into Internet Explorer here.
| | 02:06 | Now I'm on Internet Explorer version 8,
which has a built-in feature called
| | 02:11 | the IE Developer tools.
| | 02:13 | These are available for IE 6 and IE
7, but they are an extra download.
| | 02:17 | You'd have to go and search for
the phrase IE Developer toolbar.
| | 02:21 | And I am going to show you
a couple ways of doing it.
| | 02:24 | But on an IE 8 I have my page opened, I
just hit F12, and it opens up this whole
| | 02:30 | developer screen here.
| | 02:31 | Well it doesn't look immediately obvious
here, but what I'm doing is I can break
| | 02:35 | down and open up, and start going
through the HTML that the page has generated.
| | 02:40 | Yes, I am going to have to dropdown a
little bit in there, but I can actually say
| | 02:44 | and find that phrase View AllSite Content.
| | 02:49 | And it's going to show me in a very
structured DOM format, document object model,
| | 02:53 | of exactly where that is in the HTML,
| | 02:57 | not only that, but show me over here
all the different styles that could be
| | 03:02 | being applied to it.
| | 03:03 | So I can see that I have my ms-
quicklaunchheader here, which is affecting the
| | 03:07 | font size of 8 points and
the font weight of normal.
| | 03:10 | And that because it's a link it's also
having the Anchor Tag that the color is 003399.
| | 03:17 | But I can also see things like
where's my font family coming from?
| | 03:21 | Well it's all the way back up here.
| | 03:22 | That in core.css in the dot ms-nav
is a font family of tahoma there.
| | 03:29 | So this allows me to see where my
different styles are actually being applied.
| | 03:33 | You also have Trace Styles option here,
which is actually showing you kind of
| | 03:37 | the other way round about where
the individual piece i9s coming from.
| | 03:41 | More focusing on the individual
things like text alignment, font size, font
| | 03:45 | family, instead of the
actual style names themselves.
| | 03:49 | So very useful stuff.
| | 03:50 | You got the Layout option just kind of
giving you some hints and reminders on
| | 03:53 | the box model, that kind of thing.
| | 03:55 | There's an awful lot you can do
with the IE 8 Developer toolbar.
| | 04:01 | It'll allow you to have a CSS browser,
as I can see by clicking this tab here,
| | 04:05 | so definitely something worth get into
grips with if you're going to spend a
| | 04:09 | lot of time doing this.
| | 04:10 | If you're not an IE 8 person, you
might be aware of the equivalent on the
| | 04:15 | Firefox browser, which is called Firebug.
| | 04:17 | If I open up F12, there it
kind of splits the screen in two.
| | 04:22 | The cool thing about this is as I start
to expand the different parts of HTML,
| | 04:28 | when I highlight the different
parts of my page, like my table class is
| | 04:32 | highlighting everything,
| | 04:33 | but as I step down and expand it,
I've got my table body and the
| | 04:37 | individual table rows.
| | 04:38 | I can start to identify the
different parts of my page itself.
| | 04:42 | I can perhaps drop down in here into my
table row eventually start finding the tables.
| | 04:47 | Here is where we really get to see
kind of the levels of nesting that we have
| | 04:51 | that were nesting one inside another.
| | 04:53 | But I'm starting to narrow that down and
expand it to the different things that I have.
| | 04:57 | Again, I do have to drop down, as you can
see, several different levels inside that.
| | 05:03 | There is the quickLaunch bar dropping
down even further, QuickLaunchmenu a body
| | 05:09 | inside that, just a whole
bunch of different stuff in here.
| | 05:13 | Now one of the great things about it
is every time you select an element, it
| | 05:17 | will actually tell you a style area
over here and tell you where it's drawing
| | 05:22 | some of its information from, where
its drawing the font family from, the
| | 05:25 | font size, the line height, where
its being inherited from the TD tag
| | 05:29 | override, the table.ms-nav.
| | 05:32 | So another way of looking
at it. This is a plug-in.
| | 05:35 | It's a free plug-in for the
Firefox browser, and it's available
| | 05:38 | from getfirebug.com.
| | 05:41 | Using either of these tools, IE 8
Developer tools or Firebug, you can find
| | 05:47 | exactly where a particular piece
of CSS is affecting your elements.
| | 05:51 | You want to pick one of these tools and
become very, very comfortable using it.
| | 05:55 | Taking just you own eyeballs to the
markup that SharePoint generates is a
| | 05:59 | recipe for frustration.
| | Collapse this transcript |
|
|
7. Customizing WSS SitesIntroducing master pages in WSS| 00:00 | You've seen that most pages on
SharePoint site look very similar to each other.
| | 00:05 | They have got their quick
launch navigation on the left.
| | 00:08 | They have the top link bar.
| | 00:10 | They have the
breadcrumbs and the Search section.
| | 00:13 | And it's really just the
content of the pages that is changing.
| | 00:17 | This rest of the stuff is staying the same.
| | 00:20 | That's because all SharePoint sites
use something called Master Pages, pages
| | 00:25 | that define the typical
layout of the page in the site.
| | 00:28 | This is really helpful for us when
customizing SharePoint sites, because if
| | 00:33 | we can change a Master Page, we can instantly
affect the layout of every page in that site.
| | 00:39 | Now, every SharePoint
site has its own Master Page.
| | 00:42 | Every SharePoint site has its own Master Page.
| | 00:46 | The way that you write them is this.
| | 00:48 | You are defining just the common structure.
| | 00:52 | You are saying things like, here is
where the navigation is going to go.
| | 00:55 | Here is where my logo is going to go.
| | 00:57 | Here is where my Search box is going to go.
| | 00:59 | And you create and define all that.
| | 01:01 | You just leave a section of it
and say this is my placeholder.
| | 01:06 | I am going to say that content will go here.
| | 01:09 | You don't describe what that content is.
| | 01:11 | You just put a place for it, a
placeholder for your content.
| | 01:14 | Then you team this Master Page up with
one or more, potentially hundreds, or even
| | 01:20 | thousands of content pages.
| | 01:22 | And they say, on the flipside, A) I'm
going to use that Master Page and B) This
| | 01:28 | is the content that I'm going
to provide for that placeholder.
| | 01:31 | And when somebody actually goes to the
page and requests it by typing it into
| | 01:36 | the browser or clicking a link, these
two things will be combined, and the
| | 01:40 | results will be delivered to the client.
| | 01:43 | And what that actually means is just
by changing the Master Page and not
| | 01:47 | touching any of your content pages,
you can shift your layout around.
| | 01:50 | Whether for good or for bad, you can
change the basic blue to something with
| | 01:54 | green, and rearrange your quick launch bar.
| | 01:57 | You can move it from one side to the
other, and the content in the middle
| | 02:01 | will stay the same.
| | 02:02 | You have an awful lot of power with
master pages to change your complete design
| | 02:07 | without ever worrying about
changing the individual pieces of content.
| | 02:10 | Now one thing to be aware of: Master
Pages exists in SharePoint, because
| | 02:16 | SharePoint was written on a
technology called ASP.NET.
| | 02:19 | And in ASP.NET, Master Pages are often
quite simple, including perhaps a logo,
| | 02:24 | some core navigation, a header and a footer.
| | 02:26 | And in SharePoint, they are much more complex.
| | 02:28 | They are bit more complex
than what I showed earlier
| | 02:31 | simply because rather than just
having one placeholder for your content,
| | 02:36 | you need to create your Master Page
and say, okay, I'm going to have my
| | 02:40 | Search bar somewhere.
| | 02:41 | I'm going to have my navigation somewhere.
| | 02:43 | I am going to have my logo somewhere.
| | 02:45 | I am going to have my dropdown
menus somewhere, because not just your
| | 02:48 | content pages, but SharePoint is going to
attempt to inject things into your Master Page.
| | 02:54 | And you have to be aware of that.
| | 02:57 | And we will see exactly how.
| | Collapse this transcript |
| Understanding the placeholders in WSS master pages| 00:00 | So let's explore what's
inside an actual master page.
| | 00:03 | I'm in a fairly typical WSS team site,
and I'm going to go into the _catalogs
| | 00:09 | folder and then into its masterpage
folder where I've got default.master that
| | 00:15 | I'm going to open up.
| | 00:16 | Now, depending on the kind of site you
have, you may see a few different things
| | 00:20 | here, but any page that ends in
.master is, not surprisingly, a master page.
| | 00:25 | These are not pages that'll ever be
directly seen by a user, but they'll be used
| | 00:31 | to generate hundreds or
thousands of other pages.
| | 00:34 | Now, as I start to look at this, and I
am in Code View, I can see there is an
| | 00:38 | awful lot of stuff in here.
| | 00:39 | The idea is anything that's defined
once in the master page, of course, gets
| | 00:43 | reused by any page that uses this master page.
| | 00:47 | And there is a lot of stuff to this.
| | 00:49 | And I sympathize if you didn't really
want to look any further, but we have to.
| | 00:53 | We have to kind of journey into the depths
of the master page in order to understand it.
| | 00:58 | I am going to go right back to the top here.
| | 01:00 | Now, I am not trying to teach your
ASP.NET here, but you can understand that
| | 01:05 | several of these initial tags at the
top of the page are really instructions to
| | 01:10 | the ASP.NET, which is really the
engine that SharePoint is using to run.
| | 01:14 | After that, down a few links further,
we have these very specialized tags,
| | 01:19 | things like SharePoint:
DelegateControl SharePoint:CssLink.
| | 01:26 | This, as you might imagine, is going
to be replaced with the actual links to
| | 01:30 | things like core.css and
any themes that we're using.
| | 01:35 | So what's actually there in the master
page will never be sent to a user's computer.
| | 01:39 | These tags are going to be evaluated
when this page is requested, and the
| | 01:44 | results of executing these tags, go
and look up the CSS information is going
| | 01:50 | to be replaced here.
| | 01:51 | Now, as I start coming down a little further,
I am going to start seeing a lot of this stuff,
| | 01:56 | a thing that says ContentPlaceHolder.
| | 01:59 | This is an ASP.NET tag, and as we
mentioned in the previous movie, the idea of a
| | 02:03 | ContentPlaceHolder in a master page is
we are describing an area that is going
| | 02:09 | to be filled with something.
| | 02:11 | We're creating a placeholder that
later will have content for it, and you'll
| | 02:15 | see a lot of these.
| | 02:17 | There are many, many
ContentPlaceHolders as we start going through there.
| | 02:21 | Some you are going to care
about and some you won't.
| | 02:25 | So you'll see that tag a lot, but just
because you don't care about it doesn't
| | 02:30 | mean you can ignore it.
| | 02:31 | Let me switch back to Design View,
because we'll see a few there too.
| | 02:36 | This might look a little bit more organized.
| | 02:38 | As I click around, I am actually
going to see kind of a faded little prompt
| | 02:44 | here, and it's tough to read sometimes,
but its saying things like Place Holder
| | 02:49 | Calendar Navigator, Place Holder Left
Nav Bar Top, Place Holder Left Nav Bar.
| | 02:54 | Over here, I have Place Holder Main,
which is one of the more common ones.
| | 02:58 | But let's say, for example, that you're
working with a master page, maybe you're
| | 03:02 | planning around and editing one.
| | 03:04 | You are in say a Split View, and
you're clicking around and you see that this
| | 03:09 | area here where the Search box seems to
be contained in a asp Content Place Holder.
| | 03:15 | And you think, you know what I am trying to do
is actually get rid of the search box anyway.
| | 03:19 | I don't want to have people to use it.
| | 03:21 | So what I'm going to do is delete that.
| | 03:23 | I don't want that place holder anymore.
| | 03:25 | I am going to now save that.
| | 03:26 | I am changing the master page.
| | 03:29 | So it's going to say you are
customizing a page from the site definition.
| | 03:32 | Do you want to do this, yes I do.
| | 03:34 | I am detaching from that core shared one.
| | 03:37 | Now, over here, I have got that little
icon to say this page is customized. Okay.
| | 03:42 | So what happens if I open this up
in the browser? There we go, error.
| | 03:46 | An unexpected error has occurred.
| | 03:48 | Just because you didn't care
about that placeholder, doesn't mean
| | 03:51 | SharePoint doesn't.
| | 03:52 | SharePoint really wants to see that search box.
| | 03:56 | It's trying to find the placeholder.
| | 03:58 | It hasn't found it, so it's crashed.
| | 04:00 | I am going to go back here and just undo,
Ctrl+Z, undo my changes. Save that again.
| | 04:06 | Occasionally, we will get this message,
and it's often just about the fact that
| | 04:10 | the page is making a lot of
calls back and forth to the database.
| | 04:13 | I am just going to say Yes, go
ahead and continue, and save that again.
| | 04:18 | Change back over and refresh this page.
| | 04:21 | And we're back to where we were before.
| | 04:23 | It's working correctly.
| | 04:25 | The deal is as we are clicking
around, we can actually select the
| | 04:29 | different placeholders.
| | 04:30 | And they are sometimes
little difficult to grab hold of.
| | 04:33 | But as we select them, and
certainly select the names themselves, we
| | 04:37 | click somewhere in there,
| | 04:38 | we can actually find the different
placeholder, placeholder page image, clicking
| | 04:42 | in here, the placeholder title
breadcrumb, because a lot of these placeholders
| | 04:47 | have default contents like the search area.
| | 04:49 | Now, of course, the key is that
you're not just creating a master page.
| | 04:54 | You are creating new pages
based on that master page.
| | 05:00 | So let's see another
perspective of these placeholders.
| | 05:02 | If I go to the root of my site, what I
am going to do is go to my File menu, hit
| | 05:07 | my New option, and I want to make a
new page, but I don't just want to select
| | 05:11 | the first option. I want to say
make a new Create from Master Page.
| | 05:16 | Select that one, and it's
going to look and say Hey!
| | 05:19 | Your default master page is this one
under _catalogs/masterpage/default.master.
| | 05:25 | Is that the one you want? Yes it is.
| | 05:27 | I click OK.
| | 05:29 | Now, I have this untitled_1.aspx page.
| | 05:34 | If I actually look at the entirety
of the code that's there, that's it.
| | 05:38 | We actually have a new Web
page here that has one command.
| | 05:42 | It may look very complex, but it's
really just saying I use default.master, and
| | 05:46 | until you say otherwise,
that's all I'm going to do.
| | 05:49 | What you have to do to actually
provide your own content on this page is you
| | 05:53 | have to provide content for those placeholders.
| | 05:57 | If I switch into Design View, we see a
lot, and you might think well, where is
| | 06:01 | all this coming from?
| | 06:02 | Well, of course, it's
coming from the master page.
| | 06:05 | But in fact, if I click around,
you'll see that I don't really get the
| | 06:08 | opportunity to directly click in here,
and directly change things, because I'm
| | 06:13 | really just highlighting
areas that I can't edit.
| | 06:17 | For creating content, one of the key
places for a new page is actually this
| | 06:21 | guy, PlaceHolderMain.
| | 06:23 | It even sounds like one on the most
important placeholders, and it really is.
| | 06:28 | However, it's a very common thing that
if I say I want to provide content for
| | 06:31 | PlaceHolderMain, I can't just
click here and start typing.
| | 06:35 | Nothing is happening.
| | 06:36 | What I have to do with that placeholder
selected, is I have this little dropdown
| | 06:41 | arrow here, and I have to say
yes I want to. I am volunteering.
| | 06:45 | I am providing content for that placeholder.
| | 06:48 | So I select this option. It says, oh!
| | 06:50 | You want to create your own
custom content here? Well, yes I do.
| | 06:54 | I select it.
| | 06:55 | It changes over here to say custom, but
now I can actually click inside here and
| | 07:00 | type in, Here is my custom content.
| | 07:04 | Now if I switch back to the Split View,
or even the Code View, I can actually see
| | 07:09 | what's actually been added?
| | 07:10 | Well, it's given a asp:Content tag.
| | 07:14 | This is directly matching, in the
master page, the Place Holder Main
| | 07:20 | Content Place Holder.
| | 07:22 | So essentially, this tag is being
replaced from the master by the contents of
| | 07:28 | this tag here, the asp:Content tag, and
that's being replaced when this page is requested.
| | 07:34 | So the entirety of my page can
actually have this much code in it, which is
| | 07:39 | really one little piece of code.
| | 07:42 | But when we view this page in the browser,
it's going to look like the full page
| | 07:47 | with all the navigation, with the
quick launch bar, with the search bar, with
| | 07:51 | everything that the master page supplies.
| | 07:53 | The idea, of course, is that when
you're working with, or creating these master
| | 07:58 | pages by providing this amount of
structure in your master page, you don't have
| | 08:03 | to worry about not being able to
deliver what you need when it comes time to
| | 08:06 | create your 10th, or your
100th, or your 1000th page.
| | Collapse this transcript |
| Creating a copy of default.master| 00:00 | The best way to create your own
master page is to copy one. End of story.
| | 00:05 | I understand that you think
that starting from a blank page,
| | 00:08 | you can develop your own master page
that'll be a lovingly crafted Faberge egg
| | 00:12 | of XHTML perfection, but you'll probably
find that starting with an existing one and
| | 00:16 | either ripping out or just adding your
own content is by far the preferable way
| | 00:21 | to go if your value your time at all.
| | 00:23 | There are so many placeholders that you
absolutely must have in your master page.
| | 00:28 | It's much easier to copy one.
| | 00:29 | So then your first question might
actually be, can I just directly
| | 00:34 | edit default.master?
| | 00:36 | Well sure you can, though I do
recommend copying it, particularly that we are
| | 00:40 | working with WSS right now.
| | 00:42 | And that does mean that any change you
make to default.master will be instantly
| | 00:47 | attempted to be used by anybody
viewing any page on this Web site.
| | 00:52 | And that means if you make a simple
mistake and just hit Save, you are going to
| | 00:55 | break the page for everybody else,
whereas if you have a copied one, you can
| | 00:59 | work on that for a while
still using default.master.
| | 01:04 | I'm going to right-click and say Copy
and then just right-click the master page
| | 01:09 | itself and say Paste, and we've got
default_copy.master. I can rename that,
| | 01:16 | perhaps as custom.master.
| | 01:20 | Now right now, this is not being used.
| | 01:24 | default.master is still being used.
| | 01:26 | In fact, I can from SharePoint
designer if wanted to switch them, I can
| | 01:29 | right-click custom.master and say set
this guy as the default master page.
| | 01:35 | I'll do that a little later.
| | 01:37 | So let's have a look at custom.master.
| | 01:39 | I'm going to open that up.
| | 01:40 | Again, you can open it up in Design
View, or Code View, or a split of the two.
| | 01:45 | And this is a copy of the default.master,
but it's a copy that I can start now
| | 01:50 | playing around with and messing around
with, and whether I want to start messing
| | 01:53 | around with it by ripping things out
or perhaps even commenting things out,
| | 01:58 | that's kind of up to me.
| | 01:59 | If I want to start using, say, HTML
comments, I might comment out a bunch of say
| | 02:05 | the SharePoint:CssLink and
SharePoint:Theme, and then save that.
| | 02:12 | Now, right now, of course, this
page, this team site is using the
| | 02:19 | default.master page.
| | 02:21 | If I want to try and make it use
custom.master, I am going to right-click,
| | 02:24 | Set as Default Master Page.
| | 02:26 | It's giving me the warning that I've
given you multiple times that if you
| | 02:29 | change it, you'll break any attached
pages that don't have a matching set of
| | 02:34 | named content region.
| | 02:35 | That really just means your
placeholders need to match up with the different
| | 02:39 | parts SharePoint that are
trying to fill those placeholders.
| | 02:43 | I'm going to say yes, I want to continue.
| | 02:45 | Refresh this page, and it's looking
very ugly indeed, because what I've really
| | 02:50 | done in the master page is
rip out the typical CSS link.
| | 02:55 | That does mean there is kind of a
problem with how we are going to make this
| | 02:58 | site workable, things like the
dropdown boxes, stuff like that, are not really
| | 03:03 | working all that well.
| | 03:04 | No particular surprise.
| | 03:05 | Some of the JavaScript is still there.
| | 03:08 | But you can kind of get the impression
of just how much core.css is actually
| | 03:12 | adding to your pages just by default,
even before you started change it.
| | 03:17 | So even though this is a good way to
experiment with some of the stuff, you'll
| | 03:20 | will find that there's very little you
can do without having those tags active
| | 03:25 | in your master page, because you really do
need to be bringing in the core CSS files.
| | 03:30 | But going further on down, of course,
what you can start manipulating now
| | 03:34 | is start to play around with how is the page
being presented, how is it being formatted?
| | 03:40 | If you are used to typical Web
development, you are used to finding say your
| | 03:43 | body tag and immediately putting your
own stuff in there. What you want to do
| | 03:48 | and what you need to do in SharePoint
is actually start to put your code after
| | 03:53 | the form tag and one of the ways you
could actually do it is actually see what's
| | 03:57 | being contained here.
| | 03:58 | We've got a body tag -
| | 03:59 | let me split this apart a little bit -
the form element, and then inside
| | 04:04 | that we've got Web part pages and something
called the SP for SharePoint Web Part Manager.
| | 04:09 | Now surprisingly, it's going to be in
charge and manage the Web parts on this page.
| | 04:14 | What's now here at line 31, which
because I've split it out it may look a
| | 04:18 | little different for you, is the
actual start of what our page really looks
| | 04:23 | like with this table here.
| | 04:25 | Now, of course, if you're more of an
XHTML structured kind of person, you might
| | 04:29 | stop wanting to replace this with divs
and have a completely tableless design,
| | 04:34 | and you could certainly go to
town on that and knock yourself out.
| | 04:38 | One of the ways you might do it is
instead of just start replacing the design,
| | 04:42 | you stop putting your own stuff
inside here of say having a div id of
| | 04:47 | mainSection, and instead of replacing
that content, you can then grab some of
| | 04:54 | the content placeholders in different
parts of this say your global navigation,
| | 04:59 | for example, and sitemap path and
actually moving it to a different location.
| | 05:05 | Particularly when you've got things
like the Split View turned on, you can find
| | 05:10 | that by selecting pieces,
| | 05:12 | you've got the tag hierarchy here, and
one of the things you can do is make sure
| | 05:17 | that you've selected the entire content
placeholder, and start to grab that, cut
| | 05:22 | it, and perhaps move it up a bit and
start to paste it into your own design.
| | 05:27 | Now, we're going to go a little
further with this, obviously, as we go forward,
| | 05:31 | and you are going to see something
called a minimal master page, which is about
| | 05:34 | as close to a blank slate as you can do.
| | 05:37 | But this would be one of the ways in
which you could just copy, create your own
| | 05:41 | master page and then start making
changes to it and moving things around until
| | 05:45 | you really get to grips with the
necessary placeholders in there.
| | 05:49 | Remember that with WSS, any change you
make is being instantly applied to the site.
| | 05:54 | So I have just save that and if I flick
back over and refresh it, I've got some
| | 05:59 | interesting kind of behavior obviously
happening here that we've got some parts
| | 06:04 | which are looking a little different
because I'm moving them outside the
| | 06:07 | conventional design.
| | 06:09 | And one of the things you may want to
do is always have a generic master page
| | 06:14 | ready that if you make an accidental
change that really blows it up, you can
| | 06:18 | just go back to default.master, right-
click and say Set as Default Master Page.
| | 06:22 | Go back over to the site.
| | 06:25 | Refresh it to make our own comparisons.
| | 06:28 | So I do suggest always working on a
copy of default.master, because it is very
| | 06:33 | easy to accidentally break these things,
but this is how we'd start to create
| | 06:36 | our own master page and work with it.
| | Collapse this transcript |
| Restoring default.master| 00:01 | It's very common that at some point you'll
mess up the Master Page that you're working on.
| | 00:05 | And that's no big deal if you're
working on a copy, but if you are directly
| | 00:07 | changing the Default.master Master Page
on the WSS Site, well, if you break the
| | 00:12 | Master Page, you have broken the site.
| | 00:15 | So here I'm working with
a CustomizeDefault.master.
| | 00:19 | I can tell it's customized by the blue icon.
| | 00:21 | Let's say I was
starting to rip this page apart.
| | 00:24 | Well, you'll find that there are some
content placeholders that are kind of optional.
| | 00:30 | I am going to rip out this one here,
which is the PlaceHolderGlobalNavigation
| | 00:34 | Site map, just cut that and Save.
| | 00:39 | Go back over here to my Team Site and
watch this link up here as I refresh the page.
| | 00:43 | Was there, now, it's gone.
| | 00:46 | This thing didn't blow up though.
| | 00:48 | So some things are kind
of removable in the sense.
| | 00:51 | You can do a lot of playing
around with these Master Pages.
| | 00:55 | Let's say I come down a little further,
and I'm feeling kind of emboldened by this.
| | 01:00 | I'm going to grab another placeholder, which
is the search area, delete that, click Save.
| | 01:04 | Again, occasionally, get a message if it
hasn't fetched anything back immediately.
| | 01:09 | Go back over to this Team
Site, refresh and we get error.
| | 01:14 | An unexpected error has occurred, which
is a lot worse than an expected error.
| | 01:19 | And this is causing our
entire Web site to break.
| | 01:22 | Now obviously, what will be a really good
thing is if we had multiple copies of this.
| | 01:26 | But if you have broken something,
luckily remember that all our sites are, of
| | 01:30 | course, built on a basic template.
| | 01:32 | We can use that to get the
original Master Page back.
| | 01:35 | Now obviously, if I had made a lot of
changes to this, what I might first do is
| | 01:40 | copy them to another file.
| | 01:42 | Just kind of right-click, copy and
paste this file, so I'd at least have my
| | 01:46 | changes that I've made.
| | 01:47 | And then after that, just right-
click and say Reset to Site Definition.
| | 01:51 | It's going to remind me that the
original contents will be reset.
| | 01:54 | Is this okay? Sure.
| | 01:57 | That will be automatically saved.
| | 02:00 | I refresh the page, and
we're back to the way we were.
| | 02:02 | So it's another reason to develop
your Master Page as a separate file.
| | 02:06 | That way you can compare and contrast
and easily use your ability to change from
| | 02:11 | one to the other to see
whether they're working or not.
| | Collapse this transcript |
|
|
8. Customizing Sites with WCMIntroducing master pages in WCM| 00:00 | So far, we've been looking at Master
Pages in WSS sites, and these are pretty
| | 00:04 | simple and straightforward.
| | 00:06 | You're describing the general structure
of every page in your SharePoint site.
| | 00:11 | You are describing the navigation,
what goes along the top, where your search
| | 00:15 | goes, where your dropdown options go.
| | 00:17 | But you are kind of limited by this
one generic piece of content that all
| | 00:22 | your content pages fill.
| | 00:25 | However, when you've got a site with the
MOSS Publishing Feature turned on, like
| | 00:29 | a collaboration portal or a publishing
portal, all of this is still completely
| | 00:33 | relevant, but we have more to
deal with, and its good stuff.
| | 00:37 | First is the idea that just having one
master page and a thousand content pages
| | 00:42 | is not quite all the structure
you'd ever want to do on a complex site.
| | 00:47 | You can't just describe a couple
of headers and footers and be done.
| | 00:50 | You want more specific templates
for different pages on your site,
| | 00:54 | things like product pages and
buyer pages, location pages.
| | 00:58 | So a publishing site uses master pages
and uses content pages, but it also has
| | 01:03 | what are called page layouts.
| | 01:05 | Now, page layouts don't replace master pages.
| | 01:08 | They are in addition to.
| | 01:10 | And in fact, all three of
these are used together.
| | 01:14 | A common arrangement would have you create
one master page and several page layouts,
| | 01:19 | a page layout for product pages, a
page layout for bio pages and so on.
| | 01:24 | And what happens is all
three of these are combined.
| | 01:27 | You have your master page that defines
your overall structure, your page layout
| | 01:31 | page that defines the structure of the
individual content, and then your content
| | 01:35 | pages that say what that content actually is.
| | 01:38 | And what the end benefit is that when
you create a page in a publishing site,
| | 01:43 | you don't just say make me a page,
you say make me an article page.
| | 01:47 | Make me a product page, make me a bio page
and have a very controlled structure to that.
| | 01:51 | Now, publishing sites do add some more work
in your design, but it's all about structure.
| | 01:57 | It's about defining your different
pages upfront, and it will save you a lot
| | 02:00 | of headaches later.
| | Collapse this transcript |
| Exploring the master page gallery| 00:01 | SharePoint is really big on
this thing it calls a Gallery.
| | 00:04 | And you'll find a set of galleries
under your Site Actions > Site Settings page.
| | 00:09 | The idea of a Gallery in real
life is that you put something in it.
| | 00:12 | You want it to be on display
to a whole bunch of people.
| | 00:15 | Well, in our case, the content we put
in SharePoint galleries is typically
| | 00:20 | viewable by any site in that Site Collection.
| | 00:22 | So in our central section here, we
have Galleries for Site content types,
| | 00:27 | Column site templates, List templates,
Web Parts, Workflows, and we've got
| | 00:32 | Master pages and page layouts.
| | 00:34 | Again, because we are in a MOSS
Publishing Site, we will see this Master pages
| | 00:38 | and page layouts link.
| | 00:40 | Officially, you always have
at least a Master page Gallery.
| | 00:43 | In a WSS Site, it's not very exciting.
| | 00:46 | In MOSS, it goes quite a lot deeper.
| | 00:49 | This is viewing the Master
page gallery by using the browser.
| | 00:52 | And I can immediately see that I even
have a whole bunch more Master Pages here.
| | 00:56 | Anything that ends in
.master is indeed a Master Page.
| | 01:01 | Notice that there are also a lot of .aspx files:
| | 01:05 | ArticleLeft, ArticleRight,
ArticleLinks, DefaultLayout, PageFromDocLayout.
| | 01:11 | We are going to run into
a lot of these as we go.
| | 01:14 | But these are our page layout files.
| | 01:17 | These are the ones that come out of the box,
but we are going to also be making our own.
| | 01:20 | Now, if this site is open in SharePoint
Designer, you can see the equivalent of
| | 01:25 | this gallery by going to the
_catalogs/masterpage folder.
| | 01:29 | It's the same content.
| | 01:31 | We are just seeing it a different way.
| | 01:33 | And I could select any of these
and say double-click BlueTabs.master.
| | 01:38 | It is actually going to give me
something new, and tell me this is under source
| | 01:42 | control, do you want to check it out?
| | 01:43 | What they are really is saying is this
entire Gallery has versioning turned on
| | 01:48 | and also requires that the file be
checked out before it can be edited.
| | 01:53 | I could say yes I do.
| | 01:56 | And now we can start looking at this
version of this particular Master Page and
| | 02:00 | seeing whether this one is usual for us.
| | 02:03 | The fact that I have to check that
out does mean that even if I make the
| | 02:07 | simplest change, and I am just going to
say put a space in there and then save
| | 02:11 | this file, do you want to save it? Yes I do.
| | 02:14 | Yes I am customizing it from the
site definition. I understand.
| | 02:17 | I notice that I've got a different icon
here, which is showing me that this is
| | 02:21 | actually checked out.
| | 02:23 | And if I want to make sure that this is
actually now the new version, I'd have
| | 02:27 | to right-click this file and say Check In.
| | 02:30 | It's going to ask you you want to check
in a minor version or a major version?
| | 02:34 | This is because N versioning
is turned on for this library.
| | 02:38 | I am going to say Publish a major version.
| | 02:40 | I think I made a great change that
makes it very active, and click OK.
| | 02:45 | It's going to then pop up with another thing.
| | 02:47 | This document requires content approval.
| | 02:49 | Do I want to change or
modify its approval status? Yes. I do.
| | 02:53 | Approval is actually done through the browser.
| | 02:57 | So it's giving me a prompt here.
| | 02:58 | In a lot of cases, it will
open your browser automatically.
| | 03:01 | But if it doesn't, what you can do is
go back into the browser version of the
| | 03:06 | gallery, find the file that you were working on,
| | 03:09 | let me refresh this, so we can see
some of the latest changes to it,
| | 03:13 | and that's this one here, BlueTabs.master.
| | 03:16 | And I'm going to select
the Approve/reject option.
| | 03:20 | Let's say this was approved,
made some changes, click OK.
| | 03:26 | That might seem a little tedious, but
what it's trying to do is making sure
| | 03:30 | that you are doing a lot of changes to Master
Pages, and they don't go live until you say so.
| | 03:35 | And they certainly even don't go live
till someone who is an approver say so.
| | 03:39 | I can publish and check this in,
and approve it because I do have very
| | 03:43 | high-level privileges on this site.
| | 03:45 | You may be in a position where someone
else has to approve the changes you've
| | 03:48 | made to your Master Page, and this is
because a Master Page gallery is really
| | 03:53 | a SharePoint document library with
Versioning on, with Check In required on,
| | 03:58 | with Approval required.
| | 04:01 | For now, just remember that when you
make a change to one of these files in a
| | 04:05 | MOSS Publishing Site, you're making,
effectively, a new version of the file.
| | 04:10 | And that version won't be counted as
the official version until you publish it.
| | Collapse this transcript |
| Switching master pages| 00:01 | Changing the Master Page that a MOSS
Publishing Site uses is pretty simple, but
| | 00:05 | there are a couple of things to be aware of.
| | 00:07 | In a MOSS Publishing Site, you have the
Master Page option in your Site Settings.
| | 00:11 | So go to Site Actions > Site
Settings > Modify All Site Settings.
| | 00:16 | And there are two links that
will say Master Page in them.
| | 00:19 | You have got the Master Page and page
layouts Gallery, and we saw that earlier.
| | 00:24 | And that's really what's
available for this site.
| | 00:28 | Whereas you have in the Look and
Feel the Master page option, which means
| | 00:31 | which one do we use?
| | 00:34 | Anything that's in the Master page
Gallery that ends in .master and is published
| | 00:40 | will be available as an
option in our Master page setting.
| | 00:43 | So I'm going to select that.
| | 00:45 | And it has got this option here select a
Site Master Page, which will be used by
| | 00:50 | all publishing pages.
| | 00:52 | Really that's shorthand for - this is
the one that you want to change, if you
| | 00:55 | want to change how this Web site looks.
| | 00:57 | If I click the dropdown box, I am
going to have everything that ended in
| | 01:01 | .master will be available.
| | 01:02 | I'm going to select OrangeSingleLevel.master,
gives me a little preview of that if I wanted.
| | 01:09 | I even have an option here to Reset
all of my subsites to inherit this Master
| | 01:15 | Page setting, which is completely up to me.
| | 01:17 | I am going to say, yes I'll do that.
| | 01:19 | If I come down a little further, it
says you have now got another Master Page
| | 01:24 | option for these systems Master Page.
| | 01:26 | Now what does that mean?
| | 01:27 | Well I'll show you.
| | 01:28 | I'm going to leave it as it is right now,
and I typically do, but I am going to
| | 01:33 | show you what this means.
| | 01:34 | The last thing that we have in here,
and I always think that this option
| | 01:37 | should be under some other link in our
Site Settings, but this is where we can
| | 01:43 | specify another CSS URL.
| | 01:47 | If you have created a CSS file and
saved it in a custom folder in your Style
| | 01:52 | Library, this is the place to put it.
| | 01:55 | You'd select this radio button, you'd
browse to that CSS file, and you'd select it.
| | 02:00 | You can even indeed select
all subsites to use them.
| | 02:03 | Unfortunately, this is not an
option that is available in WSS.
| | 02:08 | But it's available in a MOSS publishing Site.
| | 02:10 | It is the best place to
select it and put this option.
| | 02:13 | So really all I have done here
is change my Site Master Page.
| | 02:17 | I am going to click OK.
| | 02:17 | It doesn't really look like anything is
changed as I am looking at my Site Setting page.
| | 02:24 | But if I go back to my home page
of the portal, well things have
| | 02:28 | certainly changed here.
| | 02:29 | If I click around, it does look as if
this Master Page has forced itself down to
| | 02:35 | the bottom, yes indeed.
| | 02:36 | That does seem to be the case.
| | 02:37 | Now there's an odd behavior where the
Document Center in the collaboration
| | 02:42 | portal out-of-the-box, if you're using
it, doesn't appear to accept the changed
| | 02:48 | Master Page, if you're
using one of the built-in ones.
| | 02:50 | That's because the document senses
really kind of its own thing, and it does a
| | 02:54 | couple of unique pieces.
| | 02:56 | If you want to change the Master Page
for the Document Center, you are going to
| | 02:59 | have to use SharePoint Designer, and
kind of change it manually yourself.
| | 03:03 | And actually go into the _catalogs/masterpage.
| | 03:06 | But the rest of them should
actually work with that new Master Page.
| | 03:11 | So there's a couple of kind of questions
here about how we are working with this.
| | 03:16 | If I'm on the home page of the portal,
I've still got my Site Actions menu here,
| | 03:21 | and I go to Site Settings >
Modify All Site Settings,
| | 03:25 | I won't see that new Master Page, and
that's because I'm really looking at one
| | 03:30 | of the behind-the-scenes settings pages.
| | 03:33 | This is what is meant by
having another Master Page.
| | 03:37 | It is kind of used for all the Layout
pages and Site Settings pages, and this is
| | 03:42 | the one that I don't usually change
all that much, because let's face it.
| | 03:46 | It's tough enough getting to
understand where all the options are in
| | 03:49 | SharePoint without introducing a
completely new layout to someone who is
| | 03:53 | already used to SharePoint.
| | 03:55 | So changing the Site Master Page
means that all the pages presented to your
| | 03:59 | typical end-users will use that new
Master Page, but the internal settings pages
| | 04:04 | and pages that we used to create content,
and manipulate settings in SharePoint
| | 04:08 | will still look like your
classic SharePoint way of doing things.
| | 04:13 | There is an option for changing it again,
back in your Site Actions > Site Settings.
| | 04:18 | You can select another Master Page, and
you could even do one the built-in ones.
| | 04:23 | But if you're doing a substantially
different look, you might want to think
| | 04:27 | about whether that's necessary or not.
| | 04:29 | The idea, of course, is that with a
MOSS Publishing Site, once the Master Page
| | 04:34 | has been designed and developed, or
even multiple ones, you don't need
| | 04:38 | SharePoint Designer to actually apply it.
| | 04:40 | It's just a setting.
| | 04:41 | And that anybody who can get
to this page can change it.
| | 04:44 | Of course, you are not going to use one
of these out-of-the-box Master Page files.
| | 04:49 | They are just there to
show you a couple of options.
| | 04:51 | You may, however, find them useful to
see how some of the different looks were
| | 04:54 | accomplished in a SharePoint Master Page.
| | Collapse this transcript |
| Starting off with a minimal master page| 00:01 | We've seen that the easiest way to
create your own master page is to copy an
| | 00:04 | existing one, because that gives all the
placeholder elements that SharePoint is
| | 00:08 | going to look for along the way.
| | 00:10 | And if you have a MOSS publishing site,
you've got quite a few master pages
| | 00:14 | you could copy from.
| | 00:15 | But the problem is that these
master pages, let's say, for example,
| | 00:19 | default.master, is so ugly and so full
of convoluted code that the process of
| | 00:24 | trying to rip out what you don't need,
so you can put in your own design,
| | 00:28 | well that's really painful.
| | 00:30 | It's possible, but it's painful.
| | 00:32 | But what else could you do?
| | 00:33 | Well, you might be tempted to start
from scratch, and you kind of can.
| | 00:37 | You could go to the File menu, create a
new piece of SharePoint Content or a New
| | 00:42 | Page, because one of the
options will be a Master Page.
| | 00:46 | But this, unfortunately, is a problem
too, because this master page is a master
| | 00:52 | page for a generic ASP.NET site.
| | 00:54 | It's not a master page for SharePoint site.
| | 00:57 | So it doesn't have all the necessary
content placeholders that you need, and it
| | 01:01 | will be quite a procedure to start
going through some of the other master pages
| | 01:05 | and plucking out of the ones that you
think it needs and dropping them in here.
| | 01:09 | Well, what can we do?
| | 01:11 | We do have one option that's kind
of close to this blank slate idea.
| | 01:15 | It's called a Minimal Master Page.
| | 01:17 | It doesn't actually exist in SharePoint
out-of the-box and neither does it exist
| | 01:23 | in SharePoint Designer.
| | 01:24 | You have to go out to the Web and search for it.
| | 01:27 | So I am going to search for the
phrase minimal master page, and the first
| | 01:33 | link here is a How to:
| | 01:35 | Create a Minimal Master
Page at msdn.microsoft.com.
| | 01:38 | It sounds tempting.
| | 01:40 | The idea of a minimal master page and
in this very long article, they are also
| | 01:46 | giving you this whole block of code,
is you want a master page with all the
| | 01:50 | placeholders you need
with the minimum of design.
| | 01:53 | This is exactly what this is.
| | 01:55 | In fact, I am going to copy all this code.
| | 01:56 | There is quite a lot of it that we need.
| | 01:58 | You can just select it and copy it.
| | 02:00 | Oh, there is a little
link here called Copy Code.
| | 02:02 | I am going to grab that, Allow access.
| | 02:06 | Go back over here into SharePoint Designer.
| | 02:08 | Make sure that I've
selected everything in this page.
| | 02:11 | It could be just an empty
page here and paste it in.
| | 02:15 | This is a minimal master page.
| | 02:18 | It's basically a bunch of the
required tags that SharePoint needs.
| | 02:23 | And then, several content placeholders,
in fact, a whole bunch of them written
| | 02:29 | there ready to be kind of grabbed
and dropped into your own design.
| | 02:32 | So I am going to save this.
| | 02:35 | Yes, I want to save some changes,
and it's going to ask me where?
| | 02:39 | Well, it needs to be in the
master page gallery, which is under
| | 02:41 | _catalogs/masterpage.
| | 02:44 | I am going to call this
minimal.master. Click Save.
| | 02:51 | I should be able to see it.
| | 02:55 | It's actually down the bottom
right now of my masterpage gallery.
| | 03:00 | I could also, should be able to see it,
if I go back to my Portal and go into
| | 03:06 | my master page gallery through the browser.
| | 03:08 | I kind of need to do this anyway.
| | 03:10 | I am going to my Site Settings and going
to my master pages gallery, which is at
| | 03:14 | the bottom of my Galleries level.
| | 03:17 | I have minimal.master.
| | 03:18 | This is edited by me.
| | 03:19 | It's counted as a Draft.
| | 03:21 | Well, that means it's not going to be
usable until you check it in and
| | 03:24 | publish it and approve it.
| | 03:26 | So I am going to mouse over, check it in.
| | 03:29 | It's going to ask what
kind of version do you want.
| | 03:31 | I am going to say the 1.0 published version.
| | 03:34 | It's reminding me up here:
| | 03:35 | Items on this list require content approval.
| | 03:38 | This will not appear in public
until approved by someone with
| | 03:41 | proper permissions.
| | 03:42 | Luckily, I have proper permissions.
| | 03:45 | So after checking it in, I can
come back down, find minimal.master,
| | 03:49 | select the Approve/reject
option. Call it Approved.
| | 03:53 | Click OK. Now, what?
| | 03:55 | Well, that just means that
minimal.master is selected as an approved and checked
| | 04:01 | in master page file in the master page gallery.
| | 04:04 | So, what? Well, we are still not using it.
| | 04:07 | For that, I need to go back to my Site Settings.
| | 04:10 | Go to my Master page option under Look
and Feel, and we were in the Master page
| | 04:15 | option under Galleries.
| | 04:16 | We now want to say which one do
we actually use, select that one.
| | 04:19 | From the dropdown box, we should
have minimal.master and click OK.
| | 04:26 | Now, go back to the home page.
| | 04:28 | We've got a error here saying there a
Duplicate ContentPlaceHolder "head".
| | 04:32 | You can occasionally run into this.
| | 04:34 | It's a little bit of an issue.
| | 04:35 | I am going to find that
minimal.master page and open it up.
| | 04:39 | You'll occasionally find that
SharePoint Designer itself will kind of drop in
| | 04:42 | this unneeded tag right up at the top.
| | 04:44 | We've got another content placeholder here
for head, which we really didn't need at all.
| | 04:49 | I am going to save that.
| | 04:50 | So it is not checked out.
| | 04:53 | Unfortunately, we are going
to have to check it out here.
| | 04:56 | Depending on how your authentication
is set up, you may have to authenticate.
| | 05:00 | So I am going to right-
click it and select Check Out.
| | 05:02 | It's got the little
checkmark saying it's checked out.
| | 05:05 | Now, I should be able to save this.
| | 05:09 | Check it back in, publish a major version.
| | 05:13 | Again, these things that I am doing here
could be done in SharePoint Designer or
| | 05:17 | could be done in the browser.
| | 05:18 | It requires content approval.
| | 05:22 | I am going to say no, I don't want to modify it,
| | 05:24 | although I do have to approve it.
| | 05:26 | I am going to switch back to the Web site.
| | 05:27 | It looks like we are actually
working with our master page right now.
| | 05:31 | But just to make sure I've got it
all approved, select my minimal.master,
| | 05:38 | approve it, click OK.
| | 05:42 | Back to the Portal.
| | 05:44 | This, right now, is a minimal master page.
| | 05:47 | You may think well, there is
obviously a lot of design going on here.
| | 05:50 | And that's absolutely true.
| | 05:52 | But it's about as sparing
as you could possibly get.
| | 05:54 | A lot of the actual layout, and it's
obvious there is some layout going on,
| | 05:58 | because we've got this area over here of Web
Parts, and we've got this kind of 70% area here.
| | 06:04 | Well that's more to do with how
the home page is actually designed.
| | 06:07 | It's got its own layout going on.
| | 06:09 | But we have this very
straightforward welcome message here.
| | 06:12 | We've got the Site Actions as left-aligned.
| | 06:14 | The little area telling us
where we are is left-aligned.
| | 06:17 | There is not really a lot going on.
| | 06:19 | This is about as minimal as we can possibly get.
| | 06:22 | See that you can get a sense here of
what is being generated by SharePoint and
| | 06:26 | what is obviously being
affected by CSS and JavaScript.
| | 06:30 | We've got dropdown menus.
| | 06:32 | We've got hover states.
| | 06:33 | There is obviously a lot of
stuff that's not in the master page.
| | 06:36 | It's in either the CSS or JavaScript files.
| | 06:39 | Now, it's not that this master page
is a great layout. Let's face it.
| | 06:43 | It's not even a basic layout.
| | 06:46 | It's the lack of a layout.
| | 06:47 | I am going back into minimal.master.
| | 06:50 | We can see this last
collection of content placeholders.
| | 06:53 | They are all gathered together.
| | 06:55 | And they include things like the
placeholder title breadcrumb, the placeholder
| | 07:00 | mini console, the
placeholder calendar navigator.
| | 07:03 | These are all actually contained
inside of what's called an ASP panel. Fine.
| | 07:10 | So what? Well, we've actually got - this panel
has a attribute of visible = "false".
| | 07:16 | What does that mean?
| | 07:18 | Any of these placeholders exist, as far
as SharePoint is concerned, but anything
| | 07:22 | that SharePoint does to
fill them will not be seen.
| | 07:25 | The minimal master page may be a better
solution and a better starting point for
| | 07:30 | what you want to do as it will allow
you to take the necessary placeholders and
| | 07:34 | move them around into your own design.
| | Collapse this transcript |
| Designing a new overall master page| 00:01 | So it all comes down to this.
| | 00:02 | You have a design sketched out, and
you want to create it in SharePoint.
| | 00:06 | You might have a Photoshop Comp
or some HTML and CSS together.
| | 00:10 | But by now, your design, however you've
done it, it should be SharePoint-aware.
| | 00:14 | What I mean by that is that you
know SharePoint sites have multiple
| | 00:18 | navigation sections:
| | 00:19 | a search box, breadcrumbs,
and a main body of content.
| | 00:23 | You may want to move them around, but
you should be expecting to use them.
| | 00:26 | Really, you need your placeholders ready to go.
| | 00:28 | So I'm looking at a portal with
a minimal master page applied.
| | 00:31 | If I flick over to SharePoint Designer,
I have that minimal master page open.
| | 00:37 | It's actually checked out
in my Master page gallery.
| | 00:41 | That's where I'm going to
start and apply my own design.
| | 00:44 | Now, as I've mentioned, you could take
an existing master page and change it.
| | 00:47 | But that's only going to work if
you're not going to make major changes.
| | 00:51 | It'll be too much work, otherwise.
| | 00:52 | However, it's very, very useful to
have, say, default.master open, even if
| | 00:58 | you're not expecting to change it,
because you may want to copy stuff across.
| | 01:01 | So I'm going to open default master as well.
| | 01:04 | I don't need to check it out,
because I'm not intending to edit it.
| | 01:09 | So I've now got my
minimal.master and my default.master.
| | 01:12 | I, obviously, want to be very
careful about what I'm doing.
| | 01:15 | Here is the way I do it when
I'm building a master page.
| | 01:18 | I'm going to start off with a minimal
master page with all placeholders. I haven't
| | 01:23 | changed this at all.
| | 01:24 | Then I'm going to come down
inside the minimal master page.
| | 01:29 | On line 32 here, I have my opening body tag.
| | 01:33 | Typically speaking, you'd start putting your
own visual stuff after the opening body tag.
| | 01:38 | In fact, here, because this is an
ASP.NET one, we're actually doing it after
| | 01:42 | the opening form tag.
| | 01:44 | The way I'm going to do it, rather
than try and wrap my design around all the
| | 01:50 | rest of this stuff, I'm going
to drop in my basic design here.
| | 01:56 | Let me show you what I mean by that.
| | 01:57 | I'm just going to create a few Divs.
| | 02:00 | You could do a table-based design here,
if that's the way that you like to go.
| | 02:04 | I'm very fond of doing a CSS
tableless design where I can.
| | 02:09 | I can never get away from tables
completely in SharePoint, but I can at least do
| | 02:13 | my basic structure here.
| | 02:14 | Let me flesh that out a little more.
| | 02:17 | I'm going to have a container div, and
then inside it, I'm going to have a header.
| | 02:24 | That's going to have the logo.
| | 02:25 | It's going to have some breadcrumbs.
| | 02:27 | It might have the Search box.
| | 02:29 | It might have my Site Actions menu.
| | 02:31 | But I know that it's going to have to
have a place for my Site Actions menu, so
| | 02:34 | I'll put another Div
inside here for Site Actions.
| | 02:38 | Of course, these names that I'm using
for the ID could be anything you want.
| | 02:43 | I'm trying to make them descriptive.
| | 02:44 | I've got a container division.
| | 02:46 | I've got a header division.
| | 02:47 | I've got a Site Actions division.
| | 02:49 | But if you wanted to call them Fred
and Joe, that's completely up to you.
| | 02:53 | After the header, I'm going to do another Div,
which will be for my main body of content.
| | 02:58 | So I'll call it mainContent.
| | 03:01 | After that, I'll do another
Div for my secondaryContent.
| | 03:07 | Now, you could call these Divs things
like left content and right content, but
| | 03:13 | I'm trying to make it about
the meaning of what goes here.
| | 03:16 | So my Quick Launch navigation, which
would usually go in the left, is really
| | 03:20 | secondary navigational content.
| | 03:22 | That might go in the left.
| | 03:23 | It might in the right.
| | 03:24 | It might go in the bottom.
| | 03:25 | It might go in the top.
| | 03:26 | It doesn't really matter.
| | 03:27 | So this is my very simple breakdown. Now what?
| | 03:31 | Well, I'm going to just
save that for a second here.
| | 03:33 | What I want to do is create some CSS.
| | 03:38 | That's going to do some basic styling on
these, so that we know these divisions exist.
| | 03:43 | Well, there is nothing in them right now,
so let's just put a couple of pieces
| | 03:46 | of placeholder text, not
SharePoint placeholders, just my own stuff.
| | 03:51 | I'll put a little phrase here, Main
content goes here, Secondary content goes here.
| | 03:57 | Now, these are Divs, which means if I
save this right now and refresh this page
| | 04:05 | over here, I'm going to see some basic
boring stuff, because, of course, a Div
| | 04:10 | doesn't really do anything
visually unless we style it.
| | 04:13 | So this is where we're going to
tie our master page to some new CSS.
| | 04:17 | I'm going to go back into SharePoint Designer.
| | 04:20 | I'm going to come down,
because I'm in a publishing portal.
| | 04:23 | I've got a place where my CSS
should go, which is in my Style Library.
| | 04:27 | Now, there are quite a few CSS files here.
| | 04:30 | The classic place to put your own stuff will
be in the Language folder, in our case, en-us.
| | 04:36 | Yours may be different.
| | 04:37 | I'm going to make a new folder
here, and just call it Custom.
| | 04:42 | Inside that one, I am going to make a new file.
| | 04:44 | It would be a CSS file in my Custom folder.
| | 04:47 | I'll just call that custom.css.
| | 04:50 | I'm going to open that up.
| | 04:52 | It's already marked as checked out.
| | 04:54 | I'm going to write in here some CSS.
| | 04:57 | Now, I've just pasted this in here
rather than have you watch me write it all.
| | 05:01 | I've got some very simple styles here
that we're going to apply to those Divs:
| | 05:05 | the container div, the header div, the
mainContent, secondaryContent, and the siteActions.
| | 05:10 | I'm putting some background colors on them.
| | 05:13 | In this case, they're just simple grays,
levels of white to black, just to make
| | 05:17 | them obvious, where these different parts are.
| | 05:20 | I'm going to save this CSS file.
| | 05:22 | But right now, this collaboration
portal isn't using the CSS file.
| | 05:27 | So I need to go into the settings of
the portal, which I'll find from my Site
| | 05:32 | Actions > Site Settings >
Modify All Site Settings.
| | 05:36 | If you remember that where you choose
the master page is also the place you can
| | 05:40 | specify an alternate CSS file.
| | 05:42 | Alternate is not really the word.
| | 05:44 | It's really an additional CSS file.
| | 05:46 | So I'm going to specify one.
| | 05:48 | That's going to be under Style Library,
and you can type it in yourself, or as
| | 05:54 | you can see, you've got a
little Browse button here.
| | 05:56 | I could browse to it.
| | 05:58 | If you need to navigate through,
you've got the little Up icon.
| | 06:01 | But really what we want to go into is
to the Style Library, the en-us folder,
| | 06:08 | the Custom folder, and the
custom.css, or whatever it is you called it.
| | 06:14 | I can reset all subsites to use this as well,
which is fine, click OK. Well, then what?
| | 06:21 | Again, we won't see the difference on
the Settings page, but going back to
| | 06:24 | the portal, what we should now
actually see is those Divs with all the CSS
| | 06:29 | being applied to them.
| | 06:30 | That may not be the
prettiest thing in the world.
| | 06:32 | But we do have some
content there that we can see:
| | 06:35 | header content, mainContent goes here.
| | 06:37 | It looks like it's 80% and centered, up
to you, how wide you want to make this
| | 06:42 | up to you, how you want to style it.
| | 06:44 | But we've got some areas
that we can visually see.
| | 06:47 | If I go back into SharePoint Designer
and look at my minimal master page, let
| | 06:52 | me go into Split View,
| | 06:53 | you can actually see we've
got that content there too.
| | 06:56 | Won't always be perfectly reliable here,
but it's certainly a useful thing to have.
| | 07:01 | So what's the next step?
| | 07:02 | Well, the way I like to do things here
is I'm going to look then at my design,
| | 07:07 | which really doesn't have
anything in it to do with SharePoint.
| | 07:10 | I'm going to start copying things from
further down in the code and placing them
| | 07:14 | then in my own little layout of my Divs.
| | 07:17 | Now, when you first do this, one of the
questions that you may have is I don't
| | 07:21 | really know what each of
these individual pieces are.
| | 07:24 | Now, that will continue to be an issue,
but just to let you know, if I'm in my
| | 07:27 | Split View and I start selecting some
of the elements in code, in a lot of
| | 07:33 | cases, or in several cases, we'll
actually see some kind of hint, that this line
| | 07:38 | 57 for me right now is wssuc:Welcome.
| | 07:43 | Like many of these elements and these
tags inside your master page, this is
| | 07:47 | never going to be shown to a user.
| | 07:48 | What it really means is when someone
asked for this page, replace this section
| | 07:53 | with what's called the WSS
user control explicit logout,
| | 07:57 | which is really the welcome message and allowing
| | 07:59 | people to sign in as another user.
| | 08:01 | That is going to go up into my head section.
| | 08:04 | So I am going to cut it and take
it up here and paste it in there.
| | 08:08 | I can get rid of my header content if I want.
| | 08:11 | I've got a place here for my Site Actions menu.
| | 08:14 | Well, if I come a little bit further
down, I've got something that looks pretty
| | 08:18 | close to that possibility,
PublishingSiteAction:SiteActionmenu. Okay.
| | 08:23 | That looks like it.
| | 08:24 | One of the things to be very careful
about here is paying attention to whether
| | 08:28 | this element is self-closing or not.
| | 08:31 | This one, I don't need an opening and closing
element, because it does close at the end of it.
| | 08:35 | I'm going to grab that guy, cut it, come up
here, paste it in, start coming back down.
| | 08:43 | What else do I have?
| | 08:44 | I have some what are called
AuthoringContainers. Who knows?
| | 08:48 | Maybe here's a good thing.
| | 08:49 | I'll grab those guys too, cut
those, come up, and place those after
| | 08:55 | the siteActions menu.
| | 08:57 | You will find that you're going to
have to experiment a little bit about
| | 09:00 | how this will work.
| | 09:02 | You'll see what impact this has
shortly of using these publishing consoles.
| | 09:06 | Then we've got our Main content,
our Main content goes here.
| | 09:09 | Well, what does that mean?
| | 09:10 | That's one of the most straightforward ones.
| | 09:12 | This is our typical main page content,
the PlaceHolderMain content placeholder.
| | 09:18 | So I'm going to grab that guy and its
associated comment and paste it into mainContent.
| | 09:25 | I'm going to save that right now.
| | 09:29 | Flip back over to the portal, hit F5 to refresh.
| | 09:33 | We're starting to actually impact this.
| | 09:35 | It may still not be the
prettiest thing in the world.
| | 09:37 | But we've got now Site Actions menu
now floating over here on the right.
| | 09:41 | We've got our main content appearing in here.
| | 09:43 | You might have thought that this area
was considered secondary content, but bear
| | 09:48 | in mind what our main content typically is.
| | 09:50 | It's like a Web Part page or a Basic page.
| | 09:53 | The reason all of it is positioned in
this main content area is because this is
| | 09:58 | all content on one page.
| | 10:00 | It's just split into different Web
parts and different zones. Well, what next?
| | 10:05 | I'm going to go back over into my master
page and play around with a few things,
| | 10:11 | because one of the things we really
don't have on a minimal master page is we
| | 10:15 | don't have the Quick Launch bar.
| | 10:16 | It's not showing up anywhere.
| | 10:18 | Now the reason for that is that it's
not included in the minimal master page,
| | 10:22 | because you don't actually
need it. It's very useful.
| | 10:26 | You probably want it, but
you don't actually need it.
| | 10:29 | So what's likely that you're going
to do is start to look at the other
| | 10:32 | placeholders that are in minimal
master page and think, well, does this sound
| | 10:37 | like likely, does this sound like
something that I am going to need?
| | 10:40 | So, for example, we have areas like the
PlaceHolderTitleBreadcrumb. Maybe I need it.
| | 10:46 | Maybe I don't.
| | 10:47 | We've got the PlaceHolderLeftNavBar.
| | 10:50 | That's actually all the Quick
Launch stuff that you usually see.
| | 10:53 | However, if I just take that, cut
it, come up and paste it into my
| | 11:00 | secondaryContent area, I'm going to
save that, go back over, refresh the page,
| | 11:07 | doesn't seem to do very much.
| | 11:09 | That's really because the
ContentPlaceHolder is not magical.
| | 11:13 | Again, the idea of a
ContentPlaceHolder in a lot of cases is that something
| | 11:16 | is going to fill it.
| | 11:18 | If all we're doing is creating a
placeholder and not saying how it gets filled,
| | 11:22 | in a lot of cases, you're
not going to see anything.
| | 11:24 | So I'm missing a whole bunch of stuff right now.
| | 11:26 | I don't see search.
| | 11:27 | I don't see a logo.
| | 11:28 | I don't see any of that stuff.
| | 11:30 | I've got to figure out how that works.
| | 11:33 | That's why, back over in SharePoint
Designer, I also have default.master.
| | 11:39 | So if I'm puzzled about why my
PlaceHolderLeftNavBar doesn't seem to do
| | 11:43 | anything, I might go over to default
master and say, well, what does your area
| | 11:47 | do, when I find that little
PlaceHolderLeftNavBar, which I can actually find by
| | 11:51 | selecting it down here.
| | 11:54 | This is my PlaceHolderLeftNavBar.
| | 11:56 | Well, between the opening
PlaceHolderLeftNavBar and the closing one, which is
| | 12:01 | actually quite a lot of stuff, we've
got a whole bunch of stuff here, a whole
| | 12:05 | bunch of stuff, which is
in our default.master page.
| | 12:09 | It's doing a lot of things.
| | 12:10 | What this is really doing is
connecting two things like the
| | 12:13 | asp:SiteMapDataSource element. A lot of this
you really don't want to have to mess with.
| | 12:18 | We're going to see a little
bit about how to affect it later.
| | 12:22 | But really, what we might be interested
then is figuring out what does it do in
| | 12:27 | a typical default.master page.
| | 12:31 | We want to really grab hold of that.
| | 12:32 | In fact, what I'm going to do is grab, and
sometimes it's little difficult to get hold of.
| | 12:37 | I'm going to turn my
Visual Aids on. There we go!
| | 12:40 | I want to select PlaceHolderLeftNavBar, which
is going to highlight all of it in my Code View.
| | 12:46 | I could it manually, but it's sometimes
difficult to grab the correct ending one.
| | 12:50 | I'm going to copy that, come back
over to my minimal master and replace my
| | 12:55 | one line PlaceHolderLeftNavBar with
all the stuff from minimal master.
| | 13:00 | I'm going to save it again.
| | 13:01 | I'm going to flip back over to my
portal, refresh the page. Okay.
| | 13:07 | It's seems to at least be
then pasting in that content.
| | 13:11 | Yes, obviously, what I need to be
doing is looking at core.css and looking at
| | 13:15 | some of these styles, because I don't
want it to just be basic SharePoint blue.
| | 13:19 | But that stuff is not in the master page.
| | 13:21 | That's in core.css.
| | 13:22 | It would be new CSS that I'd need to add.
| | 13:25 | I'm going to do a couple of more
things like that, just to show you how you'd
| | 13:28 | start to fill out this page.
| | 13:30 | Next one might be, I'm
missing search information.
| | 13:33 | Well, let me go over to SharePoint
Designer and take a look in my default.master.
| | 13:40 | I might go to the top of the
page and do a find on search.
| | 13:45 | Then I can see that I've got some
fairly actual straightforward stuff here.
| | 13:48 | I've got a
PlaceHolderSearchArea, ContentPlaceHolder.
| | 13:52 | Inside of it, it's got something
called a SharePoint:DelegateControl.
| | 13:54 | Now, I might not even know
what that means. That's okay.
| | 13:58 | What I can do is know that by
selecting it, I can even see that in Split View,
| | 14:02 | it's highlighted here.
| | 14:03 | Whatever this code is doing
is generating my Search box.
| | 14:07 | I'm going to grab that code, copy it,
go back into minimal.master, up into my
| | 14:15 | header section, let's say, just for
convenience's sake, I'm going to paste it in
| | 14:21 | somewhat generally in my header section.
| | 14:22 | That's not really going to format it very well.
| | 14:24 | But again, if I save it, again,
sometimes, you'll get this message because
| | 14:28 | everything hasn't updated yet.
| | 14:29 | But that should be just fine.
| | 14:32 | I can even see it in my Split View
that it seems to be adding it in there.
| | 14:35 | I want to see what it really might look like.
| | 14:37 | We'll flick back over to the
browser, refresh the page. Oops!
| | 14:41 | Now, what it's telling me here is
I've got a Duplicate ContentPlaceHolder.
| | 14:45 | What does that mean?
| | 14:46 | Well, if I look at the minimal master
page and come down, it actually did give
| | 14:52 | me a ContentPlaceHolder for
the PlaceHolderSearchArea.
| | 14:57 | I just wasn't using it.
| | 14:58 | It was in the hidden section
of the minimal master page.
| | 15:00 | Now, it by itself, if I just copied and
moved that, it wouldn't have done anything.
| | 15:05 | It would have said, hey!
Here is the Search area.
| | 15:07 | If I didn't provide any content in that
placeholder, it wouldn't have done anything.
| | 15:11 | So I'm going to just delete that out
of the lower section, save it again.
| | 15:15 | This is something you'll have to do quite often.
| | 15:17 | I jump back over to the Web site.
| | 15:20 | I can start seeing that, okay, that's how
I start to fill it out. Well, what else?
| | 15:24 | Let's do a couple more things.
| | 15:26 | Jumping back into minimal master page,
what I'd like to do is say, well, how do
| | 15:30 | I put in say a company logo?
| | 15:32 | Now, I could do this by simply adding
an image and kind of dragging it and
| | 15:38 | explicitly writing it in my
master page with an IMG tag.
| | 15:42 | There is no problem whatsoever with doing that.
| | 15:44 | However, SharePoint does
have an ability to do it anyway.
| | 15:48 | We've got a
PlaceHolderPageImage ContentPlaceHolder.
| | 15:51 | I show you what the
benefit of doing it this way is.
| | 15:55 | That placeholder sounds like kind of a logo.
| | 15:57 | It's not a page image.
| | 15:58 | That must be the company logo thing.
| | 16:00 | But bear in mind, it's
using the phrase page, there.
| | 16:03 | That's not really what we're looking for.
| | 16:05 | Going back in for a little hint into
default.master, let's look a little bit
| | 16:09 | towards the top of the main
section of default.master.
| | 16:13 | There is actually something it has in
here called the SharePoint:SiteLogoImage.
| | 16:19 | That's a tag by itself here.
| | 16:21 | In fact, I'm going to grab that, taking
care that I only need the tag itself.
| | 16:25 | I don't need that closing TD. Copy that.
| | 16:28 | Go over into minimal master,
up into my header area.
| | 16:36 | I'm going to do it after the welcome
dropdown box and paste that in, save it.
| | 16:42 | Again, occasionally, you get this message.
| | 16:44 | Back into the browser, refresh it.
| | 16:47 | What I'm getting here is that very
generic SharePoint logo, which is not
| | 16:53 | what I'm looking for.
| | 16:54 | I'd actually like to use my own logo for this.
| | 16:57 | Well, how do I do that?
| | 16:59 | Here's the kind of classic way of
working with your own images, particularly if
| | 17:02 | you want them repeated across master
pages that can affect dozens, or hundreds, or
| | 17:07 | even thousands of pages.
| | 17:09 | What I'm going to do is import
that image into my Style Library.
| | 17:13 | So I've got an Images folder here
already with a bunch of stuff in it.
| | 17:17 | With that folder selected, I'm going
to go to my File menu and click Import.
| | 17:22 | I do have a logo.gif file just out
there on my Desktop that I pre-created.
| | 17:28 | You can use anything you want to create that.
| | 17:30 | It's a very simple one.
| | 17:32 | Click Open and click OK, and I load that in.
| | 17:35 | What you'll see is it's
now in the Images folder.
| | 17:38 | Again, you want to be careful to
make sure you have that selected.
| | 17:41 | That is marked as checked out.
| | 17:42 | Don't really need to do anything more about it.
| | 17:44 | So I'm going to check it in
as a major version, click OK.
| | 17:48 | The question is well, so what?
What's it actually doing?
| | 17:51 | Just from the fact of me uploading it
to the Images directory doesn't really
| | 17:55 | mean anything, because after all,
SharePoint doesn't know it's there.
| | 17:58 | But here is the benefit of
using the actual SharePoint control.
| | 18:01 | I can go to my Site Actions menu,
go into Site Settings for this.
| | 18:06 | In my Look and Feel section where I've got a
Title, description, and icon, I can select that.
| | 18:13 | I have a URL for a logo URL.
| | 18:17 | This, of course, I just uploaded to
my Style Library, Images folder, and
| | 18:23 | it's called logo.gif.
| | 18:26 | I have a little button here, Click here
to test, just to make sure that that works.
| | 18:30 | Yup, looks okay, and click OK.
| | 18:33 | That is now included on my master page,
and it will be used on any page that
| | 18:37 | uses this master page across this entire site.
| | 18:41 | The question might be, on your minimal
master page, there may be some of these
| | 18:46 | previously hidden
placeholders that you may not use.
| | 18:49 | My suggestion is that you start
to kind of experiment with these.
| | 18:52 | You start to bring things like the
BodyLeftBorder, the MiniConsole, the
| | 18:56 | CalendarNavigator, up into legitimate
sections of your design where they are not hidden.
| | 19:01 | Bring them out of this asp:panel with
visible = false, because that really
| | 19:06 | just means hidden section, until ASP panel
is closed, and start experimenting with that.
| | 19:12 | If they don't seem to do anything, find
the matching placeholder in default.master
| | 19:17 | and see if it also has some
containing code, if there's something that it's
| | 19:21 | providing there, which is
very likely for most of them.
| | 19:24 | In this way, you can start to use
both the minimal.master page and the
| | 19:28 | default.master page in combination to
start changing and affecting your own
| | 19:32 | design and being able to bring
your own skills to the table.
| | 19:36 | Yes, you're always going to
have to deal with the code that
| | 19:38 | SharePoint generates.
| | 19:40 | But a combination of minimal.master
page and default.master page, the core CSS,
| | 19:45 | and your CSS should take you a long, long way.
| | Collapse this transcript |
| Creating an accessible master page| 00:01 | So how about accessibility?
| | 00:02 | Well, out of the box, a SharePoint
publishing site is like most Web sites out there.
| | 00:07 | It's not terrible.
| | 00:08 | But it's not great either.
| | 00:10 | And by accessibility, I'm meaning a
site that gets as close as it can to the
| | 00:16 | Web Content Accessibility Guidelines, WCAG,
supplied by the World Wide Web Consortium.
| | 00:23 | These are set of rules, suggestions,
guidelines, however you want to phrase
| | 00:27 | them, for making your Web sites more accessible.
| | 00:30 | Step one in this deal is stop looking
for SharePoint to be magical by itself.
| | 00:34 | You're meant to be bringing
your own skills to the table here.
| | 00:37 | You will run into the situation
| | 00:39 | that some behind-the-scene part of
SharePoint is going to inject some terrible
| | 00:43 | markup that's not at all accessible.
| | 00:46 | And you can rage against
this as much as you want.
| | 00:48 | It will end up happening.
| | 00:50 | But it doesn't mean the task is pointless.
| | 00:52 | There's a lot you can do being
pragmatic with SharePoint 2007.
| | 00:56 | You should be using the WCAG
as an ideal to strive towards.
| | 01:01 | Even if you don't make it
there, you can get pretty close.
| | 01:03 | A lot of it's really about the basics.
| | 01:06 | When you are designing things like
master pages, and you're adding an image tag,
| | 01:10 | make sure you given an Alt tag.
| | 01:12 | Do that very straightforward stuff.
| | 01:14 | Use CSS instead of HTML to
handle your presentation.
| | 01:18 | Yes, sometimes SharePoint is going
to drop in font tags and table tags.
| | 01:22 | I have had many clients complaining
about how challenging it is that SharePoint
| | 01:26 | generates ugly code.
| | 01:27 | But they're not even doing the most
basic of things themselves where they
| | 01:31 | do have influence.
| | 01:32 | And here is my main point.
| | 01:33 | When you're doing everything you can
with your code to make it accessible,
| | 01:38 | then complain about what SharePoint is doing.
Up until that point, you have work to do.
| | 01:43 | If you really have to get very, very
conscientious about complying with these
| | 01:47 | guidelines, you may want to check out and
go searching for SharePoint compliance tools.
| | 01:52 | Places like www.hisoftware.
com can help you out with this.
| | 01:56 | These are commercial products that
will do it, but there're certainly some
| | 01:59 | third-party solutions out there.
| | 02:01 | Depending on your own organization,
you may have your own rules and standards
| | 02:05 | that have to comply with.
| | 02:06 | Everything that you can do will be helpful.
| | Collapse this transcript |
|
|
9. Page LayoutsIntroducing content types in SharePoint| 00:00 | There's something called a Content Type in
SharePoint, and you will care about these.
| | 00:05 | You just may not know that yet.
| | 00:07 | Let's say my wife is reading a book by the
fireplace, and I ask her, what are you reading?
| | 00:12 | Well, she can really annoy
me with one answer, a book.
| | 00:17 | I know it's a book.
| | 00:18 | What type of book is it?
| | 00:20 | I'm interested in its type.
| | 00:22 | SharePoint has the same problem.
| | 00:24 | If I'm uploading things into SharePoint,
all I seem to work with is documents.
| | 00:29 | But you don't think about your stuff this way.
| | 00:31 | You don't deal with documents.
| | 00:33 | You deal with resumes, and specifications,
and business plans, and menus and expense forms.
| | 00:39 | So you can fix this problem in
SharePoint by defining Content Types.
| | 00:43 | Now these are not the same
file types. The idea is this.
| | 00:47 | You might have a file type of a Word document.
| | 00:49 | Well, this Word document could be a
resume, or it could be a legal contract, or a
| | 00:54 | policy document, or a patient record.
| | 00:57 | However, if you're immediately
thinking, well, okay we've got
| | 01:00 | one-to-many relationship here.
| | 01:02 | It's not that simple, because one
Content Type could be multiple file types.
| | 01:09 | You might have a business plan Content
Type that has a Word document, or an Excel
| | 01:14 | spreadsheet of predictions
and a PowerPoint presentation.
| | 01:18 | The power of Content Types is they let you
describe what it is that you really have.
| | 01:23 | So that it's much easier to deal with.
| | 01:25 | For the things that go in our document
libraries, defining Content Types allow
| | 01:28 | us to say, well, if it's a health record,
everything about it gets audited, but
| | 01:33 | if it's a menu, we don't care.
| | 01:34 | If it's a new expense form, send an e-
mail automatically to someone in HR to
| | 01:39 | read and approve it.
| | 01:41 | Now you might be thinking, well, this all
sounds like the inner workings of SharePoint.
| | 01:45 | Why would I care as a designer?
| | 01:47 | Because Web pages in
SharePoint are Content Types.
| | 01:51 | Every page will be based
on the page Content Type.
| | 01:55 | And at the most basic, all your pages
will be based on that one simple type.
| | 02:00 | But here's the deal.
| | 02:02 | For a Web site, the equivalent of
Content Types that you can think of is this.
| | 02:07 | You don't just have Web pages.
| | 02:09 | You have Web pages that represent
Products, or Web pages that represent
| | 02:14 | press releases, and instead of
having a generic page, you should have
| | 02:19 | specialized pages to represent the
kind of content that you have because
| | 02:25 | these are your types of content. So what is it?
| | 02:30 | Well, really a Content Type is
just describing something with its own
| | 02:34 | information, its own data.
| | 02:36 | So if you're describing a product, it might
have a description and an image and a SKU number.
| | 02:40 | If it was a press release Content Type,
it might have a headline and the body of
| | 02:45 | text and a release date.
| | 02:47 | You can describe these things to
SharePoint without worrying about what the
| | 02:50 | page will look like.
| | 02:52 | But when it comes time to build your
pages, SharePoint can actually help you.
| | 02:55 | It will say you're
creating a page to show products.
| | 02:58 | Well, you'll need a place to put an image,
and a place to put a description, and
| | 03:01 | a place to put the product's SKU.
| | 03:04 | Content Types can easily be overlooked.
| | 03:07 | But they should be done early in
the process, as early as possible.
| | 03:10 | As we'll shortly see, they actually
really help you when it comes time to
| | 03:14 | creating your page layouts.
| | Collapse this transcript |
| Creating a custom content type| 00:01 | Content Types are powerful, very
useful things, and luckily, creating a new
| | 00:05 | Content Type is very simple.
| | 00:07 | It's done through the Content
Type Gallery in the Site Settings of
| | 00:10 | your top-level site.
| | 00:12 | I'm in my portal right now.
| | 00:13 | If it looks a little different, it's
because I've got the simple theme applied.
| | 00:17 | There's not much color to it.
| | 00:18 | That doesn't really affect
what we do with Content Types.
| | 00:21 | I'm going to click on the Site Content
Types list, and we see a whole bunch of
| | 00:25 | stuff because you're always
using Content Types in SharePoint.
| | 00:28 | What we're primarily interested in is
that even things like Web Part Page,
| | 00:33 | Master Page and Basic Page are
all in there as Content Types.
| | 00:38 | You're always using Content Types,
even if you don't really think about them.
| | 00:41 | Now you do need to be a Site Collection
Administrator to create a Content Type.
| | 00:45 | And as I've mentioned a couple of times,
this is something you want to do as
| | 00:49 | early as possible in your development
of your pages, because you should be
| | 00:54 | defining Content Types for your
different kinds of repeated Web pages.
| | 00:58 | If you're going to have 100 product pages,
you should have a product page Content Type.
| | 01:03 | If you're going to have 100 biography pages,
you should have a biography page Content Type.
| | 01:08 | Yes, you might create a couple of
generic Content Type pages, but if you're
| | 01:12 | going to have specialized ones, and you
know it, you should be building them and
| | 01:15 | defining them early on.
| | 01:17 | Now what we're going to do right now in the
Content Type Gallery is not build the page.
| | 01:22 | We're just going to describe it.
| | 01:24 | That might sound a little vague.
| | 01:26 | But what it really means is we're
just going to describe what data we're
| | 01:29 | interested in, what metadata.
| | 01:31 | So I'm going to click the Create button.
| | 01:33 | And I'm giving it a Name
and a Description if I want.
| | 01:37 | But notice, before I do that that, there's
an area here called Parent Content Type.
| | 01:42 | What you have to be very careful about
is that you are creating your own Content
| | 01:46 | Type based on an existing one.
| | 01:48 | You don't really have any choice about that.
| | 01:50 | So if I were to say I know I need a
product page, I'm going to create a
| | 01:55 | Product Page Content Type.
| | 01:58 | I could give it a Description.
| | 02:00 | But I want to be very careful
about where I'm inheriting from.
| | 02:04 | And I can even see I've got things
like Page Layout Content Types, Publishing
| | 02:08 | Content Types, List Content Types,
Business Intelligence Content Types.
| | 02:14 | This may look a little different
depending at what version of SharePoint
| | 02:17 | you have installed, but the one
that you are wanting is a under Publishing
| | 02:21 | Content Types and it's Page.
| | 02:24 | We are going to base our new
Content Type, Product Page, on an existing
| | 02:28 | Content Type of Page.
| | 02:30 | The reason that we're doing that is if
we had to do it from scratch, we'd have
| | 02:33 | to do a lot of work ourselves to make
sure that this Web page is tied into
| | 02:37 | SharePoint, and SharePoint,
and you want to do with it.
| | 02:39 | We're just going to extend it.
| | 02:40 | We're going to change it
to add some things to it.
| | 02:43 | Now down here, it says do you want to
put this new content type into a group
| | 02:47 | called Custom Content Types or a New
group called my groovy content types?
| | 02:52 | You can do whatever you want.
| | 02:53 | I'm going to put it in the
group Custom Content Types.
| | 02:56 | It is just so you can find
it later. Well, then what?
| | 03:00 | Well, what it says in here is you
got a new one called Product Page.
| | 03:03 | It's got a whole bunch of settings.
| | 03:05 | We're not going to do much with that.
| | 03:06 | And it's already saying here're your Columns.
| | 03:09 | You're going to have a Title.
| | 03:10 | You're going to have a Description, a
Start Date, an End Date, a Contact person
| | 03:14 | an E-mail Address a Name, a Picture,
Rollup Image, a place for Audiences.
| | 03:19 | Well, it seems like an awful lot of stuff
for something we haven't manipulated yet.
| | 03:23 | What we need to do here is understand
that these Columns that already exist are
| | 03:28 | to tie this page into the whole
publishing structure so we can already have a
| | 03:33 | Start Date and an End Date
of when this page is active.
| | 03:36 | We've already got Title and Description.
| | 03:38 | What I need to add here would be
things like well, this is for a product.
| | 03:42 | So maybe I have a product SKU.
| | 03:44 | Maybe I've got an area, or a
technology, or a group of images.
| | 03:48 | It's really up to you.
| | 03:49 | And what you're going to do is Add from
existing site columns, or Add from new site column.
| | 03:55 | This is why, earlier in the course,
I went through how to create a site
| | 04:00 | column because when you create a Content Type,
you have to create new columns as site columns.
| | 04:06 | Now that might sound all a little bit
vague, particularly if you haven't done
| | 04:10 | this a couple of times, just know
that the only way that we can add to this
| | 04:14 | list of data that this page is going to have
is to say either Add from existing site columns.
| | 04:20 | But I haven't defined any ones that I wanted.
| | 04:22 | So I'm going to say Add from a new site column.
| | 04:25 | This page looks exactly like the List
Column Page or the Site Column Page.
| | 04:30 | It simply says give it a name
and what kind of data is it?
| | 04:33 | So let's say I'm going to have a
Product Stock Keeping Unit (SKU), and it's
| | 04:38 | going to be a single line of text. Okay.
| | 04:40 | That's one added.
| | 04:41 | I'm going to leave all the rest
of things as defaults and click OK.
| | 04:45 | And now we've got that Product SKU in there.
| | 04:48 | And then I'm going to Add from the new
site column, an area. Let's say all of our
| | 04:53 | products have a particular
area that they fall into.
| | 04:56 | And that's going to be a choice, where
we can select from our different choices.
| | 05:01 | We can actually enter in what
we want those choices to be.
| | 05:04 | And I'm going to say that we have Consumer
Area, an Industrial Area and a Military Area.
| | 05:14 | And click OK. Of course, this
information is really up to you.
| | 05:18 | It's what do you want this to be?
| | 05:20 | I can then beg this out with more
images, more descriptions, notes.
| | 05:24 | In fact, I'm going to add one more
thing here, Add from the new site column.
| | 05:29 | I'm going to say that this
is the Product Information.
| | 05:33 | And that could be multiple lines of text.
| | 05:35 | But seeing as I know this is going to be
a Web page, and there could be a lot of
| | 05:38 | content here, I'm looking a little
further down because one of my options is
| | 05:42 | Full HTML content with formatting and
constraints for publishing, looks great.
| | 05:48 | I'm going to do that and click OK.
| | 05:51 | Notice that even in other columns,
you also have things like an Image with
| | 05:56 | formatting and constraints for
publishing, a Hyperlink with formatting and
| | 06:00 | constraints for publishing.
| | 06:01 | You could add all of the stuff to your
content type because we're then going to
| | 06:05 | base a page on it, just
clicking Back to come out of that.
| | 06:10 | So I right now have a Content Type, a
Description of a Product Page in there,
| | 06:16 | with all these different homes to it.
| | 06:18 | Typically, in a real production site,
I'm going to spend a lot longer thinking
| | 06:21 | about exactly what these are going to be.
| | 06:24 | But keep in mind what we're doing here.
| | 06:25 | We're doing this as preparation
because what we can do is create a Web page
| | 06:30 | template based on this Content Type.
| | 06:33 | And the more control, and the more
defined that that we do it in this screen
| | 06:37 | here, the easier we're going to have a
time of it when we build our page layouts
| | 06:42 | and when we build our pages.
| | Collapse this transcript |
| Creating a page layout based on a content type| 00:01 | So whether you've created the master
Page that defines the overall structure for
| | 00:04 | every page in your site, or you're
just using one of the default ones, of
| | 00:08 | course, we have this big gaping
hole of content that we need to fill.
| | 00:11 | Now what we're going to do is create a
page layout to define templates for the
| | 00:16 | different content pages in our site.
| | 00:19 | Again, as a reminder, these are all
going to be based on Content Types.
| | 00:24 | Once we have a Content Type defined, we can
create a page layout based on that Content Type.
| | 00:30 | On a large site, you should
have many different page layouts:
| | 00:35 | a page layout for the product pages, a
page layout for staff bio pages, a page
| | 00:40 | layout for press releases.
| | 00:42 | And the idea, of course, is that you
only go to the trouble of making a page
| | 00:45 | layout for something specific when
you're going to have more than one of
| | 00:48 | this kind of page.
| | 00:49 | It is a template idea.
| | 00:51 | Now it's only in MOSS publishing
sites, and it's only if you have Content
| | 00:55 | Types that you're using. Here's the deal.
| | 00:57 | When you're on a MOSS publishing site,
and you hit your Site Actions menu and
| | 01:02 | say Create a Page, this will force
you to select from a page layout.
| | 01:09 | You may not know that.
| | 01:10 | But this is what it's doing.
| | 01:11 | When it says okay, you
want to give this page a name.
| | 01:14 | Do you want this to be an Article page
with the body only, an Article page with
| | 01:17 | an image on the left, an Article
page with an image on the right?
| | 01:20 | These are all page layouts.
| | 01:22 | Too many people look at this
list and think this is what I do.
| | 01:26 | This is what SharePoint provides.
| | 01:28 | This is what I'm meant to use.
| | 01:29 | I'm meant to use four different kinds
of article page for all of my stuff.
| | 01:34 | But really, the answer is no.
| | 01:35 | You're not meant to do that.
| | 01:37 | You're meant to come to this page and
see product pages with an image on the
| | 01:41 | left and a product page with an image
on the right, and staff bio pages, and
| | 01:46 | event pages, and location pages, and what
ever else it is you need for your own Web site.
| | 01:52 | But to actually make those options
show up here, we're going to go into
| | 01:56 | SharePoint Designer and create these
page layouts, create these arrangements of
| | 02:02 | data that people can
then come along and fill in.
| | 02:05 | So I already have, in my Site Actions >
Site Settings, my Site Content Types Gallery.
| | 02:12 | I have my Product Page Content Type defined.
| | 02:15 | I have to have a Content Type
defined before I can create a page layout.
| | 02:19 | So I'm going to jump over into
SharePoint Designer where I do have this Web site
| | 02:24 | opened, but I don't have any pages opened.
| | 02:26 | I'm going to say File >
New > SharePoint Content.
| | 02:31 | And what I'm looking for is in the
SharePoint Content tab in the SharePoint
| | 02:35 | Publishing section, I have Page Layout.
| | 02:39 | And the Description is Create a new page
layout based on the default master page
| | 02:44 | of your site, and the selected content
type will be available in the toolbox.
| | 02:47 | That all sounds a little vague.
| | 02:48 | What does that mean?
| | 02:49 | Well, again, we're not
replacing the master page.
| | 02:53 | We're using the master page here.
| | 02:55 | We're saying, well, forget about the
master page. What are the actual different
| | 02:59 | pieces of content that I have?
| | 03:00 | Give me a layout for those.
| | 03:02 | Notice that what it's actually doing
in the Options here is it allowing me to
| | 03:06 | select from some of these Content
Types, although it is only allowing me to
| | 03:10 | select Content Types based on
the page parent Content Type.
| | 03:16 | In our case, I've got my
Custom Content Types Group.
| | 03:19 | I've got my Product Page here. Well, then what?
| | 03:22 | Well, we're going to give it a Name.
| | 03:25 | And we're going to give it a Title.
| | 03:27 | Now the URL Name here needs to be the
address of your master page gallery, and
| | 03:32 | you can actually type it in explicitly,
although there is another way of doing this.
| | 03:36 | One of the things you can do through
the browser, and let me just show you this
| | 03:39 | one, is if I go to my Gallery section
and I go to my Master Pages and page layouts
| | 03:45 | gallery, I can actually create a new
Page Layout through the browser here.
| | 03:51 | And it will be created in the correct place.
| | 03:53 | So I'm going to select that one.
| | 03:55 | It's going to ask very similar things
that it asks in SharePoint Designer:
| | 03:58 | What's your Content Type Group?
| | 03:59 | What is your Content Type Name?
| | 04:01 | Give it a URL Name.
| | 04:02 | I'm going to do just productpage.aspx.
| | 04:06 | This is not the name of a
page that any user will ever see.
| | 04:12 | This is the name of the template.
| | 04:14 | I'm going to give it a Title of Product Page.
| | 04:18 | I'm going to leave Description off.
| | 04:20 | Variations are things you can do to
deliver multiple language versions or even
| | 04:25 | multiple versions for different devices.
| | 04:28 | This is not something we're going to
cover in this class, but just to let you
| | 04:31 | know, SharePoint does support the idea
of having variations, meaning you
| | 04:35 | should have multiple variations of
this page based on different languages and
| | 04:39 | have different layouts and arrangements of them.
| | 04:41 | I'm going to click OK.
| | 04:44 | What that actually means is now
in this directory, I have something
| | 04:47 | called Product Page.
| | 04:49 | And really, the only thing I can do is
Edit this in SharePoint Designer, though
| | 04:54 | if I was in SharePoint Designer itself,
I should be able to now see that through
| | 04:58 | the _catalogs Master Page Gallery.
| | 05:02 | I can even see that it's there, and
it's officially checked out, which is good.
| | 05:05 | That's what I want.
| | 05:06 | So let me double-click on it.
| | 05:07 | And I can see here that we don't
really have an awful lot going on.
| | 05:13 | The actual code for this page is pretty small.
| | 05:16 | We've got some of these SharePoint
tags up at the top, and then I really have
| | 05:20 | a couple of ContentPlaceholders, a
place for PlaceHolderPageTitle and a place
| | 05:24 | for PlaceHolderMain. Okay, so what?
| | 05:28 | What am I going to do?
| | 05:29 | Well, jumping back into the Design view,
we're seeing a lot of this content,
| | 05:34 | which is really uneditable here, because
it's all being drawn from the master page.
| | 05:37 | This is kind of what I'm
interested in, my PlaceHolderMain.
| | 05:42 | And it's not that I'm actually building a Web page.
| | 05:44 | I'm building a template for another one.
| | 05:46 | But the question is what actually goes here?
| | 05:49 | Well, let's say I was
just doing a mockup of this.
| | 05:52 | I might say, well, what I want to
really do is put in a Product Title, Product
| | 05:58 | SKU, new paragraph would
have description goes here.
| | 06:03 | I might have an image on the
right-hand side. It's up to me.
| | 06:06 | I could add tables.
| | 06:07 | I could design this.
| | 06:08 | But what good is this doing?
| | 06:10 | I mean, what are we actually doing here?
| | 06:12 | Here's the real benefit of building
all these Content Types and these Site
| | 06:17 | Columns and these Page Layouts, that
because we based this Page Layout on a
| | 06:23 | Content Type, when I look
over here in my toolbox,
| | 06:26 | if your toolbox isn't open, you need to
make sure that Task Panes has it selected,
| | 06:30 | this is stuff you can drag and drop on.
| | 06:32 | It's regular things like input boxes and
radio buttons, and that's not what I'm interested.
| | 06:37 | I'm going to minimize that.
| | 06:39 | And come down to this section that
says SharePoint Controls, which I have a
| | 06:42 | whole bunch of things here,
Data View Controls, Checkboxes.
| | 06:45 | I'm not going to be interested in that.
| | 06:47 | But look at this stuff.
| | 06:48 | I'm going to open this up a bit more.
| | 06:50 | I have Content Fields.
| | 06:53 | And what it's actually doing is you
remember those custom columns I made:
| | 06:57 | Product SKU, Product Information, Area.
| | 07:00 | I have Page Fields too, which are the
classic examples, Title, Target Audiences,
| | 07:06 | Contact, Content Picture.
| | 07:08 | What I'm really looking at here is
these are the Content Fields that were
| | 07:13 | defined in page, and these
are the ones that I added.
| | 07:16 | Question is so what?
| | 07:17 | Well, here's so what.
| | 07:20 | Instead of having description goes
here, I'm going to drag the Product
| | 07:24 | Information over in here into the page.
| | 07:28 | Instead of having Product Title up there,
I'm going to drag Title and put it over here.
| | 07:34 | Get rid of my little PlaceHolder, and
instead of having SKU, I'm going to drag
| | 07:38 | my Product SKU and put it in
the position that I wanted.
| | 07:42 | Now what you could also do obviously
here is you could select these things and
| | 07:46 | start adding CSS styles to them
whether you're doing that obviously from
| | 07:51 | core.css, or you've got some
custom CSS that you're using.
| | 07:55 | Again, we could actually start to add in a
little new piece of CSS for this if we wanted.
| | 08:00 | I'm going to leave that right now just
to make this very much about creating
| | 08:04 | the page layout itself.
| | 08:05 | So I'm going to save that.
| | 08:06 | It may not be the prettiest thing in the world.
| | 08:09 | Again, you may be looking at
this and going okay, so there's some
| | 08:12 | PlaceHolder text, big deal.
| | 08:14 | Well, I'll show you in a
second what the actual benefit is.
| | 08:18 | Remember that we're in a Publishing Site.
| | 08:20 | And what that means is things need to
be published before they're viewable.
| | 08:25 | So if I look in my Master Page Gallery,
of course, there's productpage.aspx is
| | 08:28 | still regarded as checked out.
| | 08:30 | I'm going to check it in as a major
version, and it's going to remind me that
| | 08:35 | this document requires content approval.
| | 08:37 | Again, depending on how your machine is set
up, you might automatically open the browser.
| | 08:42 | I'm going to open it manually.
| | 08:43 | Go to my Master Page Gallery, because
approval has to be done here, find my
| | 08:48 | productpage.aspx and here I haven't refreshed.
| | 08:51 | I'm going to refresh this page here so
that it comes up with my dropdown menu
| | 08:56 | saying Approve/reject.
| | 08:57 | Say that this one has approved, click OK.
| | 09:01 | So if we've created the Content Type,
made the page layout based on the content
| | 09:05 | type, dragged across in SharePoint
Designer, those content type fields, saved
| | 09:10 | it, published it, approved it. Well, then what?
| | 09:13 | Well, here's the end result of this.
| | 09:16 | That when I say, Site Actions >
Create Page, I don't just have Article page
| | 09:22 | with body only, image on the left, image on
the right, summary links, I have Product Page.
| | 09:27 | But I'm going to create
a page for a Blue Widget.
| | 09:31 | And it will say I'm going to store that
as Pages/BlueWidget.aspx, meaning I'll
| | 09:35 | put it in the Pages directory.
| | 09:37 | Make sure the Product Page
is selected, click Create.
| | 09:41 | And this is the benefit that it gives me.
| | 09:43 | I have a place for Title automatically filled.
| | 09:46 | I have a place for the
Product SKU. I'll say ABC123.
| | 09:48 | I have a place for Product Information.
| | 09:52 | And because I made that in my
Content Type, an HTML with full formatting
| | 09:56 | support, I can hit Edit Content,
come up and see a lot of information.
| | 10:02 | I have a designer that's much
better than the basic page one.
| | 10:05 | I can actually start doing
Insert Tables, if I wanted to.
| | 10:10 | I have ways of doing Hyperlinks.
| | 10:12 | I have formatting for text.
| | 10:14 | I have a lot of Rich
HTML that I can put in here.
| | 10:16 | I even have dropdown ability here
for selecting different styles for
| | 10:21 | transforming these little parts like
ArticleByLines, ArticleHeadlines, that kind of thing.
| | 10:26 | And it's all baked in there, part of
this publishing infrastructure that I
| | 10:31 | can just say either Check this In to
Share Draft or immediately Publish and
| | 10:34 | make this available.
| | 10:35 | And we actually have a controllable structure.
| | 10:39 | The benefit, of course, is that people
can now edit this page and contribute to
| | 10:44 | without knowing HTML, without having
the ability to mess this up, without
| | 10:49 | putting the title on bottom,
and the SKU on the right.
| | 10:51 | We're controlling how this appears.
| | 10:54 | And we can go back and edit our page
layout to rearrange things to apply styles
| | 10:58 | to the Product SKU, to apply a
different style to the Title.
| | 11:01 | They have a lot of power and a lot of
control over potentially having 10, or a
| | 11:06 | dozen, or 20 people contributing
pages without knowing how to edit HTML.
| | 11:11 | They don't have to.
| | 11:12 | They can do it directly in the browser.
| | Collapse this transcript |
| Editing a page layout in SharePoint Designer| 00:01 | So we've created the Page Layout file,
and we've based it on the content type
| | 00:04 | we're interested in, in our
case the Product Page content type.
| | 00:08 | But now, after all this time, we're going
to see why we created the content type first.
| | 00:13 | Remember what we're doing
here with this Page Layout file.
| | 00:15 | I'm in SharePoint Designer
in my Master Page Gallery.
| | 00:18 | I'm opening up ProductPage.aspx.
| | 00:21 | And you really don't see very much
because there's not much here to see yet.
| | 00:25 | If I look at the Split View, I'm going
to see the fact that this product page is
| | 00:30 | actually using the masterpage, which
is where this content is coming from.
| | 00:34 | It's not editable. I can click around
and I can't really do anything with it,
| | 00:38 | because this is currently my Product Page.
| | 00:40 | This big empty block of
PlaceHolderMain, I need to put something in here.
| | 00:44 | Now let's say I was just putting in some
demonstration code, just some basic ideas.
| | 00:50 | I know that my Product Page uses the
title, and a SKU, and an area and a
| | 00:55 | description or whatever else I need.
| | 00:57 | So I'm going to just paste in some code
here that I had earlier, just some divs.
| | 01:02 | This is it inside my ContentPlaceHolder.
| | 01:04 | There is nothing
particularly remarkable happening here.
| | 01:08 | I'm literally just writing a few divs.
| | 01:09 | It could be paragraph tags, however
you'd like to do it, but what I'm doing
| | 01:13 | is giving them all an id,
productTitle, productSKU, productArea,
| | 01:17 | productInformation.
| | 01:19 | The reason that I'm doing that is in
my CSS, I have some very simple CSS to
| | 01:24 | give the productTitle a large font,
with a color of a dark gray, and a
| | 01:28 | font-family of Arial.
| | 01:29 | I've got the productSKU as a smaller
font in a lighter color, its text-align
| | 01:34 | right, and so on, nothing
remarkable, classic CSS stuff here.
| | 01:39 | So back over here in my ProductPage, if
I let it refresh itself, I've got some
| | 01:43 | fairly straightforward stuff. Yes.
| | 01:45 | It's not the prettiest thing
in the world, but it will do.
| | 01:47 | So our product title, our area, our
SKU is positioned on to the right.
| | 01:51 | We've got the product information.
| | 01:52 | Well, the question is so what?
| | 01:54 | This isn't really going to do a lot for us.
| | 01:57 | Here, finally is where the power of Page
Layouts and content types comes to bear.
| | 02:02 | This is a template. We want
to use it multiple times.
| | 02:05 | Instead of having this handwritten text,
Product Title, what we're actually going
| | 02:09 | to do is go over to a toolbox, and
instead of looking at the normal HTML Form
| | 02:15 | Controls, if you don't have your
toolbox open go to your Task Panes and make
| | 02:20 | sure toolbox is selected, expand the
section that says SharePoint Controls.
| | 02:26 | And then we've got two sets here,
Page Fields and Content Fields.
| | 02:29 | We're interested in both. These are being
drawn from our Product Page content type.
| | 02:35 | We've got the custom information
that we added to our content type:
| | 02:39 | Area, Product Information, Product SKU,
that was defined in our content type.
| | 02:45 | And we've got our Page Fields that we've
defined in the base content type of page.
| | 02:49 | All it sounds a little vague, but
let me show what the end result is.
| | 02:52 | I'm going to grab Title, which I
look around, and there is Title.
| | 02:55 | I'm going to drag that over here.
| | 02:58 | I'm going to highlight where I said
Product SKU because I don't need that
| | 03:01 | handwritten code. I can drag it across.
| | 03:04 | Again, I can do it pretty much in either
area, just dragging it into the code or
| | 03:08 | dragging it onto the page.
| | 03:10 | Grab Area, and I don't
need the code that says Area.
| | 03:15 | And finally, I'm going to grab the
Product Information and drag that over into
| | 03:21 | the relevant div as well.
| | 03:23 | What it's doing is replacing the code that
I wrote with these SharePoint Web Controls.
| | 03:29 | Clicking back down here in this other
page we'll see things kind of refresh
| | 03:33 | themselves here, and it looks like
PlaceHolder code. Okay, so what?
| | 03:38 | Well, what I'm going to do after using
these controls, and obviously I could have
| | 03:43 | spend a bit more time and laid out this
page if I'd wanted to use multiple divs
| | 03:47 | or tables, that's fine, you can do that,
but I'm going to save this, and I want
| | 03:52 | to see how to use this, but again,
remember that we're in a Publishing site.
| | 03:58 | Page Layouts have to be published and
approved before they can be used or even seen.
| | 04:03 | It's a very, very common
issue that people have of
| | 04:06 | I made some changes, and they
don't seem to have made any difference.
| | 04:10 | Probably, because you didn't publish
and approved the changes that you made.
| | 04:14 | So where are my changes?
| | 04:15 | Well, I have to go back
into my Master Page Gallery.
| | 04:18 | I'm going to select ProductPage and check it in.
| | 04:22 | It says Publish a major version.
| | 04:25 | Again, this could be done either in
SharePoint Designer or the browser.
| | 04:28 | In fact, I'm going to jump
over to the browser in a moment.
| | 04:30 | It's going to remind me that even
if I publish this, this document
| | 04:35 | requires content approval.
| | 04:37 | Do I want to view or modify the approval status?
| | 04:39 | I'm going to say no because I'm going to
manually jump over to the browser and do it.
| | 04:43 | In the browser, in my Master Page
Gallery, and I want to make sure I've
| | 04:47 | refreshed it so that it's
got the up-to-date information.
| | 04:50 | I'm going to come down to find
ProductPage, which is here, and I can even see
| | 04:55 | the status over here it says Pending.
| | 04:56 | It's not been approved.
| | 04:58 | So from the dropdown box,
I can say Approve/Reject.
| | 05:01 | I want to approve it and click OK.
| | 05:03 | Hopefully, you have the ability to do that.
| | 05:05 | If not, you'll have to ask
somebody else. Well, then what?
| | 05:08 | What's the whole result of this?
| | 05:10 | We've dragged things around. We've saved it.
| | 05:13 | We've checked it in.
| | 05:14 | We've published it. We've approved it.
| | 05:16 | We've gone through all
this rigamarole, then what?
| | 05:18 | Well, here at the end of the
day is the reason why you do this.
| | 05:22 | So that when you, or anybody else, any
contributor on this Web site hits the
| | 05:27 | Site Actions menu and says Create Page, they
don't only have Article pages to choose from.
| | 05:33 | They have Product Page.
| | 05:36 | And if they want to say oh, I'm
creating a Product Page for the Blue Widget,
| | 05:40 | which it names
automatically in the Pages library.
| | 05:43 | I'm going to come down and click Create.
| | 05:46 | This is the power of defining our
Page Layouts, so we have a very super-
| | 05:51 | controlled structure of
where we're putting stuff.
| | 05:53 | Oh, that's your Title, okay.
| | 05:55 | I'll drop Title in there.
| | 05:56 | Where's your Product SKU?
| | 05:57 | I'll call it ABC123.
| | 06:00 | The Area, because we defined it in
our content type as a choice, will
| | 06:04 | immediately show up in the right area.
| | 06:05 | Let's say it was Industrial.
| | 06:07 | Product Information was defined in our
content type as rich HTML so we have a
| | 06:12 | full rich HTML Content Editor
where I can put in all sorts of Product
| | 06:16 | Information in here.
| | 06:18 | That can include bolding certain things.
| | 06:21 | That can include even dropping in images.
| | 06:23 | It can include dropping in
Hyperlinks, or Tables, Gridlines.
| | 06:27 | All of the stuff is available,
Bullet Points, Text Alignment.
| | 06:31 | I'm going to save it as is right now.
| | 06:33 | I could check it into Shared Draft, and
what it's actually showing up and yes,
| | 06:38 | not the prettiest page in the world.
| | 06:40 | We've got our Title CSS.
| | 06:41 | Our SKU is being text-
aligned to the right over here.
| | 06:44 | We've got our Area called
Industrial showing up in red,
| | 06:47 | our Times New Roman Product Information.
| | 06:50 | This would not be live unless I
decided to publish it. Because I'm an
| | 06:54 | authorized user, I could publish it directly,
but this is the power of creating your Page Layout,
| | 06:59 | so let's click Publish here, that once
the Page Layout is defined, we can create
| | 07:05 | 1000 pages based on it.
| | 07:07 | The cool thing is now if I didn't like
the look of this, I could jump back over
| | 07:12 | into SharePoint Designer,
even change my custom.css.
| | 07:16 | I'm thinking that the area which
had a color of red looks a little bad.
| | 07:20 | Let's change that color and make it green,
and give it some padding on the left.
| | 07:29 | Save our CSS file, jump back
over here, change it, move it in.
| | 07:34 | And that could have affected
potentially a thousand pages just by changing the
| | 07:38 | CSS, I wouldn't have to
change those pages individually.
| | 07:41 | So an awful lot of control over this content.
| | 07:44 | And the idea, of course, is it's not just
you creating these pages. You could have
| | 07:48 | these pages being created by dozens of
contributors who don't have to know HTML,
| | 07:53 | because they're going to get this
Edit View, which is very controlled and
| | 07:57 | imposes a lot of structure
based on your Page Layout.
| | Collapse this transcript |
| Creating multiple versions of a page layout| 00:00 | So we've seen how to create a
Page Layout based on a content type.
| | 00:05 | Well, it's very common to have
multiple Page Layouts for one content type.
| | 00:09 | In fact, that's what happens
with SharePoint out-of-the-box.
| | 00:12 | When you're on this typical Create Page
screen, there is four kinds of Article
| | 00:16 | Page you can create.
| | 00:17 | These are all different Page Layouts
for the same Article Page content type.
| | 00:23 | And if that makes sense for your pages
that you might have different ones for
| | 00:26 | the same content type, for example,
in my case I might have a consumer
| | 00:30 | focused Product Page, and an industry
focused Product Page, and a military
| | 00:34 | focused Product Page,
| | 00:36 | it's completely up to you, but you can do that.
| | 00:39 | It's just the same way that
you created the first one.
| | 00:41 | You would go to the Master page and
page layouts gallery, create a new Page
| | 00:47 | Layout and just base that
on the same content type.
| | 00:51 | The only thing you want to make sure of
here is that you're giving it a useful title.
| | 00:55 | Why would they choose one layout over another?
| | 00:59 | And this gives you a lot of
flexibility and a lot of variety in creating
| | 01:03 | different layouts for the same content.
| | 01:05 | However, going back to the Create Page
screen, one of the things that's also
| | 01:10 | useful is several of these Page Layouts
can have their own image associated with
| | 01:15 | them that gives you a preview, for
example, of what that page might look like.
| | 01:19 | And you can do that yourself. If you
create an image that's about 216 pixels wide
| | 01:25 | by 162 pixels high, and just
make it look like whatever you want.
| | 01:30 | I've just done a very quick demo in
Fireworks, but it doesn't matter what
| | 01:34 | Image Editor you choose.
| | 01:36 | I can then save that as a GIF or JPEG,
so that I can then use that as my preview
| | 01:42 | image, and I'll show you
where it has to be to do that.
| | 01:46 | I'm going to go into my Site
Settings and go into my Master page and
| | 01:50 | page layouts gallery.
| | 01:52 | This has a location called Preview
Images, and this is the place we want to put
| | 01:56 | our Page Layout preview image.
| | 01:58 | I'm going to click Upload, find that file,
which is on my Desktop here, and upload it.
| | 02:06 | It's actually reminding me here that
this has been uploaded but is checked out,
| | 02:10 | and this will require content approval.
| | 02:13 | Very common on a Publishing site.
| | 02:14 | I'll have to check it in, publish it
as a Major Version and then approve it.
| | 02:19 | I can do all three things because
I do have high-level privileges.
| | 02:22 | I'm going to click Check In, then mark
this as a Major Version that's Published
| | 02:27 | instead of Draft, which
will be default, click OK.
| | 02:31 | And finally, select the same
dropdown, but this time I can choose,
| | 02:35 | Approve/Reject to approve it, and click OK.
| | 02:38 | That simply means that image is
available. I'm not actually using it yet so that
| | 02:43 | would be the next step.
| | 02:44 | I want to go back to the regular
Master Page Gallery, come down to the Page
| | 02:49 | Layout that I want to use it on, which
is the ProductPage, hit that dropdown,
| | 02:53 | and I don't need to edit
it in SharePoint Designer.
| | 02:56 | I need to edit its properties.
| | 02:57 | But because I want to edit it at all, it
is actually going to check things like
| | 03:02 | this will require content approval.
| | 03:04 | I do have a Preview Image location here.
| | 03:07 | I can use an absolute or relative URL.
| | 03:11 | In my case, I'm giving it the _catalogs
/master page/Preview%20, obviously for
| | 03:19 | the space Preview Images/productpreview.jpg.
| | 03:23 | I can click the little button here to test.
| | 03:25 | I'll make sure that works. It seems to.
| | 03:28 | And then I'm going to click OK,
and go over to my Create Page window.
| | 03:35 | Now, when I come down to my selected
Page Layouts, I can select between them
| | 03:40 | when I come to my own Product Page I
should see my own preview, however I
| | 03:44 | wanted to do it there.
| | 03:44 | Now, you may not see a big point to
doing all these preview images if you're
| | 03:49 | creating a lot of these pages yourself.
| | 03:51 | You might think well, I
know what these pages mean.
| | 03:54 | But remember, you'll really have two
audiences when you're working as a Web
| | 03:58 | developer in SharePoint.
| | 03:59 | It's not just the people who will be
viewing this site, but it's also the people
| | 04:03 | writing a lot of the pages.
| | 04:04 | It's very common that you'll
have multiple contributors.
| | 04:08 | So it's about providing a framework to
your content creators so that it's very
| | 04:12 | apparent which pages they should be choosing.
| | 04:15 | And everything that you can do, like
preview images, like multiple Page Layouts
| | 04:21 | is going to be helpful.
| | Collapse this transcript |
| Creating new pages based on page layouts| 00:01 | There's no point making a Page Layout
if you're not going to create multiple
| | 00:05 | Web pages based on it.
| | 00:06 | Now, we've seen this once, but like
most things in SharePoint, there are
| | 00:09 | several ways of doing this.
| | 00:10 | As we're on a Publishing site, we've
got the big dropdown menu, and I'd argue
| | 00:14 | that the most common way of doing
it is using the Create Page option.
| | 00:18 | But really, what's this doing?
| | 00:19 | Well, again, we're in a Publishing site.
| | 00:22 | If I click on my View All Site
Content, that means I'm going to have a
| | 00:26 | Pages Document Library.
| | 00:28 | And it's smart enough to know, even in
here, if I click the New button, it's
| | 00:32 | going to only pick from my Page Layout types.
| | 00:34 | Do you want the Page, an Article Page,
a Welcome Page or Product Page?
| | 00:39 | And take me back to the Create Page
option where I have to select Product Page
| | 00:43 | again anyway to bring that up.
| | 00:45 | Now, one of the interesting things
you'll find, let's say I create this, Second
| | 00:50 | Product Page I'll call it, and click Create.
| | 00:54 | Now, if I go into SharePoint Designer
and find that Pages directory and see
| | 01:02 | it there I don't think it's
checked out, maybe I'll just edit it in
| | 01:05 | SharePoint Designer.
| | 01:06 | I'm going to double-click it.
| | 01:07 | It will tell me, This page cannot
be edited in SharePoint Designer.
| | 01:11 | Your only choice is you can edit the
content that's on that page through the
| | 01:15 | browser, through the very controlled
way of doing it, or you can edit the
| | 01:19 | page layout, but that's the only choice you
have, which makes sense if you think about it.
| | 01:24 | We're trying to define a template, and
we don't want to allow the ability to
| | 01:28 | use a template and then make all
the pages look separately, completely
| | 01:31 | independent of each other.
| | 01:32 | We're either using the template, or we're not.
| | 01:35 | So it doesn't allow you to edit the
actual content page in SharePoint Designer
| | 01:39 | when you're using Page Layouts.
| | 01:41 | If I hit Edit in browser, I'll go to
this very controlled page where I can
| | 01:46 | starts to edit the content that I've done.
| | 01:50 | One of the things I'm often asked on
the Create Page option is how do I change
| | 01:54 | or restrict the choices being made
available to my contributors on this page?
| | 01:59 | And that's fairly easy to do.
| | 02:01 | I'm going to go back into my Modify All
Site Settings, and in the Look and Feel,
| | 02:07 | I've got one that says Page layout and
site templates, like Master pages the
| | 02:12 | phrase Page layouts appears in two places:
| | 02:14 | in the Galleries, which says what do I
have and in the Look and Feel, which is
| | 02:18 | really, which ones do I use?
| | 02:21 | The default on the Page Layouts is
Pages in this site can use any layout, but I
| | 02:26 | can check that Pages in this site can
only use the following layouts and choose
| | 02:29 | perhaps Article page with body only,
a Product Page and a Welcome page.
| | 02:37 | You can even then check to Reset all
subsites to inherit these Page Layout settings.
| | 02:41 | You don't need to do that, but just
to prove that this works, I'll click OK.
| | 02:44 | I'll go back to my Sites Actions > Create
Page, and now I have that restricted view.
| | 02:50 | So very easy to choose which
options are shown to your contributors.
| | 02:54 | I'm going to go back and just reset that
to Page in this site can use any layout.
| | 03:01 | And using these, you have a great deal
of control over what pages your users
| | 03:06 | are allowed to create.
| | Collapse this transcript |
| Controlling fonts and layouts| 00:01 | So we've created content types and page layouts.
| | 00:04 | Now potentially, a whole bunch of
different contributors could create pages in
| | 00:08 | your site, and that's a good thing.
| | 00:10 | You're delegating content
creation tasks, and that's a bad thing.
| | 00:14 | So what happens if they start
entering stuff that you didn't want?
| | 00:18 | Let's take a look at this very simple page here.
| | 00:20 | I'm going to shift into the Edit Page mode.
| | 00:24 | The real key here is when you have a
block of the HTML editable content with
| | 00:29 | the Rich Text Editor, because we can
have things like making them Bold or
| | 00:33 | Italicized, but we also have this Styles
area, and I showed this a little earlier.
| | 00:38 | It's the idea that you could select a
block and grab one of these and say, I'm
| | 00:43 | going to make this the
ArticleByline, and it will highlight that.
| | 00:46 | Now what that's really doing is applying an
inline style here, which is not a bad thing.
| | 00:51 | I'm going to highlight and remove that,
because the question often is okay,
| | 00:55 | how do I control that?
| | 00:56 | What if I want my own list of styles to
appear in for titles and error messages
| | 01:02 | and highlighting things, what do I do?
| | 01:04 | Well, I'm going to show you how to do that.
| | 01:06 | These Styles that I actually see here,
and they typically don't appear until you
| | 01:10 | have a block of text highlighted,
| | 01:12 | we've got three: ArticleByline,
ArticleHeadLine, ArticleTitle.
| | 01:16 | Let's say I don't want any of those,
but I'd like the ability to select a block
| | 01:21 | of text and highlight it with yellow, or
change the color of the text to red, so
| | 01:27 | that it shows up as an error.
| | 01:28 | Well, I'm going to go ahead and do that.
| | 01:30 | So let me cancel this Page.
| | 01:32 | I'm going to just Discard the Check
Out, which is the same as canceling it.
| | 01:37 | Let me show you where it's
getting those Styles from.
| | 01:39 | For once, it's actually not from core.css.
| | 01:42 | If I right-click and say View Source,
one of the first links to a stylesheet
| | 01:47 | I see is to this guy, to
HtmlEditorCustomStyles, and that's where they're
| | 01:52 | being brought from.
| | 01:53 | Now the question is how easy
is this to edit? It's not.
| | 01:57 | It's almost impossible to edit.
| | 01:58 | You can't, and you won't.
| | 01:59 | So what you're going to do, like
everything else, is you're going to take what's
| | 02:03 | in there, and you're going to copy it.
| | 02:06 | I'm going to grab my own copy of this.
| | 02:07 | So I'll just copy the path and paste
it up there, and it is going to save it.
| | 02:16 | I'll just save it out there
to my Desktop and open it up.
| | 02:20 | It's not very big, this one, thankfully.
| | 02:22 | It's going to open up in SharePoint
Designer or your chosen CSS Editor.
| | 02:26 | We've got a few things that are being
used internally by that Editor, but down
| | 02:31 | towards the bottom, these three
pieces are what gives us our Custom Styles.
| | 02:36 | In fact, it's all drawn from
what's the name of the class.
| | 02:40 | In this case, it's ms-rte for
Rich Text Editor Custom-ArticleTitle,
| | 02:46 | ArticleByline, ArticleHeadline.
| | 02:47 | Now what I'm going to do is grab one of
these, and it does me no good whatsoever
| | 02:53 | to edit this file, because
it's just saved to my Desktop.
| | 02:56 | But again, I do have a
custom.css in my own site here.
| | 03:01 | So I'm going to change this one.
| | 03:03 | I'm going to come down to after my
current existing CSS, put a little note in.
| | 03:08 | What I have here is anything that
starts off with a .ms-rteCustom- will be a
| | 03:18 | style that I can do.
| | 03:19 | I don't want to have ArticleTitle.
| | 03:21 | I'm going to have one that says
perhaps Highlight, and all I'm going to do on
| | 03:25 | this is have a background-color of yellow.
| | 03:31 | Let's say I'll do one more, where
I'll change the color of the font to red.
| | 03:38 | These are just very simple.
| | 03:41 | Obviously, you can change the font-size,
you could change the padding, and you
| | 03:44 | might do things like blockquotes,
quotations that kind of thing.
| | 03:48 | I'm going to save this.
| | 03:50 | I'm going to go back into this page,
refresh it, just to make sure it's loading
| | 03:55 | the new version of my custom.css.
| | 03:57 | Then shift into my Site Actions >
Edit Page mode, come down into this Text
| | 04:03 | Editor, highlight a bit off text,
say this entire line over here.
| | 04:08 | Then in my dropdown Styles, I
have both Error and Highlight.
| | 04:12 | I could highlight with yellow.
| | 04:13 | I might want to change that to a nicer
hexadecimal color, but it works fine.
| | 04:18 | I could select another word, do an
inline highlight there, and we're using CSS
| | 04:22 | to change the Styles, so very easy to apply.
| | 04:25 | Although as you will notice, the two
custom ones that I change made the other
| | 04:29 | ones disappear, and that tends
to be the way that it behaves.
| | 04:32 | So if you do want to keep the other
Styles, copy them all from HTML Editor CSS
| | 04:39 | file, and paste them in your custom.css.
| | 04:42 | We're now really applying
structure from the top to the bottom.
| | 04:46 | We're starting with the entire site.
| | 04:48 | We're defining a master page to describe
the overall layout and navigation, then
| | 04:52 | the page layouts to describe structure
for our repeated page types, and then
| | 04:56 | even custom CSS to control the content
used in just tiny pieces of those pages.
| | Collapse this transcript |
| Controlling approval workflow| 00:01 | By now, we've seen this toolbar several times.
| | 00:03 | It's what appears when you've created
or are editing a page in the browser.
| | 00:08 | This toolbar only appears if
you're working on a site with the
| | 00:11 | Publishing feature enabled.
| | 00:13 | There are a lot of things
you can do on this toolbar:
| | 00:15 | spelling, page settings, previewing
the page, but the two first pieces of
| | 00:19 | information here are the Version and the Status.
| | 00:23 | If you select either of these links,
you'll get the same information that'll
| | 00:26 | tell you you are viewing say a draft
or a published version of the page,
| | 00:30 | what the Current version is, what's
viewable by all users, whether this is
| | 00:35 | checked out or not.
| | 00:36 | It says this page is not currently checked out.
| | 00:38 | I am going to click OK.
| | 00:40 | Both links would give you the same information.
| | 00:42 | If I wanted to edit the page, I
can click the Edit Page button.
| | 00:46 | It's giving me a prompt:
| | 00:47 | remember to check in before
other people can see your changes.
| | 00:50 | While I'm in the Edit mode, there are
things I can do, such as Spell Checking on
| | 00:54 | there, because I've got some Latin
dummy text that will take a while, but it is
| | 00:58 | there and is useful.
| | 01:00 | If I accidentally make that change and
say, oh, I didn't really want to edit it,
| | 01:04 | I could go to be Page menu and say I
want to Discard Check Out, which just takes
| | 01:10 | it back to where we were before.
| | 01:12 | This currently counts as a Draft Version.
| | 01:15 | That means it won't be viewable
by your typical reader of the site.
| | 01:18 | They would never actually see this
version until I click the Publish button.
| | 01:23 | Depending on your security levels, you
may or may not have the Publish button.
| | 01:27 | If you're not in the Approvers group,
all you see is Submit for Approval.
| | 01:33 | I'm going to click Publish directly,
and get that to the live version.
| | 01:37 | So we're now looking at the
page as everybody is seeing it.
| | 01:40 | To just get the toolbar back, the
simplest way is to switch to Edit Page mode here.
| | 01:46 | If I mouse over some of the other menus, we
can see we have things like a Workflow option.
| | 01:51 | We're going to get a bit
more into Workflow later on.
| | 01:53 | Now let me discard that Edit mode.
| | 01:57 | The whole idea, of course, is this
toolbar is really allowing you to do what
| | 02:01 | you'd want to do with a
full enterprise-level Web site.
| | 02:04 | Having the idea of thousands of
readers, multiple contributors and few
| | 02:08 | approvers, but we're able to work on
the Web site by using the Web site rather
| | 02:13 | than extracting all our pages out into
some private place to work on them before
| | 02:18 | anybody else sees them.
| | 02:20 | Really, the toolbar is appearing,
because if I go to my Site Actions menu and go
| | 02:24 | to View All Site Content, if I look
at my Pages directory, which is where
| | 02:29 | everything is being stored.
| | 02:30 | All my Web pages are stored
in this Pages Document Library.
| | 02:33 | I'm going to go to the Document
Library Settings, and you may not be too
| | 02:37 | familiar with looking at
the Settings a little bit,
| | 02:39 | but most of the reason that we see
these things on the toolbar is because my
| | 02:44 | Versioning Settings of this Document
Library say that I'm going to create
| | 02:48 | major and minor (draft) versions.
| | 02:49 | That's why we have Draft versions, by
default, that only users who can edit
| | 02:54 | items will see those Draft
versions, so a typical reader won't.
| | 02:57 | Then we have the option here that you
require documents to be checked out before
| | 03:01 | they can be edited is Yes.
| | 03:03 | If I was, say, working on a test Web
site, and I wanted to make my life very
| | 03:07 | easy, I might say no.
| | 03:09 | I don't require documents to be checked out
because it's only me who is going to edit them.
| | 03:13 | Maybe everybody can see draft items.
| | 03:15 | I'm not interested in versioning.
| | 03:17 | I'm leaving all of these as they are.
| | 03:19 | But bear in mind that what the toolbar
is really showing you is the settings
| | 03:23 | that have been done on this Document Library.
| | 03:26 | It's just applying these ideas to
the Web pages in your Pages Library.
| | Collapse this transcript |
|
|
10. Customizing the Collaboration PortalWhat is the Collaboration Portal?| 00:01 | If your SharePoint Server is just WSS,
and you don't have MOSS, well, you get
| | 00:06 | some great places to put your stuff.
| | 00:08 | But WSS sites are very small and focused.
| | 00:11 | They're based around a team like a
team site or a document workspace or
| | 00:15 | a meeting workspace.
| | 00:16 | When you have MOSS, you're
really taking it up a level.
| | 00:20 | The idea is that you're thinking how
can I get a Web site that covers my entire
| | 00:24 | organization and even, how do I
organize all these WSS sites that I've got?
| | 00:29 | Now you could create your own site to
organize these, but Microsoft created
| | 00:34 | something to do this
called the Collaboration Portal.
| | 00:37 | The Collaboration Portal is
something that can be only created in MOSS.
| | 00:41 | You have to have the Microsoft Office
SharePoint Server license, either the
| | 00:45 | Standard Edition or the
Enterprise Edition. They both have it.
| | 00:49 | This is not available to create under
the usual Site Actions > Create Site menu,
| | 00:55 | even if you're in say a site
where the license supports it.
| | 00:59 | If you say I want to create a site,
it does not allow you to create a
| | 01:03 | Collaboration Portal.
| | 01:04 | You won't see that option actually
appearing anywhere, because you can only
| | 01:09 | create a Collaboration Portal from
SharePoint Central Administration.
| | 01:14 | Now you may or may not have access to
SharePoint Central Administration, but
| | 01:18 | just to show what it looks like,
| | 01:20 | if I was in SharePoint Central
Administration, and I said, I want to make a new
| | 01:24 | site collection, one of my options,
apart from the normal team sites and blank
| | 01:29 | sites and document workspaces,
would be a Collaboration Portal.
| | 01:34 | There are two kinds of portals that
can be created in SharePoint 2007:
| | 01:38 | Collaboration Portal and a
Publishing Portal, and you might as well say
| | 01:42 | Intranet, Internet for
Collaboration Portal and Publishing Portal.
| | 01:48 | Both of these can only be created as a
top-level site in a new Site Collection,
| | 01:53 | which is why they must be done from
SharePoint Central Administration.
| | 01:57 | Really, to say that it's a site is
not really giving it its due respect.
| | 02:02 | When you create a Collaboration Portal,
you're actually creating a series of
| | 02:06 | sites inside a Site Collection.
| | 02:08 | Now in fact, I can really tell that what has
happened just by looking at the top link bar.
| | 02:12 | This is a Collaboration
Portal as it exists out of the box.
| | 02:16 | What happens is it creates five or
six sites, depending on if you have an
| | 02:20 | Enterprise license of MOSS
or a Standard license of MOSS.
| | 02:23 | The Collaboration Portal is at the top,
and then there is a subsite called the
| | 02:27 | Document Center, a subsite called a
News site, a subsite called a Reports
| | 02:32 | Center, which is only there if you have
MOSS Enterprise, so you may not see it,
| | 02:37 | a Search Center and a Sites Directory.
| | 02:41 | These tabs all actually represent separate
SharePoint Sites inside this Site Collection.
| | 02:48 | Once again, like many other
SharePoint site templates, there is nothing
| | 02:51 | magical about this.
| | 02:53 | You could create your own structure.
| | 02:55 | You can even make the sites
individually, but this is the typical way you
| | 02:59 | come across things like the Search Center
and the Sites Directory and the Reports Center.
| | 03:04 | When you create the Collaboration Portal,
it has the publishing feature turned
| | 03:08 | on, by default, which is why you see the
big menu with all the different options on it.
| | 03:13 | But like everything else in SharePoint,
this is designed to be customized.
| | 03:17 | It's designed to be changed.
| | 03:19 | It's not supposed to be
fantastically useful out of the box.
| | 03:23 | You're supposed to change it.
| | 03:24 | You're supposed to customize it.
| | 03:25 | That does mean that we need to kind of
go through each of the subsites, because
| | 03:30 | they are different, and learn a little
bit about how to customize the News Site
| | 03:34 | or the Reports Center or the Search Center.
| | 03:37 | So understand that the Collaboration
Portal is a collection of different
| | 03:41 | SharePoint sites and to customize it
successfully, you need to understand
| | 03:45 | its different parts.
| | Collapse this transcript |
| Customizing the Home site| 00:01 | So if the Collaboration Portal creates
five or six sites when it is created,
| | 00:06 | Let's talk about the first one, the Home Site.
| | 00:08 | This is the first part of the
Collaboration Portal and when it begins, it is
| | 00:12 | really just one page, the
home page for the portal.
| | 00:15 | But it is a SharePoint site.
| | 00:17 | If I really want to understand what
this site is made of, I go to my View
| | 00:21 | All Site Content link.
| | 00:22 | I'll see that there's seven document libraries.
| | 00:25 | There is about seven lists.
| | 00:26 | There's a discussion board and
underneath that, my list of sites and workspaces
| | 00:31 | is where I'm seeing my subsites, the
Document Center the News site and so on.
| | 00:35 | So this site seems to have a lot to it,
but many of these libraries are just
| | 00:41 | here because the Publishing feature
is turned on and because we're at the
| | 00:46 | top-level site of this site
collection, that's where were seeing these
| | 00:49 | supporting libraries like
the Style Library for our CSS.
| | 00:53 | For site collection documents and site
collection images, really this site is
| | 00:58 | made of two things, the Pages
Library and the Images Library.
| | 01:02 | Right now, the Pages Library has one thing
in it, which is our home page. That's it.
| | 01:08 | SharePoint is using itself to manage itself.
| | 01:11 | It's storing its own page in its own library.
| | 01:14 | If I click back a couple of times, and
I go to the Images Library, I just see
| | 01:19 | that image that's being used on the home page.
| | 01:22 | This is pretty much how
this site is put together.
| | 01:25 | You can create new pages on this site from
the Site Actions menu and click Create Page.
| | 01:30 | It is up to if you want to do that.
| | 01:32 | You can, you don't have to.
| | 01:33 | If you choose to do that, you'll get
several choices for Page Layouts and
| | 01:38 | Templates that you can choose.
| | 01:40 | These are what SharePoint provides out
of the box, and they are typically going
| | 01:43 | to be customized, so I'll cancel that.
| | 01:46 | If you do add a new page,
you're going to have to create your
| | 01:50 | navigation yourself.
| | 01:51 | You can edit the Top Link Bar.
| | 01:53 | You can edit the Quick Launch Bar.
| | 01:55 | Because this site has Publishing turned
on, they are actually referred to as the
| | 01:59 | Global Navigation and Current
Navigation and they, like many other things, are
| | 02:04 | accessible from this Site Actions menu.
| | 02:07 | You actually have a Site Settings
> Navigation option here where that
| | 02:12 | information can actually be changed.
| | 02:15 | If I want to edit this home page, and
let's face it, I typically will, I don't
| | 02:19 | want the generic bland content, you might
think that you need to find the address
| | 02:23 | of it and open it up in SharePoint Designer.
| | 02:25 | But you don't, and you can't. If you try
to open this up in SharePoint Designer,
| | 02:30 | it will actually say, This page cant be
edited in SharePoint Designer, it must
| | 02:34 | be edited using the browser.
| | 02:36 | That means we go to the Site
Actions menu and click Edit Page.
| | 02:40 | It blows apart into a series of
areas and zones for Web Parts.
| | 02:45 | We're seeing this Editing
toolbar appear over here.
| | 02:48 | That's actually controlling the status
of this page and how many versions it has
| | 02:53 | and whether this is publicly viewable
or published or just in a draft mode.
| | 02:57 | But all of these are individual modular pieces.
| | 03:00 | I can click on the Edit Content button
here and see that this default content is
| | 03:05 | actually being provided to us as a
table with a bunch of information inside.
| | 03:09 | I can just go through and start to
delete some of that content and enter in
| | 03:14 | my own information.
| | 03:16 | Same kind of idea over here.
| | 03:17 | I can click the page image.
| | 03:19 | I can see what it is originally
pointing to, but if I wanted to, I could click
| | 03:23 | Browse, which would even allow me to
upload a new image into that directory.
| | 03:28 | I'm not going to do that right now, but
this is how we'd manage it, always being
| | 03:32 | done through the browser.
| | 03:33 | Like a WSS Site, this page also has
multiple Web part zones. Several of them are
| | 03:40 | empty, by default, but you can click
the button to add a Web part, and you'll
| | 03:44 | see a bunch of suggested ones.
| | 03:46 | You'll also see the button saying All
Web Parts, which will give you a lot of
| | 03:50 | different ones, depending on
which version of SharePoint you have.
| | 03:53 | Lot of the Enterprise Web Parts
is what I'm looking at right now.
| | 03:56 | But there are things like Content Query
Web Parts, which will allow you to bring
| | 04:00 | in information from subsites, for example.
| | 04:02 | There's an RSS Viewer,
there's This Week in Pictures.
| | 04:06 | A lot of these are self-explanatory,
you really just need to explore them and
| | 04:09 | play around with them.
| | 04:10 | So it's easy to think there's a lot
on the Home site or the Collaboration
| | 04:15 | Portal, but there really isn't.
There's really just one page.
| | 04:18 | Very, very simple, it just has a lot
of options to it, and that's where the
| | 04:22 | complexity comes in.
| | Collapse this transcript |
| Customizing the News site| 00:00 | The Collaboration Portal is targeted
to small to medium-sized businesses or
| | 00:06 | departments for creating their
own portals for a lot of people.
| | 00:10 | One typical thing you need in this
idea of an Intranet Portal is a central
| | 00:14 | location that everybody
comes to for news. This is why:
| | 00:18 | In the Collaboration Portal one of the
sites that you get is called the News site.
| | 00:23 | You see the tab over here with a
couple of dropdowns underneath it.
| | 00:27 | You can also get to it from the
Quick Launch or the left-hand sidebar
| | 00:31 | whatever term you prefer.
| | 00:33 | This is a completely separate,
independent site inside SharePoint.
| | 00:37 | Like any other site, you can view its
contents by saying View All Site Content.
| | 00:42 | I can see that I have three libraries,
one picture library and one list.
| | 00:46 | Going back to the home page, I've got a
Sample News Article that's very unexciting.
| | 00:52 | It's a bunch of dummy Latin text, but I
could shift into Edit Page mode, and the
| | 00:57 | editing has to be done on
this page through the browser.
| | 01:00 | It cannot be done using SharePoint Designer.
| | 01:03 | SharePoint Designer would
not let you edit this page.
| | 01:06 | I'm not going to make any changes here,
but I am going to use the Page menu to
| | 01:10 | just discard the checkout, yes I am
sure. Going back to the News site.
| | 01:15 | There is a couple of things that they
have on this page, by default, such as an
| | 01:19 | RSS Viewer and a This Week in Pictures Web part.
| | 01:24 | Even the RSS Viewer here says the
Web part is not bound to a feed.
| | 01:28 | Open the tool pane to set the feed Url.
| | 01:30 | It might as well just say
this Web Part needs to be set up.
| | 01:33 | Open the Settings pane.
| | 01:35 | So we're going to open that tool pane.
| | 01:38 | It has a bunch of things inside it , such as
the Appearance, which is what's the title of it,
| | 01:44 | the main thing being this RSS Feed URL.
I'm going to use the RSS feed of the
| | 01:49 | lynda.com Blog, which is just
feeds2.feedburner.com/lyndablog and say that I
| | 01:57 | want to see 10 articles at a time.
| | 01:59 | I might even change the title of
this to say lynda.com news and click OK.
| | 02:06 | We're bringing information back,
some central information there.
| | 02:10 | If I click on the This Week in Pictures
item, it's kind of a strange one here,
| | 02:15 | what we look at is a library.
| | 02:17 | This is actually an Image library,
which not surprisingly, is just a place
| | 02:21 | to dump your images.
| | 02:23 | But if you have a bunch of images
uploaded into this library, this Web part over
| | 02:29 | here will actually automatically
start to kind of rotate through those and
| | 02:33 | itself like any other Web part has a
whole bunch of settings that you can change
| | 02:38 | to change how the Appearance works
and whether it should have a fixed height
| | 02:41 | and what the title is and how the
slideshow should work, that kind of thing.
| | 02:45 | I'm just going to leave it because
I don't have any images uploaded.
| | 02:48 | Now because I've made changes to these
Web parts, I've got the toolbar appearing
| | 02:53 | again, saying this version is checked
out, and right now I'm the only person who
| | 02:57 | can see and modify this page, which
means nobody else coming to the News site
| | 03:02 | sees the changes I've made
until I choose to publish this.
| | 03:07 | If I wasn't completely sure that I was
done, I might just check it into Share
| | 03:10 | Draft, and that means that anyone else
who's a contributor on the site could see
| | 03:15 | it and view it and edit it.
| | 03:17 | But I'm going to say yup.
| | 03:18 | I think it's great. I'm going to hit Publish
and go ahead and see what that looks like.
| | 03:23 | Okay so we're customizing this
particular page, but what else?
| | 03:27 | Well, the News site is really made up
of these news articles and in fact, if I
| | 03:32 | look at my All Site Content link, I can
see what I really have in here is Pages
| | 03:37 | Directory with three things in it.
| | 03:39 | You might think why three, because I can
see two on the dropdown list, the Sample
| | 03:45 | News article, the News Archive. Well, what
we're really seeing is both of those two
| | 03:50 | options and the home page for the News site.
| | 03:53 | Those are the three
options in that Pages directory.
| | 03:56 | Default is the home page, and we've
got the first article, and then we've got
| | 04:01 | News Archive, nothing really there.
| | 04:04 | Not surprisingly, I could
also add something else to that.
| | 04:08 | If I go into my Pages Library directly,
or if I go to Site Actions > Create
| | 04:15 | Page, I can actually start
to create a New News Article.
| | 04:22 | I'll say this is an article page
with the body only and click Create.
| | 04:26 | It is very simple one here.
| | 04:28 | We basically have one place for a title, a
place for content and a place for an image.
| | 04:33 | I'll just put some example text in here,
and this page cannot be edited using
| | 04:38 | SharePoint Designer.
| | 04:39 | The only thing you can do in SharePoint
Designer is edit the template for this
| | 04:43 | page, the page layout.
| | 04:45 | So I'm just going to save it as
that and say immediately publish this.
| | 04:49 | The reason that I'm doing that is
just to show what the end effect is.
| | 04:52 | Because I've added this to
that Pages Library, I now have it
| | 04:56 | immediately available as the New
News Article on the dropdown list
| | 04:59 | across this Site Collection.
| | 05:01 | That's just the way that
this is actually configured.
| | 05:03 | Now as you get further into customizing
this, you're likely to create specialized
| | 05:08 | News Layout Pages rather than accepting
the SharePoint generic ones, and those
| | 05:12 | would be creating page layouts themselves.
| | 05:15 | But again, a very focused site for news
presentation across an intranet portal.
| | Collapse this transcript |
| Customizing the Search Center site| 00:01 | One of the sites created in a
Collaboration Portal is a site all about search,
| | 00:05 | and it's called the Search Center.
| | 00:07 | And your first thought may be something
along the lines of, why did they bother
| | 00:11 | making this a SharePoint site? After
all, search is everywhere in SharePoint.
| | 00:15 | If we are on the portal, we'll see it on
the top-right of pretty much every page.
| | 00:21 | The thing is, creating Search as a
site by itself gives you the ability to
| | 00:26 | customize it, to customize your Search
page, to customize your Advanced Search
| | 00:31 | page ,to customize your results page,
to have multiple advanced pages for
| | 00:36 | searching complex content.
| | 00:38 | In short, you don't need to
customize your search center.
| | 00:41 | You could just leave it alone.
| | 00:42 | But here is one to know if you do
want to do it. One, it is, of course, a
| | 00:46 | regular SharePoint site.
| | 00:48 | Now when you go to the search center,
you may not see the quick launch bar. It's
| | 00:52 | just not shown on this page, by default.
| | 00:54 | But we can still get to our View All Site
Content link from under the Site Actions menu.
| | 01:00 | And that'll tell us that yes, sure
enough indeed, this site is made up of pages
| | 01:05 | and lists and libraries the
same as any other SharePoint site.
| | 01:08 | In fact, our Pages library has five
items in it, which is more than most of the
| | 01:13 | default sites created.
| | 01:14 | What we actually have here is the default page,
which is the home page of the search site.
| | 01:19 | There is an advanced search page,
there is a people search page, there is a
| | 01:23 | general results page, and then
there is a people results page.
| | 01:27 | And all of these are created as
pages, and they are all editable.
| | 01:31 | Now, it's a question of how much you
want to edit them, if you'd say go to your
| | 01:35 | default search page, it's
quite nice, it's quite simple.
| | 01:38 | If you did want to edit some of this
content in the white area, you could do
| | 01:42 | that, add some suggestions, for example.
| | 01:44 | Let's say I search for
something, just a random phrase.
| | 01:47 | We are not going to get any results here,
but I'm on the Results page now, the
| | 01:52 | classic results page in SharePoint,
and I could edit this page too.
| | 01:55 | Let's say that what I want to do is go
into Edit Page and see what it's made of.
| | 02:00 | You might be quite surprised here. The
Search Results page have a lot of Web
| | 02:05 | parts on them, because the search in
SharePoint, which is a very powerful search
| | 02:10 | engine, is delivering back
information like how long did the search take?
| | 02:15 | Did you find any items?
| | 02:16 | Are there anything that should
be more prioritized than others?
| | 02:20 | So there is Search High Confidence
Results. Best Bets are things you can do to
| | 02:25 | recommend certain links.
| | 02:27 | They are almost like having little
sponsored Google ads in your search results.
| | 02:33 | Not something I typically go through in
this course, but you can look at those
| | 02:36 | in the search settings of your site collection.
| | 02:39 | We have got, what are called Federated
Results, which at the moment, the way it's
| | 02:42 | configured is it's drawing suggested
results from online search engines. That can
| | 02:47 | be configured and changed.
| | 02:49 | But it's all made up Web parts like
everything else, and let's say I just want
| | 02:52 | to do something simple.
| | 02:53 | On the right-hand side, in the right
zone, I am going to click Add a Web Part.
| | 02:58 | It's got a whole bunch of suggested
Web parts. As you can see, there are many
| | 03:01 | searched ones, so you can experiment with those.
| | 03:04 | They are all quite customizable.
| | 03:07 | But if I collapse that and shrink down,
go through quite a few, many of these
| | 03:12 | Web parts wouldn't really
make sense on this site.
| | 03:15 | But let's say I just want to put
in some content and type some
| | 03:19 | information myself.
| | 03:20 | I'm going to select the Content Editor
Web Part, click Add. That's going to
| | 03:24 | immediately say, well to do anything
meaningful with it, open the Tool pane and
| | 03:28 | open up the Rich Text Editor.
| | 03:30 | And here is where I could
type some content. I'll click OK.
| | 03:37 | And after I've edited that content, I
can just Publish this page, and again,
| | 03:43 | nothing particularly remarkable here.
| | 03:45 | Obviously, I would want to change the
title, and in fact, I can do things about
| | 03:49 | suggested results by using that Best Bets idea.
| | 03:52 | What I'm trying to illustrate is that
the search center in SharePoint is like
| | 03:56 | any other SharePoint site.
| | 03:57 | It's customizable, it's changeable, and
you can change it the way you customize
| | 04:01 | anything else in SharePoint.
| | Collapse this transcript |
| Customizing the Site Directory| 00:01 | There is a disadvantage to SharePoint
being such an effective site engine.
| | 00:05 | It's so good at churning out Web sites
that after it has been unused for a few
| | 00:09 | months, you may have hundreds or
thousands of SharePoint Web sites around and
| | 00:12 | everyone is finding it difficult to
actually find what they are looking for.
| | 00:15 | I am often asked, where's the
built-in SharePoint site map?
| | 00:20 | And there isn't one. Seriously, there
is no one place to go to in SharePoint
| | 00:24 | that will tell you what
exists in your SharePoint farm.
| | 00:26 | You have to make it yourself,
or make your own version anyway.
| | 00:30 | The perfect place to put this
information would be in your Intranet Portal.
| | 00:34 | The way Microsoft has tried to help is by
giving you something called the Site Directory.
| | 00:39 | By now, you should have guessed that, yes,
this is indeed another SharePoint site.
| | 00:44 | This is a way that you can organize
links, not only to sites inside this site
| | 00:49 | collection, but to sites outside
this site collection, as long as you know
| | 00:53 | the address of them.
| | 00:54 | It is not automatic.
| | 00:56 | People often assume there must be some
secret button they can click to make it
| | 01:00 | go and index all the site collections
and all the sites and have them appear in
| | 01:03 | some kind of meaningful structure.
| | 01:05 | And no, that's not going to happen.
| | 01:07 | You have to impose your own
taxonomy, your own organization, on this.
| | 01:12 | The Site Directory is another
SharePoint site, not surprisingly, still has its
| | 01:16 | own view or Site Content link.
| | 01:18 | It's consisted of lists and the libraries.
| | 01:21 | And really, the primary one
here is there is a list of sites.
| | 01:26 | Now as it starts off out of the box,
there is really nothing in there.
| | 01:30 | I'm going to show you, if I go back
to the Home page of the Site Directory,
| | 01:34 | is this thing here.
| | 01:35 | We've got Categories, Top Sites, Site Map.
| | 01:38 | Site Map you might often click
and think okay, is this taking me
| | 01:41 | automatically to anything?
| | 01:43 | Not really, unfortunately.
| | 01:45 | We've got some ability to go through
our sibling sites, like the News site, the
| | 01:51 | Document Center, the
Search site, the Reports site.
| | 01:54 | But the first tab we have is Categories,
which right now we see Division, and
| | 02:00 | Region, and Tasks and Tools.
| | 02:02 | And Microsoft has given you some
example of Divisions: Information Technology,
| | 02:06 | Research and Development, Sales and Finance.
| | 02:09 | You might immediately look at this and go okay.
| | 02:11 | I have to reorganize these into
departments and locations, or what have you.
| | 02:17 | This stuff is meant to be changed.
| | 02:19 | It is meant to be organized and
reorganized, but that is somewhat non-intuitive
| | 02:25 | in terms of how you actually do that.
| | 02:27 | Before I start messing around with
the Categories, let me just point out a
| | 02:31 | couple of links up here on the right.
| | 02:33 | You've got an option called Create Site.
| | 02:36 | And this really does the same kind of
thing as the Site Actions > Create Site
| | 02:40 | here, but you also have Add Link to Site.
| | 02:44 | This does allow you to add a link, not
surprisingly, to a site that's not in this
| | 02:49 | site collection. It could even be
a link to a public Web site.
| | 02:52 | It doesn't really matter.
| | 02:53 | Let me just go and switch a tab
and grab the address of another site.
| | 02:57 | So, for example, this team site that
I've been playing around with some of the
| | 03:00 | other movies is at the address
ldcsharepoint.com/sites/team.
| | 03:06 | I am going to copy that location.
| | 03:08 | Go back over here, and I'm going to just
put in a link to my Demonstration Team Site.
| | 03:17 | I can give it a description.
| | 03:18 | I can choose which of the divisions I
want to put it in, Information Technology
| | 03:23 | and Research & Development.
| | 03:25 | I'll have that to be Local and National.
| | 03:28 | Then I have to give it the
URL, the URL is required.
| | 03:31 | There is a little button here.
| | 03:33 | There is a little link here
saying Click here to test.
| | 03:35 | All that's going to do is take that
URL that you've pasted in, or typed in, and
| | 03:40 | open it in another window, and
you get to check, oh did it work?
| | 03:43 | And in this case, yes, it did.
| | 03:45 | I have got a couple of other
check boxes, like the Top Site.
| | 03:48 | I am going to check that.
| | 03:49 | I'll show what it does in a minute.
| | 03:51 | And Top Tasks, let's do that too.
| | 03:54 | And there is even the potential of
giving an Owner, and that really means
| | 03:57 | the owner of the link.
| | 03:58 | So if you have multiple people
contributing links here, and you don't know where
| | 04:02 | one came from, you might start
stipulating the people put the owner in there.
| | 04:06 | I am going to click OK.
| | 04:08 | We're immediately back to the Site
Directory, and I don't see any change whatsoever.
| | 04:13 | That's because I have to actually go
into the individual divisions, like the IT
| | 04:18 | one, to see that Demonstration Team Site.
| | 04:20 | I did check the box to say it was in
Top Sites, which means when I go over
| | 04:24 | there it does appear.
| | 04:26 | But this site is not in this Site
Directory, so it's nice to be able to link to it.
| | 04:31 | One of the things that I get from
checking Top Sites, if I go all the way up to
| | 04:35 | the top home page of the portal, is
anything that's checked as a Top Site
| | 04:39 | will appear in this Web
part over here as a Top Site.
| | 04:43 | So if you want to make it kind of known
and quite public at the top-level of the
| | 04:47 | portal that that site exists,
this is one way to do it.
| | 04:50 | Back into the Site Directory, here is
the one thing that I wanted to show you,
| | 04:54 | which is how do I organize these Divisions
and Regions in a way that makes sense to me?
| | 04:59 | Well, what you might think is do I
shift into my Site Actions > Edit Page mode?
| | 05:05 | And when I do that, I can see that
this page, like many others, is made up of a
| | 05:10 | bunch of Web parts and areas.
| | 05:12 | And if I look at this Web part for
Categories here, it even says, do you want
| | 05:16 | to create a new category, do you want
to Edit Sites and Categories? And I can
| | 05:20 | think, sure let's do that.
| | 05:21 | Well this is all about customization.
| | 05:23 | Let's Edit Sites and Categories.
| | 05:25 | I click that link, and it takes me to what
looks like a fairly normal SharePoint list.
| | 05:31 | And this might look a little weird.
| | 05:32 | We were saying, well, no I
wanted to edit the categories here.
| | 05:37 | I wanted to edit Information
Technology and Research & Development, and it's
| | 05:40 | taking me to a list of sites.
| | 05:43 | And really that's because the details
about things like Division and Region are
| | 05:47 | actually embedded inside this list.
| | 05:50 | And what does that mean?
| | 05:51 | Well, they're really in there
as columns of this sites list.
| | 05:56 | Again, that might still sound a little vague.
| | 05:57 | Well, let me hopefully make it a bit clearer.
| | 05:59 | I am going to go into the Settings of
this list and see the Columns that are
| | 06:04 | made up of my site entries, which is
the URL and the Title and the Description
| | 06:11 | and Division and Region
are here listed as choices.
| | 06:15 | These are directly editable through the list.
| | 06:17 | It's a normal SharePoint list.
| | 06:19 | I click on Division and come down,
and it says, here is my choices.
| | 06:24 | We've used this before when
we've created our own custom columns.
| | 06:27 | Maybe I would change that to IT,
Development, Sales & Marketing, Operations.
| | 06:37 | I am going to come down and click OK.
| | 06:39 | Now here is the interesting thing.
| | 06:42 | If I go back to my Site Directory,
I'll instantaneously actually see that my
| | 06:46 | divisions have changed to what I
changed them to the IT Development, Sales &
| | 06:50 | Marketing, and you might think,
depending on your background, that anything that
| | 06:55 | was previously in the Information
Technology one will have been re-coded in
| | 06:59 | that, but that's not what happens in
SharePoint. Kind of to prove that, I'm
| | 07:03 | going to go directly into the list itself.
| | 07:06 | We had our sites list, and I had my
Demonstration Team Site entered. That still
| | 07:12 | has the old data in it. Even though I
changed it so there is new options aren't
| | 07:16 | available anymore, they will still remain.
| | 07:19 | That's the way that SharePoint tends to work.
| | 07:21 | It tries to keep any data. Even when you
think that data might disappear, it doesn't.
| | 07:25 | But real,y the sites directory, these
categories that you're looking at are
| | 07:29 | choices defined in the
settings of that site list.
| | 07:34 | And that's the way that you have to
customize them, very kind of non-intuitive,
| | 07:38 | but once you get the hang of it,
it's actually quite easy to do.
| | 07:41 | You can also create a site directly here.
| | 07:44 | If I create a site, and this could be a
Team Site, a Document Workspace, a Wiki
| | 07:49 | Site, a Blog; anything can
be created directly under it.
| | 07:52 | I am going to create this as another demo.
| | 07:56 | I'll just do a blank site.
| | 07:58 | Notice the URL. Notice that because
we were in the position of being inside
| | 08:03 | the Site Directory that this new site will
be created as a subsite of the site directory.
| | 08:09 | Don't really have much of a choice about that.
| | 08:11 | However, because we are in this
place, you'll get a few new questions.
| | 08:16 | Do you want to list this in
the Site Directory? Yes, I do.
| | 08:19 | What divisions?
| | 08:20 | Let's have it in Sales, Marketing and
Operations, and have it International.
| | 08:24 | Create. It'll go away create and spawn
up that new SharePoint site, but it will
| | 08:30 | add it to the Site Directory.
| | 08:32 | Again, we could go back to the Tab
to prove that it's there. It should be in
| | 08:36 | Operations, and there we go, Demo Blank Site.
| | 08:40 | Once again, we're seeing this thing
with the sites directory as a part of
| | 08:44 | SharePoint that really needs
customization to make it worthwhile.
| | 08:47 | And that really is the
truth for all of SharePoint.
| | 08:50 | It doesn't need a lot of customization.
A little goes a long way. Thinking
| | 08:55 | about your different categories, how
you group your sites together makes it
| | 08:58 | much more useful.
| | Collapse this transcript |
|
|
11. Customizing the Publishing PortalWhat is the Publishing Portal?| 00:00 | SharePoint's main reason for existence,
at least for most people, is as an
| | 00:05 | internal platform within an organization.
| | 00:08 | And it does a really good job of that.
| | 00:10 | Document Management and Workflow,
Content Collaboration, Enterprise Search
| | 00:15 | whether it's creating collaboration
sites, focused on teams, or documents, or
| | 00:20 | Intranet Portals like the Collaboration Portal,
| | 00:22 | well, it was only natural for people to think
| | 00:26 | well, one of the things SharePoint
does really well is make Web sites.
| | 00:29 | So can it help make my public Web site?
| | 00:32 | And with the earlier versions of
SharePoint, SharePoint2003, SharePoint Team
| | 00:36 | Services, the answer was, 'No not really.'
| | 00:39 | It was possible but very, very
difficult and challenging to do.
| | 00:43 | With SharePoint 2007, the answer is yes, it can.
| | 00:46 | There's something in SharePoint 2007
called the Publishing Portal, and the
| | 00:50 | Publishing Portal is that part of
SharePoint suggested for a public Internet
| | 00:55 | site as a starting point.
| | 00:57 | Once again, like most other sites in
SharePoint, it is just a suggestion.
| | 01:02 | You don't have to use it.
| | 01:04 | You can construct a public site from the
other building blocks that we have seen.
| | 01:08 | But if you want to know what part of
MOSS Microsoft provides as a suggested
| | 01:12 | starting point for an Internet site, this is it.
| | 01:15 | Now, I'm looking at a Publishing
Portal as it was created right out of
| | 01:20 | Central Administration.
| | 01:21 | Like a collaboration portal, this site
can only be created as a site collection,
| | 01:26 | and you have got to understand it this way.
| | 01:28 | The publishing portal is a site
collection by itself, and it's very important
| | 01:34 | into understanding how we start to build it out.
| | 01:36 | Now, if you're fairly new to SharePoint,
you probably get somewhat overwhelmed
| | 01:40 | with the word publishing just
appearing again and again and again.
| | 01:44 | We have the Publishing Feature.
| | 01:46 | We have the Publishing Portal.
| | 01:48 | We have things called Publishing Sites.
| | 01:50 | And occasionally, people make the
mistake of thinking, oh, if I want use
| | 01:54 | SharePoint Publishing, I have to
use the Publishing Portal. No.
| | 01:58 | You really don't.
| | 01:59 | This really would have been better called
the Internet Portal or something like that.
| | 02:04 | It does have Publishing turned on, which I can
tell just from looking at my Site Actions menu.
| | 02:10 | I've got the big Publishing menu.
| | 02:12 | But it's the same as Collaboration Portal,
or the same as turning it on yourself.
| | 02:16 | You could turn that on for different sites.
| | 02:19 | So the Publishing Portal that we're
looking at uses the Publishing Feature.
| | 02:24 | Now, making one of these, which can be
done in SharePoint Central Administration,
| | 02:29 | does nothing magical to make this
suddenly public and out there on the Web.
| | 02:34 | All SharePoint sites
behave as if they're internal.
| | 02:37 | They will authenticate everybody, and
this one is no different, and one other
| | 02:40 | things you'll see on the Default
Publishing Portal is a message saying that you
| | 02:45 | must enable anonymous access on the site
collection for the forms authentication
| | 02:50 | logon page to work from Office
SharePoint Server, and you may not have any idea
| | 02:54 | what this means, but it's really
telling you that just because you made a
| | 02:57 | publishing portal, it doesn't mean
people can get to this over the Web.
| | 03:01 | You're going to have to get involved
with your farm administrators to make sure
| | 03:05 | that first off, that the machine this is
running on is reachable, and then that
| | 03:09 | the Web Application this is running on
is reachable, and then that this site
| | 03:13 | collection has Anonymous Access turned on,
because until that point, it tries to
| | 03:18 | authenticate everybody, and if it
doesn't know who you are, you will get an
| | 03:22 | Access Denied message.
| | 03:23 | But we're not really focused on the
technical side of allowing this site to be
| | 03:28 | visible over the Internet.
| | 03:30 | We're really talking about
how do you work with this site?
| | 03:32 | Well, it is a SharePoint site.
| | 03:34 | If I go to my Site Actions > View All
Site Content, which I get here because I
| | 03:39 | don't have a Quick Launch Bar,
| | 03:42 | I can see it's a SharePoint site.
| | 03:45 | It has Document libraries in it, and
lists in it, and that's what it's made off.
| | 03:50 | In fact, I can actually see it has two Sub
sites in it, Press Releases and Search.
| | 03:55 | These are really kind of provided as examples.
| | 03:58 | I'll go into that very shortly.
| | 04:00 | This exists as a Site Collection.
| | 04:02 | When a Publishing Portal is created,
you actually get three SharePoint sites in
| | 04:07 | that Site Collection:
| | 04:08 | the Top-level site, then a Press
Releases site and then a Search site.
| | 04:13 | Once again, it's using the Publishing
Feature, which means the individual pages
| | 04:17 | are stored in the Pages Library.
| | 04:19 | Right now, all we really
have there is the default page.
| | 04:22 | If I click on that, it should be no
surprise that this is actually just the home page.
| | 04:27 | And again, no surprise that I can edit
this by shifting into the Edit Page mode.
| | 04:31 | I can't edit this page using SharePoint
Designer, and if I try, it will refuse.
| | 04:36 | But it's made up of its own blocks.
| | 04:39 | I've got the Page Image here.
| | 04:40 | I've got what's called a Summary
Links Web part, which is a Web part
| | 04:44 | showing hyperlinks, which can be dragged and
dropped and moved around quite configurable.
| | 04:48 | And that's kind of really it.
| | 04:49 | There's not an awful lot
more information to this.
| | 04:52 | Obviously, you're going to customize this
and change things around, but just showing
| | 04:56 | you what's there, by default.
| | 04:58 | So how do I start to work with this site?
| | 05:00 | Well, I'm going to get into that very shortly.
| | 05:02 | But understand that really, this is
actually one of the most simplest SharePoint
| | 05:07 | site collections you can run into.
| | 05:09 | Yes, we've got Publishing on.
| | 05:11 | Yes there's a few Web parts we haven't
really explored, and there is certainly a
| | 05:15 | bit of an out-of-date look to it.
| | 05:16 | But it is simple, no Quick Launch Bar.
| | 05:20 | It's using the same features
we been exploring all along:
| | 05:23 | the Publishing Feature,
| | 05:24 | Master Pages and Page
Layout, Document Libraries.
| | 05:27 | It's still a SharePoint site, and
using that knowledge, we can customize it.
| | Collapse this transcript |
| Understanding security concerns for internet-facing sites| 00:01 | If you are using SharePoint for
your Public Website, you've got a few
| | 00:04 | things to consider.
| | 00:05 | First off, Licensing.
| | 00:07 | SharePoint is typically licensed per
user, but that obviously isn't going to
| | 00:11 | work for a Public Website where you
could have hundreds of thousands, or millions
| | 00:15 | of people visiting you.
| | 00:16 | So Microsoft has a One-off License you
need for SharePoint for Internet sites.
| | 00:21 | We're not going to cover
licensing at all in this course.
| | 00:24 | There are many, many different options there.
| | 00:26 | So talk to your rep is
there is something you need.
| | 00:29 | The key technical question is
how do people get to your site?
| | 00:32 | Just creating a Publishing Portal does
nothing to make it accessible via the Web.
| | 00:36 | Well first off, the machine that this is
installed on has to be available and
| | 00:40 | visible on the public Internet.
| | 00:42 | That's going to be your administrator's
job to make sure the domain names hook
| | 00:45 | up correctly, and point to the
correct Site Collection in SharePoint.
| | 00:49 | Now, your farm administrators will
need to do some work in SharePoint Central
| | 00:53 | Administration to make
this visible over the Web.
| | 00:56 | You'll also have to turn on Anonymous Access.
| | 00:59 | The first link that you get on a
Publishing Portal, if you click it, it
| | 01:03 | takes you to one of the Site
Settings that says What can Anonymous Users
| | 01:06 | access on this site?
| | 01:07 | And the default is Nothing at all.
| | 01:10 | This Anonymous Access is actually
something you have to do at several places.
| | 01:14 | It needs to be done for the Site
Collection, needs to be done in Central
| | 01:17 | Administration for something called the
Web Application as well, as well as just
| | 01:21 | the Web server as a whole.
| | 01:23 | Now one of the issues here is this:
| | 01:26 | If I want is putting this Site
Collection on the same side as my Internal
| | 01:30 | content, well I would be very,
very careful about doing that at all.
| | 01:35 | Typical practice with using SharePoint
as a public Web site is this is really on
| | 01:40 | its own machine out there on the Web.
| | 01:43 | So if it does get compromised, people
are not also working on the same machine
| | 01:48 | that contains your
Internet and your internal pages.
| | 01:51 | A question that I get asked is is
there some way that SharePoint can save off
| | 01:56 | its pages as static pages, and we can
just FTP those up to some location on
| | 02:00 | the public Internet?
| | 02:01 | And it really doesn't work that way.
| | 02:03 | That's not how SharePoint does things.
| | 02:06 | However, the idea is kind of sound.
| | 02:09 | The idea is you probably want to work on
this portal and develop your pages on a
| | 02:14 | machine that's internal to your
organization, within your own firewall, and then
| | 02:18 | move the pages that you've
created to a public location.
| | 02:23 | You can do that. Both of those machines
need to have SharePoint installed, but
| | 02:27 | there is an option in Central
Administration to do what are called Content
| | 02:32 | Deployment jobs, where you could
develop on an internal machine.
| | 02:35 | When you finish developing all your
pages, on a nightly, or a weekly, or
| | 02:40 | hourly basis, it can find all the
latest published pages and move them to a
| | 02:44 | new SharePoint server.
| | 02:46 | Now, while these are mostly systems
engineering tasks, they are things
| | 02:50 | you should be aware of if you're
using SharePoint to make a public Web
| | 02:54 | site available.
| | Collapse this transcript |
| Building out the Publishing Portal with Publishing Sites| 00:01 | So if you are going to use the
Publishing Portal, let's take a look at how you
| | 00:04 | start to build this thing out.
| | 00:06 | Take a look at the
Navigation Bar along the top here.
| | 00:10 | We've got one link to something called
Press Releases and if I click that link,
| | 00:14 | it takes us to this rather bland page.
| | 00:17 | What it's really doing here is
taking us from the Publishing Portal home
| | 00:21 | page into a subsite.
| | 00:24 | That might sound like a strange thing to do.
| | 00:26 | It's just the way that the
Publishing Portal is built.
| | 00:30 | You're probably very used to building
out Web sites and building out your,
| | 00:33 | say, navigation bars to have perhaps
a product catalog, or an About Us section,
| | 00:38 | or a Contact Us section.
| | 00:40 | Well, the way that we start to build
out different sections of a Publishing
| | 00:44 | Portal is by adding new Web
sites to this site collection.
| | 00:48 | That might sound like a bit of
overkill, but in fact, it's really, really
| | 00:51 | simple, because you expand the
publishing portal by creating new sites.
| | 00:56 | And if I use my Site Actions menu and
say Create Site, you might think well,
| | 01:01 | what kind of site do I add?
| | 01:02 | Do add a Team site, a Blank site, a Document
Workspace, a Wiki site, a Blog? What do I do?
| | 01:08 | You have exactly one choice.
| | 01:11 | When you've got a publishing portal,
the only way you can build this out is by
| | 01:15 | adding publishing sites with workflow.
| | 01:18 | Now, what does that actually mean?
| | 01:19 | Well, you can think of the
publishing site as really being a section of
| | 01:24 | your public Web site.
| | 01:26 | So if I wanted to build an About Us
section with 10 bio pages inside it, I
| | 01:32 | might create a new site, call it About
Us, give it the URL, and it has to be at
| | 01:38 | the location of the parent site, which right
now is at ldcsharepoint.com/site/Internet.
| | 01:44 | So I have to be underneath
that and say that's about.
| | 01:46 | I can only have publishing site with workflow.
| | 01:49 | I have no other templates
available to me. I come down.
| | 01:53 | I'm going to use the same permissions.
| | 01:54 | I'm going to use the Top-
link bar. I click Create.
| | 01:57 | And what it's doing is creating a
site underneath my publishing portal home
| | 02:01 | site, and it's adding it to the bar
at the top where we've got the About Us
| | 02:06 | section, and the About Us section, not
surprisingly, is another SharePoint site
| | 02:11 | with its own View All Site Content
section, with its own Document Library,
| | 02:16 | Images Library, Pages Library in it.
| | 02:18 | It's a very simple site, and this is
how you start to build out the different
| | 02:23 | pages in different sections of the portal.
| | 02:26 | It's going to give you
navigation to the subsites, by default.
| | 02:30 | This navigation, of course, is
still changeable and styleable.
| | 02:33 | It's still using Master Pages and Page
Layouts that we've seen all along the way
| | 02:38 | here and, of course, it's very simple to
build this out because there's only one
| | 02:42 | kind of site that you can
build out in a Publishing Portal.
| | 02:45 | Now, when it created that About Us
site, it did create one page here The
| | 02:50 | Homepage, which
immediately is in a draft status.
| | 02:54 | If I want to edit that, I can, and I
can see here that it's comprised of a
| | 02:59 | fairly simple page layout with some links
on it, some Page Content, that kind of thing.
| | 03:03 | I can start to add content to that.
| | 03:06 | If I hit my Site Actions menu and say
I want to create a page, it's going to
| | 03:10 | take me to the typical Create Page site.
| | 03:13 | It's going to look up all
the different Page Layouts.
| | 03:16 | Once again, the suggestion here is
that you will be adding to this, you'll
| | 03:20 | be creating your own page layouts for your
own Public Content for this site collection.
| | 03:25 | I'm just going to create a Demonstration Page.
| | 03:30 | It will be saved into the
Pages directory with that name.
| | 03:33 | I click Create, and I can start now
adding pages to this publishing portal.
| | 03:38 | The structure of a publishing portal is
really very simple, one of the simplest
| | 03:42 | SharePoint sites there is.
| | 03:44 | Yes, because we've got the Publishing Feature
on top of it, we do always have the toolbars.
| | 03:50 | We have to think about Versioning and
Status, whether this is published, whether
| | 03:54 | this is approved, but we're working
with the same master pages and page layouts
| | 03:59 | and css that we've been working with all along.
| | Collapse this transcript |
| Understanding the Publishing Portal workflow| 00:01 | If I'm in a Collaboration Portal or a
Publishing Portal, I can tell that the
| | 00:04 | Publishing Feature is turned on just
by looking at the Site Actions menu with
| | 00:10 | not just two or three options, but
multiple options and dropdown settings inside it.
| | 00:14 | That's the same for either the
Collaboration Portal or the Publishing Portal.
| | 00:19 | Or, as well, if I see this toolbar,
when I'm editing or creating a page, I know
| | 00:24 | that I'm using the Publishing feature.
| | 00:26 | However, there is a little difference
between the toolbar in this Publishing
| | 00:30 | Portal versus this Collaboration Portal.
| | 00:33 | If I look at the Collaboration Portal
here, it thinks I'm editing this page or
| | 00:37 | have it checked out. It's checked out.
| | 00:40 | I can check it into Share Draft,
or I can immediately Publish it.
| | 00:44 | In the Publishing Portal, it's checked out.
| | 00:47 | I can check into Share Draft,
or I can submit for approval.
| | 00:51 | I don't have the Option right here
just to directly publish this page.
| | 00:57 | So what's the difference?
| | 00:58 | Well, it's not Security Settings.
| | 01:01 | I have the same
permissions on both of these sites.
| | 01:05 | I am a Site Collection Administrator.
| | 01:07 | I can certainly mark something as Approved.
| | 01:10 | I can certainly publish it.
| | 01:12 | That's not the difference that's going on.
| | 01:14 | Then you might think, well, are
they using a different version of the
| | 01:17 | Publishing feature?
| | 01:18 | Is there one for Publishing Portal
and another for Collaboration Portal?
| | 01:22 | No, there's no difference there either.
| | 01:25 | Both of these sites are using a
Pages Directory to store the Web pages.
| | 01:29 | If I go to my Site Actions > View all
Site Content menu, I can see that I'm using
| | 01:34 | a Pages Directory in my Publishing Portal.
| | 01:37 | If I go over to my
Collaboration Portal, same thing.
| | 01:41 | In my All Site Content,
I've got a Pages Directory.
| | 01:44 | If I'm flicking back and forth
between the two, it really looks no
| | 01:48 | difference whatsoever.
| | 01:49 | There is one underlying difference
that's causing that behavioral change.
| | 01:55 | In a Collaboration Portal, the settings
on this Pages Library, which is where I
| | 02:00 | have all these things like
do I create Versions of this,
| | 02:04 | is there a Draft and a Published Version,
| | 02:06 | well, the first Option I have in this
library says, do you require content
| | 02:11 | approval for submitted items?
| | 02:13 | And it's set to no.
| | 02:14 | And that's the default way
it will come once created.
| | 02:18 | It can be changed, but that's
the default way it comes.
| | 02:21 | In the Publishing Portal, if I go to
the same Settings part of the Document
| | 02:25 | Library, Versioning Settings, it says, yes I do.
| | 02:30 | I require content
approval for submitted items.
| | 02:33 | And what the end result of that means
is even if I have very, very high-level
| | 02:38 | privileges, I can't publish directly.
| | 02:41 | I have to run through the numbers.
| | 02:43 | I have to run through the process of approval.
| | 02:46 | So I could make a change to this page
and then say, check in to Share Draft.
| | 02:51 | I still don't have a Publish button,
but I do have Submit for Approval.
| | 02:56 | When I click that button, what it's
going to do is say I'm going to start an
| | 03:00 | approval workflow this
behind the scenes feature.
| | 03:03 | Again, the real benefit here is that you
can have multiple people creating Web pages.
| | 03:08 | They're not allowed to publish them directly.
| | 03:10 | But they can kick off this approval workflow.
| | 03:13 | It comes, by default, with some
information that it's going to send an e-mail to
| | 03:18 | a group called Approvers.
| | 03:20 | Now the moment, I do have high-level
privileges, so I know I'm in the Approvers
| | 03:25 | group, and that's fine.
| | 03:26 | You've got some optional information,
such as a message you can include, a
| | 03:30 | due date and so on.
| | 03:31 | I'm going to click Start
to kick this workflow off.
| | 03:34 | It is actually going to send an e-mail
out to anyone in that group to say, hey!
| | 03:38 | This Page needs to be approved, but
notice it's kind of detected who I am?
| | 03:43 | Even though I said submit for
approval myself, it's now refreshed, and the
| | 03:48 | buttons that I get up here, are the two
options, do you want to approve it, or
| | 03:51 | do you want to reject it?
| | 03:52 | Well, I'm going to say, Approve.
| | 03:55 | And then I'm completing the workflow.
| | 03:57 | I can have some comments
to include. Looks good!
| | 04:00 | Bear in mind, whatever I do here is
actually being kept in my workflow history.
| | 04:04 | So we will have some history
about how this actually works and who
| | 04:07 | approved pages and so on.
| | 04:10 | So it is one more step that you have
to go through, and that's often what you
| | 04:15 | want for a Web site that's going to
end up being a public Internet Web site.
| | 04:20 | The assumption is that for public
content, we want to impose more control.
| | 04:25 | So the default Publishing Portal has
that Require content approval turned on, on
| | 04:30 | the setting of the pages library.
| | 04:31 | There's nothing stopping you from
relaxing that on the Publishing Portal, or from
| | 04:36 | the other side of things, even
tightening it on a Collaboration Portal.
| | 04:40 | So let's say on the Collaboration
Portal, I couldn't just hit Publish.
| | 04:44 | I'd have to submit for Approval here,
but those are both done by affecting the
| | 04:48 | settings of the Page's Document Library.
| | Collapse this transcript |
|
|
12. Creating ThemesExploring the existing SharePoint themes| 00:00 | Let's talk a bit more about Themes.
| | 00:03 | Themes, as you've seen, start off very simple.
| | 00:06 | In every Site and every Site
collection, you have a Look and Feel area with
| | 00:10 | a Site Theme option where you can start
choosing from a selection of prewritten themes.
| | 00:16 | But let's face it.
| | 00:17 | They're not really all that impressive.
| | 00:20 | They do look as if they were kind of
created by the same guy with about five
| | 00:24 | minutes to go before the product shipped.
| | 00:26 | The problem is what many designers and
developers do is kind of ignore themes.
| | 00:31 | They play with themes early on,
they're unimpressed, and they walk away.
| | 00:35 | But just because the built-in themes are
kind of dull, doesn't mean they're not useful.
| | 00:40 | They are.
| | 00:41 | It's quite often that I work with
designers who are trying to do everything
| | 00:45 | with master pages, when what they really
want to do could be accomplished using Themes.
| | 00:50 | So what are we doing when we select a theme?
| | 00:53 | Well, I'm going to go to one of the
simpler ones here. This is Belltown.
| | 00:59 | What's actually happening is when I
select a theme in my Site Settings, over on
| | 01:04 | the Web Server, I'm going to just go
to my Remote Desktop, where I'm logged
| | 01:08 | into the Web Server.
| | 01:10 | I've mentioned this location before.
| | 01:12 | You don't have access to it, if you
don't have access to the Web Server.
| | 01:15 | But SharePoint, the actual program,
that's located at C/Program Files/Common
| | 01:22 | Files/Microsoft Shared/Web Server
Extensions/12, and a lot of developers of
| | 01:28 | SharePoint become very familiar with this.
| | 01:30 | And inside the TEMPLATE folder
here is a folder called THEMES.
| | 01:35 | And if you look at the names of the
folders here, they appear to match the
| | 01:39 | names of the themes that you can
select from, and that, of course, is what's
| | 01:42 | happening, BELLTOWN, BREEZE,
CARDINAL that kind of thing.
| | 01:46 | So these are theme folders and really
what a Theme is, if I select say CITRUS
| | 01:51 | here, it's a selection of Images and
some CSS, and that's pretty much it.
| | 01:58 | They are CSS and images packaged
together and given a name, and they are
| | 02:02 | effectively used on top of your master page.
| | 02:05 | We're still using master pages here.
| | 02:07 | Themes are just coming along after
the fact and changing a few things.
| | 02:11 | But here's the deal. When you say that
you want to use one, if I were to say
| | 02:17 | that I want to use the JET theme, and I'll
go and select JET over here and click Apply,
| | 02:23 | well if I go back to SharePoint Designer,
where I have this site open, I'm just
| | 02:28 | going to notice this folder list here.
| | 02:31 | That was the way it was
before I selected a theme.
| | 02:34 | I'm going to refresh it, and
you're going to see a new folder pop-up.
| | 02:38 | I've now got an _themes folder inside
it, having Jet, it's basically going to
| | 02:44 | the Web Server, taking a copy of that
theme folder and then copying it into
| | 02:50 | the content database for this particular site,
just for this site, and that's important.
| | 02:58 | When you apply a theme,
you're really copying it.
| | 03:02 | That means that if I make a change to
some of the CSS in here, and the classic
| | 03:08 | example is that we have a theme file
with a very odd name here, which is the
| | 03:12 | name of the theme and usually a set of
numbers like typical in U.S. 1011-65001,
| | 03:18 | which is the code page of the theme.
| | 03:20 | It's not really important.
| | 03:21 | You'll just find a file with the name of
the theme ending in CSS, and there is a
| | 03:26 | whole bunch of stuff here. These are
the changes that the theme is making over
| | 03:30 | and above what's being done in core.css.
| | 03:34 | So it's not an either/or. Sometimes
I'm asked should I use themes or master pages?
| | 03:39 | Well, you'd often use both, really.
| | 03:41 | All depends on what you're trying to do.
| | 03:43 | If you just need to change a color,
or a font, or an image, use Themes.
| | 03:48 | If you need to change the actual
layout of the page, use Master Pages.
| | 03:52 | If SharePoint have been created with
superb structural HTML, you might have been
| | 03:57 | able to use themes for everything.
| | 04:00 | It's quite common to see CSS applying a
whole bunch of layout to a well-written site.
| | 04:05 | Well, Microsoft didn't write it that
way so you can't, so you're really using
| | 04:09 | themes for the small stuff,
the fonts and the images.
| | 04:12 | Now one of the questions I'm often asked
is what about the default theme? How do
| | 04:16 | I get back to the default theme?
| | 04:19 | And really, there actually isn't a default theme.
| | 04:22 | There's basically SharePoint with a
theme applied and SharePoint without themes.
| | 04:26 | If I were to highlight this _themes
directory, right-click it and delete it, and
| | 04:31 | then go back to the Web site, I'm back
to my Classic SharePoint Basic Blue. This
| | 04:38 | is the way it looks with core.css being applied.
| | 04:41 | There is no theme on top of this one.
| | 04:43 | The two things to remember about
Themes that may not seem obvious:
| | 04:48 | One, if you apply a theme and then go
into SharePoint Designer to change it, you
| | 04:53 | are only changing it for
yourself, for that one site;
| | 04:56 | two, if you change the theme on the Web
Server, and that can be useful, you're
| | 05:03 | not changing it for anyone that's
already chosen that theme, because they made
| | 05:07 | their own copies, but we're
going to see how to do both.
| | Collapse this transcript |
| Copying a SharePoint theme| 00:01 | If you want to edit one of the existing
SharePoint themes, there is a very big question.
| | 00:05 | Do you want to edit a theme just for
one site that uses it, or do you want to
| | 00:09 | edit that theme for every site that uses it?
| | 00:12 | Remember that when you choose to
apply a theme, you're copying it from the
| | 00:17 | theme definition files on the server and
storing it in the content database for that one site.
| | 00:23 | That means you have two places you
can edit it, directly on the SharePoint
| | 00:27 | Server, and this is possible.
| | 00:28 | I could go into one of these folders
directly, find the CSS files, which we'll
| | 00:33 | typically find two: theme.css and
mossExtension.css, which as you might guess, is
| | 00:41 | extra theme stuff for MOSS only.
| | 00:43 | What happens is when this theme is
chosen by a site, it combines the CSS files
| | 00:50 | into a theme.css file with a
longer name, something like in this case,
| | 00:55 | Belltown1001-65001.css.
| | 01:00 | That's really the theme file, and any
file that ends in extension .CSS is being
| | 01:05 | combined on the fly.
| | 01:07 | If, for example, I choose Belltown over
here in the Site, and click Apply, and
| | 01:16 | then look at it in SharePoint Designer,
I will find my new themes folder with
| | 01:21 | a copy of Belltown inside it and this
Belltown1001-65001.css, which is the
| | 01:30 | combined CSS files.
| | 01:32 | Now the reason that you might change,
for example, Belltown is if you wanted to
| | 01:37 | have a Theme that was
quite close to say Belltown.
| | 01:41 | If you just want to have the most basic
Theme there is, one of the themes, which
| | 01:45 | is called Simple, is probably your best choice.
| | 01:48 | Simple has the minimum amount of styling to it.
| | 01:51 | There is still some.
| | 01:52 | There are some images
involved. There is some CSS.
| | 01:55 | But if I go back over into my _themes folder
here, I'm going to Refresh it by pressing F5.
| | 02:01 | Belltown folder has disappeared.
| | 02:02 | I now have the simple folder, which
does have my combined CSS file, but not an
| | 02:08 | awful lot of stuff there.
| | 02:10 | I can quite happily make changes to this.
| | 02:13 | One of the reasons I might do it is I can
treat this almost as a custom CSS folder.
| | 02:18 | Anything you put in your
theme.css will be applied after core.css.
| | 02:24 | So it's not a bad place to put your own changes.
| | 02:27 | If, for example, I just wanted a way of
working with this, I could even go into
| | 02:30 | this file, delete everything out of
it, and just apply my own changes.
| | 02:36 | It would really be like adding my own
CSS on top of the default theme, which is
| | 02:41 | really just core.css.
| | 02:43 | But what about the alternative? What about
changing them on the server? Can you do this?
| | 02:48 | Well, the answer is yes, of
course you can. I wouldn't.
| | 02:52 | I'm not a big fan of editing the
existing theme files on a server.
| | 02:55 | One of the reasons why is Microsoft has
basically gone on record to say if you
| | 03:00 | are changing one of the existing themes
or anything in the 12 Hive, we kind of
| | 03:04 | reserve the right to overwrite any of
your changes, because these are our files,
| | 03:09 | and if we do a Service Pack or
a Hotfix, these belong to us.
| | 03:13 | But could I directly edit these files? Sure!
| | 03:17 | I could open these up in, say, a Text
Editor like Notepad, and make some changes,
| | 03:22 | and they would instantly now be part
of that theme file on the Web Server.
| | 03:25 | Here is the only problem. Because
anyone who is using this theme has already
| | 03:31 | copied it, it would not
affect existing users of the theme.
| | 03:35 | You'd have to apply it again.
| | 03:37 | Someone would have to go into their
site settings, change their theme to
| | 03:40 | something else, and then change it back
to this one before they'd actually copy
| | 03:45 | down all those changes again.
| | 03:46 | So that's not all that useful either.
| | 03:48 | But if you do want to create say your own
corporate theme, and that's not a bad thing to do,
| | 03:54 | one thing you can bear in mind, apart
from changing them directly on the server,
| | 03:58 | which wouldn't be a great way of doing
it, is get a test site, copy one of the
| | 04:02 | other themes into a particular site,
and apply it like this one, like the Simple
| | 04:07 | theme, which is a good choice.
| | 04:09 | Remove a lot of the CSS, start
adding your own, and you can test it on
| | 04:14 | this particular site.
| | 04:16 | And then when you're happy with your
changes, copy this CSS across onto the Web
| | 04:21 | Server, and make it
available for other people to use.
| | 04:24 | Then it can be applied to multiple sites.
| | Collapse this transcript |
| Editing a SharePoint theme| 00:01 | Just like master pages, if you want to
make a new theme, the easiest way is to
| | 00:05 | copy an existing one and change it.
| | 00:08 | Now to do this, I'm going
directly onto the web server here.
| | 00:13 | So I need to have access to
the 12 Hive on the web server.
| | 00:17 | I'm going to grab one of the folders.
| | 00:18 | If you have a theme that you want that
you want to change, perhaps one of the
| | 00:22 | themes is quite close to what you
want to do, feel free to grab that one.
| | 00:26 | Otherwise, my suggestion is grab the
one called Simple, because it is the
| | 00:30 | smallest one with the
least amount of images to it.
| | 00:33 | I'm going to right-click and say
Copy, and then I'm going to Paste.
| | 00:37 | So I have both the Simple theme, which
is the original one there, and the Copy,
| | 00:42 | and I'm going to create a
wonderful, awesome theme here.
| | 00:45 | So I'm going to call my
theme Awesome. Well, then what?
| | 00:50 | Well, what's inside it?
| | 00:52 | We've got a series of GIFs.
| | 00:54 | Most of these are background images and
images for borders, that kind of thing.
| | 00:58 | I do have two CSS files.
| | 01:00 | I'm going to sort by Type here.
| | 01:01 | I've got mossExtension.css and theme.css.
| | 01:06 | Theme.css is the key place where you're going
to put your own CSS styles, IDs and classes.
| | 01:13 | I'd leave mossExtension.css alone for
the most part, because again, that's very
| | 01:17 | specific to the MOSS stuff itself.
| | 01:20 | But if you want to take a look at some
of those hover styles, feel free to do
| | 01:23 | that, because remember, both of these are
going to be combined when this theme is applied.
| | 01:28 | The issue is just renaming this folder to
the word Awesome is not going to do it for us.
| | 01:34 | What I need to do, apart from the CSS
themselves, is in this folder, I'm going
| | 01:38 | to find this file called SIMPLE.INF.
| | 01:40 | That needs to be renamed, and just for
the purposes of convention, I'll keep it
| | 01:46 | with any case sensitivity that seems to compare.
| | 01:49 | So it was all in uppercase.
| | 01:51 | So I'll rename it to the same
name as my theme, all in uppercase.
| | 01:55 | I'm going to double-click it and take a look,
and here it says, oh, the title is Simple.
| | 02:00 | Nope, the actual title here is Awesome,
and in fact, I can see that this title
| | 02:05 | is all the way down.
| | 02:06 | These are for different country codes and so on.
| | 02:08 | So let's just do a quick Find
/ Replace, and then Save that.
| | 02:18 | We have at least here now done all the
changes that we need to do to actually
| | 02:22 | make this theme available.
| | 02:24 | Obviously, at the moment, it's going to
be identical to the Simple theme, but we
| | 02:27 | can at least prove to ourselves that it works.
| | 02:30 | However, there is one more thing
that we're going to have to do to make
| | 02:33 | this theme available.
| | 02:35 | If I went back over onto the server
right now, and said that I want to select it,
| | 02:40 | I'm not going to find it.
| | 02:41 | It won't appear in my Site Theme list yet.
| | 02:45 | But this screen is actually a good
reminder that the themes have their own
| | 02:49 | preview files as well.
| | 02:51 | Can we do one of those?
| | 02:52 | Absolutely, we could do.
| | 02:54 | If you want to create your own Theme
Preview file, you're going to take a
| | 02:58 | screenshot of what the site
looks like with that theme applied.
| | 03:02 | Shrink it down to about 375 x 231.
| | 03:06 | It would need to be saved up
on the 12 Hive on the Server.
| | 03:10 | It needs to be in Template > Images.
| | 03:15 | I'd probably make a custom folder here,
and save it in there to make it accessible.
| | 03:20 | If you are wanting to make it
accessible across every Site and every Site
| | 03:23 | collection, it's going to
have to be on the server.
| | 03:25 | There would be no location, no
Document Library you could save it.
| | 03:29 | You'd have to put it on the server itself.
| | 03:31 | I'm not going to do that right now,
but you could create your own Preview
| | 03:34 | image and use that one.
| | 03:36 | We'll see a little later where you
would put the path to that image.
| | 03:40 | So after creating this Theme, you
will find that it won't be available yet.
| | 03:43 | That's okay, because you wouldn't
want people selecting it while you're
| | 03:47 | still working on it.
| | 03:48 | We're going to have to do one more
thing, before our theme is ready to
| | 03:51 | be selected.
| | Collapse this transcript |
| Showing themes| 00:00 | Just because a theme folder exists, it
doesn't mean it'll show up in this Site
| | 00:04 | Settings Theme page.
| | 00:06 | I'm going to go back over to the Web
Server, where my themes are, go into my 12
| | 00:11 | Hive and into TEMPLATE > THEMES.
| | 00:14 | That's where I can see all my themes,
including my new one that I created.
| | 00:19 | SharePoint is not looking at this
folder list to see what's available, so you
| | 00:24 | can experiment with themes
here to your heart's content.
| | 00:27 | I'm going to go back up the folder
structure a level, to the Template area, and
| | 00:32 | then I'm going to go into the LAYOUTS folder.
| | 00:36 | Inside the LAYOUTS folder, I'm
going to see another folder called 1033.
| | 00:40 | This could be 1057 or another number
depending on what country code you're using.
| | 00:45 | This is English for the U.S. Inside that,
going to come down a little further,
| | 00:50 | we're going to have a file called SPTHEMES.XML.
| | 00:57 | Now, what I'm going to do is first
copy and paste this file, because I don't
| | 01:03 | want to mess this one up.
| | 01:04 | So I'm just going to kind of rename
this one as SPTHEMES.old, while I work on
| | 01:11 | the new one and make my changes to it,
but I certainly want to make sure I've
| | 01:15 | got a copy I can recover.
| | 01:17 | I'm going to open that up with Notepad.
| | 01:19 | And what I'm looking at here is a
series of blocks, each of these template
| | 01:25 | blocks written in XML that are
describing a theme, what it's called and what
| | 01:31 | any Thumbnail or Preview Image is.
| | 01:34 | And all I have to do is
copy one of these blogs across.
| | 01:38 | I'm going to copy this one here. In fact,
let me find the simple one, because
| | 01:43 | that's the one I was working with.
Copy it. Paste it. Again, I'm going to go with
| | 01:51 | the typical matching case sensitivity,
so where it's Lowercase, I'll use
| | 01:55 | Lowercase, where it's
Uppercase I'll use Uppercase.
| | 01:59 | I've even got a Description here.
| | 02:03 | This is my new awesome theme.
| | 02:08 | This would be where I put a link to any
images that I wanted to use as a preview.
| | 02:14 | I did not actually create any
and it's using the images/thsimple.gif.
| | 02:20 | You'll find that this is under the
Layouts folder in the 12 Hive, so you can
| | 02:24 | find out where this file is and put your
own stuff beside it, or create a custom
| | 02:28 | folder, which would
probably be the better idea to do.
| | 02:31 | I'm going to save this file.
| | 02:33 | I'm going to go back over into my Site Actions >
Site Settings and click the Site Theme again.
| | 02:39 | Now I do see it here.
| | 02:42 | It's now showing up under the Awesome
theme. If it doesn't, it might just be
| | 02:46 | that the Server needs to be refreshed,
and you could tell it to your Farm
| | 02:50 | Administrator about doing what's called an
IISReset, or Recycling the Application Pool.
| | 02:55 | I'm not going to bother doing that,
but that's something that we could do.
| | 02:58 | If you have multiple Web Servers,
you would have to repeat these changes
| | 03:03 | across all of them, which is one of
the downsides of themes, but it does mean
| | 03:07 | that you now have CSS and images that
can be repeated across multiple sites
| | 03:11 | and multiple site collections.
| | 03:13 | So I'm going to Apply that, and
not surprisingly, it's just giving us
| | 03:17 | the equivalent of the Simple
theme, because I haven't done any
| | 03:20 | particular CSS changes.
| | 03:22 | If I did want to do CSS changes on
this Server, I'd have to remember.
| | 03:26 | I'd have to reapply them and have to
change this theme to something else, then
| | 03:30 | change it back, because it is copying
all those theme files down to the content
| | 03:35 | database for this particular Web site.
| | 03:38 | Bear in mind that theme development can
seem like it's a bit of a pain, but it's
| | 03:41 | something that you wouldn't
have to expect to do very often.
| | 03:45 | You'd expect to develop it once, put
it up on the Web Server and just have
| | 03:49 | dozens, or even hundreds of
Web sites apply the same theme.
| | Collapse this transcript |
|
|
13. Customizing NavigationDefault navigation in SharePoint| 00:01 | Every SharePoint Site has built-in navigation.
| | 00:03 | By default, you have got the
Navigation Bar along the top, and you've got the
| | 00:07 | Navigation Bar down the left-hand side.
| | 00:09 | What's not so obvious is what
they can and what they do represent.
| | 00:13 | And really, you need to know two things:
what do they show, by default, and what
| | 00:17 | can they be changed to show.
| | 00:20 | And if you assume that whether you're
on a Publishing Site or a Collaboration
| | 00:23 | Site, these links can be
changed to show pretty much anything,
| | 00:27 | the main thing to understand is what do they
show when you leave them to their own devices?
| | 00:32 | Because bear in mind,
SharePoint is trying to help you.
| | 00:35 | It will automatically create a lot
of these navigation links for you.
| | 00:40 | So step one, assume that out of the
box without customization, the Top Bar
| | 00:46 | represents pointers to different sites
in this Site Collection, and this Top
| | 00:51 | Link Bar can be shared.
| | 00:53 | This Top Link Bar can be shared across
different sites in the site collection,
| | 00:58 | whereas the left-hand side, the
Quick Launch Bar, is things inside this
| | 01:03 | particular site and is not shared across sites.
| | 01:06 | Even if it might look similar, it'll be
a different Quick Launch Bar for every
| | 01:10 | site in the Site collection.
| | 01:12 | So in a Collaboration Portal like we're
looking at here, right out of the box,
| | 01:16 | the Top bar is going between the
different sites in this Portal.
| | 01:19 | That's a little simplistic,
because it can and does go deeper.
| | 01:22 | Sometimes, for example, we
don't have a left-hand bar.
| | 01:26 | Sometimes the Top Bar can be
changed to point the sites in other Site
| | 01:29 | collections or even Public Websites.
| | 01:32 | If, for example, you create a Team Site
with a whole bunch of sites underneath
| | 01:36 | it, it will try and add these links to
the Top Link Bar, and you can check that
| | 01:40 | for yourself, just by having a site
collection and adding a bunch of sites.
| | 01:44 | However, what you'll find is that, by
default, the Top Navigation Bar shows the
| | 01:47 | top-level site, in this case Home,
and one level of subsites directly
| | 01:53 | underneath the Top Site.
| | 01:55 | It doesn't show a subsite of the
Marketing Site or a subsite of the Benefits
| | 01:59 | Site, or a subsite of the Second Benefits Site.
| | 02:02 | Now it doesn't even let you
know whether those exist or not.
| | 02:04 | I'd have to go into those individual
sites and see if that were the case.
| | 02:09 | One of the reasons it doesn't list
all of the sites in the Site Collection is
| | 02:12 | because that could
potentially be very confusing.
| | 02:14 | You could have 100 tabs along the top.
| | 02:16 | Now these links are Security trimmed.
| | 02:19 | If you don't have permission to go to
one of these sites, SharePoint won't
| | 02:23 | show you the link to that site, and that's
whether you're in WSS or in a MOSS Publishing Site.
| | 02:28 | But if the Top Link Bar is going
between different sites, the Quick Launch Bar
| | 02:31 | is the content on this particular
site, though it may show subsites.
| | 02:35 | But as we've seen multiple times, this is
not authoritative. This can be changed.
| | 02:40 | It doesn't tell you exactly what's in this site.
| | 02:42 | If you want to see that, you're going
to use the View All Site Content Link.
| | 02:46 | Now one all the challenges that
Designers first come across is even though the
| | 02:50 | Navigation Links look very similar in
WSS Sites and in MOSS Publishing Sites,
| | 02:55 | the places to change these Navigation
Options are very different, and we're
| | 02:59 | going to explore both of them.
| | Collapse this transcript |
| Customizing the Quick Launch bar and Top Link bar| 00:01 | Let's talk about editing
Navigation Options in a WSS site.
| | 00:05 | This is pretty easy because really,
at the end of the day it's quite dumb.
| | 00:09 | So I'm looking at a very simple WSS Site here.
| | 00:12 | I'm at the top-level site of a site
collection, which I can see by the fact that
| | 00:16 | this first Tab is highlighted, and I
have nothing above me in my breadcrumbs.
| | 00:21 | The way that I have built this Site
Collection is I have one top-level site and
| | 00:25 | three subsites directly underneath it.
| | 00:27 | If I were to add a new site to this
site collection, and I'm at the top-level
| | 00:32 | site, so I'll be
creating a First level Sub-site.
| | 00:35 | I'll just make a Blank Site, giving
it a Title, which can be changed later.
| | 00:41 | Giving it a URL which can't, and
selecting one of the Templates.
| | 00:45 | I'm going to select all the
default values, which says, Yes,
| | 00:48 | I'm going to display on
the Quick Launch Bar, Yes,
| | 00:51 | I'm going to display on the top link
bar and Yes, I'm going to use the top link
| | 00:54 | bar from the parent site.
| | 00:56 | Remember, the Top Link Bar can
be shared across multiple sites.
| | 01:00 | Quick Launch Bar is really always
individual to a particular site.
| | 01:05 | Hit Create and what we'll see now is I
am in this new site, but I can see that
| | 01:12 | this top link bar is
shared across multiple sites.
| | 01:15 | I'm jumping between the Home Pages
of multiple sites here and even if
| | 01:19 | they're using different themes, this
Top link bar is shared, whereas the
| | 01:23 | Quick Launch Bar is different.
| | 01:25 | That's the default behavior of SharePoint.
| | 01:28 | When you're creating a site, that's a first-
level subsite, it will add to the Top Link bar.
| | 01:33 | You can, of course, change this, and
to change anything that we're looking at
| | 01:38 | here, we want to go to the Site Actions
> Site Settings, and there's a Top link
| | 01:44 | bar and Quick Launch link
in the Look and Feel section.
| | 01:48 | If I select the Top link bar and again, I
want to be very careful about where I am,
| | 01:52 | I can see exactly what the tabs are.
| | 01:55 | I can manually add a New Link,
which gives me a fairly dumb entry here.
| | 01:59 | I just get a URL and a description.
| | 02:01 | I'm going to cancel that, or I can
click Change Order and not surprisingly, I
| | 02:05 | can move some of these things around.
| | 02:08 | What's not so obvious is how I might
say change the text that's in there?
| | 02:12 | Because I can't mouse over any of these.
| | 02:13 | However, the Icon is
actually clickable beside each one.
| | 02:16 | So if I select Second Benefits here,
for example, I can jump in and perhaps
| | 02:22 | change the name to something else,
click OK and change that Top link bar that's
| | 02:27 | being shared across all these different sites.
| | 02:32 | If I were in one of the subsites and go
to the Site Actions > Site Settings of
| | 02:36 | the subsite, jump to Top link bar,
it'll tell me This Website inherits its top
| | 02:42 | link bar from its Parent Website.
| | 02:44 | If I did want to have my own Top
link bar in this subsite, I could, not
| | 02:49 | surprisingly, click this Link to say Stop
Inheriting Links and then create my own.
| | 02:54 | Right now, you can see I'm back to just one.
| | 02:56 | This Home actually represent the Blank
Site, the subsite, and the only way I
| | 03:01 | could navigate up to the parent is
by using the Breadcrumb up at the top.
| | 03:05 | I'm going to select to Use Links from
Parent, and we go back to where we were before.
| | 03:10 | So that's how to Edit the Top Link Bar
in WSS, very straightforward, not really
| | 03:14 | a lot to it, a little bit manual, you
might be thinking, and you'd be right.
| | 03:18 | If I go back to my Site Settings, I've
got the Quick Launch Bar, and this will
| | 03:22 | different for every site.
| | 03:24 | Again, this is typically showing the
contents of this site you're actually in.
| | 03:28 | In this case, it's got a to
Pointer to a Shared Documents Library.
| | 03:32 | I've got a pointer to a single Web Part
Page that was created earlier in the course.
| | 03:36 | I've got links to three Lists, to the
Discussion Board, then I also have links to
| | 03:41 | the subsites, because they
are contained inside this one.
| | 03:44 | Again, you can add a New Link.
| | 03:47 | You can add a Heading.
| | 03:48 | So, for example, the default headings
are Documents, Lists, Discussions and
| | 03:52 | Sites, but you can add your own.
| | 03:54 | Once again, the Icon here is clickable
on these, so if I wanted to change the
| | 03:59 | Title of any of these, this is one of
the built-in ones, Documents, and change
| | 04:03 | it to Site Documents, I can do that.
| | 04:08 | Clicking back on the Home Page, we can
see how that changes the Quick Launch Bar.
| | 04:12 | Yes, it's a very manual process and one
of the things I'm often asked is how do
| | 04:16 | I get rid of one of these links temporarily?
| | 04:19 | And really there is no 'temporarily'
when you're working with the Quick Launch
| | 04:23 | Bar or the Top Link Bar in the WSS Site.
| | 04:26 | If I wanted to get rid of one of these
links, the only way I can do it is by
| | 04:29 | clicking the icon that
exists and clicking Delete.
| | 04:32 | It says, are you sure? Yes I am.
| | 04:34 | Click OK. It has gone.
| | 04:36 | If I want to re-add that
link, I have to add it again.
| | 04:39 | I have to find the URL and
manually add it as a New Link.
| | 04:43 | So although this might seem quite
manual, and it is truly only an issue if you
| | 04:47 | are changing the default navigation,
remember that SharePoint will add many of
| | 04:51 | these links for you, and it will
take care of security trimming them.
| | Collapse this transcript |
| Editing navigation in Publishing Sites| 00:01 | If you're working with MOSS publishing sites,
your navigation options go a little deeper.
| | 00:05 | How you edit them is going to change,
and you can do some things you can't do
| | 00:09 | with WSS out of the box,
like having dropdown items.
| | 00:13 | There is also a couple of interesting
things we can do with SharePoint Designer,
| | 00:16 | and we'll see that in a moment.
| | 00:18 | One of the first things we
have to deal with is a name change.
| | 00:21 | Instead of having the Top Link bar and
the Quick Launch bar, we still have these
| | 00:25 | navigation sections, but they are now
referred to as Global Navigation and
| | 00:29 | Current Navigation, and I'll show
you exactly where they're called that.
| | 00:33 | I'm going to go to my Navigation Settings.
| | 00:35 | So down to my Site Actions > Site Settings
menu and across to Modify All Site Settings.
| | 00:42 | Now in WSS, if I were to look in my Look
and Feel section, I would see two links,
| | 00:47 | one for the Top link bar
and one for Quick Launch.
| | 00:50 | Those have disappeared
| | 00:52 | now that the Publishing feature is
enabled, and what I have is Navigation, which
| | 00:56 | has both of them inside it.
| | 00:58 | I could also get to this
directly from the Site Actions menu.
| | 01:02 | Site Actions > Site Settings > Modify
Navigation takes us directly to the same
| | 01:09 | link that you'd get if you clicked
it under the Look and Feel section.
| | 01:12 | This is SharePoint.
| | 01:13 | There is often a dozen
ways to get to the same place.
| | 01:17 | So what are looking at here?
| | 01:18 | Well, I can tell, just by looking at
this, there is a little more to it than
| | 01:21 | there was in a WSS site.
| | 01:23 | I've got this first section
here saying Subsites and Pages.
| | 01:27 | Do I show subsites? Yes.
| | 01:28 | I do. Do I show pages?
| | 01:30 | Well, apparently, I do.
| | 01:31 | I may not know the impact of that right
now, but we'll explore that in a second.
| | 01:35 | Do I sort these things manually, and
that's checked, by default, and that really
| | 01:40 | just means you have the option
of moving these links around.
| | 01:43 | This lower section here in the
Navigation Editing is showing me what's being
| | 01:48 | shown in Global Navigation, what's
being shown in Current Navigation and again,
| | 01:52 | that means Top link bar and Quick Launch bar.
| | 01:56 | I do wish that the SharePoint guys
had made it so the terms were consistent
| | 02:00 | across WSS and MOSS, but we're
just going to have to deal with it.
| | 02:04 | Think about it this way.
| | 02:05 | The Top Link bar is the one that can be
shared across multiple sites in the site
| | 02:09 | collection, so it's kind of global.
| | 02:11 | The Quick Launch bar is
independent for each individual site.
| | 02:15 | It's what the site you're currently
in, so that's the Current Navigation.
| | 02:20 | Now right now, they look like
they're showing the same content.
| | 02:22 | They would appear a little different,
but they are showing the same content.
| | 02:26 | We do have the ability
to mess around with these.
| | 02:28 | I could decide to take my Site Directory and
make that one the first link by moving it up.
| | 02:34 | I could decide to Hide the link to the
Document Center, and that would not show
| | 02:38 | up, maybe I am doing some work with it.
| | 02:40 | I don't want it show up immediately.
| | 02:42 | I could Add a Heading. It's not going
to do much work in my Global Navigation,
| | 02:46 | but in my Current Navigation
it'll have more of an impact.
| | 02:48 | I could manually Add a Link.
| | 02:50 | There is a bit more of a robust screen
here for adding a link to somewhere else,
| | 02:54 | which includes having an Audience
and do we Open this in a new window.
| | 02:58 | We'll talk about Audiences a little
later on, but it's a way of targeting these
| | 03:02 | links to suggested groups
of people, not security.
| | 03:06 | It's really all about making
your content a bit more useful.
| | 03:10 | As I mouse over and select each of the
items, in the lower section of the page,
| | 03:14 | it's telling me a bit about what this
is and right out of the box, by default,
| | 03:19 | everything is going to be a
subsite that's actually showing up.
| | 03:22 | And it's telling me the URL and
what this kind of site actually is.
| | 03:25 | But I've made a couple of simple
changes there, so let's persist those.
| | 03:29 | We've got Sites now at the top
and Document Center is hidden.
| | 03:32 | If I click OK, we have that
rearranged navigation across the top.
| | 03:36 | Now we are going to go deeper into a
few of these pieces, such as how do we get
| | 03:40 | dropdowns, how can we change this, but
while we can do other things to control
| | 03:45 | how these menus appear, this is the
core way that you and your contributing
| | 03:49 | users will be working with
navigation in your publishing sites.
| | Collapse this transcript |
| Editing and styling navigation controls| 00:01 | So you are going to add, edit and delete your
actual navigational links using the browser.
| | 00:06 | You're going to do those through your Site
Actions > Site Settings > Modify Navigation.
| | 00:11 | But using SharePoint Designer, you can
actually work some magic about how those
| | 00:16 | links are going to appear, because your
navigational links, both the Top Link bar
| | 00:21 | and the Quick Launch bar, or if you
prefer Global Navigation and Current
| | 00:25 | Navigation, are part of the Master Page.
| | 00:28 | So I am going to go into SharePoint
Designer where I have this site open, and I
| | 00:32 | have default.master checked out.
| | 00:36 | Both the Top Link bar, or Global
Navigation, and the left-hand side the Quick
| | 00:41 | Launch bar, or Current
Navigation, are part of the master page.
| | 00:45 | And in fact, even though they look very
different, they are being generated the same way.
| | 00:50 | They're both actually using an ASP.NET control.
| | 00:53 | What that really means for you, as a
designer, is they are drawing their
| | 00:56 | information from some data from the database.
| | 00:59 | We know that must be the case.
| | 01:00 | But the benefit is these are customizable.
| | 01:04 | We can change things about how they
appear, and in fact, we must be able to do
| | 01:08 | that because one of them right now is
appearing horizontally and one of them is
| | 01:12 | appearing vertically.
| | 01:13 | But they're both actually
using the same piece of code.
| | 01:16 | What do I mean by that?
| | 01:17 | Well, if I highlight one of
them and move into Split view,
| | 01:21 | I can see that there is a
whole bunch of stuff selected here.
| | 01:24 | Now you might look at this and go, I
don't want to mess with any of this, and
| | 01:28 | you don't really have to, but just
clicking between the two I can see that there
| | 01:32 | is a whole bunch of settings being selected.
| | 01:35 | If I want to avoid the code and just
use Design view, when I have the top
| | 01:39 | navigation selected, I actually have a
window over here I'll just expand it a
| | 01:43 | bit, called Tag Properties,
which is saying I've got a
| | 01:46 | SharePoint:ASPmenuTopNavigation.
| | 01:49 | Now what does that mean?
| | 01:51 | Well it really means generate the
navigation option using these settings.
| | 01:55 | And if I actually browse through the
settings, we won't go through all of them,
| | 01:58 | I've got something very straightforward.
| | 02:00 | For example, here, Orientation that shows up in
blue because it's actually got a setting to it.
| | 02:05 | That's not the default.
| | 02:07 | It says Horizontal.
| | 02:09 | This is going to show up from left to
right, across the top, wherever it's positioned.
| | 02:13 | Whereas if I was to select the Quick
Launch section and come down to the same
| | 02:17 | setting, it would say well my
Orientation is Vertical, and that's the first key
| | 02:22 | difference between the two.
| | 02:23 | Well what else can we do?
| | 02:24 | Well, if I start to browse through
that, I can see a whole bunch of styles.
| | 02:29 | I have got things like
DynamicHoverStyle, what's the Background Color,
| | 02:32 | what's the Border Color?
| | 02:34 | You can minimize and open these up.
| | 02:35 | DynamicmenuItemStyle.
| | 02:36 | Let me drag this a little wider so we
can see more of it, StaticHoverStyle.
| | 02:41 | And when it talks about Dynamic and
Static it means what am I displaying all the
| | 02:46 | time, which is the static stuff,
| | 02:48 | and what might I display as a dropdown
or a flyout, which is the dynamic stuff?
| | 02:53 | So it's very customizable,
actually straight in SharePoint Designer.
| | 02:57 | Not only that, but if we know what's
meant by static and dynamic, static is what
| | 03:01 | shown all the time, dynamic is what
shown with a mouse over, for example,
| | 03:05 | we've got some settings we can play around with.
| | 03:09 | I'm highlighting the Quick
Launch bar here, and it says the
| | 03:12 | MaximumDynamicDisplayLevels is zero.
| | 03:15 | I'm not going to do any kind of
dropdown or flyout, but I am going to show two
| | 03:19 | levels all the time, which in this
case might be the News site and any pages
| | 03:25 | beneath the News site.
| | 03:26 | I am going to change those
just to play around with them.
| | 03:29 | I'm going to change DynamicDisplayLevels
to one, and StaticDisplayLevels to one.
| | 03:34 | And when I click off this, it's going
to kind refresh itself and shrink down,
| | 03:39 | because now it's not
showing two levels statically.
| | 03:42 | It's only showing one level statically.
| | 03:44 | Okay, what does this actually mean?
| | 03:45 | Well, I'm going to save this
default.master, make sure you've clicked off any of
| | 03:51 | the controls that you're editing,
otherwise you'll get a message.
| | 03:53 | Now because this is in my master page
gallery, I am going to have to go through
| | 03:57 | the whole process of checking it in
and publishing it and approving it.
| | 04:01 | I can do that either from SharePoint Designer,
I'll say Check In and Publish a major version.
| | 04:06 | It will say, The document
requires content approval.
| | 04:09 | Do you want to view or modify that?
| | 04:11 | Well, I am going to say No right
here because I have to do that through
| | 04:14 | the browser anyway.
| | 04:15 | I'm going to go to my
Site Actions > Site Settings.
| | 04:18 | I need to find my way to my master page
and Page Layout Gallery, jump in there
| | 04:23 | where I should see my page
marked as pending, which it is.
| | 04:27 | Here is default.master with the
Pending status. Because I do have the correct
| | 04:31 | permissions, I can say Approve/Reject this.
| | 04:34 | Click Approved, click OK.
| | 04:36 | Then go back to the Collaboration Portal.
| | 04:39 | Now I don't have to change anything
about using this default.master, because
| | 04:44 | this is the one I'm using, but notice
that immediately I have got the Quick
| | 04:47 | Launch bar, and now
having flyouts being generated.
| | 04:50 | And we didn't have to do anything.
| | 04:52 | I didn't have to write any JavaScript.
| | 04:53 | This is actually happening automatically.
| | 04:56 | So back in SharePoint Designer, again,
the great thing is that just by working
| | 05:00 | with the settings of these controls,
you can affect quite a lot of things.
| | 05:04 | I do recommend that you particularly
take a look at the Styles section, where
| | 05:07 | you can see how you can build out your
different styles for both the static and
| | 05:12 | dynamic parts of the menu.
| | 05:14 | You have things like Orientation.
| | 05:16 | If you wanted to, you could make your
Quick Launch bar Horizontal and your Top
| | 05:20 | Link bar Vertical. It's up to you.
| | 05:22 | Going back up with some of the settings,
obviously we had experimented there
| | 05:26 | with dynamic and static display
levels, but there is a lot that you can
| | 05:30 | experiment with, and using these you can
really do a major part of rewriting how
| | 05:35 | your navigation is
presented in your own designs.
| | Collapse this transcript |
| Customizing navigation with audiences | 00:00 | The links shown in your Navigation
Controls, both the Top link bar and the
| | 00:04 | Quick Launch Bar, are security trimmed.
| | 00:07 | What that means is SharePoint is
looking at them and making sure that nobody
| | 00:11 | should be shown a link they couldn't click on.
| | 00:13 | You don't want to have a link you
click on and immediately get access denied.
| | 00:18 | But sometimes it's not so black and white,
whether you should show a link to someone or not.
| | 00:23 | You may have Links that you want to
show to one group of people and not to
| | 00:27 | another, but you are not trying to prevent
the second group from going to that link.
| | 00:31 | You don't think it's useful for them.
| | 00:32 | Let me give you an example.
| | 00:34 | Let's say I have a site called New Hire
Information, and it's somewhere in my portal.
| | 00:41 | It doesn't really matter where.
| | 00:43 | And it's common information for New Hires.
| | 00:45 | So how do get to the 401(K)?
| | 00:46 | How do I register for the health plan?
| | 00:48 | That kind of thing.
| | 00:49 | Now this is the kind of site
that I don't want to always show to everybody.
| | 00:54 | I don't mind if everybody gets to read this.
| | 00:56 | I just don't want to always
hit them over the head with it.
| | 00:58 | So I'm going to take the link to that site.
| | 01:01 | Again, it doesn't really matter where it is.
| | 01:02 | It could be in a completely
different site collection.
| | 01:06 | And back on the home page off my portal,
I would like it to show up here, just
| | 01:11 | for people who've joined the
company in the past six months.
| | 01:14 | And what we're going to do is use
something called Audiences for this.
| | 01:16 | I'm going to add a link to the site.
| | 01:19 | So I'll go into my Site
Settings > Modify Navigation.
| | 01:24 | And then I'm going to manually add a
link to my Global Navigation, which is my
| | 01:27 | top link bar, Add Link, and I'll say it's
New Hire Info, paste in the address of that site.
| | 01:38 | I'm going to leave the Description and
Audience, because we're going to come back to this.
| | 01:41 | I'm going to click OK.
| | 01:43 | I'm going to put that right at the start.
| | 01:46 | So the first link after the Home tab,
click OK, and there we go, and it's
| | 01:53 | right there at the top.
| | 01:54 | It might be very useful.
| | 01:55 | I could also put it in the Quick Launch
Bar, if I want to, but let's say this is
| | 01:59 | the quick and easy way of
doing it. Okay, so what?
| | 02:02 | Well in another browser right now,
I'm logged in as a different user,
| | 02:06 | in this case Administrator.
| | 02:07 | Let's say this person has been
with the company for five years.
| | 02:10 | They don't need to see New Hire Info.
| | 02:13 | Now I could do that with security.
| | 02:15 | I could say they're not allowed to see
it, and then SharePoint would take care
| | 02:18 | of hiding that from them.
| | 02:20 | But it's not really what I'm after.
| | 02:22 | I just don't think it's all that useful.
| | 02:24 | So back in my portal here, I'm going
to go back into that Navigation Options,
| | 02:29 | select that link and click Edit, and I
could've done this when I first created it.
| | 02:34 | I have this section here called Audiences.
| | 02:37 | An Audience is something that gets
created in SharePoint Central Administration.
| | 02:41 | It's a set of rules.
| | 02:43 | You could have an Audience that would
be everybody who reports to Bob Smith.
| | 02:48 | You could have an Audience that is
anyone who's got a last name beginning
| | 02:51 | with B. You could have an Audience of anyone
who's start date was in the past six months.
| | 02:57 | Now those get created in central Admin.
| | 02:59 | I'm not actually going through the
process of creating them, but I am going
| | 03:02 | through the process of using them.
| | 03:04 | If I know what it's called, I could
type it in, but I do have a little button
| | 03:08 | here where I can see that I've got a
couple of demonstration Audiences and
| | 03:13 | here I've got New Hires.
| | 03:14 | I am going to double-click and add it,
and I know because I just created the
| | 03:19 | Audience, that right now, I, as
Simon A, I'm in that Audience.
| | 03:24 | So I'm going to click OK and come
back to this portal, and I see that link,
| | 03:28 | and I can click on it.
| | 03:30 | If I go over to the other browser where
I'm signed on as the Administrator, and
| | 03:34 | refresh that page, I don't see that link.
| | 03:37 | It's just not useful.
| | 03:38 | It doesn't mean I don't get to go there.
| | 03:41 | If I paste it in the address of
that site, I can still see it.
| | 03:45 | I am allowed to see it, but I don't
need it to be shown to me all the time
| | 03:49 | whereas over here it's very obvious.
| | 03:51 | And what can happen is your
Audiences can be a rolling set of rules.
| | 03:55 | So if it's based on, for example, a
hire date, which is stored in my user
| | 04:00 | profile, and the user profile is all the
information that's stored about a particular user:
| | 04:04 | their e-mail address, their name,
their birth date, whatever information your
| | 04:08 | organization is storing,
| | 04:10 | you can make an Audience based on that.
| | 04:13 | Audiences are easy to set up and a way
to make your content presentation much
| | 04:17 | more useful to the people looking at it.
| | 04:19 | You can use Audiences on links.
| | 04:21 | You can use Audiences on Web Parts,
and even on individual pieces.
| | 04:25 | Again, it's not security.
| | 04:27 | You are not trying to prevent
people from seeing certain content.
| | 04:30 | You're just trying to make it more useful.
| | Collapse this transcript |
| Customizing the breadcrumbs| 00:00 | Breadcrumbs are those lists or the links
that should tell you where you are in a
| | 00:05 | site hierarchy, and they should be
pretty simple but, unfortunately in
| | 00:09 | SharePoint, they are small but annoying
part of creating a custom look, because
| | 00:13 | they're not that friendly
to customize. Let's see why.
| | 00:16 | Well first off, let's talk about
breadcrumb basics here, and you might think
| | 00:19 | they're not worth discussing, but have you
noticed that you have at least two of them.
| | 00:24 | We have the what's called the page
level breadcrumb here, typically found
| | 00:28 | underneath the top link bar, that's
going to tell me I am in the Sample News
| | 00:31 | Article, inside the News site,
which is clickable inside the
| | 00:35 | Collaboration portal.
| | 00:37 | And I can go up one level, and I
can go up another level and so on.
| | 00:40 | They behave kind of like you'd expect them to.
| | 00:43 | But there's also a global
breadcrumb up at the top.
| | 00:46 | This one doesn't give us too
much trouble most of the time.
| | 00:49 | So the question is what can we do with them?
| | 00:51 | Well the answer is yes.
| | 00:52 | They can be customized.
| | 00:54 | But there's not a great deal you're
going to do with the breadcrumbs themselves.
| | 00:57 | I'm jumping over into SharePoint
Designer and taking a look at the
| | 01:01 | default master page.
| | 01:02 | Like I could select the
navigation sections, I can also select the
| | 01:07 | breadcrumb sections.
| | 01:08 | I'll go up the global breadcrumb up here,
and I've got the page level breadcrumb here.
| | 01:14 | Like the navigation section, they
both have their own set of settings that
| | 01:19 | you can either look at directly in the
code or by looking at the Tag Properties Pane.
| | 01:24 | However, unlike navigation, there's
not an awful lot you would do here.
| | 01:28 | You might do things like change the path
separator from a greater than sign to a forward slash.
| | 01:33 | Little things like that are possible.
| | 01:35 | Now if I wish to jump into Split view
here with this breadcrumb highlighted, I
| | 01:40 | can even see a couple of small hints
here that I've got a NodeStyle-CssClass
| | 01:46 | is ms-sitemapdirectional, and that
really means what CSS is being applied to
| | 01:52 | the individual nodes?
| | 01:53 | Then it's a very kind of key question here.
| | 01:55 | This CSS class is being applied to
the nodes, not to the separators.
| | 02:01 | So if I suddenly made this one a very
large CSS class, it would be applied to
| | 02:06 | the individual words, but you wouldn't
see it being applied to the greater than
| | 02:09 | sign in between the words.
| | 02:12 | And that might be okay.
| | 02:13 | But you need to be aware of that.
| | 02:15 | So on the master page, this one is
applying a CSS class to the individual nodes.
| | 02:20 | It's also being wrapped in a
table cell, the classes ms-titlearea.
| | 02:25 | So you could overwrite those in your
own custom CSS and see how that impacts it.
| | 02:30 | However, you might run
into more problems than that.
| | 02:34 | So sure, it would be easy to make
this grow, or shrink, or change the font.
| | 02:39 | Here's what you'll also run into.
| | 02:40 | I am going to go over into my Master
Page Gallery and open up one of the
| | 02:45 | pre-created page layouts, like ArticleLeft.
| | 02:48 | I don't want to check it out because
I'm not going to edit it right now.
| | 02:51 | I just want to let you know about something.
| | 02:53 | In a lot of the page layout files that
Microsoft provides, they're not actually
| | 02:58 | using the breadcrumb in the master page.
| | 03:01 | They're actually doing their own one.
| | 03:03 | They're replacing it.
| | 03:04 | It looks very, very similar, but in
this one, they have actually got the CSS
| | 03:08 | class for each individual node, and
they also currently have another CSS class
| | 03:13 | for the current node, breadcrumb.
| | 03:15 | This is all wrapped in a different
div where the class equal to breadcrumb.
| | 03:21 | What that means is if you just use the
master page as being the only place that
| | 03:25 | you think that your breadcrumbs are
styled, you may find that they don't show up
| | 03:29 | the way you expect, because other
people are creating pages based on this page
| | 03:34 | layout, which does things somewhat differently.
| | 03:37 | Really, the most you are going to do
with breadcrumbs is either change the CSS
| | 03:41 | classes that are being applied to
them, or just hiding them entirely.
| | 03:45 | Breadcrumbs are unfortunately
not all that friendly to designers.
| | 03:48 | There is not a lot to be done just
using SharePoint Designer and the
| | 03:51 | alternative, if you wanted to
completely rewrite this, is using code, which is
| | 03:56 | somewhat beyond the scope of this class.
| | 03:58 | But understanding what the breadcrumbs
show, will at least make it easier to
| | 04:01 | figure out if you need to change
them or just change the way they look.
| | Collapse this transcript |
| Creating a link back to the portal| 00:00 | We've seen how to link from a
portal to a different site collection.
| | 00:05 | So, for example, I have a link here to a
top site called Demonstration Team Site.
| | 00:10 | If I go into my Sites directory, it's
just something that I added in here.
| | 00:15 | This site is in a
completely different site collection.
| | 00:18 | And what that really means is
right now my top breadcrumb says
| | 00:22 | Collaboration Portal.
| | 00:24 | But if I jump over to this Team Site,
I'm in a completely different site
| | 00:27 | collection, and there is no
easy way back to the portal.
| | 00:31 | But the way that a lot of people think
about a collaboration portal, or any kind
| | 00:36 | of Intranet portal, is it's above everything.
| | 00:38 | It's at the top of everything.
| | 00:40 | And what I'm often asked is how do I
jump from the portal into that Team Site,
| | 00:44 | into that other site collection and
still have an easy way to get back, even
| | 00:48 | though this is a different site collection?
| | 00:50 | Well, here is one way you can do it.
| | 00:52 | And you can only really
do this back to one portal.
| | 00:55 | So I'm in the top-level site
of a different site collection.
| | 00:59 | I'm going to go to my
Site Actions > Site Settings.
| | 01:02 | And if I am a Site Collection
Administrator, in the Site Collection
| | 01:06 | Administration section, I've got
something that says Portal site connection.
| | 01:11 | This sounds very complex.
| | 01:13 | We are connecting to a portal site.
| | 01:15 | It really doesn't do very
much, though it is useful.
| | 01:19 | I'm going to say yes.
| | 01:20 | I want to connect to a portal site.
| | 01:22 | I'm going to give it the
address of my Collaboration Portal.
| | 01:26 | Well, I actually have a couple that I
have been working with, but I'm going to
| | 01:28 | give it the address of a fairly
standard, straightforward one here.
| | 01:31 | And I am going to say the
Portal Name is Company Portal.
| | 01:37 | You can say whatever you want.
| | 01:38 | Now what does this do?
| | 01:40 | Nothing magical, except this.
| | 01:42 | When I click OK, now from everywhere in
this site collection, I have this link
| | 01:48 | back to the Company Portal.
| | 01:50 | Really, Team Site is the top-level site
in the site collection, but it kind of
| | 01:55 | feels like I now have one level above it.
| | 01:59 | So that's all it really does, and you
can actually do this from multiple site
| | 02:03 | collections in your farm so they all
kind of link back and have this global
| | 02:08 | breadcrumb back to the Company
Portal, if that's what you want to do.
| | 02:12 | It isn't a groundbreaking piece of technology.
| | 02:15 | It's just a very, very simple fix in
those places where you have a central
| | 02:18 | portal linking to other site collections.
| | Collapse this transcript |
| Creating drop-down navigation in SharePoint| 00:01 | In a MOSS Collaboration Portal, one
of the sites, the News site, generates a
| | 00:06 | dropdown menu when it's moused over.
| | 00:09 | And what I'm often asked
is can this be repeated?
| | 00:12 | Is there something special about the
News site that these appear? There isn't.
| | 00:16 | It's just the way that some
of the settings are organized.
| | 00:19 | Now first off, you can't
actually do this in WSS out-of-the-box.
| | 00:23 | There's no easy way to do dropdown navigation.
| | 00:26 | It is possible, but you have to
jump through quite a few hoops.
| | 00:29 | But in a MOSS site, it's a lot easier to do.
| | 00:33 | So what are we looking at?
| | 00:34 | Well, think about what we're
seeing when I mouse over here.
| | 00:37 | I'm actually seeing four links:
| | 00:38 | the top link, which is linking directly
to the home page of the News site, and
| | 00:42 | then to three other pages.
| | 00:44 | And what it's really doing is showing me
everything in the Pages directory of this News site.
| | 00:50 | To prove that, I'll go to the News site,
go into its AllSite Content, go into
| | 00:56 | its Pages directory and I see four pages there,
which match with the four links that I have.
| | 01:02 | It may feel like three, but the top one
is a link as well, which is linking to
| | 01:06 | the default home page.
| | 01:08 | So why are we seeing this dropdown?
| | 01:10 | Well, remember, every single site
has its own navigation settings.
| | 01:16 | It's the very common mistake to think
that there is one navigational setting for
| | 01:20 | the entire site collection.
| | 01:21 | That's really not true.
| | 01:22 | It kind of feels that way sometimes, but
every site in a site collection has its
| | 01:27 | own navigation settings.
| | 01:28 | If I'm in the News site, which I'm
right now, I'm going to go to Site
| | 01:32 | Actions > Site Settings > Modify Navigation, it
looks kind of similar to the top-level site.
| | 01:38 | But if I page down, it's certainly different.
| | 01:40 | There is something else going on here.
| | 01:42 | So we have Show subsites and
Show pages checked, Sort manually.
| | 01:47 | We're saying that my global navigation,
which is my top-link bar, is actually the
| | 01:51 | same items as the parent site. That's okay.
| | 01:53 | That's what we'd expect.
| | 01:55 | But in the current navigation, we're
saying Display the current site, then
| | 01:58 | navigation items below the current site,
and the current site's siblings. Okay.
| | 02:02 | That may not be immediately
straightforward, but this is the important thing here.
| | 02:07 | What's actually appearing in this box is
what's going to appear in the dropdown.
| | 02:12 | And it's automatically going to add
new pages from the Pages Library here
| | 02:17 | because that option up at
the top has been checked.
| | 02:20 | However, I can actually add my own links here.
| | 02:22 | If I wanted to manually add a
link and say I'm going to add this to
| | 02:27 | www.lynda.com, click OK,
| | 02:30 | it's add it under there, and you can
see that it knows there's a difference
| | 02:34 | between this link the one above it,
that this is a type of page, and the one
| | 02:38 | below is a type of link.
We can manually change that.
| | 02:42 | I'm going to click OK and by adding
that link in our navigation of the News
| | 02:46 | site, it will appear in the dropdown,
but there's nothing magical about
| | 02:50 | being the News site.
| | 02:51 | In fact, if I were to go
to say the Reports Center.
| | 02:55 | Now we're not really getting into this.
| | 02:56 | This is the business intelligence site,
and it's really out with the scope of
| | 03:00 | this course, but to look at the View
AllSite Content of this other site, we have
| | 03:04 | a Pages Document Library here, too.
| | 03:06 | It's going to ignore the default
page because that's just the home page.
| | 03:10 | I say ignore meaning it's not going
to generate a dropdown, because really
| | 03:14 | that's what the tab link is
anyway is a link to this page.
| | 03:19 | But if I create a new page in here, I'll
make a new article, call it Test Article
| | 03:25 | and just click Create,
| | 03:28 | because I'm in a Publishing site, this
is going to be marked as checked out.
| | 03:32 | That's what this little icon means.
| | 03:33 | I'm going to click the dropdown and
check it back in as a Major Version,
| | 03:38 | meaning it's published.
| | 03:39 | And the difference between Draft and
Published in this Publishing site means
| | 03:42 | viewable by everybody, or just
viewable by people who have edit permissions.
| | 03:48 | I'm saying viewable by everybody.
| | 03:50 | As soon as I've published it, notice
what's happened over here in the Reports tab.
| | 03:54 | I have got a dropdown to Test Article.
| | 03:57 | And that's, again, because the
navigation settings of this particular site
| | 04:02 | have the ability to show subsites
and show pages, and they are actually
| | 04:06 | showing that page underneath it.
| | 04:08 | This is going to be what's shown in
the Quick Launch bar or the current
| | 04:12 | navigation, but because I've added
that page, it would appear in the dropdown.
| | 04:15 | Now, I do suggest that
you use dropdowns sparingly.
| | 04:20 | I think that they are a bad
idea, unless proven otherwise.
| | 04:22 | I don't think they always help navigation.
| | 04:25 | And they can be useful but only when
you're alternatives have been excluded
| | 04:28 | because they're not always obvious for users.
| | 04:31 | But this is how to allow dropdowns
to show pages under your subsites.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks for joining us for this
SharePoint 2007 Designer course.
| | 00:03 | You should now be able to begin with
branding your own SharePoint sites.
| | 00:07 | In just a few hours, we've covered the
core of the application, and explored the
| | 00:11 | concepts that you need to know:
| | 00:12 | Master Pages and Page Layouts, Content
Types and themes, things that you need to
| | 00:17 | be able to take your own designs and
bring them into the SharePoint framework.
| | 00:20 | Good luck with your own sites in SharePoint.
| | Collapse this transcript |
|
|
