New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4

1
Microsoft Office FrontPage 2003

• Tutorial 4 Using Shared Borders and Themes

2
Shared Borders and Link Bars

• The home page in your Web site is called the
  parent page. Pages below the home page are child
  pages.
• A link bar component is a link bar that FrontPage
  maintains and updates automatically.
• A shared border is an area of your page that
  contains content and appears in every page that
  uses it.

3
Adding a Page to the Navigation Structure
4
Renaming a Pages Title in Navigation View

• Right-click the page icon in the navigation
  structure to open the shortcut menu, and then
  click Rename.
• Type the new page title, and then press the Enter
  key.

5
Creating Shared Borders in a Web Site

• If necessary, position pages in the navigation
  structure.
• Click Format on the menu bar, and then click
  Shared Borders.
• Select the option button for applying the shared
  border to all or selected pages, select the
  shared border(s) to add, select the option to
  include navigation buttons if desired, and then
  click the OK button.

6
Shared Borders Dialog Box
7
The Link Bar
8
Deleting a Page in Navigation View

• Right-click the page icon in the navigation
  structure that you want to delete to select the
  page and open the shortcut menu.
• Click Delete to open the Delete Page dialog box.
• Click the Remove this page from the navigation
  structure option button to delete the page from
  only the navigation structure, or click the
  Delete this page from the Web option button to
  delete the page from the navigation structure and
  the Web site.
• Click the OK button.

9
Page Removed from Link Bar Component
10
Creating a New Page in Navigation View

• Right-click the page icon that will be the parent
  for the new page to select it and to open the
  shortcut menu.
• Point to New on the shortcut menu, and then click
  Page.
• Right-click the page icon for the new page to
  open the shortcut menu, click Rename, enter the
  pages title, and then press the Enter key.
  FrontPage will create the Web page using the
  title you entered. To change the default
  filename, change to Folders view, click the
  filename of the new page to select it, type a new
  filename, and then press the Enter key.

11
Disabling Shared Borders for a Single Web Page

• Open the page in Design view.
• Click Format on the menu bar, and then click
  Shared Borders to open that dialog box.
• Click the Current page option button to select
  it.
• Click the Top, Left, Right, and Bottom check
  boxes, as necessary, to turn off the appropriate
• shared borders.
• Click the OK button.

12
Creating a Page Banner

• If necessary, position the page in the sites
  navigation structure.
• Click the location in the Web page where you want
  the banner to appear.
• Click Insert on the menu bar, and then click Page
  Banner.
• Select the Picture or Text option button to
  indicate the type of banner to create.
• Edit the text in the Page banner text box as
  necessary.
• Click the OK button.

13
Page Banner Properties Dialog Box
14
Creating a Custom Link Bar in Navigation View

• Change to Navigation view, and, if necessary,
  display the Folder List.
• Make sure that no page icon is selected in the
  navigation structure, and then click the New
  Custom Link Bar button on the Contents pane.
• Right-click the New Link Bar page icon to select
  it and to open the shortcut menu, type a name for
  the custom link bar, and then press the Enter
  key.
• Drag the filename of the first page you want to
  include in the custom link bar from the Folder
  List and position it in the custom link bar
  navigation structure. Repeat this step to include
  the appropriate pages in the custom link bar.

15
Creating a Custom Link Bar in Navigation View

• Open the page in which to display the custom link
  bar, position the insertion point where you want
  to insert it, click Insert on the menu bar, and
  then click Navigation. Select the Bar with custom
  links option in the Choose a bar type list, click
  the Next button, choose the desired bar style,
  click the Next button, choose the desired
  orientation, and then click the Finish button.
• In the Link Bar Properties dialog box, click the
  Choose existing list arrow and select the custom
  link bar to use in the page. (If your Web site
  has only one custom link bar, then the one you
  created will be selected automatically.)
• Use the Add link, Remove link, and Modify link
  buttons to add new links and delete or modify
  existing links. To move a links position in the
  link bar, select it and then click the Move up or
  Move down buttons to position it in the desired
  location.
• Click the OK button.

16
Link Bar Properties Dialog Box
17
Applying a Theme to a Web Site

• A theme is a collection of design
  elementsbullets, backgrounds, table borders,
  fonts, and picturesthat you can apply to an
  entire Web site or to only one or more specific
  Web pages.
• A Web site with a theme applied to it has a
  consistent appearance because the formatting
  applied by the theme is the same in every page.
• Everything in the page is professionally designed
  to fit together.

18
Applying a Theme to a Web Site

• In Design view, Folders view, or Navigation view,
  click Format on the menu bar, and then click
  Theme.
• Scroll the themes in the Theme task pane to find
  one of interest. If a page is open in Design
  view, clicking the theme temporarily applies the
  theme to the page.
• If desired, select the options for Vivid colors,
  Active graphics, and a Background picture in the
  Theme task pane.
• When you locate an appropriate theme, click the
  list arrow that appears when you point to the
  desired theme. To apply the theme to the entire
  Web site, click Apply as default theme in the
  menu. To apply the theme to the currently
  selected page(s) in Folders, Navigation, or
  Design view, click Apply to selected page(s) in
  the menu.
• Click the Yes button to apply the theme.

19
Web Page with Theme Applied
20
Customizing an Existing Theme

• Click Format on the menu bar, and then click
  Theme to open the Theme task pane.
• Point to the theme that you want to customize,
  and then click the list arrow that appears.
• Click Customize in the menu that opens. The
  Customize Theme dialog box opens.
• Click the Colors button to customize the colors
  used in the theme, click the Graphics button to
  customize pictures and other graphic elements
  used in the theme, or click the Text button to
  customize the fonts and font styles of text
  elements used in the theme.
• When you have finished customizing the desired
  theme elements, click the Save button, type a
  name for the custom theme, click the OK button,
  and then click the Yes button.

21
Customize Theme Dialog Box
22
Deleting a Custom Theme from your Hard Drive

• If necessary, close all open Web sites in
  FrontPage.
• Click Format on the menu bar, and then click
  Theme to open the Theme task pane.
• Locate and click the custom theme in the All
  available themes section that you want to delete.
• Click Delete in the menu that opens.
• Click the Yes button in the message box that
  opens.

23
Creating a New Theme

• In the Theme task pane, click the Create new
  theme link.
• Use the Colors, Graphics, and Text buttons to
  apply the desired formatting to different
  elements of the theme.
• Click the Save button and provide a name for the
  new theme, and then click the OK button.
• Click the OK button to close the Customize Theme
  dialog box.

24
Customize Theme Dialog Box
25
Custom Theme Applied
26
Removing a Theme From a Page or Web Site

• To remove a theme from a Web page, open the page
  in Design view, open the Theme task pane, point
  to the No theme theme in the All available themes
  section, click the list arrow that appears, and
  then click Apply to selected page(s).
• To remove a theme from a Web site, open the Theme
  task pane, point to the No theme theme in the All
  available themes section, click the list arrow
  that appears, click Apply as default theme, and
  then click the Yes button.

27
Creating a Photo Gallery in a Page

• A photo gallery lets you add pictures with
  captions and descriptions to your Web pages.
• Click the desired location in which to add the
  photo gallery.
• Click Insert on the menu bar, point to Picture,
  and then click New Photo Gallery.
• Click the Add button, click Pictures from Files,
  and then browse to and double-click a picture
  file to include in the photo gallery.
• Click in the Caption text box, and then type the
  photos caption.
• Press the Tab key, and then type the photos
  description.

28
Creating a Photo Gallery in a Page

• If necessary, click the Override and use custom
  font formatting option button to enable the
  options to format the caption and description
  using the Formatting toolbar options in the
  dialog box.
• Add more photos and their captions and
  descriptions to the photo gallery as necessary.
• Click the Layout tab, and then select a layout
  for the photo gallery.
• When you are finished adding photos, click the OK
  button.

29
Photo Gallery Properties Dialog Box
30
Web Page with Photo Gallery
31
Drawings, AutoShapes, and WordArt

• A drawing is a canvas object that contains other
  objects, such as text boxes and arrows.
• An AutoShape is a predesigned shape, such as an
  arrow, bracket, square, circle, banner, star, or
  callout.
• WordArt is a text object to which you can apply a
  font, font size, and special effects.

32
Creating a WordArt Object in a Page

• If necessary, select the existing text that you
  will format as a WordArt object.
• Click Insert on the menu bar, point to Picture,
  and then click WordArt. The WordArt Gallery
  dialog box opens.
• Click the WordArt style to use for your text, and
  then click the OK button. The Edit WordArt Text
  dialog box opens.
• Select the font, font size, and font style for
  your text. If necessary, type or edit the text
  for the WordArt object in the Text text box.
• Click the OK button.
• Use the WordArt toolbar to change the color,
  shape, letter height, direction, alignment, or
  character spacing of the WordArt object, if
  desired.
• Use the sizing handles on the WordArt object to
  resize the WordArt object, if desired.

33
Web Page with Word Art Added