Microsoft® FrontPage 2003: building websitesThis course will help you get started in creating and maintaining your own website. Byusing FrontPage 2003, you will be able to control the look of your site and easily updateit. In addition, multiple people can update the same website at the same time.

Lessons

Introduction to websites1.Your company website is a portal to your business on the internet. This lessonwill explain what you need to start a website and help you start planning for yourwebsite.Welcome to Microsoft FrontPage 20032.All you need to know are a few basics about Microsoft FrontPage. This lessonwill introduce you to FrontPage and walk you through creating a new website.Moving around Microsoft FrontPage and uploading websites3.It's time to delve deeper into the program. In this lesson, you'll learn how tomove around within FrontPage, then edit and save web pages, and uploadthem to a server.Editing web pages4.A picture may be worth a thousand words, but it's also a good way to jazz upyour website. This lesson covers adding images, hyperlinks, and other items inFrontPage.Creating forms and tables5.Forms and tables give you more control and interaction with your visitors. In thislesson, you'll learn how to create these elements.Retrieving data, and using e-commerce and databases6.In this final lesson, you'll learn to communicate with your visitors and let theminteract with you using forms, e-commerce, and databases.

Introduction to websites

Your company website is a portal to your business on the internet. This lesson will explain what you need tostart a website and help you start planning for your website.

 

Introduction

A web presence is a key element of any business' marketing collateral. Yourcompany website is a portal to your business on the internet, providinginformation to potential customers and keeping current customers up to date onwhat you can do for them. When you have the right tools, building a websitethat reflects your business is something you can do, even if you don't know thefirst thing about web pages or HTML.

This course will teach you how to use a popular website creation too, MicrosoftFrontPage 2003, to build and manage your site. In this first lesson, you'll learnwhat you need to start a website, as well as what you need to create yourwebsite. Of course, if you're taking this course, you already know you want touse FrontPage 2003 to create your website. So in Lesson 2, you jump right intothe basics of FrontPage 2003 and create your first website. In Lessons 3 and 4,you learn all about editing your web pages with FrontPage 2003. Lesson 5takes you a little deeper into the program and tells you how your web page cangrow using FrontPage 2003. Then finally, in Lesson 6, it's what you've beendreaming of: You'll learn how to upload your web page using FrontPage 2003.So, let's get you started.

 

 

www.whatsmyname.com

There are three basic components to a website:

Domain name: For example, www.whatsmyname.comHosting company: The place you store your web pagesWeb pages: The actual web pages you create that contain your content

There can be additional components, and in some cases, you don't need adomain name if you don't mind a long, free name, but a simple www name willhelp you easily tell others of your website.

This lesson will help you obtain a domain name, explore hosting options,understand the components of a web page, and start planning for your needs.

Why do I need a domain name?

Well, you don't need a domain name, but each computer on the internetactually has an IP (Internet Protocol) address that consists of four groups ofnumbers, such as 69.22.169.88 or 69.22.171.30. These numbers represent thecomputer's unique location, sort of like a telephone number. But like a phonenumber, people have trouble remembering numbers, so most sites also have aname, called a domain name, such as www.cindyfox.com or www.ebay.com.When you type this name into your browser, such as Microsoft InternetExplorer, your computer sends a request to a computer called a DNS (DomainName System) server, which is like a telephone operator. The DNS server thenlooks up the correct IP address and sends your browser the information itneeds to then correctly request the website you want to visit.

So, what does this mean to you? It means that a domain name is an easy wayfor people to find your website. It's something you can place on business cards,voice mail, bumper stickers, and anything else you can think of.

You can easily get your own www name by visiting one of the many companiesonline that offers them. You don't buy domain names, per se. That term is oftenloosely used. You actually register the domain name for a year at a time,thereby owning it indefinitely, as long as you don't forget to renew each year.

A website called GoDaddy.com offers domain names for $8.95 per year at thetime of this writing. That is one of the lowest prices anywhere. Go to its websiteand type the name you want in the Search for a domain name NOW! section,as shown in Figure 1-1. It's either available and you can immediately pay yourone year fee, or it's not available and you can try a different name.

The official word

ICANN (Internet Corporationfor Assigned Names andNumbers) is the officialcompany that allows peopleto issue domain names. Fora complete list of ICANN-accredited registrars, visitthe ICANN website.

Figure 1-1: Domain name registrar.

Enlarge image

Try to get something easy to spell, easy to say on the phone and simple tounderstand. As you can see in Figure 1-2, butterflybooks.com is not available,but butterflybooks.org is available as are .INFO, .US, .WS, and .NAME.

Figure 1-2: Domain not available.

Enlarge image

.COM is still the best name to have, because most people assume a .COM atthe end of a domain name. .ORG is preferred for a nonprofit organization and.NET is generally for a network, but anyone can have it. The two letter endings,such as .US or .WS are country codes. You'll also see .UK, .GE, and so on.Each country has its own code. A small island country, Tuvalu, has made anindustry of selling domain names ending in TV.

You can also have as many as you want and in this case, you may considerchanging your name rather than taking the .ORG. If your desired name is notavailable, click your browser's Back button to try another name.

In this example, butterflylibrary.com is available as is the .org, so you couldpurchase these domains instead, if they meet your needs for your business. It'ssimply trial and error until you find a name that's available and works for you.

If you decide to have a domain name, it takes about 48 hours for it to beavailable to others over the internet.

You don't need a domain name yet, but it's good to know right up front so ifthere's a name you want, you can try sooner rather than later so you getsomething you like.

If you do use GoDaddy.com, be sure to read every page carefully, and thenclick No Thanks to the myriad of offers. Be sure to confirm that your totalamount is only $8.95 times the number of names you purchase. GoDaddy.comautomatically renews your domain name each year unless you change thesetting in GoDaddy.com.

 

Virtual rental space: web hosting

Just like a business needs a location, so does your website. There are manyhosting options available, from free hosting to setting up your own server. Youcan Google for free hosting, look up companies at Top Ten Web Hosting orsimply create your website locally and upload it later. This section discussesthe option of using a web hosting company to host your website.

You can create your entire website without a domain name and without ahosting company, but if you ever want the rest of the world to visit your website,you need both.

A hosting company provides a location for your website somewhere other thanyour personal computer so that people can visit your website whenever theywant. It's similar to renting store space for your business. You can run abusiness out of your home, but of course, you don't want people knocking onthe door at 3 a.m. and if you want to have a large or high-traffic business, suchas a car dealership or a sub shop, home really isn't the place for that type ofbusiness.

In the same way, you can go through this course and simply create your webpages on your personal computer, and never let the rest of the world see them,or you can see if you have some free web space from your ISP (internetservice provider). Often, your ISP provides you with a small web space and thismight be enough for your site.

Unfortunately, if you get some web space from your ISP, it usually has someawkward name such as members.cox.net/cindyfox. These names are not theeasiest for people to remember and are not business-like.

The good news is, you can use this free web space, and then go toGoDaddy.com (or some other registrar) and get a domain name that you pointto the long name. So now you have free web space and a nice name. Checkwith your ISP to see if it offers this service and if so, find out the long domainname, and your username and password for uploading information.

Some ISPs don't allow you to upload your website using FrontPage or FTP(File Transfer Protocol), so ask them if you can do that. You must use theutility they provide instead. This is addressed again later in the course.

If your ISP doesn't offer this service and you don't want to pay much (oranything) there are other options.

There are free websites available; however, you may pay in other ways thancash. Certain free websites have others pay for your services by allowing themto advertise on your website. If your site is for personal use, you may considerthis option, but if you have a small business, it looks very unprofessional. Anexample is http://members.tripod.com/ltlfarmaz, which is a great smallbusiness, but its site is very frustrating.

The software

FrontPage 2003 provides theflexibility and features to helpyou build bettwer websites.Generate code faster andeasier to extend the power ofyour website.

»  Microsoft FrontPage

Do not open the URL for the example web page unless you want to get aton of popup ads!

GoDaddy.com offers some low cost hosting, but be careful. It's great for smallwebsites, but if your website will generate a lot of traffic (people who look atyour site) or has a lot of photos or large files, you'll soon be paying more for awebsite than you would at a typical, standard hosting company.

Check for hosting companies by going to Google and typing free web hosting orjust hosting plans. Type FrontPage Hosting if you want to use extra FrontPagefeatures. You don't absolutely need them, but they can be useful.

These features are explained in Lesson 2. Use the Message Board to share agreat host you've found or ask questions about one you're considering.

 

The basics

So, you know you want to create a website, and you've thought up and maybeeven registered a domain name. Now you get to think about creating yourwebsite. To create this, you need three components. You need a web pageeditor (in this case, FrontPage 2003), a web page browser (normally, InternetExplorer or Netscape Navigator), and if you want your website to be availableto the public, you need your hosting company information, such as login andpassword. Your domain name is optional, but highly recommended.

FrontPage is one of many options for editing your website. You can use anynumber of other editors, edit directly online, or use a text editor, such asNotepad if you want to write in pure code, but FrontPage 2003 is a nicecombination of powerful web tools and the familiar look of the Microsoft OfficeSuite.

You need a browser to preview the web pages as they will appear to the rest ofthe world. In fact, you should go view them on other people's computerswhenever you have the chance, or email your friends to have them view yourweb pages and provide you with feedback.

There are two basic types of websites: static and dynamic. In most basic terms,a static site is one in which the data never changes and a dynamic site appearsdifferent depending on the inputs of each person viewing it.

An example of a static website is cindyfox.com. As a service-based site, oncethe site is built, services may change, but rarely and not consistently; therefore,the pages remain static to each person viewing them. There are only five basicpages on the cindyfox.com website and they're the same no matter who,where, when, or what a person selects.

In contrast, a large dynamic website that constantly changes is eBay, which isdatabase driven and is constantly updated by sellers and buyers. You can sortitems in different ways, search for certain items, and see your current itemsbeing sold or viewed.

To create a static website, pure HTML (Hypertext Markup Language) is used.HTML is completely text based and relies primarily on content within the filebeing called. In contrast, a dynamic website uses more sophisticated coding

 

and can be connected to a database such as MySQL. Depending on choicesmade on the website or other variables, such as user name, date, time, and soon, different web pages appear at different times.

FrontPage can help you create both of these types of websites. In addition, youcan use FrontPage to edit an existing website or to create a new one. In thiscourse, you'll start from scratch, but feel free to question your instructor andfellow students on the Message Board when you're confused in any way.

 

Files and pictures

You need to start planning your website before you start creating it. A websiteis a collection of pages and images, so you must think of each web page youneed, how it will link to others, and which images it will contain. Most websiteshave a hierarchal layout, which means that there's a main page (sometimescalled the home page), and then subsections. If needed, there can even befurther subsections under that.

If you have a project already in mind, by all means, do your own project andview each lesson as building on your own website. You can use the MessageBoard to get pointers on any issues not covered, or feedback on howsomething might apply to your situation.

To that end, you need to consider what your company needs and how it needsto be arranged. You can layout your entire website before you even touch yourcomputer.

Every website has a different purpose and needs, but to start, you need a plan.If this is a brand new website, start by creating the look of the website. Is it afun, serious, personal, business, nonprofit, service, or product website?

To create your website's look, consider its personality, users, and purpose.Draw (on paper) your ideal website. Include sketch images, the topics, and thetext of each page and how you want the pages to connect to each other, suchas a list of links across the top, down the side, or at the bottom. You don't haveto be an artist, but it's your site and you know what you want better thananyone else does. When it comes to creating the actual website, you'll be ableto use clip art, free art, or hire an artist to create your graphics.

In addition to your own thoughts, look at your competitors' websites and notewhich ones you like or don't like. This way, if you later decide to have someonehelp you, you're that much farther along and can communicate your ideas ofwhat you want in a website. Get feedback from customers, coworkers, friends,and family. Listen to all, take what you need, leave the rest.

As you think about what your website needs to contain, it should include thefollowing web pages (if applicable):

Home page: This page tells about the website and what can be found on it.It's a good idea to be informative, but not overwhelming on your home page.Don't overload your main page with photos and images because it's usuallythe first page people go to and if they don't like it, they may quickly leave.Contact page: This page can have names, phone numbers, addresses,email addresses, fax numbers, and anything else that helps people contactyou if they have a question or need more information. If this is a personalsite, limit your personal information. Consider using a P.O. box if you want toreceive mail to limit your risk. If it's a business site and you have a physicallocation, be sure to include that information. This makes you seem more realthan a website that may be housed in a garage (not that there's anything

What about an online store?

Creating an online store witha commerce engine tosupport it is beyond thescope of this course.However, you don't have tohave an online store to listproducts on your site, just besure that you are clear withsite customers about howthey can buy your products ifthey are interested. You canoffer to send them a catalog,provide a toll-free number, oreven list retailers that sellyour product (if you sellproducts in retail that is).When you are ready to addan online store, many ISPsmake it very easy to set upand host a store, so discussyour options with your ISP, orif you are shopping for anISP now, see whatcommerce options they offerso you can plan now toexpand in the future.

wrong with being in a garage).Products page: If you have a business and sell products, list them on thispage. In this course, you learn how to do this with a static (normal HTMLpage) as compared to a dynamic page using a small database.Services page: Here you can add other services, or you can include thisunder your products page.

You can expand either or both of the products pages or services pages tomeet your needs or add additional pages that may not be listed here.

If you follow the preceding plan, you'll have four pages in your website. There'snothing wrong with having a small website as long as you thoroughly coveryour purpose. In fact, one of the benefits of creating and maintaining a websiteis the fact that you can expand it or change it at any time!

Although you'll definitely have four pages if you follow this plan, how manyimages you will have is not yet clear. Unlike Microsoft Word, where all your fileslive in one place, web Pages store image files separately from the web pages.So a page with two photos on it actually consists of three files: one web page(usually an HTML file) and two image files (usually GIF or JPEG files). Imagesare covered in more detail in Lesson 4. For now, it's just important to realizethat your HTML file is not a complete web page without its supporting image (orother files).

 

The demo website

The example in this course is a bookstore called Butterfly Books. This websiteis completely static to begin with, and then the products page is changed todynamic in Lesson 5.

If this website were to remain static, you would have to manually edit yourproducts page and add the book name, ISBN, photos, and text every time yousold a book or added a new one, even if you're just repeating information youhad in stock a week ago.

Of course, you can copy and paste information from old lists, but if you haveany sort of product that you sell, you'll eventually want to use a database. Don'tworry! You can set up your entire website right now, and then edit that page ifand when you decide to upgrade. It's just something to be aware of.

When creating a website's look, consider its personality, users, and purpose.Butterfly Books is a website for homeschoolers to buy, sell, and borrow schoolbooks. Thus, the look should be fun, interesting, book oriented, and simple tonavigate. This goes for a lot of websites.

In the last section, you determined which web pages you need for yourwebsite:

HomeContactProductsServices

Some websites might also include an About Us page or Policies andProcedures page. If you'll be shipping products, you might want to include aShipping page, or you could put that information under the Contact Page. It's allquite flexible and if you get complaints, you can easily change your websitelater.

Print your sample web site

To see how your web site willlook when printed, print hard-copies of your web sitepages with an HP colorLaserJet printer.

»  HP Color LaserJet2600n printer series

»  Printer and MFP buyingguide

During the course, you will build a Web site that includes these pages:

index.html: This is a standard name for the home page. Most web serversautomatically show this page by default when someone types in your siteaddress. Without an index.html page, users will most likely see a simple listof files that are in your site, which doesn't make for a very good firstimpression.

All other filenames are flexible, although it's highly suggested that youalways name them in lowercase and without spaces so you don't have anytrouble remembering what they are because some web servers are casesensitive.

contact.html: This is the contact page with name, address, phone, fax, andemail information, as well as policies, procedures, and shipping info.books.html: This is the products page. Although the name could beproducts.html, because this is a bookstore, books.html makes more sense.services.html: This is the services page, which includes book searching,membership, and other services. 

Steps to creating a website

Throughout this lesson, you've learned some of the things you need to do tocreate your website. These items break down into some very general steps:

Consider your purpose.1.Plan your web structure.2.Design the look (this includes writing the text for your site).3.Create the website.4.Test the site.5.Get feedback.6.Maintain your site.7.

Lessons 2 to 4 cover creating and testing every part of the website.

Every time you make a change to your website, you need to test that it looksthe way you want it to. Here are the basic steps you need to take to make sureyour website appears the way you want it to:

Make changes to the website.1.Upload the changes to the web host.2.Verify the changes in a web browser.3.If there's a problem, return to Step 1.4.

Feedback and maintenance are ongoing issues for the life of your web page.Never let it get stale. Keep an email address active for getting feedback onissues or thoughts on your website and maintain it as often as needed.

Be sure to view your web page on as many other computers as possiblebecause websites look different on different computers. This will be covered inmore detail in Lesson 2.

Just to recap, to complete this course, you need the following:

FrontPage 2003 (This is the only mandatory item.)Any web browser (You have one, if you're reading this! To know whichversion and type you have, click Help > About in your browser’s toolbar.)

The first step

The first step to creating aweb site is having acomputer that is as much acreative partner as it is apowerful tool.

»  HP 7000 series desktopPCs

»  Desktop buying guide

A web account (Support of FrontPage Extensions is optional; you'll learn whylater.)A domain name (If you wish.)In addition to these basic items, it may help if you have the following as well:An image editor, such as Adobe Photoshop Elements or Paint Shop Pro,both of which can save digital images into an appropriate web size.A graphic arts program, such as Corel Draw, or you can pick up free imageson the internet if you don't find what you are looking for in FrontPage.

Moving on

In this lesson, you learned about basic website concerns and started learninghow to plan your website. Start planning your website now. Draw out your siteon paper, start writing the text, and be ready to create it in Lesson 2.

Before you move on, do your assignment and take your quiz for this lesson,and then head over to the Message Board for comments and questions.

In Lesson 2, you'll fine tune that plan, open FrontPage, and create your firstweb page. If you have a host, you'll upload and test it.

Assignment #1

Start planning your website now. Think about what information you want to convey and howyou want to lay it out. Envision the images and colors you will use.

Research domain names and hosting services and determine whether you would like tohave either one right now or when in the future you might want to have one or both.

 

Quiz: #1

Question 1:True or False: All websites must have a domain name.

A) TrueB) False Question 2:True or False: The best way to create a website is just jump in and open FrontPage.

A) TrueB) False Question 3:It's a good idea to do which of the following? (Check all that apply.)

A) Sketch out your planned website on paper.B) List your pages and identify the purpose of each.C) Get a good domain name if you're planning a business website.D) Create your website with no planning. Question 4:True or False: Web page editing software is all the same.

A) TrueB) False

 

Welcome to Microsoft FrontPage 2003

All you need to know are a few basics about Microsoft FrontPage. This lesson will introduce you to FrontPageand walk you through creating a new website.

 

Starting and navigating through FrontPage

FrontPage is a great tool to manage your website. Because it's a Microsoftproduct, many of the toolbars and windows will look very similar to what you'reused to in Microsoft Word, one of the most commonly used word processingsoftware applications.

It's assumed that you already have FrontPage 2003 installed on yourcomputer. If not, simply insert the CD and the installation wizard should takeyou through the process.

FrontPage 2003 runs only on Microsoft Windows XP and above.

After it's installed, click Start > All Programs > Microsoft Office > MicrosoftOffice FrontPage 2003, as shown in Figure 2-1.

Figure 2-1: Start FrontPage 2003.

Enlarge image

The FrontPage interface appears as shown in Figure 2-2.

 

Figure 2-2: FrontPage 2003 interface.

Enlarge image

If this is the first time you've used FrontPage, a dialog box appears thatasks if you want to use FrontPage as your default HTML editor. Select Yesor No depending on your preference.

If you (or someone on this computer) used FrontPage before, it opens to thelast website edited. You can change this default action and many others byediting options and preferences in FrontPage.

FrontPage also opens with the most currently used websites listed on the rightside, which provides a quick method of opening your websites. If you have agray screen, as in Figure 2-2, click the New button on the top left (circled inFigure 2-2), or use File > New to open a new web page.

Figure 2-3 shows the toolbars and a new web page as they appear inFrontPage.

Figure 2-3: Toolbars and new page in FrontPage.

Enlarge image

At the top of the window is the Title bar, which is typically blue, contains theFrontPage program name, and the name of the current file you're working on.

Below that is the Menu bar, which includes File, Edit, View, Insert, Format,Tools, Table, Data, Frames, Window, and Help. The menu titles are identical toWord, except for the Data and Frames menus.

Be sure to use Help whenever you have a question. Many help topics will linkto internet sites, so be sure you're connected to the internet when seeking in-depth help.

Below the Menu Bar are two toolbars: Standard and Formatting.

Again, many of these features are similar to Word, so you should recognizebuttons such as New, Open, Save, Bold, Italics, and Underline. Move yourmouse over each button to see a yellow tool tip pop up and identify the button.

The Undo button can fix your last changes if you've made a mistake. It canundo changes made up until the last time you saved the file.

Under the toolbars is your new blank page. At the top, you see the name of thepage, currently, new_page_1.htm and a blank white screen.

As you open additional pages, you'll have additional tabs at the top of thescreen. You may edit multiple pages at one time. Once you start typing on apage (you can type anything you want), you'll see an asterisk appear at the endof the page name. This indicates that changes have been made to this page,but have not yet been saved.

You may type in whatever you like, highlight the words, change the size, font,color, placement, and so on.

As you do, you'll see codes in dark yellow (almost orange) appear under thepage tab, which indicate the HTML code that FrontPage is creating for youbehind the scenes, as shown in Figure 2-4.

Figure 2-4: Entering text for your new page.

Enlarge image

At the bottom of the screen, there are four View options:

Design: This is the default view, where you see your page content. Thereare indicators in this view, such as table outlines, that are not shown whenyour page is online.Split: This view splits the screen to allow you to see both the design viewand the code view at the same time.Code: This view shows you the actual HTML code behind the scenes. Asyou type in text and change the color, size, and alignment, FrontPagecreates HTML for you behind the scenes. If you understand the code, youcan make changes directly to it; otherwise, you can simply view it to seewhat is going on.Preview: This view allows you to see what your finished page will look like

when it's uploaded to your server. Often, this view will look very similar to theDesign view, but there are some differences. Although this is helpful forsome websites, it's very important to view your site in a separate browserand on separate machines to make sure it's working as you intend.Click each of these views to see what they look like. Figure 2-5 shows anexample of the Split view. Notice the asterisk on the tab, indicating this pagehas not yet been saved.

Figure 2-5: Split view showing code and design view.

Enlarge image

After you enter all the text you like, save your file by selecting File > Save orclicking the Save button. FrontPage automatically suggests index.htm as yourpage name if it's a single page. It's very important to name your home page asindex.htm, but for this practice page, you may name it whatever you want andsave it wherever you like.

Just like most files, you have a typical Save As dialog box, as shown in Figure2-6. You do not have any images to worry about yet, so this is a great way tocreate text pages.

Figure 2-6: Save As dialog box.

After you save your file, the new file name appears at the top of the screen andthe asterisk is no longer on the Page tab, as shown in Figure 2-7.

Figure 2-7: Saved page.

Enlarge image

Play with the toolbars using this practice page and get familiar with theFrontPage program.

 

Using FrontPage extensions

FrontPage creates standard HTML files, but it can also invoke certain specialcomponents. These browse-time components require a host (web server) to berunning FrontPage Server Extensions from Microsoft, SharePoint TeamServices from Microsoft, or Microsoft Windows SharePoint Services. If youwant to use these features, consult your Help file to find out what's required torun the feature you select.

A web component is also called a web bot, and is a dynamic object on a webpage that is evaluated and executed when a page is opened in a web browser.The Date and Time component and the Table of Contents for This Web Sitecomponent are examples of FrontPage web components. There are also anumber of other ways to add these features to your site, so using FrontPageExtensions is not a requirement, but something you should be aware of that isunique to FrontPage.

Your website should work fine for the most part, no matter which type of hostyou have. However, to be sure that what you see on your screen is what yourwebsite visitors see, make sure that either your host has FrontPage Extensionsenabled or you disable FrontPage extensions in your copy of FrontPage. Manyweb hosts have FrontPage Extensions installed, and many do not. Check withyour web host to verify its level of support.

If you turn FrontPage Extensions support on or off for features in FrontPage2003 that require them, those features may not be available as menu options.The menus you see in this course have the FrontPage Server Extensionsenabled.

FrontPage Server Extensions 2002 work with FrontPage 2003. Contactyour hosting provider or server administrator for more information.

To turn off FrontPage extensions, follow these steps:

Click Tools > Page Options.1.

 

In the Page Options dialog box, click Authoring tab.2.Select or clear the Browse-time Web Components checkbox to turn3.support on or off for features that require FrontPage Server Extensions.

Author-time components are tools you can use to create and design webpages that you do not need FrontPage Extensions for, such as a photogallery or link bar.

If you select not to disable the web components, you may be wondering whyyou would want to use these web components and how you can insert them.You can insert many different web components in Microsoft FrontPage byusing the Insert Web Component dialog box (Insert > Web Component). Thedialog box provides options for the following items:

Dynamic Effects: Allows effects such as scrolling marquees or interactivebuttons.Web Search: Inserts a search form for your current website.Spreadsheets and Charts: Displays interactive data in office spreadsheets,charts, and pivot tables.Hit Counter: Displays number of times web page has been visited.Photo Gallery: Allows you to select different layouts for your photos on theweb page.Included Content: Shows author, description, last changed date, URL(Uniform Resource Locator), other page contents, picture, and bannerinformation.Link Bars: Includes a bar of hyperlinks, back, and next buttons, or onesbased on navigation structure.Table of Contents: Creates a table of contents based on the website.Top 10 List: Includes visited pages, referring domains, URLs, search strings,visiting users, operating systems, or browsers.List View: Include tables or forms with bulleted, plain, historical, and otherfields as chosen.Document Library View: Inserts a document library view or form thatcontains a column for each field you select and a new row for each item inthe list.MSN Mapping Components: Inserts a link to the MSN Maps & Directionswebsite to view a dynamic map with the location already marked (the Link toa map option) or a static map from MSN Maps & Directions for a specificlocation (the Insert a map option).MSN Components: Inserts components such as Search the Web, Stockquote, Business Headlines, Living and travel headlines, News, Sports,Technology Headlines, or Weather forecast from MSNBC.Additional Components: Includes Visual InterDev Navigation Bar.Advanced Controls: Includes the following:

* HTML content that will not be modified by FrontPage.

* Java Applet (small software program) that can be used to addto animation, music, page updates, and so on.

* Plug-In (software module that integrates into web browsers tooffer a range of interactive and multimedia capabilities).

* Confirmation Field for form entries.

* ActiveX Controls (such as a checkbox or button) that offeroptions to users or runs macros or scripts that automate a task.You can write macros for the control in Microsoft Visual Basic forApplications or scripts in Microsoft Script Editor.

* Design-Time Control.

* Movie in Flash Format.

Although these features may sound exciting, they are not perfect and there aremany other ways to achieve the same things. Issues that may arise with someof your website visitors when they try to access these components, so be sureto test, test, and test again if you decide to use FrontPage Extensions.

 

Creating a website using the Wizard

You created a single web page in FrontPage earlier in this lesson. You cancontinue to create new pages and manually hyperlink them or you can use theFrontPage Wizards to create an entire website. There are advantages to bothof these options. It's your choice which method you prefer to use. If you're newto web building, the Wizard is probably the easiest, but if you have built webpages before and are just new to FrontPage, you may wish to build yourwebsite manually.

To run the wizard, close the page you created earlier, saving the changes ifyou want. FrontPage should now be open, but have no files open.

Click File > New. On the right side of your screen, options appear for1.creating a new page or website.Click More Web site templates and a dialog box appears with choices2.for the type of new website you would like, as shown in Figure 2-8. Thechoices available include:

One Page Web Site: The same as creating a single page, except that it alsocreates a folder (directory) on your computer and places special FrontPagefolders in that directory.Corporate Presence Wizard: Includes pages appropriate to corporations tohelp you include all information your business might like to show on theweb.Customer Support Web Site: Includes pages that would be useful for aservice company to offer support to their clients.Discussion Web Site Wizard: Uses a bulletin board to allow users tocommunicate with others.

Discussion and Project Web site wizards heavily depend on usingFrontPage Extensions on your server. The others will work on most webservers.

Empty Web Site: Doesn't include any pages, but sets up the specialFrontPage directories on your system.Import Web Site Wizard: Allows you to pull in any site from the internet, andthen edit it to your needs. Be careful with this one. It's fine to copy layoutsand get ideas, but words and images are normally copyrighted and you needto make sure you don't steal anyone else's work.Personal Web Site: Lets you create a site for you or your family, includingphotos, interests, and so on.Project Web Site: Allows people to work together, including a list ofmembers, schedule, status, archive, and discussions.

Play with any of these site types and create as many as you like, and thendelete the folders if you decide you don't want to use them. If one of thesemeets your needs better than the example website, feel free to use it andpost questions to the Message Board if something is confusing. CorporatePresence Wizard is the most commonly used.

Click Corporate Presence Wizard and type a location in which to create1.

Work in FrontPage from nearlyanywhere

Don't be chained to a desk!With powerful HP notebookPCs that are just as capableas the desktops, you canmake your office whereveryou want it to be.

»  HP 2510p notebook PC

»  Notebook buying guide

a new folder for your site. You might select to use the domain name youplan to use or some easily identifiable location. As seen in Figure 2-8,Butterfly Books website is stored in My Documents in a folder (directory)called butterflybooks.org.

Figure 2-8: Butterfly Books website in My Documents folder.

Enlarge image

Click OK. FrontPage creates the directories, and then the first page of1.the wizard appears.Read this first page, and then click Next.2.The next page asks you to select which pages to include in your3.website. If you have your plan, you can select the pages that fit yourplan, but realize that you can delete or add as many pages as you likelater. The pages you select should fit your business (or personal) needs.Butterfly Books needs the following:

Home: index.htmlContact: contact.htmlProducts: books.htmlServices: services.html

In the wizard, Home is a required page, but the others don't quitematch. Therefore, you may select Products and Services andlater elect to make two pages of it. You may also decide tochange your plan to have both on one page and select theFeedback page to allow customers to contact you and add yourcontact page later, or include it on your home page. Figure 2-9shows the pages chosen for this example. Click Next.

Figure 2-9: Butterfly Books pages to include.

Enlarge image

FrontPage assumes you want contact information on your home page.1.

It's actually a good idea to include basic contact information on everypage of your website because you never know which page a visitor maybe on when she needs to contact you. Decide which sections to placeon your home page (remembering that you can edit it later), and thenclick Next.FrontPage asks you how many products and services you have. This2.causes FrontPage to create pages for each of these products andservices which may not be what you want, but leave the default to seehow it works and delete the pages later. Click Next.FrontPage asks what you want to include on each of these product3.pages. This choice depends on which type of products and services youoffer. Butterfly Books lists all products on one page rather than creatinga page for each. Leave these defaults or click what works best for yourcompany to see which options you have. Click Next.

Researching other websites and seeing what works is the best idea, becausethe number of pages is not important in and of itself. Use whatever works foryour business.

The Feedback form options appear. The choices you click here appear1.in your Feedback form. This form requires FrontPage extensions towork, or modification to add code used on your server's site. Forms arevery powerful ways to collect information, but you can use the simplemethod of including a link to an email address. This is covered later inthe course as well. Make your choices or leave the defaults, and thenclick Next.FrontPage asks how it should store this information (assuming2.FrontPage Extensions). Make your choice or select the default, and thenclick Next.Select what should appear on the top and bottom of each of your pages.3.Again, all this can be modified later, so select what you like or leave thedefault choices, and then click Next.Select whether to include the Under Construction icon. It's better to4.select No unless you really have strong feeling about this. Click Next.Enter your company information. Use your own information, dummy5.information, or Butterfly Books, 123 Main Street, Mesa, AZ 85201. ClickNext.Enter phone numbers and email addresses for webmaster and Info.6.These should ideally be an email address at your website. For example,webmaster@butterflybook.org and info@butterflybooks.org, but if youonly have a personal account, you can use that now and look intochanging it later. Click Next.This last page in the wizard asks if you want to show the tasks view7.when you're finished. Leave it checked, and then click Finish.You now see your list of tasks to complete and the status of each (Not8.Started).

At the bottom of the screen, as shown in Figure 2-10, you now have a list ofviews for your website:

Folders: Shows all the folders and files of your new website. The yellowfolder names at the top that start with underscores (_borders, _fpclass,_overlay, _private, and _themes) are all FrontPage-specific folders andshould not be changed or deleted because FrontPage uses them to manageyour website.Remote Web site: Represents the web server and is not yet set up.Reports: Gives you a list of informational reports to quickly answer questionsabout your website.Navigation: Shows the organization of your website.Hyperlinks: Shows how your web pages are linked to each other. Click anyof the plus signs next to the pages to expand the web information.Tasks: Is the current view and tracks your progress as you complete yourwebsite.

Click each of the views to see what they look like and explore your website.

In the Folders view, you can double-click any of the files to open that file. Twotabs appear at the top of the page as shown in Figure 2-10. Now you can movebetween Web view and any page view. Play with the views and opening andclosing web pages.

Figure 2-10: Web views.

Enlarge image

Moving on

In this lesson, you learned about FrontPage, opened FrontPage, and created asingle page and a website from a wizard. Before you move on, do yourassignment and take your quiz for this lesson, and then head over to theMessage Board for comments and questions. In Lesson 3, you'll edit yourpages and add more features. If you have a host, you'll upload and test it.

Assignment #1

Create a new website using the FrontPage Wizards. Select File > New, and then click WebPackage Solutions on the right and select another wizard to try.

FrontPage will open another instance of FrontPage while keeping your other website open.Examine the FrontPage interface, experimenting with your new website. Get familiar with thesoftware and its features.

 

Quiz: #1

Question 1:True or False: FrontPage creates code for you in HTML view, but you cannot change it.

A) TrueB) False Question 2:True or False: All websites must use FrontPage Extensions.

A) TrueB) False Question 3:When learning a new program, it's a good idea to do which of the following? (Check all that apply.)

A) Look at what is similar to other programs.B) Use the Tooltips over each button on the toolbar to learn what unfamiliar buttons are.C) Focus on learning parts thoroughly as you need them and not get overwhelmed by anything unfamiliar.D) Just jump right in and use the program without examining anything. Question 4:True or False: Wizards are the only way to create a website in FrontPage.

A) TrueB) False Question 5:True or False: Tabs at the top of the FrontPage interface show the web structure or individual web pages; thebuttons at the bottom show different views of either the web or the individual page currently in use.

A) TrueB) False 

Moving around Microsoft FrontPage and uploading websites

It's time to delve deeper into the program. In this lesson, you'll learn how to move around within FrontPage, thenedit and save web pages, and upload them to a server.

 

Open, edit, and close pages and websites

Open FrontPage and your last used website should open. If it's not the oneyou're working on for this course, look to the right side to see a list of recentlyopened websites and click the correct one.

Your list of pages should look similar to Figure 3-1, but the original plan was:

Figure 3-1: Folders View of the website.

Enlarge image

Home: index.htmlContact: contact.htmlProducts: books.htmlServices: services.html

Plans are only guidelines and plans can change. You can review what youhave to determine if you want to change it.

You can add, remove, or change the pages in your website. Double-click apage and it opens in the Page View you last used.

 

Click the Web Site tab on the left and double-click another page to open.Repeat this a few times and your screen should look like Figure 3-2. If youhave a products.htm page in your website, open it and add a line to describethe products you offer by clicking the page and typing.

Figure 3-2: Editing the Products Page.

Enlarge image

Notice the four pages open in Figure 3-2, indicated by the tabs at the top:

feedback.htmindex.htmprod01.htmproducts.htm

The Web Site page is still a tab at the left side of the screen.

The current page is products.htm and has been edited to add a line aboutButterfly Books. This page has not yet been saved, which is indicated by theasterisk on the products.htm tab. It's a good idea to save as you go, so clickthe products.htm tab to make the products page the current page, and thenclick the Save button on the Toolbar (or use File > Save or Ctrl+S). FrontPagedoesn't ask if you're sure you want to save, it simply overwrites the page onyour computer with the changes.

Notice the misspelling in Figure 3-2, indicated by a red squiggle, where theword "and" was accidentally spelled "adn." To correct it, you can simply typethe correct word, or you can right-click the word to see a list of suggestedchoices and select the correct one. Be sure to proofread well becauseFrontPage doesn't always pick up grammar mistakes or all errors, but thisautomatic spell-check helps you keep your text looking sharp.

To close any or all of the multiple pages you have open, simply click the tab forthe page you want to close and then click the X in the upper-right corner of thatpage (not all the way at the top, which will close the entire FrontPageprogram).

You can also right-click any tab and select Save or Close to save or close thepage, respectively.

Figure 3-3 shows the Product page, listing links to your prod01.htm throughprod03.htm pages. Close all your pages except website, and then open yourprod3.htm page to see the detailed information your product pages provide. Ifyou decide you don't need that much information, you can delete that page byclicking your Web Site page, right-clicking your prod03.htm page, and then

selecting Delete.

Now open (double-click) your product.htm page and notice the button link onthe left to Product 3 is gone. This is a feature of FrontPage to help you easilymanage your pages. You still have the list of products and if you move yourmouse over the underlined Name of product 1, 2, or 3, you'll see the name ofthe page that will be opened if you click it in the lower-left corner of yourscreen, as shown in Figure 3-3. This is a hyperlink FrontPage setup for youwhen you created your page.

Figure 3-3: Products Page hyperlink.

Enlarge image

As you've seen, opening, editing, and closing pages is very easy in FrontPage.Opening websites is also easy. Either click the recently used website on theright when FrontPage opens or click File > Open Site, as shown in Figure 3-4.Regardless of whether you're opening a single page or a whole website, youcan open the File menu, and then select Open to open files or Open Site toopen entire websites.

Figure 3-4: Open web page or website.

You can have multiple websites open at the same time. Each time youopen a new website, it opens a new instance of FrontPage.

Practicing moving around your files and website until you're comfortable withrecognizing that a website is just a collection of files and you can open and editany one that you like. Feel free to make text editing changes on any pages youhave in your site.

 

Standard formatting for the web

When formatting for the web, there are certain things to keep in mind. First andforemost, you cannot completely control how your web page will look to others.Some people come to web design from an artistic background where you cancompletely control a physical piece of paper. The internet was originallydesigned to convey information, not style. As such, it's designed to be crosscompatible to a great number of people, but in doing so, you must use thelowest common denominator. Using a lot of Flash, large images, or othercutting edge technology may limit who can access your website.

In other words, the fancier your website, the smaller the number of people whowill be able to see it. However, you can have an elegant well-presented sitethat is viewable to 99 percent of the people with a few simple considerations.

To understand your audience, realize that every person viewing your websitehas a different setup, including:

Monitor: Users can have monitors that range in display pixels of 640 x 480 to

 

over 1024 x 768.Browser: Not everyone has the same preferences when it comes to internetbrowsing. Browsers include Microsoft Internet Explorer, Netscape Navigator,Mosaic, Opera, and so on.Operating system: Users can have a variety of different operating systems,such as Mac, Microsoft Windows, Linux, Unix, and so on.Fonts: There are different types of fonts (types of print characters) fordifferent operating systems.Internet connection: Not everyone is blessed with a high-speed internetconnection -- some people may still use dial-up. In addition, you may haveusers with faster connections such as satellite and T1, or people with sharedinternet connections.

Each item needs to be considered when creating your website. If you plan tocreate a primarily text site, you shouldn't have many problems with peoplebeing able to access your information, but even text has the drawback of usingunusual fonts that may look great on your system but may not exist onsomeone else's computer.

If you use a free service with a thousand pop-up ads and a visitor is using adial-up connection, you may lose them before they even read a word, so don'tdiscount the importance of knowing your customers.

To make sure your website can reach the largest number of people, there are afew tools in the lower right side of your screen. Make sure a page is open (suchas products.htm) and look at the four page settings shown in Figure 3-5.

Figure 3-5: Page settings.

From left to right you see the following:

Estimated Time to Download: For this page is 0:02 @ 56Kbps, which meansthis page will take approximately 2 seconds to download on a 56 Kbpsmodem. That's pretty good. Keep an eye on this number because it's one ofthe most important. If your page takes too long to load, you'll lose views. Asyou add images, you may see this number go up and need to considerresizing your images or having fewer images on the page. Click this numberto have a list of options pop up if you want to see how your page will fare ona 28.8 modem or a faster connection.Page Size: For this page is currently set to 799 x 513 which is a fairlystandard size because most people have monitors set at 800 x 600, butthere are some people who still have monitors at 640 x 480, although lessand less each year. Just realize that a few people may have to scroll left andright to see your screen, which can be annoying. Your page may look toosmall or too large on your monitor. It just depends what you're viewing it on,but remember to rely on the listed setting rather than just your monitor. Clickthis number to have a list of choices pop up and see how your page will lookat different settings.Author Settings: Indicates which FrontPage features are available to you,depending on your web host. Double-click to see more options, as shown inFigure 3-6. Select Default if you're unsure of your web host at this point, orselect which features you have on your web host and FrontPage will makesure your website options match.Browser Compatibility Settings: Identifies with which level of browsers yourpage is compatible. Again, the settings you select determine which featuresFrontPage allows you to use. The lower the setting, say 3.0 Internet Explorerand Netscape Navigator, the more people can view your pages, but the lessfeatures you have available. It's a tradeoff, but the viewer ability is usuallymore important than a few bells and whistles. Double-click to set this leveland you go to the same page as Author Settings, as shown in Figure 3-6.

Figure 3-6: Author and browser compatibility settings.

You can also reach the Authoring Page under Tools > Page Options.

A nontechnical concern is if you want to reach people who speak a differentlanguage, in which case, you may have to create multiple versions of your site.

An often overlooked concern is making sure your site is accessible to thosewith vision concerns, such as being easy to read, using image alt attributes todescribe pictures placed on the website, and not depending too heavily onimages or flash movies to convey your information.

Format theme

With your current site, FrontPage made certain assumptions to your page. Youmay or may not care for the black and red layout FrontPage chose, but whenusing a FrontPage generated website, you can easily change the look of theentire site.

Click Format > Theme. A Theme pane, as shown in Figure 3-7, opens on theright side of the screen showing the current theme (Journal) along with a list ofavailable themes from which you can select.

Figure 3-7: The Theme pane.

Enlarge image

Be sure you have a page open, such as products.htm and select any theme tosee it immediately applied to your current page. Scroll through and select atheme you like for your particular application.

You can change any of the theme parts individually as well. You can also selectthe No Theme option if you just want plain pages or you want to design yourown look.

Whichever you select, make sure it's appropriate for your website subject, easyto read, and consistent. Don't select a different theme for every page in yoursite.

After you find the one you want, such as Ice, which goes with the blue Butterflyconcept, apply it to all pages by clicking the drop-down to the right of the themesample and clicking Apply as default theme. Click Yes when FrontPage asksfor confirmation. Figure 3-8 shows the Format theme.

Figure 3-8: Format theme.

Enlarge image

Your selected theme is now applied to all pages in your website.

 

Basic website uploading

So far, you've created a basic website, but it lives entirely on your computer.You want the whole world to see it and to do that, you need to upload it to yourweb host. If you don't have a web host yet, you can read through this sectionand come back to it when you do. If you do have a web host, you need youruser name and password to upload your website.

There are three basic ways to upload your website.

FrontPage Publish SiteFTPWeb-based file management system

Your upload method varies depending on your host. If you have FrontPageExtensions enabled, uploading your site can be as easy as clicking Publish Siteonce it's setup.

Host your own website

Trying to decide whether youare ready to host your ownFrontPage website? Thishow-to guide will help youunderstand what a server is,how to decide if you needone, and how to go aboutfinding the right server tomeet your needs.

Large sites can take a long time to upload, especially if you're using a dial-up connection.

FrontPage Publish Site

FrontPage has a built-in method that allows you to easily upload your site fromwithin the program. Follow these steps to use the Publish Site feature:

Close all your pages to make sure you have saved everything (or look1.for the asterisk on any page and be sure to save that page).Click the Publish Site button on the Standard Toolbar or select File >2.Publish Site.In the Remote Web Site Properties dialog box, shown in Figure 3-9,3.enter the name of your website (if you have set one up).

Figure 3-9: Remote Web Site Properties dialog box.

Above the name, click FTP if you know you do not have Front Page1.Extensions set up, or leave it as FrontPage or SharePoint Services ifyou do have FrontPage Extensions. If you're unsure, contact your webhost to verify your settings or just try both and see which will work. ClickOK.Enter your user name and password when prompted.2.Click OK.3.

If you don't have FrontPage extensions on your web host, you'll get an errormessage. You can then try clicking FTP to see if that will work.

After you've connected, you'll see a page that looks similar to Figure 3-1.10 (the FTP site will look similar, but not exactly the same as theFrontPage-enabled website). Notice at the bottom of the screen, you'reon the Remote website view of your website.

»  Better manage yourgrowing business withserver technology -How-to guide

Figure 3-10: Remote Web Site view.

Enlarge image

On the left side is your local computer and on the right side is your web host'scomputer. To simply send all your files to the web host, click the Publishwebsite button in the lower-right corner. You'll see a status bar start on thebottom to show you the upload progress of your files to the website.

To see if everything worked correctly, once the site has completely uploaded,open your browser and type in your web address. Figure 3-11 shows the livewebsite in Internet Explorer.

Figure 3-11: Live website in Internet Explorer.

Enlarge image

If you see your content you just built, congratulations! The world can now seeyour website. If not, here are some troubleshooting tips.

Ensure you're connected to the internet.Use the correct user name and password (they are case sensitive).Make sure your host has FrontPage Extensions on or try the FTPconnection.Verify you're typing your website name correctly.

If you just bought your domain name today, it will take up to 48 hours beforeyou can access it. If you bought a .org name, it can take longer becauseanother agency needs to approve it. If you're still having trouble, contact yourweb hosting service. If that still doesn't help, post a message to the MessageBoard and someone will try to help you.

From this point on, each time you make a change, you're changing the files onyour local computer and need to then publish your changes to the web host so

the rest of the world can see your website.

Moving on

In this lesson, you learned about opening and closing pages, formatting yoursite for the web, applying themes, and (possibly) uploading your website.Before you move on, do your assignment and take your quiz for this lesson,and then head over to the Message Board for comments and questions.

In Lesson 4, you'll learn to add images and hyperlinks and update yourwebsite.

Assignment #1

Upload your website using FrontPage Publish. If you haven't yet, get your domain name and Webhosting set up, and then publish your site. It will take up to 48 hours for your domain name to beavailable. In the meantime, your web host may give you a temporary place to upload your site.

Click File > Publish Web site , enter your information, enter user name and password whenprompted, and then click Publish Web site.

If you have troubles, post them on the Message Board.

 

Quiz: #1

Question 1:True or False: You can have many pages open at one time and move back and forth while editing.

A) TrueB) False Question 2:True or False: With FrontPage, you can control exactly how your page will appear on everyone's computer.

A) TrueB) False Question 3:In formatting for the web, you need to consider which of the following? (Check all that apply.)

A) Page size to account for monitor differences.B) Browser capabilities.C) From which part of the world people are accessing your website.D) Internet connection speed. Question 4:True or False: Themes are quick, easy ways to change the look of your website.

A) TrueB) False Question 5:True or False: To upload your website, you must be connected to the internet and have a user name andpassword.

A) True

B) False 

Editing web pages

A picture may be worth a thousand words, but it's also a good way to jazz up your website. This lesson coversadding images, hyperlinks, and other items in FrontPage.

 

Edit the home page using copy and paste

Open FrontPage and your last used website should open. If it's not the websiteyou're working on in this course, look to the right side to see a list of recentlyopened websites and click the correct one.

Open your home page (index.htm) by double-clicking it. FrontPage created thispage using the wizard and laid out suggested content, as shown in Figure 4-1.You can click any of the purple text areas to select, and then start typing yourinformation (or copy and paste it from somewhere else) and the selected textdisappears.

Figure 4-1: Home page as created by the Wizard.

Enlarge image

Just because these suggested sections are there, they aren't the only sectionsyou can include. You can edit all pages to meet your needs. For example, youcan include contact information on your home page as this one does, you caninclude contact information on your contact page, or on every page of yourwebsite.

If you want people to be able to easily contact you, include your contactinformation at the top or bottom of every page.

For Butterfly Books, the mission statement is part of the introductory paragraph;therefore, it doesn't need its own section. Highlight the Our Mission section ofthe page (along with the underline that appears under it), and then use yourDelete key on your keyboard or right-click and select Delete to delete thisarea.

Highlight the paragraph that begins with Comment: Write an introductoryparagraph for your home page here . . . After it's highlighted, start typing thefollowing paragraph (or one for your Web page):

Butterfly Books is a volunteer-based library for homeschooling

Hosting your FrontPage site

If you plan on hosting yourown websites, choose an HPProLiant server that deliversa balance of performance,manageability, andexpandability at anaggressive price.

»  HP ProLiant ML110 G4server series

»  Server buying guide

families. We accept donations of any kind that are appropriate forchildren, students, and parent/teachers of homeschoolingfamilies. Butterfly Books can also act as a go between -- if youhave a book you're willing to loan, but only on a controlled one-on-one basis. Let us know and we can list it in our library andhave people contact you directly or contact us and we will be asingle point of contact for you. Butterfly Books is secular andaccepts both religious-based and secular-based books.

If you tried to copy and paste this paragraph, you may have discovered that allthe formatting came with it. This may or may not be what you desire. One badside effect of copying and pasting, especially from Microsoft Word and theWeb, is all the extra code that may get embedded in your HTML page whenyou paste the text. You can see this when you click the Split view of your page.This extra code increases download time when people are viewing yourwebsite. If the file from which you copied uses special fonts, it may look correcton your computer, but other people may get an entirely different look that maynot match what you're trying to achieve.

When copying and pasting from other programs, the best method to use isPaste Special , so you just get the words, but not all the formatting.

To do this, follow these steps:

Highlight the Butterfly Books description paragraph in this lesson.1.Right-click, and then click Copy.2.In FrontPage, click Edit > Paste Special. The Convert Text dialog box3.appears as shown in Figure 4-2.

You may not see Paste Special as an option on the Edit menu if you haven'tused it before. Scroll down to the double arrows at the bottom of the menu andthe entire menu will appear. Microsoft hides infrequently used commands.

Figure 4-2: Convert Text dialog box.

Select Normal Paragraphs to paste the copied text without the1.formatting, and then click Okay.

Your copied text appears in the format matching the existing text and you canformat it further as you desire.

One other caveat with copy and paste is that you shouldn't use it withimages. Often the copy and paste feature, when applied to images, eitherpastes a link to another website or a link to a location on your computer,which may cause your image to not work correctly when uploaded to thewebsite. Images are covered in a later section of this lesson.

Now that you have your paragraph on the main page, add a title above it byclicking in front of the existing paragraph and typing

Books for Homeschooling Families

Press Enter to create a new paragraph.

If you want to enter a new line without the extra spacing between theparagraphs (called leading in the publishing industry), hold the Shift key andpress Enter. This is inserts a line break instead of a paragraph break.

Highlight the line you just created, and then change the font size to 6 (24 pt).Your page should now look similar to Figure 4-3.

Figure 4-3: Your edited home page.

Enlarge image

Remember to use the Undo button if you have any problem and save your filewhen you're finished.

 

Adding lines, bulleted lists, and other effects

Now that you have your description paragraph, you can add other items to thepage, including lines, bulleted lists, and other effects. These are covered in thissection:

Lines and bullets

Under the paragraph you just added in your index.htm page, you can add ahorizontal line (as FrontPage put in to separate the original sections). To do so,follow these steps:

Place your cursor under the Butterfly Books description paragraph and1.select Insert > Horizontal Line.Press Enter to move to the next line, and then enter the following2.information:

Butterfly will be available for borrowing and donating at:

 

Summit View Park Day on the second Friday of the month.

East Valley Educator Park Day on the fourth Tuesday of themonth.

Various Phoenix unschooler events.

As requested.

Members of these groups know the time and location of the listedevents.

After you've entered the information, highlight the middle lines (all1.except the first and last line), and then click the Bullet button on theFormatting toolbar. This creates bullets for these lines.

Other effects

When you use the FrontPage wizard to create a website, you have specialsections on your page called the shared borders. When you use the sharedborder, the information will appear on all pages of your website. You'll use ashared border on this page to move your contact information so it appears onevery page of your website and reformat it so it doesn't take up too much spaceon each page. Follow these steps:

Because of the amount of text in the Contact Information section of the1.Web page, you're just going to delete it and insert new text in the sharedborder. Highlight the current Contact Information section and pressDelete.Place your cursor at the very bottom of the page before the text Send2.mail to . . . and type the following:

Butterfly Books 123 Main Street, Mesa, AZ 85201

480-507-1234 v 602-507-1234 info@butterflybooks.org

Highlight the text you just entered and center it.1.Now change the email address in the Send mail to area to2.webmaster@butterflybooks.org.To insert a special character or symbol, place your cursor where you3.would like the symbol to appear (between Butterfly Books and 123 MainStreet), and then select Insert > Symbol.Scroll through until you find the symbol you like -- in this case the black4.circle under the subset Geometric Shapes, shown in Figure 4-4, andthen click Insert.

Figure 4-4: Symbol dialog box.

Copy the symbol, and place it between the information as shown in1.Figure 4-5.

Figure 4-5: Bottom shared border on home page.

Enlarge image

After you've edited the bottom shared border and saved your file, open anyother page in your website and you'll see that the bottom of the page includesthe information you changed.

Other effects you can use for your text include changing the font (Format >Font), color, alignment, and other features. Just move your mouse over eachbutton on the Formatting toolbar and you'll see the name of the button. Tryeach out and see what it does, and then use the Undo button on the Standardtoolbar to go back if you don't like what changes.

 

Adding images

Of course, information is important, but images are fun! So now you get tospice up your website with some images. FrontPage created images for yourlinks as part of the theme you applied. You can edit these and add additionalimages to your pages.

To add an image to your page, open the page to which you want to add animage. Click in the location where you would like to add the photo, say just tothe left of your Books for Homeschooling Families title, and then click Insert >Picture. By default (without expanding the menu), you see three choices:

Clip Art: To view a selection of free Shareware images to use on yourwebsite.From File: To allow you to pull any image already existing on your computer.

Quick and easy digital images

Having photos on yourwebsite keeps your customerinformed and and helps yourbusiness stay competitive.Digital cameras allow you totake photos from camera toscreen to your website in amanner of minutes.

New Photo Gallery: To bring up an option to create a Photo Gallery for futureuse.

You can also import images from your scanner, camera, use flash movies,drawings, word art, or videos. Just scroll down to the double arrows to seethe rest of the menu options.

Each of these options is covered in the following sections.

Clip Art

To insert an image from Clip Art, follow these steps:

From the Insert > Picture menu, select Clip Art. A new Task Pane1.appears on the right side of your screen.Click in the Search for text area, and then type Books.2.Click Go.3.Scroll through the images shown and click one you like for your home4.page. The image is placed where your cursor was as shown in Figure 4-6.

Figure 4-6: Image placed on home page.

Enlarge image

When images are placed on your page, they're treated as characters,1.which is why the line to the right is now pushed down. To word wrap theline, you must format the image. Right-click the image you placed onyour page, and then select Picture Properties.Click Left under Wrapping style in the Picture Properties dialog box,2.shown in Figure 4-7. Click OK.

»  HP Photosmart M537digital camera series

»  Digital camera buyingguide

Figure 4-7: Picture Properties dialog box.

Your image is now left aligned and the words wrap to the right. Click1.Save.When you saved your file before, it saved automatically. Because you've2.added a new file to your website (the image you just inserted), the SaveEmbedded Files dialog box appears to ask you for a name and locationfor the image you just inserted. The default location is a folder calledimages and the name is the file name you selected, as shown in Figure4-8.

Figure 4-8: Save Embedded Files dialog box.

It's a good idea to store your images in a folder (directory) called images sothey're all in a central location and don't clutter your main folder, which you seewhen you're looking at your Website view.

Click Rename to change the name of your file, such as bookimage.gif,1.so that you can recognize it. Don't change the .gif or .jpg image on theend or the image will not work. Click OK.

Don't forget to close the clip art pane when you're done.

From a file

If the clip art doesn't have an image you want, you can have it custom designedby a graphic artist or go out and search the Web.

If you find an image online that you want to use, check the copyrightinformation on that website carefully. Some clip art websites let you useimages freely, whereas others have very strict copyright rules. Try not tojust randomly use images from other websites because most images arecopyrighted.

Save image shown in Figure 4-9, or another image of your choice, on yourwebsite, to your Desktop or other location you'll remember. Now follow thesesteps:

This image is only to be used as a sample for this course. No other use isauthorized.

Figure 4-9: Butterfly demo file.

Click your page, just left of the top border Home.1.Click Insert > Picture > From file.2.Click Desktop (or other location), select the image you saved, and then3.click OK.The butterfly appears on your page.4.Click Save. It's saved in your Web page and will appear on every page5.in your site.

If you don't like the default page titles, such as Home, Products, and so on, youcan delete the banner by clicking it, and then pressing Delete. The page namesare identified by the navigation buttons, so you can safely place your websitename there instead of the page names. Change the name to Butterfly Books ifyou want.

 

Editing navigation within FrontPage

FrontPage has set up most of your hyperlinks for you, but you may wish to addor edit them. You can examine the existing hyperlinks that FrontPage sets upfor you to see the structure. On the index page, move your mouse over yourproducts button and in the lower-left corner, you'll see a link that looks likeFigure 4-10.

Figure 4-10: Link.

The navigation buttons on the left are dynamically created for you and youshouldn't delete? the actual links for the buttons, but you can easily move andedit the navigation buttons.

Double click [Edit the properties for this link bar to display hyperlinks here].Select Child pages under Home and Home page , as shown in Figure 4-11.Click OK. You can then delete the buttons on the left to give you more room oneach page.

 

Figure 4-11: Link Bar Properties dialog box.

Notice that the Feedback page is above your title banner. To have it appear onyour buttons, click your Website tab, and then click Navigation at the bottom ofthe page. The Navigation view appears, as shown in Figure 4-12.

Figure 4-12: website navigation.

Enlarge image

Feedback sits above the rest of the Web. Simply click and drag it to the right ofServices.

Open any page and you'll now see the Feedback page to the right of your otherpages. You can delete the line [Edit the properties for this link bar to displayhyperlinks here] if you don't think you need it anymore. It won't show when yoursite is on the Web, however, as shown in Figure 4-13.

Figure 4-13: Home page edited.

Enlarge image

Close your home (index.htm) page and open products.htm. Add the followingbeginning paragraph:

Butterfly Books offers and accepts books, magazines, videos,CDs, and any other donated items that will help homeschoolingfamilies. If you have something you would like to donate, pleaselet us know.

Add the following products:

Curriculum

Kindergarten the primary year

Parent Reference Books

Homeschooling: The Early Years, Linda Dobson, PrimaPublishing -- Your complete guide to successfully homeschoolingthe 3- to 8-year-old child.

Student Reference Books

Thesaurus -- A small hand-held thesaurus

Merriam-Webster Dictionary -- A small hand-held dictionary

You may color or decorate these any way you like. The three sections areCurriculum, Parent Reference Books, and Student Reference Books with oneor two entries below them. Your page should look somewhat like Figure 4-14.

Figure 4-14: Products page.

Enlarge image

FrontPage has already set up an internal link for each product if you want tomaintain a page for each one. If you have a very static inventory (one thatdoesn't change very much), this can work well for you; however, if yourinventory changes constantly, you should consider implementing a database.This will be covered in Lesson 6.

For now, this website just uses one simple list of products on one page, so theproduct01, 2, 3 and service01, 2, 3 pages may be deleted by going to theWebsite Folders view, clicking each one, and then pressing the Delete buttonon your keyboard. If you are using them, such as for a small business with afew nonchanging products, then leave them in place.

 

Adding hyperlinks

Hyperlinks may sound new age, but they're really just a pointer to anotherlocation and are easy to implement in your website once you understand whatthey are. There are three types of hyperlinks:

Internal hyperlinks: Point to another page on your website and have just apage name. If your website gets bigger, you may add folders, such asbooks/book1.htm for a link to a page for book1.htm within a books folder.External hyperlinks: Point to another page on someone else's website andmust include the entire path of the location to which you want them to go,such as http://www.hplearningcenter.com. These links take a visitor fromyour website to a new location, so use them sparingly because you have nocontrol over the other website's content.Bookmarks: Go to an anchor within a Web page. A good reason to use thisis if you have a long alphabetical list, such as a directory or list of inventory,where bookmarks can be placed.

In this section, you'll learn how to set up each of the three types of links.

Internal hyperlinks

To create an internal link, follow these steps:

Make sure you're on the products.htm page, and then select the phrase1.please let us know! in the first paragraph.Right-click the highlighted area and then select Hyperlink. The Insert2.Hyperlink dialog box shown in Figure 4-15 appears.

Scan a stack of photos in notime

Adding scanned images toyour FrontPage website hasnever been easier. HP's highperformance scanners allowfor fast scans of up to legalsize documents.

»  HP Scanjet 8300scanner series

»  Scanner buying guide

Figure 4-15: Insert Hyperlink dialog box.

At the top is the text you selected. This will be the underlined hypertext1.information. In the middle is your website directory. Scroll down to findthe feedback.htm page, select it, and then click OK.

Your phrase is now underlined and when people click it, they will go to thefeedback form to send information.

External hyperlinks

To create an external link, follow these steps:

Select the book title Homeschooling: The Early Years.1.Right-click the highlighted area and then select Hyperlink. The Insert2.Hyperlink dialog box appears.Next to the Look in: text area there are three icons that you can use to3.select your hyperlink source. The local website is indicated bybutterflybooks.org and the navigation arrow (Up One Folder). To theright of that is a world icon, which is the Browse the Web option. To theright of that is a folder icon that allows you to Browse for File.Click the Browse the Web icon. Microsoft Internet Explorer opens.4.Go to the website to which you want to link. In this case, you're going to5.visit Amazon.com to find the Web page you want to link to. TypeHomeschooling: The Early Years into the search page on Amazon.com.Click the page for this book, shown in Figure 4-16, and toggle back toFrontPage. That link appears in the hyperlink location.

Figure 4-16: External link on Amazon.com.

Enlarge image

Because Butterfly Books is a volunteer library, it's helpful to users to clickthis link and read reviews or purchase the book.

To the right of the Insert Hyperlink dialog box is a choice for Target1.Frame. The default way to open a new page is right on top of the oldpage, but if you don't want to lose your visitors when they go to a newsite, you might consider opening that link in a new window. If so, clickTarget Frame , and then select New Window.Click OK to return to the Insert Hyperlink dialog box.2.Click OK to return to the Web page.3.

Bookmarks

Right now, there are only four items in Butterfly Books, but hopefully, it willgrow, so each section should have a bookmark to make it easy to go to thesection people want to see. Follow these steps:

Place your cursor to the left of Curriculum.1.Click Insert > Bookmark (scroll down to the double arrows at the bottom2.of the menu to open the rest of the options).In the Bookmark dialog box, enter Curriculum as the bookmark's name.3.Repeat for Parent Reference and Student Reference.4.

Now you can link to those bookmarks in the same way you did other hyperlinksbecause you have created an anchor within the page to link to. You'll see a littlebookmark flag next to the text, as shown in Figure 4-17. These don't appear onyour website when you publish it; they're just for your reference in the Designview.

Figure 4-17: Bookmarks to the left of titles.

Enlarge image

Add a line before the curriculum section:

We offer three sections of books: Curriculum, Parent Reference,and Student Reference.

Highlight each of these words and hyperlink to it by following these steps.

Highlight the word Curriculum. Right-click the selected area.1.Click Hyperlink.2.Click Bookmark (on the right).3.Select the correct bookmark: Curriculum.4.Click OK to return to the Insert Hyperlink dialog box.5.Click OK to return to the page.6.Repeat for the other two links.7.

Hyperlink an image

Hyperlinks can be connected to images or text. To hyperlink an image, followthese steps:

Right-click the image, such as the butterfly at the top of the page. Click1.Hyperlink.Select the home page (index.htm), and then click OK.2.

Now, anytime someone clicks the butterfly, the home page opens. Your pageshould look similar to Figure 4-18.

Figure 4-18: Updated products page.

Enlarge image

You've now added three types of hyperlinks.

 

Upload again

Now that you've made changes, you want to upload your site to the Web.

Click Publish Site, and enter your user name and password. You may get amessage similar to the following:

The file prod01.htm exists on the destinationserver, but does not exist in the currentwebsite. Would you like FrontPage to removeit from "http://www.butterflybooks.org"?

In this case, prod01.htm was just a page created by the wizard and does nothave any important info. In the future, you may want to keep a page forhistorical reasons, but otherwise, if a change is made on your local copy, youwant to make a change on the destination server as well.

Click Yes to remove the files or Yes to All if you don't want it to ask you aboutevery page. When FrontPage is finished updating, open your browser (such asInternet Explorer) and verify that you see your changes. If your page still looksthe same, click the Refresh button to force the browser to pull down the mostcurrent version of the site.

 

Moving on

In this lesson, you learned more editing techniques, added images, andhyperlinks and (possibly) updated your website.

Before you move on, do your assignment and take your quiz for this lesson,and then head over to the Message Board for comments and questions.

In Lesson 5, you'll learn about tables and forms.

Assignment #1

Add at least two more hyperlinks to your website, with one being an external link and updateyour actual website. Make changes to any web pages you wish, add hyperlinks, and thensave.

 

Quiz: #1

Question 1:True or False: If you make a mistake in editing FrontPage web pages, you can normally use Undo to reversethe change.

A) TrueB) False Question 2:What are the three types of hyperlinks? (Check all that apply.)

A) InternalB) ExternalC) PagesD) Bookmarks Question 3:True or False: You can hyperlink an image or text.

A) TrueB) False Question 4:True or False: To update your website online, you simply click Publish Site and enter your user name andpassword.

A) TrueB) False 

Creating forms and tables

Forms and tables give you more control and interaction with your visitors. In this lesson, you'll learn how tocreate these elements.

 

What are forms and tables?

In Lesson 4, you learned how to edit your web pages and add items such asbulleted lists, images, and hyperlinks. In this lesson, you're taken even furtherinto your website. You'll learn how to insert forms and tables into your website.

Forms allow you to receive input from your users, for example, feedback onyour website, which is the example you'll see in this lesson. Tables on the otherhand, are used for several reasons in web pages. The traditional use of a tableis to organize data in a logical form, as you'd see in a Microsoft Excelworksheet for example and in this lesson. The other, more recent use of tablesin web pages is to layout the information on the web page.

 

 

Examine and edit a form

Now let's get started. Open FrontPage and open your Feedback page (feedback.htm) to see a form and a table.

The form is indicated by the dotted line just above the comment. Rememberthat comments aren't visible to your website visitors. They're for yourinformation. This comment tells you where the results of your form are kept; inthis case, in _private/inforeq.txt on your web host, as shown in Figure 5-1. InLesson 6, you'll go to that location to retrieve information from your website.

Figure 5-1: Form Page as the Wizard created it.

Enlarge image

Edit text

This page may or may not meet your needs. You can edit it in many differentways.

Use caution when deleting on a form because there's code behind thescenes you may delete and the form will no longer work.

You can edit text directly, such as the wording at the top of the page. Youcan change the current text to the following. By editing this paragraph, youmake your form a more generic item that can be used in many areas.

Please feel free to tell us what you think about our website,

See clearly

If long hours working inFrontPage have yousquinting at your screen,switch to an HP flat panelmonitor with an anti-static,anti-glare coating, whichhelps reduce reflection, glare,eyestrain, and fatigue.

»  HP L1940T flat panelmonitor

organization, or services. We welcome help and donations, aswell as requests for specific items. Please provide us with contactinformation and we will contact you in response to yousuggestions, thoughts, needs, or donations.

You can freely change the headings. For example, you can remove theCategory heading or edit it.

Form elements

All the boxes and buttons you see are called form elements. You can see a listof form elements by clicking Insert > Form and a list appears. You'll use manyof these elements in this lesson. Category is a drop-down box, with a limitednumber of choices. If you double-click it, the Drop-Down Box Properties dialogbox appears with the choices currently listed, as shown in Figure 5-2.

Figure 5-2: Drop-Down Box Properties dialog box.

Enlarge image

The current categories are as follows:

websiteCompanyProductsServices

Categories

In this section, you're going to alter these categories to fit your needs. Justfollow these steps:

Double-click Products to open the Modify Choice dialog box.1.Type Request over Products, and then click OK to return to the Drop-2.Down Box Properties dialog box.Double-click Services, and then type Donation over Services. Click OK.3.

This provides visitors some ideas of feedback they might want to give.

You can also move Donation up to the top so it's the first choice people haveand add other choices by clicking the choices to the right.

Click OK to return to the form. (If FrontPage asks for an integer, just enter 1. Ifyou don't get this request, don't worry about it.)

Below the Contact Information section, there are five text boxes. If you double-click any of the boxes, the Text Box Properties dialog box appears, which isimportant in identifying the information coming in.

Text box labels

If you change any of the labels to the left (Name, Company, Phone, Fax, andE-mail), it doesn't affect the text box name, which is hidden in the code. Thetext box name labels the information that you get from a website visitor, so it'simportant to have it labeled correctly. Follow these steps:

Double-click Company. In the Text Box Properties dialog box, change1.the name to Homeschooling Group Affiliations, as shown in Figure 5-3.

Figure 5-3: Text Box Properties dialog box.

Click OK.1.You receive a Name is not valid error that warns you can't use spaces2.on names. Click OK. The dialog box closes and the name is changed toHomeschooling Group Affiliations.

When you name your form fields, a good rule is not to use spaces. AlthoughFrontPage warns you regarding spaces, it allows you to use that name.However, for later compatibility with code, name your fields something likeHomeschoolingGroupAffiliations or Homeschooling_Group_Affiliations(underscores are used in the second name). This allows you to use JavaScript,VB Script, ASP, or some other coding language without having to rename allyour fields.

Text box validation

You can also require that your visitor enter certain information, such as aname, or the form will not accept the submission.

Double-click the name box, and then click the Validate button. The Text BoxValidation dialog box appears as shown in Figure 5-4.

Figure 5-4: Text Box Validation dialog box.

Enlarge image

You can then click the Required Field and select a minimum length if you like.Click OK , and then click OK again to get back to the form. Save your form, butdon't close it.

Numbers

You can also use text boxes to input numbers. You just double-click the fieldyou want to restrict to numbers and change the data type at the top of the TextBox Validation dialog box to limit input to text, integers, or numbers. Dependingon which you select, you'll then have additional choices for Text Format,Numeric Format, and Data Values.

Use Validation sparingly because you don't want to aggravate your visitors.

Any time you implement validation, be sure to test your form thoroughly to besure you haven't inadvertently limited valid data. Also realize that just requiringthe field to have information in it doesn't prevent visitors from entering junk.Some visitors may wish to send good information, but not want to share theirname or other information with you.

Validation is most useful on an order form to check for a credit card number,totals, or other information truly needed to complete an order accurately.

 

Examine and edit a table

A table is a collection of rows and columns that aligns information in an easy toread format. At the bottom of the form, there's a small table, which you may'venoticed when you were looking at the Contact Information in the previoussection. The purpose of this table is to align the form field names with the entryboxes to which they relate.

Although you changed the name of the text box from Company toHomeschooling Group Affiliations, this didn't affect the label to the left. Theyaren't related.

Double-click the word Company to select the entire name, and then typeHomeschooling Group Affiliations over it.

Do it all with one machine

An HP all-in-one is the must-have printer for yourbusiness. Print, scan, copy,and fax, all with the samemachine--even performingmultiple tasks at once.

Notice the table expands to accommodate this new long name and because allthe names were right-aligned, they're still up against the text box to which theyrefer.

Click Preview view to see the form. The light lines you saw in Design view werejust for your help and aren't visible to your visitors, as you can see in Figure 5-5.

Figure 5-5: Table in Preview view.

Enlarge image

Go back to Design view. To add a column or line, follow these steps:

Move your pointer to the top or left edge of the table to see the mouse1.shape turn to a heavy black arrow.Click when the pointer is this shape on the left of Telephone to select2.this line.Select Table > Insert > Rows or Columns, as shown in Figure 5-6.3.

Figure 5-6: Selecting Insert > Rows or Columns with selected row.

Enlarge image

In the Insert Rows or Columns dialog box, the default is to insert one1.row Below selection, as shown in Figure 5-7.

»  HP Officejet ProL7500/7600/7700 color all-in-one series

»  HP Onsite hardwaresupport with diskretention service

Figure 5-7: Insert Rows or Columns dialog box.

Select Above Selection, but leave all other selections the same.1.Click OK. You now have a new row above Telephone.2.Click in the new cell to the left, and then type Interests.3.Click Name, and click the Format Painter button (looks like a brush and4.is next to the Paste button) on the toolbar to copy the text formattingfrom the Name cell.Click the word Interests to apply the text formatting to it.5.Click in the new cell to the right, and then select Insert >Form >6.Textbox.Double-click the new text box. In the Text Box Properties dialog box,7.enter the Name Interests.Change the width to 35 to match the other text boxes, and then click OK.8.

Now you've created a new row in your table. Save your work and closefeedback.htm .

 

Add a table

Now that you know how to modify a table, you can add a table in any page. Ifyou'll recall, the Products page was just a list of items, but if you want to addmore information, such as the checked in and checked out status, cost, wantedby, owned by, and so on, it might be better served by a table of information.Follow these steps:

Open your Product page (products.htm).1.Click to the left of Homeschooling: The Early Years.2.Click Table > Insert > Table. The Insert Table dialog box appears, as3.shown in Figure 5-8.

 

Figure 5-8: Insert Table dialog box.

You can experiment by creating and undoing tables with each feature1.chosen. As you saw in the last section, determining the exact numberrows and columns is not critical because you can easily add or removerows and columns. Rows are fine at 2 because FrontPage adds a newrow when you reach the bottom.Change the Columns to 6.2.Here are some other selections you may want to change:3.

Alignment changes the position of the entire table in the web page. It doesnot affect the data in the cells and if the width of the table is 100%, there willbe no difference in Alignment. Select Center.Float is like Picture Properties wrap. It only affects a table that is smallerthan the entire page. Leave this as Default.Cell padding allows you to select the amount of space, in pixels, betweenthe cell border and the contents within that cell. The same padding appliesfor all of the cells in the table. Make sure this is 0.Cell spacing allows you to select the amount of space, in pixels, you wantbetween the cells in the table. The same spacing applies for all of the cells inthe table. Make sure this is 0.Specify width and height sets the width and height of the entire table. Youcan use pixels or a percentage of the current browser window. CheckSpecify width and select In percent. Enter 100.Borders allow you to change the width and color of the table and cellborders. Light and dark borders don't appear until you select a color in thecolor box. They form together to make a table look 3D. Make the border 0.Background Color changes the background color of the table. You can alsochange colors of individual cells. Leave this as Automatic.Use background picture adds a graphic to the background of the table. If youuse this feature, be sure your information is still readable. You aren't usingone for this table.Set as default for new tables automatically creates future tables with thesame layout, border, and background color settings you have just set. Don'tcheck this.Style allows you to create or change special styles for just this table andoverride any styles currently in use. Don't do anything with this.

Experiment with these options on your own if you'd like.

Click OK.1.Type Title.2.Press your Tab key to go to the next cell.3.Type Author.4.Continue to enter Publisher, Description, Availability, and Location in5.each of the cells, using Tab after each entry until you're on the nextrow.Now highlight and drag each entry from Homeschooling: The Early6.Years to the appropriate location in the table and add Available andLibrary to the last two columns.Bold your Title line and edit each entry to look nice in the table. Your7.page should look similar to Figure 5-9.

Figure 5-9: Edited products page.

Enlarge image

Save and close your work.1.

 

Create a new form

In the Lesson 4, you hyperlinked the feedback form to your request fordonations on the products page, but you can create a new form specifically fordonations and leave that one to be used for other feedback.

Text boxes and text areas

To create text boxes, follow these steps:

Open your Services page (service.htm) and insert the following text:1.

Butterfly Books appreciates donations and is currently looking forthe following items: Curriculum, Bob books, and General bookson homeschooling. If you would like to donate, please fill in theform below. If you have a request or need, please fill in ourfeedback form.

Hyperlink feedback form to go to the feedback form and bullet the list of1.items.

Back up your website

Back up your website to atape drive, the popularbackup choice that providesthe perfect balance betweenlow cost and high reliability.

»  DAT tape drives

»  Storage product selectortool

Delete the product list that was originally entered by the wizard. You'll2.create a form here instead.Click Insert > Form > Textbox.3.Your page should look similar to Figure 5-10. Notice that FrontPage4.inserted the text box, two buttons, and there's a dotted line around theentire section.

Figure 5-10: Inserted form.

Enlarge image

The dotted line indicates where the form is. Right-click in this area and1.select Form Properties. The Form Properties dialog box appears andshows you the file where your information will be stored when people fillin your form. It's most secure to leave information on the server andretrieve it later, but if you won't have any credit card information, youmay add your email address here to get a copy of the form data as soonas it's submitted, as done in Figure 5-11. Click OK.

Figure 5-11: Form Properties dialog box.

The Submit button is a required form item in order for visitors to send their datato you, but the Reset button simply clears the form data. If a visitor is unfamiliarwith the Reset button and clicks it after filling it in, it will erase everything justentered. Continue modifying the form by following these steps:

Delete the Reset button by clicking it, and then pressing Delete.1.Move your cursor between the text box and Submit button. Press Enter2.to create a line between the text box and Submit button.Move your cursor to the left of the text box, and then type Name:.3.Double-click the text box, and then change the name of T1 to Name.4.Click OK.Move to the end of the Name text box. Press Enter, and then type5.

Donation:.Click Insert > Form > Text Area. This allows visitors to fill in a long,6.detailed list.Press Enter.7.Double-click the text area, and then change the name of S1 to Donation.8.Click OK.

Option buttons

To insert option buttons continue the previous steps, and follow theseguidelines.

On the next line, type Deliver to: and then press Enter.1.Click Insert > Form > Option Button. This places a radio button on the2.form. Now you can enter choices.Type Summit View Park Day on the second Friday of the month and3.then press Shift+Enter to create a line break (no space between lines).Click Insert > Form > Option Button to place a second radio button on4.the form.Type East Valley Educator Park Day on the fourth Tuesday of the month5.and then press Shift+Enter.Click Insert > Form > Option Button to place a third radio button on the6.form.Type Other and then press Enter.7.Double-click the first option button to open the Option Buttons8.Properties dialog box, shown in Figure 5-12. Option buttons work as agroup and to require your visitors to pick only one of your options, theymust all have the same group name and different values.

Figure 5-12: Option Buttons Properties dialog box.

Change the Group name to Delivery on each option button and then1.change the Value to SummitView, EVE, and Other, respectively. ClickOK after finishing each one. You may also wish to change Selected forSummitView to Not selected to ensure that someone actually selectssomething rather than just leaves it as a default.

Group names must be exactly the same when you create an option groupor they're considered separate groups.

Checkboxes

To create checkboxes, continue with the preceding steps, and follow these:

Under the Deliver to list, type Please check the type of donation: and1.then press Enter.Click Insert > Form > Checkbox. This places a checkbox on the form.2.

Type Parent, and then press Shift+Enter.3.Repeat Steps 2 and 3, to enter checkboxes for: Child, Curriculum, and4.Reference.Unlike radio buttons, a list of checkboxes can have multiple entries at5.the same time.Double-click each checkbox and then add a Name of DonationType and6.the correct Value for each checkbox.Your form should look similar to Figure 5-13.7.

Figure 5-13: Final form.

Enlarge image

Moving on

In this lesson, you created and edited forms and tables and (possibly) updatedyour website.

Before you move on, do your assignment and take your quiz for this lesson,and then head over to the Message Board for comments and questions.

In Lesson 6, you'll learn how to retrieve form information and a little aboutdatabases.

Assignment #1

If you would like, add a table to the form you just created on the services.htm page andupdate your actual website.

Your services.htm page may now look similar to Figure 5-14.

Figure 5-14: Possible form layout.

Enlarge image

This example was created using Table > Insert > Table with the following settings:

2 columns2 rows (extra rows added by tabbing)90% width

Then drag and drop text into the table, removing extra spaces and right aligning data inthe left column.

If you have troubles, post them on the Message Board.

 

Quiz: #1

Question 1:True or False: You need to edit form elements for them to have the correct names.

A) TrueB) False Question 2:True or False: You can make all the form elements required.

A) TrueB) False Question 3:Which of the following are examples of form elements? (Check all that apply.)

A) Text boxB) Text areaC) Text listD) Checkbox Question 4:True or False: You can use a table to align fields in a form.

A) TrueB) False Question 5:True or False: Tables can be used to align any kind of data.

A) True

B) False 

Retrieving data, and using e-commerce and databases

In this final lesson, you'll learn to communicate with your visitors and let them interact with you using forms, e-commerce, and databases.

 

Retrieve and review form data

You need to have your Web host active to complete this section.

If you haven't yet tested your forms on your website, do so now and enter datainto both forms. When you click submit, you should receive a message as inFigure 6-1.

Figure 6-1: Form confirmation.

Enlarge image

If you set your form to send email in Lesson 5, you'll receive an email from theform on the services.htm page.

To see the data from your forms, follow these steps:

Open FrontPage and open your website. Click the Remote Web site1.view to see the files on your server.Make sure Publish all changed pages is set to Synchronize and click2.the Publish Web site button shown in Figure 6-2. This brings changedpages down to your local computer as well as uploads any changesyou've made.

Figure 6-2: Synchronize Web pages.

Click the Folders view to see all the folders in your website.1.Double-click _private folder to see the files it contains. There are two2.locations for data from your two forms:

The guidance youneed

Whether this is your firstwebsite or your fiftieth, youcan benefit from HP's yearsof servers and storageexpertise.

»  Servers & Storageexpertise center

_private/inforeq.txt contains form data entered on the originalfeedback.htm page.

form_results.csv contains form data entered on the newservices.htm page.

You can see the feedback from your visitors by double-clicking each page tosee the data contained within. Figure 6-3 shows data from form_results.csv(CSV stands for Comma Separated Values). The other feedback file isinforeq.txt and is in tab-delimited values, there are tabs between each value asopposed to commas in the other file.

Figure 6-3: View feedback data pages.

Enlarge image

Notice the last field name on the right is B1 -- that's the default name of theSubmit button that was not changed. If any of your other fields have differentnames, go back and check your form.

Each time a visitor submits a form, the information is appended to the endof the file.

The CSV and tab-delimited formats are common data file types that can beeasily imported into a number of databases, such as Microsoft Access, MySQL,Microsoft Outlook, and with some work, QuickBooks.

 

Add e-commerce with PayPal and review advanced options

If you have items you want to sell, there are several different choices fromcompletely manual to completely automated. Normally, small businesses fallsomewhere in between.

Basic method

The most basic way to sell items on the internet is not much different fromselling them in a magazine or direct mail or classified ads. You list items onyour website, along with description, availability, price, shipping, and taxinformation, and then list your payment methods.

 

If you're very small or just starting out, you may consider allowing customers tosend money orders or checks, but this can cause delays at the least andbounced checks at the worst.

Getting a merchant account is certainly not too difficult, but if you're unsure howyour business will go or whether you need credit card merchant services, youcan start out using PayPal.

PayPal.com is a website that allows you to accept credit cards without goingthrough a large difficult process and may end up being all you need. Theirhome page is shown in Figure 6-4.

Figure 6-4: Paypal.com home page.

Enlarge image

The advantages and concerns of ecommerce in general range from simplicityto security. Some important ecommerce topics include:

Fees: PayPal (and any merchant services) charges a transaction fee forusing the service. This fee is assessed to the seller, not to the buyer, so ifyou list something for sale on your website at $10 and a buyer pays withPayPal, it will cost them $10. However, you'll only get about $9.35 becausePayPal assesses $.35 per transaction and approximately 2.9 percent of thesale (you get a lower rate if you increase your volume). So, if you usePayPal, be sure to increase the sale price to cover this cost.Security: When you set up PayPal on your website, you'll create a button onyour website that passes the information to PayPal where they have asecure site. If you select to process credit cards on your own website, sayyou have a credit card processor already in your store, you need to set up anSSL (Secure Sockets Layer) on your site. This is normally done by yourhost, so check with them to verify this. If you select this route, don't send thecredit card information from your form to an email account because that's notsecure. Be sure to gather the information from your form as in the earliersection.Shipping: If you offer shipping of your items, be sure to visit your local postoffice to get a realistic idea of what it will cost to ship your product.Remember that there are different costs to different Zip codes and the mostexpensive is not always the farthest away.Taxes: This is a sticky issue. If you're selling items to another person withinyour state, in most states, you're required to have a Tax TransactionLicense, collect tax from your customers, and pay to your state and regionalagencies. If you sell to people in other states, the burden is normally on thebuyer to report that purchase and pay the appropriate tax to their stateagencies. It's no surprise that states are working on a better method tocollect tax, so be aware of changes if you go down the road of e-commerce.Shopping carts: If you visit a website such as staples.com, you can browsethe huge inventory, select items, and those items are tracked for you in yourshopping cart while you continue to browse. When you're ready to check out,the items are totaled and you enter your payment and shipping information.

This is all tracked through a database and programmed pages. Some hostsoffer this feature and PayPal also has a shopping cart feature. Be aware anyshopping cart requires a learning curve and if you have less than 10 items orif your inventory is fairly static or already set up on another system, this maynot be your best choice, but if you find a need, try the PayPal cart or doresearch on other shopping carts.

The quickest, easiest way to sell online and accept credit cards is still PayPal.

PayPal used to require your customers to set up PayPal accounts, butthat's no longer true.

Go to PayPal.com and set up an account to use PayPal on your website. Youcan read more about accepting PayPal, as well as step-by-step directions onusing it under Merchant Tools.

How to get started

Here's how you get started in PayPal:

Log in to your PayPal account (you may create an account at no1.charge).Click the Merchant Tools tab.2.Click the Buy Now, Donations, or Shopping Cart links and create a3.payment link or button for the item you want to sell. The Buy Now buttonthen asks you for information on the item you're selling as shown inFigure 6-5.

Figure 6-5: Buy Now button creation form.

Enlarge image

Fill it in with your product information, such as:1.

Item Name/Service: Homeschooling: The Early Years

Item ID/Number: 0761520287

This Item ID is the ISBN number, because it's a book. You can usewhichever number you like.

Price of Item/Service you want to sell: $12.00

Currency: U.S. Dollars

Buyer's Country: United States

Click Encrypted to protect your data from being changed. The only time1.you don't want to use Encrypted is if you need to allow your customersto indicate size, color, or other options. However, you could simplycreate a button for each size, color, or option.Click More Options at the bottom of the Create Button page. Be sure2.you have included Sales Tax and Shipping in your price, or you can addthese features to your PayPal account here, as well as the followingoptional capabilities to select from:

Shipping Cost Calculation: PayPal will calculate shipping based on flat feesor rules you set up.Sales Tax Calculation: PayPal will calculate sales tax based on rules you setup.Option Fields(if not encrypted): This will help you create drop-down optionboxes that you'll need to cut and paste into your HTML.Customize Payment Pages: You can edit PayPal's payment pages to looklike your own, but this takes a bit of HTML experience. It's a good way to usePayPal and make your website look professional.Customize Buyer's Experience: It's important to put your own Web addressin here or else PayPal will leave them on a PayPal page. Consider makingtwo new pages called thanks.htm and sorry.htm (as shown in Figure 6-6) toforward them to thanking them for their payment or apologizing for notmeeting their needs if they decide to leave without actually completing thepurchase.

Figure 6-6: Buy Now button options.

Enlarge image

Multiple Item Purchase: If you're selling widgets, it's likely you want to offermultiples. If you only have one to sell, you don't want to allow them to buymore.Shipping Address: You will need this to mail the item unless you are sendingan email item or service.Note: Click Yes to allow customers to add a note -- always a good idea tohelp increase communication.Email address: If you have multiple addresses with PayPal, you can selectwhich one to use.

Click Create Button Now and PayPal will provide you with code to use in1.your website to create this button. This code will be long. Be sure tohighlight everything in the code box and copy it.Open FrontPage and open your products.htm page.2.

You can't undo this action. Be sure to save your page first, and then if itdoes not work correctly, you can close the page without saving.

Place your cursor where you would like the button on the page, say right1.after the book title.Click Split view.2.Click in the code area above where you see the text (be sure not to click3.between any of the < > HTML tags.Click your Paste button and the code from PayPal will be pasted into4.your code. Your Design view may have a broken image. That's fine.Click Preview view to see if your page has a Buy Now button.5.

It's not in a perfect position and if you don't like it, close your page withoutsaving, open it again, and paste the code in a different place until you get it tolook like you want.

When you do, save and close your page.

 

Databases and ASP

If you're selling multiple items that constantly change, or manage a nonprofitwith a membership list or other types of information, consider implementing adatabase. This is a large step that requires an investment of time and likelymoney, so it's most beneficial for those whose inventories change frequentlyand who will sell a large enough volume to recoup the investment.

If you don't have this level of business, feel free to skip this section.

The benefit of a database is to allow visitors to see the information they want tosee and to allow for changes. Once developed, a properly designed databasewill run mostly untended. An example of a website with a back end database isthe Central Arizona Paddlers Club Gear Listing page shown in Figure 6-7.

Figure 6-7: Central Arizona Paddlers Club Gear Sales page.

Enlarge image

Although Central Arizona Paddlers Club is a nonprofit organization, it uses sixtables to store the following information:

Gear sales: Where people can place used items for sale.River issues: Where people can submit information that affects others.

 

Trip reports: Where people can enter a narrative about trips they take.Trip calendar: Where people can list upcoming trips (admin only).Calendar: Where upcoming meetings can be listed (admin only).Passwords: Where administrator passwords are listed to allow access to thelast two tables.

A database is a collection of information, such as the collection you laid out in atable in Lesson 5. If you create your data in this manner, it will be easier later tostep up to a database when you grow to that level. There are three basic kindsof databases:

Flat file: The databases can be text, comma-separated values, or a MicrosoftExcel file. These files can store information, but each table is simply a list ofinformation like the table you created in Lesson 5.Local database: These are databases such as Microsoft Access andFileMaker Pro. These are real databases that include several tables and canlink information between tables, as well as include queries to pull only aselect group of information from the database.Web only database: These are databases such as such as MySQL,PostGres, SQL Server, and Oracle. These are larger scale databases thatcan be created and maintained on a Web server and accessed fromspecially coded Web pages.

Of the databases listed, Microsoft Access is the most flexible. It can work bothlocally and on a Web server. In earlier versions of FrontPage, you could easilyadd an Access database and then integrate it into your website and pullinformation for display on your Web page using FrontPage exclusively.

However, FrontPage 2003 limits data automation to websites located on a Webserver running Microsoft Windows SharePoint Services. This is not the sameas FrontPage extensions. SharePoint Services are built on the Microsoft .NETFramework, and provide the component-based platform required for FrontPagedata-driven functionality that will allow you to add data features and customdesigns and page elements to your FrontPage website.

These Data Views can extract data from a variety of available data sources,such as XML (Extensible Markup Language) files, Web services, SharePointlists, and OLE DB-compliant databases such as SQL Server, DB2, and Oracleand create custom views of that data on a Web page.

However, you can still create databases and directly pull the information bywriting in ASP (Active Server Pages) or PHP (PHP Hypertext Preprocessor) topull data manually from Access, SQL Server, MySQL, PostGres, and others.However, this will take learning ASP or PHP to create data functionality.

ASP is recognized by FrontPage because it's a Microsoft creation. To learnASP, you need to dedicate significant time to it, but it's not impossible and ifyou decide to include a database on your website, you can at least decidewhether to learn it yourself, get a server to support SharePoint or hire someoneto write your ASP for you.

Central Arizona Paddlers Club uses PHP and MySQL, but you cannot tellwhich database it uses from looking at the website. Any database and anycoding can be integrated with FrontPage, but it has to be hand coded in theCode view.

Central Arizona Paddlers Club uses standard forms to input information as inFigure 6-8, but instead of being stored as in your form, the information ispassed to a coded page that inserts it into a database.

Figure 6-8: Central Arizona Paddlers Club Gear Input page.

Enlarge image

This information is then brought up the next time someone accesses the GearSales page.

Please respect the fact that this website is open to the public and only enterdata if you have relevant data to enter. So far, this has been a useful publicwebsite, but if abused will have to be passworded for members only.

Databases are powerful additions to your website and are normally the nextstep in development. Examine your options and determine if a database wouldbe useful to your site's purpose.

Moving on

In this lesson, you learned how to retrieve form information and a little about e-commerce and databases. This course is a good starting point for creating andmaintaining your own website. You'll always keep learning as long as you wantto work with websites.

Meanwhile, do your assignment and take your quiz for this lesson, and thenhead over to the Message Board for comments and questions.

Assignment #1

Enter data into your form and retrieve the information.

You should be able to enter data into both forms and then synchronize your website and open thefiles under _private to retrieve the data. If you're getting any error messages, make sure you haveFrontPage Extensions on your server, check with your web host, and if you still have troubles, postthem on the Message Board.

 

Quiz: #1

Question 1:True or False: You'll always get your data the minute someone fills in your form.

A) TrueB) False Question 2:True or False: You can import the CSV file into a local database.

A) TrueB) False Question 3:If you're implementing e-commerce, you need to be concerned about which of the following? (Check all thatapply.)

A) SecurityB) Sale PricesC) FeesD) Taxes Question 4:True or False: When you paste HTML, you can undo if you make a mistake.

A) TrueB) False Question 5:True or False: All databases can be used with FrontPage 2003 and do not require knowing any coding.

A) TrueB) False 

© 2003 - 2007 Powered, Inc.