Microsoft Front Page

1
Microsoft Front Page
2
Microsoft FrontPage 2003

• FrontPage 2003 provides the features,
  flexibility, and functionality to help you build
  better Web sites. It includes the professional
  design, authoring, data, and publishing tools
  needed to create dynamic and sophisticated Web
  sites.

3
FrontPage 2003 advances your Web Development in
three key areas

• Designing Use enhanced design tools to produce
  better looking Web sites. New layout and graphics
  tools make it easier to design exactly the site
  you want.
• Coding Use design tools to generate better code,
  or expand your code skills. Use built-in
  scripting tools for interactive results. And with
  professional coding tools, you can write code
  faster, more efficiently, and with greater
  accuracy.
• Extending Connect with people and information in
  new ways by building Extensible Markup Language
  (XML) data-driven Web sites using the first
  commercially available, completely WYSIWYG ("what
  you see is what you get") Extensible Stylesheet
  Language Transformations (XSLT) editor.

4
Create a Web Page

• On the File menu, click New.
• In the New task pane, under New page, do one of
  the following
• To create a Web page from a blank page, click
  Blank page.
• To create a Web page from a dynamic Web template
  that youve created, click From existing page,
  locate and click the template, and then click
  Create new.
• To create a Web page from a template included
  with Microsoft FrontPage, click More page
  templates, click the tab for the type of template
  you want, and then click a template.

5
(No Transcript)
6
(No Transcript)
7
Views

• Design allows you to design your Web page
• Split the screen is split between Design and
  Code view
• Code allows you to view and edit the HTML code
• Preview previews what your page will look like

• In the lower left hand side of your screen you
  will notice there are four tabs

8

• Select tabs in lower left corner of display to
  easily switch between views
• Design view (default page view)
• Code view (displays HTML code)
• Split screen with Design and Code views
• Preview page during development

9
Design view
10
Code view
11
Split view
12
Preview
13
Choosing a Background

• Click on the Format menu
• Click on Background
• To use a background picture check the background
  picture box
• Click on Browse and select the file of the
  picture you want
• Check the Make it a watermark box if you choose
• To use just color, click on the drop down menu
  next to Background and choose your color
• You can also change the color of your text by
  selecting a color from the drop down menu next to
  Text
• You can also change the color of any hyperlinks
  by selecting a color from the drop down menu next
  to Hyperlink, Visited Hyperlink or Active
  Hyperlink

14
(No Transcript)
15
Adding and Formatting Text

• Make sure you are in Design View
• Type in your desired text
• Highlight the test you wish to format
• Click on the Format menu
• Click on Font
• Make and changes you wish and click Apply

16
Bulleted and Numbered Lists

• Click on the Format menu
• Click on Bullets and Numbering
• Choose either the Picture, Plain or Numbered
  bullets tab and choose the type of bullets you
  want.

17
Adding Hyperlinks

• Click on the Insert menu
• Click on Hyperlinks
• Enter the Web address or Email address you wish
  to Hyperlink
• Enter the Text you want to display for your
  Hyperlink

18
Loading Images

• Click on the Insert menu
• Click on Picture
• Select what type of image you want

19
(No Transcript)
20
Clip Art
21
Picture from File
22
Word Art
23
Tables

• Click on the Table menu
• Click on Insert
• Click on Table
• Choose the number of Row and Columns
• Choose the Layout of the table
• Choose the table Borders
• Choose Background color and/or picture

24
Interactive Buttons

• Click on the Insert menu
• Click on Interactive Button
• Choose the type of button you want
• Enter the text you want to display on the button
• Enter the link for the button
• Click the Font tab and choose the size and type
  of font for the button
• Click the Image tab to change the size and
  background image of your button

25
Frames

• Click on the File menu
• Click on New
• From the Task Pane click on More Page Templates
• Click on the Frames Pages tab
• Select the Contents frame

26
Frames

• In the right hand frame, click Set Initial Page

27
Frames

• Type in the address of the website or html
  document you want to display in this frame

28
Frames

• In the left hand frame, click New Page
• Design a new Web page of your choice

29
Frames

• Click on File
• Click on Save
• Select a name and save the Web Page (This saves
  only the side which is hi-lited)

30
Frames

• Enter in a filename for the entire Web page

31
Frames

• Click on the Frames menu
• Click on Save Page
• Enter a name for the page that is hi-lited