FrontPage Tutorial

1
FrontPage Tutorial

• FrontPage 2000 has a new, integrated interface
  that lets you create and edit Web pages and
  manage entire Web sites  all within one
  application. All toolbars and menus are
  consistent with Microsoft Office applications and
  can be fully customized.
• Starting FrontPage
•  To start Microsoft FrontPage
• On the Windows taskbar, click the Start button,
  point to Programs, and then click Microsoft
  FrontPage.
• FrontPage opens and displays a blank page ready
  for editing.
•  

2
FrontPage Main Window
3
Creating a HomePage

• The home page is the front door to your Web site.
  Greeting your visitors as you might do in person
  and providing some information about the content
  or subject matter of your site will spark
  interest in the people looking at your site.
• The home page also contains links to the other
  pages in a web Site.
• On the blank page in Page view, type Welcome to
  my Web site! Also using the font attributes
  select font style Heading 1, and then press
  ENTER. Just like in a word processor, pressing
  ENTER puts the cursor on a new line.
• Next, type the sentence This page is used to
  demonstrate the use of the Frontpage HTML Editor
• Press ENTER.

4
To insert a picture on the home page

• The picture files you need to insert can be saved
  to your local drive by loading the URL
  http//www.computing.dcu.ie/jkernan/Courses/front
  stuff.html and placing the mouse over the image
  click the right side of the mouse and then select
  Save Picture As option.
• On the Insert menu, point to Picture, and then
  click From File.
• FrontPage displays the Picture dialog box.
  Because you are editing a page that isn't part of
  a web yet, FrontPage also opens the Select File
  dialog box, which lets you choose a picture to
  insert from your local file system.
• In the Select File dialog box, navigate to the
  folder where you have saved the images, by
  double-clicking until the Look in box displays
  the folder.
• In the folder, several files will be displayed.
  By default, FrontPage searches for picture files.
  
• Click the file which you have saved, and then
  click OK.
• FrontPage inserts the selected picture file on
  the current page. It is a picture of a button
  that your site visitors will be able to click to
  learn more about DCU.
• Press ENTER to create a new line.

5
Create a hyperlink from the button just placed on
the home page.

• On the home page, click the picture of the
  FrontPage 2000 button you previously inserted.
  When a picture is selected, it is shown with file
  handles  eight small squares around the outline
  of the picture. These can be used to resize a
  picture or change its appearance. When a picture
  is selected, FrontPage also displays the Pictures
  toolbar below Page view. The Pictures toolbar
  provides picture editing and formatting tools
• On the Insert menu, click Hyperlink. FrontPage
  displays the Create Hyperlink dialog box. Here,
  you specify the target of the hyperlink you are
  creating. This can be a page or a file in your
  web, on your local file system, on a Web server,
  or on another site on the World Wide Web.
• Because you're creating a hyperlink from a button
  that is labeled DCU" you'll link to the DCU home
  page on the World Wide Web. When site visitors
  click the button in a Web browser, they will be
  taken to the right place.
• In the URL box, type www.dcu.ie immediately after
  the http// prefix that FrontPage has provided
  for you.
• Click OK to finish creating the hyperlink.

6
Insert an animated picture

• Press CTRLHOME to quickly jump to the beginning
  of the current page. - the top left margin on the
  current page.
• On the Insert menu, point to Picture, and then
  click From File.
• This time, FrontPage immediately displays the
  contents of the folder you have used to save your
  images. For the duration of each work session,
• In the Select File dialog box, double-click the
  file name you have given for 2000 image.
• Double-clicking file names is faster than
  selecting each file and clicking OK. FrontPage
  inserts the animated picture of the number 2000
  on the current page.
• Press ENTER to move the welcome text to the line
  below.

7
Center Text and Pictures

• To center elements on a page
• On the Edit menu, click Select All.
• FrontPage selects everything on the current page.
  
• On the Format menu, click Paragraph.
• FrontPage displays the Paragraph dialog box.
  Here, you can change the alignment of selected
  elements, and apply indentation and custom
  spacing for text and graphics.
• In the Alignment list, click Center, and then
  click OK.
• FrontPage centers the text and the pictures on
  the home page.
• Click anywhere on the page to deselect all page
  elements.
• Now, it's a good idea to save your page.

8
Your page should now look like this
9
Save Document

• On the File menu, click Save As. FrontPage
  displays the Save As dialog box. Here, you can
  specify the location for the current page, and
  review or change the page title, the file name,
  and the file type select your H drive and
  directory you want to save your work too.
• Next to the Page title field, click the Change
  button. FrontPage displays the Set Page Title
  dialog box. Here, the default page title is based
  on the first line of text on the current page. A
  title identifies the contents of a page when it
  is displayed in a Web browser. For this tutorial,
  you'll change the page title to something more
  descriptive.
• In the Set Page title box, type Welcome Home
  Page and then click OK. In the Save As dialog
  box, the default file name is based on the first
  line of text on the current page. For this
  tutorial, change the file name to something more
  descriptive.
• In the File name box, change the suggested text
  to homepage, and then click Save. FrontPage saves
  the current page.

10
Page Views in Frontpage

• While creating the home page, you've worked
  exclusively in normal Page view, but there are
  three different ways you can choose to look at
  the current page.
• To display HTML tags on the current page
• In Page view, click Reveal Tags on the View menu.
  FrontPage displays graphical representations of
  standard HTML tags for the current page. This
  display is useful for people who want to know
  where HTML tags are placed while they design
  their pages.To hide the tags, click Reveal Tags
  on the View menu a second time.  When the Reveal
  Tags command is selected, you can view more
  information about many HTML tags by moving your
  mouse over each tag until a ScreenTip appears.

11
HTML View of Current Page

• In Page view, click the HTML tab at the bottom of
  the page.
• This is the HTML code that FrontPage has created
  so far while you were designing the home page.
  Web browsers decode these instructions to display
  the page. The HTML tab in Page view is intended
  for experienced web developers and page designers
  who want to customize the HTML that FrontPage
  creates.
• If you want to set your preferences for the way
  FrontPage will generate HTML code, click Page
  Options on the Tools menu, and then click the
  HTML Source tab. If you're not experienced in
  HTML, you don't need to make any changes here.
  Click Cancel to close the Page Options dialog
  box.
• Click the Normal tab at the bottom of the page to
  return to normal Page view. Using menu commands
  and toolbars on the HTML tab   While working in
  the HTML tab, you can use many menu commands and
  toolbar buttons just like in normal Page view.

12
Preview Tab in Page View

• To preview the current page
• In Page view, click the Preview tab at the bottom
  of the page.
• If you do not have Microsoft Internet Explorer
  installed on your computer, the Preview tab will
  not be displayed, and you will not be able to
  preview your pages this way.
• Looking at your page on the Preview tab is a
  quick and convenient way to see how certain
  elements  including animations, movie clips,
  tables, and lists  will appear in a Web browser.
• When you preview the home page you've created,
  you can see what the animation at the top of the
  page looks like. Each of the four digits rotates
  into place one by one, until the number 2000 is
  displayed. The animation effect will be repeated
  for as long as the current page is previewed or
  displayed in a Web browser.
• Click the Normal tab at the bottom of the page to
  return to normal Page view once again.
• On File menu click Close, to close your file
  homepage.html

13
Starting a New Web

• A web is the collection of a home page and its
  associated pages, graphics, documents,
  multimedia, and other files. Webs are stored on a
  Web server or on a computer's hard drive.
  FrontPage-based webs also contain files that
  support FrontPage-specific functionality and
  allow webs to be opened, copied, edited,
  published, and administered with FrontPage.
• Go to File on the menu bar and go down to New and
  click on Web.
• Click on the one page web icon. Type in the
  location where  you want your web to reside
  locally on your machine. 
• Click on next.
• Your new web will open with a blank page if you
  were in page view when you created the web. 
• You can begin designing your new web. 

14
Insert Image using ClipArt Gallery

• Go to Insert on the menu bar and go down to
  Picture and click on Clip Art.
• The Insert Clip Art Gallery will open. Click on
  the category that you want to use. You can also
  type a keyword in the search for clips box. Hit
  enter.
• Right click on the image you want to use and
  click on insert or click on the insert clip icon.
  
• Your image will appear on your page. (Images in
  Front Page work a lot like text. You can align
  them, put them in a table or click and drag them
  to a location.) You can resize them by clicking
  on the corner handle and moving out to enlarge
  and in to decrease the size.

15
Creating thumbnail image using Frontpage

• If you have a page that is filled with graphic
  images it will most likely take that page a long
  time to download. One way to get around this is
  to create thumbnails or mini versions of the
  image. In this way the visitors can click on the
  thumbnails that they want to view and the larger
  picture will be displayed. The thumbnail is
  actually a hyperlink to the actual image in its
  original size. To turn an image into a thumbnail
  follow these steps
• Click on the image you want to convert to a
  thumbnail.
• Click on the Auto Thumbnail button from the
  pictures' toolbar which is located at the bottom
  of the screen. 
• Your image will automatically convert to a
  thumbnail and it becomes a hyperlink.

16
Making An Image Transparent

• There are times that you insert an image like
  clip art and if you have a colored or textured
  background you get a white box around the image.
  You can make this transparent. You can also just
  make a certain color within the image
  transparent. When you use the transparent tool
  that is built into FrontPage you will actually be
  converting the image to a GIF. This is a file
  format for graphic images. Follow the directions
  below to make your image transparent.
• Click on the image that you want to make
  transparent.
• Click on the transparent icon found on the
  pictures' toolbar on the bottom of the screen.
• A dialog box will open tell you that you will be
  converting the image to a gif. Click on yes
• You mouse now has the transparent tool on it. It
  looks like a pen, move it over the area that you
  want to make transparent and click.

Both images the same except the second has had
the green colour set to transparent
17
You can take any image and bevel it

• It adds a neat dimension to your image. It is
  also a great way to give an image a button
  effect. To create a beveled image follow these
  steps
• Click on the image that you want to add a bevel
  to.
• Click on the bevel button from the Pictures'
  toolbar. 
• Your image will be beveled.

Non-beveled image
beveled image
18
Cropping A Graphic

• You can crop images so that you eliminate
  sections of the image that you do not want to
  display. There is a cropping tool built right
  into FrontPage that allows you to do this. Follow
  these directions for cropping an image.
• Click on an image that you want to crop.
• Click on the cropping tool icon from the
  Pictures' toolbar which can be found on the
  bottom of your screen.
• Your image will now have a dotted line with
  handles around it.
• Click on the handles and drag them until the
  dotted lines are around just the portion of the
  image that you want to display.
• Click on the crop tool one more time to crop your
  image.

Before Cropping
After Cropping
19
Adding Text On A Graphic

• In FrontPage it is very easy to add text on top
  of an image. To do this follow these steps
• Click on the image that you want to add text to.
• Click on the text icon from the Pictures' toolbar
  on the bottom of your screen.
• A text box will appear on your image. Type the
  text you want to add. You can move the text and
  format it like  you would any text box.

Picture Cropped and text added
Original Picture
20
Adding Links to Images or Text

• You can add a hyperlink to both text and images.
  It is a simple task to do.
• Follow the steps below to create a hyperlink.
• 1.Select the text or image that you want to add a
  hyperlink to.
• 2.Click on the Hyperlink icon on the standard
  toolbar .
• 3.The create hyperlink dialog box will open. Type
  in the URL that you want to link to in the URL
  box or use the Look in drop down list to select
  the correct path and file on your local machine.
• 4.Click on OK.
• 5.Your text or image will now be hyperlinked.
  When in the preview mode or after you publish you
  will see that when you click on the text or image
  it will jump to the URL you typed in.

21
To create a email link follow steps 1 2 from
previous page, then select the envelope icon, a
create email link dialog box will open, type in
email address then click OK
22
Creating Bookmarks

• If you have a page that is quite long in length
  you may want to create
• Bookmarks, which allow you to quickly jump to
  certain parts of the page. Another name for
  bookmarks are anchors.
• To create a book mark follow these steps
• Select the text that you will want to jump to.
• Go to Insert on the menu bar and click on
  Bookmark.
• The bookmark dialog box will open. The text that
  you selected will be placed in the bookmark name.
  You can type your own name for this if you wish.
• Click OK.
• When you get to the part of your page that you
  want to hyperlink to that bookmark select it and
  click on the hyperlink icon from the standard
  toolbar.
• Click on the down arrow next to bookmarks. Select
  the bookmark that you want to link to.
• Click on OK.

23
BookMark dialog box.
Select bookmark from drop down list
24
Adding Tables using FrontPage

• Adding A Table
• Adding tables is a very important skill to know.
  Tables become a very integral part of web pages
  especially when you have items such as graphics
  that you want to line up. There are a couple
  different ways of adding tables within FrontPage.
  Follow the steps below to add a table to your
  page
•  Method 1
• Position your cursor where you want the table to
  go.
• Click on the Insert table icon from the standard
  toolbar. Drag down until you have the desired
  number of columns and rows selected.  
• When you click the table will be added to your
  page.

25
Adding Tables Method 2.

• Method 2
• Go to Table on the menu bar and down to insert
  and click on table.
• The Insert Table dialog box will open. Type in
  the number of rows and columns you want to add. 
• Click on OK.
• The table will be added to your page.

26
Adding Tables Method 3

• Method 3
• Go to Table on the menu bar and click on draw
  table.
• Your mouse will turn into a pencil. 
• Click and drag the outside frame of your table.
• Continue using the pencil to add rows and
  columns.
• No Border to tables
• To get rid of the border from a table so that it
  won't display right click inside of the table and
  choose table properties.
• Click on the down arrow next to border size box
  and set the number to zero.
• Click on OK. Your table border will be invisible.
  
•  

27
Table Border Colour

• Adding a singe color border
• Right click anywhere within your table and click
  on table properties.
• Click on the up arrows next to border size to
  increase or decrease the table border's
  thickness.
• Click on the down arrow next to color to choose
  the color for the border.
• Duo color border
• Right click anywhere within your table and click
  on table properties.
• Click on the down arrow next to light color and
  choose a color you want for the top half of the
  table.
• Click on the down arrow next to the dark color
  and choose a color you want for the bottom half
  of the table.
• Click on the arrow next to color and pick a color
  for the border of the table. This will ensure
  that you will have a color for your table when
  people are viewing it with Netscape. The duo
  color border will only show if you are using
  Internet Explorer.

28
This area of the table properties dialog box is
used to adjust the table height, width and
alignment
Single Border colour
Duo Border colour
Here you can select the colour for the table
background, or browse to find an image to use as
table background
29
Merging Table Cells

• Merging Table Cells
• Sometimes when you create a table you may want to
  merge cells together rows or columns. Follow the
  directions below to merge cells in a table.
• Select the rows or columns that you want to merge
  from  your table.  
• Click on the merge cell button from the tables
  toolbar.
• Your cells will be merged.
• Split Table Cells
• Select the cell that you want to split into
  additional rows or columns
• Click on the Split Cell Button from the tables
  toolbar or select Table from the main
  menu, select insert, choose rows or columns
  option.

30

• The following dialog box will appear, select the
  radio button for rows or columns, and the
  location to place the additions cells
• Click OK
• Embedding A Table within a table
• You can also embed a table within a table
• Select the cell into which you want to embed the
  table and use any of the Methods 1 3 shown
  earlier in the tutorial

31
Adjusting Table Height and Width

• Adjusting Table Height and Width see diagram on
  page 28
• Adding Colour to Table Cells
• You can create some pretty unique effects by
  colouring certain cells within your table. To
  colour cells in your table follow these steps
• Select the cells you want to shade. 
• Right click on the mouse and choose cell
  properties.
• Click on the down arrow next to background color.
  
• Choose a color to fill the cell.
• The next slide an example of the Cell Properties
  Dialog box

32
Cell Properties Dialog Box
From here you can change the alignment of the
text within the cell, the number of rows /
columns spanned the height and width of the cell,
the, wrap text, header cell, border colour and
background colour. You should try changing the
various values for the cell properties, and view
the changes to make yourself familiar with what
they do.
33
Creating Frames in Frontpage

• To Create Frames in Frontpage you must open a new
  page,
• Go to file in main menu, select New and click
  Page, this will give you all the templates
  available with Frontpage.
• Select the tab at the top of the template box for
  frames

34
Frames cont.

• From here you can select the framepage layout you
  require, move the mouse over each of the
  templates and you will see a visual image of how
  the frameset will look, as well as a description
  of the frameset.
• Once you have selected the template you desire
  click OK
• The window as shown on the following page will be
  loaded by frontpage showing the various frames
  (depending on the template you have selected this
  layout will vary)
• Each page within the frame allows two options
• To load a file that already exists (Set initial
  page)
• To create a new page from scratch. (new page)
• When working in the frames window you will notice
  that you have to additonal tabs at the bottom of
  your window, which allow you to view the
  additional features of Frames, NO Frames and
  Frame Page HTML this is the actual framepage set.

35
This is the frame template called Banners and
Content
36
Frames Properties

• You can adjust the Frame properties by
• Placing the mouse within the frame that you want
  to adjust the properties, click the right button
  on the mouse and select Frame Properties

This properties box will allow you to set the
frames size the frame margins it also contains
the options for resizing the frame window or
allowing scroll bars, the best way to familiarise
yourself with the various options is change the
values within the properties box and view any
changes made.
37

• Instead of writing a target for each of the links
  within a frame, Frontpage sets a default (base)
  target for each link within the head of the html
  document.
• ltbase target"main" gt
• If on the other hand you wish a link to open up
  in a new browser window(or different frame) you
  can simply edit the html code, by clicking on the
  HTML tag at the bottom of your window and typing
  the target for the individual links, this will
  overwrite the default value. as you have been
  doing writing HTML using Notepad.
• lta href"tabledisplay.html" title "Homepage
  target -blankgtback to homepagelt/agt
• OR
• You can click over the link within the frame and
  select Hyperlink properties and make changes from
  within the Link Properties dialog box.

38
Adding a Theme with Frontpage

• One of the neatest features in FrontPage is the
  capability of adding a theme to your website or
  just a page of your web. A theme is a collection
  of color, styles and images that you can add to
  your pages. The theme consists of bullets,
  background image, buttons, banners, hyperlink
  color, font colors and styles, table colors and
  horizontal lines.
• By adding a theme you automate the process of
  using many of these components. FrontPage has
  many themes to choose from and there are sites on
  the Internet where you can purchase additional
  themes. To add a theme to your site follow these
  steps
• Go to Format on the menu bar and choose Theme.
• The Themes dialog box will open.
• Choose the theme you want to use by clicking on
  it in the left hand pane. A preview of the theme
  will be displayed in the right hand pane.
• I usually put a check next to vivid color, active
  graphics and background picture.
• Click on OK.
• The theme will be added to your page.
• Its best just to try out the various options for
  yourself.

39
Deleting Themes You can delete a theme by going
to Format on the menu bar and click on theme.
Choose no theme from the left hand pane and click
on OK. Your theme will be removed.