1. Go to Application Management

1. Open up SharePoint 2010 Central Administration
2. Click “Application Management”
3. Click “Create Site Collections” under Site Collections

2. Create the Site

1. Choose your local Web Application
2. Add in a Title – Lets call it MPTutorial
3. Under URL – make sure the first drop down is set to the  “/sites/” option
4. Then add “MPTutorial” in the text box next to the above drop down.
5. Choose the Collaboration Tab, and then select Team Site.

3. Set the administrators

1. Add your admin users – usually your Site Administrator
2. Quota should be on the default option: No Quota
3. Click OK

Getting All Our Ducks In A Folder

Please make sure you have SharePoint Designer 2010 Installed, and you have downloaded and extracted Randy Drisgill’s Starter Page Pack. We are going to add in the different files and folders that we will be working with now via Designer.

So lets begin:

• I want you to click Site Actions > Edit in SharePoint Designer

• So click on Master Pages (on the left navigation), and this will open the file list of the Master Page folder.
• Click Import Files
• Click Add File
• Browse to your Starter Master Pages folder, and select the _starter_foundation.master file and click Open.
• Click OK on the Import pop up window

• Find the newly added file, and right click on it
• Rename it to MPTutorial.master

• Once renamed – Right click again on the file and click “Set to Default Master Page”

• Now onto our Style Library Folder.On the Left Navigation, click on All Files.
• This will open up the full file and folder structure of our site.
• Double click on the Style Library folder.
• The Style Library will open, and be quite empty.
• So create a folder called “MPTutorial” -
• You can use the New Folder button on the ribbon, or right click in the window go to New > Folder

• Open up the new folder and create 2 more folders:

• - Images
• - Styles

• Then open the Styles folder
• Right click in the window
• Go New > CSS
• And name the empty style sheet ‘MPT.css’

• Download this little image pack, then extract it onto your machine
• Import the images into Your Images folder (Style Library > MPTutorial > Images)
• We will be using these through out the tutorial

Setting up the Master Page: CSS and Logo

• In Designer, open your MPTutorial.master
• Go to Master Pages (Left Navigation)
• Click on MPTutorial.master
• It will open up the master pages property screen
• Click “Edit File”
• the master page will open up in Editor mode > Code View

• Find this code:

• Then replace it with this code:

• Lets breakdown the above link

• $SPUrl:~SiteCollection/Style Library/Custom/MPT.css

• $SPUrl - Finds the full path of the SharePoint Service so in my case it is Http://Louise-pc/Sites

• SiteCollection – you replace with your site collection name (eg. MPTutorial)
• Style Library – referencing the folder
• Custom – your custom folder (if you have one) – in this case it is the folder we created – MPTutorial
• Styles.css – the name of your style sheet – in this case – MPT.css

• Now we are going to add in the Logo using Site Settings
• Currently your site logo looks like this

• In Designer, go to your MPTutorial images folder
• Right click on MPLogo.png and click properties
• Copy the url shown for Location

• Now go to your site
• Click Site Actions > Site Settings
• Under Look and Feel
• Click “Title, description and icon”
• Under the Logo URL and Description Section
• Paste your MPTLogo.png location url in the URL text box
• Click OK

• You  will already see the logo showing in the Site Settings page, but click the Logo to go to your home page for good measure

On Monday – in Part 2 – We will work with the Header bar (Site Logo, Search and the Top Navigation)