Materialsdownload.microsoft.com/.../WCM_IT_LAB_Design_Tools03.docx · Web viewThis lab will walk you through using Microsoft Expression Web to create and modify a CSS page, how to

Hands-On LabSharePoint 2010:Design ToolsLab version: 1.0.0

Last updated: 5/8/2023

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................................................................................................................................................. 3

EXERCISE 1: EDITING CSS WITH EXPRESSION WEB...........................................................................5Task 1 –Setup.......................................................................................................................................5

Task 2 – Using Expression as a CSS Editor............................................................................................5

EXERCISE 2: USING EXPRESSION DESIGN.........................................................................................13Using Expression Design....................................................................................................................13

LAB SUMMARY....................................................................................................................................... 20

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: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=3ab9d017-ba8f-4794-8a2c-4d0aa32d18de&displaylang=en

Estimated time to complete this lab: 30 minutes.

Materials

This Hands-On Lab contains resources in the following folders.

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

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

3

4

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.

3. This will install a feature in the web at http://demo2010a:8080/ for 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 http://demo2010a:8080/ in the Site name text box and click Open twice. See Figure 2.

5

Figure 2Opening site in SPD

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

Figure 3

6

Site Library

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

Figure 4Open a CSS file with Expression Web

5. 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.

7

Figure 5Expression Web HTML editor check.

6. 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.

7. Once in Expression Web click the Manage Styles tab. See Figure 6.

Figure 6Manage Styles tab

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

8

Figure 7Modify Style command

In the Modify Style dialog that opens select Font under Category. Change font-size to xx-large and font-weight to 900. See Figure 8.

9

Figure 8Modify Style : Font

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

10

Figure 9Change to Silver

10. Click Apply to apply the changes.

11. Click the Save button in Expression Web (CTRL+S).

12. 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.

13. Open http://demo2010a:8080/ in Internet Explorer. You should see the changes applied. See Figure 10.

11

Figure 10CSS Changes applied

12

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 11Opening PSD with Expression Design

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

13

Figure 12Open PSD screen

4. 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.

14

Figure 13Using the Slicer

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

15

Figure 14File | Export

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

16

Figure 15Export All

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

Figure 16Rename file

17

8. Now you are going to add this file to the Style Library.

9. To add this file to the Style Library go to SPD, click All Files from the left-hand navigation pane then click on Style Library | sitename.

10. Click the Import Files button. See Figure 17.

Figure 17Import Files

11. 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.

18

Figure 18Insert Caption

12. On the Import dialog click OK and then Close.

13. Go back to Internet Explorer and press refresh (F5). If the site isn’t open, open it again at http://demo2010a:8080/. You should see something similar to Figure 19. Note that the logo is now displayed.

19

Figure 19Site 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.

20