Dave Heppenstall |  Contact

Lab 3 4 5 6 7 8 9 10 |  » 

Expression Web

24 January 2008

This tuitorial is an update to the old FrontPage notes as we are now using Microsoft Expression Web. It is also an update to the official Lab Three web page.

On This Page:

• Create Your Web Folder
• Start Microsoft Expression Web
• Create a FrameSet from a Template
• Save Your New Web Site
• Publish Your Site
• Add New Pages
• Preview Your Site

Create Your Web Folder

Create a folder called "Web" in your USB drive. You probably already have one as it was required for  Assignment One.

Start Microsoft Expression Web

Startup Microsoft Expression Web and open your directory as a web site. Note, it is very important that you open the directory as a site as shown in the illustration.

Create a FrameSet from a Template

Create a new frameset for your website by selecting New from the File menu. After the "New" dialog appears, select "Frames Pages" and "Banner and Contents" as follows:

What you should see now is your blank frameset template. For each empty frame, click on the "New Page" button as shown.

Type some text into the frames to uniquely identify the regions: Banner, Content and Main. It will look like this when you are done:

(If you would like to take a look at the properties of your frameset, select Format, Frames, Frame Properties).

Save Your New Web Site

Select Save from the File menu. As you may or may not expect, there are actually four pages that need to be saved: banner, content, main and your frameset. As each save window appears in sequence, you will be shown which page you are saving, as shown. Name them "banner.htm", "content.htm", "main.htm" and "index.htm" respectively.

Publish Your Site

Select Publish Site... from the File menu. The following dialog box will appear. Select FTP and enter the directory as ftp://ftp.cis.uoguelph.ca; leave the FTP directory blank.

Enter your username (central login) and password (your id number with no zeros in front) into the following window:

After you click "Publish Site," your files will be sent to the server. Your site will be located at http://1200webs.cis.uoguelph.ca/~yourusername/.

It is simple but it works. Now let's make it better...

Add New Pages

Right-click on an empty area of the "Folder List" pane. Select New, HTML as shown in the figure below. Create two new pages and name them anything you like. For the purpose of this example, we're going to use the names "alpha.htm" and "bravo.htm".

Create links to these new pages in the Content panel by clicking and draging the new files into the frame.

Tidy up the hyperlinks a bit by right-clicking on the links and selecting Hyperlink Properties. Change the hyperlink text to display to simply "Alpha" and "Bravo".

Publish your site again.

Preview Your Site

Finally, take a look at your site in a real browser to see how it works. Your site will be located at http://1200webs.cis.uoguelph.ca/~yourusername/.

Lab 3 4 5 6 7 8 9 10 |  »