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. 2. 3. 4. 5. 6. 7. 8.

Common Toolbar Folder List File Tabs Toolbox Style and Layer Task Panes View Tabs Tag and CSS Property Task Panes 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 Title Page Description Keywords Value My Beach Trip This site is about a trip around the world to various beach locations. 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 Hyperlink Visited hyperlink Active hyperlink Hovered hyperlink Value Blue Green Light Blue 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 Alternate text Long description Value My Beach Trip header 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 height width left top Value 100px 800px 0px 0px

5. On the File menu, click Save.

Page 10 of 17

Task 3: Add another layer and hero image

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 Alternate text Long description Value Relaxing on a remote beach 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 height width left top Value 372px 800px 0px 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 sites 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