New Perspectives on Expression Web 3.0
1
TUTORIAL PROJECT
TUTORIAL 6
Expression Web needed for this Tutorial Project:
 short_stories
Short Stories
In your Writing course a few years ago, you did a project on short story authors of the
nineteenth century. You have decided to build a Web site to display a number of the
stories you found interesting. However, the initial site you built needs a little more. You
want to add a table layout with navigation on the left to the pages on the Web site, a logo,
and a table listing the books and author information on the home page. The books in the
table will link to the actual story pages.
Complete the following:
1. Open Expression Web.
2. Open the Web Site named short_stories.
3. Open the default page in the workspace.
4. At the bottom of the default page add a table of 4 rows and 2 columns. Cell padding
1, Cell spacing 2, Borders Size 0.
5. Specify the table width at 50% and distribute columns evenly. Center the table left to
right.
6. Enter the following data into the cells:
Author
Jack London
Title
A Piece of Steak
Anton Chekov
The Bet
Hermon Melville The Lightning-Rod Man
7. Bold the first row.
8. Create a New Page using the first CSS Layout “Header, nav, 2 columns, footer”.
New Perspectives on Expression Web 3.0
2
9. Save the CSS page as master.css.
10. In the Untitled_1.html page, insert the short stories logo located in the images folder
into the masthead (div#top_nav). Center it and change the .style1 name to .center.
11. In the div#page_content section copy and paste the body content from the
default.html page.
12. Delete the original default page and save the Untitled_1 page as default.html.
13. Using an unordered list, create links to the following pages on the left navigation bar:
Home, Contact, and About.
14. In the master.css file, add new styles to bold the links. Set the link, active, and visited
colors to black and the hover color to red. Set text-decoration to none.
15. In the table column labeled Title, link the titles to the pages of the same name.
16. Add an empty row to the bottom of the table.
17. In the div#footer section, add the following using your email address:
For additional information on this Web site, email the Webmaster at
student@myschool.edu
18. Using the .center style, center it.
19. In the master.css file modify the body font-family to “Verdana, Geneva, Tahoma,
sans-serif”.
20. Save All the pages and test the default page in the browser. The links should open the
correct pages. Use the back button to return to the Home page. Check the links to the
short stories. Use the back button to return to the Home page. Then close the browser.
21. In Page Properties, enter an appropriate page title, a page description, and keywords
for this Web site.
22. Save the page, and then view the site in the browser.
23. Confirm that the title bar contains the page title you included in the page properties.
New Perspectives on Expression Web 3.0
24. Open the About Us and Contact pages and personalize them as indicated on each
page.
25. Save the pages, and then view the site in the browser to verify your changes.
26. Close the browser.
27. Close the site, and then exit Expression Web.
3