Wrox: Beginning Sharepoint Designer 2010: Chapter 1, 2, 3

[Chapter 1: Exploring Sharepoint Designer]

All Sharepoint sites are created based upon a site definition, or a template. A template defines the features available by default in that particular type of site. these typically include pre-defined lists and libraries, special pages and default contents. In SPD 2010, Site template area shows certain common Sharepoint templates that you may use to create a new site. You can connect to another SP server to retrieve site templates, and create a new site on your local SP server.

You can add/remove users from Sharepoint groups in the Site Groups link on the side menu.

image

With a publishing page, you can’t edit the page in SPD 2010. Only the layout. Content cannot be edited in SPD in a Publishing web site.

** Site assets are files that can be used in multiple places within the site. may include images. style sheet files, even videos.

Governing Sharepoint Designer – restricting SPD access to SP web site:
Two levels:
Web application level:
Central Admin –> General Application Settings –> Sharepoint Designer
image

Site collection level:
Site Settings –> Site Collection Administration –> SPD settings

image

Both are similar to this:
image

[Chapter 2: Editing Pages]

Skewer Click – If you want to select a specific tag for a specific element on a page, this is an easier way:
image

(1) Click the Skewer Click button in the ribbon
(2) In the design view, click the element, and you will see a menu popup with all the tags that are surrounding the element.
(3) Select the tag.
(4) Once you have the tag selected, click Quick Tag Editor in the ribbon. A small windows popup
image

It’s a new feature that makes selecting and editing a tag much easier.

By default, SPD opens a page for edit using SAFE mode.  Only the content area can be changed. (because most of them time you won’t change the layout – such as master page tec.).  You need to click "Advanced Mode" to edit areas other than the content area.

image

Pages like Master file, are opened by default using Advanced Mode.

Code Snippets: SPD includes pre-defined codes for such thing as HTML, scripts and css link.

To save a text to code snippet:
(1) Works only in code view! Highlight some text, and right click and select "Create Code Snippet". Provide name and description.
image
image

To use a code snippet:
(1) In code mode, Ctrl + Enter, you will see a popup. Select the code snippet from the popup. It will be inserted.
image

You can use this tool to insert any arbitrary code that you created.

[Chapter 3: Anatomy of a Sharepoint Page]

Two page types in SP 2010:
(1) Application pages — more like traditional pages; stored in file system; can’t edit with SPD.
(2) Site pages:Pages that can be edited, add web part to, and create and customize with tools like IE or SPD.  Stored in Content DB.

most SP Content pages have the following characteristics:
(1) *.ASPX
(2) Use ASP.NET master page and "content placeholders"
(3) The placeholder "PlaceHolderMain" contains the actual instance of info for the page.

Web part page: The primary page for presenting web parts, libraries and lists. If you have unstructured content such as text, use WIKI
Web part has to be inside a web part zone. (except for WIKI)

*** You can do much more with web part page in SPD than in IE.

** Wiki page: Like web part pages, WIKI page has several layout pre-defined, but allow mix of rich content (text, image) and web part. Very versatile.

Place holders in Master page:
PlaceHolderMain
PlaceHolderLeftNavBar
PlaceHolderTopNavBar
PlaceHolderSearchArea

If you want to hide a specific content control on a page, add an empty content control, and set the Visible to False. Or, simply add an empty content control, and it will replace the default content. (such as search box)

Master page location: _catalogs/masterpage

Only one gallery (for master page) exist for one site collection. The master pages are populated when a new site collection is provisioned. Master page cannot be shared between site collections.

v4.aster: default master page for most non-publishing sites in SP 2010. Also the default system master page.

default.master: based on MOSS 2007. Use this if you need a legacy interface, and will not use Ribbon. Mainly for upgrading MOSS 2007 –> SP 2010.

minimal.master: no ribbon, no navigation; use it if you need lots of space.

simple.master: Used for Error or Login pages where no master page is needed.

nightandday.master: good for publishing web content management.

Page 86

*** Modifying the default master page: v4.master – Can be used with publishing or non-publishing site.
To create a new master page based on an existing one, you can —
(1) Export (to your local) and import the master file: — Not working for me.
image
(2) Copy/paste and rename.

To switch master page:
image

**** Custom master page – not easy to do because you have test and make sure it works. You have to have all required placeholders even though you do not use them. There are about 35 required placeholders!

What do you do with the placeholders that you don’t need but you have to include? Hide them using Panel!
<asp:Panel visible=”false” runat=”server”></aspPanel>

Required control for Master Page to function:
<head> – SPPageMansger, ScriptLink
<body> – ScriptManager

*** How to make a fluid (full) width design to a fixed width (such as 1024 pt) design?
You will add an embedded style sheet that will fix the width of pages inheriting from this master page. Apply some CSS and you can change the width of the page. See Page 96.

*** Changing the location of the Search Box
you’re moving the PlaceHolderSearchArea content placeholder. Page 98.

*** Registering External CSS —
First, add your custom/external CSS file using SPD, and save it in the Style Library folder (you can create subfolder). Then, before the end of the Head tag in the master file, add this line to create a reference to your custom CSS file:

image

Not easy to customize Sharepoint Master Page.

Advertisements
Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: