Expression Web 4 Lab Exercises

Expression Web 4 Quick Start Tutorial

Beaches Around the World

(Part 1: Beaches Around the World series)

Microsoft® Expression® Web Workspace

1. Common Toolbar2. Folder List3. File Tabs4. Toolbox5. Style and Layer Task Panes6. View Tabs7. Tag and CSS Property Task Panes8. Bread Crumb Trail

Exercises

EXERCISE 1 - Creating a New Web site

EXERCISE 2 - Creating Page Layouts with Layers

EXERCISE 3 - Styling Your Web Site Using CSS

EXERCISE 4 – Creating More Pages

EXERCISE 5 - Adding Navigation Controls to Your Site

Page 2 of 17

Exercise 1: Creating a New Web Site

Scenario: You will create a new, empty Web site and a blank HTML page, and change its properties.

Task 1: Create a new empty Web site

Create the basic framework for your new Web site structure.

1. Click Start, point to All Programs, point to Microsoft Expression, and then click

Microsoft Expression Web 4.

2. On the Site menu, click New Site.

3. In the New dialog box, click General, and then click Empty Web Site.

4. Type the following in Location :

H:\beaches\your last name

(This will create a folder or site called beaches on your H: with a file name your last

name. Verify this by confirming the your last name appears in the Name section.)

5. Click OK to create and save the Web site.

Page 3 of 17

6. All the resources (images and text) have been saved to my TeacherWeb site. In order to

insert an image you will need to save it to your H: or drag and drop it. The required text

can be found on the Text content.doc which is on my Web site.

Task 2: Create a new HTML page

Create the HTML page that will be the home page of the Web site and set the page properties.

1. On the File menu, point to New, and then click Page.

2. In the New dialog box, click General, then click HTML and click OK.

3. On the File menu, click Save As.

Page 4 of 17

4. In the Save As dialog box, in the File name box, type index.html and then click Save.

The page is named “index.html” because most Web servers will recognize this file name

as the home page.

5. Right-click anywhere on the blank page and select Page Properties.

6. Under the General tab, specify the values in the following table. This will help users and

search engines know the topic of the page.

Property Value

Title My Beach Trip

Page Description This site is about a trip around the world to various beach locations.

Keywords beach, trip, travel

7. Under the Formatting tab, specify the colors in the following table. This will change the

color of all links on the page.

Property Value

Hyperlink Blue

Visited hyperlink Green

Active hyperlink Light Blue

Hovered hyperlink Light Blue

Page 5 of 17

8. Under the Advanced tab, set all of the margins to 0. This will get rid of the default space

that creates a small margin around the edge of the Web page when displayed in a

browser.

9. Click OK to close the Page Properties dialog.

Exercise 2: Creating Page Layouts with Layers

Scenario: You will layout your page using layers and CSS Properties. You will then add images and text into those layers.

Task 1: Create a layer and add an image

Create a layer using the toolbox and then insert the header image into the layer.

1. On the Panels menu, ensure Layers is checked.

(Note: An alternative way to create a layer: In the Toolbox, click Layer and drag

it onto the page.)

Page 6 of 17

2. Select the Layers tab from the bottom right task pane. You will need to check the right

arrow if the Layers tab is not visible.

3. Click to choose the Draw Layer tool.

4. Click on the page and drag to create a layer.

5. Click inside the new layer to place the cursor within the layer.

Page 7 of 17

6. On the Insert menu, point to Picture and click From File.

7. In the Picture dialog box, navigate to the H: and select BeachTripHeader.png.

8. Click Insert to add the picture to your site.

9. In the Accessibility Properties dialog, specify the values from the following table and

click OK. This will help users and search engines identify the subject of the picture.

Property Value

Alternate text My Beach Trip header

Long description My Beach Trip text with a sun on the right

10. On the File menu, click Save.

Page 8 of 17

Task 2: Make the layer fit the image

Make the layer fit the image using CSS Properties.

1. On the Panels menu, ensure Layers is checked.

2. Select the Layers tab from the bottom right task pane. You may need to click the right

arrow if the Layers tab is not visible.

3. Click layer 1 on the Layers task pane.

The layer should be highlighted in blue on the workspace.

Page 9 of 17

4. With the layer highlighted, click the CSS Properties tab and specify the values in the

following table. This will make your layer fit the header image perfectly.

Property Value

height 100px

width 800px

left 0px

top 0px

5. On the File menu, click Save.

Task 3: Add another layer and hero image

Page 10 of 17

Use the Draw Layer tool to add another layer and insert a hero image into that layer.

1. Select the Layers tab from the bottom right task pane. You will need to check the right

arrow if the Layers tab is not visible.

2. Click to choose the Draw Layer tool and draw a new layer on the page.

3. Click inside the new layer to place the cursor within the layer.

4. On the Insert menu, point to Picture and click From File.

5. In the Picture dialog box, navigate to H: and select beach_hero.jpg.

6. Click Insert to add the picture to your site.

7. In the Accessibility Properties dialog, specify the values from the following table and

click OK.

Property Value

Alternate text Relaxing on a remote beach

Long description Relaxing under a palm tree on a remote beach

8. Select the Layers tab from the bottom-right task pane.

9. Click layer 2 on the Layers task pane.

The layer should be highlighted in blue on the workspace.

Page 11 of 17

10. With the layer highlighted, click the CSS Properties tab and specify the values in the

following table. This will make your layer fit the header image perfectly.

Property Value

height 372px

width 800px

left 0px

top 100px

11. On the File menu, click Save.

Page 12 of 17

Task 4: Add text to a layer

You will add two more layers to contain the Web site’s navigation links and the home page text content.

1. Use the Draw Layer tool to draw a new layer on the page.

2. Position the layer below the left side of the hero image and make it a bit bigger. Use the

following screenshot as a guide.

3. Minimize Expression Web and open TeacherWeb.

4. Open the Word file named Text content for Beach Trip Web Site.

5. Copy the four lines of text under the word Menu from the Word document.

Page 13 of 17

6. Maximize Expression Web and click inside layer 3 (the layer you just created) to place

your cursor inside the layer.

7. Paste the text into this layer.

8. Add another layer to the page using the Draw Layer tool.

9. Position the layer next to layer 3 and make it wider. Use the following screenshot as a

guide.

10. Minimize Expression Web and maximize the Word file named Text content for Beach

Trip Web Site.

Page 14 of 17

11. Copy the paragraphs labeled Page 1 text and switch back to Expression Web.

12. Click to place your cursor in layer 4.

13. On the Edit menu, click Paste Text.

14. In the Paste Text dialog, select Normal paragraphs without line breaks and click OK.

15. Highlight the text that you just pasted and select Arial, Helvetica, sans-serif from the

font dropdown.

Page 15 of 17

16. Click in the top-left corner of layer 4 and move the cursor to the top left using the

arrows on your keyboard.

17. Press the Return/Enter key on your keyboard.

18. Press the Up Arrow key on your keyboard to place the cursor on the top line of the

layer.

19. Type About My Trip.

Page 16 of 17

20. On the File menu, click Save.

Page 17 of 17