Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A.,...

Project 2: Adding a New Web Page to a Web SitePresentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

Last Class

• Front Page Tutorial 1– Front Page is a Web page authoring and site

management program

– HTML uses tags to define characteristics about text, images, hyperlinks and so on

– The WWW is a collection of electronic documents connected to related documents via hyperlinks

– A Web page can contain text, images, sound, video and so on

– A browser is used to access web pages

2

Front003M i c r o s o f t O f f i c e


Project 2

Adding a New Web Page to a Web Site


4

Objectives

• List Web page design criteria

• Add a new Web page to an existing FrontPage Web site and rename the Web page

• Change the title and label of a Web page

• Change the theme and set the background color for a single Web page

• Insert a table in a Web page


5

Objectives

• Merge cells in a table and change table properties

• Undo and redo actions in FrontPage

• Insert a clip art image in a Web page and replace an image

• Copy and paste items in a Web page

• Add a heading and normal text to a Web page


6

Objectives

• Insert a horizontal rule

• Add a link bar and a Photo Gallery component to a Web page

• Print preview a Web page

• Save a Web page with embedded images

• Publish changes to an existing FrontPage Web site


7

Starting FrontPage

• Click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Office on the All Programs submenu

• Click Microsoft Office FrontPage 2003 on the Microsoft Office submenu

• If FrontPage opened a Web site, click File on the menu bar and then click Close Site. If FrontPage opened a Web page, click File on the menu bar and then click Close


8

Opening an Existing FrontPage Web Site• Click the Open button arrow on the Standard

toolbar• Click Open Site• If necessary, when the Open Site dialog box is

displayed, click the Look in box arrow and select the folder location where you stored the Web site for Project 1 (e.g., C:\jkeeler)

• Click the Open button• Double-click index.htm in the Folder List pane


9

Opening an Existing FrontPage Web Site


10

Adding a New Web Page to an Existing Web Site• Click the View command on the menu bar

• Click Navigation

• Right-click the Home Page icon

• Point to the New command


11

Adding a New Web Page to an Existing Web Site• Click Page• When FrontPage

adds the new page to the navigation structure, click View on the menu bar

• Click Refresh


12

Renaming a Web Page

• Right-click the file name new_page_1.htm

• Click Rename on the shortcut menu

• Type photos.htm as the new file name and then press the ENTER key


13

Changing the Title of a Web Page

• Right-click the New Page 1 page icon

• Click Properties• If necessary, click the

General tab• Type Marketing Experience in the Title text box

• Click the OK button


14

Changing the Page Label of a Web Page• Right-click the New

Page 1 page icon• Click Rename• Type Photos in the

edit text box• Press the ENTER key

to save the new label


15

Editing a Web Page in Design View

• Double-click the Photos page icon in the Navigation pane


16

Changing the Theme for a Web Page• Click Format on the menu

bar and then click Theme• Scroll the Select a theme

scroll bar until the No theme selection is displayed in the list

• Click No theme• Click the Theme task

pane Close button


17

Changing the Background Color

• Click Format on the menu bar

• Click Background

• If necessary, click the Formatting tab

• Click the Background box arrow


18

Changing the Background Color

• Click More Colors• Click the indicated

color in Figure 2-27 on page FP 101

• Click the OK button• Click the OK button in

the Page Properties dialog box


19

Inserting a Table in a Web Page

• Click the Insert Table button on the Standard toolbar

• Point to the cell in the third row and third column to select nine squares in the grid

• Click the cell in the third row and third column


20

Merging Cells in a Table

• Click the left cell in the middle row of the table

• Hold down the SHIFT key and click the right cell in the middle row

• Right-click one of the selected cells

• Click Merge Cells• Click the upper-left cell to

remove the highlighting


21

Inserting a Clip Art Image in a Web Page• If necessary, click the upper-left cell of the

table to position the insertion point

• Click Insert on the menu bar and then point to Picture

• Click Clip Art

• When the Clip Art task pane appears, type diploma in the Search for text box

• Click the Go button


22

Inserting a Clip Art Image in a Web Page• If necessary, scroll down

the Results list until an image of a diploma is displayed, or another image of your choice

• Point to the image• Click the box arrow and

then click Insert on the shortcut menu to insert the clip art in the Web page

• Click the Close button on the Clip Art task pane


23

Replacing a Clip Art Image in a Web Page• Right-click the image to be replaced

• Click Picture Properties

• If necessary, when the Picture Properties dialog box is displayed, click the General tab

• Click the Browse button

• Insert the Data Disk in drive A


24

Replacing a Clip Art Image in a Web Page• If necessary, when

FrontPage displays the Picture dialog box, click the Look in box arrow and select the graduation.gif file in the Project2 folder

• Click the Open button• Click the OK button• Resize the replacement

image by dragging the sizing handles to the approximate size shown here


25

Copying and Pasting an Image on a Web Page• If necessary, click the clip

art image to select it• Click Edit on the menu

bar• Click Copy and then click

the upper- right cell of the table to position the insertion point

• Click Edit on the menu bar

• Click Paste


26

Aligning Items on a Web Page

• If necessary, click the clip art image in the left cell to select it

• Click the Align Right button on the Formatting toolbar


27

Adjusting Table Cell Borders

• Point to the cell border between the first and second cell in the top row

• Drag the cell border left, to the approximate position shown in Figure 2-52 on page FP 116, and release the mouse button

• Point to the cell border between the second and third cell in the top row

• Drag the cell border right, toward the left edge of the clip art image, so that the right cell is approximately the same size as the left cell


28

Modifying the Properties of a Table

• If necessary, click one of the cells of the table• Click Table on the menu bar and then point to

Table Properties• Click Table on the Table Properties submenu• When FrontPage displays the Table Properties

dialog box, click the Alignment box down arrow in the Layout area

• Click Center


29

Modifying the Properties of a Table

• If necessary, in the Layout area, click Specify width and click In pixels

• Type 688 in the Specify width text box

• In the Borders area, click the Size box down arrow until zero (0) appears in the Size box



30

Adding a Heading to a Web Page

• If necessary, click the top center table cell to position the insertion point

• Click the Style box arrow

• If necessary, scroll down to Heading 2 in the Style list

• Click Heading 2


31


• Click the Center button on the Formatting toolbar

• Type Marketing Experience in the top center cell

• Press SHIFT+ENTER

• Type Photo Album to enter the remainder of the text


32


• Drag through the text to select it

• Click the Font Color button arrow

• Click the Green button

• Click the second row of the table to deselect the text


33

Adding a Horizontal Rule to a Web Page• If necessary, click the

second table row to position the insertion point

• Click Insert on the menu bar

• Click Horizontal Line• Press the DELETE

key to remove the trailing blank line


34

Adding Normal Text to a Web Page

• Right-click the lower-left cell

• Click Cell Properties

• When FrontPage displays the Cell Properties dialog box, click the Vertical alignment box arrow in the Layout area

• Click Top



35


• If necessary, click Normal in the Style list• If necessary, click the Font box arrow on

the Formatting toolbar and then click Times New Roman

• Click the Align Right button on the Formatting toolbar

• Click the Font Size box arrow on the Formatting toolbar

• Click 2 (10 pt)


36


• Type Point to an image to see a caption in the lower-left cell

• Drag through the entered text to select it• Click the Font Color button arrow on the

Formatting toolbar and then click the Green button in the color palette

• Click the bottom center cell to deselect the text• Click the lower-right cell to position the insertion

point


37


• If necessary, click Normal in the Style list and click Times New Roman in the Font list

• Click the Font Size box arrow and then click 2 (10 pt)

• Type Click an image to see a larger view in the cell


38


• Drag through the entered text to select it

• Click the Font Color button arrow on the Formatting toolbar and then click the Green button in the color palette

• Click the bottom center cell


39

Adding a Photo Gallery Component

• If necessary, click the middle cell in the bottom row of the table to position the insertion point

• Click the Center button on the Formatting toolbar• Click Insert on the menu bar• Click Web Component• When FrontPage displays the Insert Web

Component dialog box, click Photo Gallery in the Component type list


40


• Click the montage arrangement icon in the Choose a Photo Gallery Option list

• Click the Finish button

• If necessary, when FrontPage displays the Photo Gallery Properties dialog box, click the Pictures tab

• Click the Add button

• Click Pictures from Files


41


• Insert the Data Disk in drive A• If necessary, when the File Open dialog box is displayed,

click the Look in box arrow and select the Senior group project.jpg file in the Project2 folder

• Click the Open button• When FrontPage closes the File Open dialog box and

the Photo Gallery Properties dialog box again is visible, click the Caption text box and type Burning the midnight oil working on our Senior group project. in the text box

• Verify that a check mark is displayed in the Maintain aspect ratio check box


42


• Repeat the previous steps for the photos listed in Table 2-2 on page FP 133, typing the associated text for each photo caption

• Click the OK button• If necessary, drag the

table borders to adjust positioning of the text and images


43

Adding a Link Bar Component

• Position the insertion point at the end of the text in the lower-left cell of the table

• Press the ENTER key• Click Insert on the menu bar• Click Navigation• When FrontPage displays the Insert Web

Component dialog box, click Bar based on navigation structure in the Choose a bar type list


44


• Click the Next button• If necessary, when FrontPage displays the

Choose a bar style list in the Insert Web Component dialog box, scroll down, and then click the icon for a graphical style based on the Bars theme

• Click the Next button• When FrontPage displays the Choose an

orientation list in the Insert Web Component dialog box, click the icon to insert the link bar with the links arranged vertically


45


• Click the Finish button

• If necessary, when FrontPage displays the Link Bar Properties dialog box, click the General tab

• Click Child pages under Home in the Hyperlinks to add to page area

• Click Home page in the Additional pages area


46


• Click the OK button• If necessary, drag the cell

borders to adjust positioning of the text

• Click the Preview button and position the mouse pointer over a picture in the Photo Gallery

• Click the Design button


47

Previewing and Printing a Web Page• Ready the printer according to the printer

instructions

• Verify that the Design button is selected

• Click File on the menu bar


48

Previewing and Printing a Web Page• Click Print Preview• Click the Print button

on the Print Preview toolbar

• Click the OK button in the Print dialog box


49

Saving the Web Page and Embedded Images• Click the Save button on the Standard

toolbar

• Click the Change Folder button

• When FrontPage displays the Change Folder dialog box, click the images folder


50

Saving the Web Page and Embedded Images• Click the OK button in

the Change Folder dialog box

• Click the OK button• Click the index.htm

tab to view the Home page


51

Publishing Changes to an Existing FrontPage Web Site• Click the Publish Site button on the Standard

toolbar. Because this Web site was published previously, FrontPage does not display the Publish Destination dialog box, but assumes that you want to publish to the same location

• If prompted, type your user name and password, and click the OK button

• Click the index.htm tab to display the Home page


52

Quitting Microsoft FrontPage

• Click File on the menu bar and then click Close Site

• Click the Close button on the FrontPage title bar


53

Project Summary

• List Web page design criteria

• Add a new Web page to an existing FrontPage Web site and rename the Web page

• Change the title and label of a Web page

• Change the theme and set the background color for a single Web page

• Insert a table in a Web page


54

Project Summary

• Merge cells in a table and change table properties

• Undo and redo actions in FrontPage

• Insert a clip art image in a Web page and replace an image

• Copy and paste items in a Web page

• Add a heading and normal text to a Web page


55

Project Summary

• Insert a horizontal rule

• Add a link bar and a Photo Gallery component to a Web page

• Print preview a Web page

• Save a Web page with embedded images

• Publish changes to an existing FrontPage Web site

FrontPage 2003M i c r o s o f t O f f i c e


Project 2 Complete


Next Class

• Front Page Tutorial 3

57


Questions

58

Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A.,...

Documents

Transcript of Project 2: Adding a New Web Page to a Web Site Presentation by: Joseph H. Schuessler, B.B.A.,...