Document Sample
FrontPage_Tutorial Powered By Docstoc
					                               Northern Kentucky University
                                  Community Education
                               Web Design Certificate Course

Understanding Web Design Basics Using FrontPage—A Tutorial

Sharon Almquist, instructor.

Tutorial Goals
    Understand web design basics using Microsoft’s FrontPage 2000+ as our medium.
    Create a website for a fictional bed and breakfast called The Mermaids Rest Inn located
      in Galveston, Texas.
    Learn how to use FrontPage as a basic What You See Is What You Get (WYSIWYG)
    Throughout the tutorial, there are references to pages in your textbook: The Non-
      Designer’s Web Book. 2nd ed. Robin Williams and John Tollett.
Topics Covered
      Creating a new web
      FrontPage history and commands
      Good web design
      Web file-naming conventions and restrictions
      Entering and formatting text
      Inserting and editing existing text
      Layout and navigation
      Tables
      Creating a template
      Hyperlinks
      Bookmarks/Anchors
      Creating lists
      META tags
      Publishing FrontPage Webs

    Create the homepage, index.html
    Create a website template, template.html
    Create additional pages from the template: about.html, rooms.html, services.html,
      reserve.html, special.html
    Customize about.html, rooms.html

What we will use
   1. FrontPage 2000 or above
   2. Word
   3. Note Pad or Word Pad

    4. Internet connection
    5. Local preview with Internet Explorer and/or Netscape
    6. Graphics and text files provided by the instructor

The Scenario
You met with the client, Ariel Pearl Fish-Bouquet, owner of The Mermaids Rest Inn, to design a
website for the inn.
    1. Ariel wants Glenn Campbell’s song ―Galveston‖ to play when you open up the home
       page. <Answer. Technically easy, but there is a problem with copyright. The song is
       copyrighted and Ariel decides it would be too much trouble to try to get permission.
       Besides, it could become irritating to hear it EVERY time the homepage loads. >
    2. Ariel wants an online form for reservations. <Good idea. The form results will be sent to
       her email account so that she can answer immediately. The form will be on the
       reservations page in the website (reserve.html). You will also add a privacy statement on
       either the reservations page or at the bottom of the form itself indicating how the
       information will be used—a privacy policy. Since the information in the reservation form
       is going to Ariel’s email, it is not secure since email is not secure. When you send form
       results via email whatever security protections that may have been provided by the server
       will be lost. Therefore, the form will collect reservation requests and dates only. Ariel
       will call the client back to get the credit card information to confirm the reservation. >
    3. Ariel wants a page showing the inn’s different rooms. Ariel will take pictures with her
       digital camera and supply you with the digital images in uncompressed (and not web-
       friendly) .tif format. <The rooms will be featured on the ―our rooms‖ page of the website.
       The original pictures will be stored in an original scans/images folder. You will convert
       the .tif to .jpg, a web-friendly format suitable for photographs.>
    4. Colors Ariel does not want: dark green, purple, brown. She would like a nice blue
       background to tie in with the sea motif with good contrast between text and background.
       <White text on a dark background would work.>
    5. Pages should load quickly in 40 seconds or less using a 28.8K modem. <No problem.
       Both FrontPage and Dreamweaver supply an estimated load time for pages. You
       remember that usability expert Jakob Nielsen recommends a download time of 10
       seconds for the homepage at a file size of less than 50K. Faster IS better. In fact our
       homepage will load in 9K over a 28.8 modem, file size 3K with graphics.>
    6. Ariel will supply the content in text files (.txt) and Word (.doc). Can you please spell
       check? <OK. Both WYSIWYG editors provide for spell checking. You will load into a
       folder: …\original text\>
    7. Site should be accessible to visually impaired persons since many of her clientele are
       ―older.‖ <Everyone benefits when the site has good contrasting color between
       background and text as well as alternative text representations (alt text) for graphics.
       Someone might download the site to a PDA. A browser displays the alt text in place of
       the picture. >
    8. Printing. Ariel wants the guest services page to be easily printable. <Printing from
       browsers is terribly unreliable: graphics may not show up, background graphics do not
       print, body text may be cut off at the margins and made hard to read or be printed in a
       color hard to read. We’ll create a separate printer-friendly page with black text on a white

       background. NOTE: we tried printing a sample page with a dark blue background and
       white text on a color printer. The text printed in black.>
   9. Ariel asked if she should include some great photos of her on a nude beach in southern
       France. <You determine that this is not useful to the site’s message and could confuse the
       visitors. It could also get the site possibly filtered out in some public libraries and home
       computers using filtering software.>
   10. Ariel asked if we should link to other external sites, such as the Galveston city page, to
       give clients staying at the inn an idea of what they can do for recreation. <We’ll include
       that as a bottom footnote on the homepage as well as other relevant links on the ―Guest
       Services‖ page. This will be an external or absolute link.>
   11. Ariel wants us to use these pictures her daughter drew of mermaids. Her daughter loves
       The Little Mermaid movie, you know. By the way, can you use the Disney pictures?
       They’re all over the web. <No way! Disney is very protective of its copyrights. You sigh
       over the pictures and turn them over to your graphic artist who makes a few changes,
       then saves them in web-friendly graphics format and creates a logo.)
   12. The client provides you with a photograph of the outside of the inn. It will be scanned
       and prepared for the web. <You decide to place it on the ―about the inn‖ page and not
       overload the homepage.>
   13. All pertinent information for the inn will be contained on the ―about the inn‖ page.
   14. What we don’t need: search function (the site is not so big that things cannot be easily
       located); site index (handled by the navigation, again a simple site); table of contents.
   15. Your web design team and client meet and agree on the site architecture (establish
       consensus). Since this is a fairly small and simple site, you decide what to call each page
       in the navigation. Each name is descriptive. You also agree upon the order in the
       navigation bar.
   16. Ariel approves, in writing, your visual design, which was presented on a computer (72
       ppi) as originally designed in Fireworks. At the final visual design meeting, you will
       present the homepage and an interior page in HTML.
   17. Along the way you meet with usability experts who go over the pages to see how easy
       they are to navigate and understand. You have several people try out the navigation and
       you watch them as they use it. You make notes of what works and what doesn’t and
       figure out ways to make it better.

The Mermaids Rest Inn website Colors and Fonts
To be included in the final site manual. All colors are from the 216 web-safe palette.
   1. Unvisited hyperlink: Light blue (aqua), hex 00,FF,FF. HTML default underlining is
   2. Visited hyperlink: Yellow, hex FF,FF,00
   3. Active hyperlink: default red, hex FF,00,00.
   4. Background: blue, hex 33,00,FF
   5. Body text color: white, hex FF,FF,FF
   6. Body text font: Arial, Helvica, sans serif
   7. Body text font size: default, shown as size 3 or 12 point in FrontPage and Dreamweaver
       and in most browsers unless the size is reset by the user
   8. Footer font size: 2 or -1, generally 10 point. Smaller than body copy. Not as important as
       body copy.

    9. Special announcements font size: 4 or +1, generally 14 point.
    10. Headers: Heading 1, the largest
    11. Site will work with 4.0+ browsers with JavaScript enabled

The spec or outline for the website
Larger sites benefit from a flow chart or storyboards. Here was have an outline of the site based
on meetings with the client.
I. The Mermaids Rest Inn
       A. Homepage
               1. Announcements
               2. Navigational buttons
               3. Logo
               4. External link to the city of Galveston website
       B. About the inn
               1. Photograph of outside of the inn
               2. All pertinent information including address and contact information
               3. Recipe of the week
       C. Our rooms
               1. pictures of rooms and descriptions of each
       D. Reservations
               1. Form
               2. Privacy statement
                        a) Pop-up page in new browser window explaining reservations policies
       E. Guest services
               1. laundry services
               2. phones
               3. fax
               4. computer room
               5. include printer friendly page
       F. Specials
               1. Lists current special rates and dates

The Mermaids Rest Inn website navigation
After much discussion with the client, you set up the navigation for the site. The home page is
created as the entry page to the site. The four other main pages (about, rooms, services, reserve)
are created from a template to ensure consistent design and navigation. All of these pages have a
web-safe blue background.
I. home page (index.html)
    2. about the inn (about.html)
    3. our rooms (rooms.html)
    4. guest services (services.html)-includes a secondary page called servpr.html that is printer-
        friendly and has a white background. We will add content to this page using
    5. reservations (reserve.html)-online reservation form with results sent to email. We will
        compose the actual form in Dreamweaver and prepare it to work with CGI script.

         a. policy.html: pop-up HTML page in new browser window listing reservation
              policies. Uses Dreamweaver behaviors.
   6. specials (special.html)-links from ads on the homepage for highlighted specials at the inn.
      Uses previous page JavaScript to return to any previous page since it may be accessed
      from various points in the website. We don’t want our visitors to rely upon a browser’s
      back button.
   7. External link to Galveston’s homepage for more information about the city.
You will create a template page from the home page, name it template.html, and use it to quickly
and efficiently create the remaining pages in the site. The primary navigation (1-5 above) is
included on each page.

                           The Mermaids Rest Inn Website Map

Introduction to FrontPage
FrontPage is a web-publishing package that assists you in creating, managing, and publishing a
site on the web. It generates HTML and works with Windows. A Macintosh version exists, but it
is not the most up-to-date version and is not, by all accounts, very good. The HTML generated
by FrontPage may be further edited in any other WYSIWYG program, and we’ll do some of this
in Dreamweaver, or with any text editor, such as NotePad.
All toolbars and menus are consistent with Microsoft Office applications and can be fully
customized. You can create a site from scratch, import an already-existing site (it need only be in
html), or use the many web and page templates included with FrontPage. There are a number of
pre-designed, business-ready web themes and color schemes that will provide a constant look
across your entire website. The Microsoft Clip Gallery contains hundreds of pictures, stock
photos, sounds, and animations also available for use. You do not need to know HTML to create
web pages in FrontPage.
FrontPage list price: $149.00. Discounts and educational version available. FrontPage 2002 is
the latest release. It works very much like the 2000 version.
Free FrontPage Express: If you've installed Internet Explorer 4 or 5, you most likely have
FrontPage Express also installed. Start>Programs>Internet Explorer. Click on FrontPage
Express. FrontPage Express is an HTML editor, a "lite" version of the full FrontPage. If you do
not find it using this method, search your hard drive for the program. Oftentimes, it is hidden in a
cabs folder.

       If you cannot find the program on your hard drive, it is available as a free download
       Check out FrontPage Express tutorials at:
IE Effects only: Some of the cool effects you can do in FrontPage will ONLY work in Internet
Explorer; I will point these out.

FrontPage History
FrontPage was originally developed by Vermeer Technologies, Inc., which was purchased by
Microsoft. If you notice vti_ folders, it refers to Vermeer Technologies, Inc. FrontPage debuted
in 1996 with FrontPage 97, then came FrontPage 98, FrontPage 2000, and the most recent
version released in the summer of 2001, FrontPage 2002. FrontPage lists for around $149.00 and
is one of the three most popular WYSIWYG editors along with Dreamweaver from Macromedia
and Adobe’s GoLive.

Web Design
Good web design consists of more than just flashy graphics and colors. Here are a few of the key
points of a well-designed website:
    Focus--group information in a logical order so that content is easy to find. Know your
    Consistency--unify the appearance of buttons, navigation bars, and backgrounds across
        the entire site.
    Efficiency--fast loading pages, small graphics.
    Navigation--Web pages are connected by hyperlinks and are not read in a linear fashion.
        People like to know where they are jumping to and not be surprised. They also need to
        get back easily.
    Portability--HTML is portable. Web pages can be displayed on every major computer
        platform in the world. Avoid restrictions or requirements that limit accessibility. (E.g.,
        frames that some older browsers cannot render.)
    Maintenance--Keep the site fresh and up to date with regular updates. Use a date-stamp
        on your pages. FrontPage supplies a date-stamp, but your web server must have the
        FrontPage Server Extensions installed on it to work. Dreamweaver provides a date-stamp
        that you can add and which will update every time you save the file. (The same is true of
        the date-stamp in Word.)
    Feedback--solicit feedback in e-mail or on a form.

General FrontPage Commands
   To undo an action, Edit > Undo [action], control-Z, or use the Undo or Redo buttons on
     the toolbar. You can undo the last 30 actions.
   To turn auto spell checking on or off. Tools > Page Options. "Check Spelling as you
     type". This check box is a toggle.
   To spell check one word, right-click it.
   There are usually four ways to perform a specific task: menu selection; toolbar button;
     keyboard shortcut; right-click the item and choose the option from the drop-down menu.
     For example, to create a hyperlink, select the graphic or text and:
         o Insert > Hyperlink

           o   Control-K
           o   Right-click, select hyperlink from the drop-down menu
           o   Select the 5th icon from the right on the toolbar
      To select an object’s properties, right-click it and select its properties from the drop-down
       menu; select the object and hit Alt + Enter, or use a command on the menu bar.
      To import your site to your local machine for local edits, File > Import > From Web, type
       in your URL and download the entire site. To re-post the site, open your URL and use
       File > Import to import your site from your local computer back to the web server.
      Shift-enter will give you a line break, a single line. (Insert > Break) HTML code: <br>
      Enter will give you a paragraph break, 2 lines. HTML code: <p>
      There are six headings, 1-6. One is the biggest and six is the smallest. <h1>Heading</h1>
      A website is made up of individual pages coded in HTML, all linked together.

View Options
      Page view - displays the WYSIWYG editor where you edit and design your HTML
       pages. Much like using a word processor. You will spend most of your time in this view.
      Folders view - a split-screen display of the files in your web. The left pane is similar to
       Windows Explorer and is called the Folder List. It shows a hierarchical listing of all the
       folders in your current web. Clicking on a folder in this list displays its contents in the
       right pane. If you drag and drop pages and files within the Folders view, FrontPage
       updates every hyperlink in your web for you. You can select multiple files in this view,
       which you cannot do in the Folder List view.
      Reports view - gives useful information about the pages and files in your web. There
       Will display: site summary, all files, recently added files, recently changed files, older
       files, unlinked files, slow pages, broken hyperlinks, component errors, review status,
       assigned to, categories, publish status, checkout status. Double click on a report to view
       the details. To return to the reports view you must select it from the View menu.
      Navigation view - maps out the site’s navigational structure, much like an organizational
       chart. You can use this view to build your web structure using templates, shared borders
       and automatic navigation bars. Not especially flexible.
      Hyperlinks view – a graphical representation of the hyperlinks connecting your pages
       and files as well as a hierarchical list of the pages in your web. Also indicates the pictures
       on a page and the files.
      Tasks view – keeps track of tasks that need to be completed, and is good for group
      Views Bar - shows the views options.
      Folder list - show the hierarchical arrangement of files and folders in the website. Use
       with Page view. Can be called up from the icon, 5th from the left, on the toolbar. Note:
       you can only select one item at a time in this view. To move multiple items, select the
       Folders view.
      Reveal Tags - reveals the HTML tags within the page editing view. To view and edit the
       complete HTML document, select HTML from the tab at the bottom of the Page view

FrontPage View Tabs
FrontPage displays three tabs at the bottom of the page view screen.

    1. Normal mode – displays all elements included in current page including page elements
       that don’t appear in a browser such as comments and outlines for zero border tables.
    2. HTML mode – displays the html generated for the current page; you can directly edit or
       add to the html code in this mode. FrontPage allows you to enter HTML code it does not
       recognize. This is useful if you are coding special elements, but bad if you mess up and
       enter invalid code. FrontPage will not correct the invalid code for you. (Delete and try
       using the normal mode and FrontPage commands.)
    3. Preview mode – approximates what the current page will look like in a browser.
       Microsoft Internet Explorer must be installed on your machine for this mode to work.
       You cannot edit in Preview mode, switch back to Normal mode for editing.
       Note: The Preview mode may not accurately display all elements. To preview the page in
       a browser, select File > Preview in Browser or use the icon on the toolbar, 7th from the
       left. You may also add other browsers and preview them using this command.
Web File-Naming Conventions & Restrictions
HTML is very strict about file-naming conventions. Be aware of the following rules for naming
your files for HTML, images, and text files.
    Do NOT use spaces in your file names.
                first page.htm would be considered illegal because of the space between first and
                word. It is still usable, but you can run into problems with display and retrieval
                when a server uses % marks to replace the spaces, e.g., first%page.htm,
    Solution: Save files without spaces or use the underscore.
                first_page.htm or firstpage.htm; first_image.jpg or firstimage.jpg
    Avoid capital letters. Use all lowercase letters.
                First_Page.htm will work as a file name but anytime you link to this file you will
                have to remember the correct capitalization. Luckily FrontPage will display all the
                files in your web and you can pick out the correct file. Be aware that many UNIX
                servers are case sensitive.
    Do NOT use illegal characters such as:
                      . (dot) [use only for the extension such as html or htm]
                      " "quotes
                      / or \ forward or backslashes
                      : colons
                      ! exclamation marks
See also your textbook, p. 71.

Creating a New Web
We’ll create a new web or folder on our local hard drive to contain all of the files for the
Mermaids Rest Inn. (See also your textbook, p. 70.) FrontPage makes it easy to work within our
folder or web. It is imperative that we work this way so that our links will remain intact when we
transfer the web from our local computer to a web server.

    1. Open FrontPage. [Start> Programs> Microsoft Front Page]

2. Choose File> New> Web. (You may be prompted for a user name and password
   depending upon your setup.)
3. Select Empty Web. Note the many web templates available to you.
4. Specify the name and location of the new web on the hard drive: c:\Documents and
   Settings\TLC1-11\My Documents\WebDev\your last name\mermaids. Click OK.
   FrontPage creates the folder for you if it has not already been created.
5. You will be presented with an empty web page. If the views bar is on, you will have a
   split screen with the views bar on the far left side showing page view that you are
   currently in. The folder list view is to the right of the views bar and displays the files in
   your website folder when a website is open. The work area is to the right of the folder

    FrontPage 2002, Views Bar on left, Folder List in the middle, work area on right

6. Let’s turn off the views bar so we have more room to work.
7. Close the Views Bar, View > Views Bar, uncheck.

                  8. FrontPage opens with a new_page_1.htm up and ready. Notice the use
                      of the underscores that FrontPage provides to follow our strict HTML
                      file naming conventions.
                  9. Choose File> Save.
                  10. In the Save dialog box that appears, give it the file name:
                      index.html, our home page. FrontPage defaults to the extension
                      .htm so you may need to add the ell (l) to the end of the extension,
11. Just above the file name box notice that the title of the page is defaulting to New Page 1.
    Click the Change button to the right of the file name box to change the page’s title.

     12. Type Mermaids Rest Inn, Galveston Texas. Click OK. Click Save.
     13. We have just saved the home page for the Mermaids Rest Inn as index.html in a web
         folder on our local hard drive and titled it ―Mermaids Rest Inn, Galveston Texas.‖

                      Saving the home page, index.html, in FrontPage 2002

What is the difference between file names and web page titles?
When you save a document, you give it a file name. The file name always must end with the
.htm or .html extension. (In our case, we have chosen .html to be our website’s extension.) Our
home page has the file name index.html.

The web page’s title is different than the file name and is not subject to the file naming
constraints we use for file names. A page’s title should be descriptive and accurate because it
will be displayed in a browser’s title bar and is used by some search engines as the description
for your site. (See also your textbook, p. 72-73.)

What is important about naming your home page index.html?
Most web servers recognize index.html as the default home page. If you type the URL what you really see is even though you
didn’t type it that way. The web server knows to open the index.html file automatically without
requiring the full URL to be typed. The file name default.html or default.asp is also used on
some web servers as the default home page instead of index.html. (See also your textbook, p.
You are not limited to just one index.html in your website. You can have an index.html inside
each folder that represents a category for your site, such as services, reservations, rooms.

What is the difference between the extension html and htm?
Nothing. One is not better than the other. These two extensions indicate that the file is a HTML
file. The three-letter extension, .htm, is a leftover from DOS when extensions were all three
characters. On the Macintosh, .html is most common. Whatever you use, make it consistent
throughout your site. We are using .html for our site.

What happens if I rename files or folders in my website?
In straight HTML, all the links break if you don’t go in to each page and make the change. The
nice thing about using a WYSIWYG editor with built-in file management is that you can rename
files or folders at any time and the program will update all links for you. You can right-click the
file name in the Folder list and select rename from the drop-down menu. When you rename or
move a file or folder within a WYSIWYG editor, it will automatically update all existing links
within the website to that file or folder. In other words, it takes care of the changes for you.

The placement of an underscore in front of a folder name, such as ― _private‖, indicates a hidden
folder in the website. The folders can be displayed by going to the menu and choosing Tools >
Web Settings, selecting the Advanced Tab, and clicking the ―Show Hidden Files and Folders‖
checkbox. Click Apply.

   1. Notice that FrontPage creates two default folders for every new Empty FrontPage Web.
      The folders are named _private and images. The default images folder is where all the
      graphics for the web should be stored. The _private folder means that files in this folder
      will be hidden from web browsers and the FrontPage search component.
   2. We will import all images that we will use in our website. They will be stored in an
      images folder. Since we will be importing an entire folder called ―images‖ we’ll first
      delete the default images folder, which FrontPage created for us.
   3. Select the images folder and hit the delete button. Now single-click on the root or
      topmost folder.
   4. Select File > Import from the menu, then choose Add folder.
          a. Note: if you don’t see import on the menu, click on the down arrows to get it to

           The import dialog box to add files, folders, and web pages. FrontPage 2002

     5. These images were created based on the client’s specifications. Browse to find c:\ …
        WebDesign\Master Files\Mermaids\Images. Select the folder called ―images‖ and single-
        click on it. Click OK twice.
     6. File > Save.
     7. Double-click on the images folder in the Folder List view to open it. You should see all
        your files inside.
            a. If you accidentally imported your images into the wrong folder, you will need to
                move them into the images folder. Correct placement of files affects how their
                links work.
            b. To move the images into the image folders, open the Views Bar. (View > Views
                Bar, click in front of the name to check it.)
            c. Select the Folders view from the Views Bar. Here you can move multiple items at
                once by holding down the shift key and selecting contiguous items (next to each
                other) or using the control key for non-contiguous items.
            d. Turn off the Views Bar. (View > Views Bar, uncheck)

Adding Pictures
Your cursor should be flashing at the top of the screen.

     1. First add the logo. Go to the menu. Insert > Picture > From File.
     2. Make sure you are in the images folder inside of your website in the ―Look in‖ box at
     3. Click on logo.gif in the list of images. Click OK. The header image is inserted into your
        blank web page. With your cursor flashing after the picture, hit Enter.
     4. Let’s add the navigation buttons also stored in the images folder.
     5. Insert > Picture > From File. Select about.gif. OK. Do NOT hit Enter or the space bar.
     6. Insert > Picture > From File. Select rooms.gif. OK. Do NOT hit Enter or the space bar.
     7. Insert > Picture > From File. Select services.gif. OK. Do NOT hit Enter or the space bar.
     8. Insert > Picture > From File. Select reserve.gif. OK. Hit Enter.
     9. Save index.html.

Notice that we did not include a home button on the homepage. This is not really necessary
because it is apparently a homepage. If you do choose to have a button, make it look different so
that visitors are given a visual clue indicating that they are on that page. In the rest of the site, an
inverted graphic will visually show visitors that they are on the specific page. Each additional
page will also have a home button because you always want to go HOME.

Picture Properties (Alternative Text Labels)

     1. Right-click the button labeled ―about the inn.‖ Select Picture Properties. Select the
        General tab. In the text box under ―alternative representations,‖ type about the
        inn. OK.
     2. Repeat for the other buttons. Enter the text found on the graphic in the text box when you
        select Picture Properties.
     3. File > Save.

                            Picture Properties dialog box, FrontPage 2002

   Note: Alternative text labels (known as alt text) allows viewers who have disabled the
   graphics in their browsers, or those with browsers that do not view images, to have a text
   representation of the graphic that would have been displayed. Any links from an image will
   then be available from the text representation. It also serves as an online caption for a picture
   and works with machines for the visually impaired to interpret or read the graphics. (See also
   your textbook p. 133, 184.)

   4. Move to the top of the page. Add alt text to the logo as you did for the navigation
         a. For The Mermaids Rest Inn, right-click the graphic of text and mermaids and in
             the text box type: The Mermaids Rest Inn.
   5. Save index.html.

Entering and Formatting HTML Text

Text Navigation (Footer Links)
We will add a text only navigation system at the bottom of the page that basically repeats the
graphical navigation elsewhere on the page, footer navigation. (The graphical navigation is
usable to people who use screen readers or have their graphics turned off because we added ―alt‖
text to each graphic link.) Later, we will link both the graphics and the text to other pages. Text
links are important for visually impaired individuals using a screen reader or for those who do

are not using a graphics browser or have their images turned off. (See also your textbook, p. 132-
133, 136-137, 141.)

Footer Link Controversy
Like many other web design issues, there is controversy over footer links. Your textbook, p. 133,
recommends the approach as described above. At one time (not too long ago) it was fairly

Currently, usability expert Jakob Nielsen does not recommend re-listing the main navigation at
the bottom of the page because duplicating links could confuse visits and there is no agreement
about what to include there. (Are these links different? The same? What’s the point?)

If you have designed the site properly, all of your picture navigation links contain alt text and are
therefore accessible to screen readers and people who have their graphics turned off. If you
follow Nielsen you would reserve footer links for footnotes such as copyright or contact
information as well as links to external navigation. Limit it to one line in length containing 5-7
links total.

In the case of our website, include the link to Galveston in the footer links. For the sake of this
exercise and learning about linking, we will include the text links in the site.

     1. Single click to the right of the graphical navigation bar. Hit Enter.
     2. Type about the inn, press the spacebar, press Shift+Backslash to insert a pipe and
        press the spacebar again.
     3. Repeat to add: our rooms | guest services | reservations <no pipe at
        the end>
     4. Immediately after reservations, hit shift+enter to create a Line Break.
     5. Type on the new line: Want to learn more about Galveston? And hit
     6. Select all the text links. Format > Font. Choose Arial, size 2.
            a. We’ve set the footer text to display at a smaller size than the default size to make
                it less prominent. For designers using footer links this is standard practice.
     7. Save index.html.

What is the difference between Paragraph Breaks and Line Breaks?
Or, what do I get 2 lines every time I hit Enter?!
Pressing the Enter key creates a single paragraph break known in HTML as the tag for a
paragraph break coded <p>. If you want one line directly below the one you are typing on, then
you need to insert a line break, HTML code <br>, using shift+enter. Most WYSIWYG editors
also have a command such as Insert > Break to insert a line break. (See also your textbook, p.

Beware, a line break does not create a new paragraph so everything you do to the first line(s)
happens to everything in this paragraph. For example, when using line breaks only all the items
affected by the line break will be aligned the same way, center, left, or right.

Centering Pictures and Text
  1. Let’s center our images and text. Control A to Select All. (See also your textbook, p. 106,
  2. Click the Center button on the formatting toolbar. This button looks the same as in many
      word processing programs.
  3. Save index.html.
Adding and Formatting Text
   1. Click to the right of the logo and hit Enter.
   2. Type the tag line: Relax, swim, play at Galveston’s premier bed
      and breakfast inn. Shift Enter for a line break.
          a. Include a tag line on homepages which explicitly summarize what the site or
               organization does. It should be brief, simple, and to the point.
   3. Type: Ariel Pearl Fish-Bouquet, proprietor. Hit Enter.
   4. Type: Check out our $99 a night fall specials.
          a. Why didn’t I use an exclamation point at the end of this sentence? !!! is like
               yelling. According to some experts, ! do not belong in professional writing.
               NEITHER DO ALL CAPS. Not only are ALL CAPS hard to read, they are also
               like YELLING!!!
   5. Select all of the text. Format > Font > Arial. Choose Size 4 (14 pt). Color: light blue, 2nd
      line, 3rd from left. OK.
          a. We’ve set the type size to 4 to make it bigger than the standard default size.

   Defaults: FrontPage's default font size is size 3, 12 point. A visitor browsing your site may
   have his/her web browser set to display size 3 text at 14-point type. We’ve set the type size to
   4 to make it bigger than the standard default size.

   6. With the text still selected, choose centered alignment from the toolbar.
   7. Save index.html.

Specifying Page Properties
It is a good idea to always assign page properties to your web pages. This ensures uniformity
throughout the site. Always select a background and text color even if you want a white
background and black text. The automatic background color may appear white on Windows
machines, but it is really a dull gray and shows as such on most Macintosh machines. Also
remember that items on the web are square or rectangular. We blend images into background
colors to remove the boxes and make them appear to have different shapes. Be aware that a
background image will override any set background color. (See also your textbook, p. 54-55,

   1. If closed, open index.html by double-clicking it in the Folder list.
   2. From the menu, Select Format > Background to assign properties for the current page.
      (You can also set properties under File > Properties.)
   3. Click the Background tab to bring it to the front, if necessary.
   4. We need to change our background color so that it will blend in with the color of our
   5. Click the down arrow to the right of the Colors: Background box.

     6. Click More Colors to display the color palette.

                                      Format > Background

Colors                         More Colors (all web safe)/Color Picker

     7. Click the Select tool and the cursor turns into an eyedropper. Move the properties box out
        of the way so that you can see at least one of the pictures. Click your eyedropper on the
        blue background and click OK. The background color of the page will now match the
        background color of the graphics. Click OK again.

8. Notice the background color is now the same blue as the pictures. The black text and blue
    links are hard to read. Let’s change that.
9. Format > Background.
10. Change the colors of the hyperlinks and text.
        a. Unvisited Hyperlink - select More Colors and then select the 3rd color from the
            left, 2nd row. It is a light blue labeled aqua, hex value: 00,FF,FF. (More about
            Hexadecimal or Hex values later.)
        b. Visited hyperlink - select the yellow in the main colors palette. (First color,
            second row in the standard colors palette.)
        c. Active hyperlink - retain the default (red)
        d. Text: Select White from the Standard Colors. This will give us a good contrast
            with the blue background.

   Note: See the box labeled: Enable hyperlink rollover effects. Click on the Rollover Style
   button. The default is red, bold. Scroll up under Font style and change Bold to Normal.
   These rollover effects will ONLY show in Internet Explorer and are static in other
   browsers. Since most of the Mermaids Rest Inn clientele appear to be using Internet
   Explorer, we’ll use the rollovers. They add another touch of interactivity to the page.

                                   Rollover Style Dialog Box

11. Click OK to close the Properties dialog box. You have just set the properties for the home
    page, index.html. If you were not creating a template for pages in your site, you would
    need to check the properties for each page in the site after you create it. Since we are
    using a template, we will not have to go through this process for each page in our

     12. Save index.html.
     13. Why did the blue 14 point text not change to white?
     14. Preview this page in a browser by selecting File > Preview in Browser. Select IE5.
     15. Notice that the alt text appears when you position your mouse over a picture.
     16. Close the browser and return to FrontPage.
     17. Click on the HTML tab at the bottom of the page to see the HTML code FrontPage has
         written for you then return to Normal mode.
     18. Return to Normal mode and check the download time for this file in the lower right hand
     19. Remember that we promised 40 seconds or less over 28.8. If the download time is not
         favorable, we could reduce the size of graphics or dispense with too many colors.
     20. To change the download time parameter, simply right click on the 28.8 and select another
         load time from the list.

Hyperlink Color Controversy
It’s about time for another controversy. (See also you textbook, p. 22.) The original hyperlink
colors as defined by programmers, not designers or artists, were:
      Unvisited hyperlink: medium blue (blue is a receding color) [HTML link]
      Visited hyperlink: medium purple [HTML vlink]
      Active hyperlink: bright red [HTML alink]

Jakob Nielsen recommends retaining the default colors since most people are used to having
unvisited links blue regardless of your design color scheme. Others recommend changing the
links to conform with your design scheme. In either case, make sure that you assign different
colors to the unvisited and visited hyperlinks so that you visitors always know if they have
followed a link or not.

Inserting and Removing a Background Image
HTML restricts you to only two layers: foreground and background.

You can insert a background image or specify a background color as part of the page properties.
When you insert an image it will repeat or "tile" vertically and horizontally to fill the screen.
Instead of using a solid blue color, you decide that a left border of seashells might look good. A
background image is no different that any other image on your web page (JPG, GIF, or PNG)
except that you insert it using Page Properties. The background image appears on the
background layer of a web page and thus appears behind any foreground images and your
HTML elements. Like other images, a background image downloads to a visitor’s computer only
once. After the first download, it is stored in the cache of the visitor’s computer.

Let’s insert a background image into our homepage, index.html.
    1. Make sure index.html is still open.
    2. Format > Background.
    3. Click the box in front of Background Picture.
    4. Browse. Select backsm.gif from the images folder. Click OK and OK again.
    5. Notice the shells on the left side of the screen. This is your new background.

   Note: The Watermark option will only display in Internet Explorer. It allows the tiled
   background picture to remain fixed as the user moves throughout the page. The tiled
   background does not appear when the page is printed whether the watermark is checked or

   6. Save index.html.
   7. File > Preview in browser. Select either IE or Netscape.
   8. What happened? The background is repeating along the right hand of the screen.
       Interesting effect, but had to manage really well considering all the different resolutions.
   9. Let’s fix this. Close the browser and return to index.html.
   10. Format > Background.
   11. Click the box in front of Background Picture.
   12. Browse. Select back.gif from the images folder. Click OK and OK again.
   13. Save index.html.
   14. File > Preview in browser. Now the shells background will not repeat.
   15. Close the browser and return to FrontPage and index.html.

Explanation: The first background image, backsm.gif, we used was 45 x 790. At only 790 pixels
wide, it could not fill the screen when set to 800 x 600 resolution. (It would be even worse at the
higher resolutions.) It was at least 10 pixels too short so it repeated. The second background
image we used was 2K in file size, but it 1281 pixels wide. The background will not tile on
resolutions up to and including 1280 wide.

Remove the Background
Ariel decided that she doesn’t like the background shells. We need to remove it. You remove it
the same way you added it.
    1. Format > Background.
    2. Uncheck the box in from of Background Picture. The source for the picture is grayed out
       and made inactive.
    3. Click OK and return to index.html.
    4. The tiled background has been removed.
    5. Save index.html.

Creating More Pages
Duplicate Pages; Create a Template
We will now use the work done so far to create the other pages in the site. This is a timesaving
device used by many web designers. Why create each page from scratch and have to set
properties each time? WYSIWYG editors provide a number of ways to create templates. We’ll
use the most simple method that can apply to any editor or when hand coding HTML or
   1.   If necessary, open index.html. File > Save as. Name the new file: template.html.
   2.   Click the Change button and title the page: Mermaids Rest Inn Template. OK. Save.
   3.   FrontPage created template.html, an exact copy of index.html, and closed index.html.
   4.   Select the text Ariel Pearl Fish-Bouquet, proprietor and the tag line and delete them.
   5.   We’ll now reposition the elements in a table.

Dreamweaver Templates
Templates are useful for entire page designs since they can lock in colors, fonts, tables, or
images while leaving other parts of the document editable. You use a copy of a template, not the
original. When you create a template in Dreamweaver you lock certain parts of the page so that
they cannot be changed and leave other parts open to add content.

Inserting and Formatting Tables
There are essentially two uses for HTML tables: (See also your textbook, p. 62-63, 234-235, 245,
    store data in columns
    structure the layout of pages on the web (and get around the constraints of HTML)

You can put nearly anything you might have within the body of an HTML or XHTML document
inside a table cell such as:
     Images
     Text
     Forms
     Headings
     Another table—called a nested table.

Browsers treat each table cell as a window unto itself, flowing the cell’s content to fill the space
but with specified formatting provisions, such as horizontal and vertical alignment.

Tables were introduced way back in Netscape 1.2 as a way to display and organize charts and
data. Artists got a hold of them and made them work as layout devices for custom positioning of
images and text. Tables are made up of columns and rows and each unit is a cell. If you can
make a table in Word, you can make a table in FrontPage. The difference is that each element in
the table will be constrained by HTML, such as cell positioning.

There are basically two types of table sizes:
    Pixel based: the size is restricted to a specific regardless of browser window size
           o Specify width of table in pixels, such as 770 wide
    Percentage based: the size of the table stretches with the width of the browser, meaning
       that its size will vary depending on the shape of the browser window.
           o A 75% wide table will fill three-fourths of the horizontal space regardless of
                browser window size
    Nest a pixel table inside a percentage table or vice versa

     1. Position your cursor at the top of the page by hitting control and home together.
     2. Select, Table > Insert > Table from the top menu bar.

                               Inserting a table in FrontPage

3. Specify 1 row and 2 columns. Alignment: Center. (The alignment default option uses a
   person's default browser alignment setting, which is usually left aligned.) Specify width
   in percentage: 95%. This table will always be 95% wide regardless of the size of the
   browser window. (See also your textbook, p. 128-131.)
       a. Current opinion allows a pixel width up to 770, although a liquid or relative
           (variable) table is also preferred. A liquid table is one that is based on percentage
           of browser window space, such as 80%, rather than an absolute value such as 620
           pixels, which could be 100%, 80%, 60% or whatever based on the visitor’s
           monitor resolution (640x480, 800x600, 1024x768). See also your textbook p. 62-
       b. Caveat images in tables: images in tables are always a fixed width. The images
           won’t change their physical dimensions just because they are placed in a
           percentage-based table. Beware that if you image is bigger than the percentage
           can handle, the image will take precedence and the table will stretch to
           accommodate the image.
4. Specify a border size of 0. We don't want to see a border in the browser.
5. Cell padding (puts white space around the contents of each cell in a table) and cell
   spacing (the space between cells) set at 1 pixel. Click OK.
6. Let’s review a few terms:
       a. Pixel: a picture element that is a method of sizing. Pixels per inch (ppi): the
           number of pixels that occupy one inch on your computer screen. This is based on
           your screen resolution. The standard computer screen has 72 or 96 ppi.
       b. Screen resolution: resolution of computer monitors. Also refers to the size and
           density of the pixels, for example, the current standard resolutions are 640 pixels
           x 480 pixels; 800x600; 1024x768; 1280x1024. It is a good idea to check your
           webs in different resolutions. It is often best to author your web at 800 x 600.
       c. Tip. Create your graphics to around 400 pixels wide. Some graphic designers are
           now creating them at 800 pixels wide.

     7. Notice the dotted lines showing you the outline of the table. You will not see these lines
         in a browser. Delete any extra space above the table if necessary. (Use Control > Home to
         get to the top of the page.) Into the left column of this table, we will insert 5 images
         representing the navigation for our site.
             a. On the homepage we had a lot of room to have the buttons display across the
                 screen, but on each secondary page we want to conserve vertical space, since
                 screens are rectangles we have more horizontal than vertical real estate, and place
                 them at the left side of the screen.
     8. First we will add a button for the Home page, index.html. Position your cursor in the left
         column. Insert > Picture > From File, images folder, home.gif. Shift-enter after the
         picture is inserted.
     9. Insert > Picture > From File (or use the icon on the formatting toolbar, 17th from the left).
         Select, images/about.gif. Shift-enter after the picture is inserted.
     10. Add the remaining navigation buttons, hitting shift-enter after each one to create line
             a. rooms.gif
             b. services.gif
             c. reserve.gif

     11. Set the alt text for each navigation button.
             a. Right-click home.gif. Select page properties, General tab. Type home in the text
             b. Repeat for the remaining buttons.
     12. Single click on the Mermaids text picture to select it.
     13. Click and drag to move it into the right column. Center it if necessary.
     14. Delete the horizontal navigation buttons. Drag your cursor around then to select them all
         together, hit Delete.
     15. Save template.html.

Why Doesn’t a Table Display?
Internet Explorer is rather gracious and will display a table eve if a tag is missing or unmatched.
Netscape is picky and will not. It will display part of a table or only part of a page. This is a
frequent problem with nested tables and Netscape. FrontPage and Dreamweaver take the hassle
out of creating tables that work well.

Repositioning Images
Yes, we could have moved the existing navigation buttons into the left column rather than re-
adding them, but I wanted you to be familiar with the process before we take shortcuts. We did
take a shortcut by moving the Mermaids text into the right column.

Cell Properties
You noticed that when we moved Mermaids text into the right column that it is centered there.
This is the browser default vertical alignment for items in table cells. The horizontal default is
left. You can set properties for the entire table and also for each individual cell.

   1. Right-click the right cell (second column). Select Cell Properties from the drop-down
      menu. In the Cell Properties dialog box, select left for Horizontal Alignment; select top
      for Vertical Alignment. Click OK.

                                      Setting the Cell Properties

   2. Right-click the left cell (first column). Select Cell Properties from the drop-down menu.
      Select left for the Horizontal Alignment; select top for Vertical Alignment. Click OK.
   3. In each individual page, we will modify the navigation to reflect the current page, but
      since this is our template, we’ll leave it as is-generic.
   4. Save template.html.

There are several types of hyperlinks (or links for short):
              Email hyperlinks: launches your visitor’s email application (often Microsoft
               Outlook) and inserts the recipient’s address into the To: field.
              Absolute or external hyperlinks: links to a page external to your website and
               includes the full URL, such as
              Relative or internal hyperlinks: links within your website. The full URL is not
               necessary because the file name is relative to other internal files in your site, such
               as: about.html. If the file is in another folder, such as images, that would be
               included as part of your relative link: images/about.gif. You want to use relative
               hyperlinks because when you upload your site to a web server this is the best way
               to ensure that all links will remain intact.

             Named Anchors, Anchors, Bookmarks are all the same thing. Use them to link to
              sections within a long page of content. There are 2 parts to this kind of link: the
              anchor or the destination and the link.
           Logo as hyperlink. On many sites the logo serves as the link back to the
           See also your textbook, p. 56-59.
FrontPage Note: FrontPage likes to use its own terminology and calls Anchors Bookmarks.
Don’t confuse these bookmarks with those in web browsers used to save URLs (aka Favorites).
Dreamweaver uses the correct HTML nomenclature.

Text Hyperlinks
We will establish the text navigation hyperlinks we typed at the bottom of the page.

     1.   template.html should still be open.
     2.   Type home | in front of the footer text navigation.
     3.   Select the text home.
     4.   While the text is selected, create a hyperlink by selecting Insert > Hyperlink from the
            a. WYSIWYG editors give you several ways to create a link. In FrontPage you may
                also use: the world with chain icon on the toolbar (5th from the right); control-K;
                right-click a word and select Hyperlink from the drop down menu.
            b. Dreamweaver allows you to browse for file within your site or point to file a drag
                and drop method.
     5.   Select index.html from the list of files in our website. Click OK.
     6.   Select the text about the inn.
     7.   Insert > Hyperlink. Double-click in the URL box to overwrite the default http://.
     8.   Type about.html.Click OK. You must type in the file extension in this instance.
     9.   Repeat steps 5-7 to link the text:
            a. our rooms to rooms.html
            b. guest services to services.html
            c. reservations to reserve.html
            d. save template.html

Note: Since we are creating a template BEFORE creating the other pages in our site, we need to
enter in the relative URLs by hand just as we would if working directly in HTML. WYSIWYG
editors allow you to browse and select from a list of files in your website. We selected
index.html since it already had been created. By creating the template and then duplicating it, we
save a lot of time since we will only have to edit links rather than create each page from scratch.
FrontPage Note: FrontPage will create links for you based on specifications you set about the
hierarchical arrangement of your website. FP uses Shared Borders (areas on a web page that
appear at the top, bottom, left or right of every page) and the Navigation View in the Views Bar
to do this. FP 2000+ even knows not to re-link the page you are currently viewing. Again,
FrontPage uses a graphical representation to show both your site’s navigation and how to select
links. These features are fully examined in Community Education’s ―Introduction to FrontPage‖
and ―Advanced FrontPage‖ classes.

Graphic Hyperlinks
Now it’s time to link our graphic buttons to the pages in our site. Create a graphic link the same
way you did a text link. Select the object, then Insert > Hyperlink and specify the relative or
absolute URL.
    1. Single-click on the Home button to select it. (If you double-click it, FrontPage will
       transport you into a picture editor if one has been configured as part of the installation. If
       it tells you that ―No picture editor is configured‖ just click OK and continue.)
    2. Insert > Hyperlink. Double-click in the URL box to overwrite the default http://.
    3. Select index.html from the list of files.Click OK.
    4. Repeat steps 1-3 to link the other buttons:
        a. about the inn to about.html
       b. our rooms to rooms.html
        c. guest services to services.html
       d. reservations to reserve.html
   5. Save template.html

Email Hyperlink

An email link will launch your visitor’s email application and insert the recipient’s address into
the To: field. This is convenient and doesn’t require that the visitor remember complex and long
email addresses. You don’t have to make the actual email address the link. We could have just
made a phrase such as ―contact us by email‖ the actual email link. However, if your visitor can’t
access email this way (the browser is not configured or he/she is using a public access machine
such as in a library), the visitor would have to display the source code for your page to find the
email address. Also just making a name or a phrase such as ―For more information‖ does not tell
the visitor that he/she is going to an email link. Because of this, it is recommended that you
include the email address in the text of your page and make it the email link. (See also your
textbook, p. 58-59.)

   1. Hit Enter before home in our text links and type For more information,
      contact us at
   2. Select all of the text and change if from the default font to Arial.
   3. Select the text Control-C to copy it. Do not deselect.
   4. Control-K to create a hyperlink. Select the Insert e-mail address icon with the envelope
      on it, 3rd from the URL box.
   5. Paste, control-V, the address into the e-mail address box. Click OK. Click OK again.
   6. Notice that FrontPage created the HTML code which puts mailto: in front of the email
          1. <a href=""></a>

Setting up the e-mail address hyperlink in FrontPage 2002. The interface changed from the 2000

External Hyperlinks (absolute links)
    1. Create an absolute or external link. Select the text Galveston.
    2. Insert > Hyperlink.
    3. In the URL box type after the already-provided http://
    4. Save template.html.
           a. Hint: Always set up your hyperlinks and do not make your visitors use the
               browser's back button. The Back button is the most used button on the web.
Note: FrontPage allows you to browse the web to find a site address by clicking on the web
browser button at the end of the URL box. Then copy and paste the address from the browser to
the FrontPage URL box in the Create Hyperlink dialog box.

Using <META> tags
Meta tags are used to define meta data. Meta data is information about a document. (See also
your textbook, p. 286-287.)
The information we put on the page is content. Meta data is information used to describe or
define that content and is used by search engines to retrieve your site.

 Entering <META> tags in the Page Properties
Normally, when a search engine is queried, it will display the first two lines inside the document.
Search engines that support the <META> tag will display the contents of the description. The
description should be a summarization of the site’s primary content.
By filling in relevant terms, phrases, and concepts related to your site, you increase your chances
that people searching for the information or services you provide on your website will find you.
Search engines are case sensitive. It is recommended that you use lowercase keywords because

that is how most users enter search terms. Formal names may be capitalized or entered both in
uppercase and lowercase, such as Texas, texas. Don’t repeat words too often since some
browsers will ignore multiple repetitions and skip over your meta tags as a result.
We’ll add our general meta tags to template.html so we won’t have to enter them in each page.
We can edit the tags if we choose to customize each page.
   1. Open template.html if necessary.
   2. Choose File > Properties and select the Custom tab.
   3. Under User Variables, click Add.
   4. Type "description" as the name and "Enjoy a stay at the beautiful Mermaids Rest
      Inn, a bed and breakfast in beautiful seaside Galveston, Texas." as the content.
   5. Click Add again and type "keywords" as the name and "bed and breakfast, lodging,
      seaside" as the content.
   6. In HTML view, your new tags should look like this:
<META name="description" content="Enjoy a stay at the beautiful Mermaid’s Rest Inn, a bed
and breakfast in beautiful seaside Galveston, Texas.">
<META name="keywords" content="bed and breakfast, lodging, seaside">

Entering <META> tags in HTML
The author <META> tag is used to determine ownership. Let’s enter it using the HTML view.
You could also enter it using the method above.
   1.   In HTML view, insert the cursor anywhere inside of the <HEAD></HEAD> tag.
   2.   Type <META name="author" content="Ariel Pearl Fish-Bouquet">
   3.   Return to Normal view.
   4.   Save template.html.

Creating pages from the template
We will now create the rest of our pages by saving the template page as differently named and
titled pages. We will modify some pages later in Dreamweaver including creating the reservation
form. Duplicating from the template also carrier over our Meta Tags.

about us
   1. In template.html. Select File > Save as. (Make sure it is Save AS not plain Save.)
   2. Type about.html in the File name: text box.
   3. Click the Change button to change this page’s title to: Mermaids Rest Inn About the
       Inn. Click OK and OK again.
   4. The page looks the same, of course, since we simply saved a copy of our template.
   5. File > Close about.html.
our rooms
   6. Open template.html again.
   7. File > Save as.
   8. Type rooms.html in the File name: text box.
   9. Click the Change button to change this page’s title to: Mermaids Rest Inn Rooms. Click
       OK and OK again.
   10. The page looks the same again since we simply saved a copy of our template.

   11. File > Close rooms.html. (Do not select File > Close Web or you will have to reopen the
       entire web by choosing File > Open Web or File > Recent Webs.)
guest services, reservations, specials
   12. Open template.html again.
   13. Repeat steps 7-12 to create the last two main pages plus the special pages in our website.
           a. services.html – title: Mermaids Rest Inn Guest Services
           b. reserve.html – title: Mermaids Rest Inn Reservations
           c. special.html -- title: Mermaids Rest Inn Specials
   14. Make sure all files are closed.
   15. Look in the Folder List on the left side of the screen. (If the Folder List is not on, click on
       the 5th button from the left on the toolbar.)
   16. Notice that the new pages have been created.
   17. Single-click once in the Folder List.
   18. View > Refresh. This will put the pages in alphabetical order in the Folder List.

Inserting Pictures and Existing Text in about.html
   1. Double-click about.html in the Folder List to open it.
   2. Position your cursor after the Mermaids logo, but don’t select it, and hit Enter to create a
       paragraph break.
   2. Insert > Picture > From File. Select inn.jpg. OK.
           a. Add the alt text for the picture of the inn. Right-click the picture, select Picture
               Properties, General Tab, type: The Mermaids Rest Inn outside view
               in the text box.
   3. Hit Enter after the picture of the inn.
           a. If the inn disappears after you hit Enter, it means that you had the picture selected
               (square handles around the picture mean that it is selected) and that you deleted it
               when you hit Enter.
           b. Choose Edit > Undo from the menu to restore the picture and make sure your
               cursor is to the right of it when you hit Enter.
   3. Type: about the inn. It should be centered, keeping the alignment of the graphic
       above it. If it is not centered, center it using the center icon on the toolbar.
   4. Select the text, assign it a heading of 1, the largest. Remember that our site specifications
       said that main headings are assign the HTML Heading 1, the largest.
   5. Hit Enter to create a paragraph break.
   6. Restore left alignment by selecting the left align button on the toolbar.
   7. Type: The Mermaids Rest Inn is located at 10114 Mermaids Rest
       Way in Galveston, Texas.
   8. Hit Shift-Enter to create a line break and type: You may reach us by phone at
       800-555-1212; Fax 800-555-6767; email
   9. Select and create an email hyperlink.
   10. Hit Enter after the second line ending with the email link.
   11. Save about.html.
   12. File > Open. Select ..mermaids/text folder. Make sure the Files of type: box reads All
   13. Select companyinfo.txt.

14. FrontPage will open this txt file in NotePad, a text editor, as a new window.
        a. If it does not open it in NotePad, minimize FrontPage.
        b. Start > Programs from the Taskbar. Select Accessories, Select NotePad.
        c. File > Open, select companyinfo.txt
        d. Continue to step 15.
15. Control-A to select all the text in the NotePad document. Control-C to copy it.
16. Click the close button (the X in the upper right hand corner) to close NotePad.
17. Return to FrontPage and about.html, control-V to paste the copy into our web page.
18. Select the sentence We are open 365 days a year. and bold (B) and italicize (I) the
    text using the corresponding features on the formatting toolbar.
19. Select all of the text, open the Font dialog box by selecting Format > Font from the menu.
    Select Arial.

                                  Format > Font, dialog box

20. Save about.html and leave it open.
21. File > Open, bodycopy.html. Here is some text that was converted into HTML.
22. Control-A to select all of the text in bodycopy.html. Control-C to copy it.
23. Use Window on the menu to move back to about.html.
24. Hit Enter to create a paragraph break after the last word, year.
25. Control-V to paste our copy into the new paragraph.
26. If the copy appears to be centered, click and drag to re-select it and specify left alignment
    using the left align tool on the toolbar. Without deselecting the text, check the font. If it is
    not the default font, reset that as well.
27. Set the font to Arial using the formatting toolbar, which should read: arial, normal.

     28. Save about.html

The Font Dilemma (See also your textbook, p. 224-228; 257.)
It is important to remember that not all computers will display all fonts. Just because you have a
font on your computer does not mean that visitors to your website will have it as well. If you use
a font that is not on the visitor’s computer, his/her browser will use its default font, which is
usually some flavor of Times. All HTML text has a default size of 3, which is generally, though
not always, 12 point.

You can happily use the default font and size for body copy text and the visitor’s defaults will
appear, which is probably the typeface and size he/she likes to read anyway. This allows
flexibility for the visitor in reading body copy. Some developers choose to specify sans-serif
fonts, such as Arial, because studies indicate that sans-serif fonts are easier to read on the screen
than serif fonts because the resolution of monitors is not as good as print and the little serifs can
become difficult to read. Serif fonts are considered better for printed copy.

The design of your pages should never be dependent on the HTML text being a specific font and
size because it will look different on different machines. To use a special font, create a graphic
and insert the graphic.

When listing HTML fonts, include a list of typefaces acceptable to most machines. Separate the
different fonts by commas. The web browser checks the visitor’s fonts and applies the first one
in the font tag that it finds on the local computer. It’s a good idea to end your list with ―serif‖ and
―sans-serif‖ for UNIX users.

FrontPage doesn’t allow selection of more than one font from its menus although you can add
them directly to the HTML. Dreamweaver allows the insertion of groups of fonts such as: ―Arial,
Helvetica, sans-serif‖ or ―Times New Roman, Times, serif.‖

The HTML for listing fonts looks like this:
<font face=‖Georgia, New York Times New roman, serif‖>Mermaid Room </font>

Customizing the about the inn page (You are here!)
  1. How do we tell visitors that that we are on the about the inn page other than just adding a
  2. In about.html we will need to unlink the graphic and text to about.html. It is confusing
     and just not good form to re-load the page you are on.
  3. Single-click on the button graphic ―about the inn.‖
  4. Insert > Hyperlink.
  5. The link is highlighted in the URL box. Hit Backspace to erase it. Click OK.
  6. Make sure the button ―about the inn‖ is still selected. Hit Delete.
  7. Insert > Picture > From File. Browse the Images folder and double-click on aboutsel.gif
     to insert the inversed button indicating that you are on the ―about the inn‖ page.
     a. Add the Alt text.
  8. Select the text link for about the inn. Insert > Hyperlink. Hit Backspace to erase the link
     from the URL box. Click OK.

   9. Save about.html.
   10. File > Preview in Browser. Make sure that the links to ―about the inn‖ have been
           a. The hyperlink hand should not appear when you move your cursor over the
           b. The text link should no longer be underlined.
   11. Close the browser and return to FrontPage.
   12. Changing the table and cell properties. You can color the background of an individual
       table cell for effect. You change the properties of that cell as well as the properties of the
       entire table.
   13. Change the table properties first. Right-click inside the table and select Table Properties.
       Set the width to 100% of the browser window, horizontal alignment: Left. Cell padding:
       5. Cell spacing: 5. This basically gives 10 pixels width between border and text so that
       the text does not run right up against the buttons. Click OK.
       a. We have just changed this table into a relative or liquid format to fill 100% of any
           browser window.
   14. Set the cell properties. Right-click the left cell (first column) and select Cell Properties.
   15. Background. Color: Navy. Layout: Horizontal alignment: Center (to center the
       navigational buttons in the cell).
   16. Specify width at 20%. Click OK.
   17. Right-click the right cell. Set the width to 80%. Just because we changed the table to a
       liquid format (percentage-based) does not mean FrontPage will change the individual
       cells’ widths to accommodate that change. Click OK.
   18. Click the Preview tab at the bottom of the screen. Notice that the left cell or column is
       now navy with the buttons centered in it. Return to Normal mode.
   19. Save. If you like the look, do it on all of the pages except the homepage. If not, then you
       will need to reset the table and cell properties to the template default.

Create Lists
Ordered, unordered, and definition lists. These are HTML terms that refer to whether the list is
formatted with a bullet, an indent, Roman or Arabic numerals. You can generate a list either
from existing text or from scratch.

Insert a Word document into HTML, Create bulleted and numbered lists
   1. Hit Enter after the last paragraph.
   2. Type Recipe of the week. Select the text. Bold it. It should be left aligned. Hit
   3. Insert > File. Select eggsMonty.doc from the … mermaids/text folder. Make sure All
       Files is selected in the Files of Type box. Click Open.
   4. The entire contents of the Word file, eggsMonty.doc, are inserted into about.html.
   5. Save about.html.

Using Insert > File will insert the full text of the Word document into your FrontPage document.
Using this method, instead of copying and pasting from Word, will eliminate formatting
problems and delete the special code Word uses to format and display documents in Word, but
which is wholly unnecessary in an HTML document.

                                      Insert > File dialog box

     6.  Left align the entire recipe if necessary.
     7.  If any of the text is black, select it and make it our body text color white.
     8.  Format > Font. Color.
     9.  Select the text from 2 6 1/2 ounce jar artichoke pieces in water
         through Sour cream.
     10. Format > Bullets and Numbering.
     11. Select the Plain Bullets tab. Select the square bullets. Click OK.
     12. In the paragraph below describing how to make the dish, hit Enter after each period.
     13. Select all the sentences.
     14. Format > Bullets and Numbering.
     15. Select the Numbers tab. Select Arabic numerals. Click OK.

                                               Format > Bullets and Numbering, FrontPage 2002

   16. Save about.html.
   17. You have just created a bulleted and numbered list.
   18. The HTML looks like this:

<ul type=”square”>=unordered or bulleted list with square
     <li> list item </li> close list item. Frequently the </li>
     closing tag is omitted in basic HTML, but it is required in
     XHTML. FrontPage and Dreamweaver add it for you.
</ul> Closes the unordered list.

Create a definition list
You can display definitions and terms in a definition list format. Generally, the term is
positioned flush left, and its definition is indented. The exact formatting of the list depends on
the web browser being used. Following is an example of a definition list:
Term A
      This is the definition for Term A.
Term B
      This is the definition for Term B.

   1. Hit Enter twice after #8 in the list to close the list. (FrontPage inserts the list close
      command in the HTML.)
   2. In the Style box, click Defined Term, type the first term in the list, The Mermaids
      Rest Inn Enter.
   3. The next line is automatically formatted with the Definition style.
   4. Type the term's definition, Bed and Breakfast, Galveston, Texas. Enter.
   5. Hit Enter again to finish the list.
   6. Save about.html.
   7. The HTML looks like this:
<dl>=definition list
      <dt>=definition term: The Mermaid’s Rest Inn</dt>
      <dd>=definition: Bed and Breakfast, Galveston, Texas.</dd>

Inserting Horizontal Lines (aka Rules) Caution: Do NOT overuse.
Horizontal lines were originally called Horizontal Rules and the HTML code for them is <hr>,
which does not require a closing tag. (See also your textbook, p. 114.)
   1. Hit Enter after …365 days a year.
   2. Select Insert > Horizontal Line from the menu.
   3. Right-click the horizontal line and choose Horizontal Line Properties from the drop-down
   4. Note that the width, height, alignment, and color of the line can be changed. Select a
       width of 75 percent of window, a height of 3, alignment center, color light blue (aqua)
       from Document Colors, and click OK.
   5. If the insertion caused an extra line below the HR, delete it.
   6. Save about.html.

   7. File > Preview in Browser.
   8. Close the browser and File > Close about.html.
Note: Color changes will only appear in Internet Explorer.

                              Horizontal Line Properties Dialog Box

Customizing the our rooms page (rooms.html)
  1. Double-click rooms.html in the Folder List to open it.
  2. Position your cursor after the Mermaids graphic, but don’t select it, and hit Enter to
      create a paragraph break.
  3. Type our rooms. It should be centered, keeping the alignment of the graphic above it.
      If it is not centered, center it using the center icon on the toolbar.
  4. Select the text, assign it a heading of 1, the largest. Hit Enter to create a paragraph break.
  5. Type: Check out our Specials. Change the font to Arial, size 4.
  6. Select the text and link the sentence to special.html.
  7. How do we tell visitors that that we are on the our rooms page other than just adding a
  8. In rooms.html we will need to unlink the graphic and text to rooms.html. It is confusing
      and just not good form to re-load the page you are on.
  9. Single-click on the graphic ―our rooms‖ to select it.
  20. Hit Delete.
  21. Insert > Picture > From File. Browse the Images folder and double-click on roomssel.gif
      to insert the inversed button indicating that you are on the ―our rooms‖ page.
  10. Select the text link for ―our rooms.‖ Insert > Hyperlink. Hit Backspace to erase the link
      from the URL box. Click OK.
  11. Delete ―our rooms‖ graphic button.
  12. Insert picture from file ―roomssel.gif.‖ Here is our visual clue showing us that we are on
      the ―our rooms‖ page.
  13. Save rooms.html.
  14. File > Preview in Browser. Make sure that the links to our rooms have been removed.
           a. The hyperlink hand should not appear when you move your cursor over the
           b. The text link should no longer be underlined.
  15. Close the browser and return to FrontPage.

More Tables & Nested Tables
Nested tables are tables inside the cells of other tables. Sometimes they do not display properly.
Always check your nested tables in different browsers in testing and even after you publish them
to a web server.
    1. Open rooms.html if necessary.
    2. Hit Enter after ―check out our specials‖. Restore left alignment.
    3. We will create a layout table without a border to hold pictures and descriptions of the
        rooms in the Mermaids Rest Inn.
    4. Table > Insert > Table.
    5. Seven (7) rows. 3 columns. Alignment: left. Border size: 0 pixels. Cell padding: 1. Cell
        spacing: 10. Specify width of 100 percent. OK
    6. Click anywhere in the table to insert a caption at the top. Table > Insert > Caption.
    7. Type: Mermaids Nest Inn Rooms. Select the text and assign it a heading of 1,
        font, Arial.
    8. Table captions are useful for visually impaired visitors running screen readers as well as
        for sited visitors
    9. First we’ll insert the pictures in the first column (left side).
    10. Click inside the first cell and Insert > Picture > From File.
    11. Select the images folder. Select arts2.jpg to insert it into ―our rooms‖ web page.
    12. Repeat steps 9-11 to insert the remaining images into individual cells in the left column.
        a. revival2.jpg
        b. garden2.jpg
        c. giant2.jpg
        d. lovers2.jpg
        e. monterey1.jpg
        f. mountain2.jpg

   13. Save rooms.html.
   14. Let’s resize the middle column.
   15. Click inside the first cell of the middle column. (Table > Select > Column.)
   16. Right-click the column and select Cell Properties.
   17. Specify a width of 8 percent. OK.
   18. Now we’ll add the text in the third column, the one farthest to the left. The middle
       column is there to give us some space.
   19. File > Open, …mermaids/text folder/ourrooms.txt. Make sure the ―Files of type:‖ box
       reads ―All Files.‖ FrontPage will open the file in NotePad in a new window.
   20. Select the first paragraph: Click on one of the links below to see a picture and
       description of that room:
   arts & crafts | classic revival | garden | giant oak | lovers' suite | monterey | mountain
   21. Copy the first paragraph. Leave ourrooms.txt open and return to FrontPage.
   22. Hit Enter after ―check out our specials.‖ Restore left alignment and paste the text.
   23. We will now add our descriptive text to the third column, the one farthest to the right.
   24. Return to ourrooms.txt.
   25. Select all the text about The Arts & Crafts room through the ―top of page.‖

         a. The Arts & Crafts Room Decorated in the arts and crafts
             spirit, this large room also has a queen size bed with
             garden views. Private bath. top of page
     26. Copy the text. Return to FrontPage. Paste the text into the 3rd column, 1st cell.
     27. Repeat steps 20-26 to paste the remaining text in the following cells in the order it
         appears in the txt file.
     28. Select all of the text and change the font to Arial.
     29. Make sure all necessary Alt tags are in place.
     30. Remove any extra spaces caused by the transfer.
     31. When finished, save rooms.html.

Create Bookmarks or Named Anchors
Anchors generally jump to another location on the same page. These are very useful for long
pages containing lost of text. Anchors can also be used to jump to a specific position on another
web page. Anchors have two parts: the anchor (the destination) and the hyperlink (takes you to
the destination). (See also your textbook, p. 56.)

BEWARE! Named anchors are case sensitive and must be unique within the page.

First create the anchor then create the link to it. FrontPage uses the word ―bookmark‖ for the
anchor, which should not be confused with book marking a URL in a browser. Dreamweaver
uses ―Named Anchor‖ and inserts it using Insert > Invisible Tags > Named Anchor.
HTML/XHTML uses ―Anchor.‖

We will make anchors in each of the cells holding the descriptive content for the rooms. Then we
will link to these anchors by making the text at the top of the page into links.

Create the Anchors/Bookmarks

                                                     1. Click in front of the words ―The Arts &
                                                        Crafts Room‖ but stay in the same cell.
                                                        We’ll put a Named Anchor here so
                                                        visitors can quickly jump to the photo
                                                        and description.
                                                     2. Insert > Bookmark.
                                                     3. The Bookmark Dialog Box opens.
                                                     4. Type arts as the bookmark name and
                                                        click OK.
                                                     5. Notice the flag marker in the spot where
                                                        you inserted the bookmark. This marker
                                                        is only visible when you are working on
                                                        the page in FrontPage and does not
                                                        display in a browser. (Dreamweaver
                                                        actually inserts a little yellow anchor.)
                                                     6. Click in front of the words ―The Classic

       Revival Room‖ but stay in the same cell.
   7. Insert > Bookmark. Type classic as the bookmark and click OK.
   8. Click in front of the words ―The Garden Room‖ but stay in the same cell.
   9. Insert > Bookmark. Type garden as the bookmark and click OK.
   10. Finish inserting bookmarks according to the chart below then save rooms.html.

Location of Bookmark/Anchor                Bookmark/Anchor name
Giant Oak Room                             giant
The Lover’s Suite                          lovers
The Monterey Room                          monterey
The Mountain View Room                     mountain

Create the Links
   1. Now that you have your bookmarks/anchors specified, it’s time to create links to them.
   2. Highlight the words ―arts & crafts‖ in the navigation bar at the top of the page.
   3. Insert > Hyperlink.
   4. Under URL there is a box marked Optional, Bookmark: Use the drop down arrow to
       select ―arts‖ from the list of bookmarks for the page.
   5. FrontPage adds the appropriate HTML code for a bookmark/anchor in the URL box,
       #arts. Click OK.
   6. Highlight the words ―classic revival.‖
   7. Insert > Hyperlink.
   8. Using the Bookmark drop down box select ―classic‖ #classic appears in the URL box.
   9. Create links to bookmarks/anchors on the rest of the page according to the chart below.
       Use Insert > Hyperlink, the Hyperlink button on the toolbar, or Control-K.
   10. Save rooms.html when you are finished and preview in browser to check your

Highlight Text         Cell location of bookmark         Bookmark Name
garden                 The Garden Room                   garden
giant oak              The Giant Oak Room                giant
lovers’ suite          The Lovers’ Suite                 lovers
monterey               The Monterey Room                 monterey
Mountain view          The Mountain View Room            mountain

Back to top named anchors/bookmarks
It is often useful to allow users to move quickly back to the top of a long page. The ―back to top‖
link to a bookmark at the top of the page allows that.

   1. Click just in front of the header our rooms at the top of the page.
   2. Insert > Bookmark. Name it top. You have just inserted a bookmark at the top of the
   3. Highlight the words ―top of page‖ under the description of ―The Arts & Crafts Room.‖
   4. Insert > Hyperlink. Select the bookmark top, URL #top.
   5. Link the rest of the top of page lines to #top.

     6. Note: You could simply type #top in the URL field or even copy and paste it for each
     7. When you are finished, save rooms.html and preview it in a browser. Check out the
        Anchors and Links.

Targeted Hypertext Links
Use targeted links let you open a page in a new window so that the new page and the old page
are both directly accessible on the user’s screen. The Back button on the new page is usually
disabled in the process.
    1. Open index.html.
    2. Select the word ―specials.‖
    3. Click Insert Hyperlink button on the toolbar.
    4. In the Edit Hyperlink box, click Target Frame, select ―New Window.‖ Click OK.
            a. FrontPage sets the target setting to _blank, which tells the browser to open a new
                window for the new page when the link is selected.
    5. File > Preview in Browser. Check out the link on specials.

Publishing FrontPage Webs
For your site to be accessible on the web, you must store all of the site’s files and folders on a
computer called a web server. A web server is a computer running special web server software
that maintains a high-speed, round-the-clock connection to the Internet.
FrontPage Server Extensions (FPSE) are a special set of programs that act as translators between
FrontPage and the web server program. They supply a lot of the impressive features of
FrontPage. To create our website, however, we didn’t use any of them. We just used FrontPage
as our shell. You can work either way with FrontPage and still have a functional website.
FrontPage merely writes the HTML code for you.
Note that Angelfire does supply the FPSE if you are looking for free space.

Connecting directly to a FrontPage server
Access a FrontPage server remotely and make changes to the site in real time without ever
having to go through the publish process. This is a unique way of publishing and updating
websites and pages. It allows you to access the page directly on the server without first having to
transfer it to your local machine. Requires that the FPSE be installed on the web server.
There are pros and cons to doing this. Con: your most recent version of a page may be ONLY
available on the remote web server. Pro: you just need to change a weekly announcement and
you don’t need a permanent backup of that particular paragraph.
     1. Choose File > Open Web.
     2. Click My Network Places from the buttons along the left-hand side of the Open Web
        dialog box.
     3. Enter the name of the FrontPage server in the Folder Name (FP2000) or Web name
        (FP2002) box.
     4. Click the Open button to connect to the FrontPage server. Enter your username and

                 Connecting Directly to a FrontPage Server in FrontPage 2002
This is the preferred way of transferring files in FrontPage 2000. Your Internet service provider
must support the FrontPage server extensions. You need to know the location (domain name or
IP address) of the web server and have a user name and password. Using the HTTP function, we
will publish our website to a diskette in drive a:
   1. Choose File > Publish Web. From the Publish Web dialog box, you can manage the
      amount of content you want to publish and specify the web server you want to post to.
      You can also publish to a local disk drive, a diskette, zip disk, or other media.
   2. Enter the URL where you want to publish your web content in the ―Specify the Location
      to Publish Your Web To‖ box. In this instance, a:\MermaidsRestInn
   3. Click Publish to submit the new web content. You may be prompted to enter a username
      and password.

                                      Publishing to drive a:

If the folder you specified in the dialog box does not exist on the location you specified,
FrontPage will create it for you. Click OK. FrontPage will now publish your complete website to
the a: drive.

FTP-Publish to a web server without the extensions
An FTP, or File Transfer Protocol, is built into FrontPage. It enables you to publish to another
server that is not a FrontPage server. You can use any FTP program to publish FrontPage webs.
One popular FTP program is WS_FTP LE, which is free to individuals for non-commercial
home use; to students and faculty of educational institutions; and the US federal, state, and local
government employees. Other users must purchase WS_FTP Pro.

Setting up an FTP location.
     1. Choose File > Open Web.
     2. From the Look In drop-down box, select Add/Modify FTP locations.

     3.   Enter the name of the ftp site in the Name of FTP site box.
     4.   Choose to log on anonymously or as a user in the ―Log On As‖ area.
     5.   Type your password in the Password box.
     6.   Click the Add button to add your FTP location to the FTP sites area.

   7. Click OK in the Add/Modify FTP Locations dialog box to activate the connection.

                        Add/Modify FTP Locations in FrontPage 2002

Publishing using FTP
   1. Choose File > Publish Web.
   2. Click Browse to access the Open Web dialog box.
   3. From the Look In drop-down list, select an FTP location from beneath the Add/Modify
       FTP Location indicator.
   4. Click Open to return to the Publish Web dialog box. Your FTP location has been entered
       in the Specify the ―Location to Publish Your Web To‖ box.
   5. Click Publish to FTP your content to the server. If pages on the destination site do not
       match those in the local source, FrontPage asks you if you want to delete the
       nonmatching files or synchronize the two locations.
   6. Always double-check your website after you upload new content.

                                                                    Last updated on January 3, 2003.


Shared By: