expression web 4 quick start tutorial beaches part i
DESCRIPTION
this is not mineTRANSCRIPT
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