Tutorial: Introduction to Expression Web
Table of Contents
Overview | Creating a new site | Uploading your pages
Pacific Restaurant Website | [page 1] | [page 2]
Creating Links | Creating Folders | Deleting pages |
Tips and tricks
Microsoft Expression Web is a development environment for creating web pages and sites. It allows the user to quickly develop web pages without
having to spend countless hours coding pages in HTML, JavaScript, and other languages. Today's class familiarizes you with the layout of Expression
Web before creating the first two pages of the Pacific Restaurant website and uploading the pages to the ebiz web server. This tutorial also
includes instructions on working with files, including, uploading, synchronizing, and deleting.
The first thing you need to do EVERYTIME YOU USE A DIFFERENT COMPUTER is to create a new website. This does NOT mean that you
have to recreate all of your web pages. It simply means that you have to recreate the settings for the site.
1. Select File --> New --. Web site from the menu
Figure 1: Creating a new site
2. Select Empty Web Site
3. In Specify the location of the new website, save the web site to your Documents/dsc340site folder.
Figure 2: Specifying the site folder location
Creating a web page
Following on from the database exercises, we want to create a website for Pacific Restaurant. The first page we want to create is a homepage.
The homepage must be saved as index.htm.
1. To create a new web page, click on File --> New --> Page
2. Select HTML and click on OK.
3. Save the page as index.htm.
4. Make sure the page is saved in the folder you created earlier (DSC340site) and that it appears in the Folder List.
5. Add the following content:
Pacific Restaurant
Address: 275 Kincaid Street, PORTLAND OR 97001
Phone: (541) 346-1234
Notice: This web site is fictitious. It was created as part of the requirements for DSC340 Business Information Systems.
6. Format Pacific Restaurant as <h1> by highlighting the relevant text as selecting h1 from the style drop down list.
7. Highlight all the text, including the heading and select Arial, Helvetica, sans-serif as the font.
8. Right click anywhere on the empty part of the page and select Page Properties.
9. Give the page a Title of Pacific Restaurant
10. Give the page a Page Description (for Google and other search engines) of Pacific Restaurant serves
the finest Asian cuisine this side of the Pacific.
11. Keywords: Portland Restaurant, Portland Asian Restaurant, Portland Chinese Restaurant
12. Click on the Formatting tab.
13. Choose any Background color and then click OK.
14. Feel free to experiment with other formatting options.
15. Save your changes.
While you create and edit your pages on your own computer, for the rest of the world to be able to see your web pages, they must be copied (uploaded)
to a web server. Our web server is ebiz.uoregon.edu. Here are the steps for uploading pages to the server.
1. Click on Site --> Remote Web Site
2. Click Remote Web Site Properties
3. Select FrontPage Server Extensions
4. Under Remote web site location enter the URL of your web site
5. Enter your username and password.
6. On the left hand side are the files on your computer (Local web site) and on the right hand side are the files on the ebiz
server (Remote web site).
7. You must always make sure that the two sides are the same.
8. Every time that you start Expression Web, when you first connect
to the server, you should download any files and folders from the server (Remote Web Site) that are not
on your machine (right arrow).
http://ebiz.uoregon.edu/students/yourusername
9. After that first download, every time you create a new page or change an existing page, you must
- Save your changes.
- Upload all changed or new files to the server/remote web site (right-pointing arrow).
- Open your web browser or Refresh the page to verify your changes.
10. To synchronize existing or deleted pages or folders, use the double-arrow button . Synchronization is useful when you use different computers
to edit your files.
11. Open your preferred browser (Internet Explorer, Firefox, Safari, etc) and view your first page at
HyperLink!
Create a second page
Repeating the steps above for creating a new page, create a page that lists some of the dishes on Pacific Restaurant's menu.
1. Save the page as menu.htm
2. Add the following content:
Menu
Cashew Chicken $6.00
Mongolian Beef $7.00
Sweet and Sour Pork $6.00
Lemon Chicken $8.00
To create a link from your home page (index.htm) to your menu page, complete the following steps:
1. Open index.htm
2. From the Folder List drag menu.htm and drop it in index.htm where you want the link.
3. You can change the link text displayed if you want by simply editing the text in the normal way.
Linking to external pages
In this example, we will create a link to a recipes page, such as www.foodnetwork.com
1. Open menu.htm
2. Type in the text for the link.
3. Highlight the text.
4. Right-click on the text and select hyperlink.
5. In the Address field, type in the full hyperlink, including http://. In this example, type in http://www.foodnetwork.com.
Click OK
To create a new folder, right click on the name of your website in the Folder List and select New --> Folder.
Figure 7: Adding a new folder
1. You can delete a file by simply right-clicking on the file in the Folder List and then selecting Delete.
2. When you delete a page, remember to also delete the copy on the server using the Web Site tab.
1. Keep everything in the one folder (at least for the time being) including images, web pages and other files. Doing this avoids complications
when linking between files.
2. Remember that you will usually have two copies of your web pages.
- One copy on your local computer (your ‘working’ directory)
- One copy on ebiz.uoregon.edu.
- Make sure that you always synchronize your files so that the two copies are consistent (no question marks or arrows next to files in the
Web Site tab).
- Remember to check that you have uploaded all files from your computer to ebiz.uoregon.edu (do this often!). The world sees what
is on ebiz.uoregon.edu, not your computer.