Dave Heppenstall |  Contact

Lab 3 4 5 6 7 8 9 10 |  » 

Expression Web II

31 January 2008

This tuitorial is an update to the official Lab Four web page.

This lab will cover some additional material for Microsoft Expression Web to make some pretty and interactive web pages. If you are still uncomfortable with Microsoft Expression Web, review the Lab Three notes and get some more practice with the software.

The second half-of the lab will introduce spreadsheets using Microsoft Excel 2007 for concepts such as functions, formulae and formatting. We will also learn about some things that don't happen to start with "F". :)

For  Assignment Two, you will need to create a website like this example.

On This Page:

• Update Anti-Virus Software
• Review of Lab Three
• Image Gathering
• Background Images
• The <Marquee> Tag
• Thumbnails and Animated GIFs
• Part II: Spreadsheets
• Formulae
• Copying and Moving Data
• Inserting/Removing Rows and Alignment
• Formatting Cells
• Borders

Update Anti-Virus Software

First things first: Right-click on the VirusScan icon in your applet tray next to the clock on the bottom right hand corner of your screen. Select Update Now...

Review of Lab Three

First we shall take a few moments to get back to the basic template as we did in the first step(s) of Lab Three.

Create a new Folder in your USB drive called "website" (to distinguish it from the "Web" folder we have been using previously). Within the "website" folder, create another folder called "images". Use all lowercase names for the folders.

Start Microsoft Expression Web and Open Site... the "website" directory. Create a new Banner and Contents Frames Page template as before and click the "New Page" button in each new region.

Type text into each region to identify them as "Banner", "Content" and "Main" again. Finally, select Save from the File menu and save the files as "banner.htm", "content.htm", "main.htm" and "index.htm".

Image Gathering

You will need some images which you will gather from both the internet as well as the course ftp server at ftp://snowhite.cis.uoguelph.ca/pub/cis1200/. Right-click images you would like to save and select "Save Image As..." or "Save Picture As...".

Save the image insight.gif from the ftp server as well as any other image you collect to your images folder. You will want to seek some images which would make good backgrounds as well - or just take one of these ones here:

   

Background Images

Specify a background image for each of your frames using the following procedure. You needn't use the same background image, but for aesthetic value - the same image is probably a good idea. Right-click on each frame and select Page Properties... as shown:

In the dialog box which appears, choose the Formatting tab, select the Background picture checkbox and click Browse to find your image.

In the example below, I have set a different background image to each frame. I also set the font in two frames to white - make sure you can still read the text!

You will need some images which you will gather from both the internet as well as the course ftp server at ftp://snowhite.cis.uoguelph.ca/pub/cis1200/. Right-click images you would like to save and select "Save Image As..." or "Save Picture As...".

Save the image insight.gif from the ftp server as well as any other image you collect to your images folder. You will want to seek some images which would make good backgrounds as well - or just take one of these ones here:

The <Marquee> Tag

To create a scrolling title known as a Marquee in Expression Web, we will need to take a look under the hood of the web page to see the code. Set the focus to the Banner page and click on the Split view button:

In the code window, look for "Banner". Once you have found this code, insert the following around it:

You won't be able to see the text scroll in design mode, but you will see it when you preview the web site in an actual web browser:

Thumbnails and Animated GIFs

Insert one of your images into the Main section of the webpage. In the example below, I inserted a ludicriously large image which is clearly unsuitable for use in the website. To automatically create a thumbnail of the image, right-click on the image and select Auto Thumbnail. The resultant image will link to the large image.

Next, lets add in that insight.gif image. Once you have imported it, you will only see the first frame. Once again, you will see the full animation when you preview it using a web browser.

 

 

Spreadsheets

Open the course ftp server Excel Labs directory and save the file lab1_a.xls to your USB key; we will need this file for this section of the lab.

Start Microsoft Excel 2007 and open lab1_a.xls. A spreadsheet is essentially a two-dimensional matrix of values, but this is an over-simplification. We will be performing some manipulations on the data and formatting of this spreadsheet.

Formulae

We are going to fund the sum of the values in "Good Col."

Select cell B5 and type in "=sum(B2:B4)" and hit Enter. The sum of the cells is now displayed in the B5 cell.

Alternatively, lets try using the mouse to select the cells we want individually. Clear the data in cell B5 by hitting the Del key. Now start typing "=", but select the B2 cell with the mouse. Type "+" and click on B3. Repeat once more for B4 and hit Enter. While this is a little bit more time consuming, the result is the same.

 

Copying and Moving Data

Lets duplicate the contents of the "Good Col" by copying it. Highlight the contents (cells B1 to B5), right-click on the highlighted region and select Copy. Now highlight a region matching in size in the second instance of "Good Col" (cells D1 through D5). Finally, right-click this new region and select Paste.

Now, lets move data around. You can move data using the Cut command instead of Copy as above, but lets use the mouse for this exercise. Highlight cells B1 through B5 again, use the mouse to click on the solid black border around the region and drag the rectangle to the C column as shown:

When you release the mouse button, you will be asked, "Do you want to replace the contents of the destination cells?" Click "OK" and the data will be moved into the C column (overwriting the "Bad Col" text) and removed from the B column.

Inserting/Removing Rows and Alignment

Add a new row to the speadsheet above the topmost row by right-clicking anywhere in row 1 and selecting Insert from the context-menu as shown:

Type "This is my Spreadsheet's Title" into the new A1 cell. Highlight cells A1 though D1 and click the Merge and Center tool button as shown:

You can change the alignment of this cell - or any other cell - by using the adjacent alignment toolbar buttons.

Finally, delete the row that is titled, "Bad Row." Right-click on the number 4 in the index of rows and select Delete from the context-menu:

Notice how the sums in the Total column have changed?

Formatting Cells

Select the values in the second "Good Col" column and click on the dollar sign symbol in the toolbar. From the drop-down menu, select any option - for this example we shall select Euro:

There is another way to modify the cells' formatting settings. Select the other values in the first "Good Col" column and right-click on the highlighted region. Select Format Cells... from the context-menu. The following dialog should appear. Under the Number tab, select the Currency category and click OK.

Use these toolbar buttons to move the decimal point:

Borders

Highlight the region which contains, "Let's Put A Box Around This Text Area..." Click on the Borders toolbar button and select any of the borders options which appears. I've selected: "Thick Box Border".

The cells will now be formatted to have a common thick border. There are many different border styles, try a few of them out.

Lab 3 4 5 6 7 8 9 10 |  »