Web Tutorial for Microsoft Expression Web

All full-time faculty at Gordon are provided web space to host personal web pages to use for his or her classes. This beginner's tutorial is intended to lead faculty through a simple means of creating and editing web pages for instructional purposes. In this tutorial, Microsoft Expression Web software will be used. If you do not have Microsoft Expression Web installed on your office PC, please contact Information Technology at 5008.

First, watch this video tutorial "Getting Started: A Microsoft Expression Web Tutorial" - then, read the tutorial that follows for additional techniques on adding content to your faculty web site.

 

Contents

Let's begin. . .

From the start menu, hover your mouse over All Programs to display a list of software installed on your PC. Locate the Microsoft Expression folder under All Programs and hover your mouse over the option. Click on Microsoft Expression Web as shown in Fig 1. The first time you open Expression Web a message will appear asking if you would like to make Expression Web your default web page editor. You can avoid seeing this message in the future by un-checking the box next to the option 'Always perform this check when starting Expression Web.' Then choose whether or not you would like to make Expression Web your default web editor. The Express Web window should now appear as shown in Fig 2.

images_015
Fig 1

images_002
Fig 2

We are now ready to begin...

Edit existing web pages

Once the Expression Web program has been opened and is visible on your computer screen, go to the File menu and choose Open. The Open File dialog box will appear. Click on the down arrow for the Look in: drop down box and locate the network drive associated with the Falcon Web Server. The Falcon Server should be mapped to drive S: and carry a description of faculty on 'falcon' (S:). Click on the Falcon network drive S: within the Look in: drop down box to open the faculty web space. You should now see a folder named exactly the same as your Gordon network username (Fig 3). Double-click on your folder. You are now inside your web folder on Falcon. Here you will save all your web content.

expressweb01
Fig 3

Working with your index (home page) file

Within your folder, locate a file named "index.html." This is the main page (home page) of your website. Double-click on the index file or single-click and press the Open button at the bottom of the dialog box (Fig 4).

expressweb02
Fig 4

Your home page will now appear within the Expression Web program for editing as shown in Fig 5 below. This home page should be used as a template and can be redesigned to your taste (layout, background color, images, tables, etc). The page is now ready to add text, hyperlinks to other web pages or files you have created and saved inside your Faculty folder on the Falcon Web Server.

Basic operations such as bolding text, resizing fonts, adding bulleted lists, and many other features within the Expression Web program are very similar in their application to other Microsoft Office programs. You can now click your mouse at any location on the page to position the cursor and begin typing text, adding hyperlinks, etc. You can also edit the text already displayed by clicking on the word(s) and making the desired changes. Save your changes by going to File >> Save ** and then view your changes by going to your web page on Gordon's web site via your browser. You might be required to hit the refresh button on your browser in order for the changes to show. Some browsers do something called "caching" web pages once they have been loaded for the first time in order to increase the speed at which the same page will be loaded a second time.

** It is important to note that your home page file should always have the name of "index." A link has been placed to this file from the Faculty web page listing on Gordon's official web site.

image_004
Fig 5

Creating a hyperlink

Before you create a hyperlink to another file, you need to ensure that the html file (web page) you are adding a link to has been saved on the Falcon Web Server (S:) at least once - and ensure that the file that you plan on linking to has been saved within your folder on Falcon (read further for creating links to off campus web sites).

You can create a hyperlink to another web page or to many different kinds of files such as Powerpoints, Word documents, PDFs, etc. However, it is important to understand the limitations of your audience before you use certain file formats. It is important that the visitor to your web site have the appropriate software on his or her PC to properly view / open the file. If you create a hyperlink to another web page (HTML file) then the browser being used by the visitor will be able to open the page without additional software. Otherwise, if the file is a PowerPoint slide, Word document, sound clip, etc. then the user will need the appropriate software installed locally in order to ensure proper viewing.

To create a link on your index HTML file or elsewhere, make sure the HTML file is open in Expression Web's editor window. Position your mouse cursor at the desired location. Next, go to the Insert menu and choose Hyperlink or right-click the mouse and choose Hyperlink from the pop-up menu (Fig 6).

expressweb03
Fig 6

The Insert Hyperlink dialog box will now appear as shown in Figure 7 below. Now, using the Look in: drop down box, locate the folder with the same name as your network username under faculty on 'falcon' (S:) and double-click on it. Find the file you want to create a hyperlink to and click on it one time. The web address that will be associated with the hyperlink will now be displayed in the Address textbox at the bottom of the dialog box. Be sure to leave the address displayed "as is" after clicking on the file.

You can also change the hyperlink display text from the Insert Hyperlink dialog box by typing in the desired hyperlink heading in the Text to display text box at the top (Fig 7). Finally, click 'OK' to insert the new hyperlink into the web page you are working with. The hyperlink will appear in the location where you positioned your mouse cursor.

image_006
Fig 7

ADDITIONAL OPTION: EXTERNAL HYPERLINKS

Adding hyperlinks to web pages outside of your faculty folder such as the official Gordon site or Yahoo requires the web designer to type in the full Internet address directly in the Address textbox as outlined in Fig 7.

You should now have a hyperlink inserted into the page with the heading you typed in the Text to display text box as shown in Figure 8. If you have made a mistake remove the link by using the backspace key or highlight the link and follow the instructions again for creating a hyperlink.

image_008
Fig 8

Creating web pages

Saving files on the Web Server

Whether electronic teaching materials are produced as a web page, a PowerPoint presentation, or a Word document - you will need to save the resource in your faculty folder on the Falcon Web Server (S:) before you can use it in your web site. To save a file in Microsoft PowerPoint or Word (2003), just go to the File Menu and choose Save As... (In Office 2007, click the Microsoft Office Button at the top left of the screen, and then click Save As). Then, using the Save in: drop down box, find the faculty on 'falcon' (S:) network drive in the Save As dialog box. Next, open your faculty folder, enter a descriptive file name for the resource (no spaces), and finally choose Save.

Most Microsoft Office products allow users to save their work in web (HTML) format as well, thus automatically converting a document to be read by an Internet browser (see How Do I Make My Syllabus a Web page to Link to My Web site?). This will alleviate compatibility issues regarding files created in programs that the end user does not have installed on his or her PC.

HINT: You can create new (sub) folders inside of your faculty folder for organizational purposes. For example, for a Math 1111 class you can create a folder called 'Math1111' and then save your file inside of this newly created subdirectory. Try to avoid spaces in your faculty and file names.

How do I make my syllabus a web page that I can hyperlink to my web site?

If you have a course syllabus designed in Microsoft Word then you are already halfway there. For this example, we will use a Word document. First, open your course syllabus in Word (2003), go to the File menu, and then click Save As. (In Office 2007, you must click the Microsoft Office Button at the top left of the screen, and then click Save As). Browse to your faculty folder on faculty on falcon (S:) using the Save in: drop down box. In the File name box, type a descriptive name for your syllabus (no spaces). In the Save as type: box, click Web Page(*.htm;*.html). DO NOT use the Single File Web Page option as this is not compatible with many browsers. Now click the Save button to automatically generate an HTML web version of your syllabus.

image_010
Fig 9

How do I create a new web page from scratch?

First, open Microsoft Expression Web. A white blank page should appear in the design window as shown in Fig 11 below. You can begin designing your new web page immediately within this area. However, sometimes you might want to create a new page after having an open page already loaded in the design window. You can always create additional pages at any time by doing the following:

  • On the File menu, point to New, and then click Page. The New dialog box will appear as shown in Fig 10. Select HTML as the type of page under General, and then click OK. A new blank web page will appear in the design window (Fig 11).

    expressweb04
    Fig 10

It is always good practice to go ahead and save before you start designing your new web page. Otherwise, hyperlinks and image references will be mapped incorrectly.

image_012
Fig 11

For extended help on adding content to a web page, use the Microsoft Expression Web built-in help for detailed how-to guides on creating tables, using style sheets, adding pictures and more.

THE SIGNIFICANCE OF NAMING WEB PAGES

The name that you save a web page as will be the name that will appear in the address bar in an Internet browser when the end user opens the page. For example, if professor John Doe saves his newly created webpage as MATH1111Syllabus.html in his web folder (jdoe), then the web address (URL) to this page will be http://www.gordonstate.edu/faculty/jdoe/MATH1111Syllabus.html.

How do I save Powerpoint presentations on my web site?

Saving a Powerpoint presentation on a web page can be done in one of multiple ways. The slides can be saved and linked on a web page as a regular Powerpoint file (.ppt format), a web page (HTML format), or as an Adobe PDF handout. The format of the Powerpoint slides determines how the slides are printed and its accessibility to your audience. It is important to inform users of the web site which format the powerpoints have been arranged in. See instructions on how to print each different format of a Powerpoint online at https://www.gordonstate.edu/departments/computer-services/an-optimal-solution-for-printing-powerpoint-slides-online/index.html

PDF Handout ( **** A CSD Best Practice **** )

You can create a PDF handout of your Powerpoint slides using the Adobe Acrobat Professional software. Some of the benefits of using this method are...

  • Reduced file size (especially for a PPT that contains lots of images)
  • Easily printable for students
  • Accessibility - PDFs are a universally accepted means to distribute electronic materials. Students can download Adobe Reader for free to view PDFs.
  • A PDF can't be edited from its original formatting (easily)

Follow along with the "How to video" or read the steps outlined below to create a PDF handout of your Powerpoint slides.

"How to" Video

vedioseries_5

(6:17min flash video)

  1. With your lecture slides opened in Microsoft Powerpoint, click on the File menu at the top (In Office 2007, click the Microsoft Office Button officebutton_01 at the top left of the screen)
  2. Choose Print...
  3. The Print dialog box will appear.

  4. In the Printer section under Name: choose Adobe PDF from the drop-down box showing the list of available printers as shown below.

    printpdf
    Fig 12

  5. In the Print dialog box, choose Handouts from the Print what drop-down box.

    printhandout
    Fig 13

  6. After the Handouts option is selected, the dithered Handouts section to the right of the drop-down box will become enabled (see Fig 12).
  7. Under the Handouts section select a minimum of '3' from the Slides per page: drop-down box. Choosing 3 slides will add lines to the right side of each slide so that students can take notes.
  8. After all options have been set as detailed above press the OK button.
  9. Next, in the Save PDF file as: dialog box, choose a location to save the PDF file. In this case, you will want to save the PDF file in your faculty web folder on Falcon (S:) so that you can create a link to it on your web page.
  10. Press Save.
  11. After the PDF file generation process has completed, create a hyperlink to the PDF file on your web page. (see Creating a hyperlink)

HTML Format (save as web page)

The first step for either format is to save your Powerpoint presentation in your faculty folder on the Falcon Web Server (S:). To save a Powerpoint as a web page on the Web Server follow the steps below...

  1. Once the Powerpoint is prepared, with Powerpoint open on your desktop, go to the File Menu and choose Save As Web Page (In Office 2007, you must click the Microsoft Office Button at the top left of the screen, and then click Save As)
  2. When the Save As dialog box appears, find your faculty folder under the faculty on 'falcon (S:) network drive and name the file descriptively (no spaces).
  3. Make sure the Save As Type drop-down box has the Web Page (*.htm; *.html) option selected at the bottom. DO NOT use the Single File Web Page option as this is not compatible with many browsers.
  4. Press Save.
  5. Once the Powerpoint has been saved in your folder create a hyperlink to the web based Powerpoint presentation on another web page. (see Creating a hyperlink)

NOTE: If a slideshow is saved using the web page format any user can view the slides regardless of whether or not they have the Microsoft Powerpoint software installed on their computer. However, using HTML format is not a printer friendly solution unless the user has the Powerpoint software on his or her computer. Internet Explorer allows the user to open the Powerpoint slides in the Powerpoint program (if installed) for printing purposes by navigating to the File menu and then clicking Edit with Microsoft Office Powerpoint..

Powerpoint Format (Standard Format)

The first step for either format is to save your Powerpoint presentation in your faculty folder on the Falcon Web Server (S:). To save a Powerpoint in standard format on the Web Server follow the steps below...

  1. Once the Powerpoint is prepared, with the Powerpoint (2003) open on your desktop, go to the File Menu, and choose Save As…(In Office 2007, you must click the Microsoft Office Button at the top left of the screen, and then click Save As)
  2. When the Save As dialog box appears, find your faculty folder under the faculty on 'falcon (S:) network drive, name the file descriptively (no spaces), and press Save.
  3. Once the Powerpoint has been saved in your folder create a hyperlink to it on another web page as you would any other file.(see Creating a hyperlink)

NOTE: If a slideshow is saved using the standard Powerpoint format users will not be able to view the slides unless they have the Microsoft Powerpoint software installed on their computer.

How do I make my web pages password-protected?

All faculty are provided a 'limited access' folder found within their Faculty folder on the Falcon Web Server (S:). Web content saved within the gaf (Gordon Access Folder) folder will only be accessible to people at Gordon (Faculty,Staff, and Students) when viewed on the web (Fig 14). See 'Saving files on the Web Server' in this tutorial for additional instruction on saving files in your web space.

image_014
Fig 14

After the desired file has been saved within the gaf folder, create a hyperlink to the file by following the "Creating a hyperlink" section of this tutorial. When a web visitor clicks on this hyperlink, he or she will be required to enter their network username and password.

Additional HELP Resources

The best overall resource to help you create web pages is Microsoft Expression Web's built-in tutorial. Just point to the Help Menu and choose Microsoft Expression Web Help. Search for any topic that you are interested in learning more about. Other resources I recommend are listed below.

  • http://expression.microsoft.com, free video tutorials for the new Microsoft Expression Suite.
  • http://www.w3schools.com/, web-building tutorials, from basic HTML to more advanced topics such as using style sheets and much more.

Contact the author for suggestions, needed additions, etc ...

TROY M. STOUT
Systems Support Specialist II-Webmaster
Information Technology (IC 109)
678. 359. 5907
troys@gordonstate.edu