Hands-On Lab

SharePoint 2010:

Design Tools

Lab version:1.0.0

Last updated:1/16/2019

Virtual Machine Logon Details:

UserName: Administrator, Password: pass@word1

This document is provided “as-is”. Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it.

This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes.

© 2011 Microsoft. All rights reserved.

Contents

Overview

Exercise 1: Editing CSS with Expression Web

Task 1 –Setup

Task 2 – Using Expression as a CSS Editor

Exercise 2: Using Expression Design

Using Expression Design

Lab Summary

Overview

This lab will walk you through using Microsoft Expression Web to create and modify a CSS page, how to use Microsoft Expression Design to create an image file, and how to import these files into a SharePoint style library to be used on your site.

This lab requires Microsoft Expression Web and Microsoft Expression Design. If they are not installed on your machine you can download and install the Web Studio trial from:

Estimated time to complete this lab: 30 minutes.

Materials

This Hands-On Labcontains resources in the following folders.

Setup files:c:\mslabs\SharePoint2010\WCM\03_DesignTools\Setup.

Lab Resources: c:\mslabs\SharePoint2010\WCM\03_DesignTools\Resources

Exercise 1:Editing CSS with Expression Web

In this exercise, you will be using Expression Web 4 to modify CSS from SharePoint

Task 1 –Setup

  1. If you want to continue working from the last lab you can skip Task 1. Note that if there is any minor difference between your environment at this point and the environment the lab expects you may have to adapt some of the steps in this lab to compensate.
  2. Run the install.ps1 file in the setup folder by right-clicking on the file in Windows Explorer and selecting Run with PowerShell.

Figure 1
Running PowerShell.

  1. This will install a feature in the web at this lab

Task 2 –Using Expression as a CSS Editor

  1. Open Microsoft SharePoint Designer 2010 (SPD) by going to Start | All Programs | SharePoint | Microsoft SharePoint Designer 2010.
  2. Click the Open Site button, type the Site name text box and click Opentwice.See Figure 2.

Figure 2

Opening site in SPD

  1. Click All Files from the left-hand navigation panethen click on Style Library | sitename. You should only see one file, the style.css. See Figure 3.

Figure 3

Site Library

  1. Right-click onstyle.css and choose Open With | 4 Microsoft Expression Web 4. See Figure 4.

Figure 4

Open a CSS file with Expression Web

  1. When Expression Web starts you may get a dialog like the one in Figure 5. Uncheck the checkbox and click No to tell Expression Web not to check if it is the default HTML editor.

Figure 5

Expression Web HTML editor check.

  1. Another dialog may also warn you that the file is under source control. Choose the option which allows you to check the file out for editing.
  2. Once in Expression Web click the Manage Stylestab. See Figure 6.

Figure 6

Manage Styles tab

  1. In the Manage Styles tab, right-click on the .myClassSelector node and select Modify Style. See Figure 7.

Figure 7

Modify Style command

In the Modify Style dialog that opens select Font under Category.Change font-sizetoxx-largeand font-weightto900.See Figure 8.

Figure 8

Modify Style : Font

  1. Select theBackground Category and change the background property from fuchsia to Silver. See Figure 9.

Figure 9

Change to Silver

  1. Click Apply to apply the changes.
  2. Clickthe Save button in Expression Web (CTRL+S).
  3. Go back to SPD and open the style.css file. You should see the changes, Save (CTRL+S) in SPD to save the changes back to the library.
  4. Open Internet Explorer. You should see the changes applied. See Figure 10.

Figure 10

CSS Changes applied

Exercise 2: Using Expression Design

In this exercise you will use Expression Design to break apart a vector art file supplied by a web designer.

Using Expression Design

  1. Go to Start | All Programs | Microsoft Expression | Microsoft Expression Design 4 to open Microsoft Expression Design 4
  2. Use File | Open to open the blueyonder 960_grid_12_col 4 FINAL SLICED.psd file found in the c:\mslabs\SharePoint2010\WCM\03_DesignTools\Resources folder. See Figure 11.

Figure 11

Opening PSD with Expression Design

  1. On the Open Adobe Photoshop File dialog accept the defaults and click OK. See Figure 12.

Figure 12

Open PSD screen

  1. Once the PSD has been loaded, use the Slicer tool from the toolbox on the left to “slice” around the Blue Yonder logo. See Figure 13.

Figure 13

Using the Slicer

  1. Export the slice by going to File | Export. See Figure 14.

Figure 14

File | Export

  1. On the export dialog, specify the Location as C:\mslabs\SharePoint2010\WCM\03_DesignTools and click Export All. See Figure 15.

Figure 15

Export All

  1. Open Windows Explorer once the image has been exported and navigateto C:\mslabs\SharePoint2010\WCM\03_DesignTools.Rename the file from slice1 to logo. See Figure 16.

Figure 16

Rename file

  1. Now you are going to add this file to the Style Library.
  2. To add this file to the Style Library go to SPD, click All Files from the left-hand navigation panethen click on Style Library | sitename.
  3. Click the Import Files button. See Figure 17.

Figure 17

Import Files

  1. On the Import dialog click the Add File button, browse to C:\mslabs\SharePoint2010\WCM\03_DesignTools and select the logo file and click OK. See Figure 18.

Figure 18

Insert Caption

  1. On the Import dialog click OK and then Close.
  2. Go back to Internet Explorer and press refresh (F5). If the site isn’t open, open it again at should see something similar to Figure 19. Note that the logo is now displayed.

Figure 19

Site after logo

Lab Summary

In this lab, you performed the following exercises:

  • Used Expression Web as a CSS Editor
  • Used Expression Design to slice a logo from an image.
  • Imported the logo into a SharePoint style library.

1