SUNY Morrisville-Norwich Campus-

Week13

CITA 130 Advanced Computer Applications II

Spring 2005Prof. Tom Smith

Objectives Introduction to Web Design

Microsoft Office FrontPage 2003

Tutorial 1 – Creating a Web Site

FrontPage 2003 FrontPage is an HTML editor. Other editors include: notepad,

Macromedia Dream Weaver, and even Visual Studio (there are many more…).

You may create a web page by using the design view, code view, or a combination of both.

FrontPage 2003 Contents Folder List- where all files and folders can be

viewed. Document tabs-the tabs show you what files are

open and which one you are currently working on. Quick Tag Selector- allows you to move through

the pages HTML code section headings. Editing Window-the working “palette” for the

current page. This is where your design is done. Page view tabs- allows you to choose between

the views (code/design/both).

FrontPage 2003 Contents Status bar-displays information about the

current page, includes: estimated download time, page size, authoring mode, and browser compatibility.

Toolbars are similar to all other MS products but you will soon see they are slightly different.

Learn what FrontPage is and how it works Microsoft FrontPage is a tool to help you

develop, maintain, and publish your Web sites.

FrontPage lets you: Insert text and graphics Import and export files Add, test, and repair hyperlinks Easily view and manage the entire Web site

There are even templates included to get you started.

FrontPage creates the HTML code While HTML is the language your sites will

be based on, you don't have to know it to create a great Web site.

FrontPage uses a graphical interface that allows anyone with Windows experience to develop Web pages.

It creates the HTML code for you and the Web browser interprets it to display your pages correctly.

FrontPage builds Web sites

A Web site consists of Web pages, files, and folders as well as specific FrontPage server extension support files that all work together so Internet users can view a site correctly.

Web sites can be disk-based or server-based. Disk-based sites can be stored on floppy disks or on a

hard drive Server-based sites have your files and folders stored

on a Web server. These two types of sites are created in an

almost identical way.

Start and exit FrontPage To start FrontPage, click the Start

button, point to All Programs, point to Microsoft Office, and select Microsoft Office FrontPage 2003. The Getting Started task pane allows

you to open a new or existing Web page or Web site

To exit FrontPage, click the Close button in the upper right corner of the program window.

The FrontPage Program window

Creating a Web Site When building a new Web site, you must

first create a folder in which to store the files and folders in the site.

Web Site Templates

Use FrontPage Views Once you have opened FrontPage, the

View menu allows you to use the Folders view, where you can see all the files in your Web site.

The View menu allows you to see your site from different perspectives.

The Folders list shows all the folders and files in the site.

FrontPage Folders view

Open and explore a FrontPage Web site The options on the Views bar give you different

ways of looking at the information in a site and make creating and maintaining the site easy.

To open a Web site, use the list arrow on the Open button and select Open Web.

You can then can use the dialog box that opens to navigate to a folder that contains a Web site. Then click the Open button.

Double-click on index.htm to switch to Page view for that Web site. The Page view is where you create, edit, and format

content The title bar indicates which Web page is open.

Specifying a Browser Version Double-click the Authoring Settings pane

on the status bar. Select Custom from the FrontPage and

SharePoint technologies list arrow. Click the Browsers list arrow, and then

make your browser selection. If necessary, make your selection from the

Browser versions list.

Page Options Dialog Box

Specifying the Page Size Double-click the file for which you wish to

change the default page size. Click the Page Size pane to open a menu

of preset sizes. Select your desired page size in the menu.

Specifying the Page Size

Inserting a File into a Web Page Position the insertion point where you wish

to insert the file. Select File from the Insert menu. Locate and double-click the file you wish

to insert on your Web page.

Spell Checking a Web Page Click the Spelling button on the Standard toolbar

to open the Spelling dialog box. Change or ignore the potentially misspelled words

that are highlighted in the Spelling dialog box. To ignore all instances of a word or to change the

spelling of all instances of a misspelled word, click the Ignore All or Change All button, respectively.

When the spell check feature is complete, click the OK button.

Spelling Dialog Box

Saving a Web Page Two methods:

Click the Save button on the Standard toolbar. Click File on the menu bar, and then click Save.

Formattinga Web Page

Creating a Heading in a Web Page Click anywhere in the

paragraph that you want to format as a heading.

Click the Style list arrow on the Formatting toolbar to display a list of available paragraph format styles, and then click the desired heading style.

Formatting a Web Page Microsoft Office FrontPage 2003 allows you

to format your Web Page similar to how you would format a word processing document in Microsoft Office Word 2003: Align text Use fonts Insert special characters Change font size and color Format Painter

Previewing a Web Page Click the Show Preview View button at the

bottom of the Contents pane.

Printing a Web Page With the page displayed in Design view,

click File on the menu bar, and then click Print.

Select the appropriate printer, set the printer options, number of pages, and properties, and then click the OK button.

Understanding Hypertext Markup Language The name of an HTML tag is enclosed in

angle brackets (<>). Most tags are two-sided.

Opening tag tells the browser to start applying a feature.

Closing tag tells the browser to stop applying a feature.

One-sided tags require only an opening tag. The browser stops applying the formatting

indicated by the one-sided tag when it finishes reading the tag/

Viewing the Web Page in Code View

Split View

Using Meta Tags A meta tag is an HTML tag that includes

information about a Web page, such as the character set, name of its developer, how often the page is refreshed, and the keywords and description of the page’s contents.

The Custom tab of the Page Properties dialog box allows you to insert meta tags.

Using Meta Tags

Getting Help in FrontPage Click the Microsoft Office FrontPage Help

button on the Standard toolbar.

Microsoft Office FrontPage 2003

Tutorial 2 – Working with Graphics

and Hyperlinks

Change the background color of a Web page By default, the background color of all Web pages is

white. Most text and graphics display best on a white

background, but there is little visual interest to that. You can use any of the standard colors or the Web-

safe colors available in the More Colors palette. It is important to emphasize that you select one that

coordinates well with the text color you have selected.

If, after making edits, you find that none of the colors work, you can always change back to the white background.

Change the background color To apply a background color, click the Format

menu and then click Background to open the Page Properties dialog box.

In the dialog box, select the Formatting tab. Click the Background list arrow in the Colors

section to display the Standard Colors chart. Click a color to apply it to the Web page. Click OK to return to the page and see how it

looks. If the color you chose is too dark, the text will be hard to

read and you will have to repeat the process until you find a color that works

The Background tab of the Page Properties dialog box

A Web page with a yellow background

Insert a picture on a Web page Web pages need more than text and navigation

bars to be interesting. Logos, graphics, and photographs can all work

together to make your site attractive and inviting to the user.

The three most widely used file formats for graphics are GIF, JPEG, and PNG: GIF files are small and load fast JPEG files are usually larger than GIF, but are best-suited

for photographs PNG was created as a license-free alternative to GIF

When you save a Web page in which you have inserted a picture, you must be sure to save the picture to the Web site's images folder.

Insert a marquee on a Web page A marquee is an eye-catching graphic that

you can add to a Web page. It's actually a text box that displays a

scrolling message that you create. You can use existing text for the marquee

or add new text. Marquees should be used sparingly

because they can easily overpower a page and distract the Web page viewer.

Add a marquee To add a marquee:

Select the text for the scrolling message or click on the page in the area you want the marquee text to appear

Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box

Click on Dynamic Effects in the Component type list, and then click Marquee in the Choose an effect list

Click the Finish button, and the Marquee Properties dialog box will open

Click OK to activate the marquee You can apply formats and other characteristics to the

marquee using options in this dialog box. You can test the marquee by first saving the page, then

changing to Preview page view.

The Marquee Properties dialog box

Add a picture To add a picture to your Web page, click in

the page where you want the picture to be placed.

Click the Insert Picture From File button on the Standard toolbar.

In the Picture dialog box, click the Look in list arrow to locate the picture and double-click it to insert it on your page.

A Web page with a graphic

Import an existing Web page into a Web site The ability to import existing Web pages into a

Web site can save you the time and effort of re-keying information that's already keyed in and in the proper HTML format.

To import a Web page, be sure the Web site you want to import to is open in the Folders view.

Click the File menu and then click Import. In the Import dialog box, click the Add File button

to open the Add File to Import List dialog box. Use the Look in list arrow to navigate to the HTML

file and double-click it. You will then return to the Import dialog box

where the file's path will display.

Import additional pages You can repeat the process from the

previous slide with the Add File button to include multiple files.

Click the OK button to import the selected file(s) into the open Web site.

The new HTML file will display as a page in the Contents pane.

Once the page is part of the Web site, you can double-click it to open it in Page view and modify it like other pages.

Open an imported page The imported Web page can be opened by

double-clicking on the file name in the Contents pane.

The imported file will have the default white background.

If other files already in the Web site have a theme applied, you should apply the same theme to the imported file for continuity.

View imported pages in Folders view

Create and test hyperlinks to other Web pages Select the hyperlink's location on the current Web

page and then specify the target Web page. You should also create return hyperlinks from each page

you linked to from the index.htm page On all the other pages, you should add a Home hyperlink

to allow the viewer to instantly return to the home page You should test all your hyperlinks in a browser. Click the Preview in Browser button on the

Standard toolbar and the browser will open the selected Web page.

Click the hyperlinks to ensure they jump to the correct target.

Create a hyperlink To create hyperlinks to Web pages:

Select the text that will be the link Click the Insert Hyperlink button on the

Standard toolbar When the Insert Hyperlink dialog box

opens: Click the Existing File or Web Page button Locate the file name in the file list Click the OK button

Create an e-mail hyperlink An e-mail hyperlink allows users to click the link to easily

send a message to the address embedded in the link. FrontPage recognizes e-mail addresses when you enter them

on a page and automatically changes them to hyperlinks You simply enter a mailto or select an object, like a mailbox

graphic, and the link is automatically set. To create an e-mail link, select the text to format as a

mailto, and click the Insert Hyperlink button on the Standard toolbar.

In the Insert Hyperlink dialog box, click the E-mail Address button on the Link to bar.

Type the target e-mail address in the E-mail address text box.

If desired, type an optional subject in the Subject text box . Click the OK button.

A mailto hyperlink in a Web page

Creating an Image Map Click the picture in which to create the hotspot to

select it. Click the button for the desired hotspot shape on

the Pictures toolbar. Click and hold down the mouse button while you

drag the pointer to specify the desired size of the hotspot on the picture, and then release the mouse button. The Insert Hyperlink dialog box opens.

Click the button on the Link to bar to specify the target of the hyperlink, and then specify the target of the hyperlink on the page that opens.

Click the OK button.

Creating a Hotspot

Highlighting Hotspots in a Picture Click the picture that contains the

hotspot(s) to select it. Click the Highlight Hotspots button on the

Pictures toolbar. Click the Highlight Hotspots button again

to turn off the highlights.

Creating a Thumbnail Picture A thumbnail picture is a small picture that

contains a hyperlink to a larger version of the same picture, or to any other target, such as a Web page.

If necessary, insert the full-size picture into the Web page in the desired location.

Select the picture. Click the Auto Thumbnail button on the

Pictures toolbar.

Creating a Thumbnail Picture

Adding Text on a Picture Click the picture to select it. Click the Text button on the Pictures toolbar to

open a text box on top of the selected picture. If necessary, click the OK button to convert the picture to a GIF file.

Type the desired text. If necessary, press the Enter key to start a new line, and format the text as desired.

Click anywhere in the Web page to close the text box.

Text Added on Thumbnail Picture

Creating an Interactive Button An interactive button is a button that displays

special effects to change its appearance depending on how the user interacts with it.

Click the location in the Web page to insert the interactive button.

Click Insert on the menu bar, and then click Interactive Button. The Interactive Buttons dialog box opens.

On the Button tab, select the type of button you want to create. Select the default text in the Text box, and then type the text that you want to appear on the button. Finally, click the Browse button to select the target of the hyperlink.

Creating an Interactive Button If desired, click the Text tab to change the

default font, font style, font size, font color, and alignment of the button.

If desired, click the Image tab to change the button’s size, characteristics, background color, or transparency.

Click the OK button.

Interactive Buttons Dialog Box

Applying a Page Transition A page transition is an animated effect that you

can apply to one or more Web pages in a Web site. With the desired page open in Design view, click

Format on the menu bar, and then click Page Transition to open the Page Transitions dialog box.

If necessary, click the Event list arrow, and then select the desired event.

Enter a value (in seconds) in the Duration (seconds) text box.

Click the desired transition effect. Click the OK button.