FRONTPAGE 2002 – LEVEL 1 LESSON 1: CREATING A WEB A. Planning: Things to Consider Before Creating a Web ......... 2 Webs versus the World Wide Web ....................... 2 The Web Creation Process ............................. 3 Are You a Good Web or a Bad Web? .................... 4 B. Creating an Empty Web ................................. 10 View an Existing Web in FrontPage ...................... 10 FrontPage Templates ................................. 12 C. Creating a Home Page .................................. 17 What is a Home Page? ................................ 17 D. Adding Text to a Page ................................... 21 E. Applying Text Formatting ................................ 22 LESSON 2: WORKING WITH TABLES A. Inserting a Table........................................ 26 B. Editing a Table’s Structure ................................ 27 C. Formatting a Table...................................... 28 D. Converting a Text File into a Table ......................... 31 E. Splitting a Table......................................... 32 LESSON 3: CONNECTING PAGES A. Adding Hyperlinks to Pages .............................. 34 What Is a Hyperlink? ................................... 34 B. Creating a Shared Border ................................ 37 C. Adding Pages to a Web’s Navigation Structure .............. 39 Importing a File versus Inserting a File..................... 39 CONTENTS iii Reference Material Please Do Not Copy
Transcript
FRONTPAGE 2002 – LEVEL 1
LESSON 1: CREATING AWEB
A. Planning: Things to Consider Before Creating aWeb . . . . . . . . . 2
ABOUT THIS COURSEMicrosoft FrontPage 2002 is a desktop software application you can use to create, edit, andmanage web sites, whether for an intranet or for the World Wide Web.
How would you like to save time on the job? Whether you’re a seasoned webmaster or readyto create your very first web site, who wouldn’t? Because FrontPage is a flexible, WYSIWYGsoftware application, you don’t have to waste valuable development time learning and applyingthe technological, background complexities that go into creating a web site and its pages. (Infact, FrontPage uses many of the same features as other Microsoft Office applications. So, forinstance, if you know how to bold text in Microsoft Word, you already know how to do it inFrontPage.) Although FrontPage can and does do most of the “geek” stuff for you, allowingyou to concentrate on shaping your site’s content, it also provides easy access to and integra-tion with higher-end web technologies—sure to satisfy even the most Web-savvy veteran.
FrontPage now also allows web developers to import, edit, and format their own HTMLcode.
Course PrerequisitesTo ensure your success, we recommend you first take the following New Horizons course or haveequivalent knowledge:
• Windows 2000 - Level 1
• Word 2002 - Level 1
• Word 2002 - Level 2
• Internet Explorer 5.0 - Level 1
A recommendation is that students have experience surfing the World Wide Web. It is alsorecommended, but not required, to have taken the following New Horizons course or haveequivalent knowledge:
• HTML 4.01: Web Authoring - Level 1
ABOUTTHISCOURSE
v
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
How ToUse This Book
Asa LearningGuideEach lesson covers one broad topic or set of related topics. Lessons are arranged in order ofincreasing proficiency withFrontPage; skills you acquire in one lesson are used and developedin subsequent lessons. For this reason you should work through the lessons in sequence.
We organized each lesson into results-oriented topics. Topics include all the relevant and sup-porting information you need to masterFrontPage, activities allow you to apply thisinformation to practical hands-on examples.
You get to try out each new skill on a specially prepared sample file. This saves you typingtime and allows you to concentrate on the skill at hand. Through the use of sample files,hands-on activities, illustrations that give you feedback at crucial steps, and supporting back-ground information, this book provides you with the foundation and structure to learnFrontPage quickly and easily.
Asa Review ToolAny method of instruction is only as effective as the time and effort you are willing to investin it. In addition, some of the information that you learn in class may not be important to youimmediately, but it may become important later on. For this reason, we encourage you tospend some time reviewing the topics and activities after the course. For additional challengewhen reviewing activities, try the “what to do” column before looking at the “how to do it”column.
Asa ReferenceThe organization and layout of the book makes it easy to use as a learning tool and as anafter-class reference. You can use this book as a first source for definitions of terms, back-ground information on given topics, and summaries of procedures.
CourseObjectivesIn this course, you will create, edit, and publish web pages that include formatting, FrontPagecomponents, tables, text, and images.
You will:
• identify site-planning considerations, create a new web, a home page, and add and formattext on the home page.
• create and modify tables.
• connect pages.
• add, edit, and link pictures, as well apply and modify themes.
• prepare a web for publishing.
ABOUTTHIS
COURSE
FrontPage 2002 – Level 1vi
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Creating a Web
Lesson Objectives:In this lesson, you will identify site-planning considerations, create a new web, a home page,and add and format text on the home page.
You will:
• identify guidelines in the web creation’s planning stage.
• create an empty web based on the Empty Web template.
• create a home page.
• add text to a page.
• apply character and paragraph formatting to text.
Data Files:none
Lesson Time:60 minutes
LESSON 1
LESSON 1
Lesson 1: Creating aWeb 1
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
IntroductionYou’ve been given the assignment to create a web site for your company. You’ve gotMicrosoft FrontPage 2002 installed and have some great ideas. You’re ready to launch theapplication and begin pounding out web pages! Not so fast! Although your enthusiasm is to beapplauded, and you will be well underway before this lesson is complete, it’s important to takea moment to step back and look at the big picture. For instance, what is a site? What actuallygoes into creating a site? And so on.
Once you understand what typically goes into creating a new web, you will be better preparedto examine existing webs, as well as create your own. You will be able to avoid unnecessarypitfalls, and potentially save you and your company embarrassment.
TOPIC APlanning: Things to Consider BeforeCreating a WebBefore doing anything else, the first step to creating a successful web is to put a web plan inplace.
Benjamin Franklin once wrote in Poor Richard’s Almanac “...a little neglect may breed mis-chief: for want of a nail, the shoe was lost; for want of a shoe the horse was lost; and for wantof a horse, the rider was lost...”
You don’t want your site to become lost in the Web shuffle. A clear understanding of whatgoes into creating a good web, coupled with intensive planning before you begin producingany web content, will help you create a clear reason and plan of attack that could save youcountless hours of damage control later—when excuses won’t matter. Remember, the competi-tion’s site is only a click away.
Webs versus the World Wide WebThe word “web” can be quite vague and it would be best if we cleared up any confusion as towhat we mean by this term and all it entails.
Definition: In the context of FrontPage, a web is a specially designated folder location, orsite, on either your hard drive or on a Web server. Within a web’s folder,sometimes called the root folder, there can be multiple web pages—documentswritten in HyperText Markup Language (HTML) with unique filenames andlocations—a variety of subfolders, and even other webs, called subwebs. Inshort, a FrontPage-based web is a container to store and manage related files.A web is not to be confused with the World Wide Web, or the Web, which is asystem of Internet servers that store, or host, individual webs.
LESSON 1
FrontPage 2002 – Level 12
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
We will use the terms “site,” “web,” and “web site” synonymously. We willalso use “web page” and “page” interchangeably.
Example: A good example of a large web is Microsoft’s site. The web is located at:http://www.microsoft.com/. It contains thousands of subfolders, such as theFrontPage folder:http://www.microsoft.com/frontpage/, and individual webpages, likehttp://www.microsoft.com/frontpage/using.htm. As large as it is,the Microsoft web is only a small part of the World Wide Web.
Analogy: Think of the World Wide Web as the supreme public library with millions ofbooks (webs). Each book has its own pages (web pages) that cover a particularsubject. And as you might expect, some books are best sellers and others neverget read.
The Web Creation ProcessCreating a web can be distilled into the following cyclical process: Planning, Producing, andPublishing, as shown in Figure 1-1. Although extremely simplified, each stage includes a vari-ety of steps you should take to ensure a site’s success.
Figure 1-1: The web site creation process.
Planning, which we will get to in a moment, is the most overlooked stage, even though it’s thefirst step. Production, which makes up the bulk of this course, includes the actual creation ofthe web and its content—the building, connecting, and maintaining of web pages. The laststage ispublishing, which means putting the web somewhere, typically on a Web server, sothat it will be accessible to your audience.
LESSON 1
Lesson 1: Creating aWeb 3
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
In general, the site creation process is a bit of a misnomer because it suggests that once youcreate a site, your work is done, when in reality, publishing the site should signal the need tobegin the cycle again. Based on feedback and information you receive from clients or peoplewho visit your web, you will want to plan, implement, and publish changes and updates forthe life of the web. How you will keep the site updated is part of the planning process.
Are You a Good Web or a Bad Web?Before we begin, we should mention that distinguishing between good and bad webs is purelysubjective: “beauty is in the eye of the beholder”; however, there are certain things you can doto your web to make it more usable. In general, you want your web’s organization and graphicdesign to support your message—not overpower it! Subtle, yet purposeful, design decisions arebest. To that end, here are two sets of “common-sense” guidelines to help you make thosedecisions: organizational and graphical.
It helps to get target audience feedback regarding a web’s usability at every stage of the sitedevelopment process.
Guidelines: The following organizational dos and don’ts will help you to create a “goodweb” that’s easy to use.
• Place similar page content in the same category. At first this sounds rea-sonable, doesn’t it? But when the content begins to flow in, you might nottake the time you should when considering where you should placecontent.
• Consistent placement of repeating elements (navigation bars, logos, and soon) by putting these items in the same place on every page. This way,visitors don’t have to “re-learn” where to look for things on each page inyour site.
• Place the most important page items in the upper-left portion of thescreen. This will help ensure that the item is seen immediately—withoutrequiring a visitor to scroll around the screen.
• Keep your web structure’s hierarchy relatively flat—not too many layersof content below the home page—and organized. As you can see in Fig-ure 1-2, try to arrange web pages to be as near to the web’s home page aspossible—between three and five levels is ideal. A common web hierarchyis home page, category pages, and then detailed pages. If it takes a personmore than a few clicks to get to the information, they will likely give upand go elsewhere.
• Present generic information in pages residing in a web’s upper levels andplace more specific information on pages at the lower levels. This createsa “drill-down” effect. Figure 1-2 shows the generic home page above gen-eral categories. Those categories have specific pages below them.
• Keep your web lean. Don’t publish superfluous files to your web. Notonly does it waste valuable storage space, but it also slows webperformance. And whenever possible, try to reduce the file sizes for webpages and graphics. You want fast-loading pages.
LESSON 1
FrontPage 2002 – Level 14
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 1-2: A simple, but proper, navigational hierarchy.
All organizational guidelines can be summed up in one statement: Don’tmake visitors work at using your site; their time is valuable!
These general graphical guidelines will help you to create a “good web” that’seasy for your target audience to view.
• Provide a comfortable and pleasant “visual” atmosphere for visitors. Don’tshock them unnecessarily with extreme color contrasts.
All graphical guidelines can be summed up in one word: understated.Just because you can use a dozen different formatting options doesn’tmean you should.
• Use sufficiently contrasting colors and hues. Each web page elementshould be easily distinguishable from other elements.
Although contrasting colors are important, don’t go overboard. Starkcontrasts can be as difficult to view as subtle contrasts.
• Selecting contrasting colors goes for text, as well as for graphics. For themost part, consider putting dark-colored text on a light-coloredbackground. Remember, there’s nothing wrong with using the old standby,black text on a white background! Although light text on a dark back-ground is legible, it’s considered kind of amateurish. Avoid light text onlight backgrounds and dark text on dark backgrounds; the lack of contrastwill make it impossible for visitors to read your message.
• Use color consistently and purposefully. Don’t go changing colors for thesake of change. Repeating colors can foster a visitor’s comfort level. Themore comfortable a person is using your site, the more likely they’llreturn.
• Organize with color. By making related page elements, such as navigationbars, the same color, you create a visual connection between them.
• Curb your own color preferences. Just because blue is your favorite colordoesn’t mean you should use it all the time.
• Restrict the number of different colors used in a web to a maximum ofthree complementary colors.
LESSON 1
Lesson 1: Creating aWeb 5
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
• Anticipate your target audience’s perception of your color choices. Colorscan have psychological and cultural meanings; for instance, white cansymbolize purity in Western cultures, but in Japan, white typically is asso-ciated with death. Colors can also have physical implications. If asignificant portion of your target audience has a vision deficiency—suchas poor vision or color blindness—you should consider increasing fontsizes and/or avoid using greens and reds (associated with the most com-mon forms of color blindness).
For more on adding accessibility to your webs, visit W3.org: http://www.w3.org/WAI/.
• Don’t use color: “After all this, you’re telling me not to use color?” Yesand no. Not using color, or rather staying with black and white, is in facta color decision. Again, let your site’s target audience help you decide.
• Consider the possibility of using appropriate metaphors in your design.For instance, if your site’s purpose is to tell prospective students aboutyour college, using a classroom-like setting as a design motif isapplicable. Metaphors can sometimes be tricky, though—especially if yoursite is intended to be internationally accepted.
For more on usability, visit Jacob Nielsen’s UseIt.com: http://www.useit.com/.
Example: To see some good examples of web design, launch your Web browser andexplore the following sites:
• http://www.web100.com/
• http://www.thewebawards.com/
• http://www.projectcool.com/sightings/
Non-Example:
To see some examples or poorly done sites, you can explore these sites:
• http://www.worstoftheweb.com/
• http://www.forkinthehead.com/
• http://www.ecotide.com/
Graphical design decisions can be affected by a visitor’s monitor settings; thechoices you make may not appear as you intended. To avoid “surprises,” youshould preview your webs on several operating systems, at different resolu-tions, using different Web browsers to ensure the best possible results.
LESSON 1
FrontPage 2002 – Level 16
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Planning: Things to Consider Before Creating aWebIf you buy into the old adage, “Garbage in, garbage out,” then planning is the single mostimportant stage of the site creation process. It is here that you will set the course and tone foryour web. With that said, unfortunately, it’s the stage most taken for granted. Since people areoften pressed for time at the start of a web project, they assume they can easily plan duringthe site’s production. That’s rarely a successful strategy. It’s best to take the time up front todiscuss the following web planning guidelines:
Be sure to record all of your planning somewhere—we recommend keeping a binder foreach web you develop for planning decisions and notes.
Guidelines: • Purpose: Why are you making a site at all? What will you and/or yourcompany gain by having a site? What will people who visit your sitegain? Once you’ve settled on a purpose, write it down and keep it in frontof you at all times. Some web developers like to create a mission state-ment, because it keeps you and the site focused on the goal. No matterwhat the purpose of your web, one goal of every site should be to keep itfresh. Don’t just publish a web and leave it to rot on the vine. Update thesite regularly.
• Audience: Who’s your target audience? Is your audience made up oftechies or newbies? Are they high-energy teenagers or patient senior citi-zens? Gather demographic information. Do they use the Microsoft InternetExplorer or the Netscape Navigator browser to surf? Gather technologicalinformation. Does your audience have vision problems? Consider youraudience’s physical requirements. The more you know about your targetaudience, the more you can tailor your site to best meet their require-ments, because the production choices you will make should be based ontheir needs. (Note that your web audience may differ from your regularcustomers, so do as much research as possible. Surveys and questionnairesof your existing clientele is a great starting point.) Don’t make your siteso generic that it doesn’t serve anyone. By targeting a particular audience,your web will be more targeted as well.
• Content: What will the site provide? Based on your site’s purpose andtarget audience, identify what information or service will meet both thoseneeds. Will the information be text-heavy or graphically intensive? (Care-fully consider the use of graphics on your web. Too many can make apage download slowly.) You want your site to be appear “fast”; text andgraphics should be used purposefully—if a piece of content is superfluous,leave it out. Now’s a good time to identify that content that will need tobe updated, such as news items.
• Organization: Take time to identify some general categories of informa-tion, and then arrange the specific content within those appropriatecategories. For instance, a category might be named “Catalog,” and in thatcategory, you might put pages for individual products. Try to anticipatehow site visitors might “click through,” or navigate, the content. If a siteis difficult to navigate through, visitors won’t return no matter how good
LESSON 1
Lesson 1: Creating aWeb 7
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
your content is! One way to help you organize a web is to storyboard it.This can involve creating one 3” x 5” index card for each proposed webpage and arranging them in logical category piles. Then connect the cardswith the string to show how pages will link together. You may prefer tojust sketch ideas on a piece of paper or a white board, too—whateverworks best for you.
As a general rule, you want to keep the number of general content cat-egories between five and 10. Again, the purpose is to make it easy fora visitor to locate the information or service they want.
• Resources: When you identify resources that will help you with your web,split them into two groups: people and material. On the people side, whowill supply content? Who will be responsible for maintaining the technicalaspects of the site? Who will supply artwork and design help? Who willedit and manage the content? Who will test the site and how often? Onthe material side, do you have access to existing graphics, stock photos,clip art, or company logos? Can you re-purpose existing content fromnewsletters, annual reports, or event flyers? Do you need other softwarebesides FrontPage, such as an image editing application, to help you buildyour web? Creating a web involves a lot of different disciplines and it’sunrealistic to think you won’t need help somewhere along the line. Taketime now to identify resources that can assist you when necessary. Assem-bling a competent team up front will prevent panic later! This is also agood time to assign “ownership.” Get firm commitments from any and allpotential web contributors.
Legal assistance may also be useful to advise you on Internet-relatedlaws, such as drafting copyright, privacy, and usage policies.
• Location: Two things here. First, where will you develop the web?FrontPage webs can either be disk-based or server-based.Disk-basedwebs, like the ones you will use in this course, are stored locally on yourhard disk or some other storage device (floppy disk, CD-ROM, networkdrive, and so forth). Ordinarily, disk-based webs are used for developingsimple webs because that’s when the focus is on creating and formattingpage content; simple webs rarely require a server’s support.
As your webs become more complex, you will want to develop them on a testWeb server. Logically enough, these are calledserver-based webs. Though theycan be more complicated to set up and slower to use (because you connect tothe server over an Internet connection), server-based webs can take advantageof server technologies to provide support for interactive processes like messageboards, data collection and display, and so on. As a result, developing a webon a Web server will allow the web to behave more “realistically,” as it wouldon the World Wide Web.
Disk-based webs are also great for creating a backup copy of a web.
LESSON 1
FrontPage 2002 – Level 18
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
If you are developing a web on a server other than the one that will ulti-mately store, or host, your web, the development Web server should be assimilar to the host server as possible to minimize potential problems.
Secondly, who will ultimately store, or host, the web once you’re ready to pub-lish the web? Will you host your own Web server or will you use an WebPresence Provider (WPP), sometimes called an Internet Service Provider (ISP)?Although you will give up some control and money, it’s often more convenientto use a qualified WPP because they can deal with the technology side ofthings—such as securing your web’s domain name—again saving you time towork on your web. Just be sure the WPP you select will support FrontPagewebs and all the things you need your web to do; include the WPP folks inevery stage of development. Note that if you do decide to host your own site,you will need to learn about a wide range of server technologies.
It’s never too soon to get your web’s domain name and you don’t need asite yet to reserve one. Search for the domain name you want at http://networksolutions.com/.
To find a registered FrontPage WPP, go to http://www.microsoftwpp.com/.
One other guideline in planning is marketing. This may be outside your scope,depending on your job role, but planning a marketing strategy early is a verygood idea. Start by asking, how will the site be publicized? Will it be adver-tised in various media outlets? Will you submit it to search engines on theWeb? In many ways, this is an afterthought that depends on your audience.Will it be publicized? You may not even want to “tell the world” if the webwill be an intranet, specifically for your employees. (Anintranet is typically aprotected web belonging to a particular group or corporation that is accessibleonly to authorized users, such as members or employees.) How will you attractnew visitors? Will you provide “free stuff” or will you run contests? How willyou keep returning visitors? Will you create a web community for them sothey can collaborate on issues? Or will you offer them discounts on variousproducts?
The purpose of an intranet, a protected web belonging to a particular groupaccessible only to authorized users, usually differs from that of a web that’spart of the World Wide Web because the audiences differ.
Example: For the web you will be creating, the planning process has been done for you.The web is to be a corporate presence (purpose) for people unfamiliar withVision Office Products (audience). It will provide visitors with an overview ofthe company and its products, as well as necessary contact information(content). The content will be arranged logically in general categories, intro-duced by a home page (organization). And although you will primarily beworking alone on this web, other “departments” will have input and providesome content (resources). The web will be hosted on your company’s server(location) with advertising to be handled by another department (marketing).
LESSON 1
Lesson 1: Creating aWeb 9
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC BCreating an Empty WebUsing your browser, you’ve seen sites others have created using FrontPage on the World WideWeb. Next, you will tour an existing web in FrontPage and begin creating your own new webbased on a template.
Sure you can create webs using other software applications, but by creating a web and itspages in FrontPage, you harness the program’s hidden managerial power. FrontPage keepstrack of every file and/or folder in a web. FrontPage keeps track so you don’t have to givethem a second thought. So when you add, remove, or edit a page in a web, FrontPage looks athow the page is used by the web and “notifies” you of the potential damage the change mightcause. For instance, if you try to delete your web’s home page, FrontPage asks you confirmthe deletion, but it also warns you of the repercussions.
Besides the practical benefits of making a web in FrontPage, creating your own web fromscratch is an invaluable learning experience. Not only will you go through the ups and downsall other webbies go through, the urgency of a deadline and satisfaction of completing a web,but you will also familiarize yourself with all the various hats a webmaster must wear—writer,editor, graphic designer, manager, and so on.
Throughout this book, we will use a variety of job titles synonymously; web developer,webmaster, designer, webbie, and webber are some examples. Every organization calls theperson in charge of creating webs something different.
View an Existing Web in FrontPageProcedureReference:
Opening webs in FrontPage is really no different than opening a file in otherOffice XP applications. The general steps follow.
1 Choose File→Open.
2 Locate the web you want to open.
3 Select it and click Open.
What isFrontPageAnyway?
Before we open a web, let’s first firm up what we are talking about wheneverwe mention FrontPage. Most importantly, what is it? Microsoft FrontPage 2002is a convenient and encompassing web building tool available. Leveragingwhat you already know about Microsoft Office applications, FrontPage allowsyou to create and manage every aspect of a web—from individual web pagesto complicated, dynamic e-commerce enterprise webs. FrontPage is a greatprogram for novices and experts alike. Using the latest Web standards,FrontPage is also open-ended enough to allow for any new technologies thatcome down the developer’s pike.
LESSON 1
FrontPage 2002 – Level 110
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
In a nutshell, it’s a web developer’s Swiss Army Knife. But like any othermulti-purpose tool, FrontPage may not have all the capabilities you want builtin—for instance, it might not have robust enough image editing tools for you.You can easily supplement it with other “editor” applications by choosingTools→Options→Configure Editors.
OrientationtoFrontPageViews
One of most useful aspects of FrontPage is its variety of different views. Ingeneral, these views let you create and edit pages, as well as check a web’scurrent condition, contents, and structure. As you can see in Figure 1-3, theViews bar, located on the left of the application window, gives you fast accessto any of the different views shown below. Table 1-1 describes what each viewdisplays.
Figure 1-3: The FrontPage application window with a web open.
The View menu, not only also gives you access to all views on the Viewsbar, but you can also hide or display both the Views bar and the Folder Listto maximize the space of the content area you have inside your applicationwindow.
Table 1-1: Views Bar Icons and What They DisplayViews Bar Icon Display This View To
Create and edit individual pages within a web. (Some-times called Page Editor view.)
LESSON 1
Lesson 1: Creating aWeb 11
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Views Bar Icon Display This View ToManage a web’s files and folders.
Check the condition of a web.
Manage or review how a web is structured.
See a graphical display of how pages are connected.
Build or review a web’s “to-do” list.
Within each of these views, there may be other ways to display things. Forinstance, in Page view’s content area, there are three different panes: Normal,HTML, and Preview. Each view has its own purpose.
Different Page Views Display This Pane ToNormal Add, format, and position an open page’s content. The
Normal pane is where you will work 90 percent of thetime.
HTML View or modify the opened page’s HTML source code.The HTML pane is a great way to learn HTML byexample. After you use the WYSIWYG tools in theNormal pane, you can switch to the HTML pane to seethe code FrontPage created.
Preview See how an open page will appear in MicrosoftInternet Explorer. The Preview pane is best used fortaking quick looks at works-in-progress, to show how apage or page element will appear in a browser.
LESSON 1
FrontPage 2002 – Level 112
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
FrontPage TemplatesFrontPage offers a variety of templates to assist in the production stage of the web creationprocess. In general, they fall into two categories: page and web site.
Definition: A page template is a predesigned page that can contain a wide range of pagesettings (such as frames and background colors), text formatting, and page ele-ments (such as forms, text, and graphics).
Example: As shown in Figure 1-4, FrontPage provides over 20 general page templatesand several web site templates.
Figure 1-4: Web page templates.
Web site templates are another type of template FrontPage offers. Aweb sitetemplate is a collection of page templates designed to suit a pre-defined webpurpose, such as customer support or a personal web. As you can see in Figure1-5, FrontPage provides several site templates as well.
LESSON 1
Lesson 1: Creating aWeb 13
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 1-5: Web site templates.
To help use these templates, FrontPage occasionally provides atemplatewizard—a tool that walks you through a template step-by-step. The wizard,like a Form Page Wizard or Corporate Presence Wizard, will prompt you toenter information, like your company name, or to accept or reject certain pageelements, as a page or pages are being created.
In the Page Templates or Web Site Templates dialog box, wizards show a“magic wand” on their icons.
Templates, because of their predesigned elements, can at times provide youwith a head start when creating webs or web pages. For instance, templates aregreat if you only need to show your boss a “quick-n-dirty” feedback form;however, the templates that come with FrontPage often hinder more than theyhelp. Frequently, you have to spend a lot of time customizing the results to fityour site’s purpose—renaming files, changing colors, graphics, text, and so on.So even though you may think templates will save you time, in fact, they mayslow you down.
Create an Empty WebProcedureReference:
Because templates can slow you down, we’re going to start our web fromscratch. Well, that’s not entirely true. We are going to use a template, theEmpty Web template to be exact, but we’re using this template only because itcontains the bare necessities to get us going. To create a new web based on theEmpty Web template:
1 Choose File→New→Page or Web.
LESSON 1
FrontPage 2002 – Level 114
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
2 In the New Page or Web task pane, select Web Site Templates.
3 Select Empty Web.
4 In the Specify Location Of The New Web text box, type or select a nameand location for the web.
5 Click OK.
By definition, the Empty Web template is a web site template. Although itcould contain page templates or predetermined formatting, it doesn’t. Otherthan a couple folders, it is as the name implies, empty.
File NamingConven-tions
Giving a name to a web and its contents may seem like a no-brainer, sinceevery piece of the web needs a name if it’s to be referenced properly; how-ever, as the number of files or people working on a site grows, the morecomplicated it can become to name and manage a web. By following a fewsimple naming conventions, and consistently naming webs, folders, and files atthe start of web site development, you can save yourself, collaborators, andsite visitors a lot of time and trouble.
• Keep name lengths as short as possible. You have two choices: short orlong. Short filenames commonly use the “8.3” naming convention,restricting your file names to eight alphanumeric characters (or less) witha three-character file extension. Upside: Compatibility with older serversand DOS-based PCs. Downside: It’s difficult to name hundreds of filesdescriptively using only eight characters. Long filenames, in contrast, caneasily be more descriptive. But, since filenames become part of a webpage’s address, long names can be hard for visitors to remember, as wellas cumbersome to type. If you don’t have to use the short “8.3” method,we recommend using longer file names, but still try to keep them as shortas possible; no more than 20 characters is a good rule to follow.
Although nearly out of favor for naming web pages, the “8.3” namingconvention is still commonly used to name image files.
• Do not use spaces (use hyphens and underscores instead), punctuationmarks (accents, apostrophes, colons and semicolons, commas, exclamationpoints, left or right parentheses, and question and quotation marks), orspecial characters (ampersands, asterisks, at symbols, backward or forwardslashes, carets, dollar signs, greater or less than symbols, left or rightbrackets, percent signs, pipes or vertical marks, plus or pound signs, ortildes).
• Use lowercase letters. Some servers, like UNIX, are case sensitive, so“MyFile.htm” is considered different from “myfile.htm.” By making allyour file names lowercase, it just makes life easier for people working onyour site and site visitors. No one has to remember whether or not a letterwas capitalized or not.
• Use only alphanumeric characters (a-z and 0-9). If you start a file namewith a number or put non-alphanumeric characters in a file name, a Webserver may not display the page.
LESSON 1
Lesson 1: Creating aWeb 15
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
• Generally, all pages should have the file extension “.htm” or “.html.”(Webs and folders don’t have file extensions.) Although there are otherpermissible file extensions for pages, these two readily identify a file to abrowser as an HTML document. FrontPage automatically adds the neces-sary file extension to every page saved, by default.
• Web servers each have their own set of rules when it comes to namingfiles—especially home pages. So check with the person in charge of yourWeb server to see what those rules are for the server that will host yoursite. (For this course, our web’s home page will be named index.htm.)
• Ask around your company to see if there’s already a file naming conven-tion in use. If so, follow it exactly.
Be sure to let everyone working on a site know what are considered tobe acceptable filenames so they can name files consistently too.
Rename orDelete aWeb
If you accidentally misname a web, you can easily rename it. In the web’sFolder List, select the uppermost folder—the web’s root folder—and chooseTools→Web Settings. In the Web Name text box on the General tab, type anew name for the web, and then click OK.
If you would rather not rename the web, you can start over by deleting theweb and trying again. Before you do, however, be absolutely certain that youwant to delete it—this cannot be undone! To delete a web, open it inFrontPage and select the web’s root folder in the Folder List. Right-click onthe web’s root folder and select Delete. In the Confirm Deletion dialog box,select Delete This Web Entirely and click OK.
Only use FrontPage to delete webs and web content. If you use WindowsExplorer to delete a FrontPage web that contains connections to other webs,FrontPage will not be able to continue managing those connections. Onlydelete webs using Windows Explorer as a last resort.
HiddenFolders
Not all content in a web is for “public consumption.” For example, for privacyreasons, you probably don’t want visitors to be able to browse through yoursite’s registration information. FrontPage uses special hidden folders to preventthis from happening.Hidden folders, preceded by an underscore character,such as the _private folder, prevent visitors from directly browsing a folder’scontents. To see a web’s hidden folders, choose Tools→Web Settings. Selectthe Advanced tab and select Show Hidden Files And Folders.
LESSON 1
FrontPage 2002 – Level 116
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC CCreating a Home PageYour new empty web is the shell that will contain your web’s content. It’s time to start creat-ing that content and that begins with your web’s home page.
We’ve all been told not to judge a book by its cover, but let’s face it, we do make judgements.Think of your home page as your web’s cover. It’s the first thing people are likely to see, andlike a book cover, your web’s home page will have certain elements that you will see on everyweb’s home page, such as a title. There are other things you can do to get your home page offon the right foot, and you’ll learn about them in this topic.
What is a Home Page?Definition: We’ve bandied the term about until now. Generally speaking, thehome page
serves as a starting point or guide to other content categories in a web. If aperson enters your web’s address in a browser, it’s the first page that willappear. Typically, a home page will contain standard elements such as a
• company logo
• way to navigate to other areas of the site
• notice of current company/site news
• brief statement of a site’s purpose
• search feature
• link to contact and legal information
Example: As you can see in Figure 1-6, the Microsoft home page is a good example of atypical home page with many typical elements.
LESSON 1
Lesson 1: Creating aWeb 17
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 1-6: Common home page elements.
Create a Home PageProcedureReference:
The physical act of creating a home page is relatively simple. The steps youwill need are as follows:
1 In Navigation view, create a new blank document by clicking the CreateA New Normal Page button.
Creating a home page in Navigation view automatically saves the filewith the appropriate default home page filename—index.htm or Default.htm, for instance.
2 In Page view, change the page title in the Page Properties dialog box.
3 In the Page Options dialog box. change the home page’s compatibilitysettings.
Page compatibility settings will apply to all new pages in a web.
4 Save the changes to the page.
Page Prop-erties
Every page in a web has its own unique settings called Page Properties. Todisplay the page properties of a page displayed in Page view, you can eitherchoose File→Properties or right-click on the page and select Page Propertiesfrom the shortcut menu.
LESSON 1
FrontPage 2002 – Level 118
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Page Names
A single page can have three different names associated with it—each with itsown purpose: a filename, a page title, and a navigation name. A filename iden-tifies a file to a computer. A page title, which can be set using the General tabin the Page Properties dialog box, is primarily used to describe a page’s con-tent or purpose to a person, usually in the title bar of a browser or in aFavorite or Bookmark. (You can also view a page’s title in the HTML pane ofPage view.) A navigation name is the name a page displays in FrontPage’sNavigation view. This name is displayed in the buttons of navigation elements.For example, the home page has a filename of index.htm, a page name of“VOP: Home Page,” and a navigation name of “Home.”
Limit page titles around 50 characters and make them as descriptive as pos-sible, using terms people might use in a search. Unlike filenames, page titlescan include punctuation.
Page Com-patibility
Unlike printed material, you don’t have total control over how your pages willbe viewed in a browser. What users see when they look at your site dependson what browsers they use, their monitors’ screen sizes and resolution settings,how fast and clean their Internet connections are, how big their browsers’ win-dows are, and how they’ve configured their browser options. (Some usersmight turn off the option to automatically view graphics so that pages loadfaster, for example.) Others might use older browsers that can’t interpret tables,Dynamic HTML, cascading style sheets, or other newer web specifications.
Fortunately, FrontPage addresses many browser-related page design questionsby allowing you to choose which browsers, which versions of browsers, andwhich technologies you want to developer for. (See Figure 1-7.) FrontPageenables or disables certain technologies that may or may not work for thespecified browser based on your choice of browser, version, and serversettings. Observing the technologies that are either unchecked or grayed outcan save you design time because, based on your selections, you will knowwhich design features will work and which ones won’t before you waste time.
LESSON 1
Lesson 1: Creating aWeb 19
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 1-7: Page compatibility options.
The PreviewPane versusthe PreviewIn BrowserButton
The Preview pane, as you already know, mimics how a page will appear inMicrosoft Internet Explorer. Occasionally, though, you might need to view apage in an actual browser—to verify page titles in title bars, for example. Inthese cases, you could save the page, launch your browser, and then open thepage. But a more efficient way is to click the Preview In Browser buttonon the Standard toolbar. This automatically opens the page in your default pre-view browser.
You can also preview pages in browsers besides Microsoft Internet Explorer.To do so, choose File→Preview In Browser. Click the Add button. Name andlocate the browser you want to add and click OK twice. Then whenever youwant to change browsers, just select File→Preview In Browser again, selectthe browser from the list, and then click Preview.
LESSON 1
FrontPage 2002 – Level 120
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC DAdding Text to a PageA blank home page just won’t do. Next, you’re going to add some text to the home page usinga few different methods.
Since it’s likely that the home page will be the first page visitors will see in your web, it’syour best opportunity to create that all-important first impression. And unless your home pagecontains some meaningful information, it may also be the last page visitors ever see, becausethey may not come back! So be sure to take extraordinary care in deciding what is added tothis page. You want it to be the best page on your entire site.
The fastest way to convey a meaningful message is concise text. For all its glitz and glamour,the majority of Web content is plain, work-a-day text. Because text is so prevalent, putting allthat text into pages can be time-consuming. Learning the best way to put text on a page iscritical if you want to have extra time for other things.
Add Text to a PageProcedureReference:
Adding text to a page can be accomplished a variety of ways: typing, copying,and pasting from other applications, as well as inserting the contents of textfiles. To add text:
1 Place the insertion point where you want the text to begin.
2 Then, depending on the method you will use, you can:
• Type the text directly in FrontPage.
• Copy text from another open application and paste it into FrontPage.
• Insert a file’s contents by choosing Insert→File. Then navigate to thefolder containing the file you want, change the Files Of Type drop-down list to All Files, select the file, and then click Open.
When you paste items in Office XP applications, the Paste Options smart tagbutton will appear. Smart tags conveniently display a list of context-sensitiveoptions, such as whether or not to paste text with existing formatting or justthe text.
LESSON 1
Lesson 1: Creating aWeb 21
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC EApplying Text FormattingYour home page is starting to take shape. Now that you know how to add text to a page, let’slook at how you can make your text more legible and distinctive by considering various textformatting options.
Text on pages is unavoidable, but that doesn’t mean it has to be dull-looking or difficult toread. It’s up to you to make text as legible and attractive as possible. Good text formatting willensure that your content gets the attention it deserves.
Apply Text FormattingProcedureReference:
Text formatting in FrontPage is as straightforward as it is in other Office XPapplications, with both character and paragraph formatting. Use character for-matting, such as changing fonts, styles, and effects, for a small amount oftext—usually a word or two. Use paragraph formatting, such as changingalignments, indentations, and spacing, when you want to affect an entireparagraph. To apply text formatting:
You can also use the FormatPainter tool on the Standard toolbar tocopy formatting from one selection and paste it on another.
1 Select the text to be formatted. (To apply paragraph formatting, the entireparagraph doesn’t need to be selected. The insertion point just needs to bein the paragraph to be formatted.)
2 Either click one of the formatting buttons on the Formatting toolbar or,for more character formatting options,
• Use the Font dialog box (choose Format→Font).
For more paragraph formatting options:
• Use the Paragraph dialog box (choose Format→Paragraph).
From time to time, you may see some peculiar text formatting. Tosee where formatting is on a page, you don’t have to switch to theHTML pane. You can choose View→Reveal Tags.
Styles FrontPage supplies some traditional HTML styles listed in the Styles drop-down list on the Formatting toolbar. (See Figure 1-8.) These styles can bethought of as text formatting templates because they can contain many differ-ent formatting options—both character and paragraph—within one style name.By default, the Normal style is used until you apply a different style from thelist. Headings (1 being the largest, 6 being the smallest) and lists (especiallybulleted and numbered) are the most commonly used.
LESSON 1
FrontPage 2002 – Level 122
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
We recommend using styles whenever possible. FrontPage has an optionalformatting feature called “themes” which makes changing formatting quiteeasy if styles have been applied.
Figure 1-8: Styles drop-down list expanded.
Lesson1Follow-upIn this lesson, you began by identifying the necessary guidelines that are addressed during theweb creation’s planning stage. Then, you used your browser to view sites that have been cre-ated using FrontPage, toured an existing web and created your own new web based on thelayout of a default FrontPage web template. Next, you defined the term “home page” and itskey elements (page properties/compatibility) that are contained within. Then, you added text toa page through typing, copying, and pasting from Word. Finally, you learned how to makeyour text more legible and distinctive by considering the various text formatting options andapplying character and paragraph formatting.
1. What goes into creating a new web?
Answers will vary.
2. Do you have any resources available to help you create a web. If so, what are they?
Answers will vary.
LESSON 1
Lesson 1: Creating aWeb 23
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
FrontPage 2002 – Level 124
NOTES
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Working with Tables
Lesson Objectives:In this lesson, you will create and modify tables.
You will:
• insert a table, nest a table, and add text to the tables.
• edit existing tables.
• change a table’s appearance.
• convert a text file into a FrontPage table.
• split an existing table into three distinct tables.
LESSON 2
LESSON 2
Lesson 2: Working with Tables 25
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
IntroductionYou have created your web and started your home page by adding and formatting some text.In addition to text, there are many things you can add to your pages. We’ll start with tables.
Tables will make your life a little easier because of the control they offer. In general, tables areused to position web elements or contain data. By using tables properly, you can present yourweb’s contents in the best possible light and help ensure that your web’s visitors are viewingthe content as you intended it to be displayed.
TOPIC AInserting a TableInserting a table is the first step to organizing content on a page. With a table in place, contentsuch as text and pictures, can be added and arranged however you want it.
In the past, you didn’t have much control where elements appeared on a web page. Things areadded from left to right and top to bottom, but you couldn’t easily position items where youwanted. That’s where tables came in. Tables are nothing more than containers. You can put anyweb element in them—text, pictures, or even other tables—controlling where items are posi-tioned and how they are displayed. And although there are now other methods for positioningpage elements, tables still give you the most reliable results in a wider variety of browsers.
Insert a TableProcedureReference:
Tables are a conglomeration of containers called cells, which are grouped hori-zontally as rows and vertically as columns. Each cell can contain a differentelement and have different formatting. Before you can use tables to display andcontrol web elements though, you must first add one to a page. To do that:
1 Place the insertion point where the table is to be located.
2 Then to insert a table, you have a couple different options: draw onemanually or have FrontPage do it for you. To draw a table, do thefollowing.
• Choose Table→Draw Table, and then drag the Draw Table tool tofirst create the table’s outer border. Then draw vertical lines in thetable border to create columns and horizontally to create rows.
To have FrontPage create a table for you:
• On the Standard toolbar, click the Insert Table button and select thenumber of rows and columns, or look for more table options.
• Choose Table→Insert→Table. Not only can you select the number ofrows and columns, but you can also make layout decisions, like set-ting the new table’s alignment and size.
LESSON 2
FrontPage 2002 – Level 126
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
NestedTables
As we mentioned briefly, tables can contain other tables. A table within anothertable is said to benested. Nested tables provide another layer of table layoutand formatting options, because each table has its own set of properties. Thiscan produce effective visual distinctions between page elements.
TOPIC BEditing a Table’s StructureRarely is a table exactly right the first time. In fact, 99 percent of the time, you will need tomake some sort of modification—whether it be adding rows, deleting or merging cells, or add-ing a caption. In this topic, you will learn how to make these changes to the tables you justcreated.
Fortunately, FrontPage’s extensive table tools makes editing tables a snap. For instance, you’vegot a page with a table showing the quarterly results from the regional sales reps. Every quar-ter, sales people join and leave the company. Rather than recreate the entire table everyquarter, you can just quickly add and delete rows to reflect these changes.
Edit Table ElementsProcedureReference:
Tables are wonderfully editable. Other than their boxy shapes, there isn’t muchthat can’t be changed. You can add and remove rows and columns, mergecells, even add a caption to the entire table. This flexibility lets you presentdata or other page elements as you want. To edit a table and its elements:
1 Select the table element you want to edit (the entire table, a row, column,or cell).
2 Use the Table menu to insert, delete, or merge columns, rows, and indi-vidual cells.
InsertingRows andColumns
There are several ways to modify the number of rows and columns in a table.To quickly add a row to the end of a table, just place the insertion point in thelast cell and press [Tab]. For most other occasions, however, we recommendusing the Insert Rows Or Columns dialog box. Not only can you enter thenumber of rows or columns to be inserted, but you can also determine wherethe row or column will be inserted. For example, you can specify whether youwant the inserted column on the left or the right of the current selection.
Selectingand Delet-ing TableElements
As the old adage goes, “If you want to affect it, you have to select it.” Delet-ing table elements is no exception. Before you can delete a table element, youmust first select it. FrontPage offers a couple ways to select tables and theirparts. You can click and drag the mouse pointer to select adjacent cells, butthat can be tricky at times—especially when dealing with nested tables andindividual cells.
LESSON 2
Lesson 2: Working with Tables 27
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
If you’re having trouble drag-selecting table elements, use the Table→Selectmenu options.)
You can also point and click to select a table element. For instance, to select arow, position the mouse pointer along the left-most edge of the row. When themouse pointer changes to a black arrow, click the mouse button to select theentire row. At this point, you can drag to select more than one row. Select col-umns the same way. (To select an individual cell, [Alt]-click it.) Once you’vemade your selection, regardless of the method you choose, right-click on theselected element and choose Delete Cells from the shortcut menu.
Filling CellData
FrontPage’s Fill tool on the Tables toolbar allows you to copy data, cell, andtext formatting from one selected table cell to another adjacent selected cell.For instance, if the first cell in a row contains formatted data, you can repeatthat data and all of its formatting for the rest of the cells in that row. Simplyselect the cell that contains the desired data and/or formatting and any adjacentcells you want to look similar, and click either the Fill Right or Fill down but-tons on the Tables toolbar.
TOPIC CFormatting a TableWith tables created and content in place, the next step is to format the table and its text.
Consider Figure 2-1 and Figure 2-2. Which table would you rather read?
Figure 2-1: An example of a table without any formatting.
Figure 2-2: An example of a table with formatting applied.
Both tables are legible, but because the table data are more clearly presented, the formattedtable is much easier to read.
LESSON 2
FrontPage 2002 – Level 128
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Format a TableProcedureReference:
A table and its elements (cells, rows, and columns) can have differentformatting. Using the options in the Table Properties dialog box, as shown inFigure 2-3, you can make changes that control an entire table and how its con-tents are presented on a page.
Figure 2-3: The Table Properties dialog box.
Table 2-1: Table Formatting OptionsTable Properties Option FunctionAlignment Determines a table’s alignment on a page.
Specify Width/Height Determines the width and/or height of a table, mea-sured either as a percentage of the available screenwidth, or as a specific measurement in pixels.
Cell Padding The amount of space inside a cell that separates acell’s content and a cell’s border. (A cell’s interiormargins.)
Cell Spacing The amount of space between cells. (Increasing thecell spacing makes table borders thicker.)
Border Size Determines the thickness (in pixels) of the linearound the outer edges of the table.
Background A table can have a background color or picturethat’s different than the underlying page’s back-ground settings.
LESSON 2
Lesson 2: Working with Tables 29
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Using the options in the Cell Properties dialog box, as shown in Figure 2-4,you can make changes that control the appearance of a single cell or a rangeof cells, including rows and columns.
Determines how a cell’s contents are positionedwithin a cell.
Specify Width/Height Determines the width of a cell in the context of itsrow, and the height in the context of its column.Again, measured either as a percentage of the avail-able screen width, or as a specific measurement inpixels.
Rows/Columns Spanned Adjust the number of rows or columns a cell spans.
Header Cell Apply’s a bold text format and center-aligns a cell’scontents.
No Wrap Prevents a cell’s text from automatically wrapping toa new line.
Background A cell can have a background color or picture that’sdifferent than its table, as well as the underlyingpage’s background settings.
To format a table, it’s a good idea to set the Table Properties first and then theCell properties—general formatting to specific.
LESSON 2
FrontPage 2002 – Level 130
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
1 Place the insertion point in the table you want to affect, and then right-click on the table and select Table Properties. In the Table Propertiesdialog box, set the layout, border, and background options.
2 Once the table options are set, you can address the cell-level formatting.Place the insertion point in the cell you want to affect (or if you want toformat a range of cells, select the range), and then right-click on theselected cell(s). Select Cell Properties. In the Cell Properties dialog box,set the layout and background options.
Sizing aTable andIts Elements
A table created by FrontPage usually takes up the entire width of a pagebecause, by default, a table’s width is set to 100 percent. That isn’t alwaysdesirable, especially if you’re using a table as a page layout tool rather than adata table. To control the size of a table, you can specify the exact size inpix-els one of three ways: using the Table Properties dialog box, have FrontPageAutoFit a table to its contents (choose Table→AutoFit To Contents), or manu-ally drag a table element’s border to the desired size.
TOPIC DConverting a Text File into a TableYou’ve created tables yourself, and now it’s time to learn how to handle information given toyou into tables.
Let’s face it, not many of us work by ourselves all of the time. It’s quite possible that some-where along the way someone will be helping us. Part of that assistance might be to contributecontent. It would be unrealistic to expect everyone to give you formatted HTML pages. No,more likely is the fact that someone will give you a file, such as one that has been exportedfrom a database, that you will have to work on in order to include its contents in a page.
Convert a Text File into a TableProcedureReference:
FrontPage can convert selected text into a table. The application looks at theselection for specific text characters to determine where columns will becreated. FrontPage can separate text at paragraphs, tabs, commas, or any othercharacter that you provide. (It can also put an entire selection into a one-celltable.)
1 Select the text to be converted.
2 Choose Table→Convert→Text To Table.
3 Select the character where you want FrontPage to separate the text intocolumns.
4 Click OK.
FrontPage can also convert an existing table into text.
LESSON 2
Lesson 2: Working with Tables 31
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC ESplitting a TableHaving converted a text file into a table, you notice that it doesn’t look as good as it could.The large table would be more effective if it were split into three separate tables. You willlearn how to do that in this topic.
Frequently, tables you will receive are too large for a page or include several different discreteunits of information that would be better served in separate tables. Again, you could createmultiple new tables and re-enter the data yourself, but splitting an existing table will save youthe time and hassle.
Split a TableProcedureReference:
To split one table into two:
1 Place your insertion point in the row below where you want the split tooccur.
2 Choose Table→Split Table.
3 Repeat steps 1 and 2 as needed.
Lesson2Follow-upIn this lesson, you began by inserting a table into your web. Then, you nested a table, andadded text to both of the tables. Next, you learned how to edit a table’s contents by addingand deleting rows, entering text, filling a table’s cells with placeholder data, adding a column,merging cells, and adding a caption. Then, you formatted tables through specifying width andheight, adjusting cell padding and alignment, moving borders, and changing a cell’s back-ground color. Next, you converted a comma-delimited text file into a table. Then, you learnedhow to split a table into three separate tables. Finally, you formatted the end results of the splitby changing fonts, applying background colors, and experimenting with the AutoFormatfeature. Creating, editing, and formatting tables will not only help you organize your informa-tion on a page, but these skills will also help you display your content in a more meaningfuland pleasant manner for your audience.
1. Based on sites that you have viewed on the Internet in the past, how do other webdesigners use tables to present information on their web pages? Also, do you recall ifthose tables were well designed, helping you to read the table’s contents?
Answers will vary.
2. How do you plan to use tables in your pages back at work? List your ideas.
Answers will vary.
LESSON 2
FrontPage 2002 – Level 132
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Connecting Pages
Lesson Objectives:In this lesson, you will connect pages.
You will:
• add text hyperlinks to pages that connect to internal and external pages and as well asbookmarks within a web.
• add and modify shared borders for an entire web, as well as for a single page.
• create a hierarchical navigation structure by adding existing and new pages beneath thehome page in Navigation view.
• insert a link bar Web component with custom links.
• remove a page from a web’s navigation structure.
LESSON 3
LESSON 3
Lesson 3: Connecting Pages 33
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
IntroductionYou are in the early stages of production and have created a web and a couple standalonepages. Now you are ready to learn how to connect your pages.
Have you ever read a text book that repeatedly referenced other works? You had every inten-tion of looking up those supporting titles, but you never did. Why? Because it wasn’tconvenient. You didn’t remember the reference titles. You didn’t have the time or theresources. Lots of excuses. Web sites are all about convenience and supplying informationinstantly. By connecting pages logically and purposefully, you can provide visitors to your webwith all the information they could ever need.
TOPIC AAdding Hyperlinks to PagesYou have built a couple unrelated pages and, in and of themselves, their utility is somewhatlimited. In this topic, you will learn how to connect and organize them into a useful web ofinformation.
Hyperlinks allow you to offer optional and immediate paths through your webs wherever youthink visitors might need them. For instance, you’re creating a page containing productinformation. You put in the statement “See the manufacturer’s site for detailed warrantyinformation.” Why make the person find out the address of that site, and then make them lookfor the specific warranty? Why not add a link that points directly to the warranty, savingeveryone time and energy? The visitor will appreciate the effort you made and will rememberthat your site is not only informative but helpful as well.
What Is a Hyperlink?Definition: A hyperlink, or link, is a method for connecting one resource, typically a Web
page, to another target resource. Links can be applied to both text and pictures.(We will look at how to apply a link to a picture later.) By default, unvisitedtext hyperlinks are displayed as underlined blue text, which may or may notshow the resource’s location. (See Table 3-1 for examples.
How links are displayed can be changed in the Page Properties dialog boxon the Background tab.
Within a link is a Uniform Resource Locator (URL), which provides the loca-tion of the targeted resource. URLs are generically referred to as Webaddresses and are now sometimes called Uniform Resource Identifiers (URIs).
URLs are built like the following:
protocol://servername/foldername/filename
LESSON 3
FrontPage 2002 – Level 134
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
When discussing the Web, the protocol is generally HyperText Transfer Proto-col (HTTP). The protocol tells your browser how to ask for the file it’s tryingto locate. The rest of the URL tells the browser where to find the file. After thecolon, usually separated by two forward slashes, is the name of the server, orhost, that provides the file. After the server name, separated by one slash (/),comes the path: usually a folder name and a filename. So in the followingURL, http://microsoft.com/office/default.asp, “http” is the protocol, the servername is “microsoft.com,” the folder name is “office,” and the file name is“default.asp.”
Addresses can be either relative or absolute. Relative addresses, for linkingresources that reside within a particular web’s folder structure (internal), useonly the path—omitting the protocol and server name. This saves you fromtyping full URLs. For example,images/logo.gif is a relative address. Absolutereferences can be used to link internal resources as well, but typically they’reused to connect to resources outside your web. These URLs must be complete,including protocol, server location, and file path. The aforementioned MicrosoftURL is an example of an absolute address.
Bookmarks Although a link is ordinarily used for connecting one page to another, abook-mark link can connect to a specific target location either within the same pageor a target location in a different page within a web. Bookmark links allowvisitors to jump to a specific location on a page rather than requiring them toscroll around trying to locate the content they want. Bookmarks can come inhandy in long pages that may have several sections. Typically, bookmark linksare relative addresses preceded by a pound sign (#), such asservices.htm/#repairs.
Example: Text hyperlinks come in several varieties.
Table 3-1: Examples of HyperlinksHyperlink Type Typical AddressInternal marketing/index.htm
Adding text hyperlinks to pages is what makes the Web go around. They pro-vide depth and just-in-time flexibility to your content by allowing you toleverage supporting information that’s available internally on your web orexternally on the World Wide Web. The fastest way to add a text hyperlink isto just type a complete URL in an open page in Page view and let FrontPageconvert it into a link for you; however, for more control, we recommend thefollowing:
LESSON 3
Lesson 3: Connecting Pages 35
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
On the rare occasion that you type a URL that contains two forward slashes(//) in the URL’s path name, at the time this was written, FrontPage displaysthe link properly on screen, but changes the URL behind the scenes, elimi-nating the second slash. You will need to modify the underlying URLmanually if you want it to be correct.
1 Select existing text for the link or place the insertion point where the newlink will be located.
2 Click the Insert Hyperlink button .
3 Add a ScreenTip to help identify the link.
If you don’t select existing text in step 1, you will have to enter the textto be displayed.
4 Determine the type of link you want:
• Existing File or Web Page. (Link to an internal or external file orpage.)
• Place in This Document (Link to a bookmark.)
• Create a New Document. (Have the link create a new page for you.)
• Email Address.
5 Enter the address or location of the resource you want to link to and clickOK.
You can also drag a file from the folder list (internal) or a link fromyour browser (external) and drop it where you want to create a link.(The link displays the page’s title.) You can create links to files on yourcomputer, but you shouldn’t. Site visitors may not have access to yourcomputer, so those links will appear to be broken.
When you create links of any type, it’s a good idea to test, or follow, them asyou go to make sure they connect to the intended target resources. As we men-tioned earlier, this can be done in Page view’s Normal pane by [Ctrl]-clickingthe link or right-clicking on the link and choosing Follow Hyperlink from theshortcut menu. If you don’t want the page opened in Page view, switch to thePreview pane and click the link. If the link doesn’t perform as you expect, it’sconsidered “broken” and you should check to make sure your link is correctand verify that the resource is still available. If you ever want to edit orremove a link, simply right-click on the link and select Hyperlink Properties.Then either change the link’s settings or click the Remove Link button beforeclicking OK.
Although FrontPage can help you check links if links are broken (we willlook at how it does that later in this course), it’s not smart enough to tell ifa link’s target is the one you intended.
LESSON 3
FrontPage 2002 – Level 136
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC BCreating a Shared BorderWith hyperlinks added to our “connecting pages” arsenal, it’s time to turn our attention to con-necting page content. In this topic, you will learn how you can have the same content repeatedconsistently on pages in your web.
Let’s face it. Many pages include duplicate items—especially when it comes to navigation ele-ments, logos, and boilerplate text, such as legalese and contact information. And more oftenthan not, repeated information is positioned in the same place on every page. You could manu-ally add the repeating stuff to every page in your web if it were only for a few pages;however, that’s dull and tedious work, and you may not be consistent as you go. Can youimagine the time you would waste if your web were 100 pages? FrontPage can streamline thismonotonous task for you by requiring you to enter that information only once.
Add Shared BordersProcedureReference:
A shared border is a reserved region on one or several pages in a web whereyou can add content that will be displayed if the page is formatted with sharedborders. (In Page view, Shared Borders are displayed as dashed lines or boxesalong the edge(s) of a page.) For example, you might want a company logodisplayed at the top of each page, and an email link displayed at the bottom.
Figure 3-1: The Shared Border dialog box.
Shared borders are similar to headers and footers in that they contain consis-tent information that doesn’t change throughout a web at the top and bottom ofa page. As you can see in Figure 3-1, shared borders can also be added to theleft or right sides of pages. By making a change to a shared border on onepage, you automatically update the shared border on all other pages that use it.To set shared borders in an open web:
LESSON 3
Lesson 3: Connecting Pages 37
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
1 Choose Format→Shared Borders.
2 Select whether you want the borders applied to the current page or theentire web.
The configuration of shared borders can be different for each page in aweb. For instance, just because the home page has a right-shared bor-der doesn’t mean that every other page in the web has to have a right-shared border.
3 Select where you want the shared border(s) located and, if selecting Top,Left, and/or Right, whether or not to include navigation buttons. (See Fig-ure 3-1.)
If you include navigation buttons in your shared borders, FrontPageautomatically inserts navigation bars for you based on the site’s naviga-tion structure. You will create the navigation structure in a few minutes.
4 Set border properties. (Each shared border can have a different back-ground color or image.)
5 Click OK.
Shared border content is stored in a hidden folder called _borders. Tosee them, choose Tools→Web Settings and select the Advanced tab.Under Options, check Show Hidden Files And Folders.
If you include navigation buttons in your shared borders, FrontPage automati-cally inserts alink bar for you based on the site’s navigation structure (whichyou will create shortly). If a web’s navigation structure hasn’t been deter-mined, FrontPage will insert a placeholder requesting that the page be added tothe Navigation view; otherwise, you will see a placeholder that prompts you toedit the link bar’s properties. To modify a link bar’s properties, just double-click on it.
FrontPageCompo-nents
FrontPagecomponents, formerly called webbots, are prefabricated elementsthat you can easily insert in your pages. They add functionality without requir-ing you to have an in-depth knowledge of HTML or programming languages.Some common components arecomments, page banners, date and timestamps, and link bars. In Page view, you can identify an item as a componentby placing the mouse pointer over it. If the mouse pointer icon changes to afinger pointing at a page , then you’re looking at a component.
You can also identify a component by looking at a page’s HTML.
LESSON 3
FrontPage 2002 – Level 138
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC CAdding Pages to a Web’s NavigationStructureYou’ve connected pages manually creating hyperlinks between individual pages and you’veshared content between pages. Now it’s time to create a navigation structure for your webwhich will allow FrontPage to create navigation elements for you.
With the pages in your web starting to add up, you need to start arranging pages in Navigationview. Doing so not only creates a logical organization for your web, but it also allowsFrontPage to easily monitor the web’s content so that it can not only keep track of whichpages are connected to each other. FrontPage uses this information to create and support somekey Web components automatically. And anything that FrontPage can do to make your jobeasier is worthwhile.
Importing a File versus Inserting a FileProcedureReference:
Importing a file is different from inserting a file because, instead of just placinga file in an open page, importing brings an actual copy of the file into theweb’s Folder List. The imported file then becomes part of the web and can beadded to the web’s structure. (The original file remains outside the web intact.)To import a file into a FrontPage web:
1 Select the location where you want the file to be imported.
2 Choose File→Import.
3 Click Add File.
FrontPage can import nearly any file type there is, but you can specifi-cally choose web pages, pictures, and Microsoft Office files from theFiles Of Type drop-down list.
4 Locate the file and select it; you can select multiple files if they are in thesame folder.
5 Click Open to add the file to the list.
6 Click OK to import the file.
As we mentioned earlier, the home page provides links to categories of infor-mation elsewhere in the web. Those areas might include:
• Products/services. Here’s where you supply descriptions of products andservices, possibly a catalog with prices and/or some way for visitors topurchase the item.
• News. A news page keeps visitors updated as to what’s going on withyour company and industry events. You might find links to salesannouncements, online publications, and/or press releases on this page.
LESSON 3
Lesson 3: Connecting Pages 39
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
• About us. Typically, this page relates or links to company histories, con-tact information, mission statements, and so on.
• Help/support. Many companies use these pages to provide answers to fre-quently asked questions or to a site map.
• Miscellaneous. These items (job opportunities, locations/driving directions,legal/copyright/privacy statement, and related links) are typicallydownplayed on sites because they are either static or are updatedinfrequently.Use these page types to help generate ideas as you developyour web content.
Add Pages to a Web’s Navigation StructureProcedureReference:
Adding pages to a web’s navigation structure allows FrontPage to help manageyour files and put buttons on your web’s link bars. Depending on the link bar’sproperties, each page in the structure can represent a single button on a linkbar. To add pages to a web’s navigation structure:
1 If necessary, switch to Navigation view.
2 If you are adding existing pages from the Folder List:
a. Select the page in the Folder List.
b. Drag it into the contents area and drop it below the desired page.
If you are adding a new page to the navigation structure,
a. In the Navigation view contents area, select the page that will beabove the new page.
b. Click the Create A New Normal Page button. (The new page will beadded below the selected page.)
3 Rename the pages’ filenames, Navigation view names, and page titles asneeded.
Generally, webs have one of two main structure types: flat or hierarchical.Similar to books, flat structures, the top structure in Figure 3-2, require visitorsto navigate a site in a linear fashion—usually clicking from left to right, fromone page to the next—with all information treated with equal importance. Aflat structure is very rarely used for an entire web because it lacks the flexibil-ity of hierarchical structures. However, you can use a flat structure if you havepages that you want visitors to view in order, like a slide show presentation forinstance.
LESSON 3
FrontPage 2002 – Level 140
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 3-2: Flat (top) and hierarchical (bottom) navigation structures.
A hierarchical structure, the bottom one in Figure 3-2, looks like a pyramid,with general information presented first in upper pages (usually the home page)and more specific information presented lower in the structure. In a hierarchi-cal structure, an upper page is said to be a parent page to the child pagesbelow it.
ChangingNavigationViewNames
If an imported page already has a page title, when you add it to the web’snavigation structure, the page title will become the default Navigation viewname. The problem arises when, more often than not, an existing page title iseither inappropriate or too long to be fully displayed by a page’s icon in Navi-gation view. (See Figure 3-3.) Further compounding the problem is thatNavigation view names are used as labels for page banner components andbuttons in link bars. So if the Navigation view name is long, the labels inthose elements will be truncated!
Figure 3-3: Long page titles are often truncated in Navigation view.
Changing the page’s Navigation view name solves this problem. (To change apage’s navigation name, select a page in Navigation view, press [F2], type anew name, and press [Enter].) This does cause a new problem. Because anexisting page’s title becomes the default Navigation view name, changing theNavigation view name overwrites the page’s original title. So, for example,changing a page’s default Navigation view name from “VOP: Products” to“Products” also changes the page’s page title to “Products.”
Fixing Overwritten Page Titles
After a page has been added to Navigation view, you can modify the page’sproperties and enter the old page title without affecting the new Navigationview name.
LESSON 3
Lesson 3: Connecting Pages 41
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC DInserting a Custom Link Bar WebComponentBased on the web’s navigation structure, FrontPage automatically added hyperlinks to the linkbar that you added the shared borders. This topic will show you how to insert a new link barand manually add hyperlinks that you choose.
Link bars based on a web’s navigation structure are very helpful because they make it easy forfolks to find stuff in your web by providing them with a consistent navigation tool; however,before FrontPage 2002, if you wanted to have a graphical navigation bar that directed someoneto a location outside your web, you had to go through all sorts of geeky gyrations, combininghyperlinks with images. Those days are over. FrontPage can now create link bars with customlinks, including to those pages outside your web.
Create a Link Bar with Custom LinksProcedureReference:
Combining the best of both worlds—text hyperlinks and link bars—you canmix internal and external links.
1 Open the page that will contain the link bar and place the insertion pointwhere you want the bar.
2 Choose Insert→Navigation to display the Insert Web Component dialogbox.
3 From the Choose A Bar Type list, select Bar With Custom Links and clickNext.
4 If desired, choose an appropriate bar style and click Next. (We recom-mend selecting Use Page’s Theme, the default.)
5 Choose between a horizontal and a vertical orientation and click Finish.
6 Name the new link bar and click OK.
7 Add links to the files you want. (Change the order of the links if desired.)
8 Click OK to insert the custom link bar.
You can reuse custom link bars in other pages in the same web by repeatingthe steps 1 through 4 above, and when the Link Bar Properties dialog box isdisplayed, select the bar you want from the Choose Existing drop-down list.
LESSON 3
FrontPage 2002 – Level 142
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC ERemoving a Page from a Web’sNavigation StructureNow that you have a hierarchical structure and have added link bars, it’s time to learn what todo when you have to remove pages from that structure. Pages come and pages go, and whenthey have to go, it’s important that you send them packing properly. In this topic, you willlearn how to remove a page from a web’s navigation structure without deleting it.
Your company just launched its most important product line in years. You’ve been working onthe related web for weeks and just put the finishing touches on it last night, posting the rebatepage. The site just opened it to the public and the orders are coming in much faster thanexpected. A panicked sales manager calls from the road and demands the product’s rebate pagebe removed immediately, explaining there’s no way that a $100 product has a $75 rebate. Hegoes on to further state that the product shouldn’t even have a rebate because its new. “Deletethe page!” he commands. So you do. No sooner than you delete the page, the sales manager’sboss calls and explains that the rebate is in fact valid for the first week, to try and boost sales.She asks the page to be put back, but you just deleted it so you will have to recreate the page.You should have just removed the page from the web’s structure.
Remove a Page from a Web’s NavigationStructureProcedureReference:
Two of the most common reasons for having to remove pages from a web’sstructure are: outdated information (the page is no longer needed so it can bedeleted), or a page needs to be corrected (it only needs to be removed tempo-rarily for editing). As always, you should manage all web files from withinFrontPage.
1 In Navigation view, select the page that you want to delete.
2 Delete the page.
3 Then in the Delete Page dialog box, select either Remove Page From TheNavigation Structure or select Delete This Page From The Web.
4 Click OK.
What Hap-pens WhenYou Chooseto Removea Page?
When you press [Delete], FrontPage gives you an opportunity to think aboutwhat you really want to do with that file. Will you ever need the page again?If that’s possible, you select Remove Page From The Navigation Structure, andthe page is removed from the hierarchy in Navigation view and any corre-sponding button on link bars will be removed as well. The thing to rememberis that if you remove a page from the navigation structure, the page’s file isnot deleted; it remains in the Folder List. If you select Delete This Page FromThe Web, then the file is gone; it’s gone from the web structure, gone from thelink bars, gone from the file list, and gone from the web. Deleting a file is per-manent; it cannot be undone.
LESSON 3
Lesson 3: Connecting Pages 43
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Lesson3Follow-upIn this lesson, you learned how to create hyperlinks by creating internal and external text links.Then, you inserted and linked to bookmarks within the same page and to bookmarks that arelocated in other pages. Next, you added and modified the properties of shared borders andapplied a prefabricated element to your page (referred to as FrontPage components) in theform of page banners and comments. Then, you viewed examples of both flat and hierarchicalnavigation structures. Also, you created a hierarchical navigation structure by adding existingand new pages beneath the home page in Navigation view. Next, you inserted a link bar Webcomponent with custom links into your page. Finally, you learned how to remove a page froma web’s navigation structure. By connecting pages in a web, you provide your visitors with away to find all the content your web has to offer.
1. Some web designers prefer the control of typing internal and external hyperlinks fortheir webs. Others prefer letting FrontPage handle the links in its link bars. Whichoption do you think you will use? Will you use both?
Answers will vary.
2. What benefits do you think that shared borders can provide for your web? Would youever modify the borders? If so, why? If not, why not.
Answers will vary.
LESSON 3
FrontPage 2002 – Level 144
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Adding Visual Appeal to aWeb
Lesson Objectives:In this lesson, you will add, edit, and link pictures, as well apply and modify themes.
You will:
• insert a picture from a file into a page.
• edit a picture using the Pictures toolbar, modify its properties, and save the changes.
• add hotspots to a picture to create an image map.
• create a new drawing by adding and removing pieces of WordArt and AutoShapes beforeresizing the canvas.
• insert a Photo Gallery Web component.
• modify a photo gallery by removing a picture, editing a picture, and changing the compo-nent’s layout.
• apply an existing FrontPage theme to an entire web.
• modify a theme’s colors, save the theme with a new name, and apply the theme to asingle page.
LESSON 4
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 45
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
IntroductionUntil now you have been working with tables, text, and connecting pages. This lesson willteach you how to add more visual appeal to the pages in your web.
As a homework assignment in school, did you ever have to read a book that didn’t have anypictures in it? And even the pages were stark white with black text? No matter how engagingthe story was, it was probably a chore just to get through it. Webs without visual appeal arejust like that book with one exception. Your web is unlikely to be a required reading! Thatmeans if it doesn’t look good, your visitors will leave without a second thought. Addinggraphical elements can make your web, and in turn, its content, more attractive.
TOPIC AAdding a Picture to a PageNow that your pages contain text content, it’s time to dress them up a bit. One of the firststeps to making your web look better is to add pictures to its pages. You will learn how to dothat in this topic.
Pictures are a fantastic ways to add variety and information to your pages. For example, logosconvey a sense of location as visitors click through your site. A picture of an employee can“put a face to a name” while adding a feeling of familiarity. Pictures deliver a lot of bang fortheir buck.
Add a Picture to a PageProcedureReference:
One reason webs are so popular is that they quickly and easily enable you toinclude pictures in web pages. You can importimages, or pictures, to yourweb, insert them on pages, align them with text, and add hyperlinks to them.
1 Place the insertion point where you want the picture to be located.
2 Click the Insert Picture From File button on the toolbar. (Or chooseInsert→Picture→From File.
3 Select the name of the picture and click Insert.
PictureTypes
Pictures used on web pages should be one of two file types: Graphics Inter-change Format (GIFs) or Joint Photographic Expert Group (JPEG) format.Ordinarily, the image file format you will use, GIF or JPEG, will be deter-mined by the purpose of the image. A good general rule for folks new to webimages is to use the GIF image file format for nearly all web images. BecauseGIF files can contain only up to 256 colors, producing a relatively small filesize, they are best used when creating small, solid-colored images, such as but-tons and icons. When high image quality must be maintained, such as inphotos or images that have gradients and/or shading, use the JPEG image fileformat because JPEG files can contain millions of colors, while still maintain-ing a relatively small file size.
LESSON 4
FrontPage 2002 – Level 146
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
You can insert other image types, but FrontPage will convert those with 256colors or less to GIFs and those with more than 256 colors to JPEGs.
GIFs also support transparent backgrounds (i.e., you can select a color inthe GIF picture that will not be displayed by a browser). This makes it sothe inserted GIF doesn’t obscure any page background settings.
EstimatingPageDownloadTime
Adding pictures to a page will increase the time it takes the page to download.On average, you want to keep the download time under 10 seconds; otherwise,visitors may lose patience and look elsewhere. To help you with this, in thelower right-hand corner of the FrontPage application window, there is the Esti-mated Time To Download feature, .
As the name implies, it estimates how long the page open in Page view willtake to transfer a file between your server and the visitor’s browser based on aspecified Internet connection speed; a 28.8 KB modem is the defaultconnection. As you add content to the page, such as pictures, this time willincrease.
You can modify the Estimated Time To Download feature’s connection speedby clicking on the estimated time and selecting a different speed from thepop-up list.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 47
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC BEditing a PictureYou’ve inserted pictures and you may want to modify them once you see them on a page. Inthis topic, you will learn how to edit them.
Not every picture you add to your pages will be perfect. Does that mean you can’t use it? Ofcourse not. FrontPage gives you several image editing tools you can use to get that picture inshape.
Edit a PictureProcedureReference:
FrontPage provides several useful tools on the Pictures toolbar that can be usedto change how a picture is displayed. The following table shows a few of theavailable options.
Tool Options Allow You ToRotate and Flip Rotate a picture left or right. Flip it hori-
zontally or vertically.
Contrast and Brightness Increase or decrease a picture’s contrast orbrightness.
Trimming and Color Control Cut, or crop, parts of the image you don’twant, or set a transparent color, allowingbackground colors and images to be seen.
As you edit a picture, if at any time you are unsatisfied with a change, you caneither undo it to remove one change at a time or you can click the Restorebutton on the Pictures toolbar to restore the picture to its last saved version.Once a picture has been saved, changes become permanent.
1 Select the picture to be edited.
2 If necessary, choose View→Toolbars→Pictures to display the Picturestoolbar.
3 Use the tools on the Pictures toolbar to make any changes.
4 Modify the picture’s properties. (Double-click on the picture to display itsPicture Properties dialog box.)
5 Save the page.
PictureProperties
Every picture has its own set of properties that affect its appearance (how textwraps around it, its alignment and spacing, and size) and control how abrowser and visitor interact with the picture (alternative text and hyperlink).See Figure 4-1.
LESSON 4
FrontPage 2002 – Level 148
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 4-1: The Picture Properties dialog box.
EmbeddedFiles
If a page contains a picture that currently resides outside a web, a picture thatwas converted from a different file format, or an existing picture that wasedited, FrontPage will prompt you to save embedded files when you attempt tosave the page. In the Save Embedded Files dialog box, you can rename a file(thereby preserving the original), change the folder location where the file willbe stored in the web, set an action (choose to save the file or not), and modifya picture’s file format options.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 49
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC CCreating an Image MapYou’ve added one hyperlink to a single picture making it more functional. But by adding mul-tiple links to a single picture, you can essentially create your own link bar. In this topic, youwill learn how to add multiple hyperlinks to one picture.
There may be times when you want a picture to behave as a link bar, that is, one graphicalelement with many links in it. This is especially true when you need a picture to convey moremeaning than a simple button label could. FrontPage allows you to add many hyperlinks to asingle image so that it behaves much the same way as a link bar. This gives you much morefreedom in how you visually present your hyperlinks.
Create an Image MapProcedureReference:
A hotspot is a defined area in a picture that contains a hyperlink. They can beshaped as a rectangle, circle, or as a polygon. (You can even add text labels topictures that can become hotspots.) A picture with one or more hotspots is animage map. Essentially invisible in a browser, hotspots can be easily identifiedbecause when you place the mouse pointer over a hotspot, it changes from apointing arrow to a finger icon. To create hotspots:
1 Select the picture to contain the hotspot.
2 On the Picture toolbar, select the Rectangular Hotspot tool.
3 Drag the mouse across the picture to draw the area that you want to bethe hotspot.
4 Release the mouse button to display the Create Hyperlink dialog box.
5 Create a ScreenTip and select the page that you want to use as the targetfor the hyperlink.
6 Click OK.
You can always modify or delete a hotspot by selecting the picture con-taining the link(s) and then making the appropriate changes.
LESSON 4
FrontPage 2002 – Level 150
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC DUsing the Drawing ToolsYou’ve added pictures that were already created for you. In this topic, you will learn how tocreate your own pictures on a page.
Sometimes you are in a hurry and you have an idea of what you want a picture to look like,but you just don’t have time to wait for the Art department to create a picture for you. Whatdo you do? Use FrontPage’s drawing tools to create a just-in-time solution.
Use the Drawing ToolsProcedureReference:
FrontPage 2002 now supports drawing tools like the other Microsoft Officeapplications, storing your AutoShapes, drawings, and WordArt as a series ofshapes—not as pictures themselves. In fact, you can copy drawings from otherOffice XP programs and paste them directly into FrontPage. If you are going toadd drawn objects to add life to a page, we recommend placing the objectsinto a drawing canvas. (A drawing canvas is an area that can contain drawnelements.) The primary benefit of this is simple. A drawing canvas reserves aresizable area in a page specifically for drawn objects so you can keep all ofthem together.
1 Place the insertion point where you want the drawing canvas to be.
2 Choose Insert→Picture→New Drawing.
3 Use the Drawing toolbar to create and format elements.
4 Use the Drawing Canvas toolbar to size the canvas.
5 Deselect the drawing canvas.
A drawing canvas can be formatted like any other object in FrontPage—double-click on the canvas to change its color and line formatting, size, layout,and so on.
FrontPage uses Vector Markup Language (VML) to display drawn objects. Theupside is that such a format displays very fast in a browser that supports it.The downside is, at the time this was written, only Microsoft Internet Explorer5.0 and later do support it. To accommodate this shortcoming, FrontPage cansave the drawn elements as a GIF; and if the elements are in a drawing can-vas, all of them are saved as a single GIF file.
You can draw objects individually outside a drawing canvas; however, if abrowser doesn’t support VML, each object will be displayed as a separateGIF, increasing the page’s download time.
If some tools on the Drawing toolbar are grayed out, verify that your pagecompatibility settings allow VML graphics. (Choose Tools→Page Options andselect the Compatibility tab. Under Available Technologies, check both VMLGraphics and Downlevel Image File.)
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 51
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC EAdding a Photo GalleryYou’re well on your way to adding visual appeal to your web, and you just learned how to addWordArt and AutoShapes to a new drawing canvas object. Next up, you will learn howFrontPage can make the grouping of pictures easier.
When you’re dealing with a lot of related pictures, placing them individually in a table can bequite time-consuming. Then you would have to size each one, add descriptive text, and if itdoesn’t look good, you will have to rearrange everything until you are satisfied. But what ifyou could put a bunch of pictures on a page all at once, and, as an added bonus, have themnicely arranged and sized? How would you like the ability to quickly add text captions that areformatted and perfectly aligned? What if you could choose from several different layouts withjust a few button clicks. Sound too good to be true? Not at all, FrontPage can now help youadd photo albums, catalogs, and slide shows to your web pages.
Add a Photo GalleryProcedureReference:
A photo gallery is a Web component that arranges and displays pictures withcaptions and descriptions that can be formatted like any other text. (See Figure4-2.) To add a photo gallery Web component to an existing page:
If you want to create a new page with a photo gallery, you can use thePhoto Gallery page template.
1 Place the insertion point where you want the photo gallery to be.
2 Choose Insert→Web Component.
You can also choose Insert→Picture→New Photo Gallery and select alayout option later.
3 From the Component Type drop-down list, select Photo Gallery.
Choose a Photo Gallery layout option.
Click Finish.
4 Add a picture. (You can add more than one picture at a time.)
For each picture, add a caption and descriptive text—formatting the textas needed.
Click OK.
LESSON 4
FrontPage 2002 – Level 152
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 4-2: An example of a photo gallery.
The photo gallery Web component can display your pictures and arrange inone of four ways, as shown in Table 4-1: horizontally, vertically, as a montage,or as a slide show.
Like any other FrontPage component, the photo gallery is a prefabricatedelement that you can easily add to a page without having in-depth knowl-edge of HTML or programming languages.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 53
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Table 4-1: Samples of Photo Gallery LayoutsLayout ExampleHorizontal
Montage
Slide Show
LESSON 4
FrontPage 2002 – Level 154
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Layout ExampleVertical
A descriptive text option is unavailable in the montage layout.
The Photo Gallery Web component automatically creates smaller versions, orthumbnails, of your pictures. These smaller versions help reduce page down-load time. Clicking the thumbnail image in a browser will display itscorresponding larger image.
When you save a page containing a photo gallery, FrontPage converts picturesinto GIFs and JPEGs as needed and stores all related files in a new foldernamed logically enough, photogallery. In the photogallery folder will be asubfolder for every photo gallery in the web.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 55
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC FModifying a Photo GalleryWith a photo gallery in place, that doesn’t mean you are done. In fact, like any other Webcomponent in FrontPage, it’s quite likely that you will need to modify the gallery’s propertiesor edit one of its photos. In this topic, you will learn how to do both of those possibilities.
Flexibility and convenience are the two most significant reasons to use a Photo Gallery Webcomponent. When you manually add, arrange, and edit pictures on a page, unless there’s adecree from higher up, chances are you won’t want to make any changes. That’s because mostchanges—especially layout-related ones—would be too difficult and time-consuming to do.That’s not the case with the Photo Gallery Web component. With a few simple clicks, you canmake it look just how you want. And on top of that, the component conveniently provides just-in-time access to some of the editing tools you would ordinarily find on the Pictures toolbar.
Modify a Photo GalleryProcedureReference:
The true beauty of a photo gallery is being able to modify an existing one. Youcan add, rearrange, and remove pictures. You can control how big FrontPagewill make the thumbnail images. You can even change which layout the com-ponent uses.
On top of all that, you can even edit the individual pictures right from withinthe Photo Gallery dialog box—change a picture’s size, rotation, and/or elimi-nate portions of a picture. To modify a photo gallery Web component:
1 Double-click on the photo gallery you want to modify.
2 Make the desired changes to the gallery or the pictures it contains.
3 Click OK.
Cropping aPicture
As we mentioned, the photo gallery Web component provides some pictureediting tools. One of those is the Crop tool. It allows you to display only thepart of a picture you want someone to see, omitting extraneous parts of thepicture.
LESSON 4
FrontPage 2002 – Level 156
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC GApplying a Theme to an Entire WebUp to this point, you’ve been beautifying your web one step at a time—adding page back-grounds, text formatting, tables, and images. In this topic, you will learn how to apply all ofthese at the same time to your entire web, using a set of pre-packaged, predesigned graphicalelements that comes with FrontPage.
Content may be king, but if the emperor isn’t clothed properly, few people will want to look athim, let alone listen to what he has to say. The same thing goes for your web. You might havethe best content in the world, but if it isn’t presented in an engaging, consistent, and pleasingmanner, people will look elsewhere to find similar information that meets these criteria. Butwho are we kidding? It takes a lot of time to dress up your web properly, or does it? UsingFrontPage to enhance the look of your web is like having an interior decorator work on yourhouse. In both cases, the results are likely to be professional and pleasing to all who see it.
Apply a Theme to an Entire WebProcedureReference:
A theme is a set of complementary graphical design elements that you canapply to a web to give it an overall, consistent, and professional look. You canchoose from over 50 themes that come with FrontPage.
Themes can affect colors (text, hyperlinks, table borders, and page back-grounds), graphics (background pictures, bullets, horizontal lines, link bars, andpage banners), and styles (font styles and sizes for heading and text) for eitherselected pages or all pages in a web. Figure 4-3 shows how elements, like linkbars, are affected by themes.
Figure 4-3: Link bar without a theme applied (left) and the same linkbar with a theme applied (right).
Applying a theme to your entire web enables you to quickly format each pageat the same time, and develop a consistent appearance without having to altereach page manually. Note that when you apply a theme, unless you’ve speci-fied otherwise, it overwrites the background formatting that you’ve alreadyapplied and formats the page using the theme’s elements. To apply a theme toan entire web:
1 If necessary, open the web to which you want to apply the theme.
2 Choose Format→Theme.
3 In the Themes dialog box, under the Apply Them To option, select AllPages.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 57
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
4 Select a theme from the list.
5 Select (or deselect) any of the following check boxes.
• Vivid Colors: Uses bright colors instead of the normal color set.
• Active Graphics: Uses some animated pictures for buttons and pagebanners.
Not all themes have active graphics.
• Background Picture: Places a picture “behind” the page elements.(Covers the page background color.)
• Apply Using CSS: Uses an external file called a Cascading StyleSheet (CSS) to control the theme, rather than messing with thepage’s HTML code.
If your browser choice in the Page Options dialog box doesn’tsupport CSS, this option may be grayed out.
Whether you apply a theme to a web or selected pages, you will be unable tochange the background using the Format→Background menu option becausethemes control background properties. Additionally, with a theme applied, theBackground tab will no longer appear in the Page Properties dialog box. Tochange the background, you will need to either modify the theme’s backgroundor remove the theme.
If you don’t like how a theme looks after you apply it, simply display theThemes dialog box again and select No Theme from the list and click OK. Atheme will no longer be applied.
ClarifyingApplyTheme ToOptions
As we mentioned earlier, FrontPage gives you the option of applying a themeto All Pages or Selected Page(s). But these options aren’t as clear-cut as theyfirst appear. Let’s take a closer look at the All Pages option first. It reallydoesn’t affect “all pages” because it won’t apply to any page that has had atheme applied to it individually using the Selected Page(s) option. So if yourweb contains pages that have a different theme, you will need to remove thedifferent theme first and then apply the new theme to all pages. As for theSelected Page(s) option, yes, you can apply a theme to a page or more at atime. The option can refer to just the page currently displayed in the Normalpane of Page view, or a file or files selected in the Folder List.
LESSON 4
FrontPage 2002 – Level 158
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC HModifying a Theme and Applying Itto an Individual PageWith a theme applied to your entire web, you will learn in this topic how you can modify atheme to suit your needs and then apply your new custom theme to just one page.
Themes supplied by FrontPage are great time savers, but they’re not very particular in howthey affect elements on your pages. For example, see Figure 4-4; one of your pages has awhite callout with black text in it. You apply a theme that has a light-colored normal text.Because themes don’t affect drawn elements, the callout remains white, but the normal text inthe callout becomes light—making the text nearly impossible to read. The ability to customizea theme’s colors will help you avoid this problem.
Figure 4-4: Sometimes themes need to be customized.
Modify an Existing Theme and Apply It to anIndividual PageProcedureReference:
Every item in a theme can be modified. You can change entire color schemesfrom other themes or you can modify just the color of an individual element,such as a theme’s background color. You can change which graphics and labelfonts a theme uses, too, and even the text styles’ colors for the various styles.To modify a theme:
1 Display the Themes dialog box.
LESSON 4
Lesson 4: Adding Visual Appeal to aWeb 59
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
2 Select whether to apply the soon-to-be modified theme to all pages or justthe selected page.
3 Select the theme you want to alter.
4 Click the Modify button and make any necessary changes to the colors,graphics, or text.
5 When you are done making changes, save the color scheme with a newname.
You won’t be able to save the modified theme with the same namebecause themes that come with FrontPage are read-only.
6 Click OK to apply the modified theme.
Deleting aCustomTheme
Once you have created your newly modified theme, it becomes available toany other new or existing web; however, if for some reason a custom theme isno longer needed, you can easily remove it by selecting it in the Themes dia-log box and clicking Delete. (You cannot delete the themes that come withFrontPage.)
Lesson4Follow-upYou began this lesson by learning about the two primary picture types used in web pages, GIFand JPEG, and how they should be used when estimating a page’s download time. Then, youlearned how to edit a picture using the Pictures toolbar, modified its properties, and embeddedthe picture into a page. Next, you learned how to add hotspots, which are defined areas withina picture that contain a hyperlink to a picture to create an image map. An image map is essen-tially a picture that consists of one or more hyperlinks, or hotspots. Then, you learned how tocreate a new drawing that contains a piece of WordArt and an AutoShape. Next, you added aPhoto Gallery Web component, which is used to arrange and display pictures with captions anddescriptions. Each image within a photo gallery contains a thumbnail image automatically, toincrease download time. Then, you modified the Photo Gallery component by removing a pic-ture, editing a picture by cropping, and rearranged pictures to change the component’s layout.You then viewed various types of themes, which are sets of complementary graphical designelements that can be applied to a page/web to achieve an overall professional “look.” Then,you applied a specific theme to an entire web so that each page fits within the same design.Finally, you learned how to modify the existing theme of an individual page by changing itsbackground color. This may seem like a lot, but by taking the time and effort to make yourweb look good, you help to ensure that visitors will want to return to your site.
1. In your opinion, how important do you think it is to add visual appeal to a web? Is itmore or less important than providing engaging content? Or is it about the same?
Answers will vary.
2. What’s more important to you when creating a visual look for your web? Large attrac-tive graphics or page download speed. Why? Is there a way to have both?
Answers will vary.
LESSON 4
FrontPage 2002 – Level 160
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Preparing and Publishing aWeb
Lesson Objectives:In this lesson, you will prepare a web for publishing.
You will:
• create and complete a task.
• move files from the root directory into their appropriate folders.
• use the Site Summary report to observe a web’s current condition.
• display the Hyperlinks report from the Site Summary report, and then verify and correct abroken link.
• spell check an entire web and use the Find And Replace command to substitute onephrase for another.
• publish a completed disk-based web to the Personal Web Manager.
• publish a server-based web to a local folder on your computer, creating a backup copy.
LESSON 5
LESSON 5
Lesson 5: Preparing and Publishing aWeb 61
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
IntroductionFor all intents and purposes, the web production stage is winding down and it’s time to pre-pare your web for the third phase of the web creation process—publishing. This lesson willshow you how to get your web ready, as well as how to publish it to a Web server.
We’ve all seen web pages that have spelling errors, hyperlinks that don’t work, and even pageswith missing graphics. These are all signs of a sloppy web. Before you put your web out forthe world to see, you want to make sure it’s as complete and error-free as possible. Again, theWorld Wide Web is a very competitive place and if your web has problems, visitors will leaveyour site to find what they want elsewhere.
TOPIC ACreating and Managing TasksThe first two stages of web creation (planning and production) have been reviewed. In thistopic, we will cover an essential step to prepare your web for publishing—how to keep anup-to-date list of things you need to do in a web.
It’s crunch time. The deadline looms and it’s nearly time to open your web to the world.You’ve got dozens of “reminder” sticky notes plastered all around your monitor, a notebookfull of to-do lists, and hundreds of “Did I already do that?” questions bouncing around yourhead. “Ah, confusion!” And if you’re working on a web with another person, double that con-fusion! How can you make sure nothing slips through the cracks? Use FrontPage’s tasks.
What is a Task?If your cube is covered in notes to yourself, you will appreciate a useful FrontPage calledtasks. But before we can discuss tasks properly, we need to define what a task is and what itcan do.
Definition: In FrontPage terms, atask is simply a web-related chore that needs to be done.
Example: Typical tasks can include:
• Delete unnecessary files.
• Verify hyperlinks.
• Call Marketing for approval on the final language.
Ideally, tasks should be added and completed throughout the entire web cre-ation process; however, at the very least, you should check the Tasks viewwhen you are putting the final touches on a web. You need to make sure thatall the tasks have been completed or, if not, then figure out if the incompletetasks are critical to publishing your web. If they are critical, you should com-plete them prior to publishing the web.
LESSON 5
FrontPage 2002 – Level 162
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Task Details A task can be assigned to an individual or a workgroup, be given a priority,and be associated with a particular file. Assigning tasks is best used for col-laborative projects. Giving a task a priority of High, Medium, or Low candenote a level of urgency. Associating a task with a particular page or file willopen the associated file when the task is started.
Tasks View The Tasks view, Figure 5-1, shows a list of all the tasks in the open web. Theview displays the current details for each task in a column format. (See Table5-1.) Tasks view can be sorted by clicking the various column headings.
Figure 5-1: Tasks view.
Table 5-1: Tasks View OptionsColumn Heading DescriptionStatus A task can be Not Started, In Progress, or Completed.
Task The name of the task.
Assigned To User name or workgroup that has been assigned to complete thetask.
Priority High, Medium, or Low, depending on how urgent a task is.(Medium is the default.)
Associated With The name of the file a task is associated with.
Modified Date The date the associated file was last modified.
Description Details of the work that needs to be done.
Create and Complete TasksProcedureReference:
Tasks may seem inconvenient at first, but once you begin to use them, you willquickly appreciate them. Especially nice is the fact that you can create tasksfrom pretty much any view. To create a task in FrontPage:
1 Select the page or file that’s related to the chore you want to complete.This will associate the task with the selected file. (To create tasks notassociated with any file, like “Get new logo,” display the Tasks view.)
2 Choose Edit→Task→Add Task.
3 Name the task, assign it to a person or workgroup, set the priority, andtype a description if desired.
If you are part of a network workgroup, members of your workgroupwill show up in the Assigned To list.
LESSON 5
Lesson 5: Preparing and Publishing aWeb 63
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
4 Click OK.
To modify or delete an existing task, right-click on the task in Tasksview and either select Edit Task or Delete.
Starting andCompletinga Task
Tasks can either be associated with a file or not. To start a task that has a fileassociated with it:
1. Display Tasks view.
2. Right-click on a task and select Start Task from the shortcut menu.
If the Start Task option is grayed out, that means that no page wasselected when the task was assigned. You should do the task and thengo back to Tasks view, manually mark the task as completed (right-click on the task and choose Mark As Completed.
3. Make the changes and save the file.
4. When FrontPage asks if you want to mark the task as completed, clickYes. (Clicking the No button will mark the task as “In Progress.”)
If a task is associated with a file type other than a web page, such as aGIF, the associated editor—such as the Microsoft Photo Editor—willdisplay the file.
Show His-tory
FrontPage keeps track of all tasks in a web, even those that have beencompleted. But you may want to hide the completed tasks so only the tasksthat still need to be done are shown in the task list. To hide completed tasks,right-click on a blank area of Tasks view, and uncheck Show History. (At thetime this was written, FrontPage has a quirk in it that may require you to firstcheck Show History, and then uncheck it again to hide completed tasks.)
LESSON 5
FrontPage 2002 – Level 164
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC BOrganizing Your Web’s FilesYou have created many files in your web and let’s face it, in your rush to put them together,you weren’t very concerned about where they wound up. Let’s learn how to put them wherethey belong.
The boss comes to you and asks you for a document he needs for a meeting in five minutes.You frantically rummage through your desk looking under piles of papers, stacks of unfiledfolders, and in your recycling bin, but can’t find the document. Your co-worker, sitting next toyou, conveniently opens a folder and hands the boss a copy of the document he requested. Hegets praised, but you get a dirty look. By organizing your files in a meaningful and structuredway, you, your co-workers, and FrontPage can all locate and manage the web’s files quicklyand efficiently.
Organize Files in a WebProcedureReference:
Don’t let your web become a junk drawer with all the files strewn about in theroot folder. Similar or related files, like pictures, should be located in the samesubfolder, rather than strewn about in the web’s root folder. This makes man-aging them easy because they’re all in one place without having to sift throughother file types. When organizing your web’s files, be sure to only useFrontPage’s Folder List or Folders view. Do not use Windows Explorer.FrontPage will update links and rename file paths as needed to ensure yourlinks don’t get broken. If you organize files outside FrontPage, the applicationwill not be able to manage the files properly and you may wind up with a“broken” web. To organize files within a web:
1 In either the Folder List or in Folders view, select the file(s) to be moved.
2 When it comes to moving files, you have a couple choices:
• Drag and drop the file(s) into the appropriate subfolder.
• Cut and paste the file(s) in the appropriate subfolder.
3 Drag and drop the file(s) into the appropriate subfolder.
Creating aNew Folder
You are not limited to using the folders supplied by FrontPage. To create anew folder:
1. In either the Folder List or in Folders view, right-click on the folder thatwill contain the new folder.
2. From the shortcut menu, select New→Folder.
3. Type a name for the new folder.
If you accidentally deselect the new folder, re-select it and press [F2] torename it.
4. Press [Enter] to confirm the name.
LESSON 5
Lesson 5: Preparing and Publishing aWeb 65
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
If you decide you don’t want the new folder, simply select it and press[Delete] to remove it from the web.
TOPIC CViewing FrontPage ReportsWith files organized, it’s time to let FrontPage review the web.
We are only human with many distractions—phones ringing, deadline pressures, and co-workerinterruptions. At times, it’s difficult sometimes to remain focused, and we make mistakes. Whohasn’t said, “How did I misspell that?” or “I thought for sure I did that!” Fortunately,FrontPage can prevent us from making many of those lack-of-attention errors.
Use FrontPage ReportsProcedureReference:
FrontPagereports are web analysis tools that offer a common-sense path tomanaging particular aspects of your web so it remains as fast and efficient aspossible. Each report points to site-related matters that may deserve yourattention. The Site Summary report, see Figure 5-2, is where you should startwhen it’s time to turn your attention to the overall condition of your site. Itprovides a general overview of the most significant reports, helping to identifypossible web-related problems, and often supplies hyperlinks to those reportsfor quick access.
Some reports require a live Internet connection. Be sure your connection isworking.
Figure 5-2: The Site Summary report.
In addition to the Site Summary report, FrontPage arranges individual reportsin four categories: Files, Problems, Workflow, and Usage. (See Table 5-2.)Each of these categories contains related reports that provide useful details.
LESSON 5
FrontPage 2002 – Level 166
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Table 5-2: FrontPage Report CategoriesReport Category DescriptionFiles Display a list of all files in a web, recently added or
changed files, as well as older files.
Problems Show a list of unlinked files, slow pages (in terms of down-load time), broken hyperlinks, and component errors.
Workflow Show where a file is in the production process and whetheror not it will be included when the web is eventuallypublished.
Usage Display site activity statistics collected by the web’s server.
To view a report:
1 Choose View→Reports.
2 Select the report you want to view from the appropriate category.
You can also click Reports in the Views bar, and then select a reportfrom the Reports toolbar.
Recent,Older, andSlow Pages
Under the Files report category, there are a few reports that have to do with anindividual file’s size and age. By default, FrontPage considers a file recent if itwas added to a web within 30 days. It considers a file old if it hasn’t beenupdated in 20 days. And it calls a page “slow” if it takes longer than 30 sec-onds to transfer from a server to a visitor’s browser over a 28.8 KB modemconnection. Based upon your own criteria and the typical Internet connectionspeed of your target audience, you may want to adjust these settings. ChooseTools→Options and select the Reports View tab.
LESSON 5
Lesson 5: Preparing and Publishing aWeb 67
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC DCorrecting a Broken Link Using theHyperlinks ReportThe Site Summary report provides a snapshot of the current condition of your web. Within theSite Summary report, there’s no more important report than the Hyperlinks report.
You’ve taken great pains to ensure that you linked all elements in your web properly. Unfortu-nately, not everyone is as careful as you are. If you collaborated on the web with others, someof your web’s internal links may be broken. Additionally, if your web uses external links, youare going on trust that the target file is still in the same place. For peace of mind, you shouldcheck each link in a web. One problem is that in larger webs, this would take a lot of time. Asolution? Let FrontPage check the links for you.
Correct a Broken Link Using the Hyperlinks ReportProcedureReference:
The Hyperlinks report displays good links (ones that connect to items) or bad(broken because either the URL is wrong or the target file no longer exists inthe expected location). It will also display links FrontPage hasn’t looked at yet;these are calledunverified links. If a link is good, the report shows a greencheck mark and an “OK” in the status column. If a link is bad, you will see acracked, chain-link icon and the word “Broken.” If a link hasn’t been checked,or verified, you will see a blue question mark and “Unknown.” (If unknownlinks exist, FrontPage will automatically try to verify them when you run theHyperlinks report.) If the report does identify a broken link, you can correct itimmediately. To do that:
1 From the Site Summary report, in the Name column, click on theHyperlinks link.
2 If prompted, click Yes to let FrontPage verify unknown hyperlinks.
3 Double-click on the broken hyperlink.
You can go directly to the page containing the broken link by clickingthe Edit Page button, but it’s easier to edit the link in the Edit Hyperlinkdialog box.
4 Change the hyperlink in the Replace Hyperlink With text box. Browse forthe correct link, if necessary.
5 Select either Change In All Pages or Change In Selected Pages (if the linkexists in more than one page).
6 Click Replace.
7 Re-verify the edited link by right-clicking on it and selecting VerifyHyperlink.
LESSON 5
FrontPage 2002 – Level 168
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
If the link is still broken, you may want to check to make sure yourInternet connection is working.
Sorting andAutoFilteringReports
When you display an individual report, not available for the Site Summaryreport, often you will be given a long list of items. (In the All Files report of alarge web, you may see hundreds of files.) You can sort a report by clickingthe various column headings. For instance, if you wanted an alphabetical list-ing of items, you would click the Name column heading. You can also filter anindividual report by clicking on the AutoFilter down arrow to the right of acolumn heading. Let’s say you were viewing the All Files report and youwanted to see a list of only those files in the images folder. You would clickthe AutoFilter down arrow to the right of the In Folder column heading andselect images. (To clear an AutoFilter, select All from the drop-down list.)
You can also create your own filter by selecting Custom from the AutoFilterdown arrow.
SavingReports
You may want to keep a copy of a particular report, perhaps to show to aco-worker or your service provider. To create a copy of the report, you caneither:
• Click the Save button to save the report as an HTML page.
Even though the report is saved as an HTML page, the file is associ-ated with Microsoft Excel.
• For more flexibility, right-click anywhere on the report and select CopyReport, and then paste it in another application that can handle HTMLtables. Save it in that file format.You can then print it and/or email thecopy as needed.
If you want to keep a copy of the Site Summary report, you will eitherhave to take a screen capture image or print the screen. (For somereason, FrontPage doesn’t allow you to save the Site Summary report).
LESSON 5
Lesson 5: Preparing and Publishing aWeb 69
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC EUsing Text Editing ToolsYour links are intact, and one of the very last things you will do to prepare your web for pub-lishing is to check its page content for editorial mistakes. FrontPage, as in Microsoft Word,allows you to spell check a page, as well as find and replace text but with a coupledifferences—which you will discover in this topic.
It’s crunch time. The web has to be published for internal review in the next hour. You knowyour pages are littered with misspellings and you seem to recall that you needed to replace oneterm with another, but you can’t remember which page the term was on, or, for that matter,whether it is on multiple pages. What do you do? Start opening one page at a time to spellcheck it and scan for the term? Would FrontPage make you do that? Of course not. Its flexibletext editing tools let you locate and change things over the entire web, saving you a ton ofunnecessary clicking and ensuring that you don’t miss a mistake!
Use Text Editing ToolsProcedureReference:
The primary difference between FrontPage’s text editing tools, Spelling andFind And Replace, and those in Word, is that FrontPage allows you to chooseto scan multiple files for errors all at the same time. In addition to being ableto scan an entire web, you can select pages, or the current page, to speedthings up. To use the text editing tools:
1 Switch to Folders view.
If you want to spell check a file or files, select them.
2 On the Standard toolbar, click the Spelling button and select eitherSelected Page(s) or Entire Web .
Press [F7] to start the Spelling tool.
3 Click Start. FrontPage lists the pages containing misspelled or unrecog-nized words.
4 To correct the misspellings, double-click on a page to open it in Pageview. Use the Spelling dialog box to correct or verify the misspelling, andwhen you have reviewed all errors, save and close the page and continueon to the next page.
If you didn’t have time to correct the misspelled pages right away, you couldadd them to a task list to be completed later simply by checking the Add ATask For Each Page With Misspellings check box available in the Spelling dia-log box.
SpellChecking inPage View
If you are viewing an open page in Page view, clicking the Spelling buttonwill check only that open page for errors. To spell check selected files or theentire web in Page view, you can select any file in the Folder List, and thenclick the Spelling button.
LESSON 5
FrontPage 2002 – Level 170
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
ReplacingText
The Replace command in FrontPage behaves almost exactly like it does inMicrosoft Word; however, the FrontPage version is a diluted version. It doesn’tallow you to look for character formatting, styles, or special characters—likeWord does. One plus is that the Replace command in FrontPage does allowyou to find text in HTML, if you scan multiple pages or the entire web. (Theoption is unavailable if you are only looking in the current page open in Pageview.)
TOPIC FPublishing Your Web to the PersonalWeb ManagerYou have planned and produced your web, completed all the tasks, and it’s now time for thelast stage of the web creation process, publishing your web.
Publishing is the culminating moment of all your hard work. It’s the opportunity to see theentire web as visitors will see it. Whether you publish it to a “staging area” for internal reviewor open the web to the target audience as if to say “Here it is. What do you think?”, publish-ing your web for whatever reason is generally a moment of satisfaction.
Determining Your Personal Web Manager’s PathProcedureReference:
Microsoft’s Personal Web Manager turns your computer into a “virtual” Webserver. This lets you create server-based webs without having to actually pub-lish your work on the Web. Ordinarily, you will use the Personal Web Manageras a staging area to test webs and their components to make sure everythingworks properly. Before you can do any of that, you need to determine the pathto the Personal Web Manager on your computer.
1 In the system tray on the task bar, double-click on the Personal Web Man-ager icon . (If the Tip Of The Day dialog box is displayed, uncheckShow Tips At Startup and click Close.)
If the icon is not in the task bar, choose Start→Settings→ControlPanel. Double-click on Administrative Tools, and then double-click onPersonal Web Manager. (If Personal Web Manager is not listed, itwasn’t installed.) You can display the icon by choosing Properties→Show Tray Icon.
LESSON 5
Lesson 5: Preparing and Publishing aWeb 71
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
2 In the Main screen of the Personal Web Manager, in the Publishing area,it shows that Web publishing is on and that your home page is availableat http://servername. (See Figure 5-3.) That is the path to the virtualserver where you will be publishing your server-based webs. Write downthe path to your Personal Web Manager.
Figure 5-3: The Personal Web Manager dialog box.
Also, notice the path next to “Your home directory,” generally c:\inetpub\wwwroot.That’s the local folder on your computer where FrontPage physically stores your webspublished to the Personal Web Manager.
3 Close the Personal Web Manager dialog box.
Publish Your Web to the Personal Web ManagerProcedureReference:
In the simplest terms, publishing a web copies files from one location toanother. The Publish Web dialog box, see Figure 5-4, shows the disk-based,source web on the left and the server-based, destination web on the right.
LESSON 5
FrontPage 2002 – Level 172
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 5-4: Publish Web dialog box.
1 Choose File→Publish Web.
2 If it’s the first time the web has been published, you will be prompted toenter a publish destination, such as the path to your Personal Web Man-ager, and a web name likehttp://servername/webname. (If you arepublishing the web to a new location, FrontPage asks if you want it tocreate the web there. Click OK to accept the offer.)
3 In the Publish Web dialog box, change Options as necessary.
4 Click Publish.
5 Either view the published backup copy, view the publish log, or clickDone to return to the original web in FrontPage.
In the Publish Web dialog box, you can do some basic file management taskssuch as renaming and deleting files. You can even determine whether indi-vidual files will be published or not. (Files with green check marks next tothem will be published.) Right-click on a file to display its managementoptions. Also, these options, including the ability to publish an individual file,are also available in the Folder List and in Folders view.
PublishingOptions
When you publish a web for the first time, FrontPage automatically places anexact copy of the entire existing web on the new location that you designate—maintaining hyperlinks, themes, and the web’s folder structure; however, whenyou publish a web to a location that already contains a web, clicking theOptions button in the Publish Web dialog box lets you decide which pages willbe published, how changes are determined, and whether or not to keep a logfile of changes made during publishing. (See Figure 5-5.)
LESSON 5
Lesson 5: Preparing and Publishing aWeb 73
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Figure 5-5: Publishing options.
Publishing Logs
The publish log is a temporary page displayed in a browser that is generatedduring each publishing process. It lists all activities that took place, includingwhen the process started and stopped, what files were created, copied, deleted,or renamed. It also shows any confirmation or warning messages.
FrontPageServerExtensions
FrontPage server extensions are a set of programs and scripts that support aFrontPage web’s component elements, adding overall functionality to a weband the Web server on which they are installed. If your Web server doesn’thave the FrontPage server extensions installed, certain FrontPage Web compo-nents will not work—hit counters and search forms, for example. To find out ifyour server has them installed, contact the server administrator.
Not all web presence providers offer complete access to FrontPage serverextensions. Again, check with the server administrator to see what optionsare supported.
LESSON 5
FrontPage 2002 – Level 174
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
TOPIC GCreating a Backup Copy of a WebYou planned your web, produced your web, and you have published your web. It’s time tocreate a duplicate copy of your server-based web and store it somewhere locally (on your harddrive, a local area network, or a removable storage media, like a CD or tape).
Having a duplicate copy of your web will provide you with “disaster recovery”—such as theaccidental deletion of webs. The duplicate also gives you roll-back options; if for some reasonyou want to return to an earlier version of a web, you can publish the backup copy. In short,backing up your web is a smart hedge against potential problems. It provides peace of mind.
Create a Backup Copy of Your WebProcedureReference:
Creating a backup of a server-based web is nearly identical to publishing aweb for the first time. The only difference is that you will need to change thepublishing location. To back up a server-based web,
1 Open the web you want to backup.
2 Choose File→Publish Web.
3 Change the To option and enter the publish destination that will store thebackup copy. (Again, if you are publishing the backup to a new location,FrontPage asks if you want it to create the web there. Click OK to acceptthe offer.)
4 Change Options, if desired.
5 Click Publish.
6 Either view the published backup copy, view the publish log, or clickDone to return to the original web in FrontPage.
Lesson5Follow-upIn this lesson, you first learned how to create and complete web-related chores, or tasks, thatneed to be done. Then, you learned how to organize files in a web by moving them from theroot directory into each of their appropriate folders. Next, you learned how to use the SiteSummary report to observe a web’s current condition, in order to make adjustments for trans-fer sizes and to weed out old, unused pages. Then, you learned how to correct a broken linkusing FrontPage’s Hyperlinks Report feature. Next, you used FrontPage’s text editing tools tospell check an entire web and used the Find And Replace command to substitute one phrasefor another. Then, you learned how to publish a completed disk-based web to the PersonalWeb Manager. Finally, you learned how to publish a server-based web to a folder (local folder)on your computer, resulting in having a backup copy of your web made.
1. When organizing a web, would you consider it more important to organize your files asyou go, or after you are finished? Why?
Answers will vary.
LESSON 5
Lesson 5: Preparing and Publishing aWeb 75
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
2. Why might you want to back up your web? Have you ever had an occasion where youcould use another copy?
Answers will vary.
LESSON 5
FrontPage 2002 – Level 176
Refe
renc
e M
ater
ial
Plea
se D
o No
t Cop
y
Course Follow-upIn this course, you learned how to create, edit, and publish web pages that include text andpictures to an intranet or to the World Wide Web. Also, you learned how to apply formattingto the different sections of web pages, incorporate FrontPage’s components into a web, andcreate tables, text, and images. Now, when you need to create a web page for business or per-sonal use, you now possess the skills to create a basic web.
1. When planning to create a web, what resources do you currently have available? Whatresources would you need in order to successfully create the web?
Answers will vary, but may include: Existing content (brochures, catalogs, flyers, ads,press releases, logos, photos, and so on), existing talent—support from other departments(art, marketing, sales, corporate, and so forth), and existing hardware and software(computers, servers, software licenses, and so on).
2. Consider the type of pictures or images that your web requires. Does FrontPage con-tain the necessary features and tools necessary to create and edit those graphics? Willyou need other software?
Answers will vary.
3. Considering the amount of content contained within your web, what navigational ele-ments might you use to make it easier for site visitors to navigate the web? Whatnavigational elements might you choose to avoid? Why?
Answers may include: Link bars based on the web’s navigation structure, link bars con-taining custom links, and link bars with Next and Back buttons, image maps, and/ormanual (typed) hyperlinks. Reasons to avoid certain navigation elements may include: toocomplicated to manage, too much room for error (especially when you enter manualhyperlinks), and so on.
4. How do you foresee using tables in your web?
Answers may include: For controlling page and content layout, or as easily formatted datacontainers.
5. When you are planning to publish a web, what are some issues that you should con-sider?
Answers will vary, but may include: Running spell checks, organizing files, generating sitereports, and creating backup copies of a web.
What’s Next?FrontPage 2002 - Level 1 is the first course in this series. FrontPage 2002 - Level 2, the nextcourse in this series, teaches students how to use the more complex features of FrontPage2002. Other courses that may be of interest include: Web Design and Usability Techniques.
