FrontPage Tutorial for MM 2003 Rev 3

Administrator

Description

Use of Multimedia in Web Design Using Microsoft FrontPage 2003 Contents Getting Started 2 Text Editing and Lines 4 Hyperlinks 5 Working with Multimedia 7 Graphics 7Sound 8 Video 9Cool Stuff 10 GETTING STARTED Starting Out Open FrontPage by selecting Start, All Programs, Microsoft Office, Microsoft FrontPage 2003. Next choose File, New (don’t use the toolbar icon). The task pane appears on the right side of the screen. A task pane accesses relevant functionalities quicker than by using the menu. (You can make the Task Pane appear or disappear anytime by selecting View, Task Pane.) View the different task panes by clicking the dropdown arrow on the top of the pane. 2 From the New task pane, select Web package solutions. This window will appear: If not already selected, click on the General tab. You might to change the default folder for the web site in the box provided. Replace the default folder name (what's after “…\My Documents\") with: homepage Select the type of web site you want to create. Click Personal Web Site and OK then wait for FrontPage to finish creating the web site for you (Note: To do a web site from scratch, you could have selected One Page Web Site and added more pages as you go.). A web site is created consisting of several linked web pages with topics assigned. 3 ???????????????Note that you are under the Web site tab. You first see ...

Informations

• Publié par: Mothug
• Nombre de lectures: 28
• Langue: English

Extrait

  

Use of Multimedia in Web Design

Using Microsoft FrontPage 2003  

 

 

                      Contents

Getting Started

Text Editing and Lines

Hyperlinks

Working with Multimedia

Graphics

Sound

Video

Cool Stuff

 

 

 

 

 

 

 

 

 2

 4

 5

 7

 7

 8

 9

10

GETTING STARTED

Starting Out

Open FrontPage by selecting Start, All Programs, Microsoft Office, Microsoft FrontPage 2003 . Next choose File, New (dont use the toolbar icon).

The task pane appears on the right side of the screen. A task pane accesses relevant functionalities quicker than by using the menu. (You can make the Task Pane appear or disappear anytime by selecting View, Task Pane .) View the different task panes by clicking the dropdown arrow on the top of the pane.

2  

 

From the New task pane, select Web package solutions . This window will appear:

  If not already selected, click on the General tab. You might to change the default folder for the web site in the box provided. Replace the default folder name (what's after \ My Documents\ ") with: homepage   Select the type of web site you want to create. Click Personal Web Site and OK   then wait for FrontPage to finish creating the web site for you (Note: To do a web site from scratch, you could have selected One Page Web Site and added more pages as you go.). A web site is created consisting of several linked web pages with topics assigned.

3  

 

Note that you are under the Web site tab. You first see some of the files and folders in your web because, at the bottom of the screen, you are in Folders view . Check out the other icons: ƒ   Remote Web site accesses both your local and remote web site (this is first blank because it requires some configuration). ƒ Reports view shows a list of reports for the site. As you construct your web,   this page will be much more useful. From here, you can identify and correct broken hyperlinks, fix large pages that take a long time to load, and address other errors. (If you explore this, use the dropdown list box under the Web Site tab to return to the Site Summary ) ƒ   Navigation lists the navigation arrangement of the site and allows you to change the arrangement. (Note: Later, you can change the sequence of items in your navigation bar from here. Simply, re-order the horizontal order of pages. Also, use this navigation structure to add more pages.) ƒ   Hyperlinks allow you to organize the links in the web pages. ƒ   Tasks provide a grid for inputting tasks you need to complete in your web. Now, let's explore your web site. In Folders view , double click the home page which is called index.htm . Note that a new tab and the corresponding page appear. You can display other pages in your web site in this way. Note the icons at the bottom left of the interface: ƒ   Design view gives you a WYSIWYG editing environment for creating and editing web pages. Most of your time will be spent here. ƒ   Split view lets you split the screen between Design and Code view. Now the developer can see in real time how the HTML will be rendered. ƒ   Code view allows for direct coding of HTML or other scripting languages. ƒ   Preview view shows a "quick and dirty" preview of how the page would appear in a browser. (Unless you use Ctrl-Click, links among pages within your web site won't work here  to test these links, use File, Preview in Browser ) Themes Themes can quickly add color, graphics, and a common layout to your web pages. ƒ   Have a web page displayed. (Note: To change a group of pages to a theme, return to Folders View and select the pages). ƒ   Select Format, Theme from the menu bar; or open the task pane and select the Theme task pane. ƒ   Scroll through the theme selections. Single click the theme to select your choice. At the bottom of the task pane, there are a number of options: ƒ   Vivid Colors enhances the colors of the theme. ƒ   Active Graphics will convert navigation buttons to Java applets that change when the mouse hovers over them. ƒ   Background picture including a repeating background image to the page. Uncheck the box for a plain color background.

4  

Saving a Web It's a good idea to save as you go. (Note on the tab the asterisk after the index.htm indicating that it has not been saved.) Select File, Save to save the current page displayed. (Note the asterisk is gone.) To save all the open pages, choose File, Save All . TEXT EDITING AND LINES Edit your web page as if you were in Word. Header Properties Change the text that goes on the top (title) bar of the window by selecting File, Properties and changing the Title . Click Ok . Next, save the file, go into the browser and open the web page to see the change. Horizontal Lines Horizontal lines can divide sections of text for easy reading. ƒ   Place the cursor on the page where the horizontal line should be added. ƒ   Select Insert, Horizontal Line from the menu bar. To change its properties, right-click the line and select Horizontal Line Properties . Previewing Site Content in a Browser Use the Preview view (button on the bottom of the screen) to view an individual page as if it was online. (You may be unable to easily jump to another page on your web site.) To see the web page most accurately in a browser and check the hyperlinks among its pages, select File, Preview in Browser and choose a browser. HYPERLINKS Creating External Links External hyperlinks are text (or graphics) that can be clicked to bring the user to another web site or file outside the current web page. To create an external hyperlink, follow these steps: ƒ   Highlight the text or graphic that will be the hyperlink and select Insert, Hyperlink from the menu bar (or by clicking the Insert Hyperlink icon.) You can also right-click the text or graphic and choose Hyperlink .   You should see this next:  

5  

    ƒ   If the link will lead to a page within your site, highlight the page on the list and click OK . If it is an external link that will lead to another web site, enter the URL in the Address box . External URLs MUST begin with "http://" or they will not work. For example, to link to the IRMC home page, type " http://www.ndu.edu/ " instead of "www.ndu.edu/". ƒ   Create an e-mail address link by highlighting the text (which should typically be written as the e-mail address) and clicking the E-mail Address button on the left side. Enter the e-mail address in the box provided. If you wish, you can even specify the Subject of the e-mail when it is sent. Click OK on both windows to finish. Bookmarks (Creating Hyperlinks Internal to a Page) Text and graphics can be set as bookmarks (also called "anchors") that can be linked to within a page. Add a bookmark to a page by following these steps: Highlight the text or graphic that will be the bookmark and select Insert, Bookmark... from the menu bar. Enter the bookmark name in the space provided (or use the selected text if any) and click OK .

  Create a link to a bookmark by typing in and highlighting the text that will be the link (or select a graphic). Select Insert, Hyperlink (or click the Insert Hyperlink   button). Click the Bookmark button (or Place in this Document ). 6  

 

Next, choose the appropriate bookmark. Click OK to both windows.

 

WORKING WITH MULTIMEDIA

 

 

Before importing multimedia into your web page, we need to know some multimedia resources:

Google (Image Search) - http://www.google.com/imghp

Alta Vista (Video) - http://www.altavista.com/

Microsoft Online Clip Art - http://office.microsoft.com/clipart/

Frogstar (Sound)  http://www.frogstar.com

Applying Multimedia Technologies: Internet Resources http://members.aol.com/lpang10473/mm_web.htm (Shortcut:  www.lespang.com)  7  

GRAPHICS Note: Here are popular graphic formats on the web: ƒ   JPEG (Joint Photographic Exchange Group) - As a general rule, photos should be saved as JPEGs. This file type consists of 16 million colors. ƒ   GIF (Graphic Interchange Format) - These files contain 256 colors or less and should generally be used for non-photo graphics. ƒ   BMP (Windows Bitmap Image) - A standard format used for storing color or black-and-white images on Windows-based PCs. BMP images can either be compressed or uncompressed. High memory requirements. There are the quick and dirty directions for capturing graphics: 1.   In your browser, bring up the web page which contains the graphic. 2.   Right click the graphic. 3.   Select Copy . Switch to the FrontPage right-click and select Paste . To avoid capturing the hyperlinking (and potentially other) properties of the image: 1.   In your browser, bring up the web page which contains the graphic. 2.   Right click the graphic. 3.   Select Save Picture As . Save it to the Images folder. (Note: Make sure that there are no embedded spaces in the file name. Otherwise, rename the file when you save it.) 4.   In FrontPage, position the cursor to where you want the graphic to appear. 5.   Select Insert, Picture, From File and locate and open the saved file. You can also import clips from the Microsoft clip art collection, use Insert, Picture, Clip Art. You can also use the Clip Art task pane . Picture Properties Use the Picture toolbar to edit the image. If you dont see it, right-click the image and select Show Pictures Toolbar . Some of the key functionalities include: •   Text  add text to the graphic •   Auto Thumbnail  creates a thumbnail that when clicked, loads the original graphic •   Position Absolutely - position images at absolute (exact) locations by using the Position Absolutely button on the Pictures toolbar. Next, drag the image to its desired location. •   Cropping  crop a graphic •   Set the transparent color  allows for making one color of the graphic transparent. Point to the color you want transparent. •   Creating image maps - use the Select and Hotspot (links within images) buttons. On the toolbar, click a shape (rectangle, circle, etc.) and draw the boundary on the image. The Insert Hyperlink dialog box will appear. Specify the link.

8  

SOUND Note: Popular sound formats on the web include: ƒ   WAV (Wave) - A standard audio format for Windows, often used for storing high-quality, uncompressed sound. Requires large amount of memory. ƒ MIDI (Musical Instrument Digital Interface) - A MIDI file doesn't contain   actual audio data, but rather contains commands that let MIDI-capable synthesizers re-create a specific musical passage. ƒ   WMA (Windows Media Audio) - Developed by Microsoft, Windows Media Audio is one of today's most popular 'Net audio formats. Though not as popular as MP3, WMA tends to outperform MP3 in the area of sound quality ƒ   MP3 (MPEG1, Audio Layer 3) - The most popular codec for storing and transferring music. Though it employs a "lossy" compression system which removes frequencies judged to be essentially inaudible, MP3 still manages to deliver near-CD sound quality in a file that's only about a tenth or twelfth the size of a corresponding uncompressed WAV file. Here are the directions for incorporating a sound file: 1.   Using your browser, locate a sound file you like. Try www.frogstar.com    2.   Return to the hyperlink that links to the sound (you will likely use the Back button). 3.   Right-click the hyperlink and select Save Target As . 4.   Save the file to Images folder. Remember the name of the file. 5.   In FrontPage, select from the menu: File, Properties . Click the General tab and locate Background Sound . Click the Browse button to open your sound file. Indicate the number of loops and check or uncheck Forever. Use the Preview icon to hear the sound. VIDEO Note: Popular video formats on the web include: ƒ   MPEG (Moving Picture Experts Group) - a committee that sets international standards for the digital encoding of movies and sound. There are several audio/video formats which bear this group's name. ƒ   WMV (Windows Media Video) - Microsoft's proprietary compression format for motion video, Windows Media Video is used for both streaming and downloading content via the Internet. ƒ   MOV, QT (QuickTime) - a file format for storing and playing back movies with sound. Though developed and supported primarily by Apple, it's also commonly used in Windows systems. ƒ   AVI (Audio/Video Interleaved) - A file format for storing and playing back movie clips with sound on Windows-based PCs. An AVI file is organized into alternating ("interleaved") chunks of audio data and video data. ƒ   ASF (Windows Media Player Streaming File)  Microsoft's compressed streaming file format used with Windows Media Player. ƒ   RAM, RA (RealAudio files)  compressed streaming file format used with Real Networks RealPlayer product. Here are the instructions for incorporating video in your web page: 9  

1.  Using your browser, find a video file. Try the Alta Vista video search engine. 2.   Return to the hyperlink that produces the video (you will likely use the Back button). 3.   Right-click the hyperlink and select Save Target As . You might want to give it a descriptive name but do not change its extension. Save the file in a folder associated with your web pages. Remember the name and location of the saved file (write it down if necessary). 4.   In FrontPage, select from the menu: Insert, Picture, Video . 5.   Choose the file and click OK . 6.   Change its properties by right clicking it and choosing Picture Properties . 7.   Save the file and view the file in your browser. Adding and Deleting a Page Add and delete pages in the Navigation view in order to maintain the pages listed in the navigation bar structure. Switch to the Web Site tab, select the Navigation   icon at the bottom of the screen. •   To add a page, click the New Page icon (upper right hand side of the screen). Right-click the new page and Rename the page. If necessary, drag the new page to the correct position in the page hierarchy. You can double- check if the navigation bar reflects the new page by opening index.htm. •   To delete a page, right-click the page you wish to delete, select Delete, and select either remove from the navigation structure or delete from the web site. Again, check index.htm to see that it is no longer on the navigation bar. Backup Note: To back up a web site, copy the entire web site folder to the back up location. Do not use the File, Save As function. COOL STUFF Marquee (moving banners) - Choose Insert, Web Component and click Marquee for Dynamic Effects component type. Set its properties and see it in Preview view. PowerPoint-like Page Transitions  Choose Format, Page Transitions and select the event, transition effect and duration you wish. Save the file and view the file in your browser. Photo Gallery - Choose Insert, Web Component and click Photo Gallery . Double- click the layout option and add the pictures you want. Flash Movies  Add a Flash Movie by selecting Insert, Picture, Movie in Flash Format . Advanced Capabilities Note: "FrontPage Server Extensions," a set of executable files and scripts, must be installed on the web server for some of these advanced features to work.

10  

Hover buttons (button changes properties when the mouse is over a button)  Select Insert, Web Component and click Hover Button in the Dynamic Effects   component type. Set its properties and view the button in Preview mode. Frames  This allows multiple windows to different web pages. Link Bars  Formerly called navigation bars, these bars create a consistent set of hyperlinks for a group of pages. Shared Borders  This displays information such as company logos, copyright notices and contact numbers that appears on several pages. You can change information in one place and it is automatically updated on every page. Forms  This is for collecting data and storing results in a database, e-mail message, etc. Web Components  you can insert items from MSNBC such as headlines or stock quotes or from Expedia such as maps. Hit counter  counts the number of times the page has been visited. PUBLISHING YOUR WEB SITE (AOL) When you are ready to publish your web site, you will need to copy the files on your local hard disk to your ISPs web server using the File Transfer Protocol (FTP) or some other method that is supported by your ISP. The following steps are for AOL users. Keep in mind that you have 2 MB max per screen name and, with a limit of 7 screen names, constrained to a grand total of 14 MB. Also, it does not support FrontPage server extensions. If you are in FrontPage, save all files and close the program. Start up AOL and login using the screen name corresponding to the location where you wish to store your web pages. Start FrontPage again (this is necessary in order to use the TCP/IP stack which AOL uses). Open the web site you wish to upload. Next, select the upper Web Site tab. Click the Remote Web Site button at the bottom of the screen. Click on the Remote Web Site Properties button on the top right of the window. Under the Remote Web Site tab, click the FTP radio button for Remote Web server type. (Unfortunately, AOL uses only FTP to make file transfers.) For the Remote Web server location, enter: ftp://members.aol.com   

11