COSC 109 - Computers and Creativity

How to implement advanced web page features

Video, Sound, Thumbnail Images, Animated Clipart, Using Tables to align several images and text

Basic Note:  Because they’re both Microsoft products, web pages produced with the MS-Expression Web software are sometimes“Best viewed with Internet Explorer.”  Although Chrome and Firefox are great browsers, they sometimes don’t display Expression Web produced pages as well as IE. Prior to submitting your Final Term Project, you should enter your project's URL into the different browsers (Explorer, Chrome, etc.) and check for any problems with appearance and sounds.

Adding Colored Backgrounds and Web Browser Titles to your MS-Expression Web Pages

• Right/Mouse Click anywhere on the Expression Web page.
• From the drop down menu that appears, select “Page Properties”
• In the General tab, if you haven’t already entered a formal web Browser Title for this web page, enter the title now in the “Title” dialogue box.
• To add a color background, select the “Formatting” tab, and choose an appropriate background color.
  • If you choose a dark color background, make certain that you choose light colors for your hyperlinks and text to provide adequate contrast.

 Adding Sound and Background Images to your MS-Expression Web Pages

• Copy all your sound files and background page images to tigerweb (refer to Lab 10 handout if necessary.)
• Right/Mouse Click anywhere on the Expression Web page.
• From the drop down menu that appears, select “Page Properties”

·         For sound: In the page properties’ General tab, “Browse” to the location of your Sound file, select it / Open / OK.

·         For a webpage background image: Go to the page properties’ Formatting tab, click in the Background picture box, Browse to the file location, select it / Open / OK.

Embedding Videos into MS-Expression Web Pages

• You don't need to save videos to your tigerweb folder to embed them into your web pages.  You just need the video's "Embed Code."

• Start MS-Expression Web.  Open the web page on which you'd like to embed a video.

• Position your cursor on the web page where you'd like your video to appear.

• At the bottom of the screen, click the tab for Code.

• You should now be looking at the html code for your web page.  You should also be able to see the blinking cursor where your video will eventually appear.

• Minimize Expression Web

• From the youtube.com page, or from wherever your video is located, copy the embed code for the video.

  • Go to https://www.youtube.com/ and search for an appropriate video

  • Click the "Share" icon

  • Click the "Embed" button

  • Copy the embed code, which should already be highlighted in the embed code dialogue box

• Restore your Expression web page.

• Paste the embed code from the video into the html code of your web page.

• At the bottom of the screen, click the tab for Design.

• Save your web page (might take a few minutes.) 

Chances are pretty good that you'll now see a grey box on your Expression Web page saying "Could not open page . . .".  And if you do a "Preview in Browser" you'll see an error message saying "Cannot display the webpage . . ."  Rest assured that after you save your Expression Web Page, reset your tiger file permissions, and enter the formal URL for the webpage (http://www...) your embedded video should display just fine.

• When you're all done making modifications and saving your web pages:

  • Exit Expression Web, close all browser windows, open a fresh browser window, and reset your Tiger File Permissions.

 After resetting your tiger file permissions, your web pages should appear on the www with the url:   

https://tigerweb.towson.edu/jstude1 (for your home page) or https://tigerweb.towson.edu/jstude1/Finalproject.html to access a page with the filename Finalproject.html

 
Resetting Tiger File Permissions Procedure

To ensure all pages and files have the proper permissions and will show correctly on the www, follow the procedure below:

• Exit Expression Web,

• Close all browser windows,

• Open a new browser window. 

• To reset your Tiger File Permissions, go to https://tigerweb.towson.edu/ , click the button “Go to Tigerweb Portal” log in with your TU username password, and click the button Reset Permissions and then scroll down to select “Sign Out”

• Check your web pages in a new browser window by entering the URL to those pages. You may have to refresh browser windows as you go along.

  You'll need to follow the steps above every time you make the make the slightest changes to any of your web pages!

Sound 

Sound can be used in two ways with your web page. Sound can be played upon visitor command (using a hyperlink) or sound can be played automatically when your page opens. 

Sound playing upon visitor command using a hyperlink: Enter a description (or an image) for your sound and use the FrontPage link tool on the standard formatting bar (the globe with the linked chain). Enter the name of the sound file you would like to reference in the URL text box.

Sound playing automatically when your page opens: Choose File / Properties to access the page properties. Select the General tab. In the middle of the screen you find the entries for Background Sound. Use the Browse button to browse for your sound file. Select the number of times you would like the sound to play or select Forever (sound plays as long as the page is open).
 

Thumbnail images 

A web page containing a large number of images could slow down the loading process of your page. Sometimes it is helpful to display thumbnail images. Thumbnail images are small images that contain a link to the full size image. When a user clicks on a thumbnail image, the full size image will be displayed.  Expression Web provides an easy-to-use tool to create thumbnail images. 

Creating a thumbnail image: Insert your image at the requested location and click once on the image. The Image toolbar appears on the bottom of the screen. Click the Auto Thumbnail icon in the top toolbar and Expression Web creates the smaller image. At the same time  Expression Web also creates the link to the large image for you.

          Animated Clipart

There is a wealth of free animation available on the web. It is recommended to use animated GIFs. GIF is a common format for animated clips on the web and can be displayed by all web browsers . Use the Insert / Picture / From File command (or the  Insert  Picture  From File icon)  to insert animated clipart. When prompted to save embedded files, make sure to answer yes to save all embedded files.

 Some good sites for sound files and clipart

http://www.animfactory.com/	Animated GIFs
www.google.com	Clipart, Sound and Movies
http://www.grsites.com/	Clipart, Backgrounds and Sound
http://www.altavista.com/	Clipart, Sound and Movies

          Using tables to align images and text

Several images and text: To align several pictures and text in a certain way on the screen, web designers often use tables to position the elements exactly where they want. Tables can hold any type of data and can be displayed with or without a border. Simply create a table and place your images and text in the table cells.  It is recommended to create the table using visible borders. Once you are finished creating your table, you can make the borders invisible. Right-click anywhere within the table and choose Table Properties. Set the border size to  Zero and the table borders will not show. 

One image and text: If you have just one image and would like to adjust the text around the image, you can right-click on the image, select Picture Properties and click the Appearance tab. You can position your image 

to the left of the screen and have the text wrap around

to the right of the screen and have the text wrap around

on top of the text and have the text below the image

in the middle of the text and have the text wrap around