Creating Webpages with Microsoft FrontPage

1
Creating Webpages with Microsoft FrontPage

• Presented By
• Coach Shockley

2
Opening
Choose, Cancel.
3
Opening
Click on the FrontPage Editor Icon.
4
Creating New Documents
To create a new page, click on the NEW button at
the left-end of the composition tool bar. Note
To open an existing page, click on the FILE
pull-down menu (PDM) and select open page or
click the OPEN folder.
5
Titles Meta Tags

• How to add a title!
• Click on the FILE PDM, then click Page Properties

6
Titles Meta Tags (2)
1
1. Click on General 2. Type the Title 3. Click OK
2
3
7
Titles Meta Tags (3)
How to Add Meta Tags!
1. Click on File PDM, then Click Page
Properties 2. Click on Custom 3. Next to the
bottom white box labeled user Variables, Click
Add 4. For name, type description 5. For value,
type a brief description of your site. 6. Click ok
2
4
5
3
6
8
Backgrounds Colors
2
1. Click on FILE PDM, click Page Properties! 2.
Click on the Background tab 3. Click on the down
arrow right of the Background color box 4.
Select a Color 5. Click OK
3
4
5
9
Backgrounds Images
1
First you will need to be in a Web Browser! 1.
Save a background by right-clicking on the image
and selecting Save Image As 2. Make sure you
save all images in the public_html folder on the
U Drive.
2
10
Backgrounds Images (2)
How do I find background Images! - You can find
free backgrounds on the WEB! - Save a background
by right-clicking on the image and selecting
Save Background As - Make sure that you save
all images in the public_html folder on the U
Drive.
11
Backgrounds Images (3)
2
1. Click on FILE PDM, then Page Properties 2.
Click on the Background Tab 3. Check in the Box
to the left of Background Image. 4. Browse to
find image
3
4
12
Backgrounds Images (4)
1. Once you have clicked on the browse button,
the Select File pop-up window will appear. 2.
Go to your public_html file. 3. Select the
desired background 4. Click OK, Click OK again
1
2
3
4
13
Text Hyperlink Colors Text Colors
2
1. Click on the FILE PDM, click page
properties 2. Click on the Background tab 3.
Click on the down arrow right of the Text color
box 4. Select a color, Click OK
3
4
14
Text Hyperlink Colors Hyperlink Colors
2
1. Click on the FILE PDM, click Page
Properties 2. Click on the Background tab 3.
Click on the down arrow right of the Hyperlink
color box 4. Select a color, click ok
3
4
15
Saving Your File
1
3
2
5
4
3. Browse to your folder on the hard drive. 4.
Type .html after your file name 5. Click Save
1. Click on the FILE PDM 2. Select Save As
16
Previewing the Page
1
1
2
1. Click on the FILE PDM, then click Preview in
Browser 2. The Preview in Browser window
should pop-up. Click Preview.
17
Working With Text Create a Heading

• Type a Heading on the Top of your Page.
• Center the Heading Highlight text and click the
  center button
• Bold the Heading Highlight the text and click
  the B on the Format bar
• Change the Size of the Heading Highlight the
  text and click the large A on the Format bar
• Change the Color of the Heading Highlight the
  text and click Text Color button to the right of
  the Underline button on the Format Toolbar.

18
Working With Text Formatting Text

• Text Styles
• Press enter to move down the page
• Italicize text Highlight some of the text and
  italicize it with the I button
• Underline Text Highlight some of the text and
  underline it with the U button
• Make text Blink Highlight the text and make it
  blink by clicking Format PDM, Font. Select the
  special styles tab. Click in the box next to
  blink.

19
Working With Text Text Spacing

• Type some text.
• Use Enter to start a new paragraph (equivalent
  of a double-space paragraph break).
• Type more Text
• Use Shift-Enter to start a new line without a
  paragraph break.

20
Working With Text Bulleted List

• Click on the bulleted list button near the right
  end of the Format Toolbar.
• Type text
• Press Enter
• Type Text

21
Working With Text Numbered List

• Click the numbered list button next to the
  bulleted list button near the right end of the
  Format Toolbar
• Type text
• Press Return
• Type text

22
Images
1
First you will need to be in a Web Browser! 1.
Save a background by right-clicking on the image
and selecting Save Image As 2. Make sure you
save all images in your folder on the Hard Drive.
2
23
Inserting an Image
1
2
After saving an Image into your folder 1. Click
on the Image Button on the Standard Toolbar 2.
Find your saved image in your folder and click
OK Note You can resize the image by selecting
it, and then dragging it by one of its edges or
corners.
24
Hyperlinks External Links
1

• Type some text or highlight an image
• 1. Click on the Link Button on the Standard
  Toolbar
• 2. Type in (or paste) the URL of the page to
  which you are linking, Click OK

2
25

Highlight the text/image to be bookmarked 1.
Select Edit, Bookmark 2. Enter the name for the
bookmark, click OK 3. Highlight the text/image
you want to link to the bookmark 4. Click the
Link Button on the Standard Toolbar 5. Select the
name of your bookmark from the list at the bottom
of the pop-up window, click OK
1
Internal Links direct people who view your page
to points on the same page. For example, an
Internal Link can link to different sections of
an outline displayed on the web page.
2
3
26
Hyperlinks Mail Links

• Type some Text or Highlight an Image
• Click on the Link Button on the Standard Toolbar
• Click the small Envelope icon to the left of the
  URL box
• Type the complete e-mail address that you want
  linked in the box and Click OK

27
Formatting Hyperlinks
1
4
2
1. Right click on the hyperlink 2. Select
Hyperlink Properties 3. Click the Style button
at the bottom of the box 4. Click the Text tab
at the top of the box 5. Change decoration to
None 6. Click Ok, Click Ok again!
5
6
3
6
28
Tables
1. Click on the Table Button located on the
Standard Toolbar 2. Select the Desired number of
rows and Columns 3. Type text into the
cells Note To change the size of table borders,
color of table cells, etc. Select Table, Table
Properties.
1
2
3
29
Tables Working With Borders
1
1.) Select Table, Table Properties. Then by
clicking on the Drop Down Arrow box next to
each table property. You can 2.) Adjust border
size. 3.) Change background colors. 4.) Change
border colors, etc.
2
3
4
30
Tables Working With Table Cells
1
Select the cell you wish to manipulate. 1.)
Select Table, Cell Properties. Then by clicking
on the Drop Down Arrow box next to each cell
property. You can 2.) Specify Cell width and
height 3.) Change background colors. 5.) Change
border colors, etc.
2
3
4
31
Creating An Image Map

• Image maps allow you to break up a graphic into
  specific parts and create a hyperlink for each
  part.
• The image itself doesnt change, it merely has
  numerous links to enhance navigation.

32
Editing The Image
Click ONCE on the image you wish to edit. The
selected image will be surround by small black
squares. These allow you to resize and shape the
image.
Now, select the rectangle button on the toolbar
at the bottom left hand side of the screen.
33
Drawing The Rectangle
The cursor will turn into a pencil, allowing you
to pinpoint locations.
With your pencil cursor, click on the desire area
and drag the cursor until the rectangle is at the
desired proportions.
34
Inserting The Hyperlink
Insert the hyperlink properties or link to a
file. Click OK Repeat this process with as many
parts of the image you desire.
35
You Now Have Your Own Web Page
Congratulations
WWW.MYPAGE.COM