Microsoft FrontPage 2003 Savvy [1 ed.] 0782142389

Citation preview

---

SAVVY

Microsoft FrontPage 2003

S A V V Y™

Microsoft FrontPage 2003 ®

®

CHRISTIAN CRUMLISH | KATE J. CHASE

SAN FRANCISCO | LONDON

A s s o c i a t e P u b l i s h e r : DAN BRODNITZ A c q u i s i t i o n s E d i t o r : ELLEN DENDY D e v e l o p m e n t a l E d i t o r : JIM COMPTON P r o d u c t i o n E d i t o r : MAE LUM T e c h n i c a l E d i t o r : MOLLY HOLZSCHLAG P r o d u c t i o n M a n a g e r : AMY CHANGAR C o p y e d i t o r : SARAH LEMAIRE C o m p o s i t o r : MAUREEN FORYS, HAPPENSTANCE TYPE-O-RAMA G r a p h i c I l l u s t r a t o r : CARYL GORSKA, GORSKA DESIGN P r o o f r e a d e r s : EMILY HSUAN, DARCEY MAURER, LAURIE O’CONNELL, NANCY RIDDIOUGH, SARAH TANNEHILL, MONIQUE VAN DEN BERG I n d e x e r : JOHN LEWIS C o v e r , I n t e r i o r , a n d T e c h n i c a l I l l u s t r a t i o n D e s i g n e r : CARYL GORSKA, GORSKA DESIGN C o v e r P h o t o g r a p h e r : ROBERT J. BIRNBACH

Copyright © 2004 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501. World rights reserved. No part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and written permission of the publisher. Library of Congress Card Number: 2003106715 ISBN: 0-7821-4238-9 SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the United States and/or other countries. Savvy is a trademark of SYBEX Inc. Screen reproductions produced with FullShot 99. FullShot 99 © 1991–1999 Inbit Incorporated. All rights reserved. FullShot is a trademark of Inbit Incorporated. Internet screen shot(s) using Microsoft Internet Explorer 5.5 reprinted by permission from Microsoft Corporation. TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible. Portions of the manuscript may be based upon pre-release versions supplied by software manufacturer(s). The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book. Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1

Dear Reader, Thank you for choosing Microsoft FrontPage 2003 Savvy. This book is part of a new wave of Sybex graphics and web design books, all written by outstanding authors—artists and teachers who really know their stuff and have a clear vision of the audience they’re writing for. Founded in 1976, Sybex is the oldest independent computer book publisher. More than twenty-five years later, we’re committed to producing a full line of exceptional graphics books. With each title, we’re working hard to set a new standard for the industry. From the paper we print on, to the writers and photographers we work with, our goal is to bring you the best web design books available. I hope you see all that reflected in these pages. I’d be very interested in hearing your feedback on how we’re doing. To let us know what you think about this, or any other Sybex book, please visit us at www.sybex.com. Once there, go to the product page, click Submit a Review, and fill out the questionnaire. Your input is greatly appreciated. Please also visit www.sybex.com to learn more about the rest of our growing graphics line. Best regards,

Dan Brodnitz Associate Publisher Sybex Inc.

Acknowledgments Writing a book this long, this detailed, and this timely is a labor of many hands and minds. I’d like to acknowledge the contributions of those who helped in many different ways. If I’ve forgotten to mention any names, please forgive me. ■ First, I have to thank Briggs Nisbet for her forbearance during a very difficult and challenging writing schedule. Without her love and support, none of this would have been possible. ■ Thanks to my literary agent, Danielle Jatlow of Waterside Productions, who kept the heat on or off me, as the case may be, and motivated me to do my best possible work. I’d also like to thank Maureen Maloney, also of Waterside, for processing my checks so efficiently. ■ At Sybex, I’d like to thank Associate Publisher Dan Brodnitz and Acquisitions Editor Ellen Dendy, who convinced me to do this book. Jim Compton’s developmental editing sought perpetually for greater clarity, more evocative explanations, and more vivid examples. He strengthened this book immeasurably and when I was low, he encouraged me. Production Editor Mae Lum handled the thankless task of shepherding me through a series of missed deadlines with unfailing grace. Copyeditor Sarah Lemaire tempered and tamed my off-topic rants and haphazard demonstrations, turning them into well-reasoned lessons and clear step-by-step tutorials. ■ When they told me Molly Holzschlag was to be our technical editor, I almost panicked. How would I get away now with lazy generalizations and received hearsay? True to form, Molly held my feet to the fire and demanded the highest standards of clarity, evidence, and proof. Her commitment to web standards and to web-design professionalism rubbed off on my chapters to my credit. Those chapters would be infinitely less effective without her input, exceptions, and advice. ■ Maureen Forys of Happenstance Type-O-Rama did the actual page makeup, which is tricky in a design as complicated and yet as elegant as this book’s; I appreciate her skillful work. A lot of other people at Sybex helped on this project without interacting with me directly, and I’d like to acknowledge their contributions (most are listed on the copyright page) as well. Thank you all! ■ I learned a lot doing web consulting with the now defunct Groundswell. The Groundswell ’hogs went through a lot together, in the trenches of the dotcom boom-and-bust, and I know I’ll be working with people I met there on and off for the rest of my life. Before Groundswell, I knew how to

throw together a one-person website, but from my colleagues there, I learned how to collaborate on large-scale production-ready sites. It was quite thrilling. Thanks also to clients at Sprint, Visa USA, Executive Greetings, PeopleSoft, and Seybold, whose real-world projects gave me all kinds of work to sink my teeth into. Similarly, I’d like to thank the people I worked with at Enterpulse (another consultancy), which has survived the worst part of the downturn and will probably be around for a long time. Lastly, I’d like to thank the people at Open Publishing for supporting all of my writing work. —Christian Crumlish

Let me readily second the accolades Christian has already tendered for our superb Sybex and Waterside support crews, and let me add the name of David Fugate, my literary representative in this endeavor. ■ But permit me to also thank the doctors, nurses, and support staff of Central Vermont Medical Center who helped me survive severe double pneumonia and an accompanying life-threatening syndrome with an all-too-high mortality rate just as this book was going into production. With their able assistance and kindness, I outlived two weeks in intensive care and all that hospital food. ■ Finally, my profound thanks to my partner, John, and the endless support offered by my friends and family. —Kate J. Chase

Sybex would like to thank indexer John Lewis for his valuable contribution to this book.

About the Authors The design, care, and feeding of good websites is just part of what Kate J. Chase does, although it’s integral to all of it because she works online. She got her start in cyberspace on Fidonet, an all-volunteer worldwide network of online enthusiasts in the late 1980s. As the Internet grew, Kate led and managed technical support communities for America Online, The Microsoft Network, and ZDNet. A frequent beta tester, voracious online participant and reader, and active web community consultant, Kate has also authored, co-authored, edited, or contributed to more than a dozen technical references, including Instant E-Commerce (Sybex, 2001) and PC Disaster and Recovery (Sybex, 2002). With her interests ranging from operating systems to applications to PC hardware to the effects of technology on our all-too-human lives, Kate has written for newspapers, magazines, and dozens of online venues in addition to writing books.

Born in a log cabin on the Missouri River… no wait, wrong bio. Born and raised on the mean streets of New York City, Christian Crumlish matriculated at the school of hard knocks (okay, Princeton) and has since pursued a number of exciting career options, including typist, gopher, editor, and small-business owner. Since the early 1990s, Christian has been writing about technology, business, popular culture, politics, and the media. He co-founded the webzine Enterzone in 1994 and a web-solutions consultancy in 1996. He has registered far too many domain names, most of which will probably never see the light of day. Christian has packaged books and e-books, consulted on matters of information architecture and content-management strategy with Fortune 500 companies, represented other authors as a literary agent, and written nearly 20 books on technology, the Internet, and web development. He has taught Seybold seminars, is contributing to the Lockergnome RSS Resource weblog, and is writing a syndicated column about web design and development called “Above the Fold.” Christian is also the author of Dreamweaver MX/Fireworks MX Savvy (Sybex, 2002).

CONTENTS AT A GLANCE Introduction

■

xix

PART I

■

PLANNING YOUR PROJECT AND SETTING UP FRONTPAGE 1

Chapter 1

■

Planning and Preparing for a Web Project 3

Chapter 2

■

Setting Up Your Workspace 23

Chapter 3

■

Web Pages Deconstructed 43

Chapter 4

■

Defining Your Website 57

Chapter 5

■

Gathering Content and Working with a Team 85

PART II

■

BUILDING A WEB PAGE 103

Chapter 6

■

Creating a New Web Page 105

Chapter 7

■

Working Through Page Layout 127

Chapter 8

■

Inserting and Formatting Text 167

Chapter 9

■

Working with Graphics 201

Chapter 10

■

Inserting and Maintaining Hyperlinks 229

Chapter 11

■

Implementing Your Navigation Scheme 253

Chapter 12

■

Working with Dynamic Web Templates 277

PART III

■

ADDING DYNAMIC CONTENT 295

Chapter 13

■

Adding Animation and Multimedia 297

Chapter 14

■

Inserting ActiveX Controls and Other Advanced Objects 317

Chapter 15

■

Building Forms 337

PART IV

■

DEVELOPING WEB APPLICATIONS 367

Chapter 16

■

An Overview of Database-Backed Sites 369

Chapter 17

■

Working Directly with Markup and Scripts 397

Chapter 18

■

Developing Data-Driven Websites 427

Chapter 19

■

Adding Automatic Web Components 461

Chapter 20

■

Promoting Community with Discussions 481

PART V

■

SITE ADMINISTRATION FROM START TO FINISH 499

Chapter 21

■

Setting Up the Back-End Interface 501

Chapter 22

■

Enabling Content Management 531

Chapter 23

■

Going Live 545

Chapter 24

■

Maintaining and Administering a Site 559

Appendix A

■

Installing a Web Server 573

Appendix B

■

Online Resources 593

Index

■

605

Contents Introduction PART I

■

PLANNING YOUR PROJECT AND SETTING UP FRONTPAGE

Chapter 1 ■ Planning and Preparing for a Web Project

xix 1

3

How FrontPage Helps You Prepare

4

Questions You Must Answer

6

Brainstorming Your Concept

14

Getting Started

22

Chapter 2 ■ Setting Up Your Workspace

23

Getting Oriented

24

Changing the View

27

Customizing Your Workspace

35

Planning for Accessibility

40

From Page to Site

41

Chapter 3 ■ Web Pages Deconstructed

43

The Elements of a Web Page

44

Working with Content

45

Designing for the Web

47

Setting Up a Navigation Scheme

52

Time for Groundbreaking

55

Chapter 4 ■ Defining Your Website

57

Further Developing the Site Design

58

Setting Up Your Website

60

Dynamic Web Templates

67

Using Themes

67

Hands On: Creating Your Own Theme

72

Considering Your Navigation

73

Setting Up a Web Server

75

Going Forth From Here

84

Chapter 5 ■ Gathering Content and Working with a Team

PART II

■

85

Taking an Inventory of Content

86

Creating Reusable Web Content

92

There’s No “I” in Team

94

Version Control with Check-in/Check-out

95

Teamwork with Windows SharePoint Services

98

Enough with the Planning, Already

102

BUILDING A WEB PAGE

Chapter 6 ■ Creating a New Web Page

103 105

Starting a New Web Page

106

Hands On: Building a New Page with the Help of a Wizard

109

Setting Up Your New Page

113

Applying Themes

117

Working with Style Sheets

118

Adding a Page Transition

124

Doing Page Layout

126

Chapter 7 ■ Working Through Page Layout

127

Test, Learn, and Enjoy

128

Selecting and Fine-Tuning a Predefined Layout or Theme

129

Page Layout with Tables

132

Page Layout with Cascading Style Sheets

144

Page Layout with Frames

157

Hands On: Setting Up Frames for Your Site

160

Anchor Points or Bookmarks and the Positioning Toolbar

164

All the Text Content That’s Fit to Format

166

Chapter 8 ■ Inserting and Formatting Text

167

The Importance of Effective Formatting

168

Working with Text and Formatting

171

Working with Style

188

Hands On: Adding Style Rules and Applying Style

189

Repurposing Office Content

193

Hands On: Copying Material from Microsoft Word and PowerPoint

196

Picture It

200

Chapter 9 ■ Working with Graphics

201

Creating Graphics

202

GIF, JPEG, and PNG File Formats

206

Inserting Graphics into a Web Page

207

Hands On: Inserting and Positioning a Picture

210

Editing Graphics

218

Creating a Photo Gallery

225

Tracing a Page Design

225

Connecting Pages

227

Chapter 10 ■ Inserting and Maintaining Hyperlinks

229

Fundamental Concepts

230

Inserting Links

233

Creating a Bookmark

240

Using an Image as a Link

241

Creating an Image Map

242

Modifying Links

245

Controlling Hyperlink Colors and Effects

246

Managing Links

248

From Deep Structure to Interface

252

Chapter 11 ■ Implementing Your Navigation Scheme Navigation Savvy

254

Using Navigation View

256

Major Navigation Scheme Tools

260

FrontPage Navigation: Go it Alone or Improvise?

263

Creating Navigation/Link Bars

263

Creating Navigation Menus

265

Troubleshooting Your Navigation

270

Creating DHTML Navigation Menus

271

Inserting Menus

272

Leaving Breadcrumbs

273

From the Static to the Dynamic

275

Chapter 12 ■ Working with Dynamic Web Templates

PART III

■

253

277

About Dynamic Web Templates

278

Creating a Dynamic Web Template

282

Hands On: Designing a Dynamic Web Template

282

Applying the Dynamic Web Template

289

Modifying a Dynamic Web Template

293

Getting More Dynamic With Your Site

294

ADDING DYNAMIC CONTENT

Chapter 13 ■ Adding Animation and Multimedia

295 297

Creating Image Rollovers

298

Creating Animated GIF Files

304

Rules of the Road for Web Animation

305

Hands On: Creating an Animated GIF

306

Adding Other Media to Your Site

309

Using Multimedia Add-ins

310

Inserting Other Types of Dynamic Content

314

Man Those Controls!

316

Chapter 14 ■ Inserting ActiveX Controls and Other Advanced Objects Consider Your Audience

318

ActiveX Controls

318

Hands On: Using ActiveX Controls/Office Web Components to Add a Web-Based Spreadsheet

324

Other Advanced Controls

326

Testing and Troubleshooting Controls and Objects

334

Taking Up a (Data) Collection

335

Chapter 15 ■ Building Forms

PART IV

■

317

337

Data Collection vs. Navigation

338

How Forms Work

338

Planning Your Forms

340

Anatomy of a Web Form

342

Creating a Form

354

Hands On: Creating a Jump Menu

359

Handling Forms at the Back End

362

Next Stop, Faster Scripting

365

DEVELOPING WEB APPLICATIONS

Chapter 16 ■ An Overview of Database-Backed Sites

367

369

An Introduction to Database-Backed Sites

370

Designing and Testing Web Applications

371

Choosing an Application Server Model and Scripting Language

372

Setting Up an Application Server

373

Working with ASP, ASP.NET, JScript, and VBScript

377

Working with XML

384

Right Down to the Code

395

Chapter 17 ■ Working Directly with Markup and Scripts

397

Working with Added HTML

398

Using Code Snippets to Store Repeated Code Blocks

405

Using Microsoft Visual Basic Editor

410

Adding VBScript, JavaScript, and JScript

413

Troubleshooting Scripts and Markup

425

Give Us Your Data

426

Chapter 18 ■ Developing Data-Driven Websites

427

Working with Databases

428

Preparing a Database

430

How FrontPage Views Data

433

Defining a Data Source

434

Working with Data Connections

435

Working with SharePoint Data Views

445

Working with Web Parts

451

Hands On: Combining Data Views

453

Troubleshooting Database Connections

454

Working Directly with SQL

456

Bells and Whistles

459

Chapter 19 ■ Adding Automatic Web Components

461

Using Office Web Components

462

Adding Office Web Components to Your Site

465

Hands On: Creating a Web-Based Interactive Spreadsheet

472

Connecting to Web Services Using .NET

474

FrontPage Automatic Web Content Components

476

Up for Discussion

478

Chapter 20 ■ Promoting Community with Discussions

PART V

■

481

Defining Discussions

482

Setting Up a Discussion

483

Managing Your Discussions

496

Empowering a Living Site

498

SITE ADMINISTRATION FROM START TO FINISH

Chapter 21 ■ Setting Up the Back-End Interface

499 501

Establishing User Administration

502

About Login Pages and Processes

514

Spare Yourself the (Web) Winter of Dis-Content

529

Chapter 22 ■ Enabling Content Management

531

Defining a Content-Management Strategy

532

Content Updates with Dynamic Web Templates

535

There are Templates…and Templates

535

Integrating a Weblog

536

Choosing a Weblog Tool

539

Working with Weblog Templates

541

Hands On: Adding a SharePoint Weblog to Your Site

542

Last-Minute Checklist

543

Chapter 23 ■ Going Live

545

Checking Browser Compatibility

546

Meeting Accessibility Standards

552

Quality Assurance and Final Testing

555

Turnover: From Staging to Production

556

The Long Haul

558

Chapter 24 ■ Maintaining and Administering a Site

559

Making Updates and Corrections

560

Hands On: Creating and Revising a Site Map

562

Managing Users

565

Journaling, Site Versioning, and Rollback

566

Handing the Product Off to a Client

567

Tracking Site Activity

570

Go Forth

572

Appendix A ■ Installing a Web Server

573

Do You Need a Web Server?

574

Internet Information Services

576

Running Windows SharePoint Services

583

Appendix B ■ Online Resources

593

General Resources

594

Microsoft FrontPage Websites

597

Website Planning Information

597

Web Accessibility Resources

598

Design and Layout Resources

598

Web Development and Applications Resources

599

Resources for Developing DataBacked Sites

601

Content-Management Resources

602

Website Administration Resources

603

Index

605

Introduction In the old days, developers made websites by typing one tag at a time, uphill both ways, in the snow, against the wind. You’ve heard this story before, haven’t you? Well, we’ve come a long way, baby, and Microsoft’s FrontPage 2003 now makes the process of developing robust, production-ready websites almost easy. This is a book by and for professionals working in any of the fields now affected by the Web, which is to say, the entire global economy. You can work your way through this book from Chapter 1 to Chapter 24, or you might find it more productive to jump around, especially if you are already experienced with web development or with earlier versions of FrontPage.

Who Needs This Book While FrontPage is often thought of as an easy rather than an intuitive and innovative webproduction tool, its close integration with Office and with Microsoft’s web server technologies and web application frameworks makes it a natural fit for an enterprise that is completely standardized on Microsoft’s vision. Some people will reach for FrontPage because it is the best tool for the job, and others will use it because they already own it. FrontPage can be a useful web-design, development, and management tool for a wide range of people, including but not limited to the following: • Project managers

• Producers

• Writers and editors

• Artists

• Information architects

• Managers

• Graphic designers

• Agencies

• Database architects

• Consultancies

• Interface designers

• Website owners

• Usability experts

• Other professionals

• Developers

• Students

• Coders All of you should get something of value from this book.

Conventions Used in This Book In a technical book such as this one, we try to make it as easy as possible for you to pick out the information you need. (Even our parents don’t read these books from cover to cover!) To help you find your way through this book as effectively as possible, we’ve incorporated a number of design elements to call out material that may be of interest to you. References to the book’s website are singled out with the icon shown in the left margin. We didn’t use this one too often but we hope you’ll visit the site (http://frontpagesavvy.com). We think you’ll find it a useful complement to the book and a valuable resource as you get more experience with FrontPage. Many of the procedures for accomplishing tasks using FrontPage 2003 are broken down into numbered steps, and many chapters include Hands On tutorials that enable you to try out what you’ve learned with a specific project. Tips, comments, and warnings that are not necessarily part of the procedural flow are called out as Notes.

SIDEBARS Occasionally, interesting bits of information that may not be essential to your understanding of FrontPage 2003 are boxed as stand-alone sidebars, like so. These are usually much longer than Notes. You can feel free to skip over them if you’re in a hurry to get to the next paragraph.

Because there are many different ways of working on the Web and you may not need to make use of every possible feature of FrontPage, feel free to skip around from chapter to chapter as necessary. To minimize redundancy and pack as much fresh information as possible into this book, we’ve liberally included cross-references throughout this book to suggest when you might profit from looking at another chapter.

How This Book Is Organized This book has five parts comprising 24 chapters, two appendixes, and a color section. Here’s a quick rundown of what you’ll find inside: Part I: Planning Your Project and Setting Up FrontPage Part I is all about getting your project started and your site set up to optimize the development process. Chapter 1 explains what to do before you even take FrontPage out of the box, including the essentials of website planning and preparation. Chapter 2 shows you how to get your FrontPage workspace set up for efficiency and comfort, and how to set up a website for the first time. Chapter 3 breaks down web pages into their component parts, based on how FrontPage works with HTML files and other web documents. Chapter 4 explains how to set up your first website, and Chapter 5 introduces you to some FrontPage tools for teamwork and collaboration. Part II: Building a Web Page Part II is the heart of the matter: how to assemble the essential elements needed to construct a web page. Chapter 6 explains how to start a page from scratch (or from an existing page or template). Chapter 7 covers layout with tables or CSS 2.0 (Cascading Style Sheets) to develop cutting-edge standards-compliant designs. Chapter 8 is all about working with text, including CSS text-style formatting. Chapter 9 shows you how to add graphics to your pages in FrontPage. Chapter 10 describes how to insert local and external hyperlinks onto your pages. Chapter 11 explains how to take a navigation scheme from the drawing board and implement it in your website. Chapter 12 tells you how to take finished page designs and turn them into templates to make the production of related pages that much easier. Part III: Adding Dynamic Content Part III takes you a step beyond flat, static web pages and shows you how to add movement and interactivity to your pages. Chapter 13 shows you how to add animations and multimedia objects to your web pages. Chapter 14 introduces you to the world of Microsoft-specific ActiveX controls and advanced objects. Chapter 15 explains the most common platform for interactivity on the Web today: the fill-in-the-blanks form. Part IV: Developing Web Applications Part IV takes you into the world of dynamic, databasebacked websites, also known as web applications. At this point, you’re developing software that happens to run over web protocols. Chapter 16 gets you started setting up web applications with FrontPage. Chapter 17 helps you customize your coding environment. Chapter 18 is a crash course in database development for the Web. Chapter 19 shows you how to use

FrontPage to build automatic web content components, and Chapter 20 covers a range of options for incorporating community software into your site. Part V: Site Administration from Start to Finish Part V is about wrapping up your development project and handing over a site that doesn’t just look cool but actually works! Chapter 21 explains how to set up administration modules for managing a new site. Chapter 22 helps you come up with a content-management strategy and solution for your site. Chapter 23 describes how to verify browser compatibility and accessibility before going live and discusses the issues involved with launching a site or turning it over to a client. Chapter 24 covers maintaining a website long after the hoopla of opening day has passed. Appendixes: Web Resources Two appendixes supplement the core FrontPage information in the book. Appendix A shows you how to set up a web server on your computer or network, whether for a testing or staging environment or for production (live) purposes. This appendix also shows you how to install Windows SharePoint Portal or Services to augment FrontPage’s capabilities. Appendix B gathers a set of useful FrontPage and website-development resources that are available on the Web. We’ll update this information and add to it from time to time at the book’s website (see “Visit Our Website” later in this introduction). The Color Gallery To help inspire your own design and development efforts, the FrontPage Website Gallery presents some of the professional, well-designed and eye-catching sites that were created using FrontPage as the development platform.

Visit Our Website This book has a website that can be reached at http://frontpagesavvy.com. The site includes copies of the tutorial and example files; news and developments about FrontPage, web design, and information architecture; corrections and updates for the book; and a way for readers to suggest improvements for the next edition. Tutorials Some of the Hands On tutorials in this book require the use of files supplied on the book’s website. To try out a tutorial, copy the files from the appropriate chapter to a new folder on your own computer or network and then follow the steps of the tutorial.

Website Samples Throughout this book and located on the book’s website are three sample sites used to illustrate the development of different types of sites. These include • An heirloom seed company struggling to get its full site online and turn itself into an ecommerce enterprise • A community business development agency in upstate New York • A small marketing company’s intranet

Join the Discussion There’s a discussion group for this book as well. You can find the details on the book’s website. This is also the best place to ask questions of the authors and the other readers of the book.

PART I

Planning Your Project and Setting up FrontPage There’s quite a bit of preparation that you need to do before creating a website. You need to decide who you’re trying to reach with your site, and plan the contents accordingly. You need to understand what the elements of a web page are and how they work together. You also need to set up FrontPage and your workspace in a way that makes sense for what you’ll be doing. Finally, you need to compile the content for the site. The first five chapters of FrontPage 2003 Savvy will guide you through the planning and preparation stages. CHAPTER 1

■

Planning and Preparing for a Web Project

CHAPTER 2

■

Setting Up Your Workspace

CHAPTER 3

■

Web Pages Deconstructed

CHAPTER 4

■

Defining Your Website

CHAPTER 5

■

Gathering Content and Working with a Team

CHAPTER 1

Planning and Preparing for a Web Project KATE J. CHASE

Many web professionals I know would tell you that the truly difficult job of designing and launching a website is in the advance planning, as you begin to develop a general concept into a more finite one and then whip this into a workable plan. If you’ve already spent some time familiarizing yourself with FrontPage 2003’s features, you know that it includes an abundance of the tools necessary to construct a decent website that can be as professional and/or as customized as you desire. (And if you’re not familiar with those features, I’ll talk about some of them in a minute.) You can easily orient a FrontPagecreated website to electronic retail pursuits, to provide members-only content or services for your clients or subscribers, to offer information about your organization or cause (or kick this up to a full-blown corporate presence type of site), to set up a work space where team members can check databases and collaborate on documents related to a project, or to offer customer support, among a myriad of other possibilities. Because FrontPage is packed with everything you need to begin your project, many people find themselves constructing a site before they even give the whole idea a great deal of thought. Therein lies a problem. A good website takes smart advance planning, and a great website usually takes far more planning. There are questions you need to ask (yourself, if not others), research you need to perform, and decisions you need to make in advance. Failure to do this advance work invariably shows to the site’s visitors and may very well end up costing you time. For example, you might not correctly analyze what your users need or you might design a site that requires far more real-time maintenance than is actually necessary. In this first chapter, the emphasis is on doing your homework before you begin the actual work of designing your website. The topics in this chapter include ■

How FrontPage Helps You Prepare

■

Questions You Must Answer

■

Brainstorming Your Concept

4 ■ CHAPTER 1: PLANNING AND PREPARING FOR A WEB PROJECT

How FrontPage Helps You Prepare Creating a website does not require any special tools. In fact, many of us developed our first web pages using something as ubiquitous as a text editor such as Windows Notepad. Yet doing so demands that you have a basic understanding of web page creation along with a fluency in the fundamental commands in a markup language such as Hypertext Markup Language (HTML) or Extensive Hypertext Markup Language (XHTML), the basic languages for setting up web pages. FrontPage 2003 was designed to allow someone with virtually no experience working with web markup or HTML and XHTML to be able to develop, publish, and maintain either an Internetor intranet-based site. (An intranet is often similar in tools and information dissemination to the global Internet, but available only though a private network to those with express access.) FrontPage 2003 does this by providing these services and features, among many: • Compatibility and integration between this website-creation tool and other key components of Microsoft Office, such as Microsoft Word • Wizards to allow you to create the basis of a full website based on certain standard website types (Customer Support, Project Web, Discussion Web, SharePoint Based Team Web, Corporate Presence, and so on) that you can then edit and customize to your needs • Themes (essentially ready-to-go graphic designs) to grant you the ability to create a consistent aesthetic appearance throughout your website • Cascading Style Sheets (CSS) to give you the ability to add sophisticated presentation features such as font, formatting, borders, and colors and to easily make site-wide changes to these styles • Collaboration tools to allow you to work on the website with others in your team • Add-in support for specific third-party products that allow you to add special capabilities to your FrontPage-created site such as an e-commerce component for handling web sales • Automated publishing lets you transmit and post your website content quickly and easily • Management and reporting options that allow you to analyze, secure, and maintain your website All of these features and more combine to give you a single-package solution for creating, customizing, launching, analyzing, and maintaining your website. Throughout this book, you’ll learn how to use these features to your best advantage. Yet with any website, great visuals, strong colors, and good intentions only get you so far if you fail to do the most fundamental work involved in setting up a site: planning it with care and attention to detail. FrontPage 2003 alone does much of the work for you, but it can’t

HOW FRONTPAGE HELPS YOU PREPARE ■

decide your goals in establishing your website, or make certain you get the correct message across as you design it, or keep your target audience happy without your careful planning and active participation. In this chapter, you’ll get a look at the advance work you need to do before you sit down with the software, but first, let’s talk for a moment about some of FrontPage’s limitations.

Where FrontPage Doesn’t Always Help As a long-time FrontPage user, I think it’s a very solid package for website development and management, especially for those users with little or no formal training in website creation and HTML. Yet I feel obligated to tell you that there are some limitations with this package that you should be aware of before you get to work. One of the most common complaints is that for best results working with FrontPage, you have to publish your work to a web server that has been extended or enhanced using something called FrontPage Server Extensions. This software sets up the conditions necessary for all FrontPage-supported features, including the easiest publishing method, to work. While you can still use FrontPage 2003 and create and publish your website even if you’re not working with a FrontPage-extended server, you may find yourself hampered in the ability to use certain FrontPage-specific features, including some web components and the web usage reporting tools. For instance, you can use File Transfer Protocol (FTP) to upload your web project rather than the automatic Publish tool available under the File menu in FrontPage. However, if you’re a SecureFTP user, you’ll find that this isn’t supported. A bigger issue, however, is that many professional designers tend to prefer packages such as Dreamweaver MX by Macromedia for site designs that are visually complex or that require the development of sophisticated applications to run from a site’s server. (These applications are called server-side applications because the server runs the necessary applications rather than requiring that visitors download and run the applications.) Such folks argue that one of the tradeoffs for the ease of using FrontPage to build a site is that you’re locked into using just one of the two server-side scripting languages for developing applications and enhanced functionality that FrontPage supports: Active Server Pages (ASP) and ASP.NET. This immediately reduces web application options to pretty much only those written in JScript and VBScript. Don’t take from this, however, that you can’t add server-side applications and strong professional features and functionality to your FrontPage-created site. You can. You simply don’t have these extra tools built directly into FrontPage, so you’ll need to augment what you can create in FrontPage in order to do that. This means that if you or someone on your web development team wants to produce or use applications that are not directly supported by FrontPage, you may be in for a good amount of tweaking or head banging. For this reason, it’s vital that you establish what you want to include in your site early on so you can be sure to accomplish what you want using FrontPage as your main web production and management tool.

5

6 ■ CHAPTER 1: PLANNING AND PREPARING FOR A WEB PROJECT

Questions You Must Answer As with most worthwhile projects, there are a number of questions that you need to answer to your satisfaction before you can jump into the process and begin your work. The questions presented in this section are intended to help you shape the scope of your web project before you begin to plan its content.

What Are Your Goals for This Site? Having a mission statement for any ambitious project is never a bad idea, but you definitely need to map out your goals for such a site before you design it. Such goals can have a direct impact on what you choose to include and how you package it. If you’re unclear about your objectives and the message you want to convey, your design and content may reflect this. It can make it far more difficult for you to capture and keep your core audience. Your goals need to be realistic, too. For example, if your goal is to open a global website that generates a million unique hits during its first week, there is almost no chance that this will happen. Even by hiring professional web marketers to help spread the word, it often takes between four and six weeks before a new site makes it into one of the major web search engines such as Google (www.google.com) or Yahoo! (www.yahoo.com). Let’s look at an example. Consider an heirloom seed company that has decided to open its first website, complete with an e-commerce component so that it can conduct sales. The company’s founder, recognizing that she doesn’t have the funds for a massive advertising campaign to drive people to her new site, begins to assemble a list of short-term goals that she feels she can meet, including the following: 1. Get the site up and running in 30 calendar days. 2. Add the company’s new URL to all of its print material, including catalogs, order forms, and advertising. 3. Be prepared for at least a modest (5–10 percent) rise in sales during the first 30 days that the website is available for orders. 4. Assign someone from the office staff to monitor web-driven e-mail and comments. Her long-term goals might look like these: 1. Take measures to try to experience a 10 percent growth in website sales during its first 3–6 months. 2. As sales begin to rise, increase the number of products offered on the site until it approaches 50 percent of the total product list. 3. Develop the site to include a full roster of gardening articles and sowing instructions and institute a monthly web-based newsletter along with monthly special sales.

QUESTIONS YOU MUST ANSWER ■

You need to tailor your list of goals for your particular situation. Don’t be afraid to update these goals as needed.

Who Is Your Target Audience? The rule of thumb with any type of media delivery is that you must know your audience to provide them with the experience they seek. This is true of the Web too, whether it’s for an internal intranet or the global Internet. The nature of your audience—and what you expect from your audience such as joining your organization, buying your product, or contributing to your project—will determine many issues related to site development, including the following: • The site’s overall aesthetic approach • The writing level and the organization of the site content Deciding on your site’s focus and audience in this initial phase is critical because it goes to exactly what you offer on your site (the content), and how it’s packaged. If your audience is very general (“Anyone who happens in with their Web browser”), your tone, look, and content is apt to be quite different from a site catering only to experts and aficionados in a given field.

WILL YOU ACCEPT ADVERTISING? It’s very possible that once your website becomes available, you may be approached by a third party to ask if you will accept advertising. While this occurs more frequently with heavily trafficked websites, small, information-only sites and vendors find themselves confronting this question, too. Recently, I heard from a corporate intranet administrator who was contacted by a pizza chain who wanted to run target ads that would pop up to employees around lunch time. You should consider this carefully, taking into account the nature and focus of your site, your objectives, and the types of people who visit your site and their possible reaction. (The company seeking to advertise will likely want to establish the demographics of your site audience before the deal is signed.) For example, so-called pop-up ads tend to annoy visitors. Also, if your site includes product comparisons and reviews as part of its content, it’s possible that some of your audience may question your objectivity, especially in situations where you appear to favor an advertiser’s product over a product that’s not advertised. It’s important that you don’t see third-party advertising sponsorship as a major revenue source for your site either, because the price paid for this may be extremely low. Sometimes the rates are as high as one cent per visitor clicking the ad, and sometimes they are less than one cent per every 10 visitors clicking an ad, but rates can go much higher and much lower depending on the site and the advertiser. This might offset some of the expenses inherent in hosting a site, but only time and experience will tell you whether it’s worth it. Weigh the potential income against the possible costs to you and the nature of your site and audience before you decide.

7

8 ■ CHAPTER 1: PLANNING AND PREPARING FOR A WEB PROJECT

But there is more to consider. For example, in some cases, your target audience may be only people on your corporate network or only people using broadband services to access your site. Determining this ahead of time means you may be more free to incorporate elements such as multiple images, Flash, or other animations, or permit searching a large database on a single web page that would normally slow a dial-up access visitor (those connected at 56Kbps or less) to a crawl. Also, if you want only certain people to have access to the site, make sure that only authorized users (assigned through site-management tools and the use of designated usernames and passwords) can do so. You can also decide how “open” or “closed” your site will be. An intranet-based site is typically only available for browsing to specific individuals with user accounts on that network (although some people will have the ability to author and manage the site, too). A globally positioned Internet site can be open to all, or open to all but making sure that premium or behind-the-scenes content is available only to those with registered accounts and/or subscriptions. In addition, a global site can provide virtually nothing but a way for people with registered accounts to access the site from anywhere, for example, from a hotel room on a business trip in addition to from a workstation at the office.

Who Is Involved and How Will You Work? If you’re working with others on a team to develop a site, you need to establish a cohesive game plan for who is responsible for what duties. Be sure to develop a rough schedule of when individual assignments will be completed. FrontPage offers a Task Manager tool for keeping track of this information. Some teams choose to divvy up the work by sections of a website and other teams by page, although most teams are likely to divide up this work by overall job responsibility such as content writer, Web application developer, and so on. As you’ll read about shortly in this chapter, your work with your website usually doesn’t end when you publish it. Make sure to have a plan in place for who will update (or who will update what pages), who will be responsible for regularly checking the site for problems such as dead hyperlinks, and how other roles may change once your site is live. If instead, you’re working solo to develop a site for a client or party, establish the groundwork for what this person or entity desires, when and how you can deliver it, and what conditions are necessary before the site is approved to go live.

QUESTIONS YOU MUST ANSWER ■

PROFESSIONAL FRONTPAGE WEB-HOSTING SERVICES Many web-hosting companies support FrontPage web creation, publishing, and site management. Having that support is critical, because the web-hosting service needs to be knowledgeable about problems that may arise from FrontPage and related issues. They need to keep their web servers up to date with the latest security patches and versions of FrontPage Server Extensions and SharePoint Team Services Extensions in order to work best. The latter can matter significantly, because a host using older extensions isn’t going to support the features you may try to implement. If you decide to use a hosting service, be sure to compare more than just price. Make sure they can handle the bandwidth that a site of your type may require. Bandwidth can run very high for a global Internet web presence where you will actively advertise the site to nationwide or international consumers, or moderate if you’re a small organization with just a few thousand visitors each week. To some degree, you’re going to need to anticipate whether you expect a high volume of traffic, because many hosting services impose a fee when you go beyond your expected traffic level. You also need to ask what kind of failsafe mechanisms they employ to make sure that if the host experiences a problem, your site doesn’t go down at all or is offline for the shortest amount of time possible. The reality is that every site will be hit by an outage occasionally. Some major FrontPage web-hosting service companies include (but are no means limited to) the following: •

Definition 6 at www.definition6.com

•

FPToday at www.fptoday.com or www.iqtinc.com

•

Total Solutions at www.totalsolutionsonline.com Other sites, such as The Host Index at www.hostindex.com, allow you to search for web-

hosting services by specific criteria, such as whether they support FrontPage. You can find other web-hosting sites by using a web search engine such as Google or Yahoo!. Also, if you know other people who use a professional FrontPage web-hosting service, don’t shy away from asking how they like the service. Microsoft makes a list of web presence providers that fully comply with their FrontPage and SharePoint Team Services web implementations available at www.microsoftwpp.com/ default.asp.

9

10 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

How Will Your Site Be Published? FrontPage 2003 allows you several different options for getting your website published for visitors. You can • Publish it locally to your own web server that has been extended to work with FrontPage (using FrontPage Server Extensions or through SharePoint Team Services) for small traffic or specific team use. • Publish it through your company intranet. • Publish it to a professional web server, either your own or through a commercial webhosting service that provides you with the space and bandwidth necessary for global Internet access.

What Do Similar or Competing Sites Offer? Because there are over 155 million websites—and this number is growing rapidly even with the post–boom-era Internet slump—whatever type of website you plan to publish likely has some competition, for your target audience or for actual product or service sales. Be sure to research sites similar in focus or concept to what you want to achieve. You may find these sites by performing queries on web search engines such as Google and through recommendations from customers, clients, friends, and co-workers. Once you locate similar websites, analyze them to see what features you feel are most effective and then consider how you can incorporate something similar into your own site. But don’t just copy; make it your own. Likewise, analyze these websites to see what features simply don’t work. This can take the form of pages that take too long to load or never completely load, add-ins such as survey forms or voting tools that misbehave, or good information that gets lost in a sea of bad colors or too many distracting elements. You can take this a step further by creating a list of sites you want to analyze and then asking a number of users to visit these sites. Have those users answer a questionnaire that you develop and use the data to determine what others think about the features you might choose to incorporate or avoid. You might anticipate, for example, that your target audience might not care for information presented in tables, only to discover that your casual focus group found the tables exceptionally helpful. Having this kind of information before you fully develop your site helps you reduce the large amounts of work you might put into developing features that are unlikely to appeal to your target audience.

Viewing from More Than One Perspective While you are analyzing other websites—and later, your own—be sure to look at them not just from your perspective as a website designer but also as a normal visitor. Millions of dollars have

QUESTIONS YOU MUST ANSWER ■

been wasted developing major websites that simply didn’t work because the designer never saw past his or her own concept of the site to understand how a visitor would experience it. The most common example of this occurs when developing the navigation for a website, the way a site has been organized to help the visitor move throughout the different features and content areas. The easier you make it for a visitor to successfully reach Point B (a link on your site) from Point A (usually, the home or index page) on your site, the better it will be for you (or your client or employer) as well as for the visitor. All too often, it’s possible to create a navigation scheme through a website that makes perfect sense to the site designer who has spent hours mapping it out, while the visitor is left scratching his or her head, wondering how to find the desired information. A great example of this can be found at various points on Microsoft’s own family of product and support websites. At www.microsoft.com, it can sometimes be downright impossible to find your way into the right message base/discussion board where you can post a question. Now Microsoft has no shortage of talented people whose jobs are focused on website design and management. But many users—myself included—are left with the impression that these same folks are not trying to use the site as we are, or they would realize all too quickly that “You can’t get there from here.” If you use the casual focus group idea suggested earlier, you may be able to gather some of the information described in this section from your questionnaire. However, you should still use this bifocused viewpoint yourself as you scrutinize competing or similar sites.

Looking Under the Hood If you’re wondering what another site looks like from an HTML level, use the Source option on your web browser (under the View menu in Microsoft Internet Explorer) to view the HTML code. For example, Figure 1.1 shows the opening page of TheTabletPC.net site, and Figure 1.2 shows the underlying HTML code for the page.

THE “SCIENCE” OF WEB DESIGN While we tend to think that anyone can create a web page (and they can), website design and functionality has truly grown into a major course of study and expertise all its own as the value and power of the medium has become apparent. Just as the advent of first radio and then television brought with it dozens of experts to help the industry use the medium to its best advantage, so too has web design, which now offers two distinct sciences under its banner: Usability (or user experience) and Information Architecture (IA).

11

12 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

Figure 1.1 TheTabletPC.net’s informational website

Figure 1.2 The source HTML behind TheTabletPC.net

QUESTIONS YOU MUST ANSWER ■

You can use this option to help you figure out how the site’s creator implemented something on the site, such as • What other similar sites use for meta tags, which are special tags used on a web page to identify its creator and content by specifically chosen keywords that serve as the basis for web search engine classification • Which meta tags are used for setting character encoding • The HTML tags used to create a specific table or menu implementation For example, the first time I wanted to create a web menu that, when a menu option is either clicked or the cursor is positioned over it, opens to a sub-menu (called a fly-out), I looked for another site that offers it, such as the one at the Microsoft Office website (www.microsoft.com/office). Once I found the menu type I wanted (Figure 1.3), I used the Source option in Internet Explorer to find the part that creates the fly-out menu by searching through the HTML code (Figure 1.4) for the phrases as they appear in the menu items. Figure 1.3 Fly-out menu on the Microsoft Office site

13

14 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

Figure 1.4 The source HTML for the fly-out menu

Brainstorming Your Concept Now that you’ve answered the questions described in the previous section, you face both the creative challenge of deciding exactly what your site should include and the chore of organizing that material in a design that permits your web audience to move fluidly and effectively through your site. In other words, it’s time to flesh out your concept and brainstorm how you will implement it. Later, as you are working in FrontPage itself, you can begin to add color and character through the use of backgrounds, themes, and font choices; decide whether or not to use borders or frames; and style the actual arrangement of your pages. But first, you need to bring content to your concept.

Preliminary Site Design Elements Once, while visiting a Seattle-area web design office, I saw this motto posted everywhere: “You can bring people into your site with a great look or a unique idea, but it’s superb content coupled with smooth navigation which keeps them returning.” While you can probably name several visually effective and stunning websites because such sites stand out in your minds, it’s usually a site’s content that makes a visitor bookmark the site, and later return to it to retrieve additional information, to use a tool, or to order a product.

BRAINSTORMING YOUR CONCEPT ■

Because FrontPage 2003 takes care of so much of the site’s appearance for you (which you can customize to suit your needs), let’s focus your attention on content, its development, and its organization.

Planning Your Content In Chapter 3, “Web Pages Deconstructed,” you’ll learn more about the typical elements that make up a web page and the common pages used as the foundation for a website. In the meantime, however, you’ve probably already got some ideas in mind for what content you want your site to include. Start jotting these ideas down, adding as many details as is appropriate for each item listed, such as “The home page should include…” and “The library of support articles should cover these topics….” Don’t just think in terms of text, although text is often the dominant form of content. Strategically chosen and positioned page objects such as images (digital photographs, drawings, and clip art), audio and video media (sound bites, movies, and live camera feeds), compatible web applets and applications, data tables, PowerPoint presentations, and Excel charts are just some of what can be added to enhance your text-based content. These elements help differentiate a hastily prepared site from one rich in information and user experience. PRIORITIZING CONTENT DEVELOPMENT

If your planned web project is fairly simple, it may be relatively easy for you to develop your content within a short period of time and publish it all to the Web or to the corporate network intranet at the time of the site’s debut. However, not every website is that simple, and it may be desirable to take a slightly different approach than “all or nothing.” Some may opt to wait until all the desired content is ready before launching a site. Others may take a tiered approach, where essential pages and content are available from the start while additional, or second (and third) tier, content is added later as it becomes available for posting. Should you decide to use this tiered approach, look at your content from the standpoint of trying to determine what content must be ready on your site at the time it is launched and what content can wait. In other words, prioritize your content so that you focus on the essential material now, and then move down the priority list to finish the remaining material until it is all made available. For a simple example, let’s say that you want to offer a site that includes the usual main pages (Home, About Us/Contact Us, and so on) plus an extensive collection of photographs and articles as part of an information-based website. In such a situation, you could prioritize your content so that you publish the main core pages immediately, then create your collections of photos and articles, but prioritize them so that you make some of the collection available now, and the rest you add later.

15

16 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

By contrast, suppose you’re creating an e-commerce site, where products or services will be available for purchase. Getting your e-commerce component in place at the time your site goes live is imperative, and should always be given top priority over more support-oriented content. After all, few people enjoy visiting a store where they don’t have the option of buying, and you’re going to want the sales. But here’s a cautionary note: While it can be wise to prioritize content development and to expect that not all content will go online at one time on your website, avoid situations where you create just a home page now and then insert “Under Construction” pages in place of future content. This happens far more often than it should, and such sites often remain unfinished for prolonged periods of time. Marketing research tells us that visitors to a site will not stay long if they feel frustrated by not finding what they need; they’ll simply move on to a different site where the material is available. ACCESSIBILITY OF CONTENT

People with disabilities account for approximately 10 percent of the world’s population, and some of the issues they must work with may affect their ability to appreciate or even use many websites. A good web designer should be conscious of this, and try to construct a site that limits the use of features that further challenge such individuals. For example, if you design a site that depends entirely on the ability to navigate by seeing on-screen graphics such as animated arrows without any underlying way for others to use it, it’s going to be tough for someone with a visual deficit. A visual disability can take many forms—from the inability to see objects that are too small to not being able to distinguish between certain colors to either partial or full blindness. Tools exist to help those with impairments use the Web, but these tools often rely on alternate elements within a site to give that assistance. For example, these tools may look for text to describe or explain a non-text element. Even without a full-blown disability, many older web visitors (and they make up a significant population of users) will find it extraordinarily frustrating to work with a site that uses only small fonts and tiny images.

Considering your ultimate desire to make your site accessible and useful to everyone who visits it, you simply can’t afford to blindly ignore options that could keep rather than cost you traffic to your site. In fact, whenever you add a new feature to your site, you should ask yourself, “Is this going to cause a problem for anyone trying to use it?” If the answer is “yes,” you need to see if there is more than one way that you can present that feature.

BRAINSTORMING YOUR CONCEPT ■

Some of the rules for creating an accessible website include the following: • Every non-text feature should have a corresponding text equivalent. • A table of information should have its rows and columns clearly marked for maximum visibility and easy identification. • Where color is being used to convey a message on a site, you also need to have a noncolorized equivalent to assist the user’s understanding. • When a page requires an additional tool to be installed on the user’s system to load a page element, this should be clearly marked on that page and a link for downloading that tool should be provided. • Electronic online forms should be designed so that they can be used by people who employ assistive technology. • A document shouldn’t have to depend on a style sheet to be displayed properly. • Avoid table-based layout wherever possible since the table may not be interpreted well by assistive technology tools. Make sure to design tables that can transform gracefully when interpreted. • Offer alternative navigation methods, especially when navigation depends on graphical elements. • Avoid using elements that may cause a page to flicker when displayed in the user’s browser. These are only some of the rules, but as you can already see, many of them make sense for the general population as well, such as having a link to a tool or application needed to view a particular web page. These rules fit for the general population too, because it doesn’t require a human physical disability to have problems accessing or using a web page. For instance, you can have people logging in through remote devices and terminals that don’t offer the depth, size, or color of display you would have on a desktop PC. You can find the complete list of accessibility rules, contained in the Section 508 Mandate of the Federal Access Board, at www.access-board.gov/sec508/guide/1194.22.htm. You can find excellent ideas for increasing the overall accessibility of your site by visiting either the World Wide Web Consortium’s Web Accessibility Initiative’s site at www.w3.org/WAI or the Web Accessibility in Mind’s site at www.webaim.org. Two other good informational sites can be found at Dive into Accessibility at http://diveintoaccessibility.org and WebABLE at www.webable.com. WATCHING COPYRIGHTED MATERIAL AND OTHER ISSUES

As in any other media publishing environments, which web publishing is, exercise extreme care that you have express permission to incorporate copyrighted material from another source.

17

18 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

In the Internet boom of the late 1990s, respect for the intellectual property of others often went unobserved in a seemingly widespread consensus sentiment of “If it’s available on the Internet, it’s free and available for me to use.” The net result was that many website operators were slapped with copyright infringement suits or received letters threatening legal action for the unauthorized use of materials. Often, the material involved were media files such as MP3 recordings and movie or television clips. But the copyright issue often hit home with the reprinting of published articles and the unauthorized reproduction of digital photography. The law has not always successfully distinguished between blatant infringement (where you know you’re using someone else’s work but you choose to employ it anyway) and more naïve infringement where you grab an image you find on the Internet and use it on your website without checking to see whether it’s considered in the public domain and available to copy. Some individuals and groups have become quite adamant that you cannot link to their site without specific permission and unless the entity linking to their site meets certain criteria. Requesting such permission is good netiquette for the casual website operator and imperative for those establishing a professional presence on the Internet. You will save yourself (and your client or employer, if applicable) both time and potential legal costs if you request permission ahead of time. Wherever possible, this should be done on paper so that you have the signature of the authorizing party in your files. If you must seek permission electronically, accept it only if you get a digital signature, because many courts may rightly find that it is easy to fake an e-mail. CONTENT AND MAINTENANCE

As you plan the content for your website, factor in how often you plan to update this material because this can matter in how you package it for your audience. When a new site is launched, designers and/or webmasters tend to be very good about checking material and posting new content readily. Over a matter of weeks or months, however, there is a tendency to become less careful, which may leave expired or just plain old content in place far longer than it should be. This can leave the visitor with an impression that the site is not being well tended. While some of your content may demand daily updating, limit the amount of content you publish that either bears a date or is apt to look dated if it remains in place over a period of time unless you are certain you have the resources to handle massive daily updating. Of course, there are other ways around the old content issue. One is to keep current information in the form of a weblog that can be annotated daily or many times a day with updated details and links to other pages of interest. Often, weblogs are employed on the home page of a site. They offer not just information, but they convey the sense that the site is fresh, topical, and well-maintained.

BRAINSTORMING YOUR CONCEPT ■

Another tool is to use a content management system (CMS). A CMS is special software designed to help track, manage, and retrieve the documents included on your site. Such systems run from the very simple to the extensive and powerful, and may be based on an Extensible Markup Language (XML) database; the price for a CMS can run the gamut too. By mapping out the site-maintenance issues ahead of time and being mindful in how you implement your content, you can reduce your maintenance and editing time and focus only on the material that needs to be updated more frequently. EXPLAIN YOUR PURPOSE

One of the first bits of information a visitor should see when he or she visits your site is something that identifies who you (as in the website) are and why the site exists. This can be an entry paragraph on the home page or a separate page available from a primary link from that home page. This helps define what your site is about for your visitors. It can make the difference between a site that someone remembers and one that gets lost in all the other related sites the visitor may browse in any given day. AVOID MIXING YOUR SITE’S MESSAGE

One of the hallmarks that distinguishes a professional-quality website from one that has been created with less planning and attention to detail is the latter’s tendency to dilute the site’s message with off-topic or inappropriate content. Some glaring examples of this I’ve seen over the years include the following: • A shoe vendor’s site where attempting to access the e-commerce component to order shoes took me through a forest of features on religion and family and the value of composting kitchen waste before I saw any shoes • A Midwest medical testing equipment company’s site that required users to drill down several levels to find anything besides pictures of the owner’s large sailboat and stories of his adventures camping in Canada • A small Los Angeles–area restaurant’s website that devoted some of its home page to discussing the benefits of high colonics offered by a neighborhood naturopath While you can certainly blend related material into your site and do so quite successfully to enhance your integral content, avoid introducing anything that takes the focus away from the main intent of the site. You want the visitor to leave with a strong impression of what your site is about.

The Information Architecture: Organizing Your Site’s Planned Content Once you have a working inventory of the elements you would like to include on your site, consider how it should be organized, which in turn starts the development of your site’s navigation—how the user gets around your site.

19

20 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

There are a number of different ways to approach this. Some might choose to work directly within FrontPage to begin to build the pages and the progression, taking the time to experiment with different looks and page layouts. However, this method can be taxing unless you have a very logical mind and can think about the overall hierarchical structure of the site as you work. FrontPage is little help with this, because it reports back to you what navigation you’ve set up rather than whether it’s the best structural layout for your content. Let’s look at some other ways of doing this that may be more effective for you. In fact, you can use more than one method, as desired, to hammer out your structure. Remember to share these plans with others on your design team and ask for their input if you’re working collaboratively. It’s vital that each person is aware of what is evolving in the process.

CREATING A WIREFRAME

A wireframe is a mockup of a concept that shows a progression of information. Each frame represents a page and what content will appear on that page. In this sense, it’s not unlike a movie storyboard that presents a story scene-by-scene. While you can flesh out these frames as much as you wish, it’s often as not done with paper and pencil (a pencil, so you can erase and change the frame) and without exhaustive detail. This is a great idea when you have to present your early concept to a client or an employer for initial approval, but a wireframe can also be enormously helpful to you in further defining your project’s scope before you design the individual pages of your website. CREATING A SITE MAP

You’ve no doubt been on established websites that offer an option called a site map and, if so, you already know that a site map is often but not always a hierarchical representation of the content found on the site. As such, it can be as elaborate or as simple as you think is required. The site map can include a simple list of site sections with links to them, or it can be a major hierarchical representation where every major piece of content for each page is listed. Many site maps are similar to a flowchart and are sometimes referred to as thumbnails because a common type of site map offers a thumbnail sketch of what is contained on each page in a logical progression. You’ll find that FrontPage includes a site-mapping tool, which you’ll read about in Chapter 11, “Implementing Your Navigation Scheme.” While you can create a site map readily once the site is complete, it’s also an excellent planning tool that can be prepared with paper and pencil to help you establish the structure of your site, including what content (or links to additional content) can be found on each page. Figure 1.5 contains an example of a simple site map.

BRAINSTORMING YOUR CONCEPT ■

Figure 1.5 An example of a site map

Home Page

Shop Our Store

• E-Commerce Component

Artisan’s (Monthly) Newsletter

• • • • • • •

Heirloom Photo Album

Ask the Experts Discussion Web

Contacts and “About Us” Page

Current Newsletter Archive of Past Newsletters “Share Your Tips” Form Fruits Vegetables Flowers Trees/Shrubs

Understanding the Progression of Work I remember sitting in a seminar a few years back created to teach entrepreneurs and others the importance of an electronic web presence, and having one of the presenters compare the creation of a site with putting in a garden. “Just as prepping the soil and planting seeds is only the initial work involved in having a productive garden plot, preparing and publishing your website is just the start of the process on an active website. The garden needs to include the right mix of plants, must be tended and watered and weeded, and you must watch for the right moment to harvest. A website needs to be checked and rechecked for problems, you have to keep the content and overall appearance looking fresh and topical, and you must give your visitors a compelling reason to return again and again,” the presenter said. “Let either the garden or the website languish unattended, and all your work will be for naught.”

21

22 ■ C H A P T E R 1 : P L A N N I N G A N D P R E P A R I N G F O R A W E B P R O J E C T

It’s true: A website of any type needs at least occasional editing and updating. Failure to do so is likely to result in a site that looks dated, static, and is apt to point to more than a few dead hyperlinks to other sites, because you’ve removed pages that existing hyperlinks still reference, or because you’ve linked to external sites where the content may expire after a period of time, or because the referring site may wink out of existence. Your grand plan should also include using others, preferably people not intimately involved in your project, as site guinea pigs during the early stages of publishing your website. Actually, recruiting helpful users isn’t a bad idea throughout the “life” of a site because not all the problems are apt to occur in the very beginning. As the old saying goes, “The more eyes see something, the less chance you miss something.” More casual eyes are likely to pick up pesky problems such as bad hyperlinks, buttons that don’t work, typographical errors, and fonts or colors that don’t translate well between different browsers, browser versions, and PC video setups. No single one of these is likely to make or break your website, yet they can affect a visitor’s impression of the professionalism and care with which you’ve prepared your site. This is an instance where sweating the small stuff can indeed matter.

Getting Started This chapter has given you a great deal to think about, and even more to plan for before you jump into the actual design process. But this advance work is invaluable, especially in creating your first professional-quality website, because it can make all the difference between a site that looks good and works and navigates well from the start and one that does not. In the next chapter, however, you’ll move beyond concept development to the important task of establishing and understanding your workspace on the road to turning your concept into a website reality.

CHAPTER 2

Setting Up Your Workspace CHRISTIAN CRUMLISH

Once you’ve done the preliminary planning for your project, it’s time to plunge right into FrontPage. If you’re familiar with other Microsoft Office applications (or earlier versions of FrontPage), then you’ll find the layout comfortingly familiar. Most of the time, the primary focus of your workspace will be a single page or page template, but the tools for working at the website level—files, links, styles, templates, assets, and so on—are never far out of reach. Here are some of the topics this chapter will address: ■

Getting oriented

■

Switching between views

■

Customizing your workspace

■

Designing to a specific browser

■

Planning ahead for accessibility

24 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Getting Oriented Whenever you start FrontPage, the window contains the usual Microsoft Office “cruft” near the top and a main area that is usually split into two panes: a wide one on the left and a narrow one on the right (see Figure 2.1). The narrow pane on the right (the Task pane) may also be hidden if anyone has run FrontPage before you and closed it or changed the setting that opens it automatically on startup. (You’ll see how to do this later in this chapter.) FrontPage also offers to make itself your default HTML editor the first time you run it. Either click Yes, or uncheck the box before clicking No so that FrontPage doesn’t keep nagging you in the future every time you start it up.

The Document Window Most of the action takes place in the document window, where you can design, layout, and edit pages or manage other elements of your website. To begin with, this area is shown in Page view, but it can be switched to a number of different views, as you’ll soon see. Because the controls and widgets arranged around the edges of the FrontPage window can encroach on the space you need for page layout and design, try to run FrontPage with the largest monitor you have available (at least 17 inches is recommended). Figure 2.1 FrontPage displaying an open blank page

Task pane Title bar Menu bar Standard toolbar Formatting toolbar Tabs Quick Tag Selector

The page shown in Design view

View bar Status bar

GETTING ORIENTED ■

The Title Bar The FrontPage title bar shows the path and filename of the active document. It doesn’t display the HTML title of a web page the way a web browser typically does. In fact, the title of your document does not appear anywhere in the document window. This means you may end up leaving your document with a generic title if you don’t make a point of going to the Properties dialog box (File ➔ Properties) to specify a title, as discussed in Chapter 7, “Working Through Page Layout.”

The Menu Bar and Toolbars Like any other Office application, FrontPage has a menu bar (a set of long menus with dozens of options) and displays the Standard and Formatting toolbars by default. There are a myriad of other toolbars you can display when you need them; many of them cue themselves up under appropriate circumstances, such as when making a drawing, laying out a page with tables, applying Cascading Style Sheet (CSS) styles, or working with forms, data, and XML.

Tabs and the Quick Tag Selector When multiple pages or views are open, the document window uses tabs to stack the views while keeping them at hand. FrontPage puts an asterisk next to the filename shown in the tab of any edited file whose last changes haven’t yet been saved. New pages are given dummy titles before you save them. You can design and lay out a page before saving it (although personally, I’m paranoid about losing my work), and you can add outgoing links, but you have to save it at least once before you can make other pages link to it. The Quick Tag Selector may or may not be showing. This feature offers an easy way to select parts of a document based on the HTML tags marking up sections. Like the toolbars, the Quick Tag Selector can be hidden if shown, and shown if hidden.

The Main Document Window The main document window displays pages, but it can be changed to show a file list for your site, a navigation tree, a diagram of all the links, a view of your remote hosting server, and so on.

View Bar Page view has a few modes, showing just a design interpretation of the page, raw code, a split view showing both at the same time, and a preview. Toggle between these views depending on the focus of your attention.

The Status Bar The Status bar shows the position of the mouse pointer in Cartesian (x, y) coordinates. Most of the time you can ignore this. The only time it’s ever particularly useful is when placing or drawing graphics in Design view, as discussed in Chapter 9, “Working with Graphics.”

25

26 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

A rough guide to how quickly the current page will download follows on the Status bar; this value is adjustable based on the likely connection speed of the site’s audience. Next, the Status bar shows the maximum (or target) height and width dimensions for your site, which is another parameter you can configure. The Status bar also displays the word “Default.” This refers to the page setup options. Double-click the Status bar to change the page options for the current page, as discussed in Chapter 6, “Creating a New Web Page.” Following that, the Status bar indicates the browser type the current site is being designed for. In some views, the current file’s name or title is shown next.

Folder List Instead of switching between Page view and Folder or Navigation view, you can display a narrow pane on the left-hand side of the document window (see Figure 2.2). This view also has a View bar with the option of switching to a Navigation view in the narrow Folder List pane. The dividing line between the Folder List and the document area can be moved to change the width of the list. You can close the Folder List just by clicking the × button in its upper-right corner.

Task Pane Over on the right-hand side, the Task pane exists to serve. Hide it when you need the space. For tasks ranging from starting new websites to looking up information on the Microsoft Office website, the Task pane provides a web-style process for specifying and completing those tasks. Figure 2.2 The Folder List provides a handy way to grab local files for editing.

CHANGING THE VIEW ■

27

Changing the View By default, FrontPage shows the current open document in Page view, but the View menu overflows with alternative views and add-ins you can toggle on and off. Page view itself has several different modes that you can switch among using the View bar just above the Status bar.

Page View You use Page view whenever you’re editing or examining a web page or template. (Most of the other views deal with site management.) Depending on the kind of page development you’re doing and your degree of comfort with HTML and other markup and coding languages, you can choose which variation of Page view fits best with your work style. The options on the View bar are Design, Split, Code, and Preview. Design view hides the code that comprises the actual HTML file, showing only a possible interpretation of its appearance. Working in Design view is more like working with a word-processing, page-layout, or graphic-design program. Code view shows just the raw code and leaves the rendering of the pages to your imagination. For old-time hand coders, this is the best, most uncluttered way to design web pages. For most of the rest of you, the Split view allows you to focus on the design of the page but retain easy access to the underlying code when doing fine-tuning work (see Figure 2.3). The Preview button attempts to show the page you’re working on as a browser will display it, without any FrontPage artifacts such as visible tags or a layout grid. Figure 2.3 Split view gives you two views of (and two ways to work on) your page at once.

28 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Folders View Just as web pages are just HTML (and other) code “under the skin,” a website is really just a set of folders and files (including database files sometimes) on a computer being served up by a web server. Whether you work on your site remotely, work on a local version of your site before publishing it, or work on a local site that’s accessible only by local users, you’re going to have one view of the site’s folders (main folder and subfolders) and the files they contain for easy linking, organization, and maintenance. You’ll learn how to set up the local folder view of a new site in Chapter 4, “Defining Your Website.”

To look at your site in Folders view, select View ➔ Folders (see Figure 2.4). In Folders view (and any of the other non-Page views), there are color-coded buttons just above the Status bar for switching from view to view. All the available views are also accessible from the View menu. They are grayed out until they are relevant, that is, until you design a site. These other views include Remote Web Site The Remote Web Site view is only available, of course, if you’ve set up a remote website that’s in synch with the local version of your site. Reports The Reports view is used to show the results of compatibility and accessibility analyses of your site, as discussed in Chapter 23, “Going Live.” Figure 2.4 Get an overview of your entire site’s file structure in Folders view.

CHANGING THE VIEW ■

Navigation The Navigation view is used to display a site map based on the navigational taxonomy of your site (as opposed to the file hierarchy). I’ll explain how to design and set up a navigation scheme in Chapter 11, “Implementing Your Navigation Scheme.” Hyperlinks The Hyperlinks view shows all the links to or from a selected page, also discussed in Chapter 11. Tasks The Tasks view shows currently assigned and unfinished tasks for managing and tracking a collaborative team project, as discussed in Chapter 5, “Gathering Content and Working with a Team.”

The Folder List Suppose you need to check your Folders view or Navigation view frequently and find that it interferes with your page design work or disorients you in your own workspace. If this is the case, you can open up the Folder List as a pane down the left-hand side of the document window. To do this, choose View ➔ Folder List (see Figure 2.5). This does cut into the breadth of your Page view, but you can adjust the width of the Folder List pane, and you can close the Task pane if it’s open and you don’t currently need it. The Folder List has a View bar of its own. You can switch to a view of the site’s navigation in that same pane by clicking the Navigation button. Click the Folder button to switch back. Figure 2.5 Keep an eye on your site structure while designing and editing pages.

29

30 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Figure 2.6 Click the Task pane’s drop-down menu to see how the help material is organized.

The Task Pane The Task pane (not to be confused with Tasks view) tries to help you find information or perform tasks, especially file and site management tasks. The Task pane appears when appropriate, but you can also summon it by selecting View ➔ Task Pane (see Figure 2.6). You can resize it or close it by clicking the close button (×) in its upper-right corner. The Task pane works like a little website and has its own Back and Forward buttons (like a browser). Home is set to the Getting Started task pane. The other panes include Help, Search Results, Clip Art, Clipboard, and others that appear when needed, such as the New, Theme, and Data Source task panes. Figure 2.7 shows the Help task pane.

The Quick Tag Selector Taking up just a little bit of screen real estate just below the tabs in Page view, the Quick Tag Selector shows you which tags apply to whatever part of the document you are currently pointing to or selecting. If you click the button representing a tag, you Figure 2.7 Search for help or get online help, training, and access to other users from the Help task pane.

automatically select whatever part of the document that you want that tag to apply to (see Figure 2.8).

CHANGING THE VIEW ■

31

The Toolbars By default, only the Standard and Formatting toolbars are displayed. Most of the other toolbars show up when needed, and they disappear thereafter. But if you select View ➔ Toolbars, you can turn on any toolbar you want manually from the submenu that pops up. Here are some of the available toolbars: Standard and Formatting toolbars The Standard and Formatting toolbars resemble those of most other Office applications. If you find yourself using them, keep them around. If you end up using menus, keyboard shortcuts, or other procedures, you may want to hide one or both of them to gain a little extra space. Code View toolbar The Code View toolbar includes shortcuts for the kinds of commands you want easy access to when editing HTML code directly (see Chapter 17, “Working Directly with Markup and Scripts”). DHTML Effects toolbar The DHTML Effects toolbar makes it easy to add Microsoft-friendly DHTML (dynamic HTML) effects to your pages (see Part III, “Adding Dynamic Content”). Drawing, Drawing Canvas, and Pictures toolbars The Drawing, Drawing Canvas, and Pictures toolbars come in handy when you’re using FrontPage to create, edit, or manipulate graphics. However, you may be better off creating your original art using programs that are primarily designed for graphic manipulation such as Illustrator, Freehand, and Photoshop. See Chapter 9 for more on using graphics in web pages. Figure 2.8 Clicking the

button in the Quick Tag Selector immediately formats the paragraph (shown selected in both panes of the Split view).

32 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Dynamic Web Template toolbar The Dynamic Web Template toolbar helps you turn model pages into templates with locked areas. This allows you or your team to easily generate a number of variations on a basic design theme while maintaining consistent elements throughout. You’ll learn more about templates in Chapters 4 through 7. Positioning toolbar The Positioning toolbar comes in handy when you’re designing a precise layout with graphical and text elements positioned absolutely. Style toolbar Use the Style toolbar to apply text formatting and create CSS styles. Tables toolbar It’s becoming less fashionable to design and lay out web pages using tables, but there are still times when a table offers the easiest way to impose a grid on your page layouts. When you’re doing page layout with tables, the Tables toolbar provides convenient shortcuts (see Chapter 7). WordArt toolbar The WordArt toolbar is standard in Office and is used mostly for cheesy text-stretching effects. It could conceivably be useful when making a logo (see Chapter 9). XML View toolbar FrontPage now has the ability to display and render XML files automatically, which gives you a view into the data level of communication between different systems. The XML View toolbar offers shortcuts for navigating and editing XML files (see Part IV, “Developing Web Applications”). Customized toolbars You can also customize any toolbar or make your own toolbar with your own favorite commands by choosing View ➔ Toolbars ➔ Customize. Then you choose the buttons you want to include on or exclude from your custom toolbar.

Design Guidelines The View menu also enables you to turn on two features that can be helpful when doing web page design. Select View ➔ Ruler and Grid to place rulers along the top and left edges of the Figure 2.9 Choose your tracing image, the optional x and y coordinates, and a level of transparency/opacity.

document window and to lay down a gray grid of horizontal and vertical lines to help guide the layout of design elements. A tracing image is a graphical mockup of your web page design used to guide your layout process as you try to match up the actual interactive web page with the proposed design. Choose View ➔ Tracing Image ➔ Configure (see Figure 2.9). In the Tracing Image dialog box, select the image (sometimes called a comp), position it (if it’s not to be flush with the top and left edge of the browser window), and set its level of transparency (I recommend a little under 50%, a light grayish feel to remind you what’s in the background). The image appears behind the elements on your page, enabling you to “trace” the underlying image by matching up real web design elements to the proposed graphical forms.

CHANGING THE VIEW ■

33

You can show or hide the tracing at will by selecting View ➔ Tracing Image ➔ Show (or Hide). Figure 2.10 shows a tracing image in place behind an otherwise blank new page (the text copy is part of the visual comp).

Page Size You may not always design for a specific target browser window size, but you probably have some idea of the optimal size for viewing your design, the most likely screen size and resolution available to your users, and the minimum dimensions that your design needs to work with. You can specify a page height and width. FrontPage indicates the width by placing page margins at the left and right side of the document window (assuming you open the window wider than the proposed width) and by running a dotted line across the screen where the vertical height is reached. Web designers have borrowed the terminology of newspaper designers to refer to the area on a web page (especially the home page of a site) that appears in the first screen height as above the fold. Whatever content appears above the fold is most likely to be seen by a site visitor, so it helps to have a guideline showing you where this fold appears. You can choose View ➔ Page Size and then select one of the standard proportions. Most of these options are based on standard screen resolutions minus some screen real estate for the “cruft” around the edges of the web browser window. Alternatively, you can specify your own custom dimensions. Figure 2.10 A tracing image showing a page mockup (comp)

34 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

FLUID DESIGN VERSUS FIXED-PAGE DESIGN As a new medium, the Web presents some unprecedented design challenges. Most professional designers above a certain age have done at least some of their work (or training) in print, where the pages, the advertisements, and the layouts are all fixed. It’s very tempting to try to reproduce that level of control over the user’s experience online. Even some of the most standards-conscious, forward-thinking designers still at times succumb to the temptation of specifying each pixel, each fixed width, resulting in a static page. A new philosophy of design accepts the fluidity of the Web as a feature and not a bug. Proponents of fluid (or “liquid”) page designs say that you can never be completely sure how your pages will be viewed or otherwise consumed, on what sorts of devices, with what sorts of displays or alternative access devices, and with what sort of dimensions. Sure, there are situations when you are designing an internal site for your company and you know everyone is using, say Internet Explorer 5.1 for Windows. But even then you won’t know for sure what screen resolution your users have, or whether they tend to maximize their windows or let them clutter up the screen. An elegant fluid design should flow to fill the available space in a stylish way. It will not and should not look the same no matter the size or shape of the window. Its box elements (these are usually CSS designs—tables are just fine for making stiff, menu-like pages) float to one edge or the other, or get the remaining space between columns or between header and footer. When you start your design process, you should begin by deciding if you’re looking for a fixed design or a fluid design.

Your choice for page size (or the default values) is displayed on the right end of the Status bar. This readout doubles as a shortcut for changing the dimensions. Just click it and choose a new setting when you want to switch.

Reveal Tags You’ve already seen that Page view has a Design view and a Code view, as well as a splitscreen mode showing both Design and Code views of the page. You can also select View ➔ Reveal Tags when in Design or Split view to make “button-y” renditions of the HTML tags appear embedded in the Design view, as shown in Figure 2.11. You can double-click a visible tag to edit the tag’s properties directly. If you use the Reveal Tags view, bear in mind that your page layout will appear to be altered by the presence of the tag symbols; this alteration won’t be there in your final product.

CUSTOMIZING YOUR WORKSPACE ■

Refresh The last option on the View menu is Refresh. FrontPage won’t always update the Design view after you’ve made a subtle change, so any time you want to be sure that you’re seeing things as they really are, refresh the view. A better shortcut for this action is the F5 key.

Customizing Your Workspace Beyond the basic methods for tweaking with the view, FrontPage offers further customization options that enable you to get your work done as efficiently as possible. Take a little time now to peruse these options. If you are new to the program or to web design, you may not really have any preferences yet, but you should know what’s possible. FrontPage kind of scatters these settings in a number of different places, primarily in the Options and Page Options dialog box. The idea is that the settings on the Options dialog box apply to the program in general, and the settings on the Page Options dialog box apply to page view and layout. But both of them are sort of large grab bags.

What Happens When You Start FrontPage Select Tools ➔ Options to display the Options dialog box. If the General tab isn’t in front, select it. The Startup area of the General tab of the Options dialog box controls a few automatic routines that FrontPage can perform whenever you start the program (see Figure 2.12). By default, the first three options are checked and the fourth option is not checked. Here’s what you can do in the Options dialog box: • Leave the first option, Startup Task Pane, checked if you find it useful that the Task pane is open when you start FrontPage and ready for you to open or create a new web page. Uncheck it if the first thing you always find yourself doing is closing that pane.

Figure 2.11

Figure 2.12

The Reveal Tags view offers another way of handling page layout and code manipulation together.

You can tweak FrontPage’s startup procedure in the Options dialog box.

35

36 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

• It’s usually convenient to have FrontPage open the last web page you were working on the next time it starts up. If, for some reason, you don’t like this shortcut, uncheck the second option. • You can go ahead and uncheck the next option, Check If Office Is The Default Editor For Pages Created In Office, unless you are having a problem with another application intervening when you try to open your Office documents. • Leave the last option, Check If FrontPage Is The Default Editor For Pages, unchecked unless you’re concerned that another web design program is already set as the default editor for web pages. You can ignore the check box options in the General area of the Options dialog box for now. You can also ignore the Proxy Settings button, unless you are using FrontPage on a network that’s behind a firewall or otherwise requires you to go through proxy servers to reach the Internet. If that’s the case, then your system administrator should be able to help you set up the required proxy settings. Do click the Service Options button, which brings up a separate dialog box. The online content settings aren’t too important (they control the web-based information that appears in the Task pane), but take a moment to review the Customer Feedback Options settings (see Figure 2.13). Microsoft wants to be able to grab information about your setup and usage of FrontPage automatically “to serve you better.” You may think this is groovy, or you may think it’s a bad idea. Either way, it’s best to make an informed decision. The wording of this dialog box is vague in that it’s not clear what happens if you neither opt in nor opt out (it does not specify what the default action is). So if you want to opt out, make a point of doing so declaratively at this time. If you want to contribute to the betterment of Microsoft’s software by donating your data to medical science, then opt in with gusto. If you’re not sure one way or the other, research the subject further and then come back and make your decision here. When you’re done, click OK.

Configuring External Editors If you already have a favorite program for editing raw code, such as NotePad, WordPad, or some third-party text editor, you can tell FrontPage to launch that other program whenever it encounters files with some specified extension (such as .txt, .asp, or .jsp). To set up FrontPage to use an external editor, click the Configure Editors tab on the Options dialog box (see Figure 2.14).

CUSTOMIZING YOUR WORKSPACE ■

Figure 2.13

Figure 2.14

Decide how badly you want to help Microsoft improve FrontPage.

If you prefer some other editor to FrontPage for a specific file type, just say so, and FrontPage will step aside when the time comes.

The Extensions box lists file types by their possible extensions. The Configure Editors tab lists the available editors that can be assigned to a file type. Here are some of the steps that you can take here: • To assign an editor to a file type, choose the list of extensions that corresponds to the file type in the Extensions box. Then click the editor that you want to assign to that file type in the Editors box. • To add a new extension or a list of various extensions, click the New Item icon above the Extensions box, enter the extension or list of extensions, and click OK. • To edit a list of extensions, select it and then click the Edit icon. To remove a list of extensions, select it and click the Delete icon. • To add a new editor, click the New Item icon above the Editors box, browse to the application you want to add, select it, and click OK. • To remove an editor, select it in the Editors box and then click the Delete icon. The check box option at the bottom of the Configure Editors tab specifies that when opening a web page created in another Office application (such as Word or PowerPoint), FrontPage should launch that other Office application to do the editing. If you want to edit all web pages in FrontPage, regardless of whether they originated in another Office application, uncheck this option. When you’re done, click OK.

37

38 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Layout and Editing Preferences Choose Tools ➔ Page Options or double-click the word “Default” in the Status bar to bring up the Page Options dialog box. If the General tab of the Page Options dialog box isn’t selected, choose it. The options on this tab govern the behavior of FrontPage as you lay out and edit web pages (see Figure 2.15). The top area on the General tab includes a mishmash of options (all selected by default) mostly related to page layout and how FrontPage displays web page elements: • The Use DIV And SPAN Tags When Positioning option refers to adding HTML elements for use with CSS as the preferred method for centering and aligning text and other page elements. Uncheck this option only if you prefer to use HTML methods that have been out of favor for several years. • FrontPage automatically inserts the required starting and ending form tags as soon as you place any form elements on a page. This is convenient, but like any automatic process, it can generate extraneous tags at times by erring on the side of including the tags when they are not called for (as when inserting form elements into an existing form). Leave the second option, Automatically Enclose Form Fields Within A Form, checked for now, at least until you work on some forms, as discussed in Chapter 15, Figure 2.15 You may not want to fiddle with the settings in the General tab of the Page Options dialog box, but it’s good to know they’re there.

“Building Forms.” • Assigning a unique ID to each table is a good practice if you are using CSS to style your table or you are working with DHTML to modify tables dynamically. If you know you won’t be making use of unique table IDs, then it’s safe to override the next option, Assign Unique IDs To New Tables. • If you design pages using CSS positioning, each positioning box (DIV) has an anchor point related to the HTML tags that specify the dimensions and positioning of the layer. Checking this next option, Show Anchor Points For Layer, makes those anchor points visible. (Page layout and anchor points are discussed in Chapter 7.) If you’re using web templates, it’s a good idea to let FrontPage label the editable regions so they’re easy to spot. • Check the last option, Make ID Unique On Paste, so that if you copy and paste an element identified with an ID attribute, the copy will have a different ID. You must use unique IDs to distinguish similar elements on a single page. (It’s actually OK to repeat IDs from one page to another.)

CUSTOMIZING YOUR WORKSPACE ■

39

The next two areas, dealing with Spelling and Cut and Paste, offer typical Office-related options. Any changes you make here should be based on existing personal preferences. The last area on this tab, Code View Options, controls how FrontPage displays HTML tags and script code when in Code view. The proposed options (Word Wrap, Auto Indent, Line Numbers, and Selection Margin) are probably fine for most circumstances.

Ruler and Grid Settings Earlier in this chapter, I pointed out the Ruler and Grid option on the View menu. To control the appearance, spacing, and units of measurement of these features, go to the Ruler and Grid tab on the Page Options dialog box (see Figure 2.16). Here you can change the ruler’s units of measurement from the default pixels to inches, centimeters, or points. You can also change the spacing of the grid lines (in whatever units you’ve chosen), the type of lines to use (solid, dotted, dashed), and the color of the gridlines (but gray is good, because it recedes into the background nicely). Finally, you can change the tolerance of the snapping feature by changing the maximum distance between an object and the grid before the object snaps to the gridline.

Targeting Specific Browsers FrontPage actually offers you different features and options depending on what type of browser you’re designing for. You may not have a target browser in mind, or you may have to design for multiple browsers. As a general rule, sites developed for the public have to work well in a number of different browsers, although it’s a judgment call just how many browsers your site will support. It’s always tempting to design for the features available in the most recent and up-to-date browsers, but most people do not upgrade their software as often as web designers might like. You have to draw the line somewhere, or you’ll have an impossible compatibility situation on your hands. If you’re developing a site for an intranet or for a very specific target audience, you may have the luxury of knowing what browsers your users have available. If that’s the case, it makes the decisions about what browser to support a little easier. But it still may require some attention to the variety of possibilities. If you’re not careful, it’s easy to use FrontPage to design sites that look great in Internet Explorer and not so good in Netscape Navigator, Mozilla, or any of the other available browsers (such as Opera, Omniweb, Chimera, and Safari). Try to be conscious whenever you add elements (especially whizzy dynamic elements) to your web pages that require Microsoft software at your user’s end to work properly. When you must do so, try to offer alternatives for the users who are not equipped with Internet Explorer.

Figure 2.16 You can customize the ruler and grid guidelines to suit your design requirements.

40 ■ C H A P T E R 2 : S E T T I N G U P Y O U R W O R K S P A C E

Figure 2.17 Tell FrontPage what browser(s) your audience will be using.

You can tell FrontPage which browsers you’re designing for by selecting the Authoring tab of the Page Options dialog box (see Figure 2.17). You can ignore the upper half of this tab for now (until you need to worry about working with a team). Instead, look in the lower area. There, you can indicate the browser brands you’re designing for (currently the choices are just Microsoft Internet Explorer, Netscape Navigator, both, or custom; no other particular browsers are mentioned), and the versions of those browsers as well. Depending on what you choose, FrontPage will check or uncheck the various elements listed below the Browsers dropdown list box, including only those elements that work properly in all of the browser types you’ve chosen. The default browser choice is IE 5.0/6.0+, and it corresponds to having all the suboptions checked. So, for example, PNG graphics will be allowed because Internet Explorer knows how to display them, although Netscape Navigator does not. If you choose Custom in the Browsers list, you can check any subset of the suboptions that you want. Only the options that are checked remain available in FrontPage. As you’ll see in Chapter 23, you can also review the browser compatibility of a completed website to make sure you’re not about to launch a site that will crash your user’s browsers or otherwise break on contact.

When you’re done, click OK.

Planning for Accessibility Just as it’s a good idea to think about the browsers your users might have available when starting a web design project, it’s also a good idea to plan your site so that it’s accessible to the widest number of users possible. A simple example is the recommended practice of including descriptive alternative text with any image so that a user who has chosen not to view images or is unable to do so can at least get a description of the image, instead of the useless [IMAGE] placeholder. FrontPage can review a website and identify potential accessibility problems (choose Tools ➔ Accessibility to see how the test works), but it’s best to consider these issues at the

FROM PAGE TO SITE ■

beginning of a project. As mentioned in Chapter 1, “Planning and Preparing for a Web Project,” there are some fantastic accessibility resources online. A little research and time spent considering these issues can save you a lot of effort at the end of the project. Some good places to start learning about accessibility online include Dive into Accessibility (http://diveintoaccessibility.org), Joe Clark’s accessibility weblog (www.joeclark.org/ accessiblog/), and the U.S. Federal Government’s Section 508 site (http://section508.gov).

From Page to Site FrontPage can show you a single page or a view of your entire site. Working on a web project means having to think on both of those levels. You need a site design that works on the page level, and you need an architecture that makes the website, intranet, or dynamic application run like clockwork. The next chapter, “Web Pages Deconstructed,” dissects websites and identifies all their vital organs, paying particular attention to FrontPage’s approach to repeating and dynamic elements. If you know web pages inside and out, you can probably skip Chapter 3. Chapter 4 shows you how to keep the big picture in mind as you get started setting up a new project site.

41

CHAPTER 3

Web Pages Deconstructed CHRISTIAN CRUMLISH

As you know, the basic unit of display on the Web is commonly called a page. Like all metaphors in the electronic world, this one only partly conveys the idea. In a book, the pages are all the same length. On the Web, a page can be any length. In a book or magazine, the elements on each page are static (unchanging). On the Web, the elements of a page may be dynamic (changeable). For this reason, most web professionals now refer to the basic unit of web development as a document. Older computer professionals may also remember the usage of page to mean a unit of memory. There will inevitably be confusing and overlapping terminology usage. Make sure everyone on your team understands the same terms in the same ways.

This chapter discusses the components of a typical web page and explains how you’ll use FrontPage to manage these different types of web page elements. The following topics are covered in this chapter: ■

Web pages consisting of content, design, and navigation

■

Text, graphical, and other content

■

Design, layout, and style sheets

■

Navigation elements

44 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

The Elements of a Web Page From a human point-of-view, a web page consists of the following: • Content—information in all its forms • Design—how the content is displayed • Navigation—how users move around the site Of course, from the point-of-view of the server and the browser software, web pages consist of text and markup. The markup is made up of HTML elements and other markup that represents embedded files and scripting elements. Markup is often informally referred to as code, even though it is formally distinct from the lines of programming code and scripts that drive dynamic sites and software applications in general.

So content can be text, data, images, and other forms of information. Non-text forms of content are usually referred to as objects, because they exist in files separate from the HTML documents in which they are embedded, as opposed to text content, which exists amidst markup and other HTML elements within the web page document itself. Text is also called writing, copy, or sometimes just content, but other types of content appear on web pages in the form of embedded graphics files or other media. The presentation of a page (also called visual design or graphic design) is the way that text formatting, graphical elements, and other style standards are used to produce the site’s look and feel. Navigation is the system of interactive elements that lets the user move from page to page. Navigation can be in the form of text that the user clicks to move to another page. However, navigation is usually handled with graphical elements that take the visitor to another page or script objects that enable actions (as with a rollover, an animation activated by the mouse hovering over a navigation graphic). From FrontPage’s point-of-view, everything on a web page is either text or objects. Text and objects are integrated on the page by markup (tags, mostly). Sure, you can view or touch markup directly, but FrontPage’s metaphor, at least in Design view, is of pages comprising text and objects. Text is written material, as always. Objects are everything else. Figure 3.1 shows how FrontPage displays text and objects held together by tags. Manipulating text and objects is web design in a nutshell.

WORKING WITH CONTENT ■

45

The actual HTML is written as you type or insert objects.

Figure 3.1 FrontPage enables you to manipulate text and objects on a web page.

Text that you type

A graphic object

Working with Content Before you can construct your web pages from the basic components that FrontPage recognizes (text and objects), you need to collect your collateral. Collateral is any prepared material needed to build your pages. For example, you insert text on your web pages either by importing it from Word or by typing it directly onto the page. Either way, you need the text to be ready when the time comes to build the page. The same is true for any objects that you want to include on your page. You should have your artwork ready, and you may also need to collect dynamic objects or scripts as well. Before you begin to design your website, you need to do one other task: set up your directories or folders to receive the collateral that you collect. Chapter 4, “Defining Your Website,” discusses how to set up the structure of your site on your computer or on a local network and how to manage files using the Folder view.

46 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

STAYING ON THE RIGHT SIDE OF COPYRIGHT LAW Make sure you have the right to use any written content that you intend to include at your site. The rule of thumb about copying material from another person’s website, by the way, is don’t do it without proper permission. For more information, visit the Friends of Active Copyright Education (FA©E) website at www.law.duke.edu/copyright/face/softint/index.htm.

Working with Text Once you have your text collateral prepared, cutting and pasting it into FrontPage is a snap. Formatting the text is a little more complicated, but Chapter 8, “Inserting and Formatting Text,” goes into that topic in detail. There are many websites that discuss web design theory. One of the best is The Site Wizard at www.thesitewizard.com. These materials are practical and extremely easy to understand and implement. Another classic site for insight into web design theory and human interface design is Jakob Nielsen’s www.useit.com.

Working with Graphics How are web graphics different from other electronic images such as computer graphics? For one thing, they have to pass through your user’s Internet connection, whether it’s a broadband connection such as a T1, cable, or DSL link, or a connection with much less bandwidth such as a dial-up modem. In every case, an optimized graphic (one that has been compressed in size as much as possible without sacrificing too much quality) is preferable. The standard web graphic file formats are JPEG (JPG), GIF, and PNG. PNG combines the best features of the other two formats, but not all browsers currently handle PNG files. You’ll probably have to stick to JPEGs and GIFs for most projects. Use the JPEG file format for images with gradations of color and light sources such as most photographs. Use the GIF file format for images that use large areas of single, flat colors. (You also use the GIF89a format for a type of animated graphical file.) Chapter 9, “Working with Graphics,” describes the differences between these file types in more detail.

DESIGNING FOR THE WEB ■

Designing for the Web When you are designing for the Web, you must be cognizant not only of your local computer and software restraints, but your viewer’s constraints as well (which you usually aren’t aware of). You can guess at what types of hardware and software your viewers are using to visit your website and base your designs on these suppositions. Your guess must address several factors: Design for a variety of screen dimensions and other media formats (including print). This means that you do not necessarily know the size of a page on your visitor’s computer or the quality of the color displayed there, and you don’t even have control over where on that screen the image is placed. For example, some people view web pages using a portable computer with a very small monitor that supports only 256 colors. In fact, monitors can get even more limited. Nowadays, personal digital assistants (PDAs) such as the Palm Connected Organizer and its competitors are often used to view websites, and they have itty-bitty screens. Others might view your pages using a 21-inch super VGA monitor that supports millions of colors. Chapter 2, “Setting Up Your Workspace,” introduced the concept of liquid versus static designs; liquid designs with Cascading Style Sheets (CSS) make it easier to deliver high-quality designs to a number of media all from a single HTML document. Not all monitors display colors the same way. One of the most important factors to control when you are designing web graphics is the quality of the images. Quality comes down to how color is managed by the software drivers used to control the monitors. Color calibration, color bit depth, and resolution all affect how graphics are displayed. You must learn to use colors that can work on many different monitors at the same time. For example, an image must display effectively on 8-bit monitors, which support only the basic 256 colors on 640 × 480-pixel screens, and on 24- or 32-bit monitors, which support 16 million colors on 1024 × 768-pixel screens. Other factors affecting the display of color include memory management, processors, graphics cards, the operating system, the monitor itself, and specific settings such as calibration, resolution, bit depth, and gamma. Because of these distinctions between systems, the idea of a useful palette of web-safe colors has come under scrutiny. As Molly Holzschlag (web diva and this book’s technical editor) says, “There simply is no such thing as consistent color from screen to screen.” People do not use the same tools to view the Web. There are currently several browsers on the market. The “big guys” are Microsoft Internet Explorer (IE) and AOL’s Netscape Communicator (though some say that an independent browser, Opera, may eclipse Netscape soon). Also popular is the open-source Mozilla browser, which runs on numerous operating systems. There are alternative versions of Mozilla as well, such as a stripped-down version called Camino that runs on MacOS X systems, and another lean version called Firebird that runs on numerous platforms.

47

48 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

Speaking of Mac users, they may be viewing your website with a new browser just for the Mac called Safari; it’s still being tested at the time this book is going to press, but it’s already widely adopted. Others who wish to avoid mainstream products prefer the Opera browser. Linux users also have their own browsers. There are many different versions of each of these browsers still being used, but more recent versions of Mozilla, Netscape (since 6.0), and Opera strive to be more standards-compliant. They’ve dropped support for proprietary tags and often differ mainly in how they approach error correction when trying to display non-valid HTML (or XHTML) and CSS. Microsoft’s Internet Explorer continues to introduce its own proprietary extensions to the Document Object Model (DOM). Each browser displays web pages differently. In addition, the web medium is constantly expanding onto new devices such as WebTV boxes, handheld organizers such as Palms, cell phones, and who knows what will be next? Video-game consoles? Digital TV recorders? Usually these newer devices start off with severe limitations on what they can display. Early wireless devices could display only text and links from web pages. As the hardware, the markup, and the user agents (browsers) for WAP (Wireless Access Protocol) devices have evolved, so has the sophistication of web content presentation. Some wireless devices support images; some support style sheets. With the emergence of tablet devices, expect these trends to continue, with handier devices becoming more media-rich with the passage of time. Not everyone has a fat pipe. Your web graphics (and page sizes) must be kept as small as possible so that users connecting to the Internet at speeds as slow as 2400 bits per second (and less) can access your information quickly. You should also reduce the latency period and the total amount of data being served through your web host, if only to deliver the best possible user experience, minimize the use of your own resources, and keep hosting costs within check. Using CSS can help keep the footprint of your HTML files small. You should optimize your graphics to obtain the smallest possible sizes consistent with the image quality you require. Not everyone is using the same operating system. Designers most often have Macs, but their users are more often running Windows on a PC. Some people use a flavor of Unix such as Linux. Different operating platforms display graphics differently. In fact, even the same operating system running on different hardware configurations of video cards, audio cards, or drivers displays graphics differently. For example, a Sun system running Solaris displays an image completely differently from a Silicon Graphics computer running Irix. In addition, Macs and PCs use completely different color-management methods to display images. Be aware of these differences and test your graphics on as many platforms as you can to ensure that their quality translates as well as possible across computer platforms.

DESIGNING FOR THE WEB ■

Having considered some of the cross-platform issues involved in planning a web project, you also need to think about the design approaches available to you in the web medium. These might include • Text-based design • The use of style sheets • Methods of page layout based on the use of tables or CSS layout

Designing with Text Text is the simplest element of a web page, but its precise appearance as presented by a user agent is also the least controllable of your variables when you’re laying out a page. Unless you can assume that your users have a specific font installed or a certain type of setup (as you sometimes can on, say, an intranet), stick to the most popular fonts such as Times New Roman, Arial, MS Sans Serif, or Courier. There are other fonts you can count on most users having, such as Verdana and Georgia. It’s possible to give the browser a list of options in descending order of preference and let it pick the first one that’s available. Better yet, use CSS (described next) to gain better control over the presentation of text in the body of your pages. To overcome this constraint on the font types, designers tend to rely on objects, in this case graphics files, to display more sophisticated treatments of text. For instance, if they wish to use more typographically interesting fonts, they often create graphical text in Fireworks and import it into FrontPage as an object. This practice is especially useful when you need complete control of the appearance of text. Any text that you wish to format with other fonts, colors, graphics, and so forth (as you would with banners, logos, navigation buttons, and headlines), should be inserted as an object onto your page. In this case, the object is a graphic. When possible, don’t render critical text as a graphic, which hides it from search-engine indexes and any device that reads pages. Plain text can be indexed and can help users find your content. If critical text must be included in the form of a graphic, be sure to include alternative text with the image, as discussed in Chapter 8.

Cascading Style Sheets As you can see in Figure 3.2, there is another way to format text—by using Cascading Style Sheets (CSS). Style sheets allow you to define how you want the page elements that you define (paragraphs, table cells, text boxes, and headings) to appear every time you use them.

49

50 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

Figure 3.2 Text formatting can be managed using Cascading Style Sheets.

CSS is a standard, the first version of which has been available since 1996. The first implementation of CSS1 in a major browser was in IE 3.0. CSS2 introduced positioning (layout) features and more sophisticated ways of applying cascading styles (as when certain elements occur within other elements). CSS3 is well underway. HTML 4.0 was the first markup standard to encourage the use of style sheets. There are several methods of integrating styles with HTML documents, the three most common being linked, embedded, and inline styles. Style sheets are made up of the following: • A series of selectors that define what element in the markup the CSS should influence • Properties that define what aspect of the element’s presentation will be modified • Property values that specify the degree to which the modification should be applied When put all together, a selector, property, and property value make up a style rule. You can have one style rule or many style rules within a style sheet. The choices available in CSS give you incredibly detailed control over presentation. Best of all, if you revise your design specifications, you can make the change in one place (when you’re using an external style sheet), instead of hunting through every page and making the change over and over and over.

DESIGNING FOR THE WEB ■

51

Laying Out Pages with Tables or CSS Because the web medium is less flexible than most print-design applications, laying out a web page usually requires a laborious process of manually situating objects in table cells that are nested within other table cells to give the illusion of columns, side-by-side graphics, or grids. FrontPage’s layout mode enables you to lay out pages visually without having to manage the markup of the nested table cells. Figure 3.3 shows a table and its HTML tags. Chapter 7, “Working through Page Layout,” describes in detail how to use tables to lay out a web page. In addition, CSS2 has a feature known as positioning, which allows designers to create side-by-side and overlapping layouts. Based on what is referred to as “The Box Model,” FrontPage allows you to tap into this technology by creating areas that can be hidden, overlapped, or displayed at will. (You can use CSS instead of tables if you know that your readers will be using up-to-date browsers that can properly interpret CSS. All modern browsers do a fairly good job of this. FrontPage can also convert a page designed with a table-based layout to one with a CSS-based layout, and vice versa.) FrontPage uses the term layers to describe CSS boxes. This term is technically inaccurate, which causes a lot of confusion. Layers in FrontPage should be thought of as CSS boxes. When you use the layers features in FrontPage, the software is actually generating CSS.

Figure 3.3 FrontPage supports the use of tables for achieving traditional pagelayout effects.

52 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

FrontPage supports the use of CSS layout in a way that makes web layout more natural and more like desktop publishing. You can use your mouse to size and place any box to fit your requirements directly on the worksheet. The downside of CSS positioning is that no browsers older than version 4.0 can interpret them. FrontPage layers and their uses are discussed in more detail in Chapter 7. You can also use a concept called frames to allow portions of your page to serve as the repository for other pages pulled into your page based on navigation buttons you create (see Chapter 8).

Along with CSS, layers let you control the placement of content, the look and feel, and the navigation throughout a site.

Setting Up a Navigation Scheme One factor that distinguishes the Web from traditional print media is interactivity. Users experience this when they navigate from one page to another through a variety of means. In order to help your users understand their web experience and your website, you must provide them with an easy-to-grasp navigation scheme.

Organizing a Site Sites are usually organized hierarchically, with a series of top-level pages that have their own sub-hierarchies. A good navigation scheme should make it clear what level the user is on and what related pages are available. You’ll explore navigation objects thoroughly in Chapter 11, “Implementing Your Navigation Scheme.”

Designing Navigation with Hypertext Before you design an appropriate navigation scheme, you need to understand how hypertext works. Here is a little background for you. The original purpose of the World Wide Web, as devised by Tim Berners-Lee, was to enable the linking of a wide range of information to be delivered across multiple platforms. This concept was revolutionized with the development of the Hypertext Transfer Protocol (HTTP). HTTP enabled links to other information to be created, making it easier for end users to view content (at the time, mostly physics research papers) without having to manually specify the location of the host machine and the path to and filename of the document in question. Using hypertext, a browser can simply follow a plain-language link and let the underlying markup, the user agent, and the server do the rest. Without hypertext, there would be no World Wide Web. The more links you can build into your site, the more useful it becomes to your readers. The Web grows from these serendipitous

SETTING UP A NAVIGATION SCHEME ■

53

interconnections that are built into each web page. Sometimes the most difficult part of designing a site is locating possible links to build into your site. You should always think ahead to possible places you can take your readers.

Linking Text and Objects The most common way to link text and objects is using the anchor element. An anchor element () marks up a section of HTML as the source or reference for a hyperlink. You can use this method to create text links only, or you can wrap the anchor around an image or other media object so it becomes linked, too. The easiest way to create a connection between two pieces of information is by using a hypertext link. For example, if you wish to place a link to a page called contactus.html from a selection of text, your HTML might look like this: contact us, as seen in Figure 3.4. (I see a lot of references to this Contactus fellow in URLs—

must have been an important ancient Roman.) Chapter 10, “Inserting and Maintaining Hyperlinks,” delves more deeply into hyperlinks. Similarly, you can link from one part of a page to another part of the same page with a link to a named anchor, which might look like this: contact us. You can also link graphics and related objects. One especially popular method for linking areas of your page to related information elsewhere is by identifying areas of a graphic as a hotspot and then creating a link from this area. Hotspots are areas of an image that, if clicked, jump the viewer to another URL on the Internet, or even within the page itself (see Figure 3.5). Figure 3.4 Clicking this link takes you to a page full of contact information.

54 ■ C H A P T E R 3 : W E B P A G E S D E C O N S T R U C T E D

Figure 3.5 Clicking any hotspot on this image map takes the user to a unique location.

Image maps usually have a default link anchor as well, telling the user agent where to send the user if the map is clicked outside any of the designated hotspots. Graphics with hotspots are called client-side image maps, because what you are really doing is mapping the location of every pixel of a graphic to identify those areas where links exist. The reason this list of links is called a client-side image map is because the list resides with the HTML markup. Server-side image maps are an older way of creating graphical links; they require special scripting, using Common Gateway Interface (CGI) to initiate the connection between the hotspot and the list of locations. You can create client-side image maps in FrontPage by drawing the spots onto the designated graphic. Chapter 10 describes how to create linked graphics and how to build links in FrontPage.

Graphical Menus Though web pages can be hyperlinked together with a perfectly adequate navigation scheme using only text links, the most high-gloss navigation interfaces use graphical menus, as illustrated in Figure 3.6. For these, you need to first use a graphics program such as Photoshop to create the images to be used in the menus. Figure 3.6 A graphical navigation menu can add a nice look to your website.

TIME FOR GROUNDBREAKING ■

55

Graphical menus may work using either hyperlinks or hotspots. If each of the menu options is a separate image, then each option is a hyperlink as well. If the entire menu bar is a single image, then the options are all hotspots.

Jump Menus and Flyout Menus There are several other specialized ways to help visitors navigate your website. FrontPage, for instance, can help you build

Figure 3.7 Jump menus don’t require you to click a Go button.

a pop-up menu (also called a jump menu) containing linked items. This functions like the typical drop-down

Figure 3.8

menu of choices that you see in dialog boxes in

It can be tricky to make flyout menus work on all platforms, but your visitors will like using them.

most applications. Another type of navigation tool is the flyout menu. These menus use JavaScript and CSS to display and hide links, and they also give the user the experience of pulling down a menu and selecting an item. Although hierarchical menus are complicated to build, they can add a professional sheen to your site. See Chapters 13 through 15 for instructions on how to construct flyout menus.

Time for Groundbreaking Now that you have an overview of how a single web page is assembled, you’re going to zoom out a little, conceptually, and look at an entire website (or application or project). Usually, a website consists of many pages, at least from the browser’s point-of-view. To work with an entire site in FrontPage, you need to first set up the site’s structure or architecture. That’s what Kate will explain in Chapter 4.

CHAPTER 4

Defining Your Website KATE J. CHASE

In the first three chapters, you learned a great deal about website architecture and design, and you started putting together and refining your ideas for what you want—and need—for your site’s content. Now comes the time to begin refining your concepts further by defining the exact nature, focus, and design of your website. You also need to decide how and where the website will operate: on a corporate (or non-corporate) intranet, hosted from a web server you or your business runs, or hosted by a third party. This chapter tackles the following topics: ■

Further developing the site design

■

Setting up your website

■

Considering your site navigation

■

Setting up a web server

58 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

Further Developing the Site Design Shortly, you'll learn how to set up your initial website using FrontPage tools such as web templates and wizards that can shorten your time and supply some of the necessary expertise. But first, let’s spend a few minutes covering some last-minute pre-design issues to keep in mind before you get down to the truly creative work ahead.

Intranet or Internet? As mentioned in Chapter 1, “Planning and Preparing For a Web Project,” make sure you understand your site’s audience. Will your site be used by a wide, diverse audience on the World Wide Web or by the narrower collection of persons who would access an intranet? This affects your choice of themes and templates (discussed later in this chapter). Let’s take a look at two examples. The first example is that heirloom seed company whose goals were discussed in Chapter 1, trying out its first public Internet website (see Figure 4.1). The second example is another website created using Office 2003’s Windows SharePoint Services to run on a company’s intranet as a collaborative project work area (Figure 4.2). Take a good look at both figures. Figure 4.1 Artisan’s Heirloom Seed Company’s initial FrontPage-designed and published website. They plan to use this website to expand their sales throughout the U.S.

FURTHER DEVELOPING THE SITE DESIGN ■

59

Figure 4.2 A Windows SharePoint Services intranet-based site. This site was prepared to help a team of people work collaboratively on a major project that will result in an important client presentation.

Some of the key differences you should notice between these two sites are as follows: Focus and content The commercial seed sales site introduces itself to its visitors because they know the home page has to give its customers reasons to stay and peruse both its products and expertise. The Windows SharePoint Services website, by contrast, can bypass much of that introductory content. Only users with a reason to be there are apt to access this site to keep abreast of project information, to collaborate on work such as editing and uploading documents, and to share comments and questions on the discussion board. Design elements The seed company site tries to provide a warm, inviting backdrop to its public website through the use of an appropriate theme. The theme at this site, FrontPage’s Nature theme, provides bullets done in the theme’s design, an easy layout, a large and highly visible font, and everything a potential customer needs. Everything from products and catalogs to customer testimonials and introductory information about the site is accessible right at the visitor’s fingertips, directly from the home page. The Windows SharePoint Services site is far more utilitarian. It uses essential design elements instead of attitudinal ones and offers clear major category headings and information that team members need. It’s comfortable from a visual standpoint, but there is no mistaking the fact that this is a work-oriented site with little or no fluff. The background is simple and white, and there is a limited use of colors.

60 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

THE RULES AND BREAKING THEM Don’t take from this discussion that all public, commercially oriented websites have to be colorful or creative while all private, work-oriented websites can only be Spartan and utilitarian in design. In fact, work-based sites don’t typically suffer from the same bandwidth and platform constraints that a global site does; almost everyone comes in at roughly the same speed with most users using the same browser, unlike a general Internet site. In work-based sites, you generally have a captive audience who must use your site. Without the connection/speed constraints, you can throw far more tools and services at them without worrying about the same issues you do when the same material is presented for global consumption. Some companies that offer both a private intranet Web and a global presence use their intranet to test additions to their Internet site. But bowing to the old adage that you should always know the rules before you break them, make sure to keep your intended audience in mind as you begin to put your website together. This can matter significantly in your choice of themes, styles, and design elements and what they convey to your target audience.

These examples demonstrate two different ways a website can look, depending on whether it’s a public, customer-oriented site or whether it’s designed for an internal audience working together on an important project or juggling multiple projects simultaneously. Don’t make the mistake of thinking that even if you’re not selling a product or service on your site, you aren’t selling anything. Regardless of the type of site you have, you are indeed “selling” something: your expertise, your advice, your organization, your overall content, or a collaborative work effort, to name just a few. These examples also serve as a reminder that you shouldn’t apply just any color scheme or design elements to any type of website. Decide first the nature and audience of your site before you choose how it will look.

Setting Up Your Website One of the simplest jobs you can perform in FrontPage 2003 is to set up a new website. In this respect, I mean to create the folder designated as a website to begin creating and designing the pages that will populate your site. In this situation, you are creating a special folder that FrontPage will recognize as a specific website, with all the site contents—subfolders, pages, components, and images—oriented to that website.

SETTING UP YOUR WEBSITE ■

Take the following steps to create this folder: 1. Open FrontPage and choose File ➔ New. 2. From the right-hand New Page or Web Site task pane, choose the Web option that best fits your needs under New Web Site. Now it’s time to examine all the ways that FrontPage 2003 can assist you in designing your site. FrontPage’s templates and wizards suggest the types of pages that different types of websites usually benefit from. In addition, they provide you with helpful tips for populating those pages properly. I’ll talk first about importing an existing website, because many of you may need to move the files from an existing site into FrontPage to rework them for your new design. Then I’ll move swiftly into your template and wizard options for setting up your website.

Importing an Existing Website Do you already have a website on a web server, on a third-party web hosting service, or on another disk that you want to import into FrontPage 2003 for editing and management? If the answer is yes, then use the Import option to bring the files from the current site into your FrontPage software by following these steps: 1. Select File ➔ Import. 2. From the Import window (if present), click From Web. 3. From the Import Web Site Wizard (see Figure 4.3), select the method you want to use for importing these files, choosing from these options: FrontPage Server Extensions Or SharePoint Team Services This option is available only if you’re working on a system or server with these capabilities already installed; it is explained in more detail later in this chapter in the “Setting Up a Web Server” section. DAV This option permits importing through Distributed Author Authoring and Versioning (an independent or non-Microsoft, non-Unix platform that allows the editing and management of files on a remote web server), if supported. FTP This option can be used with any site supporting File Transfer Protocol (FTP), the Internet protocol used for sending files and what most websites used exclusively to exchange files before features such as automated publishing under FrontPage. File System Use this option to import files from a disk-based website located on your system or network. HTTP This option is the standard choice for importing files from an existing web server–based site.

61

62 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

4. Specify the location of the website you’re importing. 5. Click to choose Include Subsites. (A subsite—also called a subweb—is a website within a website, of sorts, with its own “home” page and structure, if desired or applicable.) Click Next. 6. Choose the desired location to import the copy. Click Next and then click Finish. 7. In step 6, I chose File System to import a web page I created with a previous version of FrontPage, which opens the Remote Web Site view. Click Publish Web Site (see Figure 4.4). Figure 4.3 FrontPage 2003 provides a number of import options from which you can transfer an existing website into the FrontPage software.

Figure 4.4 As the import process proceeds, items listed in the Remote Web Site pane are copied to the Local Web Site pane.

SETTING UP YOUR WEBSITE ■

Your website should import smoothly, and the files formerly available just on that external site (or drive or network) should now reside in your open web folder. Should your import session become interrupted (for example, if your connection to this remote folder or website fails), it may be necessary to close FrontPage, then launch it again and repeat the preceding steps. You can import files more than once, although you may be asked whether FrontPage should overwrite the pages it imported before the failure occurred. Rewriting them is often best (unless you’ve already begun to make changes), because you may find that one page or more did not download in its entirety when the failure occurred.

Using a Wizard Wizards, as you already know, are tools employed to help step you through a process to reach your desired results more quickly. FrontPage offers a few website creation wizards to help you set up different types of websites or site functions: Corporate Presence Wizard The Corporate Presence Wizard establishes the conventional pages most desired in a website designed to provide information to the public about a company or other organization. Database Interface Wizard The Database Interface Wizard configures a basic website with the ability to connect to a supported database and to permit users (with the appropriate permissions) to view and modify that database’s records. Discussion Web Wizard The Discussion Web Wizard establishes a simple discussion website, complete with a table of contents, threading (to unite comments and questions with their replies), and the ability to search based on text included in posts. Import Web Wizard The Import Web Wizard follows the process outlined in the previous section for importing an existing website into FrontPage 2003. The wizard helps you create a site that you can customize and expand to include far more than the wizard initially establishes. To use one of the FrontPage Web wizards to create the basis for your website, perform these steps: 1. Choose File ➔ New. 2. From the New Page or Web Site task pane (on the right), click Web Package Solutions under the New Web section.

63

64 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

3. Click the General tab on the Web Site Templates window.

4. Select the web wizard you want to use. 5. If you want to change the default location where this website is created on your system, provide a new location in the right-hand task pane under Specify The Location Of The New Web Site. 6. Click OK.

Using the Corporate Presence Wizard Most of the wizards require you to provide information about yourself or your target project and about the types of pages you want to include. Using the Corporate Presence Wizard as an example, let’s step through the process: 1. Follow the six steps in the previous section. 2. When the Corporate Presence Wizard launches, click Next. 3. Click to choose the additional pages you want to include (below left). Click Next. 4. Click to select the topics you want to appear on your home page (below right). Click Next.

SETTING UP YOUR WEBSITE ■

65

5. Click to select the topics you want to appear on the additional pages (such as What’s New) that you’ve chosen. Click Next until you’re done. 6. Choose the items you would like to appear at the top and bottom of each page such as the logo and company name. Click Next. 7. Click Yes or No regarding whether to place Under Construction labels on unfinished web pages. Click Next. 8. Supply the name and address of your company. Click Next. 9. Supply the contact information for your company. Click Next and then Finish. When complete, FrontPage adds basic versions of each type of page specified to your web, which you can see in the resulting Folders view shown in Figure 4.5. Besides the wizards, you can also use predefined templates to create your website. Let’s talk about these next.

Using a Predefined Template FrontPage 2003 includes a number of predefined templates that can be used both to help you set up a basic type of website (called a website template) and to create a certain type of page (a web page template). Figure 4.5 The wizard automatically creates the pages, which are now ready for your customization and content.

66 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

Because we’re focusing here on creating a basic type of site, I’ll concentrate on using a site template, of which you have the following choices: One Page Web The One Page Web template is suitable for simple projects where a single page is all that’s needed, or as a temporary “Under Construction” page while you’re developing the rest of your site. Customer Support Web The Customer Support Web template sets up the primary pages needed for a customer-oriented website offering a discussion website, feedback page, or Frequently Asked Questions (FAQ) page. Empty Web Use the Empty Web template to create a website you populate yourself. Personal Web As its name implies, the Personal Web template is for use in developing a personal site where you might share photos of friends and family. Project Web The Project Web template is the perfect starter choice if you’re developing a website to keep track of a project and provide the audience with information about that project. SharePoint Team Site The SharePoint Team Site template is available only with Windows SharePoint Services installed. This template provides a collaborative environment in which you can share documents, post event schedules and contact information, make announcements, and more. To use one of these templates to start your website, complete these steps: 1. Choose File ➔ New. 2. From the New Page or Web Site task pane (on the right), click Web Package Solutions under the New Web section. 3. Click the General tab on the Web Site Templates window. 4. Select the web template you want to use. 5. If you want to change the default location where this website will be created on your system, provide a new location in the right-hand task pane under Specify The Location Of The New Web Site. 6. Click OK. You’ve now worked with predefined templates. But there is a type of template you may find more interesting when you want to better control the overall layout and appearance of your site—dynamic web templates.

DYNAMIC WEB TEMPLATES ■

Dynamic Web Templates Dynamic web templates, new in FrontPage 2003, provide another style tool for overall web page appearance. These templates are largely targeted at collaborative environments such as an intranet site at work or a project website where many different people are contributing to a site’s content and anyone may use the site, but where you may want to control what others can do with a page’s design. What the dynamic web templates do specifically is allow one or more web designers to create a basic web page design that’s populated by areas where others can add and edit material—known as editable regions—and locked regions that remain the same throughout the template’s use and don’t permit the addition of any content. Virtually any web page can be attached to and/or saved as a dynamic web template. These pages are saved just as you would save any other page, except that you specify its save format as a dynamic web template; such templates end in the suffix *.dwt. Once created in this form, the template can then be modified to create these locked regions where content or positioning always stays the same, regardless of what collaborators may do with the rest of the area on the page. Chapter 12, “Working with Dynamic Web Templates,” provides a detailed look at the process of creating a dynamic web template, but here’s a quick preview of the basic steps: 1. Create a web page. 2. From File ➔ Save As, select Dynamic Web Template. 3. Once saved, select an area of the page you want to designate as an editable (as opposed to a locked) area. 4. Choose Format ➔ Dynamic Web Template ➔ Manage Editable Regions. 5. Provide a name for this region by typing it in the Editable Regions dialog box. 6. Click Add. 7. Repeat as needed. Not quite ready to think about creating your own templates for layout control on your site? You can still achieve the consistency of look and overall organization, minus some of the control, through the use of FrontPage themes. More about those next.

Using Themes Microsoft defines its FrontPage themes as a “unified set of design elements and color schemes.” Themes allow you to have a consistent, well-executed, professional-quality look throughout your website. Themes typically provide a background, a navigation bar (if the

67

68 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

page selected has been added to the navigational structure of the site), and other elements that are color-matched and thematically matched. For example, bullets used on a themebacked page match the graphical design elements of the theme, unlike the standard bullets. Before you get too deeply into the subject of themes, let me contrast them with the preceding discussion of dynamic web templates. I use the term contrast because you can use one or the other of these design tools, but you would not normally use them both together. Themes amount to a pre-set way that FrontPage offers for you to achieve a consistent look throughout all the pages on your website. Templates can serve the exact same purpose, but they allow you to command the process by determining for yourself how the layout is done, what elements are fixed in place and locked, and which elements are available to you and others for adding content and other page elements. When you create such templates, you’re essentially creating an intelligent, controllable theme and a managed way of making all the pages of your site look and work the same regardless of how many different people will ultimately contribute to that site. For you, this may mean that you start off your site using themes to aid in the production of your first published pages. Then, as time and resources permit, you may move to the creation and implementation of your own templates. Some of you may want to develop and use templates right from the start. Others of you may feel no need to move past themes and certainly, there are excellent informational and e-commerce sites that have used themes for years. It’s a matter of how much control you want and need. Now let’s get back to themes. While you can apply a theme to a single page or to multiple pages, it’s more likely that if you use a theme, you’ll apply that theme throughout your site (making it the default theme, which is then applied to all future pages you create), so that each page has the same aesthetic appearance. Consistency, after all, allows your visitors to move fluidly through a site without being distracted unnecessarily; you certainly prefer to pull a visitor’s eye strategically toward your site’s content rather than to your page’s background or use of colors. Related to this last point, be judicious in selecting an existing theme or creating a new theme. The use of themes should be carefully matched to: The purpose of your website Choose a theme that offers a suitable backdrop for the nature and purpose of the site you’re designing. If you’re designing a website for a defense contractor, for example, you certainly don’t want to apply a theme using teddy bears or wildflowers. Your desired page layout Not all themes lend themselves well to all page layouts. Test the use of different themes against your site’s layout before making a final selection. If you’re questioning whether your selection is right, test it (or multiple selections) against the focus group, as discussed in Chapter 1. Existing design components Sometimes you’ll see a website that uses a darkly colored background theme but then fails to modify the color of fonts, buttons, and other page components

USING THEMES ■

69

so that they’re properly visible and legible against the dark color. You can’t readily distinguish a black font against a dark blue background any more than you can easily see and read pale yellow against white. For these reasons, always check and double-check each page on your site after you apply a theme to be certain none of your content or other elements has been sacrificed to your choice of theme. Once you’ve chosen a theme, you need to apply it. You’ll learn how to do this next.

Applying a Theme FrontPage 2003 comes with a number of themes, ranging from the modern, scientific, and tech-oriented to nature- and business-based to the whimsical. However, you’re in no way limited to the themes provided in your FrontPage software. You can create your own theme, as you’ll do in a moment, or download and/or purchase (usually for just a few dollars each) additional themes from people and organizations that design them. Applying a theme to your entire site is easy. Follow these steps: 1. With your website open in FrontPage 2003, choose Format ➔ Theme. 2. The Theme task pane opens on the right of your screen, presenting thumbnails of each to select from (see Figure 4.6). Select the one you want to use. 3. To apply the theme, double-click the desired theme. To apply the theme with options, click the down arrow next to the selected theme and make your selections. 4. When satisfied with your selection, click Apply To All Pages from the drop-down menu. Figure 4.6 Changing the theme you’ve chosen is as simple as clicking a different theme.

70 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

If you want to apply a theme to a single page, perform these steps instead: 1. With your website open in Folders view, select the page to which you want to apply the theme. 2. Choose Format ➔ Theme. 3. From the right-hand Theme task pane, click the down arrow next to the selected theme. Note that under the Theme task pane, there are three check boxes next to these choices: • Vivid Colors—Click this if you wish to use bold, bright colors instead of normal colors. • Active Graphics—Click this if you want to use a livelier version of graphical elements in the theme’s application. • Background Picture—Most themes use a background image, so this is checked by default. Click to uncheck this box if you prefer to apply your theme without the included background picture.

Removing a Theme Should you decide, after applying a theme, that you don’t want to use a theme, all you need to do is repeat the process for applying the theme, but select No Theme under the Theme task pane, then click Apply To All Pages. The theme will then be removed.

Customizing a Theme Many folks find that they like a particular theme, but not all elements of it. For example, the color may not be quite right for what they want to achieve or they want to use a different font type. While you can’t overwrite one of FrontPage’s predefined themes, you can customize an existing theme and save it with a different name. To do so, take these steps: 1. Click the arrow next to the theme you want to modify. 2. Choose Customize, which opens the Customize Theme window.

USING THEMES ■

3. From the Customize Theme window, click one of the three buttons listed: • Colors—to alter the color scheme, including using custom colors • Graphics—to modify the background picture for the entire page, for just the banner area, for navigation bars, and so on • Text—to customize the fonts and/or text styles used for the body of the theme and for headings 4. Make the changes you wish and then click OK. 5. When you’re done with the customization, click Save As and provide a name for the modified theme. Click OK.

Troubleshooting the Use of Themes Before leaving the topic of themes, let’s look at some common problems you may encounter. Q: Although I believe I set this up correctly, new pages that I create do not have the default theme applied to them. What do I do? A: Return to a primary page on your site, such as index.htm. Be sure the theme you want is selected, and be sure you have selected Apply To All Pages. Review all your pages to make certain all pages now bear the default theme. Q: Can you tell me why, when I look at pages on my site using an older PC, parts of my theme appear to be missing? These are mostly design elements such as bullets and lines. A: If the older PC is also using a much older browser, particularly a much older version of Netscape Navigator, this will occur because the browser doesn’t support the use of Cascading Style Sheets (CSS), which provide some of the design behind the theme. Statistically speaking, relatively few Internet users continue to use these older browsers (many or most sites see less than 5% of their visitors using them). You may be able to customize your selected theme to get past this, or you may be able to select a simple theme that doesn’t affect older browsers. Q: FrontPage refuses to accept the image I want to use for a background picture for a page or banner. What’s wrong? A: This typically happens because you’re trying to use an image not in an acceptable graphics format for a web page (usually a .jpg or .gif file). Edit the image, making sure its size works well for the area you want to apply it to, and make certain you save the image in either .jpg or .gif format (.gif usually works best for themes).

71

72 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

Q: Why do almost none of the themes look the same when published to a website as they do in FrontPage? Lines are shortened or colors appear off, for example. This holds true for a few different browsers, all relatively recent versions. A: The most common reason for this is that the web server hosting the website is using an older version of FrontPage Server Extensions than FrontPage 2003 requires. In this situation, the themes probably aren’t the only problem you may see. For example, interactive buttons may not work, or discussion webs may have threading problems. If you’re hosting the site yourself, you need to update your FrontPage Server Extensions. If you’re contracting with a professional hosting service to host your site, you need to contact the host and ask that they update their server extensions accordingly. Before leaving further site planning, let’s give some thought to one of the most important components of your site: navigation.

Hands On: Creating Your Own Theme Let’s assume that you don’t want any of the predefined themes, yet you still want to use the comprehensive design elements available within a theme to make all of your site’s pages look the same. By using the same Customize Theme tool described in the previous section (minus the design information for the existing theme being modified), you can create your own theme from scratch. To accomplish this, complete these steps: 1. From the right-hand Theme task pane, at the bottom, click Create New Theme. 2. From the Customize Theme window, select your desired options for establishing a color scheme, graphics such as your background picture, and text styles.

3. Click Save As and name your custom theme. Click OK to exit the window.

CONSIDERING YOUR NAVIGATION ■

Considering Your Navigation Chapter 1 discussed the importance of logically organizing your site’s content, referred to as the concept of hierarchy. In short, this term means grouping your content into categories or areas that make logical sense. For example, suppose you want to create four dozen different help or information articles for your website. Sure, you could just list all 48 links on your home page and let visitors click away at random. However, that would take up a good deal of room you might prefer to give to more information about your project or business. A better idea is to group these articles together into a collection, perhaps divided by different major topics. Then make this collection available from a single click from your home page. Or you can create a general resource area that would be accessible from your home page and then add this collection, along with other such material, to that resource area. How users get from your home page down to individual articles in your collection is the job of navigation. This section turns your attention to initial thoughts about your navigation so the site’s visitors can progress through your site easily and find what they want, be it your products or services, your articles or tips, and so on. As you read and begin to plan how your site will handle this, it’s important for you to think of navigation as a way to steer your site’s visitors where you want them to go. Good navigation makes you part director and part choreographer for the graphical stage show that is your website, while poor navigation just leaves users confused, unsatisfied, and swiftly looking for a better site to find what they need. Just think of some of the bad sites you’ve visited yourself, and you’ll understand. The “physical” navigation of a website is most often handled in one (or both) of two ways: • Menus • Navigation bars Menus are self-explanatory; you use them all the time. Menus can be a simple, single horizontal or vertical listing that, through hyperlinks, moves the visitor from one page to another on your site or someone else’s, or they can be quite elaborate. For example, menus can automatically expand to submenus when you roll the mouse over them or click them; this is discussed in more detail in Chapter 11, “Implementing Your Navigation Scheme.” Navigation bars such as the following example are something you use with frequency but may not have known the precise term for them. You’ve probably heard the term link bar, which is simply a line of hyperlinks to other web pages. If so, navigation bars are a special type of link bar based on the navigational structure of your site.

73

74 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

There are other types of link bars, too, beyond navigation bars. For example, some simply point the visitor to go Back to the last page or Forward to the next page. Unlike menus, which are either strictly text-based or close to it, navigation bars are treated as a graphical design element and can be represented a number of different ways: • As text (in appearance) • As (usually labeled) buttons or other graphics The subject of navigation is covered in depth in Chapter 11, but you should already be considering a good navigation scheme as you begin to lay out your site. As you work, look over your site frequently in FrontPage’s Navigation view, as shown in Figure 4.7, to see how your site’s navigation is developing and what changes you may need to make. As you can see, the Navigation view displays the information hierarchy on your site and shows which types of pages (such as the Index page) populate the top entry level, and then drills down to second and third layers and sometimes beyond. Smart navigation makes it possible for someone to enter on the top level of your site, at the home page, and yet be able to move down through to find the riches beyond. So keep this in mind and you’ll learn how to enhance and fine-tune your navigation scheme once you reach Chapter 11. I promised that you would learn more about web servers and how to set them up before the chapter closed, so let’s dive into this subject now. Figure 4.7 The Navigation view for the Blue Haven Commerce Coalition’s information website gives you an idea of the site’s hierarchical structure and how different pages can “plug in” below high-level pages such as your home page.

SETTING UP A WEB SERVER ■

Setting Up a Web Server Let’s talk about the establishment of a web server. A web server’s job is to process requests made to it by web browsers that are trying to connect to a site being run from that server. Such servers can be very simple, handling only HTML and all HTML supports. Or they can be more elaborate such as a multi-tiered effort where additional server applications provide special support to the main web server; this is what you may have with a data-backed site. You might also have a server doing dynamic content generation, where pages are created on the fly depending on the requests for information made to it. Also, a web server can run one website or multiple websites. For those of you with little experience with the concept of servers, understand that a server in this case can be just a simple Windows PC running Internet Information Services (IIS) or a Unix machine with a Unix-based server such as Apache. While this makes it sound like it’s simple to establish a web server and run your own site (and it can be), there’s a lot more that goes into a site that operates off more than a PC or small network. Whether global or private, whatever server ultimately runs the website must have access to the Internet and high-speed access so that many users can connect to that server at once. This isn’t typically or effectively done through a phone line connection to the Internet or even through a broadband connection such as DSL or cable modem. Also, especially with corporate and global Internet websites, it’s important to have redundant services in place so that your site does not become unavailable. Such services can include • A backup connection to the Internet • Backup drives • Redundant drives ready to kick in to run the server if the first or second drive fails • Copies of your site which can be placed online if the primary site goes down Your server also needs excellent security. Some of that security is provided by FrontPage permissions, some through the web server software such as IIS, and some through thirdparty software such as special firewalls. But let’s not jump ahead. When you install FrontPage 2003 and set up your first website with it, you’re creating what is called a disk-based website, meaning that it runs from and exists only on your hard drive. However, it’s unlikely that you’ll want to limit your website to your drive, because • It would largely defeat basic PC and Internet security if you allowed others to access your site there.

75

76 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

• Even if you’re using a high-speed, broadband connection, others will encounter a distinct slowness trying to reach your disk-based website. The more people who are trying to connect, the worse it will become. • Whether the site is for your company, your team, or a global audience, you need your site available to others all the time. For these reasons (as well as another you’ll read about here), a website should be staged and run from a web server. The type of web server you need to run—or if you need to run one at all—depends on what you want to achieve and how you’ll make your website available to others. Let’s look at this. As you just learned, you can work with FrontPage 2003 just as installed to your hard drive through the disk-based website that FrontPage establishes. At that stage, most of FrontPage’s features will be available to you (and you alone). To move beyond just your own confines requires a web server of some type. That server can be one of the following: • Local web server—A local web server is hosted on your own system or network, which may or may not allow outside connections, depending on how your system or network is configured and protected. • Hosted web server—A hosted web server is where you contract with a third party (as discussed in Chapter 1) to host your site. Hosts can cover all ranges of sites, from private websites with few visitors to massive Internet e-commerce sites. • Web server (with or without an application server)—This is where you install a web server—and, if needed, an application server to handle web applications, dynamic content generation, and e-commerce components—to host your own site. This requires access to the type of bandwidth necessary to support the traffic of your site so that people can connect to it. • SharePoint Services web server—This is a special type of web server that has been set up using the Windows SharePoint Services tools and extensions for use with company intranets or collaborative work efforts. Most of you have the capability to run a local web server at least for testing. Some of you, depending on your setup, could host a Windows SharePoint Services website too, so long as the system you’re using resides on the same network as the people who will be sharing it. But unless you’re sure your operation has or can get the resources to host a global Internet site, including the required leased access to the Internet backbone, the redundancy of hardware and software to be sure the site stays up, and the people available to check it on a regular basis to make sure all is working, consider a commercial hosting company until you can determine the exact costs of setting up your own operation. There are risks inherent— such as many unsatisfied people trying to reach you—if you try to save expenses by running

SETTING UP A WEB SERVER ■

a barebones operation off your own server and connections. Many relatively new web designers host a site at least for an initial period of six months until they can determine the cost-effectiveness of an in-house setup. Often, a commercial service can offer you far more resources for a per-month cost that may be lower than what you could provide, depending on the traffic your site generates. But these designers also spend that time asking many questions of their web host and learn a great deal more about the process. Such a wealth of information can send some scrambling to do it better and cheaper themselves, while it makes others glad to tender their monthly service fees to a host. If you decide to go with your own server (local or otherwise), you’ll find that Microsoft Internet Information Services (IIS), described in the next section, can work for all of these platforms, including operating in the role of application server. IIS is by no means the only web server software available, but it’s the one most often used by organizations or individuals who use the Microsoft Windows platform because IIS is part of professional versions of Windows. IIS supports the use of FrontPage Server Extensions, important for full FrontPage feature functionality, including ease of publishing the site. Another very popular platform used with Unix-based systems is the Apache web server, which is widely supported and in use in more web operations around the world than IIS. Many consider it more stable and more secure than IIS and like it because it’s not tied intrinsically to the Microsoft operating platform. Microsoft is hoping to change that opinion with security and service updates in its most recent incarnation of IIS (6.0, included with Windows Server 2003), but time will tell. If you’re running Unix or Linux with Apache web server software on either your local or remote server rather than Windows 2000 or Windows XP, you may not be locked out of using FrontPage Server Extensions. Unix/Apache can be configured to install and work with the past versions of these extensions although it’s not always fun or easy to tweak them into submission. Visit the Microsoft Knowledgebase site at http://search.support.microsoft.com and search under the product FrontPage for Apache/Unix instructions.

With all this said, understand that even if the operation (the company, the client, and so on) where you’re setting up a site has its own web server or whether you’re contracting with a commercial hosting service to handle your FrontPage-created site, you may want to set up a local server just for your own work and testing. This is rooted in FrontPage Server Extensions, first mentioned in Chapter 1, which give a web server tools to allow all of FrontPage’s features and functions to work optimally. These extensions, as the name implies, only run from a server, and you’ll find that some functions—such as discussion webs and others—just won’t work for you locally (from your system) without them installed. You won’t be able to run a Windows SharePoint Services site without these extensions (plus Windows SharePoint

77

78 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

Services) installed. You’ll also encounter warnings when importing an existing website from a FrontPage-extended server into your FrontPage application; while these warnings aren’t critical, they will alert you to what won’t work without the extensions available. However, before you do anything, consider your situation. If you want to run a website from a work intranet and you’re not the network administrator in charge of that intranet, speak to the network administrator first. The same is true when you want to set up a server from which to run a corporate or company Internet site. Make sure that your actions • Don’t compromise (network) security measures already in place. • Don’t interfere with existing processes or websites being run. • Won’t be in vain because you don’t have the bandwidth or the disk space necessary to launch the site. It’s also vital that you work with your network or system administrator to be sure that you have the required security permissions in place. Otherwise, you may find yourself troubleshooting odd errors and strange behavior that are rooted back at your network or company web server(s). If your plan is to set up a global Internet website, you need to know what you have to work with. Does the company you’re working with have its own server set up or access to one through a host? Identify the details and what platform is being used so that you can then determine what you need to make it work with your FrontPage-created website. Or, if the company has no server and no hosting arrangement, you need to begin to put the parts together to cover your website’s requirements. Now let’s discuss what’s involved in setting up both a local and a remote server.

Setting Up a Local Web Server When FrontPage first debuted in the mid-1990s, one of its touted benefits was that you could turn your hard drive in a local web server using a Microsoft application called Personal Web Server (PWS). PWS is still around and available for download from various places around the Internet, but it’s no longer tied to FrontPage and has not been updated in some time. Today, the most common way of creating a local web server to work with FrontPage is by installing Internet Information Services (IIS), the Windows-based web server software available as a service under Windows 2000, Windows XP, or Windows Server 2003. Then you apply FrontPage Server Extensions to extend the websites created under IIS to support FrontPage-specific features such as automated publishing, discussion webs, interactive buttons, and other options.

SETTING UP A WEB SERVER ■

However, while IIS can behave as a local server for you, it can also act as a full web server and it can also serve as an application server. You’ll read about this later, when you learn about server-side scripting and web applications in Chapter 16, “An Overview of DatabaseBacked Sites.” Let’s talk about this in detail before you look at the steps necessary to install IIS. If you have Windows 2000 or Windows XP Professional, you may have noticed that IIS is available for installation from the install CD. As a component, you can add or remove it under Add/ Remove Programs by looking at Windows components. However, the latest version of IIS is 6.0 and is packed with Windows Server 2003. It’s this edition you need to use, particularly if you plan to create a Windows SharePoint Services site or use features that depend on FrontPage Server Extensions. This means you also must run Windows Server 2003. At the time this book was being written, I found that while I could run IIS 5.1 (the XP version) with FrontPage 2002 Server Extensions applied, FrontPage 2003 didn’t recognize the server as extended. Only when I installed IIS 6.0 under Windows Server 2003 and reapplied the FrontPage 2002 Server Extensions did FrontPage 2003 see the web server as extended with the full range of options and features available to me. IIS is not installed by default, but there are three different methods you can use to install IIS 6.0. I’ll take you through two of them; the third— unattended mode—is typically used by administrators. The first method, installing IIS using the Configure Server Wizard, installs support for ASP.Net (discussed in Chapter 16) along with IIS; the second method allows you to install IIS only. To install IIS using the Configure Server Wizard, take these steps: 1. From Start, click Manage Your Server (see Figure 4.8). 2. Under Managing Your Server Roles, select Add Or Remove A Role. 3. Configure Your Server Wizard appears and takes you through the initial steps. Click Next. 4. When prompted for Server Role, select Application Server (IIS, ASP.Net). 5. Click Next twice, and then click Finish. The series of figures covering Windows Server 2003 will appear a bit differently from those using Windows XP (which make up the rest of this chapter and this book) because of display differences between the two environments.

Figure 4.8 The Windows Server 2003 Start menu

79

80 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

Depending on how you worked with Windows Server 2003 before you reached this point, you may be prompted after step 4 to add application server extensions to your IIS server, as shown in Figure 4.9. If so, you should choose at least FrontPage Server Extensions or Windows SharePoint Services, as desired, from the list. If you don’t choose them at this point but need to do so later, follow the instructions using the second method to install IIS (described shortly). In addition, in step 4, you can add FrontPage 2002 Server Extensions, SharePoint Team Server, or support for ASP.Net to your IIS setup. Figure 4.9 Check the application server extensions you want to add.

The second method lets you add IIS through the Control Panel ➔ Add And Remove Programs menu. Follow these steps: 1. From Control Panel, double-click Add And Remove Programs. 2. Select Add/Remove Windows Components. 3. The Components list box appears. Click to select Application Server as shown in Figure 4.10. Click Details and select Internet Information Server. Click OK or, to add your FrontPage Server Extensions at this time, go to step 4. 4. Instead of clicking OK, click Details under Internet Information Server. Under optional components, select FrontPage 2002 Server Extensions (see Figure 4.11). Click OK to install. Familiarize yourself with security and configuration issues with IIS before you install it and begin to use it. For example, personal and company firewalls, used to protect private files from those who may enter first through a website, may need to be reconfigured to work properly with IIS.

Setting Up a Server for SharePoint Team Site A collaborative but private SharePoint Team site can be on a local server on the network at the company offering it or it can be hosted through a commercial web service that supports Windows SharePoint Services. IIS can serve as the basis for your SharePoint Services site. For the most recent version of SharePoint, you need to install Windows SharePoint Services, which needs Windows Server 2003 to run. If you refer to the steps for installing IIS in the “Setting up a Local Web Server” section earlier in this chapter, you’ll see that SharePoint Team Services is an option you can add when you install IIS; you can also choose whether to use it as an application server too.

SETTING UP A WEB SERVER ■

Also, you need to install ASP.Net when you install IIS, because this is required to create and run a SharePoint site in FrontPage. Once you do this, there’s one more step. You also need to install the Windows SharePoint Services software in order to be able to use SharePoint-based templates and services within FrontPage to create and manage your site. If you don’t install it, you’ll receive an error message telling you that these services need to be installed and running first. You’ll learn more about this in Appendix A, “Installing a Web Server,” when you go through the steps to set up both a personal (local) server and a SharePoint Team Server. Web traffic can be a consideration here as well, because a small network may experience the same types of difficulties handling many simultaneous connections to an internal website that a global Internet site faces when thousands of users try to reach the same page at the same time. Check with the network administrator, if you have one, for details. This situation may be helped if you use a commercial host, depending on the speed of the Internet connection available to those who will then connect to that host.

Setting Up a Remote Web Server To set up a remote web server using IIS, follow the same installation instructions that you did in the “Setting Up a Local Web Server” section, in addition to the hardware and Internet connectivity described earlier. However, when you set up a remote web server, you usually need to provide a domain name to associate with your site under IIS. More about that in a moment. If instead you go with a commercial host that supports FrontPage (and possibly features such as Windows SharePoint Services), most of your responsibilities will be taken care of as part of the hosting arrangement. You simply need to obtain your site details and publishing information from them and begin to set up your site. However, once again, there’s the issue of your domain name.

Figure 4.10

Figure 4.11

You can add IIS from the Windows Control Panel.

Adding FrontPage 2002 Server Extensions

81

82 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

When dealing with a global Internet site, there is also the issue of a domain name or the name that is associated with the site. For example, in the URL www.sybex.com, Sybex is the domain name as well as the company name. This means that Sybex registered the use of the domain name sybex.com for use as the name address (typed into the web browser) for their website. The alternative is to use what is known as an IP address—a number such as 192.178.48.92—to reach a website, but this is a less satisfactory option. You probably are already aware that domain names have suffixes such as *.org (usually but not always for non-profit organizations and information-based sites), *.edu (for academic enterprises), *.gov (for government), and a host of others. When you register a domain, you register both the domain and the suffix, such as www.microsoft.com. To have a site called widget.com also available if someone mistypes it as www.widget.org or www.widget.net, you

need to register all those names and place pages on the other suffixes to redirect people back to the main widget.com site. Many companies in the 1990s registered domain names well before they first established web presences simply so someone else wouldn’t take them. If you’re working with a company, be sure to determine whether a domain name has already been registered. However, because registrations are generally term-limited, meaning that the registration expires in one, two, or more years unless the registration is renewed, you also need to be sure the registration is still valid. You can use sites such as WhoIs at www.whois.org to check the registration (or domain name availability) for any domain. You can register a domain name using any of hundreds of domain name registrars; check search engines such as Google to find one that meets your needs. Note, however, that pricing among domain registration agents can differ by as much as $20 or $30 for the same time period and that many agents provide a discount for long-term registration. Figure 4.12 Your FrontPage site is listed here once you publish to your IIS web server.

SETTING UP A WEB SERVER ■

Check Your Server Setup Once IIS is installed—and let’s assume you’ve also installed FrontPage Server Extensions at the same time—check to be sure IIS is running properly, that your site can be seen by it, and that it’s been extended with the server extensions. I’ll show you how to do both, but be aware that the ability to check your site’s extensions is available only after you publish your site to the server, which you’ll learn about in Chapter 23, “Going Live.” If you’re going through a remote commercial host, you won’t be able to check your site’s extension configuration because that’s handled by the host. To check your IIS setup from Windows Server 2003 and check the FrontPage Server extensions for a site, follow these steps: 1. From Start, select Manage Your Server, and then choose Application Server. 2. Click Internet Information Services (IIS) Manager to expand it, and then click the server name, which expands to show all websites (see Figure 4.12). Once you’ve published your site to the Web, it will be listed here. 3. Double-click to expand your site in the list, then check the right-hand pane and be sure it lists the site under IIS as Running. If it shows Stopped, right-click the site and choose Restart IIS. 4. To check Server Extensions, right-click a listed website, point to All Tasks, and then to Check Server Extensions 2002. When you’ve completed step 4, there’s a brief pause while it performs the actual evaluation. As the process finishes, your web browser displays a report such as the one shown in Figure 4.13. Take the time to read this report. For example, mine tells me I need to tighten security, which would be very smart. That topic is addressed in Chapter 21, “Setting Up the Back-End Interface.” Figure 4.13 Problems are listed in red to get your attention.

83

84 ■ C H A P T E R 4 : D E F I N I N G Y O U R W E B S I T E

If you will depend on IIS as your platform, take the time to become familiar with the many online resources for helping you understand, configure, work with, and secure your IIS web server. Appendix B, “Online Resources,” will include some of these.

Going Forth From Here Now that you’ve set up your working site in FrontPage and begun to design it through the use of themes and other elements while thinking about the type of navigation scheme you’ll need, let’s press on to begin gathering the content necessary to populate the pages of your site.

CHAPTER 5

Gathering Content and Working with a Team CHRISTIAN CRUMLISH

There’s one step you need to take before you can really start building your new website in earnest: You have to gather the content that you’ll be using for your site. By content, I mean both text and graphical content—all of the various assets you’ll need to assemble to create your web pages and build your site. Some of this content may already exist. Other copy and artwork has to be produced by you, your team, or your subcontractors. This chapter covers the following topics: ■

Developing a content inventory

■

Creating reusable web content

■

Repurposing existing Office content

■

Creating graphical assets

■

Turning finished pages into templates

■

Document check-in and check-out

■

Document libraries and picture libraries

86 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Building a Site

.

Nowadays, all but the smallest web projects require the contributions of multiple team members. These team members bring expertise in a range of disciplines, whether they are subjectmatter experts for the content of the site, web designers, information architects, content developers, technical architects, business strategists, project managers, or web production specialists. Only some of these people will play a hands-on role in the creation of a site, but the days of the one-person web-development team are largely over in the professional world. Executing a website development plan requires teamwork. For one thing, you need to create a schedule for building the site, and you’ve got to make sure that the content is ready when the time comes to pour it into the site’s design templates. This is something you do mostly on paper or in applications outside of FrontPage, but I’ll explain in this chapter how a content inventory and an editorial schedule are developed. You also need a way to distribute templates and other reusable site assets, and you have to keep track of who is working on which document so that changes don’t get overwritten or undone. FrontPage offers several collaboration features helpful in this area, including a document check-in/check-out function and—for Windows SharePoint Services sites—an easy way to share document libraries.

Taking an Inventory of Content For any complicated website, a content inventory aids in tracking the existing, repurposed, and required content for a site. A content inventory can also track any other salient issues surrounding content such as originator, purpose, refresh cycle, status, file format, what—if anything—the content links to, and so on. Maintenance of a content inventory gives a content manager a single document for an at-a-glance oversight of the content. The steps to follow in developing a content inventory are as follows: 1. Create a page inventory. 2. Define content areas (based on page templates). 3. Determine which content properties you’ll need to track. 4. Fill out the matrix with information about each piece of content.

Creating a Page Inventory Because the web medium is not linear (like a book) but instead “hyper” (with many crosslinks), it is all the more important that the manager of a site have a comprehensive index of the pages on the site. In essence, the nonlinear information at the site needs to be placed into some order (even if it’s arbitrary) for tracking purposes. Some pages in a website are static HTML, others may be dynamic (ASP or JSP pages, for example), and still others may have been created in other file formats. But they can all be

TAKING AN INVENTORY OF CONTENT ■

itemized, from the user’s point-of-view, as pages. One tricky issue to consider first is persistent or global elements on a site. They can’t be overlooked, but neither do you want to have to keep duplicate copies of the information about those sections on every page. Usually a page inventory starts by listing the sections that are global (usually consisting of navigation areas or other persistent links). Then the page inventory itemizes all the pages that a user can navigate to, without repeating the global information for each page. The remaining pages should most likely be organized along the lines of your navigational scheme, with a new section for each area. Use your site map (see Chapter 3, “Web Pages Deconstructed”) as a guide when building your page inventory. The site map may not drill down to a page-for-page level, so it can serve as a starting point, but now is the time to enumerate each exact page.

It’s also important to define a numbering system. If there is any numbering system already in place (as in the wireframe blueprints of a site, on a site map, or in a database), stick with that, but extend it if necessary with sub-numbers (such as Page 2.1.2, Page 1.3.13, and the like). The numbering system used in your page inventory should then be adhered to consistently when working on any aspect of the site, so that collaborators can refer to a consistent index of content and other page elements. The page inventory can be maintained in a spreadsheet or even in a table in a document. Once you’ve itemized all the global areas and pages at your site, you can start drilling down into the various content areas that may share any given page. Figure 5.1 shows an example of a page inventory.

Defining Content Areas A content inventory inherently looks a little deeper into your site than a page inventory does, for the simple reason that pages often contain more than one discrete content area or type of content (such as touts, headlines, sidebars, local navigation, and so on). In a well-designed site, the content areas should be consistent across similar sections of the site, and you should be able to refer to page templates (or wireframes) created in the design process to identify the specific content areas in question. When you’ve done this, you need to expand your page inventory to accommodate multiple content areas per page. Generally, you also need to augment your page-numbering system to include an additional degree of sub-numbering that keeps track of multiple content areas for each numbered page. In your spreadsheet or table, this involves adding new rows underneath each page listing and listing each content area on each page in its own row (see Figure 5.2).

87

88 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.1 Build a page inventory to enumerate all the pages you’ll need to build for your website.

Determining Which Content Properties to Track If you were to look at a number of examples of content inventories used to maintain various types of sites, you’d see that they track different content properties or attributes. This has a lot to do with the purpose of a site, the nature of its content, the frequency with which some content types need to be updated, and other priorities driven by the specifics of each website. Some of the properties that you may want to consider tracking are as follows: • The format of the content • The content originator and the development process • The purpose of the content • The refresh cycle (the frequency with which the content needs to be updated) • Whether the content is static (stored in a file) or dynamic (stored in a database) • Other aspects of the content’s status (possible statuses might include On Hold, In Review, Approved, Rejected, Published, Expired, Archived, and so on)

TAKING AN INVENTORY OF CONTENT ■

89

Figure 5.2 Identify all distinct content areas on each page of your site.

The point is to consider what information you want immediate access to in the future. If some information is not important to you, don’t track it. Also bear in mind that you can always start tracking a new property in the future, although this may involve backing and filling in your inventory at this later time to be able to completely track all existing content in terms of the added property. Figure 5.3 shows an example of a content inventory with content types, metadata (information that can be used by search engines and similar tools, as discussed later in this chapter), and which users can view which pages or areas.

Assembling the Matrix Once you have created your property lists (and validated them, as necessary, with your colleagues), the content inventory can be turned into a complete matrix by treating each property as a column head. You may also specify in a key or in an attached document what some of the allowable values are for these properties and when the range of allowable values is limited (as with the status examples offered in Figure 5.3).

90 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.3 The content inventory with additional content properties defined for each page or area.

Drawing Up an Editorial Calendar Once you’ve got your content inventory, you can easily adapt it to create an editorial calendar for either a build-and-launch or for the ongoing maintenance of the website. The main difference between a content inventory and an editorial calendar is that the properties tracked on an editorial calendar are entirely related to the content-development or maintenance processes. The editorial calendar might include the following: • Who is responsible for the content • What steps are in the process and the deadlines associated with each step • What is the status of the content as it moves through the process • Whether the content exists already, must be repurposed from existing content, or must be developed from scratch, and so on (see Figure 5.4) Naturally, an editorial calendar for a launch is generally more comprehensive, because all the content is being posted for the first time, including such elements as instructional text and other items that may never need to change, at least not on any regular basis. An editorial calendar for maintenance purposes can be based on the calendar from the launch and then “scrubbed” of all content elements that do not require regularly scheduled maintenance.

TAKING AN INVENTORY OF CONTENT ■

Figure 5.4 An editorial calendar based on a content inventory

Defining Metadata Standards In developing content for corporate sites, metadata should be embedded or associated with the content when it is created. Bear in mind the search terms a user may expect to find the content with and identify any placement in an existing taxonomy (categories or other organizational scheme) used in your site. Metadata can be used to organize and index the content at your site and provide for more effective searches. Ideally, users can find your content by navigating through your clear, well-defined menus. But some users always prefer to search first, and other users resort to searching when simple browsing doesn’t do the trick. Depending on the file format of your content, there are different ways to attach metadata to the content: • HTML files can have metadata inserted in the HEAD area of the file (see Chapter 7, “Working Through Page Layout,” for instructions). • Office documents can have metadata included using the Summary feature in Microsoft Office (whether you convert the documents to FrontPage format or leave them in their original formats: .doc, .xls, or .ppt).

91

92 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

• Acrobat files (PDF) also have a Document Summary feature. • Structured (database) content should have its metadata included as a single field, a series of fields, or a linked database table. Once you’ve got an organizational scheme ready for your content, you can figure out what ready content you have, what content needs formatting, and what content needs to be created from scratch.

Creating Reusable Web Content In any complicated web development project, you’ll find that there are design elements and content snippets that you need to reuse throughout the site. Before you start cranking out pages, assemble a library of the text and graphics that your entire team can draw on when assembling pages.

Repurposing Existing Microsoft Office Content In many workplaces, much of the existing document store and knowledge repository exists in the form of Microsoft Office documents. If you’ve surveyed the available content in the form of Word documents, PowerPoint slide shows, and even Excel spreadsheets, you’ll often find that some of this content can be kept on hand for incorporation into the website as you develop it. Most of the time, pre-existing content can’t simply be slapped into place in a website without some adaptation to make it fit into the site’s context in terms of voice, tone, depth of coverage, and navigation flow. When a document is suitable as is, such as when the document is referred to in some web context and then provided as full text linked to the reference, you may be able to simply add the document as is to your website’s file hierarchy. This works best on an intranet, when you can be sure that your user base functions in a total Microsoft environment and uses Internet Explorer browsers to view web pages and Office documents. In all other circumstances, you should convert the pre-existing documents to HTML (which you can do from within Word, PowerPoint, and Excel), and then clean up or optimize the HTML (as discussed in Chapter 8, “Inserting and Formatting Text”). Finally you should review the content and edit it as needed to repurpose it for your website.

CLEANING UP MICROSOFT’S MESSY HTML One problem with converting Microsoft Office documents directly into web pages is that the HTML produced can be full of nonstandard markup that may make the documents look strange—or worse, remain inaccessible. There are a few ways you can clean up the messy HTML produced by Microsoft applications. One useful service is Dean Allen’s HTML Tidy, available at www.textism.com/resources/cleanwordhtml/. See www.net-sites.com/ sitebuilder/thirdparty/ for other third-party HTML cleanup resources.

CREATING REUSABLE WEB CONTENT ■

93

Creating Graphical Assets Before you start building a website, it’s customary to come up with a final visual design, even when the details of the interface may be subject to alteration throughout the project. This usually consists of a home page design and some templates for second- and even third-level pages at the site. To impose a consistent look and feel on a site, graphical motifs are usually repeated throughout the templates for the various types of pages. These may consist of logos, illustrative graphics, a consistent color palette, and a set of icons or design elements (see Figure 5.5). If you or your designer has created various graphical elements, you can make them available to everyone working on the project so that they can assemble pages based on a common template with consistent design elements. See Chapter 9, “Working with Graphics,” for more details on creating graphics with the Office Drawing toolbar and using a tracing image to produce web pages to match comps or sample design images. At the same time that you develop static graphical design elements, you may also want to work on any dynamic or script-based objects you expect to use throughout your site. See Part III, “Adding Dynamic Content,” to learn about the various methods of creating dynamic objects with FrontPage.

Preparing Content Templates Because certain content snippets usually need to appear on multiple pages, you’ll want to develop this type of boilerplate content in advance and make sure it’s included on any templates that you distribute to your production team. The kind of copy that you might want to include in templates includes dummy/placeholder text. A traditional way to represent dummy text in typeset documents is with a passage of medieval Latin that begins “Lorem ipsum…” (or “lipsum” for short). You can generate a clean passage of such dummy text of just about any length at the Lorem Ipsum—All the Facts—Lipsum Generator page (www.lipsum.com). Figure 5.6 shows a content template with lorem ipsum dummy text. Always make dummy copy stand out in some jarring fashion so that there’s no chance of the embarrassment of going live with dummy text still in place.

The content template might also include copyright and privacy statements, and fixed copy from the basic design (often graphics instead of text). Other graphical content that belongs in templates includes standard design elements and placeholder graphics when custom graphics are required in consistent layout positions.

Figure 5.5 This graphic file from a designer shows a logo and a color palette for a website.

94 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.6 A content template with dummy content

Page templates can contain more than just standard copy and dummy text. You can also use them to lock certain areas and allow others to be edited, and then distribute these “dynamic” templates to your team as they build out the rest of the site. See Chapter 12, “Working with Dynamic Web Templates,” for the steps involved in creating a dynamic web template from a web document.

There’s No “I” in Team In the beginning, many of the sites on the Web were created and maintained by multitalented individuals. These one-person sites still exist, of course, but in the more commercial side of the Web they’ve become fairly rare. Much more common are elaborate sites developed and maintained by multidisciplinary teams. Having a team to collaborate with removes from your shoulders the burden of having to be an expert on every aspect of web development. However, it multiplies certain other problems involved with maintaining consistency and coordinating decisions with people bringing different priorities and even different jargon to the table.

VERSION CONTROL WITH CHECK-IN/CHECK-OUT ■

Version Control with Check-in/Check-out When you have several people working on the same site, there’s the risk that two people will try to update the same file at the same time. If you don’t have any version-control system in place, then the work of one of those people will be overwritten and lost when the second person uploads their unsynchronized version of the file. Remote hosts that use WebDAV take care of the problem of multiple versions by tracking who has which file checked out at any given time. But if you’re using an ordinary FTP host, a network host, or a Windows SharePoint Services server to host your site, you can turn on a feature called check-in/check-out. This feature allows FrontPage to keep track of which files are currently being worked on and to prevent people from overwriting checked-out files. The first step is to turn on the feature.

Turning On Check-in/Check-out To turn on check-in/out, take the following steps: 1. Select Tools ➔ Site Settings and make sure the General tab is showing in the Site Settings dialog box (see Figure 5.7). 2. Click the Use Document Check-in And Check-out check box. Assuming that you have your remote site set up, you can choose to base the check-out process on the remote or local collection of files (see Figure 5.8). For more information on setting up your site, see Chapter 4, “Defining Your Website.”

Figure 5.7

Figure 5.8

Set up the check-out feature in the Site Settings dialog box.

You can base the check-out process on the local or remote file collection.

95

96 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.9

Figure 5.10

At Windows SharePoint Services sites, the only option is whether FrontPage should prompt you to check out a file when opening it.

Some remote sites offer more options for the checkin/check-out feature.

Windows SharePoint Services sites use check-in and check-out by default, so for those sites, your only decision is whether to turn on the prompt to check out a file when opening it (see Figure 5.9). With remote FTP sites, you have some additional options about the audit trail that you’re going to leave when checking in and checking out. To consider your options, click the Options button (see Figure 5.10). The Remote Check Out Options dialog box opens (see Figure 5.11). First, enter a username or full name that identifies you on the remote server when you’ve checked out a file (so others know to get in touch with you when they’re looking for who to Figure 5.11 Here’s where you tell FrontPage who is checking out the document (you).

nag about checking the file back in). Decide if you want to include your FTP login name with your check-out name. This feature is included to offer compatibility with Dreamweaver users who may be checking files in and out from the same server. There’s even an option to include your e-mail address to really facilitate the nagging process.

VERSION CONTROL WITH CHECK-IN/CHECK-OUT ■

Checking Out To check out a file, right-click a file on the local server and choose Check Out on the context menu that pops up. Alternately, if you’ve kept the Prompt To Check Out On Open option selected when turning on check-in/check-out, you can just open a file and you’ll be prompted (below left) to check it out (or not, or to cancel, as you prefer). Either way, if you’ve got check-out set up based on the remote server, then you’ll see a notice that FrontPage is copying the latest version of the page for you (this is part of the check-out procedure) (below center). If you’ve got the check-out system focused on the local side, then you won’t see that copying step when you check out a local file. However, the effect will be the same: You’ll have the latest version of the file, and no one else will be able to save over it until you check it back in. By the way, if you decide to change the way you’ve got check-in set up, go back to the Site Settings dialog box and choose the Local or Remote option to switch. FrontPage warns you that it will take a few minutes to update the records (below right).

Checking Back In When you’ve finished working on a file and you’re ready to put it back into general circulation, you can check it back in by right-clicking the file and choosing Check In. The Check In dialog box appears (see Figure 5.12), showing the file you selected (you can do this with a multiple-file selection as well). This dialog box gives you a place to make comments on your work-inprogress, if you have anything to share with your teammates. The Keep Files Checked Out option is there in case you want to log your comments before you’re done with the file or files. When you’re ready, click OK.

97

98 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Unchecking Out You can actually change your mind about checking out a file without formally checking it back in. To do so, right-click a file (or files) and select Undo Check Out. FrontPage notifies you that by doing so you are discarding any changes that you’ve made this session. Click Yes to toss your work or No to save it elsewhere or continue working on it.

Teamwork with Windows SharePoint Services Microsoft is replacing the old FrontPage server extensions with reliance on Windows SharePoint Services sites for the bulk of FrontPage’s custom web features. Windows SharePoint Services sites are portal sites and team collaboration sites designed to enable people to interact and work together on a project site through their web browsers. Because of this, if you’re working on a Windows SharePoint Services site, it’s possible to use its document library feature to enable sharing of key templates, graphical assets, and other reusable documents with everyone on the team. While SharePoint is not limited to supporting web-development projects (it’s designed for any collaborative team project), it can be useful when your entire project is being built in a total Microsoft environment (as is the case with some intranet projects). Figure 5.12 Use the Check In dialog box to add any notes about the project.

Creating Document Libraries To create a document library, you don’t have to have a web page open. However, you need eventually to add the library (inserting it as a data view, as discussed in Chapter 18, “Developing Data-Driven Websites”) to a page if you want team members to be able to access the library via a browser from the Windows SharePoint Services site. You can also make the library available only via FrontPage if you want to restrict its use to a smaller group than users of the SharePoint site. To make a new document library, select Date ➔ Insert Date View. On the Data Source Catalog task pane, expand the SharePoint Libraries item in the Data Source list, and click the Create New Document Library link. The SharePoint List dialog box

TEAMWORK WITH WINDOWS SHAREPOINT SERVICES ■

99

opens with the Document Libraries tab selected (see Figure 5.13). You can choose to make your document library with either the wizard or with the ordinary template. The New Document Library wizard walks you through the process of naming your library, choosing an optional base template, and customizing the metadata used to track the documents in the library. The template simply drops a new library into place without all that customization. To use the wizard, follow these steps: 1. In the SharePoint List dialog box, select New Document Library Wizard and click OK. 2. Read the introduction in the wizard and click the Next button. You’ll be prompted to give your library a name and description (see Figure 5.14).

Figure 5.13 Creating a new document library is a snap.

3. Enter a descriptive name for the library and a description of its contents. 4. If you don’t want people working on this library through their web browser (that is, if you just want people working on the project using FrontPage to have access to the library), click the Hide From Browsers check box. 5. For greater control of multiple revised and updated versions of documents, choose Enable Versioning Of Documents. 6. To impose a rudimentary content-approval workflow step into the process for adding new items to the library, choose Require Content Approval For New Items. 7. Click Next. The next page asks if you want to use a template for new library documents (see Figure 5.15). 8. If you have a template that all the documents in this library (whether they themselves are templates or just documents) should be based on, choose Use A Template For New Documents and browse to the template that you have in mind to add it here. (See Chapter 12 for more information about dynamic web templates.) 9. Click Next. The long list of recommended document-management metadata fields for the library appears (see Figure 5.16). 10. Check the list of fields planned for the library’s document database and make sure that they meet your needs, tracking all aspects of the documents you may want to track.

Figure 5.14 The Document Library wizard’s name and description window

100 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.15

Figure 5.16

Your library can impose a template on new documents.

Add, modify, or remove data fields, or move them up and down in the list.

There’s no single definitive source of course metadata standards. Metadata requirements vary wildly from site to site. Businesses in some vertical industries are working together on initiatives to develop metadata standards (so they can exchange information and complete transactions using XML, for example) but even these initiatives can fall into interoperability problems when individual companies wish to differentiate their offerings from one another more than they want to cooperate on a single standard.

11. If there’s a need for another field, click the Add button to add it. In the Add Field dialog box, describe the new field and click OK (see Figure 5.17). 12. To change the properties of any existing field, select it and then click the Modify button. 13. To delete a field from the list, select it and click the Remove button. 14. To change the place of a field in the list, select it and use the Move Up or Move Down button to rearrange the order of the items. Figure 5.17 Adding a new field

15. When you’re done, click the Finish button. FrontPage adds your new document library to the list of Windows SharePoint Services libraries in the data source catalog. To insert your new document library into a SharePoint page, click it in the Data Source Catalog task pane and choose Insert View. See Chapter 18 for more information about working with data views.

TEAMWORK WITH WINDOWS SHAREPOINT SERVICES ■

101

Picture Library Images are another type of asset that you may want to reuse throughout a site, whether they be licensed stock photographs, logos, or just graphical design elements. One way to share graphics throughout a site is to set up a picture library. (See Chapter 9 for more on working with graphics and the Picture Library software.) To insert a picture library into your site, follow these steps: 1. Select Data ➔ Insert View. 2. Go to the SharePoint Library item in the Data Source Catalog task pane and select Create New Document Library. 3. On the Document Libraries tab of the SharePoint List dialog box, select the Picture Library template. 4. Enter a name for the new picture library in the Options area. 5. Uncheck the Use Microsoft Picture Library option if you don’t want to work with this Microsoft Office peripheral software. (Leave it checked if you do want to use Picture Library to assemble your graphics.) 6. Click OK to create the picture library (see Figure 5.18). FrontPage can either create the new empty picture library for you and notifies you of this fact, or it launches Microsoft Picture Library, which offers to scour your hard drive or network for images that you might want to add (see Figure 5.19). In Picture Library, to find graphics, choose File ➔ Locate Pictures, point to a specific volume, and click OK. Then upload them to your Windows SharePoint Services picture library by choosing Upload and Close. To insert your new picture library into a SharePoint page, click it in the Data Source Catalog task pane and choose Insert View. See Chapter 18 for more on working with data views.

Figure 5.18 Create a picture library with or without the help of the Microsoft Picture Library program.

102 ■ C H A P T E R 5 : G A T H E R I N G C O N T E N T A N D W O R K I N G W I T H A T E A M

Figure 5.19 Manage your picture library with Microsoft Picture Library (part of Office).

Enough with the Planning, Already By now, you should be chomping at the bit to get your hands on some actual web pages (assuming that you haven’t skipped some or all of the first part of this book). In Part II, “Building a Web Page,” you’ll learn how to work on the page level of a site, making and laying out new pages, adding text and graphics, inserting hyperlinks and other navigation aids, and turning finished pages into templates.

PART II

Building a Web Page The fun part of web design is building the actual pages. The next few chapters take you through all the major steps for assembling a web page: from starting the page through laying it out, adding text and image content, connecting it to the rest of your site (and to the Web in general) with hyperlinks, applying your navigation scheme, and finally turning a finished page into a template to make the production process that much easier. CHAPTER 6

■

Creating a New Web Page

CHAPTER 7

■

Working Through Page Layout

CHAPTER 8

■

Inserting and Formatting Text

CHAPTER 9

■

Working with Graphics

CHAPTER 10

■

Inserting and Maintaining Hyperlinks

CHAPTER 11

■

Implementing Your Navigation Scheme

CHAPTER 12

■

Working with Dynamic Web Templates

CHAPTER 6

Creating a New Web Page CHRISTIAN CRUMLISH

As you know, the basic building block of any website is a web page. FrontPage offers several ways to create new web pages. You can start with an empty page, or you can base your new page on an existing page or on a template. This chapter shows you the various methods for creating new web pages. It’ll also explain some of the housekeeping involved with setting up a new page. This chapter features the following topics: ■

Creating a new blank web page

■

Cloning an existing page

■

Creating a new page from a template

■

Setting up a new page

■

Applying a theme to your page

■

Creating Cascading Style Sheets

■

Assigning a style sheet to your page

■

Applying page transitions

106 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Starting a New Web Page Web pages are the building blocks of websites. Even if you are developing a dynamic site, you need to construct pages to display the contents stored in the database. With FrontPage, you can create a blank page from scratch, base a new page on an existing page, or create a new page from a template or wizard. Start with a blank page when the new page you’re building is not closely based on or similar to any existing page. Base a new page on an existing page when the two pages are similar enough that using the old page as a basis for the new page will save you some time and effort. Use a built-in template or wizard when you need help getting started or when you want to build something tricky without figuring out all the details from scratch. As you’ll see in Chapter 12, “Working with Dynamic Web Templates,” you can also create your own custom templates to make the process of developing new pages more efficient.

A Blank Slate To make a new blank page, select File ➔ New. The Task pane appears if it’s not already open, and its New Page Or Web Site view is displayed. Click the Blank Page option to open a new blank page. You’ll see a view similar to that in Figure 6.1. Notice that the blank page appears with two windows. This is called Split view. Split view is just one of many ways you can display your web page in FrontPage. Chapter 8, “Inserting and Formatting Text,” explains in detail how to use this feature. Figure 6.1 A new blank web page, shown in Split view

STARTING A NEW WEB PAGE ■

107

You can also create a new plain-text file by choosing the Text File option if you just need to jot down some notes.

The following sections describe other ways to start a new web page. If you’re ready to start building your page, skip to the “Setting Up Your New Page” section later in this chapter.

From an Existing Page Often, the design for your new web page is very similar to that of an existing page. Instead of repeating all the steps you performed to build the original page, you can start a new page based on the existing page and then just change the elements that are different. That’s what computers are for—to prevent you from repeating steps over and over! Basing a new web page on an existing web page is a way of using the original page as an ad hoc template. I’ll explain how to work with “real” templates in the next section.

To clone an existing page, select File ➔ New and then choose From Existing Page in the Task pane. FrontPage opens the New From Existing Page dialog box (see Figure 6.2), which shows you the root folder of your current web page. Choose (or browse to and then choose, if necessary) the page you want to copy and then click the Open button. If you’re ready to continue the process of building a page, see “Setting Up Your New Page” later in this chapter. To learn how to start a web page from a FrontPage template, read on.

From a Template FrontPage ships with a number of predefined templates that you can use as a shortcut for creating your new pages. Even if the templates don’t match precisely what you’re aiming for, they can provide you with a good starting point. (Hey, anything’s better than staring at a blank page, right?) Also, as Kate will explain in Chapter 12, you can create your own dynamic web templates to automate and optimize the process of building out all the detail pages in a complicated website. The process for starting a new page based on a template is about the same whether you’re using a template that came with FrontPage or a custom template you made yourself. To start a new page based on a template, select File ➔ New and choose Page Templates in the Task pane. The

Figure 6.2 You can save steps by basing a new web page on an existing web page. Use the New From Existing Page window to select the desired page.

108 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Page Templates dialog box opens, offering a number of available templates organized into multiple tabs (see Figure 6.3). The web page templates provided by FrontPage are listed in the General tab: Normal Page A normal page is just like it sounds, a blank or basic page. Bibliography A bibliography web page is a simple format for listing books and other research resources. Confirmation Form A confirmation form is the kind of page that shows up to tell you when you’ve successfully submitted data to a form. Frequently Asked Questions Most mature online resources accumulate answers to some frequently asked questions (FAQs) over time, giving readers a good place to start when looking for help. Feedback Form One of the most common types of forms, a feedback form solicits commentary from your readers. Form Page Wizard The Form Page Wizard template helps you assemble one of many common kinds of forms by choosing from a series of predefined options. Guest Book Personal sites often have a guest book page where readers can drop by, leave comments, and read greetings from other visitors. Figure 6.3 Choose a template for your new web page.

Photo Gallery The Photo Gallery template makes it easy to display a set of photos in navigable format (as discussed in Chapter 9, “Working with Graphics”). User Registration If your site requires users to sign up or join before participating in discussions or getting access to private or secure areas, you need to offer a registration form to enable users to sign up or apply to join. Search Page Some web users like browsing and navigating through menus, but many prefer to search for content directly. If your site is at all complex, you should offer a search option. Table of Contents Another way to offer easy access to an entire site or to a section of a site is with a table of contents page.

HANDS ON: BUILDING A NEW PAGE WITH THE HELP OF A WIZARD ■

109

The My Templates tab is where any custom templates you may create will appear. However, this list is seeded with two additional predefined templates to get you started: • Standard Page • Contact-Type Pages The Frames Pages tab makes it easy to build pages structured with frames to contain multiple content areas, as discussed in Chapter 7, “Working Through Page Layout.” The Style Sheets tab offers a set of Cascading Style Sheets (CSS), most of which are associated with design themes that ship with FrontPage. I’ll explain how to create and attach style sheets later in this chapter. If you have access to a Windows SharePoint Services server, you have additional templates and wizards that tap into some of the document- and list-sharing features of SharePoint.

Choose the template you want to start from and click OK. In the future, any template you’ve used will appear on a short list in the Task pane to make it easier for you to select it again.

Hands On: Building a New Page with the Help of a Wizard Mixed in with the templates are little interactive template builders called wizards. Wizards have a little bit of code in them that creates a website based on the answers you give to an interactive questionnaire. You answer the questions or choose from the options provided, and a custom page is built for you. For example, try creating a form page using the Form Page Wizard. To do so, follow these steps: 1. Select File ➔ New. 2. Choose More Page Templates from the Task pane (see Figure 6.4). If you’ve used the same template recently, you can choose that template name directly from the Task pane as FrontPage tries to learn your habits.

3. In the General tab of the Page Templates dialog box (illustrated in Figure 6.5), select Form Page Wizard. 4. Click OK.

Figure 6.4 Select More Page Templates from the Task pane to get started creating your form page.

110 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Figure 6.5 The Form Page Wizard helps you get organized and plan a form.

5. Read the instructions in the Form Page Wizard and click the Next button (see Figure 6.6). 6. Your new form doesn’t have any questions yet, so in the next wizard screen (see Figure 6.7), click Add to begin adding questions. 7. For each question on the form, you’re asked to choose a type of information for the question; start with Contact Information. You’ll see a generic default prompt: “Please provide the following contact information.” You’ll probably want to change this prompt to something more suitable to your particular website. For example, on the Artisan Heirloom’s Seed Company site, you might use a prompt like the one shown in Figure 6.8.

Figure 6.6

Figure 6.7

Figure 6.8

Wizards walk you through a series of steps to create a web page.

Build your form by adding questions to it using the Form Page Wizard.

Change the default prompt to something that applies to your particular website.

HANDS ON: BUILDING A NEW PAGE WITH THE HELP OF A WIZARD ■

8. Next, choose which variables (blanks to fill in) to use with this category of information. Note the example in Figure 6.9. This form is looking for more personal information than business information, but it gives the user a way to provide their e-mail address and web address. 9. Click Next and then repeat steps 6 through 8 for each category of information on your form. For the seed company site, the user has the chance to register or log in and to choose a product to discuss or give feedback on. You can create an order form at this point, or you can gather more personal information from your users. 10. Click Next and choose from among the offered presentation options (see Figure 6.10). 11. Click Next and in the Output Options window (see Figure 6.11), choose from among the output options (web page, text file, or custom CGI script). Also in this window, assign a filename for the results file; its extension depends on the desired file format: .htm, .txt, or .cgi.

12. Click Next. 13. Click Finish. FrontPage creates the form to your specifications, but you’re still left with a fairly generic page, as you can see in Figure 6.12. You need to style this page and customize the boilerplate text that introduces each section. You also need to change any placeholder information in the form elements with the correct information for your site (such as seed product names for the Artisan’s Heirloom Seed Company site), as shown in Figure 6.13.

Figure 6.9

Figure 6.10

Figure 6.11

The Artisan’s Heirloom Seed Company website needs a few basic facts.

This form is going for an informal style, but your business needs may differ.

In this example, the form results file will output to a web page with a filename of completedform.htm.

111

112 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Figure 6.12 A generic form requesting user contact information

Figure 6.13 The form needs a lot of detail and personalization before it’s ready for your users.

SETTING UP YOUR NEW PAGE ■

113

Setting Up Your New Page Now you’ve started your new blank page (or you’ve based one on an existing page or on a template). Before you get into the nitty gritty of page layout and the insertion of content, take a few moments to get your page set up with some basic information such as its title and default layout.

Title and Metadata Most of the information in a web page appears in the BODY section of the HTML file. The BODY portion of an HTML document is where the content and objects that will be displayed are marked up. In the HEAD portion of the document, there must be a title; you can also add other information and instructions for metadata, scripting, and style in the HEAD section. Pretty much anything that gets displayed in the web browser window has to be mentioned in the BODY section. The contents of the HEAD section can be useful to indexing robots and other software agents that read web pages. One piece of information about the page (or information about information, also known as metadata) that is displayed is the web page’s title. It doesn’t appear in the browser window; it usually shows up in the title bar of the web browser. (An HTML document must have a title element specified in order to validate.) Also, when someone bookmarks the web page, most web browsers will grab the title as the default name for the bookmark. Whether or not a page validates means that the page contains valid markup. Validating a page means making sure that the markup used in the page (HTML and CSS) is “valid” according to the specification, and that a well-designed web browser or other user agent should be able to read and render the page. The validation is usually done by entering the URL into a website validator. People often have badges on their pages asserting that their pages contain valid

Figure 6.14

CSS, valid XHTML, and so on, with a link to the validator in case anyone wants to check.

All web pages need a title. Metadata is optional.

To fill in a title and some optional metadata for your new web page, take the following steps: 1. Select File ➔ Properties. In the Page Properties dialog box, choose the General tab (if it’s not already the one in front). 2. Enter a title for your page in the Title text box and list any keywords you want to include in the metadata text box (see Figure 6.14).

114 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

3. Click the Language tab. Make sure the web page indicates the language that you’re writing in. For many readers of this book, that will be U.S. English or another dialect of English. But remember, it’s the World Wide Web; you can’t assume anything about the language used in any given page if it isn’t specified. If you’re working on a website with localized versions for different language speakers, here’s where you can indicate the local language of each specific page. 4. When you’re done, click OK. You can also choose the form of HTML encoding to use at your site on the Language tab. The Web Standards Project has a great overview of this complicated issue at www.webstandards .org/learn/askw3c/dec2002.html. This site explains that ideally your server should specify the character encoding and allow it to be overridden by the user-agent. However, if you have no way to ensure that this is done correctly, you can indicate the character encoding in the META element of the HEAD section of your web documents.

Appearance If your new page is based on an existing page or on a template, or if you’ve chosen a theme for your entire site, then many of the appearance settings for the page are preset based on the source file or theme. However, if this is not the case, or if you wish to override the default look and feel for your site on this one page, then you can choose different colors, page margins, body text style, and hyperlink rollover effects.

THE USES AND ABUSES OF METADATA Use metadata to track information about your web documents that is not already described by existing content, markup, or file information such as last-modified date. You can categorize your documents, track authorship, and attach comments, subtitles, and any other data want to search, sort, or build applications on. There is a standard way to represent keywords in HTML metadata. The syntax is . But unless these keywords are targeted to a specific search application, they tend to be useless, especially on the Web at large, where the abuse of meta keywords in escalating efforts to game the search engines has led to their being ignored. Invest your wordsmithing efforts in creating an informative title for your HTML document.

SETTING UP YOUR NEW PAGE ■

Choosing Colors To choose colors for your page, choose File ➔ Properties and in the Page Properties dialog box, select the Formatting tab. Choose a background color or image for the page (see Figure 6.15) and then click OK. You can also designate a color for the text on your web page and designate colors for hyperlinks, visited hyperlinks, and active hyperlinks. A watermark is a Microsoft-specific form of background image that scrolls with the page.

If your web has a theme applied already, then you won’t be able to change these settings without first removing the theme from this page. Applying themes at the website level was described in Chapter 4, “Defining Your Website.” Working with themes on the page level is discussed in the next section.

Base Styles for the Document Body With CSS 1.0 or any later version of CSS, you can apply a default font (typeface) and formatting settings for the text in your page. These settings are assigned to the tag, so they apply by default to any text that is not otherwise styled. Any style associated with a tag inside the BODY section of the document (such as a paragraph or heading tag) will override this default base style. In the Advanced tab of the Page Properties dialog box (see Figure 6.16), you can choose or create a base style by clicking the Body Style button in the Styles area. (I’ll explain how to work with styles later in this chapter).

Figure 6.15

Figure 6.16

Choose your page background and colors in the Formatting tab.

Set a default body style for your web page in the Advanced tab of the Page Properties dialog box.

115

116 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

FrontPage also offers some margin-setting options in this same Advanced tab of the Page Properties dialog box, but the best way to set page margins is using CSS. Using the Internet Explorer–specific margin settings can cause problems with other browsers. If you know that 100 percent of your audience uses Internet Explorer (IE) and you’re in a hurry, you’ll find it faster to set these nonstandard margins here, because FrontPage doesn’t Figure 6.17

offer any assistance or shortcuts for editing the

In the Font dialog box, choose how you want the hyperlink to look when the mouse pointer hovers over it.

body style in a Cascading Style Sheet. It’s not too hard to set margins this way, but you need to be comfortable editing CSS directly, because there is no dialog box where you can choose such things. To specify nonstandard margins, in the Advanced tab of the Page Properties dialog box (see Figure 6.16), enter the margin measurements you want in pixels. You may want to preview various margin widths to see what works for you. Screen real estate is precious, so margins should be less than 20 pixels on the left and right and less than 10 pixels at the top. Percentage margins are usually under 20 percent.

Hyperlink Rollover Effects Unless otherwise specified, hyperlinks are underlined, given a default color by the displaying browser, and often a different color when being clicked or if visited already. Using CSS, you can establish different formatting styles for hyperlinks, including rollover behaviors, which are changes of appearance that occur when the user hovers the mouse pointer over the hyperlink or clicks it. (See Chapter 10, “Inserting and Maintaining Hyperlinks,” for a thorough discussion of hyperlinks). The rollover effect is very popular on the Web these days. It provides a little flash without the tackiness of blinking text and other abominations. I’d recommend against a rollover effect that changes the typeface (font) or weight (boldness) of the text, since this often forces the paragraph to re-rag itself every time the mouse hovers or moves off from the link.

To choose hyperlink rollover effects, go to the Advanced tab of the Page Properties dialog box (see Figure 6.16, shown earlier) and follow these steps: 1. Click the Enable Hyperlink Rollover Effects check box. 2. Then click the Rollover Style button. The Font dialog box opens (see Figure 6.17).

APPLYING THEMES ■

117

3. Choose the Character (font) formatting to apply to hovered-over hyperlinks. For a more complete explanation of how to work with styles to customize the appearance of hyperlinks when clicked or hovered over, see the CSS section of this chapter.

Applying Themes As discussed in Chapter 4, FrontPage offers themes as a tool to automatically apply the same formatting to every page in a given website. Starting with FrontPage 2003, themes are now completely based on CSS, which makes them easier to manipulate and modify. (I’ll discuss working with CSS directly in the next section.)

Applying a Theme to the Current Web Page To apply a theme to the page you’re currently working on, take these steps: 1. Make sure the page is open in Design view and then select Format ➔ Theme. The available themes appear in the Task pane. 2. Scroll down through the list and view the thumbnail image examples to get an idea of how the various themes will look. 3. Click any theme to apply it to the current page (see Figure 6.18). FrontPage immediately updates the look and feel of the page, so you can see if you like the way the theme plays out in your own page. If you don’t like it, just click a different theme to change it. Figure 6.18 Apply a CSS theme with one click.

118 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

If your web page has a default theme already applied (as discussed in Chapter 4), then the application of a different theme to this single page overrides that default theme. This means, for instance, that if you later modify the theme for the whole website, this page will not be affected by that change. As mentioned in Chapter 4, remember that each of these themes can be applied with several variations in colors and graphics: Vivid colors Click this if you wish to use bold, bright colors instead of normal colors. Active graphics Click this if you want to use a livelier version of graphical elements in the theme’s application. Background picture Most themes use a background image, so this option is checked by default. Click to uncheck this box if you prefer to apply your theme without the included background picture.

Applying a Theme to Multiple Web Pages Applying a theme to multiple pages is also very easy. Follow these steps: 1. Switch to Folder view and make a multiple selection (hold down the Ctrl key as you click each file you want to change). 2. Select Format ➔ Theme and choose the theme you want to apply. You won’t see the effect immediately, of course, because you won’t be viewing any single page in Design view. Open the specific pages to see how applying the theme has affected their appearance.

Working with Style Sheets Cascading Style Sheets were introduced to enable web developers to separate structure from presentation. To understand the concept of structure, bear in mind that HTML was originally a very simple language for managing text content and hyperlinks at a basic level. HTML was never intended to be the de facto language of design. Headers, paragraphs, lists, and the necessary skeleton of a document such as html, head, title, and body tags define the primary structural elements of HTML. As soon as the Web became available through graphical browsers, browser developers began to add presentation elements and attributes to HTML. This was quite innovative, because now web designers could add fonts, colors, backgrounds, margins, tables, frames, and so on. But after a while, it became clear that the presentation elements and attributes were cluttering up documents (a phenomenon now called tag soup), nested tables were rendering and accessibility nightmares, and the layout and design options were quite limited.

WORKING WITH STYLE SHEETS ■

CSS was introduced in 1996 as a means of providing advanced presentation without having to clutter pages with the restrictive markup practices in use. CSS offers the following advantages: • It gives web designers more control over layout, font, color, and measurement units. • It offers a means of addressing accessibility concerns. • It enables web designers to work more efficiently, saving time, money, and frustration. • It allows web designers to offer alternative designs for alternative media such as browsers, wireless devices, projection screens, and even print media. • It enables pages to be more lean (with the presentation information abstracted out into a single common reference file) and thus load faster when served. Unfortunately, browser support has taken a long time to come to fruition, and only recently have you been able to incorporate most of CSS into your designs. But even with these advances, many web designers who use the “tag soup” method end up either shoehorning their content into those formats or using work-around tricks to force the HTML pages to appear as they want. Most of these tricks depend on the quirks or arbitrary settings of early web browsers. Worse, they involve hopelessly entangling the substance of the web pages, their content and structure, with their appearance. With the use of CSS, any element for your web documents can be defined in terms of appearance (typeface, colors, alignment, block positioning, and so on). The HTML pages themselves can be authored in a streamlined fashion, containing just the content, the necessary structural HTML tags, and, where necessary, names, classes, styles, or IDs that specify which style to apply. With CSS, you can also specify styles inline (referred to as inline style), but this doesn’t really help disentangle the content from the presentation. Inline styles should really be reserved for situations that require overriding the default styles.

In fact, styles can be defined in the HEAD section of a single web page (known as embedded style). However, if a style is to be available to all the pages in your site (or all the pages of some particular type or in some specific section of your site), it makes more sense to create an external, stand-alone style sheet (referred to as a linked style) and attach it to any or all of the pages to which it will apply. See Chapter 7 to learn more about Cascading Style Sheets.

119

120 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Figure 6.19 Make sure CSS is enabled for your web page in the Authoring tab.

Enabling Style Sheets If you wish to use style sheets for your page design, and I recommend that you do so, you first need to enable CSS by checking FrontPage’s compatibility sections. This is because earlier browsers did not support CSS. If you must make your pages work perfectly in those earlier browsers, FrontPage will disable its CSS features so you are not tempted to use techniques that will let you down in practice. To make sure CSS is enabled, select Tools ➔ Page Options and in the Page Options dialog box, go to the Authoring tab (see Figure 6.19). The first version of CSS, 1.0, primarily governed text-formatting options. CSS 2.0 introduced block-positioning features. CSS 2.0 is very powerful, but it’s more difficult to master as a method for page layout. Many web designers use a mix of techniques, using CSS layout where feasible and relying on the old standby of web design—tables—to get some jobs done. Standards gurus have blessed this approach, calling it acceptable transitional design. When you’ve made sure that both CSS settings are checked in the Authoring tab, click OK.

Creating Embedded Styles To create a new style on the fly, even without an external style sheet, select Format ➔ Style. The Style dialog box appears (see Figure 6.20). You have the choice of customizing a standard HTML element or creating a new style class that can be applied to any HTML tag, as needed. Once you choose between user-defined (the New button) and HTML (the Modify button, after first highlighting the style you want to change in the Styles list box; you may have to scroll), you end up at either the New Style or Modify Style dialog box (see Figure 6.21). Figure 6.20 Customize a default HTML tag or invent a new style in the Style dialog box.

WORKING WITH STYLE SHEETS ■

121

Either way, the steps for specifying the style are the same: 1. In the Style Type drop-down list, select Paragraph or Character formatting. (This is actually a Microsoft Office distinction that isn’t native to CSS, but it helps FrontPage and other Office applications display your style correctly.) 2. Choose a type of formatting from the Format drop-down menu. 3. Select the formatting attributes you want for your style. 4. Click OK. 5. Repeat steps 2 through 4 as needed. 6. Click OK. If you style a specific HTML element, that style will be applied automatically any time one of those tags appears. To apply a user-defined style, follow these steps: 1. Make a selection. 2. Choose the style you want to apply to the selection from the Styles toolbar.

Creating External Cascading Style Sheets As I just discussed, if you want to make your style sheets go further, it makes more sense to create them in an external CSS file and then attach that file to any web page where you want those styles available. Using one style sheet to style any number of documents makes your style updates a breeze: Change one file and the rest work. First, create the new style sheet. Then edit it to define your own desired styles. Finally, attach the style sheet to one or more web pages. (The correct technical jargon for attaching a stylesheet is “integrating it with the document,” but it is also informally referred to at times as applying, assigning, or linking the style sheet to a page.)

Figure 6.21 The New Style and Modify Style dialog boxes are very similar.

122 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Making a Style Sheet Chapter 7 includes a detailed look at the process of creating an external style sheet. Here’s a quick preview. To make a new style sheet, select File ➔ New and choose Page Templates. In the Page Templates dialog box, choose the Style Sheets tab (see Figure 6.22). Unless you want to base the new style sheet on an existing style sheet, choose Normal Style Sheet. Otherwise, choose the base style sheet that’s closest to what you have in mind for your new style sheet and click OK. You can flip through the previews to see the designs that are available. You’ll find that, in general, they lean toward pastel and inoffensive, but they rarely show much design flair or the high-production value tricks (shines ’n’ shadows) that experienced designers used to signal the attention to detail in their work. But what do you expect for free?

Editing a Style Sheet You can now edit your new style sheet to define the styles in it: 1. If you’re returning to edit a style sheet that you created earlier, choose View ➔ Folders and double-click the CSS file to open it. 2. To start creating styles, choose Format ➔ Style. The Style dialog box opens (see Figure 6.23). If you’re familiar with CSS syntax, you can also edit the CSS file directly in Code view.

3. To add a new style, click the New button. The New Style dialog box opens (see Figure 6.24). Figure 6.22 To make a new style sheet, start with the Normal Style Sheet template or base the new style sheet on an existing one.

WORKING WITH STYLE SHEETS ■

123

The process is the same as for creating embedded styles, as discussed earlier in this section: 1. In the Style dialog box, choose to modify an existing HTML element or create a user-defined style. If HTML, choose a tag and click the Modify button. If user-created, click the New button. 2. In the Style Type drop-down list, indicate whether your style applies to paragraphs or characters. 3. In the Format drop-down menu, choose Font to select a typeface. CSS permits you to assign a list of fonts in descending order of preference to each style, but FrontPage doesn’t offer any way to select more than one font. If you want to assign multiple fonts to a style (this is so the browser can select the first available font on a given system when displaying the style), you need to edit the CSS file directly. Add a comma before each new font name and make sure the line still ends with a semicolon. You need to enclose the font name in quotation marks only if it consists of two or more words, that is, if it contains one or more spaces within its name such as Times New Roman.

Figure 6.23 Define or edit styles with the Style dialog box.

4. Choose Paragraph in the Format drop-down menu to assign paragraph formatting. 5. Apply Border formatting (optional). 6. Apply Numbering formatting (optional). 7. Choose Position to assign absolute or relative positioning values to the style. 8. When you’re done, click OK.

Figure 6.24 Define a new style in the New Style dialog box.

Applying a Cascading Style Sheet To apply a Cascading Style Sheet to the current page or to all of the pages in your site, select Format ➔ Style Sheet Links. This brings up the Link Style Sheet dialog box (see Figure 6.25). 1. Choose or browse to the desired style sheet. 2. If you want to apply the style sheet to all your pages in one fell swoop, click All Pages. 3. Click Add.

Figure 6.25 Attach style sheets to your document (or to a template) with the Link Style Sheet dialog box.

124 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

DEFINING A FONT LIST The primary distinction for most font types is between serif and sans serif fonts. Serif fonts such as Times New Roman have small horizontal lines on many letters. Sans serif fonts such as Arial or Helvetica have no horizontal lines. You should keep track of which fonts you like to use for display copy (larger, shorter segments of type, as in headlines) and what you like to use for running copy. There are fads online, and you might at times want to buck them or stick with them. Popular fonts such as Georgia and even the ubiquitous Arial are popular because they work well in a lot of circumstances and a lot of people find them easy to read if large enough (or resizable). A font list, therefore, might look something like the following: “Hoefler Text”, Georgia, Garamond, “Times New Roman”, serif or Verdana, Arial, Helvetica, Geneva, sans-serif

4. Repeat this process if you want to assign further style sheets to this page (or to the whole site). For example, sometimes you’ll have a master style sheet with basic formatting options that gets applied to most or all of the pages at a site. Or you may have some more specific style sheets designed for certain types of page or for subsections of your site. 5. When you’re done, click OK. Some browsers cache the style sheet for a page and then refuse to reload it until you clear the cache. This can be confusing when you’re editing the style sheet for a site and trying to preview the changes in a browser. It may appear that your changes have had no effect when in fact the updated style sheet is simply not being retrieved by the browser. (For example, Internet Explorer 5.1 for the Mac has this problem.)

Adding a Page Transition One last feature that you might want to add to your new web page is a transition. Transitions are visual effects that are displayed when entering or leaving a web page or site; they’re used to animate the change from the old page to the new one. Most of them are based on familiar TV and movie wipes.

ADDING A PAGE TRANSITION ■

125

Page transitions are not widely used on the Web. The transitions that FrontPage offers depend upon your having Internet Information Services (IIS) as your web server. Even so, they only work with the Microsoft Internet Explorer browser. Transitions are generally viewed as amateurish and should not be used for business or informational sites. They’re more suitable for hobbyists having fun.

To apply a page transition, take these steps: 1. Select Format ➔ Page Transitions. The Page Transitions dialog box opens (see Figure 6.26). 2. Choose the event that will trigger the transition from the Event dropdown menu. The choices are • Page Enter • Page Exit • Site Enter • Site Exit 3. Choose from the list of options under Transition Effect. The choices include • No Effect • Blend • Box In And Out • Circle In And Out • Wipe Up, Wipe Down, Wipe Right, and Wipe Left • Vertical Blinds and Horizontal Blinds • Checkerboard Across and Checkerboard Down • Random Dissolve • Split Vertical, Split Horizontal, Split In, and Split Out • Strips Left, Strips Right, Strips Down, and Strips Up • Random Bars, Horizontal Bars, and Vertical Bars • Random (totally random) 4. Finally, specify a duration for the transition (how long it should take). The default is 1.0 seconds, which is a hint that you can specify the duration down to the tenth of a second. 5. When you’re done, click OK.

Figure 6.26 Unless you’re just planning to amuse your friends and family, resist any temptation to use these page transitions!

126 ■ C H A P T E R 6 : C R E A T I N G A N E W W E B P A G E

Doing Page Layout Now you know how to create new pages and how to set them up. The next step in web page development is to apply the site’s design to your page in terms of its layout. Will there be a banner at the top of the page? A logo? What sort of grid will you use to lay out the other elements on the page? Will there be two columns? Three? For a guide to the page layout process, turn to Chapter 7.

CHAPTER 7

Working Through Page Layout KATE J. CHASE

The layout and content formatting decisions you make in designing your web page will determine how your page and the individual items you place on it will look when your site is published. Unless you carefully use the tools that FrontPage provides, you’re at the mercy of what the authoring software tries to design for you, and you’re unlikely to be thrilled with the results. This chapter zeroes in on tools such as tables (they’re not just for reporting figures), frames, and Cascading Style Sheets that help you nail down the best layout for your site. This chapter covers the following topics: ■

Fine-tuning a predefined layout or theme

■

Page layout based on tables

■

Page layout with Cascading Style Sheets

■

Page layout through the use of frames

■

Troubleshooting common issues with frames

128 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Test, Learn, and Enjoy Before launching into the subject at hand, I want to offer you this sage piece of advice: Plan to experiment—a lot—and don’t be afraid of early failures. Most of us have designed, redesigned, and re-redesigned a web page any number of times before we felt we had it just right. Often enough, the layout we end up liking isn’t the great layout we first expected to use. While for many types of sites, designing may seem like just business, it’s actually quite a creative process, and one in which you can learn a tremendous amount and have some fun at the same time. The end result should always be a site and content that you can be proud to call your own, even if you’re executing the work for someone else. Yet with this advice comes a caution: Once you have a working layout in place that deftly presents your content, keep a copy of your work saved away from continuing experimentation. A colleague of mine, after literally years of thinking about creating her own site, decided finally to bite the bullet, install FrontPage, and develop a website to offer support and information for a new type of portable computer that she really loved. She toiled for long hours over many days to get her layout and content just right. When she published it, she had one of those rare overnight success stories where her site was picked up and promoted not just by the manufacturers of that product, but by other venues as well. Within a few weeks, she was cresting that vaulted one-million-hit mark. Traffic was increasing almost every day, and other sites were coming to her, asking to use some of her material. Then one night she decided to make some changes to her site that she felt would punch up her layout and content. The only problem was, her entire site became a mess—and a literal mess, too, because some of her pages became almost unreadable. Her only working copy was ruined, and because she had already published “the mess,” there was no good copy of her pages she could import back into FrontPage from her website. Through fevered effort—mostly trial-and-error—she managed to locate the source of the problem and restore her site over a long holiday weekend. Yet it bothered her enormously that thousands of people visited over that weekend to witness the mess before she could repair it. But it taught her a valuable lesson: Keep a safe working copy of your site and experiment on the side. You can always create a second website (using the File ➔ New ➔ Empty Web option) and import a copy of your working website into it. That way you can test your ideas without risking the good work that you’ve already done. And now, on with our regularly scheduled page layout discussion, already in progress…

SELECTING AND FINE-TUNING A PREDEFINED LAYOUT OR THEME ■

Selecting and Fine-Tuning a Predefined Layout or Theme Chapter 4, “Defining Your Website,” explained how to get started with a predefined theme. Now it’s time to apply what you learned to a website—or to an individual web page—and begin to fine-tune the templates and themes that FrontPage has given you. You can take whatever end result FrontPage spits out through these automated tools and make your own customized changes. Besides customizing a predefined theme as explained in Chapter 4, you can • Add tables to an existing page template or incorporate them into style sheets. • Use page templates from one type of predefined web template and customize them to place in another template. • Use themes with both frames and Cascading Style Sheets. • Use the code from a predefined page template layout and mix it into a style sheet or customize its layout through the use of tables. Here’s just one example: At least one of the web templates provided by FrontPage gives you a photo gallery option that provides a nice thumbnail view of pictures in a collection and room to write a bit of text next to each picture. You can either create your own photo gallery from scratch or modify this template by taking these steps: 1. From your web page, choose Insert ➔ Web Components. 2. In the Insert Web Components window (Figure 7.1), choose Photo Gallery. 3. Choose the gallery style option you want. In this case, select the Vertical Layout (the fourth option) because it’s the one the Artisan’s Heirloom Seed Company thinks works best to display some of their products. 4. Click Finish. Once you reach this point, you are prompted to add the photos you want to include in the gallery. I’ve used the seed company’s images of prize-winning sunflowers, tomatoes, and so on,

Figure 7.1

taken from its files, but I could also acquire them directly through my connected digital camera

Choosing a photo gallery style

or scanner. If I click in the Caption text box, I can type a short caption for each image (such as name of the plant). If I click in the description, I can add information to flesh out what’s already contained in the caption such as more details about the seed line. In the same Photo Gallery Properties window where you add the photos, select the Layout tab. Here, FrontPage allows you to change the layout choice you made in step 2 of the photo gallery setup. But, more importantly, it offers a better look at what the destination layout will be than the earlier, smaller window view. Note that both the Horizontal Layout and the Vertical Layout allow you to specify the number of images per row that’s displayed.

129

130 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Because of the nature of the seed company site and the desire to have a nice container for the text that will accompany each image for a “bestseller” gallery, I’ll proceed with the Vertical Layout. For possible additional galleries on the same site, I might use • Horizontal Layout as a suitable alternative to the Vertical Layout. • Montage Layout for a montage effect. For example, one montage might contain images collected from seed company customers of the award-winning and bounteous results they got from their seeds. Another montage might display photographs of the seed company’s farm and operation. • Slideshow Layout to document the life cycle of a particularly glorious plant from planting to full bloom. (After all, reading about seeds may not always grab a customer, but once that customer can picture the results, they may order seeds.) The Slideshow Layout could also use photographs of customer service employees at the company telling customers about their own personal favorites.

SMART LAYOUT ALTERNATIVE I’m taking the time to document the Vertical Layout available in FrontPage for a photo gallery because such a gallery is a smart way to package a group of images that you might otherwise struggle to fit around the text and featured content in your normal layout. This layout provides a nice counterpoint to a formalized layout scheme, especially one in which limited artwork appears. A nice plus here is that by confining it to this type of collection rather than spilling it out over numerous pages here and there, you focus the visitors’ attention and only those who want to view it will click to do so. However, don’t approach a photo gallery as a catch-all basket but rather as a targeted campaign of sorts. Implemented well, a photo gallery helps a potential customer visualize a product or service and how they may benefit from it, who the people they “visit” are, or the results you have experienced. Of course, you’re not limited to photographs. You can use graphics of any kind—sketches, scanned documents, screenshots from work within software, to name just a few, so long as they’re stored in a recognized web graphic format. Make sure that the size (or the overall size of the collection) does not present a serious impediment to users who may connect to the site using slower access methods. As a web designer, you could employ a gallery to show thumbnails of screenshots of clients’ sites you’ve designed. When a visitor clicks a thumbnail, the whole page or feature displays to showcase your work. Others have used a series of gallery pages to catalog a portfolio of work such as sculpture, with text that explains each piece, what awards it may have won, and in which physical galleries or museums it may have been shown. This involves creating a master collection page that offers links to individual gallery collections beneath. Many news sites use such galleries to display numerous photographs from specific events. Chapter 9, “Working with Graphics,” describes working with a photo gallery in more detail.

SELECTING AND FINE-TUNING A PREDEFINED LAYOUT OR THEME ■

131

With the images added, the layout as devised appears in FrontPage’s Design view. I added a fixed banner across the top announcing what the gallery shows. I also changed my image descriptions to include hyperlinks to the seed product numbers so that visitors can simply click to get to the information page for that seed product. The result appears in Figure 7.2. Want to know how FrontPage themes are constructed so you can choose your own theme elements and fully customize your design? The Microsoft Office website tells you how, in the column by Mary Burk found at http://microsoftoffice.com/assistance/2002/articles/ fpDesignThemes.aspx.

If you’re looking for a recurring layout you can use, where certain elements always stay the same, create your own template (or modify an existing one), as shown in Figure 7.3. Then you can customize it as desired and save it in template format so you can reuse it without having to learn enough HTML and Cascading Style Sheet elements to do this without help from an existing template. You can also turn an existing page into a template by choosing File ➔ Save As ➔ FrontPage Template. Figure 7.2 Photo gallery layout for the sample seed site

132 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Figure 7.3 Use existing templates as your model and then create your own templates.

Page Layout with Tables As you work with FrontPage, you may be frustrated to find that the image you want to place on a page just doesn’t appear exactly where you want. Or you might find yourself fighting with the application to place a caption directly below an image or add text directly next to an image, only to find FrontPage placing it somewhere else or doing odd readjustments to your best efforts. If you want an example of this, try opening a blank web page and inserting a graphic on the left side of the page. Now begin typing text directly to its right. You’ll find that the first line indeed appears to the right of the image, but any additional text beyond that line wraps itself under the image and continues downward. If you’re working with a small image and little text, that’s cool. But if your image is two, three, or more inches tall and you want to use that white space to the right of it for your text, you may go nuts before you accomplish this without pulling out a few time-honored tricks rather than your hair.

PAGE LAYOUT WITH TABLES ■

133

Using tables is one critical way in which you can reassert control over your web page layout to achieve the exact appearance you want. For instance, using the example just mentioned, creating a table would easily let you position the image to the left and the text to the right. Since FrontPage first debuted (and in its early days, it was far more likely to try to format your pages almost against your best intentions), one of the most common ways people have tried to control the formatting and layout of their websites is through the use of tables. While many of you are familiar with the standard tables you see in documents and on web pages laying out statistics or comparison data in a neat, organized fashion, it’s important to realize that a table in page layout doesn’t have to look like a table at all. What they share in common are the cells that make up a table. While a standard table may have bits of data or symbols and explanations in each cell, page layout tables allow you to use the table cells to store text or graphics or both. This makes it a tool you can use that can look largely invisible to your visitors except that they may be impressed by your crisp, controlled layout. In fact, if you look at some of the web and page templates packed into FrontPage, you’ll discover that they’re largely based on table layout. Just about any page layout there that exceeds one single column is table-based, such as the example in Figure 7.4. Right-click one of the box-like areas (table cells), and you’ll notice you can edit Table Properties as an option on the pop-up menu. Be prepared to spend a bit of time practicing with tables until you understand the cause-and-effect and what you can and cannot do. Figure 7.4 You can modify a table-based page layout using the Table Properties option.

134 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Issues Surrounding the Use of Tables for Layout The use of tables for page layout is an easy and popular choice for new web designers, because it’s relatively fast to construct tables and pop content into their cells. The results can look incredibly crisp and well contained for the time involved to handle layout in this manner. However, while the message here isn’t “don’t ever use tables,” there are some issues that you must consider related to their application on your site.

Size and Download Speed One important consideration is that the larger a table is, the longer it takes for a visitor’s browser to load it. Find a site with a large embedded table and unless you have fairly fast Internet access, you may see that other elements of that page load before the table itself. Thus, if the contents of your page are entirely contained within a large table, you may be taxing the patience of a visitor’s slower Internet connection speed if you’re creating a public page. For this reason, many public website designers using tables for layout prefer to design using two or three smaller tables per page instead of one large table. However, this raises another point. FrontPage supports the use of nested tables, which means a table can reside within a table. In such cases, smaller nested tables may actually appear before a browser draws the main table. Still, avoid using too many tables per page, particularly where you are embedding sizeable images within those tables, and especially if you’re already noticing that your pages take a long time to load.

The Wow Factor Another issue, which you’ll see raised again when I discuss the subject of frames and layout, is that the heavy use of tables as containers for your content can make it more difficult to get recognized by web search engines or to wow your site into a high position on a search engine’s query list. This has made many web designers experienced with HTML and Cascading Style Sheets jump to style sheets as a “better” solution. However, even without considering search-engine placement, CSS is widely considered to offer more authoritative control over positioning in page layout. Part of that control comes from the fact that CSS lets you manipulate pretty much everything, right down to the individual character used.

Accessibility Table-based layout is a bad choice when you’re trying to maximize a site’s accessibility, especially to those visitors who have visual or mobility impairments. Accessibility devices such as screen readers, for example, may not be able to interpret information contained within tables as accurately as information in a non-table layout.

PAGE LAYOUT WITH TABLES ■

Let’s look at an example. Suppose a table layout involves three columns going across the page and each column has its own unique content. Viewed in the way most people do, this should be a nice, neat presentation. But when an assistive technology device reads that same page, it may not understand that it needs to read down the first column. So it may read the first line of the first column and then jump to the first line of the second column. Or it may just tell the person using the device that it can’t understand what it’s supposed to do. Some of these same problems are also reported with some mobile devices used by the general public.

Is There Another Way? Table-based layout can be a decent choice for certain situations, for example, when you’re working with a group of people on a network-based website where accessibility won’t be an issue. You might also employ tables for special pages where you want a different layout than what appears on the rest of the site. But before you go this route reflexively, ask yourself, “Is there another way I can do this?” In most cases, the answer is that you can. For example, you can create columns (the effect of tables in layout) using Cascading Style Sheets. The DIVs you’ll learn about later in this chapter in the “Page Layout With Cascading Style Sheets” section can be positioned absolutely or floated across a page so that these columns have the appearance and function of regular layout tables but without the accessibility woes and other issues. You can set up images to display in a row across a browser page using this technique. In addition, Cascading Style Sheets permit you to do something with this positioning that a table would not normally allow: Wrap the contents of a row to the next line if needed because the visitor may have a truncated browser window. Thus, what’s involved for you to learn about style sheet setup may pay off in terms of better alternatives you can find to the easy-but-less-than-perfect tables and the frustrations of frames.

Search Engine Pickup If you’re going to want your site’s content picked up on global web search engines (and that applies to almost everyone except those working with company-only websites), table layout can pose special problems.

135

136 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Let’s look at a common two-column, three-cell table layout as shown in Figure 7.5 where • Cell 1 offers a menu of scheduled events. • Cell 2 is a blank cell (almost imperceptible) between the end of Cell 1 and the left border of Cell 3 that acts as a space buffer. • Cell 3 holds an image (the Blue Haven Commerce Coalition logo) and the text. The problem occurs in this kind of layout because most search engines “spider” your site to pull and list your content. They look first for the page title to display and then look for the first text content to plug into the search results entry. The search engines look at only the first 200 characters as they work. But the relevant information here doesn’t occur until Cell 3 and may lie past the 200-character limit used up by the menu items and dates in Cell 1. This can lead to an odd or missing result when someone tries to locate the important information in your site from a search engine. Also, some search engines look for structure too, so they are looking at h1 and h2 titles for context. Because the most obvious changes this layout will go through occur at the HTML level, let’s look at this table in Code view. The HTML to produce the web page in Figure 7.5 is shown in Listing 7.1. Figure 7.5 The cells of a twocolumn table layout

Cell 1

Cell 2

Cell 3

PAGE LAYOUT WITH TABLES ■

Listing 7.1 The HTML Code for Figure 7.5



BHCC Development Series

Upcoming Programs Small Business Risk Management January 30th Tax Savvy February 11th Special Incentives February 28th Business Networking March 7th Growing New Markets March 21st Take Your Business to the Web April 3rd

BHCC Welcomes You to its Business Development Series continued 137 138 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T continues At least twice each month, the Blue Haven Commerce Coalition sponsors a special program to help you grow your business and master new dimensions of it. For example, our January 19th program, "Understanding New State Retail Taxes", drew standing-room only attendance and offered a wealth of much-needed information to people doing business here in Blue Haven. These programs are available to BHCC members and non-members alike, although members have the first opportunities to register. Member program price is $185 for the entire year or $10 per program, while non-members pay $25.00 per program (in advance or at the registration table). To register, call BHCC at (845)555-9010.

Now, there are different ways you can approach this to resolve the difficulty (although it’s still not going to make your table layout friendlier to those with impairments). The most obvious approach would be to swap cells so that you have a mirror image of this layout where your menu is on the right; this is more unconventional but at least it gets your meaningful text into Cell 1. A better way may be to tweak the HTML code to shift the order of the page elements so that the main information is listed in the source code before navigation or in the current Cell 1’s menu items. This can be done by literally cutting and pasting material to shift it around in Code view. But that isn’t all you want to do. You want to add a miniscule, barely perceivable cell that becomes the new Cell 1. This Cell 1 will be the first to be read so that the search engine’s spider process leaps through it and Cell 2 (also bare), right to Cell 3 where your searchable content is located. This pushes the menu items into Cell 4. You can accomplish this by drawing a cell using the Table drawing pencil, but here it’s accomplished by simply typing in Code view to create a cell that almost isn’t. This produces a skeleton layout with cell numbers such as the one shown in Figure 7.6. Compare the first HTML (Listing 7.1) to the second (Listing 7.2), and you’ll see more than that I added a blank Cell 1. While Cell 3 remains the container for the content I want to have searched, I moved the HTML covering the menu items under “Upcoming Programs” to Cell 4, listed in the source below the content of Cell 3. Yet look at Figure 7.7, and you’ll see that the appearance of the layout has actually changed very little.

PAGE LAYOUT WITH TABLES ■

Figure 7.6 Layout of the table after modifying the HTML

Figure 7.7 Compare this to Figure 7.5; there’s little change. Invisible Cell 1

Cell 1

Cell 4

Cell 2

Cell 3

139

140 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

There’s another difference. The rowspan attribute has been added to specifications within the table cell assigning table width such as . The rowspan attribute allows you to designate the number of rows spanned by a cell. Similarly, the colspan attribute (not used here) lets you specify how many columns will be spanned by a cell. Listing 7.2 The HTML Code for Figure 7.7



BHCC Development Series



PAGE LAYOUT WITH TABLES ■

		BHCC Welcomes You to its Business Development Series At least twice each month, the Blue Haven Commerce Coalition sponsors a special program to help you grow your business and master new dimensions of it. For example, our January 19th program, "Understanding New State Retail Taxes", drew standing-room only attendance and offered a wealth of much-needed information to people doing business here in Blue Haven. These programs are available to BHCC members and non-members alike, although members have the first opportunities to register. Member program price is $185 for the entire year or $10 per program, while non-members pay $25.00 per program (in advance or at the registration table). To register, call BHCC at (845)555-9010.
Upcoming Programs Small Business Risk Management January 30th Tax Savvy February 11th Special Incentives February 28th Business Networking March 7th Growing New Markets March 21st Take Your Business to the Web April 3rd

This is one way to handle the tables vs. search engine issue, but there are many variations. Dive Into Accessibility’s site at http://diveintoaccessibility.org/day_10_presenting_ your_main_content_first.html gives you ideas for a modification on this technique that renders tables for better accessibility.

Creating a Table-Based Layout For those of you who want to proceed with the use of tables, let’s design a page layout through the use of tables so you can begin to experiment with your own. There are a couple of different ways you can handle this: through a model set up within FrontPage or by drawing your own. Of course, as you already saw when you read about tables and search engines, you can also add straight HTML to cover this.

141

142 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Figure 7.8 The Layout Tables and Cells task pane

To use the FrontPage tool to design a page layout using tables, take the following steps: 1. From a blank page, choose Table ➔ Layout Tables and Cells. 2. In the Layout Tables and Cells task pane (illustrated in Figure 7.8), select Choose Layout ➔ New Tables and Cells ➔ Insert Table Layout, which prefaces what you’ll do in step 3. 3. Under Table Properties, adjust the height and width as necessary. (For this example, leave it as is.) 4. Next, under Table Layout, click to select the thumbnail you want to use. The thumbnail opens in the main work window. Notice that you can also modify layout table properties in the task pane, including size and alignment, and see the results in the main FrontPage work window. In this instance, let’s use the layout just beneath No Layout. 5. To insert additional layout tables or cells, click the appropriate option in the task pane.

Drawing Your Own Tables But what if you don’t like the designated options for table-based page layout? You’ll begin by drawing one large table to represent the outside border of your web page. First, of course, you need to have an idea of how you want your web page to look. Then, to draw your tables, take the following steps: 1. From a blank web page, choose Table ➔ Draw Table, which opens the Tables toolbar.

PAGE LAYOUT WITH TABLES ■

143

Figure 7.9 Dragging the pencil cursor to define a pagesize table cell

2. Using the pencil your cursor changes into, click the upper-left corner of the blank web page and begin dragging downward and to the right, until you create the outside border

Figure 7.10

of your page (see Figure 7.9). If you make a mistake, simply delete the table you’ve cre-

Defining a table layout in the Table Properties window

ated, by choosing Edit ➔ Undo or using the Eraser icon on the Tables toolbar.

Modifying Your Layout Table Once the table is created, you can modify its attributes using Table Properties. Follow these steps: 1. Right-click within the table you created. 2. Choose Table Properties to display the window shown in Figure 7.10. 3. Make adjustments as desired to size, layout, borders, and background colors. Experiment with options to see what works best for your desired layout. In this example, let’s add a border with a size of 3 with a border color of dark blue, and adjust the background to pale gray. 4. Click Apply and then click OK.

144 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Nesting a Table Within Another Table What if you want to nest a table within this table? For example, a large table could contain a smaller table split into four cells, with each cell occupied by a thumbnail image. To do this, perform these steps: 1. With the page containing the initial table open in Design view, position the cursor where you want the nested table to reside. 2. In the FrontPage toolbar, click the Insert Table icon. 3. In the table grid, select the size of the table you want (1 × 1, 1 × 2, 3 × 3, and so on). For example, if you want the four-cell nested table discussed initially, choose 4 × 4. 4. Repeat as needed to nest additional tables within the main table. In the example shown in Figure 7.11, I’ve nested two tables within the major layout table, with the first table (a 1 × 1 table) acting as a banner or sub-banner, and a second table (1 × 3) listing entries designated by each column’s heading. Each nested table can have properties different from those of the main table (different colors, borders, and so on).

Page Layout with Cascading Style Sheets In Chapter 6, “Creating a New Web Page,” you learned a bit about Cascading Style Sheets (CSS) and how to apply them. Now let’s turn our attention to the use of CSS for page layout. Unlike some of the automated design tools explained in Chapter 4 and other tools for layout such as tables and frames discussed in this chapter, page layout with Cascading Style Sheets really demands some knowledge of and skill with CSS before you begin to design your site with style sheets. Those of you who already know a bit of HTML will find CSS easier to use than those of you who don’t, largely because it’s using code to establish the look and layout of a page. Style sheets can be very useful for laying out a highly customized page and for creating a standard style that applies design consistency throughout several pages or to a full website. And one huge advantage of using CSS is that you can create customized web page output for a number of different web-accessible devices besides a standard computer/browser, including specialized browsers and web reader tools such as TV-based web access, handheld devices, and teletype machines. Many web developers like CSS because they can take the same basic content but present it in many entirely different ways by applying different CSS styles. They also cite the fact that CSS offers enhanced sizing and measurement control over many aspects of design and page layout than HTML alone. In addition, unlike tables and frames, using CSS for layout makes it easier for your work to be picked up in web search engines because your pages are “cleaner” of the problems that can affect both search engines and assistive technology devices.

PAGE LAYOUT WITH CASCADING STYLE SHEETS ■

145

Figure 7.11 Each nested table can have its own unique properties, including color and size.

Finally, you can save some virtual real estate using CSS for page layout, because you create one style sheet to control everything and then link it with all the content on your site rather than create individual layout elements and attributes through the use of tables or frames for each page. However, there’s one caveat, even for those of you with experience using CSS elsewhere (since they’re not exclusive to FrontPage): You may not be able to get CSS-based layout to display through FrontPage websites exactly as it might in other programs or browsers. In various postings in technical message boards, users have discussed odd behaviors in layout and other issues with FrontPage that aren’t seen elsewhere (mostly created by the little extra formatting FP tries to toss in, they say). But most users indicate that you can reduce the problems through tweaking your CSS by checking out examples on other sites that implement similar features. Other users note that the problem isn’t so much with FrontPage itself but that FrontPage is more forgiving in allowing you to try to do something with CSS that some browsers won’t allow. For those of you unfamiliar with CSS, this section alone won’t be enough to get you up to speed; a strong analysis of and training in CSS is worth a whole book by itself. Try Cascading Style Sheets: The Designer’s Edge (Sybex, 2003) by Molly E. Holzschlag, who is also the technical editor for this book. What I can offer here is some fundamental information and some good hyperlinks to sites offering more advice.

146 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Building Your First Style Sheet for Layout Chapter 6 explained how to create a basic style sheet. If you haven’t done that, you’ll create one here as you build an example layout using CSS. Many CSS layout pages actually consist of two pages. One is like the basic style sheet, designated as an external style sheet, which sets the selections for styles to be applied to the font, size, and color for different level headings or normal vs. special paragraphs, for example, saved as a CSS file with the *.css file extension. The second page references that first style sheet, spells out the entire layout, and is saved as a web page. There are more than a few reasons why you have style and layout separated into two pages. An important one is that style is a very separate issue from layout and it makes sense to handle them individually, especially considering what a bear layout can sometimes be. Yet a key issue here is a problem rooted in Netscape 4 browsers (which, trust me, can still be found). Netscape 4 doesn’t “do” style sheets. When it encounters them, it can become quite confused and in worst-case scenarios, it can make the browser crash. To get beyond this, the “@import” hack was devised to allow a style sheet to be called by a web page. Because Netscape 4 doesn’t know what the heck “@import” means, it doesn’t exhibit the same misbehavior it does when it hits a style sheet under other conditions. Mind you, it still won’t use the style sheet so it delivers up the page as best it can with what it does understand or knows to do by default, but at least it doesn’t choke on it. Later, when you put this external style sheet together with your page, you’ll see the @import hack in action as in the code in Listing 7.3 (shown later in this chapter). Also, later in this book, such as in Chapter 12, "Working with Dynamic Web Templates,” you’ll see examples of why it’s smart to separate your content, as well as style, from layout. In this section, you’re going to create the basic external style sheet. Then, after you learn about DIV elements and layers with Cascading Style Sheets, you’ll create a new page, apply your style sheet, and copy some HTML in it so you can get a feel for how layout gets built at the root level. The result will be a three-column layout using styles but not any tables. Perform these steps to create your basic external style sheet: 1. Choose File ➔ New ➔ More Page Templates. 2. Go to the Style Sheets tab and double-click Normal Style Sheet. 3. With the blank style sheet page now open, click Format ➔ Style. From the Style window, click the drop-down list box below List and select User-Defined Styles. 4. Click New. In the Name (selector) box, type h1 and then click Format. 5. Point to Font and then • Under Font, choose Arial. • Under Font Style, select Bold.

PAGE LAYOUT WITH CASCADING STYLE SHEETS ■

• Under Size, select 24 pt. • Click the box beneath Color and use a very dark blue. • Click OK. 6. Click New. In the Name (selector) box, type h2 and then click Format. 7. Point to Font and then • Under Font, choose Arial. • Under Font Style, select Bold. • Under Size, select 18 pt. • Click the box beneath Color and use a very dark green. • Click OK. 8. Click New again. Type h3 in the Name (selector) box and click Format. 9. Point to Font and then • Under Font, choose Arial. • Under Font Style, select Bold Italic. • Under Size, select 14 pt. • Click OK. 10. For a final time, click New, type p in the Name (selector) box, and click Format. 11. Point to Font and then • Under Font, choose Arial. • Under Font Style, select Normal. • Under Size, select 12 pt. • Click OK. 12. Next, point to Paragraph. Under Indentation, add 3 for Before Text and After Text. 13. Click OK until you exit the Style window. 14. Choose File ➔ Save As. 15. In the drop-down list box next to File Type, select CSS Files. 16. Click the box next to File Name and type testcss.css. Now you have the external Cascading Style Sheet that will be used with the CSS multi-column layout. However, before you perform the next step in layout, you need to understand the role of DIV elements and FrontPage layers.

147

148 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

About DIV Elements and FrontPage Layers Now let’s focus on two essential elements of page layout using style sheets: division (DIV) elements and the use of FrontPage layers.

DIV Elements One of the big advantages of CSS over HTML tables for formatting and page layout is that you can more authoritatively control the positioning of your content on a web page or on an entire website. A single element, called a division or DIV element, can control the absolute positioning of your content. Different attributes you can assign within your DIV element in CSS control the direction and timing of how content is rendered on the screen, exactly how an object is positioned, the height of an object, its position related to other content, whether scrolling is allowed, and much more. Explaining all the possible options you have with DIV elements is beyond the range of this chapter, but a common CSS example creates a layout using two columns, designated left and right as they would appear on a page. In this example, you will add HTML to create the left column and specify its contents in HTML code on your web page. First, you create a style sheet that identifies what this left-hand column is: .leftcolumn { position: width: top: left: background-color: }

absolute; 180; 0px; 0px; #000;

These statements set up a column on the left that sits at the topmost and leftmost margin. The column is 180 pixels wide and of a specific color. Then you add HTML code to your web page (that process is explained in Chapter 8, “Inserting and Formatting Text”) that specifies what goes into that left-hand column, like this:

The content you want to appear in your left column goes here

Note that this HTML segment opens with a DIV tag and closes with a DIV tag. That’s important because for each opening DIV tag, you always need a closing one.

PAGE LAYOUT WITH CASCADING STYLE SHEETS ■

This is just a starter example; you’ll discover far more elaborate examples—along with excellent assistance—at the reference sites listed later in this section. Also, you can find a complete list of DIV element attributes and properties at the Microsoft Developers’ Network site at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/ reference/attributes.asp.

FrontPage Layers FrontPage layers are synonymous with CSS positioning. When you draw a layer using FrontPage, you create a positioned element box that can act as a container for your content. Because the Layer tool is pretty straightforward, let’s see how you can use it to set up a layout that splits a page into three distinct parts. Then you’re going to label each layer. Perform these steps to create a basic layout with layers: 1. Choose File ➔ New ➔ Blank Page. 2. With the new page open, select Format ➔ Layers. The Layers task pane appears at the right of the window. 3. Click Insert Layer. A box labeled Layer 1 appears on your page. Keeping the width as is, point to the lower edge of the box and pull it downward to extend the length of the box down the page. 4. From the Layers pane, right-click the ID Layer 1, point to Modify ID, and type List, because it suits a long list of short-titled articles. 5. Click Insert Layer again. Drag the new layer box (identified again as Layer 1 because you changed the ID of the original Layer 1) just past the right edge of the first box and drop it into place. Now point to the right edge of the new layer box and extend it to the right for the full width of the page. Then point to the lower edge and extend it to onethird the length of the page. 6. From the Layers pane, right-click the ID Layer 1, point to Modify ID, and type Banner, because it’s a great spot for banner information, a logo, or a link bar. 7. Next, click Insert Layer one more time. Drag the third new layer box to just below the outside corner of the spot where the first two layers meet and drop it (see Figure 7.12). As you did with the second layer, point to the bottom corner of this layer and extend it diagonally downward. 8. In the Layers pane, right-click the ID Layer 3, point to Modify ID, and type Mainpane. This could be your main new content area for this page.

149

150 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Figure 7.12 You’re creating CSS layout as you go.

Now let’s look at one of the layers you drew and customize it: 1. Click the Banner layer on your page, which also selects it in the Layers task pane. 2. At the bottom of the Layers task pane, click Borders & Shading. Select the Borders tab and add a left and bottom padding of 10. 3. Select the Shading tab and under Fill In The Box Below Background, select a dark blue. Click OK. 4. Click the List layer and click Borders & Shading. 5. Repeat step 2 except choose a light gray. Click OK. The result should look like Figure 7.13, with the left and top layers now colorized. While you aren’t going to change positioning here for this example, you can adjust the position of any layer if you take the following steps: 1. Point to the layer and click Positioning. 2. From the Position window, click to select a different Wrapping Style and/or Positioning Style. You can also make adjustments to the specific location and size from here. 3. Click OK to finish.

PAGE LAYOUT WITH CASCADING STYLE SHEETS ■

151

Figure 7.13 Colorize layer elements as you would table cells.

Note as you look at the layers in the Layers task pane that an eye appears next to each layer. That eye may be in different states, from fully open to closed. Click the eye (or rightclick and select from the menu), and it changes between Default, Visible, Hidden, and Inherit, relative to its positioning. You’ll also see that each layer gets a relative position (the z-index or Z). There is a final option listed at the bottom of the Layers task pane: Behaviors. You can assign certain scripting options called behaviors to different elements on your web page. The behavior is triggered when a specific event occurs on the page. For example, if you tie an event (such as “on mouseover”) to an item in your List layer, you can then tie a behavior to that event, such as produce a pop-up window. Normally, you set these when you have the page open in Design mode. Select the element you want to tie to a behavior and then take the following steps: 1. Choose Format ➔ Behaviors. The Behaviors task pane appears. 2. Click Insert and choose the desired behavior from the list. A BRIEF INTRODUCTION TO 3D LAYERING

Unlike some of the other layout tools I’ve discussed so far, Cascading Style Sheets allow you to layer your content so that one element of your page layout can sit on top of another, giving a 3D layering effect.

152 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

HTML allows you to position elements of your web page on a standard X-Y axis, which means that if two objects occupy the same space, one hides the other. However, CSS supports the use of a third or Z-axis so you can more effectively position elements without completely hiding the lower object. CSS also lets you identify on which layer a particular element should reside. By using something called the z-index property, you can literally stack your content by establishing the exact position at which one element resides separate from the other element in the same approximate space. Here’s an example of this:



BHCC Scholarship Programs

Also on BHCC

BHCC Home

PAGE LAYOUT WITH CASCADING STYLE SHEETS ■

BHCC Members

Join BHCC

Shop BHCC for Discounts

BHCC Sponsored Programs

The Blue Haven Commerce Coalition is very pleased to offer a number of different programs to aid both traditional and non-traditional student scholars in Blue Haven County. This means that regardless of a student’s age or academic focus, we likely have a program for which you may qualify to submit an application.

You may call the BHCC Scholar coordinator at 845-555-9018 for more details or click any of the following links:

BHCC General Application, Rules

BHCC General Academic Scholarship

BHCC Member Programs

Several BHCC-member businesses offer their own academic/athletic reward and scholarship programs.

However, their rules of eligibility and application may differ significantly than those offered by BHCC itself.

Blue Haven Quality Motors Academic Excellence Award

County Professional Cleaners Athlete’s Award

When you preview this page, it should look like Figure 7.14. Of course, if you click the links, they won’t work because they’re tied to another site, but they give you an idea of what’s possible. You may have noticed in the last example that when I specified background, I used an entry of #fff which you might not readily identify as the color white. In fact, there are many different ways you can identify colors in your style sheets: by color name, by RGB (red-green-blue) value or percentage, or by hexadecimal or hex shorthand. Because you’ll see these different ways used in the various examples you’re apt to browse through as you develop your CSS skills, you’ll want to find some sites offering color charts for easy reference. Two of my favorites are http://eies.njit .edu/~kevin/rgb.txt.html#Red and http://www.slackerhtml.com/html/colorchart.html. Others can be found at some of the CSS references provided later in this section.

155

156 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Figure 7.14 The three-column layout in the Preview window

Understand that this is just one of many different methods you can use to create a multicolumn layout. Still, this is one of the most popular styles of layouts (three columns with a top banner that can be changed to include a logo, for example). Once you see it at the code level, HTML and positioning may make just a little more sense. Once you know this type of layout, you can begin to tweak it and make it your own. Just change the content, for example, or see what it looks like with two very skinny side columns (mainleft and mainright set at 25% width) and a center column (maincenter) covering 50% of the window. Even with borrowing code, there is so much you can learn about how a layout and look are achieved simply by looking at the code and seeing what each small change can bring.

Great CSS Reference Sites I’ve pulled together a list of excellent websites that feature articles and tips for using CSS for page layout. Some of these sites, such as Blue Robot and Glish, offer excellent examples of different layout types, and the CSS code is available for you to copy and modify. • Advanced CSS Layouts: Step by Step at http://webreference.com/authoring/style/sheets/layout/advanced/

• Blooberry’s Index Dot CSS at www.blooberry.com/indexdot/css/ • Blue Robot at www.bluerobot.com/web/layouts/ • CSS/Edge at www.meyerweb.com • CSS Validator at http://jigsaw.w3.org/css-validator/

PAGE LAYOUT WITH FRAMES ■

• Dave Raggett’s Introduction to CSS at www.w3c.org/MarkUp/Guide/Style.html • Digital Web Magazine’s CSS tutorial at www.digital-web.com/tutorials/tutorial_ 2002-06.shtml

• Glish.com • House of Style at www.westciv.com/style_master/house/index.html • The Style Sheet Reference Guide at www.webreview.com/style/ • WDVL Style Sheets at www.wdvl.com/Authoring/Style/Sheets • WebSiteTips at www.websitetips.com/css/index.shtml

Page Layout with Frames Frames, as the name suggests, allow you to frame your web page content. It’s a way of dividing up a browser window into segments, each of which can serve as something of a web page on its own but is modified to fit the available space. For instance, you might want to always have the same information, such as links to other site content, your logo, and such contained on a top or left-side static frame, while the main box of the frame encloses another web page. FrontPage supports the use of two different styles of frames. The most commonly used frames are frame pages, which are pages whose layout provides an outer, static frame that does not change as the visitor moves from page to page, and an inner box of information containing the page’s content, which does change. Wherever such frames are used, you actually need to create two pages for every one seen: the actual page of content and a frame page that sits outside and around that content. But there are also inline frames, which can fit all the kinds of elements you can place on frame pages, yet don’t require you to create an additional page for the frame separate from the actual page of content you create. Instead, inline frames are embedded directly within a standard web page on your site, and these can mean less work. Inline frames are most often used with ad servers.

Issues Surrounding the Use of Frames for Layout Frame pages are the ones most frequently used in web page layout. However, there are a few issues beyond creating the extra frames page that you need to be aware of before you make the decision to use frames on your site. Browser support Not every web browser supports the use of frames, especially older browser versions such as Netscape 4 (and there are still people using them, trust me). Yet even among those browsers that support frames, not all execute them flawlessly, and at least one browser allows users to turn the feature off. FrontPage allows you to enable/disable the use of frames from Design mode as shown in Figure 7.15; choose Tools ➔ Page Options ➔ Authoring ➔ Frames. However, this feature is for local use only, meaning that when you disable frames, you’re turning

157

158 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

off the ability to create web pages that use them. Turning frames off reduces the chance that someone in your team will errantly create pages using them. Usability Be aware that not all frames-based pages save well (for a visitor trying to save your web page to his or her disk) or bookmark properly. If you opt to use frames, this is an issue you should test both yourself and using your focus group, being sure to test each page that uses frames. Accessibility Frames present the same problems for accessibility that tables do. Their use can affect whether visitors with visual or mobility impairments are able to use your site at all unless you also offer a No Frames version where only text and images appear. Audience Some regular web visitors truly adore the use of frames on a website. But not everyone likes to use websites that rely on frames. Some of this reaction is likely due to the fact that older versions of browsers handled frame pages rather haphazardly, but it’s also due to the fact that many websites using them don’t do so skillfully. (See the upcoming sidebar, “Some of the Don’ts of Frames.”) Also, it can take slightly longer for a page containing a frame to load than one that does not have a frame. All too frequently (and you’ve probably witnessed this yourself), you see the frame on a slow-loading page load properly and then get a timeout browser error for the page Figure 7.15 Use the Authoring tab in the Page Options window to enable or disable the use of frames by your development team.

contained within the frame (or vice versa). For this reason, frames can be a precarious choice when you know a chunk of your audience will be accessing using slower means; you must assume this is true with a global Internet site. For these reasons, the use of frames tends to be more popular among those running a private or company-only site than on sites open to the global Internet, where many visitors may be accessing using a slow, dial-up connection. Effect Some sites simply don’t lend themselves to the use of frames, either because they don’t have a lot of static information that needs to be imparted on the frame or because the site’s nature doesn’t lend itself to what some may perceive as very regimented design. If the design effect you’re going for is fluid and dynamic, frames may affect this aesthetically as well as present some of the other challenges discussed here. For example, let’s assume you’re building a site to be used by children, and you prefer to vary the layout design frequently. The addition of frames is site-wide, so you would be stuck using them throughout. Maintenance effort Even among users who regularly use frames in their sites, many will tell you that it takes a bit more effort to support and maintain a site using frames because any changes you make may echo across other individual pages.

PAGE LAYOUT WITH FRAMES ■

159

Troubleshooting the Use of Frames Before leaving the topic of frames, let’s spend some time looking at some common issues that you may encounter. Q: Can you help me understand why the page to which I’ve set up a hyperlink opens in a different frame than I wanted? A: This is a common problem. You must specify exactly which frame (called the target frame) you want the hyperlink, when clicked, to open into. Frequently, you want a new page to open in the largest available frame. When you create or edit the hyperlink, you do so as you normally would and specify the page to open, but you then need to click the Target Frame button in the Hyperlink window. In the Target Frame window, you can specify which part of the frame page to use for opening the hyperlinked page. See Chapter 10, “Inserting and Maintaining Hyperlinks,” to learn more about hyperlinks.

Figure 7.16 Use the Frames tab to turn off frame borders.

Q: While I can see why the crisp borders for frames can be useful, I don’t want them for my design. Yet I’ve been unsuccessful in removing them. What do I do? A: For each frame where you want to remove the borders, right-click the frame and choose Frame Properties ➔ Frames Page. In the Frames tab (illustrated in Figure 7.16), click to uncheck Show Borders and then click OK until you exit the Properties windows.

SOME OF THE DON’TS OF FRAMES Bad frame implementations include those where the main content area is too small to properly accommodate the page being displayed, doesn’t offer options for a non-frame version of the same pages, and employs elements that completely detract from the information presented. An example of this occurred with an organization I used to work with that insisted on trying to launch a webbased chat service within a frame. In that frame, they continuously displayed a highly distracting camera ad that seemed designed to prevent your eye from going anywhere but to that ad. We tried different placement, which decreased the distraction, but because of positioning requirements demanded by the advertiser, the ad went right back to the same area where the user would look for new comments in the chat room. Another bad point is that the ad required an unusually large left-side frame that seriously reduced the size of the chat window. There was no out for this, either; they didn’t want to have a non-frames version available because they felt it would detract from that killer ad. From an advertising perspective, this was a complete success, but this example violated all three of the situations I mentioned at the beginning with respect to bad frame implementation. The result was that users left the chat room after only a few minutes simply because the ad was tiring their eyes. Bad packaging of the ad combined with the uncomfortable addition of a frame took up too much of the available browser space, negating the value of making this chat area available.

160 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Q: I’ve just tried this on my own, and I like the results except for the fact that the frames and their individual content seem too crowded. What’s the best way to resolve this? A: Again, right-click each involved frame and choose Frame Properties ➔ Frames Page. In the Frames tab, increase the frame spacing as needed until you have the desired effect. Q: Is there a way I can use a theme on my web page for all pages except the ones I want to place within a frame? If I remove elements such as my page banner and navigation bar from the page I’m framing, it removes them throughout my site. But leaving them in place interferes with the page I’m framing. A: You can apply a theme to either a whole site (typical) or just to select page(s). The first thing to try is remove the theme (with its built-in page elements) as the default across the website, and then specify which pages should use the theme. This should give you a page for your frame without the additional, undesired elements. If all else fails, however, you can use the Insert menu to add the desired page elements back to pages where they have been inadvertently removed, without forcing them back on the page you’re framing. You may need to tweak back and forth until you get it right.

Hands On: Setting Up Frames for Your Site Let’s assume that you’re the intrepid type who wants to go ahead and see how frames will Figure 7.17 Using the Frames Pages tab to select a page template

work for your website. This section walks you through the process of creating the frame setup. To begin, follow these steps: 1. From the Design view in your website, choose File ➔ New. 2. From the New Page or Web Site task pane (right), under New Page, click More Page Templates. 3. In the Page Templates window, select the Frames Pages tab (Figure 7.17). Here you have a number of frame templates to choose from; always try to pick the one that best matches your desired layout. 4. For this example, click Nested Hierarchy, which then opens a frames page template such as the one shown in Figure 7.18.

HANDS ON: SETTING UP FRAMES FOR YOUR SITE ■

161

Figure 7.18 The Nested Hierarchy template gives you a classical layout design from which to work.

Now that you have a page setup with which to work, let’s apply it to a real situation. Because I told you that frames aren’t always well-received by the general public, let’s use as an example a company’s human resources department setting up an internal employee intranet-based website. While they don’t want to use frames for every page on their site, they want to employ frames for pages that house forms that employees need to complete and submit. In this way, they can use the left side of the frame to note other forms and information related to the form being displayed. Using the Nested Hierarchy frames page template, you can begin to fill in the template by attacking first the topmost frame. Follow these steps: 1. From the topmost frame, click New Page (because you’re designing something new rather than using an already designed page). An empty design frame appears (see Figure 7.19). 2. Let’s add some content to this page so you can see what it looks like in this frame. Click the page and type R Mottman Marketing. Highlight this text and • Click Bold and Center from the formatting toolbar. • Change the font to Verdana and the size to 36 pt.

162 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

Figure 7.19 Choosing New Page displays an empty design frame.

3. Choose File ➔ Save and save this first frame with the name MottHead. You’ll also be prompted to save the entire page (as the container for all frames). Save this with the name Mottman. 4. To change the properties of this frame, including the name of the frame, the page name it will be saved with, the size (and whether the user can resize it in his browser), spacing, and more, right-click this frame and choose Frame Properties. 5. To get a feel of what can be done from the Frame Properties window, let’s add (or change) a title. Click the box next to Title and type R Mottman Marketing Welcomes You, as shown in Figure 7.20. Because properties such as column or margin width and height are fine, leave as is but click the Frames Page button. 6. In the Frames tab, you have the option of clicking to uncheck Show Borders. This turns off the distinct borders that surround each frame. In this step, click to uncheck. Close the Frame Properties window and see what the page looks like without frames. Then imagine what it may look like once your content is built into the page. This may or may not work. 7. For the time being, right-click this first frame again. Choose Frame Properties ➔ Frames Page and click to check the Show Borders box. 8. Click OK.

HANDS ON: SETTING UP FRAMES FOR YOUR SITE ■

163

Before you move forward, note that you can point to the edge of any frame on your page and pull to resize it automatically, without using the Frame Properties window. If you decide to tackle frames for your site, experiment with different widths and heights. You probably want to avoid very narrow frames, except for special purposes such as when you want to create a frame container for copyright information at the bottom of a page using other frames. Likewise, you may want to carefully choose situations where you may implement one huge frame dominating many slender ones, or you may lose the visitor who manages to see only the massive one. You have established the first frame in this example. Now it’s time to take care of the remaining blank frames—starting with the one on the left—using the following steps: 1. Point to the left frame. 2. Use the formatting toolbar to change the font to Arial and the size to 12 pt, and click Bold. 3. Type the following items and press Enter after each: • Home • Inhouse Newsletter • Employee Handbook • Request Leave 4. When you finish, notice that two of these lines (which may later become menu items, hyperlinks, or a navigation bar) wrap to a second line. To fix this, click the right edge of the left frame and pull it to the right until it accommodates these longer entries without wrapping. 5. Choose File ➔ Save. First, you’re prompted to save the entire page (Mottman), and then to save the left frame page. Save this as MottLeft. 6. For the final frame, let’s use the Set Initial Page option rather than New Page for a change. If you have a web page that you want to insert here for this purpose, you can add it in this step. If not, take these steps: • Choose File ➔ New ➔ Blank Page. • From the formatting toolbar, select Times New Roman for the font and 10 pt for the font size. • Choose Format ➔ Background. Under Colors, click the box below Background and pick a pale yellow. Click the box next to Text and choose dark blue for a font color.

Figure 7.20 The name and title are two of several properties you can change in the Frame Properties window.

164 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

• Click OK. • Type the following: Thanks to you - our superb employee leaders - R Mottman Marketing has grown in just three years to the Capitol city’s leading marketing agency. The year 2003 has brought numerous new accounts, many satisfied returning customers, and several top industry awards, including the 2003 Ad Night Advantage Excellence trophy. • Choose File ➔ Save and save the file with the name Mainframe.htm. 7. Return to your frames (Mottman.htm) and in the untouched lower frame, click Set Initial Page. 8. In the Insert Hyperlink window, click Existing File or Web Page and double-click Mainframe.htm (or the existing web page you wanted to use instead).

Step 8 inserts an existing web page (or the option to link to another site’s page) in this lower, large frame. Click Preview, and your results may look something like Figure 7.21. Look at the design again in the Preview window. (Preview in Browser mode only works frame by frame for each frame selected unless you have the total frames page open.) You should see that the topmost frame has a scrollbar showing. Because this frame is acting as a simple banner for this page, you probably don’t want the scrollbar, especially since there is nothing to scroll. Later, if more content is added to the page supplying the lower main frame, a scrollbar would be appropriate there. To fix this on the top frame, take these steps: 1. Return to the Frames page in Design view. 2. Point to the topmost frame and right-click. Choose Frame Properties. 3. Select Scrollbars ➔ Never and click OK.

Anchor Points or Bookmarks and the Positioning Toolbar There are a couple of additional points that you should know about that concern anchor points and a special toolbar known as the Positioning toolbar.

Anchor Points (Bookmarks) Anchor points are also known as bookmarks, which is how FrontPage refers to them. While some of you think of bookmarks as the saved URLs for your favorite web pages (the equivalent of an Internet Explorer Favorites entry), a bookmark can actually point to a specific place on a web page. For instance, once created, you can choose Edit ➔ Go To in FrontPage to jump to a particular bookmark.

ANCHOR POINTS OR BOOKMARKS AND THE POSITIONING TOOLBAR ■

Figure 7.21 The fruits of your short-term labor

To set up a bookmark, open the 3column.htm file you created earlier in this chapter. You’re about to place a bookmark on a paragraph, but you could select an entire column or layer too. Follow these steps: 1. Select the Design view. 2. Point to the first paragraph in the middle column and then choose Insert ➔ Bookmark. 3. When the Bookmark window opens, type a short name for this bookmark. If you later want to remove a bookmark, repeat steps 1 and 2, but when the Bookmark window opens, select the bookmark you want to delete and click Clear.

Positioning Toolbar The Positioning toolbar is another tool you can use to move and resize elements on your page. To see this in action, let’s start with a fresh page and use the Layers tool from earlier. Perform these steps: 1. Choose File ➔ New ➔ Blank Page. 2. Select Format ➔ Layers and click Insert Layer. 3. Drag Layer 1 so that it sits roughly in the middle of the page.

165

166 ■ C H A P T E R 7 : W O R K I N G T H R O U G H P A G E L A Y O U T

4. Choose View ➔ Toolbars ➔ Positioning, which opens the Positioning Toolbar. 5. Point to the layer again; first move it to a new location and then resize it.

As you do this, notice that the figures change in the various windows listed (the number of pixels from Left, Top, Right, or Bottom; the total number of pixels in Width or Height; and its z-index assignment). You can also click the available boxes and change these manually. If you click the icon on the far left of the toolbar, you can set Absolute (or fixed) positioning for a selected element. If you click either of the two icons at the far right of the toolbar, you can either Bring Forward or Send Backward a selected page element.

All the Text Content That’s Fit to Format While I started out talking about both formatting and page layout in the first paragraph, I quickly focused on just the issue of page layout. In Chapter 8, you’ll learn how to make certain your text content looks exactly as it should, without any unnecessary and decidedly unwanted surprises. Because aesthetics are important—and can even affect overall readability—let’s begin the process by turning to the next chapter.

CHAPTER 8

Inserting and Formatting Text KATE J. CHASE

In this chapter, you’ll learn some of the fundamentals of formatting your text so it serves rather than distracts your audience and looks exactly as you want it to look. You’ll take the information you read about using style sheets for page layout in Chapter 7, “Working Through Page Layout,” and extend it for use in setting up text formatting. But then you’ll move forward from there to cover important and related issues such as bringing material from other Office products such as Word and PowerPoint into your website. Specifically, in this chapter, you’ll learn about the following: ■

Inserting, editing, and formatting text

■

Troubleshooting formatting issues

■

Creating and applying styles for formatting

■

Repurposing content from Microsoft Word and PowerPoint

168 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

The Importance of Effective Formatting While graphics and other elements can enliven and enrich a website, the weight of a site’s value and message often rests on its text. What that text says is terribly important, but that’s really not what you’re using FrontPage to handle. In some ways as important as what that text says is how that text is presented—its font, its size, its color, its style, and more. This is largely the job of good formatting (common sense doesn’t hurt either). Choose and implement that content well, both through good communication and smart packaging (which for text means the formatting), and you can convince your desired audience to return again and again for information, services, or products. But if you don’t package your content well, you can’t communicate well. The best message in the world is often diminished or obliterated if the visitor can’t read it because the font is too small, too unique, or becomes lost in the colors associated with a background. I could tell you a terrible story about someone who published an important technical paper using one of the wildest fonts that was completely illegible in 10-point type and then wondered why his client wasn’t very impressed. Counter to good site packaging, be aware of a tendency among new web designers, both among kids who discover how easy it is to create their first pages and among adults, to do with their sites what they probably would not do with a printed document. Sometimes they use many if not most of the unique colors, fonts, cool backgrounds, and text effects at their disposal. Thankfully, this phenomenon is usually short-lived as each new designer determines what works well and what doesn’t. Also, such a trial period can be a highly useful learning experience. However, there are some cardinal rules of web text formatting that are too frequently violated. These include: • Excessive coloration • Excessive font changes (where a large number of different fonts and sizes exist on the same page) • Use of unusually small or overly large fonts for standard text • Failure to choose font colors that are easily seen against the background • Use of highly stylized but hard-to-read fonts, especially when employed with longer bits of text • Haphazard, careless alignment of text • Too much white space or text that’s too densely populated (a layout issue that’s often rooted in poor formatting)

THE IMPORTANCE OF EFFECTIVE FORMATTING ■

169

Figure 8.1 contains an example of a site that breaks many of the smart formatting techniques. To be accurate, this is my rendition of a real web page that used to sell fashion accessories; the site name has been changed to protect the guilty. Bad formatting is just one of its issues; this site is badly designed and poorly implemented in just about every respect. This could be one of a few reasons this site doesn’t exist anymore! This doesn’t mean that you’re limited to black text on a white background. But the application of colors, non-standard font sizes, and highly stylized fonts should be judicious and carefully monitored. Occasionally, you might use a unique font—a large one to grab attention or a smaller-than-usual one when you don’t want the “fine print” to stand out. But unique fonts lose their effects if employed too frequently and may serve to frustrate or even annoy your visitors. People can tolerate reading small bits of text that are hard to read, but they are apt to decamp if forced to wade through huge blocks or a site full of it. Colors can be a bit of a challenge in themselves because not all colors render equally on different web access setups. How a color gets displayed on a website is a complicated balance between the integrity of the video card and monitor (or combo hardware setup in mobile devices), the color setup designated by a user, and the colors specified by the web page designer. That perfect shade of blue may not look the same in the visitor’s browser. You can specify color and an alternate color for an element, but you’re still at the mercy of the hardware and the browser as to how true the shade will display. Figure 8.1 On this website, the contrast is poor, too many different fonts are used, and the result is unreadable.

170 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

SMART FORMATTING Smart formatting is a delicate balance between text being presented well and badly. You need to capture a reader’s interest and keep it until the content has been read. This short list of common recommendations can help you as you start: 1. Wherever possible, follow standard conventions for presenting your text. For instance, most text in a block is typically aligned to the left, single-spaced, and the normal text size for reading is 10 or 12 points, as it would be in print. In this way, you don’t force a reader to adjust his or her normal reading style, and the normal text can serve as a sharp contrast for those times when you may decide to break with convention. 2. You can and should vary your fonts, but not too frequently. In many cases, it may be preferable to change the size of the font rather than the font itself. For example, if you have an article with subheads, you should use the same font throughout but vary the font size from an 18-point h1 heading to 14-point h2 subheads. 3. Be aware that some fonts look best when presented at a specific size. For example, the Broadway font looks great in a larger size but becomes rather illegible at 12 points and smaller. 4. Text should usually appear on a solid background for best visibility, unless you’re working with a faintly patterned background image. (You might see this on corporate sites where the site background is a pale-colored, mostly solid image with faint logo watermarks throughout.) 5. When you want to use special formatting to display text in a particularly unique way, try this endurance test: Save your work, let a night pass, and then look at it again the next day. Ask yourself, “Is anything distracting my eye?” If the answer is, “No,” your work may be good to go. Otherwise, you need to work with the formatting until it’s as readable as it is uniquely presented. 6. The use of style sheets can be very beneficial in establishing fonts, styles, and sizes that can be used throughout your site, especially when many people will contribute content. This gives you consistency, saves work (the greater the volume of content, the more time is saved), and gives you control over the typical defaults that FrontPage employs as you design a page or the browser displays as it renders a page.

WORKING WITH TEXT AND FORMATTING ■

Several years ago, when I was new to web design, I was asked to design a special Halloween section for a website. I took special pains to use blood-red fonts with a custom image background that offered an ideal contrast. Or at least it did on my system and on several others. To my chagrin, I discovered that on other setups, that blood red came across as a pale orange with gold, which no longer had a good contrast with the background. The result on PCs with poor video cards looked more like an impressionist’s painting of badly set fruited dessert gelatin than a spooky special section page. There’s another issue: Not everyone who visits your site may be able to view special fonts because their browser does not support them. Unless you specify the use of alternative fonts to use if the desired one is not supported, their pages will display a default font, which may or may not present your content as you intended. You’ll learn how to create additional choices for font presentation in this chapter.

Working with Text and Formatting If you’re already very familiar with working with text and text formatting in other Office products such as Microsoft Word, you’ll find that FrontPage follows the same conventions for alignment, font selection and color, the setting of styles for paragraphs, and so on. However, one challenge you’ll face in FrontPage that you’re less likely to confront in Word is that you’re formatting your text to work well within the design and layout of your page areas, rather than the “open page” format of a typical Word document. You’re far more likely to be working around the use of images and other objects and less apt to be dependent solely on the standard 12-point Arial font for everything you do. There are also several important rules you should follow regarding how your text is displayed: • Fonts should be large enough in size to be read, of a color that is legible against the background image or color, and of a style that is clearly readable. • Remember that not all fonts will be supported by all systems that visitors will use to browse your site. • The longer your text, the more important its legibility is, because human eyes can tire quickly under strain. • Avoid very long pages, especially if they combine graphics with text; they take longer to load for visitors and may seem daunting to them. You can break up very long pages into additional shorter ones. • Watch that content copied from another source is properly formatted.

171

172 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Be aware that certain fonts may be platform specific, which means they’re more likely to be used only on a Microsoft Windows/Internet Explorer setup, or almost exclusively among Macintosh or Unix machines. Unless you’re sure that you have a captive audience (in other words, everyone is accessing the site using the company network via the same browser and browser version), don’t choose a font that can be viewed properly only by certain setups. Certain fonts are pretty standard and these (or their equivalents) can be employed across most operating system platforms (Windows, Macintosh, and Unix): • Arial • Comic Sans MS • Courier and Courier New • Georgia • Helvetica • Times and Times New Roman • Trebuchet • Verdana When stacking your fonts or providing more than one font face for use with a style, use at least one of the platform-independent fonts. This section explains about inserting, editing, and formatting text. But as you read on through the chapter, you’ll learn how to automate some of the formatting process by creating and applying styles. You’ll also get specific information on using content taken directly from your Microsoft Word and PowerPoint documents.

Inserting Text Adding text in FrontPage is generally as simple as positioning your cursor and beginning to type or positioning your cursor and pasting in what you’ve copied from another application. There are just a few exceptions to this. For example, you can create templates (discussed in detail in Chapter 12, “Working with Dynamic Web Templates”) that keep certain areas of a page layout off limits to text or other insertion. Be mindful when working with these templates so you don’t lose time wondering, “Why can’t I add text here?” You’ll also encounter some structural limitations when working with text boxes; we cover that shortly. Finally, your main concern when inserting text onto an existing page should be that you’ve inserted only what you want and that this new text is formatted properly and displays according to your established guidelines. Later in this chapter, in the section “Repurposing Office Content,” you’ll learn about copy and paste options with regard to formatting.

WORKING WITH TEXT AND FORMATTING ■

ABOUT WORKING WITH LONGER TEXT Happily, for those of us who use something like the Great Library of Alexandria on the Internet to do research, many sites include long passages of text that may run for more than one screen. Examples of this are sample book chapters, magazine or newspaper articles, long technical documents or white papers, annual reports, and business proposals. But working with longer text presents special challenges when presented on the Web. If television has become the domain of fast sound bytes, the Web has always been the domain of the short read. People have become accustomed to reading no more than the contents of a column or short page at a time. So the conditions must be right if they are to be tempted to stay and read. Several factors go into this, including organization and navigation, because you want it to be easy for them to move back and forth between pages or sections. You don’t want to place a four-screen-long document on your main page, but you might create a link to a page containing a table of contents, which then references pages that each contain a logical section of the entire text. But good formatting becomes critical in such situations because you want to optimize the viewing experience for the reader. For example, you may want to adjust line spacing and margins to create enough white space so that tired eyes don’t lose themselves in the text while not adding so much white space that you add unnecessary size to the presentation. You definitely want to employ a very readable font face and specify alternate fonts as needed. Consider another point: You can make a printable version of a long article, paper, or chapter available so that readers can print it and read it offline. While some visitors may choose to continue to read through it online anyway, your consideration will be appreciated by those who have limited-use Internet access and may not be able to stay online for long periods of time to read. You can also employ tools such as anchor points, also known as bookmarks, which were discussed at the end of Chapter 7. These can be incredibly helpful in marking a longer document so that someone can jump through it without endless scrolling.

Inserting Text into a Table If you’re using tables for layout (covered in Chapter 7), the process for inserting text is basically the same as inserting it into any other editable area. The main issue is in formatting and making certain that the text you include comfortably fits within the confines of the table you’ve laid out to use. To illustrate this, you’re going to create a table using the Layout Table feature. You can draw a table (Table ➔ Draw Table) to do this next step too, but this gives you a bit of experience with this tool.

173

174 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Let’s create a sample you can work with: 1. Choose File ➔ New ➔ Blank Page to open a fresh page. 2. Select Table ➔ Draw Table. 3. When the Draw Table toolbar opens, click Draw Layout table and use the pencil cursor to draw a single table cell across the top of the page window. 4. Click Insert Column on the toolbar to split the single-cell table into two cells acting like side-by-side columns. This creates your work area. 5. Point within the left cell and type the following: Each cell in the table can act as a container for your text and each cell and its contents may be formatted quite differently depending on the circumstances you’re working with.

Let’s stop for a second before you move on to the right cell because you may notice that what you’ve typed in the first cell has stretched itself along the page until the right cell is almost obliterated, as shown in Figure 8.2. At this point, it’s nearly impossible to click within the right cell to begin typing, and even if you could, there’s no room. The next few steps help you solve that. 6. Point to the left cell, right-click, and point to Cell Properties. 7. Under Layout at the top right of the Cell Properties window, click Specify Width. Type 50 in the dialog box and then click In Percent, which formats the cell to be 50% of the

available width, as shown in Figure 8.3. Figure 8.2 Without formatting, the text spills across the cell.

WORKING WITH TEXT AND FORMATTING ■

175

While still in the Cell Properties window, click the Color drop-drop box in the Background area and choose a pale green to colorize this cell. Click OK to close the window. 8. Point within the right cell and then click the I (for italics) and the right column (for right alignment) button on the formatting bar. Then type the following: Unless you specify otherwise, your text in FrontPage will align to the left.

9. Choose File ➔ Save and save this as a web page with the name testtext.

As you view it, you may think—as I do—that some of this text is awfully close to the edge of the table cells. This will not look good when published. So let’s jump ahead and fix the formatting on-the-fly. To do this, take the following steps: 1. Highlight the text in the left cell, right-click, and select Cell Formatting. 2. When the Cell Formatting task pane opens at the right of your work area, in the Size and Alignment area, type 10 in the box next to Padding. Note how a pad of space has been

Figure 8.3 The Cell Properties window allows you to format table cells to accommodate your text and layout.

added around your text in the left cell (see Figure 8.4). The text no longer bumps up against the edges. 3. Repeat steps 1 and 2 to format the right cell. Figure 8.4 Adjust the display of cell contents through cell formatting.

176 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

There is another way to handle this. At the bottom of the Cell Formatting task pane, notice the Margins section. You can set an individual margin of 10 each for Left, Top, Right, and Bottom to accomplish basically the same results. Now you’re going to adjust the cell’s content alignment so that the text sits in the dead center of each cell: 1. Point at the left cell, right-click, and choose Cell Formatting. 2. Under Size and Alignment, click the drop-down list box next to VAlign and choose Middle. 3. Repeat steps 1 and 2 for the right cell. 4. Save your file again to preserve your changes. Look at your page again, think about how it started, and consider that you’ve made all these changes without doing much text formatting per se. At this point, you’ve adjusted the cells of the table only to accommodate what it contains.

Inserting Text in a Text Box or Shape The first rule to remember when you want to insert text into a text box or shape in FrontPage, much as you do with Microsoft Word or other Office products, is that your text should not exceed the space you have to work in. Most text boxes and shapes have a very limited area, and any extra text will just disappear, as you’ll see in a moment. As an example, let’s include an Office AutoShape on a web page and then add a text box to that AutoShape so that you can insert text. To do this, complete these steps: 1. Choose File ➔ New ➔ Blank Page to open a fresh page. 2. Position your cursor where you want to insert the Office AutoShape. (By default, choose the upper left of the page.) 3. Select Insert ➔ Picture ➔ AutoShapes. 4. When the AutoShapes toolbar appears, click Basic Shapes and double-click Folded Corner (a page with a folded bottom-right corner). 5. Point the crosshair pointer to the top left of the page and drag down diagonally so that the shape takes up about two-thirds of the page across and down. Drop it into place. 6. From the Draw toolbar at the bottom of your FrontPage window, click Text Box. 7. Point your cursor halfway down the shape, about one inch from the left border. Drag your text box across into the shape until it’s large enough to accommodate your text, as illustrated in Figure 8.5. 8. Point inside the text box and type the following: Text boxes within such shapes can provide interesting containers for your content.

WORKING WITH TEXT AND FORMATTING ■

177

Figure 8.5 You can insert a text box inside an Office AutoShape.

9. Right-click in the AutoShape (not in the text box) and select Format AutoShape. The Format AutoShape window appears. 10. Under Color, click in the box and select dark red. Click OK. 11. Choose File ➔ Save and save this file as Shapetxt. While the result gives you a nice white box for your text, surrounded by the rich redness of the shape, you could just as easily colorize your text box rather than the AutoShape (or both). In this second case, you would take these steps: 1. Point to the text box, right-click it, and choose Cell Properties. 2. Click the Color drop-down list in the Background area and choose cream as a color. Click OK. In the example you’ve just created, you see that the text fits nicely. But what if you’re working with a smaller text box, and you want the block of text you use to be longer than might normally fit? To see this in action, click inside the text box in your example again and take these steps: 1. Point to the space after the final period and press Enter. 2. Type the following: They draw the eye first to the shape and then to the text in the box within the shape.

Figure 8.6 shows the result.

178 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Figure 8.6 The colorized, customized AutoShape with a text box

You may now notice that not all the text is showing, depending on the exact size of the text box you created. There are a few different ways you can address this: • Resize the text box by clicking any edge of the box and tugging it taller or wider or both. • Use a smaller font for the text so that more text fits. To do this, highlight the text and select a different font size from the formatting toolbar. However, this is not always a Figure 8.7 Setting the character spacing and position

great choice when you want the text to remain easy to read, but it can be useful. • Condense the character spacing using the following steps: 1. Highlight both paragraphs of text in the text box. 2. Right-click and select the Character Spacing tab. 3. Click the drop-down list box next to Spacing and select Condensed. 4. Click the drop-down list box next to Position and select Middle to orient the text to the middle of the text box (see Figure 8.7). Click OK. 5. Save your file again (File ➔ Save or Ctrl+S). Be careful that you don’t render the text too small or too crowded to read properly. You may want to shorten the message, as you did in this example. You can use a larger image too, which gives you more room to add text.

WORKING WITH TEXT AND FORMATTING ■

179

Inserting a Comment You can add a comment to any FrontPage web page that can be seen by others working on your site, but that is not viewable by visitors to your site once the page is published. This can be particularly useful when you need to make a note to yourself (“This is why I did it this way” or “This is how I did it”), or you want to jot a note to someone else working with you, or you want to give information to people working on the site after you’ve moved on to your next job. To insert a comment on a page, complete these steps: 1. Position your cursor at the desired insertion point on the page where you want to add the comment. 2. Choose Insert ➔ Comment. 3. In the Comment box, type the comment you wish to add and then click OK. The comment is then added to the page, in a different color from the standard text, as shown in Figure 8.8. Let’s move on to editing next.

Editing Text While some of the same rules apply to editing text in FrontPage web pages as they do in any standard word-processing program, FrontPage is more limited. You generally have a smaller window to work with (the open page) and fewer features built in to make revisions to the content and to the text style. Figure 8.8 When previewed or viewed in a browser, this comment will not be visible.

180 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Thus, there are some checking and editing operations you may prefer to use in another program before you bring the text into your web page. For example, while FrontPage has the ability to use Office’s spell-checking tool, it’s more apt to spot problems when used in Word than when the same text is checked in FrontPage. For this reason, you may want to write longer passages of text elsewhere, such as in Word, and then copy them into FrontPage after you check them for spelling and grammar. A better example is seen with another tool: Word’s AutoCorrect option. Let’s say the webmaster of the Artisan’s Heirloom Seed Company site wants to draft a long article that presents the genus name for California poppies. This name isn’t apt to come up in the Office dictionary, so FrontPage (and Word) may not catch errors with a Latin spelling. But if it’s keyed into Word and added to the AutoCorrect option, the correct spelling is available from a keystroke. That said, when the editing you need to do involves the need to add text without removing any text that’s already there, place your cursor at the desired insertion point and begin typing. If you find that the text already there is being overwritten by the new text, press INS to force the software into Insert mode. Similarly, if you want to overwrite what is already there, press INS once to turn off Insert mode and turn on Overstrike mode so that your new text overwrites the existing text. You can use the Office spell checker to review your material by pressing the F7 key. (Enable the Thesaurus by pressing Shift+F7.) By default, changes made when using these tools are made right within the text as you go, so you generally don’t need to go back later and re-review them.

Formatting Text There is a difference between pre-formatted text and so-called regular text on a web page besides how it looks after formatting. When you pre-format text, you place that text within an element called the pre element. Anything placed there is interpreted by the browser in terms of how that text should display, its white space as well as the characters. Also, pre-formatted text appears in a default, monospace font. Pre-formatted text should be reserved for very specific uses such as marking up code samples in a document.

Just as you should exercise care in crafting the words and information that make up your text content, exercise the same care in making certain that the way you style the text delivers your text exactly as you want it to be seen. This means a careful selection of fonts, font size, color, effect, line spacing, and alignment.

WORKING WITH TEXT AND FORMATTING ■

181

Later in this section, you’ll walk through the basic steps of such formatting, but first, let’s look beneath the hood (so to speak) at how FrontPage sees your text a bit differently than you do.

Text as HTML While some of the in-application formatting options can resemble tools used in other programs such as Microsoft Word, now seems like a good time to mention that while their function is largely identical, FrontPage is actually structuring your text in HTML. Paragraph styles include: Normal A standard paragraph style using a proportional font (by default, Times New Roman). Formatted A paragraph using a fixed-width font such as Courier. Address A special element, typically a proportional italicized font, used to delineate something like an e-mail contact address. Headings Headings allow for the separation of text into particular headings, of which six levels (1–6, delineated as h1, h2, etc.) are supported. Headings are usually represented (unless otherwise specified) in bold proportional font, with h1 being the largest and h6 being the smallest. Figure 8.9 contains a page where the headings (h1, h2, and h3) are interspersed with both normal and formatted paragraphs, along with an e-mail address. Figure 8.10 contains the HTML behind that page. Figure 8.9 Headings and paragraphs in Design view

182 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Figure 8.10 The same page seen in Code view’s HTML

Bulleted Two or more paragraphs formatted with a bullet at the beginning, followed by an indentation, and then by the text itself.

Definition Where a term appears first, and a paragraph defining the term appears second.

WORKING WITH TEXT AND FORMATTING ■

Directory Typically a list of very short paragraphs (under 20 characters).

Menu A vertical list of very short (one- or two-word) paragraphs.

Numbered Same as Bulleted, but using sequential numbers rather than bullets.

An Exercise in Formatting While many of you no doubt have plenty of experience in formatting paragraphs, let’s go through the process for those of you who don’t. Open a blank page in your FrontPage website and type in a paragraph like this one: “No website, regardless of the seemingly mundane nature of the material being presented, needs to be boring. When it is boring, it’s often the fault of the designer who didn’t find an interesting way to package the material better,” reports John Smith, a highly respected instructor of Web design at a leading New York technical college and who crafted such sites as DocuNation and Wisdom of the Marketing Times.

If you entered this using a word processor, you might press the Tab key to indent that first line. But pressing Tab in FrontPage doesn’t quite do that; when you preview this text in a browser, you may find the indentation that you were able to add goes right back to flush left. So let’s right-click the paragraph you just typed, and under Indent First Line, change the setting from 0 to 10.

183

184 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Now, let’s make some other changes, such as the following: 1. Change everything in quotes to italics by highlighting those lines and pressing I in the formatting toolbar. 2. Make the name “John Smith” boldface by highlighting the name and pressing B in the formatting toolbar. 3. Change “DocuNation” and “Wisdom of the Marketing Times” into hyperlinks by highlighting each site separately, and then clicking the Hyperlink icon on the FrontPage toolbar. You are asked to specify the web address for these, which you can make up as you go along. The result will be underlined entries, which will change color when clicked. The changes you made should look something like you see in Figure 8.11. Do you want to add a bit more space between the beginning and end of the text and the edge of the page (or table, or other defined area)? Then choose Format ➔ Paragraph, and make your selection from Before/After Text. OK, that’s done. But what if you don’t like the font being used or the size of the font, or you want some special font effect? Right-click the paragraph (or choose Format ➔ Font), make the changes you want, and then click OK. Under the same option, you can also change spacing and text alignment (Left, Right, Center, or Justified). Figure 8.11 These changes make the information stand out a bit, while not being distracting to the reader.

WORKING WITH TEXT AND FORMATTING ■

So far, so good. However, perhaps you want to add a border and some shading to highlight this bit of information. If so, follow these steps: 1. Highlight the paragraph in question. 2. Choose Format ➔ Borders and Shading. 3. Make your choices and click OK. Experimentation can be your best teacher here, so plan to do a few mockup pages in which you do nothing but test to see what you can accomplish through formatting using the Format menu options. You’ll learn even more formatting tricks as you go through this chapter. To remove formatting from a selected area, select Format ➔ Remove Formatting or press Ctrl+Shift+Z.

Copying Text Formatting from One Area of Text to Another It’s not uncommon to have different formatting for different areas of text on a particular web page. For example, introductory text that opens your index or home page may look intentionally different than that in a text box that contains a special note. However, what if you want to copy the formatting from one area and apply it to another so that they both look the same? That’s easy to accomplish with FrontPage’s Format Painter tool: 1. Select and highlight the area containing the formatting style you want to copy. 2. Click the Format Painter icon on the FrontPage toolbar. 3. Using the Format Painter, paint the text to which you want to apply the formatting. You should be able to discern an immediate change in formatting if you’ve done this correctly. However, while this tool is great for quick use, it’s no substitute for a coherent system of styles designated for the different kinds of text you may use. I encourage you to create and apply styles, as discussed in previous chapters and in this chapter.

Troubleshooting Text-Formatting Issues Read here for some suggestions and answers to common questions that crop up in formatting text on your web pages. Q: Help! Not all formatting options are available to me. What’s wrong? A: Are you using a theme from FrontPage? If so, some of these formatting options are pre-selected under the theme and may not be available to you (such as changing a background color).

185

186 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Q: Now what? I changed a paragraph to italics, but only part of it changed. A: Re-highlight the entire paragraph and click I again in the formatting toolbar. You may not have selected the entire area you wanted to change the first time around. Q: On any given page, my site demands that there be four or five different text styles, depending on the circumstances at hand. It’s a chore going back to reformat each area if I forget to set up the right font and formatting each time. How can I automate this? A: Easy: Use styles and style sheets, covered later in this chapter. You can set up a normal paragraph as the default and a number of other styles to fit your different needs. Just watch that you’re not creating a situation where the reader’s eyes need to readjust too many times per page. Q: Related to the last question, I have styles set up, but I find that certain areas of text always seem to revert back to the default settings. What’s wrong? A: Make sure you’re using the right styles in these different areas. It sounds like you’re using the default style and even when you try to force other formatting on it, it’s reverting to the default. Q: In a straight text situation using borders, how can I avoid the situation I find myself in frequently with text at the beginning and end of lines that bleeds into the border itself? A: Format the paragraph to include spaces before and after the text to allow you white space between the border and the beginning and end of the text. Q: I don’t like the way I have material presented in a table format; I want to convert it easily into text. Is there a simple way to do that? A: Actually, there is, although you generally need to do it cell by cell. With the page open that contains the table you want to convert, go through cell by cell and choose Table ➔ Convert ➔ Table to Text. Now let’s discuss text style.

Designating Alternate Fonts You were warned when this chapter started that while FrontPage gives you the freedom to use some of the more stylized fonts such as Blackadder and Gigi, they may not appear as such in a visitor’s browser. Instead, the text displays in the default font supported by that browser. You need to take control over what fonts get displayed—or at least increase the chances that the font you specify is the one your visitor sees when he or she opens your page. The way to do this is by specifying alternate fonts that may be used if your first (or second, or third) choice is not available to the browser.

WORKING WITH TEXT AND FORMATTING ■

187

The best way to implement this is through the use of a Cascading Style Sheet (CSS), something you’ve already worked with in Chapter 6, “Creating a New Web Page,” and Chapter 7. Adding alternate fonts to these style sheets means you don’t have to repeatedly choose a few different fonts to use. But you can also specify alternate fonts on a spot basis. You probably should do this in limited situations (a specific block of text only, for example) whenever you format text using a specific font that may not be available to all browsers. You’re going to work with HTML to do this, and some of you may choose to wait to do this until the discussion of working with raw HTML in Chapter 17, “Working Directly with Markup and Scripts.” However, this is a pretty easy adjustment. Let’s use the paragraph you worked with in the “An Exercise in Formatting” section. Open the page where you typed the text. For many of you, the default font is Times New Roman, but for this example, you want the first font choice to be Arial, the second choice to be Times New Roman, and the third choice to be Courier. To specify an alternate font or fonts on the spot, take these steps: 1. Highlight the text to be formatted. In this case, choose the entire block of text. 2. Click the Fonts drop-down list box and select Arial, which changes the highlighted text to Arial. 3. With the text still highlighted, change to Code view, which shows you the HTML behind this page with the same text still highlighted (see Figure 8.12). Figure 8.12 This is a standard block text format change.

188 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

4. Just before the highlighted area, there is a tag that reads , which is where your font is specified. Click between the word Arial and the ending quotation mark that follows and amend the line so it reads: .

When your page is then saved and published, the browser trying to view this page first tries to load Arial for a font face for this block of text. If it doesn’t support Arial, it tries to display the text in Times New Roman. Failing that, it goes to Courier. Then, if for some reason the browser doesn’t support any of these three font types, it loads the page in its default font (unless you specify a fourth option it does support). That said, the above works for what I want it to do but it breaks a web design rule. This brings you to another important point about fonts: grouping by family. Normally, when you select alternate fonts, you select from within a family of fonts that are close in overall style to one another: serif vs. sans serif. For example, if you want to use a font with a serif and set your initial font as Georgia, you would make your alternate fonts Times and Serif because those reside within the same serif family. Likewise, if you want to use a sans serif font initially set at Arial, your alternates within the same family would be Helvetica and Sans Serif. In the next section, you’ll see how you can specify alternate fonts within Cascading Style Sheets for more systematic changes but also remember the family font rule.

Working with Style With your memory still fresh from our coverage of Cascading Style Sheets for page and site layout in Chapter 7, now’s a good time to understand the usefulness of style for helping ensure that your text meets your formatting guidelines. While not everyone may choose to use them, style sheets can represent a serious time and effort saver by permitting you to define your presentation across a single page or throughout an entire website rather than spending the time to format each new section or page. CSS come in especially handy when more than one person is working on the website so that the same style conventions are followed throughout. Style allows you to: • Apply color to specific elements • Establish paragraph formatting (line spaces, indentations, alignment) • Establish font formatting (type face, style, size, and so on) • Set margins and borders and add padding as needed • Apply background images or background colors • Create link effects and style lists But there are more styles. In fact, almost everything you can change about how your text is presented can be created and applied as styles using CSS.

HANDS ON: ADDING STYLE RULES AND APPLYING STYLE ■

The best way you can get a feel for what is possible is through experimentation. You’ve done a little of this already through examples in this chapter. To continue, you can create or copy various types of content and then apply different formatting (backgrounds, font styling, and alignment) to see what is most effective and what is less readable. Then you can create your style sheets to establish these styles. However, modifying a style sheet to indicate a specific format is a great deal easier than modifying each and every page that contains an element you need to change. That, as you now know, is the key advantage with using style sheets.

Issues with Style Sheets Before you launch fully into creating and applying styles for formatting, you should have a bit more background on what you can do with them; you may need some of this information now or later. One advantage is that a style sheet can include another style sheet. This is useful if you have an existing style sheet that designates a particular set of styles, and you now want to augment this with a second style sheet that includes and links to the first. Another advantage is that a style sheet can set up more than one condition. You can specify an h1 heading that appears in red, and you can specify another that appears in blue, for example. Similarly, you can set up a style sheet that specifies what a visitor will see under the best circumstances (where he or she has a large screen display with superior video qualities and high-speed Internet access) and that also designates how the page or site should look if those ideal circumstances aren’t available. A great starting place to learn more about what you can do with styles can be found on the World Wide Web Consortium website’s style section at www.w3c.org/style/. Also check out some of the reference sites offered in Chapter 7.

Hands On: Adding Style Rules and Applying Style If you’ve been following along in this book sequentially, you may have already created at least two style sheets from your efforts in Chapters 6 and 7. This means that you have styles you can apply with the sheets. For this section, use the style sheet called testcss.css that you developed in Chapter 7. FrontPage includes a Style toolbar. You can turn this on by choosing View ➔ Toolbars ➔ Style. Clicking the Style button from the toolbar acts as if you had selected Format ➔ Style.

189

190 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Now let’s add a particular rule to your testcss.css style sheet in this section and then apply it in the following “Applying Style” section. Using the Artisan’s Heirloom Seed Company’s site-in-progress as an example, let’s assume the webmaster has an already established style sheet, drawn, in part, from the styles applied automatically from the theme chosen to span the site. This style sheet includes settings for many common text elements, including headings, normal paragraphs, bulleted lists, and so on. You can see this by clicking the Style box in the formatting toolbar, as shown in Figure 8.13. But for a new feature on the site, a column being written each month by the company’s founder, the webmaster wants to make another paragraph style available just for use on this column. The new paragraph style will use 12-point Garamond font, with justified text spaced 1.5 lines apart, a leading paragraph indentation of five spaces, and a margin on each side of the text of three characters. If, for some reason, Garamond isn’t available, the webmaster wants to display this column in Comic Sans MS. Barring that, the webmaster wants to use Arial. This example again breaks the grouping-of-family-fonts rule mentioned earlier. To observe that rule, the webmaster should perhaps set Helvetica as the first font, and Arial and Sans Serif as the alternates.

Figure 8.13 By default, you may have a very short list of style classes or, if using themes, a longer list related to style rules used within the theme.

HANDS ON: ADDING STYLE RULES AND APPLYING STYLE ■

While only the webmaster has their style sheet available, you’re going to follow along by adding a style like this (and stacking it to accommodate more than one font selection) to yours. Complete these steps: 1. Choose File ➔ Open. Open the file named testcss.css. 2. Select Format ➔ Style. 3. In the Style window, click New. 4. In the New Style window, under Name (selector), type p.column, and then click Format. 5. Choose Font and specify Garamond, with a size of 12 pixels. Click the box under Color and select a dark green. Click OK. Most of FrontPage refers to points (pt) in terms of font size. Points are based on publishing’s printed past. However, in web publishing, the convention is to use pixels (px), which represent the size of a single point in a graphic (and a font is a graphic) on your screen. You can use either but when you’re working with HTML, style sheets, and so on, you should try to use px rather than pt.

6. Click Format again and choose Paragraph. Set the alignment to Justify, the left and right margins to 3 characters, the indentation to 5 spaces, and the line spacing to 1.5. Click OK. 7. Look at the style sheet open in FrontPage and find the p.column entry (perhaps at line 2). Point just after the word “Garamond,” before the semi-colon and type Comic Sans MS, Arial. Delete any remaining space between the final font title and the semi-colon.

8. Choose File ➔ Save to save this change to your Cascading Style Sheet. In the next section, you’ll see how to apply the style you just established. But before you do, note that you can modify a style you created (or was created for you) by completing these steps: 1. Choose Format ➔ Style. 2. In the Style window, select the style you want to modify from the list on the left, and then click Modify. 3. Click Format and make the changes you want. Click OK until you exit the Style window.

Applying Style Once you’ve created your style rules, applying a style is really the easy job. Using the previous example of a special paragraph style designed for the column for the Artisan’s Heirloom Seed Company site, you can apply that style by following these steps: 1. Choose File ➔ New ➔ Blank Page.

191

192 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

2. Select Format ➔ Style Sheet Links. Click Add and select testcss.css. Click OK. 3. Type the following into the page exactly as presented: Welcome to the latest edition of our monthly newsletter. Remember: a new one is posted the first week of each month. March 2004 Founder’s Column It may be gray, wet, and brown outdoors but take advantage of this period by readying your spring and summer garden. For example, get our PotMaker and you can form your own seed pots out of newspaper to get ready for your first order from us.

4. Highlight the first paragraph, click the Style window on the Formatting toolbar, and select Normal (see Figure 8.14). 5. Highlight the second paragraph, click the Style window, and select Heading 1. 6. Highlight the final paragraph, click the Style window, and choose Normal. Once you’re done with this example, the results should appear as in Figure 8.15, with a Normal paragraph style on top, a first-level heading (h1) in the middle, and the special column style on the final paragraph, all provided courtesy of the style sheet (testcss.css) you linked to this page in step 2. If you don’t like the results, you can always modify them later and then update the style against the actual text. Figure 8.14 Choose the desired style from the list.

REPURPOSING OFFICE CONTENT ■

193

Figure 8.15 While a normal paragraph, as defined for this site, doesn’t justify its text or add spaces before or after text, this special paragraph style does.

Repurposing Office Content If you or the clients you’re designing for are anything like most of us, some of the content you’re inclined to post on your website already lives in other software such as letters, articles, chapters, reports, spreadsheets, and much more. Not all material is apt to be copied from any individual file, especially because users are inclined to read shorter, important bits of information rather than commit themselves to working through long documents and tables online. When you do need to publish long documents in their entirety, you can save them as web pages and include them in your website. In fact, one good trick is to provide a snippet of the information found in a long document— which most readers can read quickly and move on—while providing a link to the full document for those with an interest in reading the entire text. This section focuses on pulling these smaller bites of information from Office. Besides copying material from Office programs such as Excel, which you learned about in Chapter 5, “Gathering Content and Working with a Team,” the most popular program for copying material from is Microsoft Word, with Microsoft PowerPoint a close third. You’ll also discover that copying material from Word or PowerPoint is pretty easy, as you might imagine. I’ll show you the details momentarily. However, not everything copies beautifully, or appears or works well right out of the Paste window. Pay close attention to the formatting of the copied material so that the great design you’ve put together for your website is not harmed when you publish your content.

194 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Issues in Copying Before you jump into the specifics of copying material from Word and PowerPoint, let’s look at a few issues that may require a bit of thought and review.

Unintended Consequences in Formatting and Appearance When you’re copying material from either Word or PowerPoint, expect to look it over carefully in Preview mode and inspect it again once you’ve published the material to your site. This truth extends to copying from other text-processing software as well. Copying material from external sources, even other Office products, may have one or more of these undesirable outcomes: • Codes, including HTML and formatting symbols, used in the source software may copy over too, and wreak havoc with the rest of your page. • Existing formatting issues in the source may be carried over, and your standard-width column may suddenly become two pages wide or develop unwanted spacing problems. • Visible garbage characters may be inserted. • You may unintentionally fail to copy everything you want or copy far more than you need. For example, suppose you have a situation where you want to take the following information contained in a word-processing document to place on a page on your website:

If you copied this into your FrontPage site, the formatting may be a little off, as you can see in Figure 8.16. But depending on the program you copied from, copying the text with the proper formatting may be easier said than done. For example, if I copy text like this from Word, I have to do some realignment, delete some blank spaces, and make some other adjustments to make it look better. If I do the same thing with the material contained in a page of my writer’s story development software, I sometimes see control characters (symbols) appear in my page. Even if I delete white space and reformat for the web page, often I continue to spot irregularities with the copied material when I preview or publish that page. There are a few different ways you can approach this. • You can save the text you want to copy into FrontPage as straight text first. This removes all formatting.

REPURPOSING OFFICE CONTENT ■

195

Figure 8.16 What looks good in one program won’t necessarily look good in FrontPage.

• You can use the Paste Options, discussed in the next section. Choose Keep Text Only from the Paste Options smart tag, and you can copy just the text without the formatting. • One way I use a lot when copying from non-standard software, such as my story development program, is based on the fact that you’re more apt to pick up extraneous material and garbage characters if you copy formatting marks along with the text. So be sure to limit yourself in what you copy. Look back at the text example, and you’ll see that there are three distinct parts to be copied: • The paragraph that starts “Statistics for 2001” • The heading (“Comparison…”) • The final paragraph that starts “Information listed below” Highlight each of these elements one at a time, only highlighting from the first character in the line or lines to the last character. Then copy them into FrontPage. In this manner, you’re less likely to pick up extraneous characters.

Paste Options—A Smart Tag Button You’ll discover that whenever you paste either text or graphics into FrontPage, you usually encounter a smart tag button delineated in FrontPage as the Paste Options button, as shown in Figure 8.17. Under Paste Options, you can assert some control over how the material you’re pasting is formatted.

196 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Figure 8.17 The Paste Options button should automatically appear upon pasting.

When you paste and the copied elements appear, click the Paste Options button to produce a menu, from which you have three options: Use Destination Styles Use this option to apply the styles already set for this web page; the content is being pasted into an existing style in FrontPage rather than using the style applied to the original text. Keep Source Formatting Use this option to maintain the formatting from the original file. Keep Text Only Use this option to toss out all the pre-programmed formatting and just copy the material as straight text. By default, meaning that if you don’t select a different option, FrontPage opts to keep the original source formatting. You can change this later, if needed.

Hands On: Copying Material from Microsoft Word and PowerPoint Copying and pasting material from Microsoft Word and PowerPoint into FrontPage, as already mentioned, is usually accomplished without a lot of fuss. You just need to be sure to clean up any formatting problems that develop from it. Let’s go through the process with a real-life example. You’ll use a container for your text in FrontPage to receive content that you copy from a Word document. But note that the same basic instructions can apply if you’re copying text from PowerPoint as well. Follow these steps: 1. Choose File ➔ Open and select the testtext.htm file you created earlier in this chapter.

HANDS ON: COPYING MATERIAL FROM MICROSOFT WORD AND POWERPOINT ■

2. Click in the right-hand cell and delete the text currently found in that cell. 3. Open Word (Start ➔ Programs➔ Microsoft Word) to a blank document. 4. From the formatting toolbar in Word, format the font as Verdana, 18 pt., and B (bold); select Center alignment; and type About Text Imports. Press Enter twice. 5. Again from the formatting toolbar, format the font as Verdana, 10 pt. (The bold and center alignment are no longer engaged.) 6. Type the following: Don’t assume you have to take text from Word and import it directly into a blank page, although you can do that, too.

For example, if the text is short enough to fit, it can be copied into a text box in something like an AutoShape. Or, as you’re doing here, you may copy it into a table cell.

Be aware, however, that adjustments may be necessary after the import is complete.

7. Highlight the entire range of text you just added and then press Ctrl+Insert. 8. Go back to testtext.htm in FrontPage, point to the cell on the right, and press Shift+Insert. Look at the page once you’re done, and you’ll see some obvious problems. These are made even clearer when you preview the page in your browser, as you can see in Figure 8.18. For one, the look of the right cell doesn’t quite work with the content in the left cell because of the differences in formatting. But let’s focus on the right cell only. While the copy/import process was faithful, what looked all right in a Word document doesn’t quite fit the container provided for it. Using such large fonts, for instance, doesn’t seem to work here. In addition, the entire body of text should appear more compressed, along with padding added to the cell to accommodate the volume of text. Follow these quick fixes as an example of how you can implement improvements: 1. Point to the empty space between each paragraph as well as between the heading and the first paragraph. Click Delete to remove the blank lines. Do the same at the end of the last paragraph. 2. Right-click the right cell and choose Cell Formatting. 3. When the Cell Formatting task pane opens at right, type 10 in the box to the right of Padding.

197

198 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Figure 8.18 A preview of the page where text was imported

Look again at the cell and its contents; you’ll see the fit is better. If you want to improve it further, you could do one of the following: • Highlight the text of the heading and from the Formatting toolbar, change the font size to 14 pt. Next, highlight the remaining text, and from the toolbar, change the font size to 10 pt. • Highlight the entire range of text, choose Format ➔ Font, and choose the Character Spacing tab. Under Spacing, click the list box to select Condensed. Under Position, click the list box to choose Top. Click OK. Figure 8.19 This cell’s text is condensed through character spacing.

You can see the result of making the second set of changes in Figure 8.19, where you now have far less white space floating around the characters making up the text. Look back at the Cell Formatting task pane discussed in steps 2 and 3. Let’s add one more dress-up change to the cell that contains your imported content by adding an effect to it. 1. Right-click the right cell and select Cell Formatting. 2. Near the top of the Cell Formatting task pane (see Figure 8.20), doubleclick Cell Corners and Shadows. 3. In the Corners area, click the drop-down box to the right of Color and choose black. Then click the drop-down box next to Border Color and choose the same pale green that was used in the left cell background.

HANDS ON: COPYING MATERIAL FROM MICROSOFT WORD AND POWERPOINT ■

199

4. Under Apply, click the middle option, which applies this formatting to the top-right corner. 5. Click the X at the top-right corner of the Cell Formatting pane to close it. Your cell should now look like Figure 8.21. Figure 8.20 Define color and orientation in the Cell Formatting task pane.

Figure 8.21 Corners and shadows can add a nice finishing touch to cells.

200 ■ C H A P T E R 8 : I N S E R T I N G A N D F O R M A T T I N G T E X T

Picture It You’ve mastered the fundamentals of text formatting in this chapter and learned how to format containers such as table cells and shapes too. Next, in Chapter 9, “Working with Graphics,” you’ll focus on creating, inserting, and editing graphics and gallery choices for use on your website.

CHAPTER 9

Working with Graphics CHRISTIAN CRUMLISH

For most people, the Web is a graphical environment. Part of the appeal of the Web is the way it can mix words with pictures. Most eye-catching or elegant web designs depend on the judicious use of a few graphical elements to pull the whole page together. Graphics appear on web pages as logos and illustrations, but also as bits of background, borders, and corners, and even sometimes as text. In this chapter you’ll see how to place, edit, and otherwise work with graphics in FrontPage. This chapter covers the following topics: ■

Creating graphics outside of FrontPage

■

Understanding web-friendly graphics formats

■

Placing graphics onto a FrontPage web page

■

Editing graphics in FrontPage

■

Editing graphics in an external editor

■

Making thumbnails

■

Tracing a design image

■

Creating a photo gallery

202 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Creating Graphics FrontPage is not a graphic design program. Like all Office System applications, it has some rudimentary drawing features. But if you need to create your own images, you’ll have an easier time working with a program designed for this purpose such as Adobe Photoshop, Adobe Illustrator, Macromedia Freehand, or Macromedia Fireworks. If you outsource the development of your graphics to a third-party visual designer, she’ll probably use one of those programs. FrontPage does offer a lot of graphics-editing features, which I’ll get to later in this chapter. Sometimes you may want to grab existing images, including artwork you already have on paper and photographic images of scenes available to you directly. A real estate company, for example, may have to display new house images every week. Most newer computer operating systems offer built-in application tools for importing the images from a scanner or digital camera. (And if they don’t, you can generally install and use the software provided by the maker of your scanner or digital camera.) Figure 9.1 shows a series of photographs being downloaded from a digital camera in the Scanner and Camera Wizard, a typical digital photo-downloading tool. Select the images that you want to import, and the wizard or import application handles the rest (see Figure 9.2). With cameras, you usually have the option of deleting the images once they’ve been downloaded successfully. Of course, do this only when you’ve selected all the images that you want to preserve, even if you don’t plan to use them all in your web project. If an image has been created in a different program (for example, Macromedia Fireworks, as illustrated in Figure 9.3), you or the artist can save it in a web-friendly format such as JPG or GIF. (The next section discusses graphical file formats.) A designer can also produce a

Figure 9.1

Figure 9.2

Use FrontPage’s Scanner and Camera Wizard to select photographs to use on your website.

Once you’ve made a selection, the Scanner and Camera Wizard takes over the copying.

CREATING GRAPHICS ■

203

design comp for you (an image of a complete web page design), and then “slice” or “cut” it up for you into component pieces so that you can lay out the page for real yourself in FrontPage. Microsoft Office System also includes a program called Picture Library (see Figure 9.4). You can use Picture Library to organize your pictures and do some rudimentary editing such as cropping and adjusting color, brightness, and contrast. Most of these editing controls are also available in FrontPage. Figure 9.3 Macromedia Fireworks is a graphics-editing program designed to work with web graphics.

Figure 9.4 Picture Library won’t help you create images, but it can help you organize and manipulate them.

204 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Creating Drawings in FrontPage There is an Office System drawing module available in FrontPage, and you can use it to create graphics in a pinch. FrontPage stores these graphics as proprietary vector information in an XML format, so they may not render correctly in all browsers. (You’ll learn more about XML in Chapter 16, “An Overview of Database-Backed Sites.”) To explore this drawing feature, select View ➔ Toolbars ➔ Drawing to bring up the Drawing toolbar or choose Insert ➔ Picture ➔ New Drawing to start a new drawing. With the drawing toolbar, you can create shapes, lines, and arrows. You can insert text or WordArt, color in shapes and their borders, manipulate the attributes of the lines and arrows, and add shadows or 3-D effects to the shapes (see Figure 9.5). Double-click your drawing to edit its attributes, as illustrated in Figure 9.6. On the Colors And Lines tab you can change the color of the selected drawing and manipulate the qualities of its border lines. On the Size tab, you can adjust the dimensions of the drawing. On the Position tab, you can control how the drawing is placed relative to the surrounding text. On the Site tab, you can supply some alternative text (see Figure 9.7) to be displayed by any non-Microsoft browsers that cannot display the drawing because of its reliance on proprietary markup. Figure 9.5 A drawing in FrontPage is represented as a set of proprietary XML tags.

CREATING GRAPHICS ■

Figure 9.6

Figure 9.7

Change color or transparency on the Colors And Lines tab of the Format AutoShape dialog box.

Enter alternative text to describe the drawing to users whose browsers can’t display it.

205

Inserting WordArt into your Pages One final type of graphic that you can create using FrontPage is WordArt, another Microsoft Office–specific feature. WordArt, which has been around Word and other Office applications for years now, is a tool that can create, distort, and insert graphical text onto your page (see Figure 9.8). Again, this is a proprietary Microsoft format that does not display properly in any non-Microsoft browsers. To insert WordArt, select Insert ➔ Picture ➔ WordArt (or click the WordArt button in the Drawing toolbar), choose the style that you want to work with, type your text, format it, and click OK. FrontPage automatically takes the sized, styled text and manipulates it per the WordArt style that you selected. Warning! Most applications of WordArt will be considered amateurish and cheesy by sophisticated web users.

Figure 9.8 Choose from any of these unique text manipulations for your custom WordArt banner.

206 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

GIF, JPEG, and PNG File Formats Before getting too far into the mechanics of inserting a graphic into an HTML page for publication on the Web, let’s briefly discuss the types of graphics that web browsers can handle and when is a good time to use each of them.

GIF Files GIF files are graphics files that have been compressed by indexing the colors in the graphic. This means that if there are shades of different blues or different reds, saving a file to a GIF format “generalizes” the colors so that there aren’t so many different shades or variations. The GIF format uses a process called dithering to mix varying amounts of two adjacent colors in order to simulate a smoother transitional gradient between them. This process cuts down on the amount of descriptive information contained in the file, which in turn considerably reduces the file size. GIF files have 256 colors maximum, but they store a smaller palette if fewer colors are required, reducing the overall size of the file. GIF files are best for graphics with areas of solid, flat color, very few colors, line drawings without too much detail, and brief animations. The general rule with GIF files practiced by web designers and graphic designers alike is to only use the GIF format if • You do not have gradients (where colors fade into one another or where there are many tones such as skin, grass, or sky). • You need your image to have a transparent background (which can make an image appear to float instead of having a visible rectangular edge). For the most part, if you stay away from GIF files when you are posting photos, you’ll be just fine. A GIF file can be saved with interlacing so that it appears to draw in the browser more rapidly. Interlacing is a way of ordering the saved pixel information so that the picture is drawn on-screen not from top to bottom but is instead sketched in rapidly and then fleshed out with successive passes offering greater detail until the entire image has appeared.

JPEG Files JPEG files are predominantly used for photographs. Sometimes, if you have a non-photographic image that has many gradients such as a piece of fine art or a really cool illustration, you may want to save your image in the JPEG format, especially if a GIF version of your image looks horrible. JPEG is a “lossy” format, meaning that—depending on the degree of compression—some of the information in the source image may not be preserved in the JPEG version. JPEG files cannot have a transparent color the way GIF files can.

INSERTING GRAPHICS INTO A WEB PAGE ■

A JPEG file can be saved for progressive rendering, so that the browser can display at least some of the image rapidly. The image appears to sharpen in focus as each pass refines the visual information a bit further until the entire image is finally loaded. JPEG files have many levels of quality (1 to 100), so you’ll want to play with the different levels, making the quality level as low as possible to reduce file size. The best way to do this is to save a file at a medium level such as 40 and then drag and drop your image onto a web browser and see how it looks. If it looks good, leave it. If it looks jagged or pixilated, increase the quality level five notches at a time until your image looks presentable.

PNG Files PNG (Portable Network Graphics) files are intended as a format to supplant GIF and JPG, combining the best aspects of both formats such as larger color palettes, subtle color gradients, interlacing, and transparent colors. Unfortunately, to date, very few browsers (besides recent versions of Microsoft Internet Explorer) have the ability to display PNG files, so they haven’t really been adopted as a standard yet. Most graphic editors can create PNG files, and Macromedia Fireworks uses PNG as its default format, so you may find yourself sending or receiving the format at some point. But when the time comes to insert the graphic into a web page, your best bet at this time is to convert it first to GIF or JPG format, depending on the nature of the image.

Inserting Graphics into a Web Page To insert a graphic into a web page with FrontPage, first place the insertion point approximately where you want the picture to go. Then select Insert ➔ Picture and choose from the submenu, depending on the type of picture that you want to insert. Alternatively, click the Insert Picture From File button on the Standard toolbar.

Inserting Clip Art If you plan to insert a clip art image (clip art refers to canned images available without copyright limitations), follow these steps: 1. Choose Insert ➔ Picture ➔ Clip Art. If this is your first time working with clip art, the Microsoft Clip Organizer scours your computer to build a library of available clip art images. Don’t worry if you haven’t got any! Microsoft also provides an extensive free library of clip art images via the Web, as you’ll see shortly. 2. If nothing shows as available, click the Clip Art On Office Online link in the Task pane to search for clip art on Microsoft’s website. An Office Template And Media Control dialog box appears as your copy of FrontPage and the Microsoft website get themselves in sync (see Figure 9.9).

207

208 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Figure 9.9 Microsoft Office Template And Media Control ensures that FrontPage knows what to do with downloaded resources from the Microsoft site.

3. Once at the clip art depot, you can specify topical categories such as “Plants” and then search for keywords such as “seed.” 4. As you narrow down your choices, click the check boxes under the images you’d like to obtain. This adds them to your selection basket. 5. When you’re satisfied, click the Download link to grab the images. This takes you to a download page. 6. Read the terms of use for the clip art, if any, and then click the Download Now button. 7. When given the choice of opening or saving the downloaded file, choose Open so that it can connect to your Clip Organizer module and implant the clip art there successfully.

INSERTING GRAPHICS INTO A WEB PAGE ■

209

Inserting Graphics from a File

Figure 9.10

To insert an existing graphic from a file, follow these steps:

Select the picture that you want to insert in the Picture dialog box.

1. Select Insert ➔ Picture ➔ From File (or click the Insert Picture From File button on the Standard toolbar). The Picture box opens. 2. Navigate to your website’s Images folder (see Figure 9.10). If the graphic you want to add to your site is not yet stored in the correct folder in your local website hierarchy, that’s OK. FrontPage will notice this and give you the opportunity to copy it to the correct location when you next save the page (see Figure 9.11).

Inserting Graphics Directly from a Scanner or Camera You can insert a picture directly from an external hardware device such as a scanner or digital camera by choosing Insert ➔ Picture ➔ From Scanner Or Camera. If your device is connected to your computer and turned on, FrontPage should detect it. Click the Insert or Custom Insert button to proceed. It is rare to directly insert a graphic into a page from a camera or scanner. More commonly, you’ll import your images into your preferred graphics-editing software, crop, resize, and optimize your images, and only then insert them into the web page.

Other Ways to Insert Pictures Thumbing through the rest of the Insert Picture submenu, you’ll see that there are a handful of other methods for inserting pictures. I’ve already covered some of these methods (New Drawing, WordArt, and AutoShapes), and a few other methods that deal with multimedia are covered in later chapters (Flash in particular, and video).

Figure 9.11 FrontPage reminds you to save your image with the rest of your website.

210 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

One additional option here is to insert a new photo gallery. I’ll cover that later in this chapter after I’ve explained how to edit and manipulate pictures; you’ll want your pictures in their final form before you arrange them into a gallery. (Despite the name, a photo gallery can include various types of graphic images, not just photos.) You can also schedule a picture or a series of pictures to appear or alternate on some kind of schedule. Kate will discuss this kind of dynamic display of content in Chapter 13, “Adding Animation and Multimedia.”

Positioning a Graphic You can use HTML presentation tags to lay out images, or you can position images using Cascading Style Sheets (CSS). FrontPage’s commands lead you toward using HTML presentaFigure 9.12

tion, unless you make a point of using CSS

Use the Appearance tab of the Picture Properties dialog box to specify how text should wrap around your graphic.

features only (and this isn’t easy unless you know CSS fairly well). It’s worthwhile to become familiar with most approaches to layout. Once you’ve inserted a picture, you can specify how it should be positioned on the page—in particular, how text should wrap around it—by double-clicking the picture. On the Appearance tab of the Picture Properties dialog box that pops up, choose None, Left, or Right for the wrapping style (see Figure 9.12).

Hands On: Inserting and Positioning a Picture To experiment with inserting and positioning pictures, download and open two files from this book’s website (www.frontpagesavvy.com). The files are in the folder for Chapter 9: a web document called index-noart.htm and a picture called logo.gif. To open the web document in FrontPage, click the Open button, browse to the folder containing index-noart.htm, select it, and click Open. You’ll see that it’s a version of the Artisan’s Heirloom Seed Company’s home page containing text only. 1. Place the insertion point just to the left of the “J” in Jump at the top of the right-hand column of text (see Figure 9.13).

HANDS ON: INSERTING AND POSITIONING A PICTURE ■

211

Figure 9.13 A text-based page ready for some artwork to spruce it up

2. Click the Insert Picture button or select Insert ➔ Picture ➔ From File. The Picture box opens. 3. Select logo.gif and click Insert, as shown in Figure 9.14. FrontPage inserts the picture, pushing the text over to the right, as illustrated in Figure 9.15. 4. Right-click the picture and choose Picture Properties from the menu that pops up (see Figure 9.16). The Picture Properties dialog box opens. Figure 9.14 Choose a picture to insert.

212 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Figure 9.15 The picture has been inserted, but the text isn’t flowing around it gracefully.

Figure 9.16 Use the Picture Properties dialog box to specify the text wrap for your picture.

HANDS ON: INSERTING AND POSITIONING A PICTURE ■

213

5. In the Picture Properties dialog box, choose Right alignment for the picture (see Figure 9.17). This option sets alignment for just the picture, unlike the alignment buttons on the toolbar, which affect the text that the picture object is embedded in. 6. Now, as you can see in Figure 9.18, the text wraps around the left side of the picture.

Figure 9.17 Settings that you make in the Picture Properties dialog box affect only the picture, not the text that you’ve embedded it in.

7. Try switching the picture to the left side of the text. 8. Now open Split view. 9. Click the picture; this selects the tag in Code view. 10. Drag the selection in the Code pane up so that it comes before the tag. 11. Click just past the closing > at the end of the tag. 12. Type
to insert a line break. This enables the subsequent text to drop below the picture and not wrap around it, without losing the right alignment of the picture itself (see Figure 9.19). Figure 9.18 This is one way to position the picture and text copy.

214 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

13. Switch back to Design view (see Figure 9.20). 14. Save the changed document to a new file and you’re done. Figure 9.19 Adding the clear attribute to the
tag prevents subsequent text from wrapping around the picture.

Figure 9.20 The finished page with the inserted art correctly positioned

HANDS ON: INSERTING AND POSITIONING A PICTURE ■

Setting Picture Properties As hinted at earlier in Figure 9.12, there are other picture properties that you can manipulate besides positioning. Each of the controls in the Picture Properties dialog box corresponds to an attribute specified in the picture’s tag. You can right-click a picture and choose Change Picture File Type to change a file’s format from GIF, JPEG, or PNG to any of the others. You can also turn on or off interlacing or transparency on the Picture File Type dialog box (for the formats that permit those options).

There are several ways to work with picture properties to change the appearance of pictures. For old-time HTML users, the easiest way might be to edit the tag (usually an tag) directly. You can do this with the Quick Tag Editor or in Code view. (See Chapter 17, “Working Directly with Markups and Scripts,” for a discussion of working directly with markup and code.) To edit a picture tag with the Quick Tag Editor, follow these steps: 1. Click the picture. 2. Click the tag in the Tag Editor bar. 3. Select Edit Tag. The Quick Tag Editor pops up, displaying the tag. 4. Edit the tag’s attributes. 5. Click the check mark when you’re done. You can also switch to Code view or Split view to edit a picture’s tag directly. In Split view, if you click the picture, the tag is highlighted in the Code pane, as you can see in Figure 9.21. If you don’t feel like getting your hands dirty with the HTML, you can manipulate your picture in the Appearance tag in the Picture Properties dialog box. As before, double-click the picture to get there. Besides controlling text wrap, you can also do the following: • Choose an alignment (Left, Right, Top, Texttop, or Middle). • Insert a pixel setting for horizontal or vertical spacing. • Specify a border thickness. By default, it’s zero. If you give it a thickness and then use the image as a link, the border gets hyperlink coloring. • Manually change the height and/or width of the image as displayed. This doesn’t change the actual dimensions of the underlying source image, so it’s not a useful way of optimizing the download time for images. In addition, it degrades the quality of the image if you use this option to make it appear larger or to change the aspect (height-to-width) ratio. To use CSS to control the display of the picture, click the Style button and either create or select styles as appropriate.

215

216 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Figure 9.21 Edit a picture’s tag directly in Split view.

On the General tab of the Picture Properties dialog box, you can supply alternative text or select a different source graphics file, as illustrated in Figure 9.22. To choose a different image, click the Browser button, find the file you want, and click OK. To edit the image, click Edit. (The next section discusses picture editing.)

THE END OF LOW SOURCE When the Web was getting started and most people used modems to connect, if the picture you were displaying was quite large, it was common to supply a smaller (lower resolution or black-and-white) version of the picture that the browser displays first to give the user some idea of what’s to come while the larger version of the image is still downloading. This was called the low source (or lowsrc) version of the image. This approach is no longer employed by most serious web designers, who instead focus on ensuring that their images are optimized for efficient downloading to begin with. If you nonetheless still want to add a low-resolution source image, enter its filename or click the Browser button next to Low-Res in the Alternative Representations area of the General tab of the Picture Properties dialog box, select the image you want, and click OK.

HANDS ON: INSERTING AND POSITIONING A PICTURE ■

217

All images on the Web should come with alternative text, so that users who cannot or do not wish to download and view your graphics still get some idea of what the image means or what information it conveys. Without alternative text, most browsers display the word [IMAGE] or a symbol indicating a generic graphic. In fact, a person using a screen reader can hit a page and end up hearing “image image image image image image” instead of descriptions. You can imagine how annoying this must be! To enter alternative text, type it in the Text box under Alternate Representations. You can also provide a long description for the image; some browsers display this description when the mouse pointer hovers over the image. The long description (longdesc) field can be filled in with more detailed information about the image or its role in the communication goals of the page. The last area on the General tab of the Picture Properties dialog box deals with images that also function as hyperlinks, something I’ll discuss in detail in Chapter 10, “Inserting and Maintaining Hyperlinks.”

DESIGNING WITH IMAGE PLACEHOLDERS (WHEN THE ART ISN’T READY YET) Sometimes the person developing the artwork for your website is working in parallel with you, and you may not have all of the resources you ultimately need on your page when the time comes to work on the page layout. When that happens, you can create a dummy tag to function as a placeholder until the final art is ready. As long as you know the dimensions of the missing image, you can insert an incomplete tag into the Code view of your document where you want your placeholder to appear. For example, a 400 × 300 image can be represented by the following tag:

The placeholder appears on your page like this: You can now position the image by double-clicking it and working with its Picture Properties dialog box, just as you would with a real picture. Then when the artwork appears, put the file with the rest of your images, double-click the picture placeholder, and select the new file to replace the blank one.

Figure 9.22 Use the General tab of the Picture Properties dialog box to change the image file, specify alternative representations for your image, and use the image as a hyperlink.

218 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Editing Graphics FrontPage provides a variety of useful picture-editing functions that you can access in a variety of ways. Some of them (such as an automatic thumbnail creator) are available on a contextual pop-up menu that appears when you right-click a picture. All of them are available on the Pictures toolbar, which you can bring up from the View ➔ Toolbars submenu or by rightclicking any picture and clicking Show Pictures Toolbar. Rotate Flip Right 90° Horizontal Position Bring Absolutely Forward

Text Auto Thumbnail Insert Picture From File

Line Format Style Picture

Less More Contrast Brightness

Circular Polygonal Hotspot Hotspot Bevel Resample

Flip More Vertical Contrast

Send Rotate Backward Left 90°

Set Color Transparent Color Less Crop Brightness

Highlight Hotspots Select Rectangular Restore Hotspot

Depending on your situation, some of these features are more useful than others!

Adding Text If you need to add text to an image—to label part of it, for example—take the following steps: 1. Click the Add Text button. 2. If the picture is a JPG file, you’ll be warned that FrontPage is converting it to a GIF file to enable the addition of text. Click Cancel if this is not an acceptable tradeoff. 3. Type the text in the highlighted box and position it as intended. 4. Format the text as desired just as you would in HTML. You can make it boldface or italic, change the color, select a primary typeface, and so on. 5. When you’re done, click OK.

Creating a Thumbnail A thumbnail image is a smaller version of a large image, often used to preview a number of large images or to provide an index of images through an easy-to-use clickable interface. If

EDITING GRAPHICS ■

you select a picture and then click the Make Thumbnail button, FrontPage replaces the original picture with a smaller version. It also automatically turns the thumbnail into a link to the original graphic. So, for example, if you have a large number of photographs you want to display, you can place them all on one page and then turn each of them into thumbnails. This creates a single, compact jumping-off point that your visitors can use to explore the full-sized images. To control how FrontPage makes thumbnails, take the following steps: 1. Choose Tools ➔ Page Options. 2. Go to the Auto Thumbnail tab. There you can set a default size for the width, height, or shortest or longest size of each thumbnail. 3. If desired, specify a border width. The border is colored as a clue to the fact that the thumbnail is a hyperlink to the full-sized image. 4. If you like, you can give all your thumbnails a beveled edge. 5. When you’re done, click OK.

Using Absolute Positioning By default, pictures are positioned relative to the text surrounding them in the normal flow of the markup. But you can also position a picture relative to the page margin itself. To do so, follow these steps: 1. Click the picture. 2. Click the Position Absolutely button. This toggles on absolute positioning. You can still reposition the picture, but it will not change position if you alter the text on that page. To turn off absolute positioning for a picture, click the Position Absolutely button again. The Bring Forward and Send Back buttons are used when multiple absolutely positioned images are stacked on top of one another. (This is referred to as the z-index of the images or of any CSS boxes, in reference to the third positioning dimension: x is across, y is down, and z extends from the surface of the screen.) You use these buttons to rearrange the order of images in the stack. The z-index can be useful in creating dynamic effects when combined with scripting.

219

220 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Rotating and Flipping Rotating a picture to the left or right 90 degrees is fairly straightforward. Notice the image (now rotated) used in the Artisan’s Heirloom Seed Company’s website in Figure 9.23. Press one of the Rotate buttons twice (either toward the right or toward the left) to rotate a picture 180 degrees. Similarly, flipping the picture horizontally or vertically works as advertised. Repeat the same button to flip the picture back.

Adjusting Contrast and Brightness Sophisticated photo-editing software such as Adobe Photoshop offers a wide range of tools for fiddling with contrast, brightness, and hue. The controls offered in FrontPage 2003 are much simpler, more like what you might find on a television set. Press the More Contrast button to increase the contrast incrementally. Press the Less Contrast button to decrease the contrast. You can also increase or decrease an image’s brightness using the More Brightness and Less Brightness buttons. Figure 9.24 shows the Artisan’s Heirloom Seed Company’s image with increased brightness. For the most part, you need to experiment with these buttons to get a feel for how much of a change each click produces. If you’ve screwed up your picture completely and don’t remember how many clicks you are away from the original contrast or brightness, click the Restore button at the right end of the Picture toolbar to restore your picture to its original state. Figure 9.23 An image rotated 90 degrees

EDITING GRAPHICS ■

221

Comes a Cropper Cropping an image means trimming off an outer edge to reduce the size of the image and focus on some area of the original. To use the Crop tool, take these steps: 1. Click the picture that you want to crop. 2. Click the Crop button. 3. Click the upper-left corner of the area that you want to preserve and drag toward the lower-right corner, defining a rectangle, and then click the Crop button a second time. FrontPage will trim away the excluded area, leaving the cropped version of the picture in place of the original.

Editing Drawings The Line Style and Format Picture buttons tend to be grayed out and inaccessible for GIF and JPG images. But if you’re editing a drawing, these buttons suddenly become available. You can use the Line Style button to work with the edges of drawing objects, and you can use the Format Picture button to edit the properties of a drawing.

Working with Colors GIF images can assign one color in the palette to be transparent. A transparent color permits the background color or pattern to show through whenever it appears in the image. (You can choose any color to be transparent, but you can get some weird effects by just picking a color at random.) Figure 9.24 The Artisan’s Heirloom Seed Company’s image with its brightness cranked up

222 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Transparent colors are mostly used to give the illusion of non-rectangular images. The transparency bleeds into the background and the picture appears to have an irregular shape. This can be tricky around some images when there is a subtle wash of colors, because only one color can be transparent. To set a color in a picture to be transparent, take these steps: 1. Click the picture. 2. Click the Set Transparent Color button. If the picture is a JPG file, FrontPage warns you that it needs to convert the picture to a GIF file to proceed. (Click Cancel if you do not want to do this.) 3. The mouse pointer turns into an image of a pencil eraser. Use it to point to an example of the color in the picture you wish to turn transparent. Instantly, every instance of the color changes, showing the page background through. 4. If you want to make a different color transparent instead, repeat this process. 5. If you decide that you don’t want a transparent color, click the Restore button. Other color manipulations are available to you from the Color button on the Pictures toolbar. When you click the Color button, a menu pops up listing four options (they may not all be available for every picture): Automatic The Automatic option restores the defaults for the picture in question. Grayscale The Grayscale option converts a color image to shades of gray. Black & White The Black & White option converts an image to black and white (just like it sounds). Wash Out The Wash Out option reduces the saturation of an image so that it appears foggy and faint. Don’t forget that you can click the Restore button if you don’t like any of these effects.

Making Jewel-Cut Edges FrontPage can automatically create a beveled (jewel-cut) effect around the edges of your graphic. Just click the picture and then click the Bevel button. Don’t go overboard with this feature—it rarely looks very good. It can make certain iconic images look more like buttons, but for the most part, it looks old-fashioned and tacky on the Web.

Resampling and Restoring Graphics A common beginner’s error with web graphics is to change the apparent size of an image by reducing the height and width as displayed without editing the underlying image. When you

EDITING GRAPHICS ■

do this, the user still has to download the full-sized image, even if you think you’ve reduced the burden by reducing the picture as displayed. However, if you reduce an image’s height and width and then click the Resample button, FrontPage recreates the original picture with your new dimensions, thus passing along the savings in download time to your users. Remember that at any point while working on a picture, you can click the Restore button to undo all your changes and restore the picture to its state before you started working on it with the Pictures toolbar. There are five other buttons on the Pictures toolbar that won’t be discussed right now. They are used for turning images into image maps. An image map is an image that also functions as a hyperlink and that can have multiple destinations, depending on where it’s clicked. I’ll explain how to create and work with image maps in Chapter 10.

Editing a Graphic in an External Program If you have a graphics-editing program that you’re already comfortable with or if you want to manipulate your graphic in ways that the somewhat limited Pictures toolbar does not provide, then you can edit the picture in an external program. Of course, you can just run the other program, edit the picture, and then insert it back in FrontPage, but some programs can work in a more smoothly integrated way.

Editing a Graphic in Macromedia Fireworks If you install Macromedia Fireworks on a system with FrontPage already installed, Fireworks recognizes the presence of FrontPage and notifies FrontPage of its existence. As a result, you’ll see a new button in your Standard toolbar called Launch And Edit Selected Graphic In Fireworks. Just click a picture and then click this button to start Fireworks and edit the picture using its graphics-editing tools.

GRAPHICS-EDITING PROGRAMS You can’t get far in web design without at least one good graphics-editing program at your disposal. The most popular programs used for design and illustrations include •

Adobe Photoshop (www.adobe.com/products/photoshop/)

•

Adobe Illustrator (www.adobe.com/products/illustrator/)

•

Macromedia Freehand (www.macromedia.com/software/freehand/)

•

Macromedia Fireworks (www.macromedia.com/software/fireworks/)

223

224 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

Likewise, Fireworks has a feature for exporting graphics directly to FrontPage. (It’s rumored that the upcoming Fireworks 2004 will feature even tighter integration with FrontPage.) If you’re editing a graphic in Fireworks and want to export it to FrontPage, take these steps: 1. Click the Quick Export button. 2. Choose Other. 3. Choose Export To FrontPage (see Figure 9.25).

Configuring an External Editor To tell FrontPage what your preferred external editors are, follow these steps: 1. Choose Tools ➔ Options. The Options box opens. 2. Go to the Configure Editors tab. 3. Scroll down to the Jpg Jpeg Gif Png option in the Extension list box, and click the option. 4. Click the New Editor button to add the external application that you want available to the list of editors (if the application has not placed itself on the list already). 5. Browse to find the application on your system (Photoshop, Fireworks, and so on). 6. To make the new application the default external editor, click the Make Default button (see Figure 9.26). 7. Click OK. Figure 9.25 Fireworks can send an edited graphic directly to FrontPage.

CREATING A PHOTO GALLERY ■

225

Creating a Photo Gallery Chapter 7, “Working Through Page Layout,” describes how useful photo galleries can be to many types of websites. Chapter 7 also explains one method of creating a photo gallery working from the Insert Web Component window. A slightly different method is to use the Insert ➔ Picture submenu using the following steps: 1. Choose Insert ➔ Picture ➔ New Photo Gallery. The Photo Gallery Properties box opens. 2. On the Pictures tab, click the Add button. 3. Choose Pictures From Files (or Pictures From Scanner Or Camera) to choose images for the gallery (see Figure 9.27). 4. If you want, customize the size of the thumbnails in the gallery (each thumbnail will lead to a full-sized image). 5. Use the Move Up and Move Down buttons to customize the order of the images. 6. For the text in the photo gallery, you can choose to inherit the text formatting already in place on the page where you’re inserting the gallery, or you can override it and apply custom formatting to the gallery. 7. You can give each picture a short caption and an optional longer description. 8. Click the Layout tab to choose one of the four pre-defined photo gallery layouts (see Figure 9.28). Your choices are Horizontal Layout, Montage Layout, Slide Show, and Vertical Layout. You can also specify the number of pictures to include in each row. This applies to all of the pre-defined layouts, except for the Slideshow Layout, in which the thumbnails are arranged across the top of the photo gallery. 9. When you’re ready, click OK and FrontPage creates your photo gallery. To alter the composition or layout of the gallery in the future, just double-click it to return to the Photo Gallery Properties dialog box.

Tracing a Page Design I mentioned at the beginning of this chapter that if you’re working with a designer, she might supply you with a design comp depicting the final layout of your site’s home page and possibly some of the other pages as well. With FrontPage, you can actually place such a comp “behind” the page you’re working on and use it as a guide to your page layout and design.

Figure 9.26 Use the Configure Editors tab to assign an external editor to picture types and to specify a default external editor.

226 ■ C H A P T E R 9 : W O R K I N G W I T H G R A P H I C S

To add the design graphic as a tracing image, follow these steps: 1. Choose View ➔ Tracing Image ➔ Configure. The Tracing Image dialog box opens. 2. Click the Browse button to find and select the image. 3. If you want the image to be offset from the left and right margins by some number of pixels, enter them in the X and Y boxes. 4. Then reduce the opacity of the image to something less than 50 percent so that it’s clear what’s really on the page and what’s in the background. (The tracing image does not become an actual part of the page. You just use it as a guide while doing the page layout and design.) 5. When you click OK, the tracing image should appear. If at any point you want to hide the tracing image again, choose View ➔ Tracing Image ➔ Show Image. Repeat that step when you want to display the tracing image again.

Figure 9.27

Figure 9.28

Once you’ve chosen pictures, you can edit, remove, or rearrange them.

The Montage Layout is a free-form photo essay style. Click all of the layout options to preview them.

CONNECTING PAGES ■

227

Figure 9.29 Here’s a table layout attempting to match a design comp used as a tracing image.

Now you can insert pictures (which may themselves be sliced portions of the original comp), position them absolutely or relative to text or using tables or layers, as discussed in Chapter 7, and position text where indicated in the comp (see Figure 9.29).

Connecting Pages One unique characteristic of the Web compared to the traditional media that existed before widespread computer networks is the hyperlink. In books and magazines, you turn pages to navigate from one section to the next. In movies and on TV, the medium “plays” itself for you automatically. On the Web, you use hyperlinks to move from one page to another or from one portion of a page to another. In Chapter 10, you’ll see how to enliven your pages with hyperlinks and how to build the crucial connections that turn web pages into a website.

CHAPTER 10

Inserting and Maintaining Hyperlinks CHRISTIAN CRUMLISH

Hyperlinks (also known as hypertext links or just links) are the essence of the Web. Linking together individual web pages, using navigational links that follow a strict order, and using ad hoc links from anywhere to anywhere is what weaves the fabric of any given website. To work with links, you need to understand a little about the folder (directory) structure of your site and how references are made from one page to another. FrontPage makes this as easy as possible for you, but we’ll start you off with some fundamentals (skippable if you’re already an old hand) so that you know what you’re doing. This chapter covers the following topics: ■

Understanding links, anchors, and paths

■

Inserting a link

■

Turning pictures into links

■

Making image maps

■

Viewing links

■

Modifying links

■

Fixing broken links

230 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Fundamental Concepts One of the unique characteristics of the Web as a medium is that the “page-turning” mechanisms are built into the content of the pages. Hidden in the HTML of your web pages are tags that indicate anchors. These anchors are either the source or destination of a link or the location (in the form of a URL or a relative path) of a destination. The word link is also used to refer to files associated with an HTML document, such as a style sheet that can be referred to with a link tag in the HEAD section of a document.

One of the great advantages of using a program such as FrontPage to manage your website is that it can keep track of links for you and update them automatically when you make changes to the structure of your site (see Figure 10.1).

Understanding the Different Kinds of Links Hyperlinks are often called hypertext, and the medium of the Web is often referred to as hypertext. More properly, the Web features hypermedia—the nonlinear (“hyper”) linking process that connects more than just text. The most common types of links are the following: Text links The basic link—highlighted text. You select or click a text link, and something happens. Image links Image links are just like text links, but the element that you select or click is a picture instead of text. (Pictures can, of course, include text.) Figure 10.1 Viewing a website in FrontPage’s Hyperlinks view.

FUNDAMENTAL CONCEPTS ■

Image maps Image maps are complicated image links with variously shaped regions called hotspots, each of which links to an individual destination. Navigation bars A navigation bar is a consistent set of links (usually image links) displayed throughout a site or section of a site. These often include multiple behaviors such as changing appearance as you roll or hover over them, when you select them, and after you have selected them and are hovering over them. See Chapter 11, “Implementing Your Navigation Scheme,” for the straight skinny on navigation bars.

Anchors Aweigh Links on the Web connect an anchor in the source document (that is, a link from a web document, usually activated by clicking) with a target document or even with a named anchor within the target document. The target document can be the same document as the source document. Most of the time, only the source anchor requires a specific tag.

Where From? To create a link, you insert an anchor element into your page manually or using FrontPage tools. This anchor (a) element includes a hypertext reference (href) attribute, where the value is a URL or a path and filename, and a text or image description that is displayed as a link. Consider the following example: Go to Sybex

This code creates a link with the text “Go to Sybex”. When the user clicks that link, the browser opens the page at the URL www.sybex.com.

Where To? Most of the time, the specification of the address or path in the link’s href attribute sufficiently defines the target anchor. When it’s necessary to reach a specific section of a document (as in a page with a dynamic table of contents), you can insert named anchors. This is the same HTML anchor element a with a different attribute (name=”anything”), by the way. FrontPage provides a shortcut for this as well, but FrontPage calls named anchors bookmarks, consistent with usage in other Office applications.

What Happens? Links from one HTML document to another cause the browser to load the target page. Links to a bookmark (also called a named anchor) in the current page causes the browser to scroll up or down to the anchor’s location. Links to a bookmark in an external document cause the browser to load the target page and jump to the anchor’s location—if there is a named anchor somewhere in that page or, in the case of named anchors (bookmarks), within the page itself.

231

232 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

It’s important to remember that a hyperlink can refer to any kind of file, not just to another HTML file. So if the user’s browser knows what plug-in or helper application to invoke in order to display or play back the target file, then the user experiences the link as if they are directly opening the file. If not, the user is given the opportunity to download and save the file to their computer. Similarly, links can be made to run scripts, such as a routine for selecting a random image from a list of such images and displaying it in a pop-up window. See Chapter 19, “Adding Automatic Web Components,” for more on scripts and how to trigger them. If you want a link to open a new mail message from the user to an address (such as a webmaster@ or info@ address), the HTML syntax is linktextorimage. But of course you don’t really have to know this because FrontPage has a specific option for inserting a mailto: link (I’ll get to this soon).

Paths Lead to Destinations When specifying a hypertext reference, you can use either an absolute path (a complete URL, such as http://frontpagesavvy.com/) or a relative path. A relative path can be relative to the current document or to the root of the current site. To specify a path relative to the current document, do not precede the path with a forward slash. To specify a path relative to the root of the site, start the path with a forward slash. To indicate up one level in a path, you use the Unix format (../). Relative links work best when the sequence of linked pages may be duplicated or moved while still retaining the same hierarchical relationships among the pages. Absolute links work best when the contents of a page may be copied (duplicated, as with a template) in multiple contexts while still retaining links back to the same unmoving reference pages. When you use FrontPage’s built-in shortcuts to create links, you rarely end up typing paths in full. Instead, you generally browse to the destination you want, and FrontPage generates the markup code automatically. When you do this, links are usually rendered relative to the source page. In cases when you want absolute links to internal site pages, you then need to edit the href, as I’ll discuss later in this chapter.

Design Issues Posed by Links One last conceptual topic deserves mention before I get into the nitty gritty of inserting links into pages: link color schemes. When designing your pages, if you don’t specify a color scheme for links (before, during, and after they’re clicked) as compared to regular text, then your viewers will see whatever their browser shows by default. For most browsers, links are

INSERTING LINKS ■

233

blue and underlined before they’re clicked, red when active, and purple afterward, in comparison to the rest of the text, which is black by default. While some usability pundits insist that keeping these default color settings is important as a cue for users about how to navigate sites, many web designers feel that this advice is too limiting to their design choices, and that readers can easily adapt to a different color scheme for links when visiting a new site. Regardless of how conservative you may feel about this legitimate question of usability, the important thing is that your link scheme should be consistent across your site. There are several approaches to standardizing your use of colors at a site, including basing pages on templates, using the Properties dialog box to set the colors for a specific page (or template), or through the use of Cascading Style Sheets (CSS). To use one of these approaches, do one of the following: Choose File ➔ Properties (or press Ctrl/Cmd + J) to select colors for the text, background, link, visited link, and active link portions of a specific page or template. See Chapter 12, “Working with Dynamic Web Templates,” for a discussion of using templates to maintain consistency among page elements such as link coloring. Use CSS, as discussed in Chapter 6, “Creating a New Web Page,” to control the color and appearance of links as compared to regular text, including how the link should look when the mouse pointer hovers over it. To configure the styles, select Format ➔ Style, as discussed later in this chapter.

Inserting Links Before you can insert a link into a document, be sure to save that document! Otherwise, you’ll have to wade through various reminder dialog boxes, and FrontPage will use absolute references to your local files until it knows how they relate to the current document. (FrontPage doesn’t understand this until you’ve saved your document at least once.) The general process for inserting links is fairly straightforward. To insert a link, follow these steps: 1. Position your cursor at the insertion point where you want the link to appear or select the text (or picture) you want to turn into a link. 2. Select Insert ➔ Hyperlink. Alternatively, you can press Ctrl+K, or click the Insert Hyperlink button (

)on the toolbar. The Insert Hyperlink dialog box appears (see Figure 10.2).

Figure 10.2 The Insert Hyperlink dialog box allows you to specify the type of hyperlink you’re creating and the text for your hyperlink.

234 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

3. Using the Insert Hyperlink dialog box options, determine the type of link you’re making. You can select an existing file, an anchor within the same page, a new page or location, or an e-mail link. Click the desired option. 4. If you’re inserting a link where no link text already exists, enter the text of the link in the Text To Display box at the top of the Insert Hyperlink dialog box. (You can also edit the selected text at this point in this box.) 5. When you’ve designated all the desired information, click OK. The link is added to your working document. When the Insert Hyperlink dialog box appears, it offers to make the same kind of link you’ve made most recently. If you’re seeing this dialog box for the first time, Existing File Or Web Page is selected by default.

Linking to an Existing Page on Your Site When linking to a page within your local website, the current folder will be the root of the website or the last folder you’ve browsed to recently. You can click the Browsed Pages or Recent Files buttons in the Insert Hyperlink dialog box if you think you can nab the page you’re linking to more easily that way. Browsed Pages picks up recent destinations from your web browser’s history cache, and Recent Files lists the files that you’ve most recently opened or “touched.” To look elsewhere, you can also click the Look In drop-down list box to navigate around your system from the current folder. Click the Up One Folder button to jump up one level at a time or click the Browse For File button to root around in your system for the specific destination page that you have in mind (see Figure 10.3). Figure 10.3 Browse your system to navigate to the page that you want to link to.

INSERTING LINKS ■

Links to pages outside the root of your site will be referred to with relative links. Be sure your users are able to access these files, or change the link’s attribute to an absolute reference after the fact if need be. (I’ll discuss editing links later in this chapter.)

When you’ve found the page you mean to link to, select it and then click OK. There. You’ve created a link. When you hover the mouse pointer over the link text, the link’s destination is displayed in the status bar.

Linking to an External Web Page To link to a web page outside of your website, click the Browse The Web button. Your web browser launches (or you’ll be switched to it if it’s already running). You can then find your way to the page you want by whichever method you prefer: enter a URL directly in your browser’s address bar, choose a bookmark (or “Favorite Place”), or follow any sequence of links that gets you where you want to go. When you reach the page that you want to link to, return to FrontPage (press Alt+Tab), and the Insert Hyperlink dialog box has captured the address of the page that you browsed to.

235

236 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Figure 10.4 Linking to a new page on the fly

Linking to a New (Nonexistent) Page Sometimes you want to insert links on a page before you’ve created all the other pages that you might want to link to. To create a link to a new page, follow these steps: 1. Click the Create New Document button in the Insert Hyperlink dialog box (see Figure 10.4). 2. Enter a name for the new page. 3. Review the recommended full path and either accept it or click the Change button to specify a different location (such as a subfolder) for the new page that you’re creating. 4. Decide if you want to branch off and work on that page now (in which case, leave Edit The New Document Now selected) or just create an empty page, continue working on the current page, and return to the new page when you get around to it (in which case, choose Edit The New Document Later). 5. Click OK. If you specify a filename that corresponds to a page that already exists, FrontPage warns you about this so you don’t accidentally overwrite the existing page.

Linking to a Bookmark in an Existing Web Page To link to a bookmark in the page that you’ve selected, first make sure the desired bookmark exists. (The next section, “Creating a Bookmark,” explains how to insert bookmarks into your pages.) Then, in the Insert Hyperlink dialog box, click the Bookmark button.

INSERTING LINKS ■

237

If there are no bookmarks in the page you’ve selected, FrontPage tells you so at this point. If there are one or more bookmarks in the page, the Select Place In Document dialog box appears. Choose the bookmark that you want to link to and click OK.

Linking to an Existing File or Object You don’t have to link to web pages only. You can insert a link that points to any kind of file or resource. For example, you can link to any kind of Office file (for example, Word or Excel) if you know that your readers are able to open and read such files. On an intranet at a company that has standardized on Microsoft Office applications, it’s common not to convert every document into a web page but instead to create sites out of a mix of HTML pages and other Office documents. Before you link to a file, first add it to your website: 1. Select File ➔ Import. 2. Click the Add File button. 3. Browse to the file that you want to import into your site and click OK (see Figure 10.5). Then, to link to the file, browse to it and select it as you would select an ordinary web page (see Figure 10.6).

Linking to a Bookmark in the Current Page As with bookmarks in other web pages, to link to a bookmark in the current page, first make sure the bookmark exists. Then, in the Insert Hyperlink dialog box, click the Place In This Document button. FrontPage lists any available bookmarks in the current document (see Figure 10.7). Choose the desired bookmark and click OK. Before you can link to a bookmark, the bookmark must exist! If you need to create or insert a bookmark before making this link, skip ahead to the section “Creating a Bookmark” later in this chapter.

Figure 10.5 Import a file into your website before linking to it.

238 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Figure 10.6

Figure 10.7

In the Insert Hyperlink dialog box, choose a Word document to link to.

The Insert Hyperlink dialog box lists the available bookmarks in the current page.

Linking to an E-mail Address To insert a link to an e-mail address (referred to as “mailto” because of the protocol used to form the link—mailto:[email protected]), take the following steps: 1. Click the E-mail Address button. 2. Type the address in the E-mail Address box or choose it from among any recently used e-mail addresses listed in the Recently Used E-mail Addresses box. (FrontPage automatically inserts the “mailto:” prefix before the e-mail address.) Direct e-mail address links in web pages are vulnerable to harvesting by spammers. You may instead want to use a form to handle e-mail communication from your users. See Chapter 15, “Building Forms,” for more information about forms.

3. Press Tab and, in the Subject field, enter a default subject for e-mail messages generated from this link. The sender still has the option to alter the subject line in their mail client program, although history suggests that nine out of ten users never change anything that you preset for them. 4. When you’ve finished entering your e-mail link parameters entered, click OK (see Figure 10.8). Figure 10.8 Creating an e-mail link

INSERTING LINKS ■

239

Including a Title with Your Link Many current browsers have the ability to display titles in a tooltip (FrontPage refers to this as a “screentip”) when you hover your mouse pointer over a link. Using the title attribute within links is somewhat similar to using the alt attribute in images. It helps provide further contextual information that explains the nature of the link destination in descriptive terms. This is especially useful for making your pages accessible, and it adds additional contextual cues for general usability purposes. Adding title descriptions to links is a practice that is at this time highly recommended. To include such a title with any link, click the ScreenTip button, enter the descriptive text, and click OK.

Making a Link Open in a New Window There are times when you might want a link to launch in a new browser window, such as a link that points to an offsite location. To do so, click the Target Frame button in the Insert Hyperlink dialog box. Among the list of Common Targets, choose New Window. This inserts a target called “_blank” (see Figure 10.9). If you want all the links on your page to open in the same target window, click the Set As Page Default check box in the Target Frame dialog box. (The idea of a target comes from frames-based layouts, but can be used as described here to pop up new windows even when you are not designing with frames [despite the name of the dialog box].)

While some web designers are tempted to rely heavily on this method for opening linked pages in a new browser window to keep users from leaving the site entirely, many users find it confusing or irritating to see so many new windows spawned when they click links. Some users consider it to be an unwelcome meddling in their own decision-making about when to browse directly to a link, when to open a link in a new window, and when to (as you can do with some of the newer browsers) open a link in a new tab in the same browser window. Forcing a new browser window can also complicate life for people with slow connections and overloaded operating systems and can add extra difficulty for those with mobility impairments. When making some or all links open a new browser window, consider notifying your users of this fact somewhere in the site.

Figure 10.9 Creating a link that opens in a new window

240 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Figure 10.10 Insert your links by hand if you prefer.

Inserting Links Manually If you are an old-time HTML author or just prefer to do things by hand, you can always insert your hypertext links directly. To do so, choose Code or Split view, position the insert point before the link text, and type

After the link text, type

Figure 10.10 shows a link in Split view. You can edit links with the Quick Tag Editor as well, as discussed later in this chapter.

Creating a Bookmark As mentioned earlier, FrontPage refers to named anchors as bookmarks. Whatever you call them, they are designated places in a web page that you can link to directly. When your user follows a link that points to a bookmark, the browser scrolls down to that specific part of the web page instead of just loading the page and leaving the user at the top to hunt for the targeted information. To insert a bookmark into a web page, take the following steps: 1. Position the insertion point where you want the bookmark to appear (or make a selection).

USING AN IMAGE AS A LINK ■

2. Choose Insert ➔ Bookmark or press Ctrl+G. 3. Type a name for the bookmark or, if you made a selection first, accept or edit the suggested name (based on the selected text, if any), and then click OK. You can also create a bookmark manually. Just switch to Split or Code view and insert

before the text at the beginning of the section where you’re creating the bookmark and insert

after it (in Split or Code view).

Using an Image as a Link As mentioned earlier, a link doesn’t have to come from text. You can also use graphic images as links. The process of creating a hyperlink is nearly the same for images as it is for text: 1. Select the image by clicking it. 2. Insert a hyperlink (press Ctrl+K). The now familiar Insert Hyperlink dialog box appears, except the Text To Display box at the top is grayed out and reads “” instead of showing link text.

3. Indicate your link destination as explained in the preceding sections and then click OK. If the image has a border width of 0 (as most images do by default), there is no visual clue for the reader that the image is a link, except when the reader happens to pass the mouse pointer over the image, the pointer changes, a destination appears in the browser’s status, and a screentip title appears (if you’ve made one). If you change the border width to 1 pixel or something wider, the border gets the same color as your link text (before, during, and after being clicked). This may not always be the aesthetic effect you’re looking for, but there are times when it’s the best way to go. The decision hinges on whether you’re trying to draw attention to the graphical link as a button or

241

242 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

page widget, or whether you’re using the image as a link but only as a bonus or afterthought and not as a primary method of navigation. Figure 10.11

See Chapter 9, “Working with Graphics,” for

Checking the border thickness of a picture link

more information on working with graphics. To change (or check) the border thickness of an image, double-click the image. The Layout area of the Appearance tab in the Picture Properties dialog box indicates the image’s border thickness (see Figure 10.11). Other graphics or special types of links include interactive buttons, link bars, and image maps. Kate will discuss interactive buttons and link bars in the context of navigation schemes in Chapter 11.

Creating an Image Map An image map is a graphic with one or more designated hotspots that function as links. The first types of image maps to be supported on the Web were processed by web servers; hence they were called server-side image maps. These image maps simply sent x and y coordinates from the selected point in the image to the server, which would determine what link that particular (x, y) pair corresponded to. Server-side image maps have been supplanted by client-side image maps that are interpreted by the user’s web browser. This means that all the shape and link information is stored in the HTML document itself, within the img element and a special map element used just for this purpose. When the user hovers over a hotspot on a client-side image map, they can actually see the target of the link in the status bar instead of a series of x and y coordinates. FrontPage creates only client-side image maps, but this should not be a problem! The process for creating an image map is straightforward: 1. Insert an image onto a web page. 2. Make sure the image is selected. 3. Assign a default link destination to the image (which is where the user will go if they click the image but outside of any of the designated hotspots), as explained in the previous section.

CREATING AN IMAGE MAP ■

243

4. Display the Pictures toolbar (View ➔ Toolbars ➔ Pictures) if it’s not already showing. 5. Draw hotspot shapes and assign link destinations to each of them (see Figure 10.12). The shape choices are rectangles, circles, and irregular polygons (random shapes with as many zigs and zags as you like). Draw rectangles from the upper-left corner to the lower-right corner, but draw circles from the center out. Draw polygons by clicking a sequence of corners and then double-clicking to close up the final side.

Figure 10.13 shows an image with several hotspots assigned to it. In this example, each hotspot might link to a catalog page about the particular plant shown, and the default target for the whole image might be the main catalog page. Figure 10.12 When you draw a hotspot on a picture, the Insert Hyperlink dialog box comes up automatically.

244 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Figure 10.13 An image map with several hotspots

Figure 10.14 Showing just the hotspots on an image map

Changing Hotspots To change the destination of a hotspot, double-click it and then assign a new destination in the Edit Hyperlink dialog box that appears. (The Edit Hyperlink dialog box is basically the same as the Insert Hyperlink dialog box.)

MODIFYING LINKS ■

To move a hotspot, click it and drag it to a new spot. To resize a hotspot, click it and drag its edges by its handles. To delete a hotspot, click it and press the Delete key. If an image map gets too hard to read with the underlying image, click the Show Hotspots button in the Pictures toolbar. This turns the image map and the hotspots into silhouettes (see Figure 10.14). A selected hotspot will appear blackened while the others will appear as empty outlines.

Modifying Links Once you’ve created hyperlinks, you may from time to time need to edit or correct them.

Editing Link Text To edit the link text, just change it in Design view as you would any HTML text. Select and type over the link text or delete and insert characters. Don’t delete the whole link or you’ll lose the destination information.

Editing the Destination To edit the destination, right-click the link text and choose Hyperlink Properties from the context menu that pops up. Then edit the destination in the Address box or browse to and select a new destination.

Editing Links Manually You can also modify links directly by editing the underlying HTML code such as when you’re changing a relative link to an absolute link. The easiest way to do this is with the Quick Tag Editor: 1. Click the hyperlink. 2. Click the tag in the Tag bar. 3. Choose Edit Tag from the menu that drops down. 4. Edit the tag in the Quick Tag Editor.

Removing a Hyperlink To remove a hyperlink without deleting the text that’s currently being used as link text, right-click the link and choose Hyperlink Properties. Then, on the Edit Hyperlink dialog box that opens, click the Remove Link button.

245

246 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Controlling Hyperlink Colors and Effects There are several ways to control the appearance of links on your pages. Generally, it’s best to establish standards for your links site-wide or section-by-section. You can set up characteristics such as link colors in templates when possible, or use CSS so that the same effects are applied to all pages uniformly and so you can make changes globally without having to manually edit preferences individually for each affected page of your site. These issues are also addressed in Chapter 7, “Working Through Page Layout” and Chapter 12.

Setting Link Colors Using HTML To choose color preferences for unvisited links, active links, and visited links using conventional HTML body attributes (and not CSS), choose File ➔ Properties and then select the Formatting tab in the Page Properties dialog box (see Figure 10.15).

Enabling Rollover Effects To enable rollover effects (formatting changes that happen when your users hover over a text link) using CSS, go to the Advanced tab of the Page Properties dialog box (see Figure 10.16). Rollover effects are familiar to most people who’ve browsed a number of websites; they deliver a fair amount of dynamic bang for the buck. (Rollover effects can also be applied to button images used as links; FrontPage provides two ways of doing this that are described in Chapter 13, “Adding Animation and Multimedia.”)

Figure 10.15

Figure 10.16

Choose link colors in the Page Properties dialog box.

The Advanced tab of the Page Properties dialog box allows you to enable rollover effects.

CONTROLLING HYPERLINK COLORS AND EFFECTS ■

In this dialog box, take these steps: 1. Click the Enable Hyperlink Rollover Effects check box. This makes the Rollover Style button available. 2. Click the Rollover Style button to bring up the Font dialog box (see Figure 10.17). 3. Specify whatever effects you want to take place when your user points to the link. Go easy on any rollover effects for text links. If you change things such as font size or weight, the change will likely entail rewrapping the lines of text that contain the link, which can give a jumpy impression as the text paragraph reformats itself each time the user moves the mouse pointer over the link and then back off it. This also increases the chance of crashing some browsers.

Setting Link Styles To assign style effects to visited, unvisited, active, and hover links using CSS, select Format ➔ Style to bring up the Style dialog box (see Figure 10.18). At the top of the Styles list, you’ll see the following choices: • a:active • a:hover • a:link • a:visited

Figure 10.17

Figure 10.18

Specify the rollover effects for your text links in the Font dialog box.

Controlling link appearance via CSS

247

248 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Choose each option in turn, and for each one, click the Modify button and select the formatting you want to associate when that action is taken with your links. When you’re done, click OK. For more nuanced CSS treatments such as using different colors or effects for links that appear in a particular section of the page (as when a sidebar has a different background color from the rest of the page, requiring different link colors for contrast or legibility), you need to edit your CSS style sheet manually. See www.westciv.com/style_master/house/cookbook/links.html for a good explanation of the trickier aspects of styling links. This site also provides a number of useful resources for those of you who are interested in CSS.

Managing Links Using FrontPage’s shortcuts to create links definitely saves time and minimizes the risk of typos in pathnames when you can select a link by browsing. However, the most valuable advantage to be gained from links created using FrontPage is the ability to track, manage, and correct links across your entire site. Without a site-management tool, one of the banes of web publishing is the fact that hand-coded pages may contain broken links, especially after a site revision that involves renaming or moving pages. Without FrontPage (or a similar tool), hunting for all the broken links and fixing them by hand can be prohibitively time-consuming. It’s also common for links to external sites to go bad as those sites disappear or move. Remember that the Web is an ever-changing environment. FrontPage can catch external broken links, but it’s also a good idea to check them yourself manually from time to time, because website domain registrations sometimes lapse and are snatched up by unscrupulous people to promote rather unsavory sites.

Viewing Links Site-Wide When you’re viewing a page in Design view, you can navigate to (open) the destination page associated with a link by pressing the Ctrl key and clicking the link. To view all the links that come from the current page in a site map format, click the Web Site tab and then select the Hyperlinks view (see Figure 10.19). To verify a single link, right-click the icon representing the destination page and select Verify Hyperlink from the context menu that pops up.

MANAGING LINKS ■

249

Figure 10.19 Viewing all the links from a page in Hyperlinks view. Do you notice the broken link?

Automatic Link Updating When you rename or move a file that has incoming links pointing to it from other pages, FrontPage offers to update those links for you. For example, if you rename a file in Folders view, FrontPage tells you how many links are affected and asks for your permission to make the update. Click Yes! However, if you move a file, FrontPage just goes ahead and updates the links for you automatically (without asking).

Recalculating Links In large, complicated sites, links can still end up broken—either from being typed incorrectly or from being renamed without updating all affected files. In an ideal world, you wouldn’t have to worry about this, but fortunately you can tell FrontPage to check and fix all the links in your site automatically. To do so, select Tools ➔ Recalculate Hyperlinks and in the Recalculate Hyperlinks dialog box, click Yes.

250 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

Fixing a Broken Hyperlink To review and fix broken links, you first run a report to identify any broken links and then correct the problems: 1. Go to the Web Site tab and select Reports view (see Figure 10.20). 2. Select Broken Hyperlinks and click Reports at the bottom of the page. In the Reports View dialog box, FrontPage offers to verify all the links in the site. 3. Put a check mark in the Don’t Ask Me This Again box to skip this verification in the future and then click Yes to proceed. FrontPage runs its report, evaluating all the internal and external links and telling you which ones are broken (see Figure 10.21). 4. To fix a broken link, double-click it. The Edit Hyperlink dialog box opens (see Figure 10.22). 5. Type the correct filename or click the Browse button to find the correct location in the familiar-looking Edit Hyperlink dialog box—it looks just like the Insert Hyperlink box you know and love by now (see Figure 10.23).

Figure 10.20

Figure 10.21

There are many reports available to help you manage your site.

In the broken hyperlinks report, links will either be noted as Broken, OK, or Unknown.

MANAGING LINKS ■

Figure 10.22

Figure 10.23

Fixing a broken link

Choose the correct link destination in the Edit Hyperlink dialog box.

251

6. After you click OK and return to the first Edit Hyperlink dialog box, decide if you want to change the link in all the pages that share the same error (probably you do). If not, click Change In Selected Pages and then deselect the ones that you don’t want to change. Then click the Replace button. 7. Repeat this process for all your broken links. When you’re done, everything in the report should check out as OK (see Figure 10.24). Figure 10.24 After you’ve fixed the broken links, check their status by rerunning the broken hyperlinks report.

252 ■ C H A P T E R 1 0 : I N S E R T I N G A N D M A I N T A I N I N G H Y P E R L I N K S

From Deep Structure to Interface Links are the deep structure of a website, the skeleton and musculature that makes it run the way it should. But to give your users the best experience possible, you need to think about how an outsider will approach your site, what they’ll be looking for, and a logical ordering of information that corresponds to their needs, their expectations, and their priorities. The difference between the entire body of links that tie together the site from within and the navigational view of the site for people approaching from without is the difference between information architecture and user interface. Chapter 11 explains how to build and implement the navigational interface for your website.

CHAPTER 11

Implementing Your Navigation Scheme KATE J.CHASE

Navigation is one of the most important features of your website design, ranking right up there with content. Navigation is what will get visitors to your content. Even before you picked up this book, you probably logged hundreds if not thousands of hours surfing the Web. You probably remember sites where you felt so frustrated trying to get from Point A to Point B (or back again) that you quickly gave up and went looking for a site that offered as good content as the first but without all the hassle of trying to get around. Don’t divorce yourself from that memory, because it will fuel your desire to get your site’s navigation scheme right. In this chapter, you’ll approach navigation head on. You’ve probably already developed some ideas about how you want to handle your navigation—what it will feature or how it will look, if not both. This chapter covers the following topics: ■

Smart guidelines for a good navigation scheme

■

More about using FrontPage’s Navigation view

■

Creating navigation tools

■

Inserting and troubleshooting navigation

254 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Navigation Savvy Some web professionals frequently liken a website to a published book. A website, like a book, can have a table of contents to list major categories of information within the site. It can also have a site map or an index that acts much like the index in the back of a book. But this misses an important point, one that you need to consider as you start connecting all your web pages and elements together into a cohesive navigation scheme: Unlike books, most websites aren’t designed to be read in a linear fashion. Even if they are, a website’s visitors rarely view the site in a linear way and almost never think of them that way. Each page, while tied to other pages in your website, should have the ability to stand on its own merit. However, unlike that book, all the pages aren’t right there in front of the reader, so users (usually) can’t flip through a few hundred pages until they find information that interests them. Nor will they be able to find their way from Chapter 2 to Chapter 11 unless you give them a way to get there. That way is called navigation. With this in mind, before jumping into the mechanics of constructing navigation, let’s spend a few moments talking about what web usability studies, design experts, and high-frequency web users can tell you about essential site navigation. I’ll boil this down to a few core points: First way out/in One nasty truism with web browsing is that users tend to look for the first navigation tool that seems like it will take them where they want to go. Whether it’s the right one is almost a moot point, because users generally won’t spend long periods of time examining their options. Think about this as you create your navigation scheme. Spare us the cute! Ask web users whether they would prefer cool-looking navigation elements or a workable navigation scheme, and they’ll take serviceable over cute and cool every time. This doesn’t mean you can’t wisely use novelty as part of your site and its navigation, but make it work at least as well as it looks. Top and bottom It’s considered wise to have navigation tools at both the top and the bottom of the page to make it easier for the user. One big reason this is smart is because users are familiar with this layout and tend to look for it. But it also lets users who have moved down a long page of content find tools waiting for them at the bottom of the page without having to scroll back up. Here you can mix and match to some degree: Use a menu at the left-hand side of the page or use a frame at the top of the page and a navigation bar at the very bottom; just make sure you do this for all the pages in your site. Consistency Be consistent. Place your navigation tool—menu or navigation bar—at the same location on each page. Don’t try to change the style between pages. Short and descriptive Give links and menu items short yet descriptive and distinctive labels. For example, don’t say “Here’s How to Contact Us;” say “Contact Us.” Make sure the labels are clearly visible and don’t use unusual fonts or tiny font sizes.

NAVIGATION SAVVY ■

Keep it reasonable Avoid making your navigation scheme too large or too long. Once your menu or navigation bar covers more than 8 or 10 items, it’s time to trim it or consider how it can be broken down into groups. For example, instead of listing five items related to Customer Service on a navigation bar, offer a single link to Customer Service with a page there that directs users to the five different areas. Remember that presenting users with 30 options to go elsewhere the moment they arrive on one of your pages may confuse them more than impress them. Don’t confuse the visitor Avoid situations where you intentionally (or not) redirect someone away from where they are actually trying to go. This can confuse many users and anger far more. You can’t just take people where you want them to go; you need to provide a way for them to get where they want to go. For example, while you may create navigation tools to draw visitors to specific features of your site, you also want to provide easy avenues for them to move about the site hierarchically. Different users will take different paths through your content; you don’t want to prevent them from finding what they seek. Avoid having pages that link to themselves such as a Search page where users can click Search to bring up the same page they’re already on! Group page elements wisely Try to group menu items or navigation links that are similar in function. For example, if you have three different links to Member Services pages, place them together on the page. What gets noticed isn’t what you think Most users notice your navigation only when it’s broken or badly done. Don’t give them an opportunity to notice: Let them move intuitively and fluidly back and forth through all the pages your site has to offer. Can’t change one without the other A huge problem encountered with websites and navigation occurs when the designer or webmaster has massively changed the information architecture and content of a site without also properly updating the navigation scheme to reflect those changes. This can mean a plague of broken links, ineffective navigation, and users not finding what is there beyond what they can easily see. Make sure that your site is not only kept up-to-date but also be sure that any changes you make are designed carefully into your existing navigation scheme and that all links work as advertised. Use your focus group to test your navigation again whenever you make major changes (for example, when you use a different navigation scheme, reorient the site navigation hierarchy, move to more dynamic content from all static content, and so on). Employ smart, known tools One of the most frequently used tools for helping visitors find information is a search tool. This often takes the form of a prominent search box. FrontPage

255

256 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

makes this tool available under Web Components; it can be used on any web server that has been extended with FrontPage Server Extensions. See Appendix A, “Installing a Web Server,” for more details on installing server extensions and establishing such a search component on your site.

Also, like the search box, breadcrumbs, discussed later in this chapter, are a recognizable tool for drilling down and back up through a site’s structure. Consider employing them, too. Now let’s look at the importance of FrontPage’s Navigation view before pressing ahead to see what it allows you to do.

Using Navigation View What you see in Navigation view plays a pivotal role in how FrontPage’s navigation tools will work with your site, because FrontPage effectively uses the information here to build the user’s road map through your site. Look at the pages listed under the Folders view on your website (see Figure 11.1). Then switch to the Navigation view and note the difference. If you have several pages built, you may not find many of them listed in the Navigation view. In the beginning, primary pages such as the index are listed here; most, if not all, pages built in a website don’t automatically appear until you use one of the web page templates. The remaining pages you place here with intent and due care, because their placement creates the basic navigation scheme of your site. Figure 11.1 The Navigation view for the Artisan’s Heirloom Seed Company site

USING NAVIGATION VIEW ■

Primary pages appear on the top tier of the navigation structure; these are the pages (or the page titles) that will display in your main link bar or primary menu. Secondary pages go to the second tier and are available through the navigation structure only by clicking available links on pages in the first tier. (These links are represented by connecting lines drawn between secondary pages and the first tier page they’re linked from.) Third-tier pages follow the second tier’s climb down inside your navigation structure. Very simple and/or small websites may have just two or three tiers, while large and/or complex sites can easily move down through 10 or more tiers. In well-organized sites, each tier often has its own folder, with subfolders within them that represent each navigation item on that tier, along with the pages, graphics, and other elements that exist there. Now let’s take a quick look at how you can build and change what’s in the Navigation view so that it will be available and visible to your visitors at each tier.

Building and Tweaking Your Navigation Structure When you use FrontPage to handle your navigation scheme, it’s extremely important that you work within the Navigation view to have the pages you want appear at the tier you want. Even if you ultimately use external tools, including script-created menus, special navigational devices, or FrontPage add-ins, many of them use the structure in Navigation view or expect you to know it well enough to specify it in your code or through configuring these external tools. This you accomplish by manually adding, editing, removing, and changing the positions of pages in Navigation view. I’ll cover the basic steps here.

Adding a Page to Navigation View First, be sure you want to include a page in your navigation scheme before you add it to the Navigation view. Unfinished pages or other pages not quite ready for web prime time aren’t good candidates, although they should be included in your offline site map so that these pages can be finished and added at a later time as your site develops. This brings us to a small but important point: Once your site goes live, continue to engage in offline planning for your new or revamped content in addition to what’s already available to your site visitors.

Adding a page to your Navigation view is truly the easy part: 1. Open your site in Folders view (or easier, have the Folders list open in the left-hand pane). 2. Click and hold on the page you want to move into the Navigation view. 3. Drag the page onto the Navigation option on the toolbar or directly into the open Navigation view window, as shown in Figure 11.2.

257

258 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Figure 11.2 Drag a page from the Folders view and drop it into the Navigation view.

The hard part is knowing exactly where you want to place the page. The first tier should be restricted to primary pages. As you recall from a suggestion earlier in this chapter, avoid having a navigation bar or menu that runs to too many items. Sprawling tiers in Navigation view translate into densely populated or wrap-around menus and link bars. But if you thought ahead, you can drop the page right into the desired position immediately. If not, you can reposition it (instructions to come).

Modifying a Page Title in Navigation View When you look at your pages in Navigation view, note that each page has a title. This title represents how that page will be identified in your navigation scheme, especially when you construct something such as a link bar. Titles are generated using the title element, and you have one on each and every one of your pages regardless of whether you consciously set it or not. For example, open a new, blank page in FrontPage, and look at the page in Code view. You’ll see New Page 1. If you open a second blank page, its title would be New Page 2.

Unless you change this default title, it stays with your page when you save and publish it. If that page is included in your navigation scheme, that non-title becomes the page’s title on your link bar or menu. Boy, does this not look sharp! This phenomenon is sometimes joked about as the web equivalent of wearing your new suit with all its tags hanging out.

USING NAVIGATION VIEW ■

In addition to this phenomenon, you already learned that long titles or labels for your bars and menus aren’t a good idea; short, descriptive titles are better. This may not be the case for all the pages you have created thus far. For these reasons, you may want to rename one or more of your page titles so that they easily fit the size and are better identified to a site visitor. Titles should be used to provide a short identifying name to a page.

In Code view, you can change a title easily by positioning your cursor between the and tags, deleting what’s currently there, and typing in a new title.

To modify a page title in Navigation view, follow these steps: 1. Click the title once and then press Delete or Backspace until you’ve removed the current title. 2. Type your new title. 3. Point your cursor elsewhere to save the title in place. You can also right-click the page and choose Rename, which does the exact same thing. You can also change the title when you save the page. However, I recommend that you change the title before this point, because it may be harder for you to remember to do so as time goes on. Use the following steps when you’ve otherwise forgotten to modify the default page title or to shorten a title you’ve already assigned: 1. Choose File ➔ Save. 2. In the Save window, note the Page Title above the filename and then click the Change Title button.

259

260 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

3. In the Set Page Title window, click to delete the existing text and type your new title. Click OK and then click Save.

Removing a Page in Navigation View Not all pages or other elements on your site belong in Navigation view. For example, you may have pages that are meant to be viewed only by those with special access (discussed in Chapter 21, “Setting Up the Back-End Interface”) rather than the general populace. You may opt to keep these pages out of the navigation scheme, choosing instead to provide the exact URL only to those you want. It’s also possible that at one time or another, you may want to temporarily remove a page from the site’s navigation structure without removing that page from your site. For example, you may want to update or correct a page before anyone else views it. To do this, perform these steps: 1. Select the page in Navigation view and press Delete (or right-click and choose Delete). 2. When the Delete window appears, choose Remove Page From The Navigation Structure. (The other option removes the page completely from your web folder and site.) 3. Click OK. The page in question then disappears from Navigation view, and the space it held is filled in as the other pages close in to a tighter configuration.

Changing the Placement of a Page To move a page from one position in your Navigation view to another (a move can be up, down, or sideways as you move up or down or at the same level in a tier), simply click and drag the desired page into its new position (see Figure 11.3) before you release the mouse button. You can change a page’s placement any number of times. However, avoid frequent changes of this nature on public sites because it may confuse your visitors. Although I’ve already touched on several navigation scheme tools, let’s discuss them in more detail now so you know what tools you should have and how they can be useful to you.

Major Navigation Scheme Tools The terms used for objects in navigation schemes often seem muddy as people interchange one term with another’s meaning. However, the two you hear about most often are navigation/link bars and menus—both represent variations on the same theme. When you hear navigation bar, you can substitute terms such as link bar. FrontPage refers to it as a link bar or as hot links—the bar of navigational items or links that run horizontally across a web page near the top and/or bottom (see an example in Figure 11.4) that

MAJOR NAVIGATION SCHEME TOOLS ■

261

allow a visitor to click the item and move to the linked page. Once clicked, the navigation item or link typically changes color. Breadcrumbs, which you’ll read about later in this chapter, are often categorized as another type of navigation bar, although they are usually used in conjunction with another navigation scheme element such as a standard link bar or a menu. Figure 11.3 Repositioning a page in Navigation view is as easy as drag and drop.

Figure 11.4 A link bar example where the link bar offers buttons or blocks with titles

262 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Then there are menus, also known as menu lists or menu bars, which typically run vertically down the side of a web page. Most websites that use menus employ them along the left edge of the page (think of cnn.com or the Artisan’s Heirloom Seed Company, shown in Figure 11.5). Other sites print them along the right-hand side, and still other sites put menus on both sides, such as msn.com. Menus can take many forms, including • Plain-text labels with hyperlinks to other pages • Labeled buttons • Animated menus • Flyout menus, where you choose a menu item that automatically expands to a submenu without changing to a new page • Drop-down menus, where the user clicks a box and selects their choice from a list of menu options • Menus with a tabbed appearance to look like folders • Collapsible menus, which start out in a compressed format, and menu items expand as selected, only to collapse again when the user clicks elsewhere • Jump menus, discussed in Chapter 15, “Building Forms” Figure 11.5 The Artisan’s Heirloom site with its left-sided menu

FRONTPAGE NAVIGATION: GO IT ALONE OR IMPROVISE? ■

As you’ll discover the longer you do this type of work, these rules aren’t carved in stone. There are vertical navigation bars and horizontal menus (typically referred to as menu bars). Some sites run menus along both the left-hand and right-hand sides or along the top and bottom of a page and have navigation bars across the middle of the page. But while you can do just about anything you want in terms of navigation, understand that your novel design may not translate well for the visitor. You’ll also see other tools for navigation, including special images that have been divided (so to speak) and mapped into sections to help you navigate around a special element. For example, you might click one area of a pie chart and get one category’s menu, while clicking another section gives you a different category’s menu. In fact, spend a bit of time doing research on web navigation, and you’ll find many original—and a few bizarre—ways of doing the same thing: moving people about your site. Now that you know some of the standard types of navigation available, this seems like a good time to discuss how much FrontPage can handle alone and what types of work you may need to farm out to other resources, so to speak.

FrontPage Navigation: Go it Alone or Improvise? FrontPage gives you easy access to a simple, workable navigation scheme, mostly in the form of vertical or horizontal link bars. You’ll create one of those in a moment. However, it may not surprise you that large and/or professional websites often don’t depend on FrontPage alone to develop and manage their navigation schemes or to create link bars and menus. In this regard, FrontPage is a bit limited in what it allows a designer to do right out of the box. This, of course, doesn’t prevent you from using FrontPage to build and manage your site. FrontPage link bars and its basic navigation scheme do work well. If you want to go beyond this, you can enhance your FrontPage site with Dynamic HTML, JavaScript, or a number of other HTML-bolstering codes that allow you to build a more robust navigation design and then plug it into FrontPage. When I talk about creating navigation menus and again when I discuss breadcrumbs, I’ll offer some sites and even some third-party software that should help you build something more complex than FrontPage alone can do.

Creating Navigation/Link Bars If you’re using a FrontPage template or theme, or you’ve already tried the link bar web component, you’ll notice that blank pages and other existing pages that do not appear under your Navigation view will warn you, “Add this page to the Navigation view to display hyperlinks here.”

263

264 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

You’re not required to depend on FrontPage alone for navigation elements, although you need to keep the actual navigation structure in FrontPage sound and updated. But you may also incorporate additional HTML code, enhanced HTML, or special navigation bars created by navigation tool software. Let’s look at how you can add your own navigation bar to a page using FrontPage tools alone, without needing a template or theme to supply it.

Adding a Dynamic Navigation Bar What differentiates a dynamic navigation bar from other types of navigation bars that you can add to your site? The term dynamic here refers to the fact that the items (links to other pages) on your navigation bar change as your site navigation does. This occurs because it is built (and rebuilt and rebuilt again) when you first design your site’s navigation and then make modifications to it (add or remove a page). The flip side of this is a static navigation bar, where you create links and navigation elements that do not change until you manually edit them. Because automation becomes vital the larger your site becomes or the less time you have to maintain your site, use dynamic navigation bars wherever possible, especially as the primary navigation tools through a site. To create a link bar of your own, perform these steps: Figure 11.6 Three link-bar style choices are offered on the right-hand side of the Insert Web Component window.

1. Open a page in your website and position your cursor where you want the link bar to be inserted. 2. Choose Insert ➔ Navigation. The Insert Web Component window appears with Link Bars pre-selected (see Figure 11.6). 3. In the right-hand pane, choose one of these three options: • Bar With Custom Links—Use this option when you want to create a link bar made up entirely of custom or atypical links to pages that are either internal or external to your site. If you use a custom link bar, you usually need to use it in association with another core navigation method. • Bar With Back And Next Links—Because this link bar consists only of back and next links, use this option in special circumstances when you want people to move sequentially through a series of pages, as you might with a collection of documents or a single long document. This option usually needs a standard navigation method such as another link bar. • Bar Based On Navigation Structure—Use this option for a standard link bar that’s based on the pages appearing in your Navigation view.

CREATING NAVIGATION/LINK BARS ■

265

4. For a dynamic navigation bar, choose Bar Based On Navigation Structure. Click Next to continue. 5. In the next screen, point to the bar style you want to use. Click Next. 6. Click to choose the orientation of the link bar (horizontal or vertical). Click Finish. 7. The Link Bar Properties window appears, from which you choose the level of hyperlinks to add to the link bar (note the site hierarchy diagram at the top left as shown in Figure 11.7). FrontPage then automatically builds your link bar. However, it’s very possible that all you’ll see on your current page is the “Add this page to the Navigation view to display hyperlinks here” message (see Figure 11.8). This means that the page you started your link bar on

Figure 11.7

isn’t currently part of the pages included in your Navigation view. Move that page to the

The site hierarchy diagram in the Link Bar Properties window changes as you choose between selected levels of hyperlinks.

Navigation view (click and drag the page from the Folders view and drop it in the desired location in the Navigation view), and you’ll see your link bar as FrontPage built it.

Creating Navigation Menus One thing FrontPage doesn’t include is a real web menu-building tool. However, you can make a vertically oriented link bar play the functional role of a menu oriented down the left-hand side of your Navigation view-linked pages. In addition, you can build a more static menu using the interactive buttons you’ll learn about in Chapter 13, “Adding Animation and Multimedia.”

Figure 11.8 A blank page advises you to add the page to the Navigation view to display the link bar.

266 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Those of you with experience scripting, particularly with Dynamic HTML or JavaScript, should have little problem finding web-based suggestions for ways to develop different types of menus. Users with less scripting background can use instructional web-design sites (such as the ones I’ll talk about in a moment) to borrow scripts and then apply them through FrontPage as you customize your navigation menu options. For those of you who don’t do web authoring at all and don’t have a desire to learn it or—if you’re like one of the authors of this book, who would rather be creative with content than with markup and scripting (and I don’t mean Christian)—try web menu software to build what you need. Websites such as NavSurf.com offer nothing but software devoted to navigational design and implementation. Many of these programs, such as NavSurf’s own AJMenu (downloadable from www.navsurf.com/DHTML/ajmenu), aimed at small business and corporate web users, provide both a menu-building component and a menu editor, so you can make both structural and Figure 11.9 Building a customized menu with AllWebMenus

aesthetic changes to the DHTML menus you develop with it. One website recommended by a web designer I know, who does a lot of his own markup and scripting but doesn’t enjoy menu building, is Likno Software’s AllWebMenus (see Figures 11.9 and 11.10). AllWebMenus is available in a full (pro) and a lite version, and Likno Software offers a downloadable demo version at www.likno.com. (The registration price, if you like it, is $35.00 for the lite version and $59.95 for the pro version.) While all the features aren’t available in the downloadable version, it gives you a sense of how swiftly you can build custom menus using software such as this. I tried AllWebMenus, and what I liked about the software was threefold: • I was able to construct a few different types of menus of varying complexity quickly and easily. • I appreciated the on-site examples of how other users are employing the software on their sites (giving me some good ideas). • AllWebMenus is FrontPage-friendly, besides being able to play nice with a host of other web-development tools such as Macromedia Dreamweaver. In fact, when you install AllWebMenus, it incorporates itself into your FrontPage menu bar and is directly available as a FrontPage add-in.

Figure 11.10 The constructed menu in Preview mode

The basic steps involved in creating my first menu were short and sweet: Pick a style, edit it to reflect the menu options I wanted to offer, compile the menu, and then use the AllWebMenus’s option to link the menu to my website. A nice plus here too is that AllWebMenus has a feature that allows you to import the FrontPage navigation structure, so the software doesn’t entirely depend on your ability to tell the software about your structure.

CREATING NAVIGATION MENUS ■

Creating a Table of Contents The concept of a table of contents should be familiar to you. They’re standard fare in print publications (such as this one) and have been used on websites too, almost since the first consumer availability of the World Wide Web in 1993. You can create a table of contents manually, simply by creating a new page on which you list links to all the major content areas or collections on your site. However, there is a distinct advantage in having a table of contents page that updates automatically, as the Web Component for this in FrontPage allows, so that a change in your website is reflected in the table of contents. These aren’t your only two options, of course. You can also develop an automated-update table of contents using a scripting language, usually using something more robust than straight HTML itself. You’ll find numerous examples of this on the Web, from how-to design sites and from looking at the source code on websites that use such table of contents pages.

When you create a table of contents manually, unless you know enough scripting to automate the process, you have to remember to update it each time you amend the contents of your site. For websites that frequently make both additions and deletion to their content—as many active, public websites and corporate intranets do—it can quickly become almost impossible to keep a manual table of contents updated with perfect accuracy.

FrontPage’s Table of Contents Tool FrontPage 2003 includes a Table of Contents Web Component tool to help you create a full table of contents based on the content you’ve already developed on your site. FrontPage updates your table of contents automatically once you’ve changed the site’s contents. You can use FrontPage to build a table of contents one of two different ways: • Based on the existing content and web structure of your site • Based on the page category Let’s talk a moment about the latter before I show you how to build the former. BUILDING A TABLE OF CONTENTS BASED ON PAGE CATEGORY

In order to build a table of contents based on page category, you have to have designed your pages and specified what category each page falls under. This is a point that some users don’t realize until they try to create a page category contents page. The page category information can be found by performing these steps: 1. Go to Folders view, select one of your website pages, right-click, and choose Properties. 2. Click the Workgroup tab. 3. Look for checked items under Available Categories (see Figure 11.11).

267

268 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

If the first page you look at has no checkmarks (and it won’t unless you or a colleague has already set some categories), repeat this for other key pages in your site that you want to include in your table of contents. If none of them have the category information supplied, you’re not going to have the foundation necessary to build a category-based table of contents. FrontPage will go through the process and deliver up a basic table of contents page, but it won’t do or list anything. If you preview that table of contents page, it will appear empty. If you want a category-based table of contents, your only option is to categorize each page, checking the available categories that apply for that page. Once you do that, the pages have categories that can be searched on and used to build your table of contents.

Figure 11.11 Categories assigned to pages based on the nature or content of a page can be assigned in the Page Properties window.

BUILDING A TABLE OF CONTENTS BASED ON SITE CONTENT

Now let’s build a site content-based table of contents. As you do, understand that you can use the same basic steps to implement a table of contents based on categories once you’ve assigned categories to your pages (and you can do that during the building process). To create your table of contents, perform the following steps: 1. Open a new or existing page and place your cursor where you want your table of contents to be inserted. 2. Choose Insert ➔ Web Component. 3. In the Insert Web Component window, select Table of Contents. 4. In the right-hand pane, select For This Web Site (see Figure 11.12). Click Finish.

Figure 11.12 Building your table of contents

You may see an intermediate window called Table of Contents Properties that asks you for the page URL of the first page to include in this contents table. Be sure to check the option Recompute Table of Contents When Any Other Page Is Edited. You’ll see the basic table of contents information appear on your page, as shown in Figure 11.13. However, the information looks very generic, and it doesn’t provide the detailed information listing the contents of your site. Instead, these are place markers for the actual pages to be listed here. The place markers are necessary because this allows FrontPage to update your table of contents whenever these pages may change (for example, you have an article on web page design listed as the third item but when you change your site so that a feature story about

CREATING NAVIGATION MENUS ■

269

web design awards now appears, your table of contents is automatically updated without your intervention). To view the contents, choose File ➔ Preview In Browser after you have saved the page to your website. You’ll see something like the table of contents for the Artisan’s Heirloom Seed Company in Figure 11.14. Figure 11.13 The actual table of contents isn’t displayed until you preview or publish your site. Using placeholders instead allows this page to be updated automatically as you change your content.

Figure 11.14 The detailed table of contents for the Artisan’s Heirloom Seed Company

270 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Troubleshooting Your Navigation In this section, you’ll see answers to some frequently asked questions concerning FrontPage navigation. Q: Is it possible to corrupt the FrontPage navigation structure? I’ve been having problems keeping pages where I place them in Navigation view. A: It’s possible, although this is an unusual problem. One way to test this is to create a new FrontPage website and copy just your pages from the first website into the new one and then create your navigation structure by developing your organization in Navigation view (dragging and dropping pages into position). Q: What if it’s very difficult to determine which pages should be top tier, second tier, and so on? A: It shouldn’t be, especially if you first go back and review early chapters where Kate and I discussed organizing and structuring your content. Then examine which 5–8 pages should be available to users at all times; those pages are your top tier. Certain pages, such as the home page or index page, will always be top tier. Q: Why I can’t create a working custom link bar or one indicating back and next? A: You should be able to create a link bar regardless of the next thing I’ll tell you. If you can’t, you need to determine what errors (if any) FrontPage reports when you try. Check these errors against the Microsoft Knowledgebase at http://search.support.microsoft.com. Whether the link bars you create will work depends on whether you’re publishing to a web server using FrontPage Server Extensions or with SharePoint Team Services extended website(s) installed. Q: I’ve built my own custom menu using the interactive buttons available in FrontPage, but they don’t seem to work; they appear to do strange things to my page display when published. Can you help? A: You can indeed use interactive buttons to construct something like a menu, so that’s not an issue. But the problem you’re having with using them, which persists or exacerbates after you publish, makes it sound as if you’re publishing to a server without FrontPage Server Extensions installed (or at least, the most up-to-date version of them hasn’t been applied). The reason you’re seeing page distortion is because without the server extensions allowing the interactive buttons to do their job, your pages are trying to compensate for a dead component. If you’re hosting your own web server, apply the most recent FrontPage Server Extensions. If you’re hosting through a third party, be sure they apply them. Then try again. Q: Can I edit my table of contents entries without basing it on navigation structure? A: You can’t edit your table of contents entries within FrontPage alone unless you use the Category option and manipulate what pages are assigned to which categories to force them under certain headings. The easy answer is to create a table of contents manually or using scripting, but you still have to make sure that your manually created table of contents gets properly updated.

TROUBLESHOOTING YOUR NAVIGATION ■

Q: Why can’t I just forget about menus and link bars and just use a single search tool to let people find content? It just seems cleaner. A: A search engine on your site is often a great addition to help visitors find content both on and off your site, but it should augment rather than replace a well-designed navigation scheme. Understand that linked items such as menu options and navigation buttons work directly, so that the user can just click them. A search engine involves users deciding which words to search for and loading a search results page. Users accessing your site over a slower dial-up connection may time out or fail to get their search results through their browser, leaving them with no or little option for moving around your site. You’ll find more information about the FrontPage search components in Appendix A.

Creating DHTML Navigation Menus You’ve no doubt heard of Dynamic HTML even before you picked up this book. DHTML itself isn’t a scripting language. Rather, it’s a combination of technologies, including HTML (or XHTML), scripting (usually JavaScript), the Document Object Model (DOM, an interface within browsers that allows authors to make dynamic changes to elements), and Cascading Style Sheets (CSS). Web designers can use these technologies together to create dynamic effects such as animation on a website. Many menus and similar navigational objects today are done in DHTML.

Online DHTML Resources If you’re not a DHTML wizard, the first thing you need is a source that explains how to work with DHTML or one that offers code you can borrow and customize for your own use. Still other sources allow you to generate code using tools on their website based on examples of what you want to accomplish. In addition, software such as AllWebMenus (mentioned earlier in this chapter) and xFX JumpStart’s DHTML Menu Builder (shareware, $65) work with DHTML. Check out these sites that explain how to use DHTML: • JavaScript Made Easy (www.jsmadeeasy.com) provides a solid beginning for understanding how JavaScript works within DHTML, along with excellent examples. • W3cschools.com offers information about and tools for learning DHTML, Cascading Style Sheets, and more. Source code example sites include the following: • DynamicDrive.com • Milonic at www.milonic.co.uk For example, the first time I tried to create a DHTML flyout menu, I floundered until I visited Dynamic Drive’s PopIt menu page (see Figure 11.15), which provided the code we needed and instructions for inserting the menu and customizing it for our specific needs.

271

272 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Figure 11.15 Sites such as Dynamic Drive offer DHTML scripts and give you both code and recommendations for using it.

A good example of a site that allows you to plug in some information through their site to generate your own code can be found at www.ex-designz.net/codegen.asp. There, you can work in JavaScript and DHTML without knowing them, and even develop Cascading Style Sheets that make these menus available to each new page you design. At Ex-Designz, for example, you choose the type of menu (or navigation bar) you want to create. Then you plug in the titles for the menu (along with the proper web addresses for them). The site then spits out the code necessary to implement the menu on your site, with instructions for doing so. Even if you ultimately use a different method, sites such as these can be invaluable tools for understanding how menus and other navigational objects are put together. You don’t need a strong background in the scripting language to begin to understand which tags set color, which tags specify your titles or items, and so on.

Inserting Menus Exactly how you insert menus into your entire site or onto an individual page depends entirely on how you created the menu and where you want it to be placed. Should you use software to create your menus, you’re apt to get your best results with menu-creation software that is FrontPage-friendly or allows you to easily link your work to your FrontPage-created website. But any menu-creation software will do as long as it

INSERTING MENUS ■

explains how to take your work from the program (often by copying code) and how to apply it to your website. To apply the work to a website, choose Format ➔ Dynamic HTML Scripting and paste the code into the editor that appears at the right of your screen. If you’re using a menu inserted into a Cascading Style Sheet, for example, the sheet will specify the absolute (or floating) position of the menu. Then you apply the style sheet as you learned to do in Chapter 6, “Creating a New Web Page,” and Chapter 7, “Working Through Page Layout.” If you’re borrowing code from another source, be aware of two issues: • Most but not all code example sites describe exactly where you should insert the menu code. Try it their way to see how well it works. Once you’ve established its usability, you can tweak the menu location, colors, and so on. • Remember to make the necessary changes to reflect your site’s design. Most code example sites give you an idea of what changes will be necessary to insert your menu item names, for example. One good safety tip: Just to be sure where you were before you started making changes, save a copy of the page where you’ll insert the menu (either with a different name or saved to a different, non-web folder) before you begin to work.

Leaving Breadcrumbs No, really, this book hasn't turned into a cookbook, nor are we making poultry stuffing. But if you’re reminded of the tale of the trail of bread left by Hansel and Gretel when they were venturing into the woods, you’re on the right trail. The term breadcrumb actually refers to more than one concept, but in this situation, I’m talking about the web navigational tool that provides site visitors with a way to get back to where they came from. Breadcrumbs provide users with a single hierarchical path between the page they’re currently on and the main stops on the way back to (and including) the site’s home page. At any point along the breadcrumb path, the visitor can stop at an intermediate point and go off exploring in an entirely different direction. As such, breadcrumbs become essential in large, complicated site hierarchies to keep visitors oriented to where they are and where they’ve been. You no doubt have some experience with breadcrumbs from popular websites such as Yahoo! and several major online store sites, whether you remember them or not…and there’s the rub that I’ll share with you in a moment. Figure 11.16 shows a breadcrumbs example. While there are different types of web breadcrumbs, the ones frequently seen are known as location breadcrumbs, not unlike the “You are here” signs on a mall’s store directory map that you consult when you’re trying to figure out how to get from Macy’s to Banana Republic.

273

274 ■ C H A P T E R 1 1 : I M P L E M E N T I N G Y O U R N A V I G A T I O N S C H E M E

Figure 11.16 A breadcrumbs example

Online store sites use location breadcrumbs that way too. For example, if you’re looking at shop tools on a website and suddenly jump to a page offering athletic socks, you might notice that the store’s web page breadcrumbs report something like Store Home ➔ Clothing ➔ Men’s Clothing ➔ Underwear ➔ Socks. Now clearly, if you were in Shop Tools, you didn’t get to the sock page by taking this route. That’s OK, because breadcrumbs aren’t typically used as a literal map of how a user got from the home page to a page deep inside the site. Instead, they’re used as a way to get them “home” again or at least back to major points along the way. There are database-driven sites that do use a literal route like a breadcrumb trail. This type of breadcrumb is called a path breadcrumb. There is also a third type, called an attribute breadcrumb, which is tied to meta information stored on the site.

Breadcrumbs are usually positioned high on a page, directly below a banner or page header content, to readily catch the visitor’s eye. The use of breadcrumbs has its great advocates, people who feel strongly that they really help a user not feel so lost on a very large site, not unlike a large and unfamiliar building such as a megastore. But there are also usability studies which indicate that users feel no less lost when they have breadcrumbs available to them. Regardless of this, breadcrumbs are advantageous to the web designer for one simple reason: They represent a clean way to present what can amount to a number of different links in a fairly compact, neat space. The alternatives are nasty: a very long menu or a massive navigation bar.

LEAVING BREADCRUMBS ■

Adding Breadcrumbs to Your FrontPage Site Unfortunately, there is no quick and clean way to add breadcrumbs to your FrontPage site through FrontPage itself, although you can certainly use them on your site. Because there is no component for breadcrumbs directly within the software, you need to either know more than a little scripting (using Extensible Markup Language [XML] or XML coupled with Active Server Pages [ASP] for creating breadcrumbs is common) or use a thirdparty web-creation tool. A quick search through a major web search engine like google.com reveals several examples for creating breadcrumbs using various methods such as developing them through JavaScript. Two of the most impressive are • The University of Washington’s Webguides (www.washington.edu/webguides/guidelines/ breadcrumbs.html) give you an introduction to setting up the files necessary for your

breadcrumbs. • Articles such as Justin Whitford’s “Breadcrumbs in Java” on evolt.org (www.evolt.org/ article/Breadcrumbs_in_Javascript/17/15480/) give excellent pointers for developing

JavaScript to create breadcrumbs, which you can then add to your site. If you decide to implement breadcrumbs and find the right tools and/or examples to help you do so, keep these points in mind: • Use real words rather than questionable abbreviations wherever possible. • Shorten hop (the intermediate points between current page and home) titles. For example, a hop called “Hosiery and Shoes” could become “Footwear.” • The path followed should be hierarchical and not random. Where possible, the path should have no more than five hops between where the user currently is and the site’s home page.

From the Static to the Dynamic Most of the FrontPage tools you’ve worked with thus far have been fairly straightforward. For example, you take a page template and amend it for your use. In the next chapter, you’ll learn how you can put dynamic web templates to use in your site to create a consistent look throughout your site, regardless of how many different people may be engaged in developing the site’s content.

275

CHAPTER 12

Working with Dynamic Web Templates KATE J. CHASE

In Chapter 4, “Defining Your Website,” you worked briefly with dynamic web templates, a site-development tool that’s new in FrontPage 2003. These templates can cut down on sitedevelopment time and provide a consistent look throughout your site, regardless of how many different developers are creating content for your site. This chapter provides a closer look at this new tool. Using an extended example, you’ll work through the whole process of developing, applying, and modifying a dynamic web template, and you’ll come to appreciate the benefits of keeping content separate from layout. This chapter covers the following topics: ■

How dynamic templates work

■

When dynamic templates can be useful

■

Creating a dynamic template

■

Applying a dynamic template

■

Modifying a dynamic template

278 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

About Dynamic Web Templates Templates always represent a time-saver whenever you have to create more than one version of almost anything. They allow you to preset certain selections and store them into a master copy of sorts that you can use as the basis for similar work each time you start fresh. You’ve already discovered how templates can help with page development, but dynamic web templates also can serve a site-wide platform. What makes a template dynamic compared to an ordinary web page template? The answer to this question is rooted in the template’s ability to act in part as a container for ever-changing, or dynamic, content, which is the kind of content most busy, professional sites offer. The template is the layout look, and the content resides separately from it. This is different from static content or the kind of content that you type into a page manually or copy from another source. However, dynamic is a bit of a misnomer, because it’s not really meant in the sense that the term dynamic content is typically used. You can swap different content easily in and out of a dynamic web template as implemented through FrontPage, but it’s really not meant to work with a professional content management system as you have on a large-scale commercial or professional site. What it does differently than a typical web template is assign locked as well as editable regions. The designer, developer, or administrator controls the locked regions, while anyone who has sufficient rights to add content to a site can work with the editable regions of a dynamic template. By doing so, you can give others developing content for your site a way to add that content without messing with either a page’s layout or material contained in an locked region—smart for both consistency and a degree of security. Let’s assume that you want to create a layout where you always want the banner to appear at the top of every page with the same words and logo, the navigation always appears at the left, and the same copyright information at the very bottom of each page, and leaves a wide column within each page for the inclusion of content. While you could set up the same thing using either a standard or a dynamic template, the difference is that a standard template can’t protect other areas of the layout beyond that wide content column from tampering and changes. Sure, if you’re collaborating with others, you could provide them with a copy of a standard template and tell them, “only add material to the wide column but don’t change anything else.” That approach might even work…at least right up to the point when you suddenly notice that your layout has changed from a blue color scheme to a red one, when the CSS positioning discussed in Chapter 8 has been unwisely rearranged, and when the content collaborator has decided to add his or her name as the copyright holder. As you get into Part III of this book, “Adding Dynamic Content,” you’ll learn about the capabilities required to move a website from a static platform (where the site stays unchanged

ABOUT DYNAMIC WEB TEMPLATES ■

until you specifically and manually make changes to it) to one that changes dynamically, depending on what the visitor is looking for. If you don’t expect to make the move to a dynamic web environment anytime soon, you can use dynamic web templates as a way to automate the consistency of your layout and keep the content in a separate location from the layout itself. They can be very helpful in any collaborative environment. They can be used like the regular page templates discussed in Chapter 4 and in Chapter 6, “Creating a New Web Page” but with the locked regions helping to protect the page arrangement.

CONTENT MANAGEMENT AND DYNAMIC WEB TEMPLATES One important point to be made about dynamic web templates is that they don’t just represent a tool for consistent layout. They also represent at least an entry-level content-management tool because you can handle the production of a number of content pages automatically by attaching such a template to it. As the volume of your site’s content increases, so does your need to automate production and exercise control over content presentation en masse. Think about a news or information site you may visit regularly. Two favorites of mine are The New York Times and The Los Angeles Times websites. On both of these sites, hundreds of new articles may appear each and every day. If you happen to believe a single person or two sits there and creates each page separately from scratch each time, I have a bridge in Brooklyn available at a bargain price! In actuality, very little may change from page to page, although the content may make it look quite different. There is always a banner at the top and a list of options down the lefthand side. These sites offer links to major categories such as National or Foreign or Op/Ed. Often, the only major change is the actual content itself, along with promotional banners, ads, and other elements that may be added specifically to that page or to all pages within a particular collection. That’s not to say these sites use dynamic web templates, but they may use something very close that’s done on a grand scheme, because these sites are repositories of great volumes of content that is often stored for many years. All those articles, as they get pushed out of the digital copy room, get fed into a professional content-management system (discussed in Chapter 22, “Enabling Content Management”) and then spit out again into a designated template or style sheet for a particular type of page. In fact, about the only way you can stop the proverbial presses online is to unplug its web server. Your situation is apt to be quite a bit different from this, but it still allows us to take a lesson from the “big boys” in web content delivery by setting up your layout via a dynamic template, then feeding different types of content into the editable region.

279

280 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

How Dynamic Web Templates Work What dynamic web templates do specifically is allow one or more web designers to create a basic web page design that’s populated by areas where others can add and edit material. These areas are known as editable regions. Dynamic web templates also contain locked regions, which remain the same throughout the template’s use and don’t permit the addition of any content or a change in overall layout. In fact, you configure only editable regions; the remaining area is assumed by FrontPage to be locked from content addition. Imagine that you want a layout where a banner always appears across the top, a menu always appears along the left-hand side of the page, and other relevant information appears along a narrower right edge, as shown in Figure 12.1. In the middle between the menu and the list, below the banner, is your editable region—the area in which you (and others) can add content. You can establish these characteristics in your dynamic web template and use it again and again to create consistent pages. In the underlying HTML code, a template leaves a blank region between the opening and closing tags in the web page. This is the editable region. This region,

once configured, is available for content. Separately, you may write an article as part of your content collection. You save it as a normal .htm file without applying any real layout, just text formatting. Then you attach the dynamic template to that page, and the content from the .htm file is read into the region of the template. Figure 12.1 That big white area is just waiting for your content.

ABOUT DYNAMIC WEB TEMPLATES ■

When Dynamic Web Templates Help The development and implementation of dynamic web templates can assist you in a number of different ways: When you demand consistency Remember the old saying about too many cooks in the kitchen? Dynamic web templates provide a relatively simple way to allow many different people to contribute content to the same site without the site looking like a strangely mixed portfolio of wildly divergent styles and presentations. The developers build the content; you provide a template for them to use to frame that content in pages on your site. In this way, the article about risk management written by Joe can appear on a page that follows the same layout and formatting conventions as the page housing the column on reducing insurance costs authored by Maureen. When one isn’t enough While you just read about consistency of style, here’s a side point to consider: The use of dynamic web templates doesn’t limit you to just one-page designs for your entire site unless that’s all you want. Instead, you can create various templates to serve specific purposes when you want different looks. Yet if you do use a single template design, each subsequent total redesign of your site can be accomplished in just a few steps as you attach a new template to your content files. This means you don’t have to reengineer every page on your site manually. When your content changes quickly but your layout shouldn’t With dynamic web templates, content is developed separately from the page design. The two are then “wed” through a process where the content contained in one file is fed into a designated content space in the template. Because both components are developed separately, you can change your content as frequently as needed without having to redo your layout. Even if your site is apt to be more static in nature and delivery to start, it’s much easier to quickly create basic text pages you save separately from the template without having to also worry about changes in layout. When you instead add content directly to a page layout, you may find yourself juggling a table that goes out of kilter when you insert extra words or formatting from one area that suddenly bleeds into another area that was supposed to look quite different. When you need to reserve page areas Dynamic web templates permit you to designate certain areas of a page as off limits to layout modification and to the addition of content. Suppose you want a simple banner to appear at a specific size and location on all of your pages. You can designate that area in your dynamic web template to protect it so that it displays that banner without the fear that something else will appear in that space.

281

282 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

When you’ve already got a great design Part of the beauty of such templates is that you don’t have to start from scratch to develop one, although you’re free to do that (and will be doing so soon). If you’ve got a page design you adore, you can turn it into a template by saving it as one. Then you configure the regions that can be edited to act as content containers.

Creating a Dynamic Web Template Virtually any web page can be attached to and/or saved as a dynamic web template. These pages are saved very much as you would save any other page, except that you specify its save format as a dynamic web template; such templates end in the suffix *.dwt. Once created in this form, the template can then be modified to create the locked regions where content or positioning always stays the same, regardless of what collaborators may do with the rest of the area on the page. The basic steps to creating a dynamic web template are as follows: 1. Create a new web page or open an existing web page. 2. Choose File ➔ Save As, then select Dynamic Web Template. 3. Select an area of the page you want to designate as an editable (that is, not locked) area. 4. Choose Format ➔ Dynamic Web Template ➔ Manage Editable Regions. 5. Provide a name for this region by typing it in the Editable Regions dialog box. 6. Click Add. 7. Repeat as needed. Let’s see this in action in a real-world application.

Hands On: Designing a Dynamic Web Template You may have already begun to develop much of your site in the main web page. Now you’re about to create a new website as a testing platform for dynamic web templates and the content files to which these templates are affixed to wed your pages to your site design as interpreted through the templates. Once that’s accomplished, you’re going to create a basic web page design and save it as a dynamic web template. This example assumes you want the overall crispness of tables but without the problems inherent with accessibility that come with them. Thus, you’ll use CSSbased positioning (which FrontPage calls layers) to design the layout.

HANDS ON: DESIGNING A DYNAMIC WEB TEMPLATE ■

Let’s break this down into parts, starting with a bit of detail work. Because you don’t necessarily want to mix this example with your current website in development, create a new website to house this project by following these steps: 1. Choose File ➔ New ➔ One Page Website. 2. From the Web Site Templates window, double-click Empty Web Site. If needed, under Options, specify a new location for this website. Click OK. Your new website is now open. The next set of steps will open a blank page and begin the layout for the template. It’s not a bad idea to create a test website to try out new features or tools without affecting the contents of your main website. An empty website works fine for most purposes, but you could also create an empty website and then import the contents of your main working website if you want a working copy of your site to tweak with impunity.

Laying It Out The layout you’re about to establish for this template is similar to one you worked with in Chapter 7, “Working Through Page Layout,” when you developed an alternate to using tables for page design. It involves three basic areas: one running across the top, another along the left-hand side, and a third that will ultimately house sample content you’ll develop later in this chapter. To create the basic layout, follow these steps: 1. Choose File ➔ New ➔ Blank Page. 2. Select Insert ➔ Layer. 3. Point to the layer and position your cursor in the middle of the right-hand side of the layer until it changes into a double-sided arrow. Pull the layer until it fills the width of the window. 4. Point to the layer again, position your cursor in the middle of the bottom edge of the layer, and pull it down until it fills roughly the top third of your window. 5. Choose Insert ➔ Layer, which places a Layer 2 where the initial Layer 1 was positioned before you modified it. 6. Click and drag Layer 2 to sit at the left-hand side of the window, immediately below the left-hand side of the bottom edge of Layer 1, as shown in Figure 12.2. 7. Point to Layer 2, position your cursor at the center of the lower edge, and extend the layer downward so that it is twice as long as Layer 1 on the page. 8. Point to Layer 2 again, position your cursor at the center-right edge, and extend the layer to the right so that it covers roughly a third of Layer 1’s total width.

283

284 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

Figure 12.2 Using CSS positioning to prepare the page design

9. Select Insert ➔ Layer one more time. Click Layer 3 and drag and drop it so that it rests below and to the right of the lower, inner intersection of Layers 1 and 2, as shown in Figure 12.3. 10. Point to Layer 3, position the cursor at the bottom-right corner of it, and extend the layer diagonally toward the right bottom of the window. 11. Choose File ➔ Save and save the page as testdyn.htm (it’s not a dynamic template yet).

Adding a Touch of Color and Border Now that you have your CSS boxes established, let’s make the various boxes look more distinctive; your first template doesn’t have to look quite so vanilla. You can omit the steps in this section if you truly adore stark white pages, but the colors help you recognize the areas involved. Follow these steps: 1. Choose Format ➔ Background. 2. Under Colors, click the box next to Background and click the dark gold on the palette. Click OK. 3. Point to Layer 1, right-click, and select Layer Properties. 4. The Layers task pane opens. Click Borders and Shading under Layer Properties, as shown in Figure 12.4.

HANDS ON: DESIGNING A DYNAMIC WEB TEMPLATE ■

285

Figure 12.3 Positioning the final CSS box on the page

Figure 12.4 The Layers tab lets you specify the characteristics for the selected layer.

286 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

5. Select the Borders tab and then take these steps: • Under Borders, choose Box. • Under Color, click to select Black (not Automatic, chosen by default, and appears black in the listing). • Under Width, change it from 1 to 4. 6. Click the Shading tab. Under Fill, click the box beneath Background Color and choose cream from the palette. Click OK. 7. Point to Layer 3, right-click, and choose Layer Properties. 8. Select the Borders tab and then take these steps: • In the Setting area, choose Box. • In the Style box, select Double, as shown in Figure 12.5. • In the Color drop-down box, select Black. • In the Width box, set to 4. • In the Padding area, set Left, Right, and Bottom to 5 and set Top to 10. 9. Next, choose the Shading tab. In the Fill area, click the box beneath Background Color and choose White. 10. Select File ➔ Save As and save with a new filename of testdyn2.htm. The result should look like Figure 12.6 when displayed in Preview mode in the browser. If you see any small problems in your template as it appears, fix them before you save it as a dynamic web template, which you’ll learn how to do in a minute. Figure 12.5 Adding a doubled border to this layer distinguishes it from the first layer.

Deciding What Goes Where In the next section, you’re going to walk through the steps necessary to configure an editable region (an area where content may be added dynamically) in your template. But to perform this operation, you need to know which area on the page you want to assign to the main content you’ll add. For the purposes of the template example you’ve nearly finished, let’s assume that you want some type of banner to appear in Layer 1 that spans the width of the top third of the page. Down the left side, in the container known as Layer 2, you can house your menu or navigation bar. The large white area in Layer 3 will hold the content. Here, you’re going to add a static banner of sorts to designate Layer 1 as an area where you would not normally add content. However, the banner can also be made up of an image such as your

HANDS ON: DESIGNING A DYNAMIC WEB TEMPLATE ■

287

Figure 12.6 The result of your layout customization

logo and additional information stored in a file very much like the sample content that can also have the template attached to it. (You’ll create content like this later in this chapter in the “Applying the Dynamic Web Template” section.) Follow these steps to create a basic banner: 1. Point to Layer 1 and press Enter once. 2. Type the following: R Mottman Marketing Employee Web. 3. Highlight both lines of the text you just typed. 4. From the Formatting toolbar, choose the following: • Arial for the font • 24 for the font size • Bold • Center • Dark green font color (Click the down arrow to the right of Font Color and choose the proper color from the palette.) When done, your page-evolving-into-template appears as the screen in Figure 12.7. Let’s presume that Layer 2 is not a candidate for adding primary content because it will provide a container for your link bar navigation scheme.

288 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

Figure 12.7 A static banner has been added to the template design.

If you want to add a vertical link bar to Layer 2 to provide a locked-in navigation scheme for your layout template, you can take the following steps: 1. Click Layer 2. 2. Choose Insert ➔ Web Component. 3. In the Insert Web Component window, select Link Bars and then select an option such as Bar With Custom Links or Based On Navigational Structure. Click Next. 4. When prompted to choose a style, click User’s Theme. Click Next. 5. From Choose An Orientation, select the vertical layout. Click Finish. 6. The Link Bar Properties window appears, from which you can select the pages to include in your link bar. Obviously, step 6 is hard to reproduce with the trial website you just created because it has very few files in it so far. That’s why you didn’t actually add a link bar in this example. But you’ll need that step when operating from a working website with all your files available. Now that you have the layout in place and your regions planned, you need to save this file as a dynamic web template and then create an editable region in this example.

APPLYING THE DYNAMIC WEB TEMPLATE ■

289

Saving the Template and Configuring Editable Regions The last time you saved the template-in-progress, it was called testdyn2.htm. But that’s a standard web page format, and you want it stored as a dynamic template. To do so, perform these steps: 1. Choose File ➔ Save As. 2. From the Save window, click the drop-down list box next to Save As File Type and choose Dynamic Web Templates. 3. Click the box next to File Name, delete the present name, and type instead: mytest. That final step saves the file as a template with the full filename of mytest.dwt. Yet you’re not quite done. You also need to establish the region where content will appear; this will be your example’s third CSS box. To do this, take the following steps: 1. Point to Layer 3, right-click, and select Manage Editable Regions. 2. When the Editable Regions window opens, you’ll see one region (doctitle) already listed. Click the Region Name field and type ContentSpace, as shown in Figure 12.8. 3. Click Add and then click Close. 4. Choose File ➔ Save. Now, just to be clear so you understand that some of the limitations being set here are for the purpose of this example, you could also repeat these same steps for Layers 1 and 2, define region names for them, and assign them content. However, in this case, you’re just establishing Layer 3 as your content container for when you attach this template to the file that contains your content. The next section lets you set up a sample content page and then apply this template to it so you can finally see it in dynamic action.

Applying the Dynamic Web Template To use your template as a dynamic web template rather than as a normal template, the content is usually stored separately (in a different file) from the template to which it is applied. That’s the dynamic part because you can apply the same content to a number of different layout templates or apply the same template to many different content articles rather than design a page and type static text into it.

Figure 12.8 The Editable Regions window allows you to define a name for your editable regions.

290 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

You have a template to work with. Now you need some content that will, if you’re successful, fit nicely into that editable region in your template. If you’ve jumped ahead or have some basic sample content (without lots of extras) you want to try out with this template, you may also opt to jump directly to the section “Attaching a Dynamic Web Template.”

Creating Sample Content In the sample content you’re about to create, you’re going to apply simple formatting. Normally, however, you’d use a style sheet to apply a consistent style throughout. Before you jump into the steps, it’s important to appreciate—especially if you’ve been developing layout and content together on your site pages—that you no longer have to jump through hoops to make the content fit the space. All you need to do is develop the content and give it the basic formatting as you want it to appear when it’s published in its template container. Follow these steps to create a basic page of content: 1. Choose File ➔ New ➔ Page Templates ➔ Normal Page. 2. In the formatting style bar, assign these settings: • Under Style, choose Heading 1. • Under Font, choose Bold and Center. 3. Type the following: The Qualities of a Stellar. 4. Press Shift+Enter and continue typing: R Mottman Marketing Employee. 5. Choose Insert ➔ Horizontal Line. The page should now look like that in Figure 12.9. 6. The cursor is now positioned for your first line. Notice that the style reads Normal. Type the following: When Annica Garaboy was named R Mottman Employee of the Year at last December’s Holiday Award dinner, it was no surprise to anyone. Annica, the youngest-ever senior manager of new accounts, hit the ground running when she joined R Mottman less than two years ago as a special accounts rep. Her first successful job was to recover more than half a million dollars in business lured away by our competitors. Last year, Annica scored our largest new account in the past five years. Annica represents the best qualities of an R Mottman employee superstar because she:

APPLYING THE DYNAMIC WEB TEMPLATE ■

291

Figure 12.9 Creating a heading on the content page

7. Under Style, choose Bulleted List and type the following: thinks both inside and outside the box goes the distance knows that when she succeeds, all her teammates at R Mottman win 8. Choose File ➔ Save and save under the filename testone.htm. Congratulations, you now have sample content to which you can attach your dynamic web template. It looks pretty basic, as you can see from your FrontPage window and Figure 12.9, shown earlier.

Attaching a Dynamic Web Template With your sample content in virtual hand, you can now use your template by attaching it to the content file. To do so, perform these steps: 1. Open the page to which you want to attach the template. In this example, select testone.htm. If you need to attach the same template to more than one content article,

select the first article, and then press and hold your Ctrl key to choose subsequent articles. 2. Choose Format ➔ Dynamic Web Template ➔ Attach Dynamic Web Template. 3. In the resulting window, select the dynamic web template you wish to attach (mytest.dwt) and click Open, as shown in Figure 12.10. Click Browse to check your drive(s) if the template you want isn’t displayed. Only those dynamic templates saved in this website are displayed by default. Click OK when done.

292 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

4. The Choose Editable Regions For Content dialog box appears, as you can see in Figure 12.11. The top lists the current page being used for content along with the template being attached. In the Old column, you’ll see the name of the region (if any; in this case, the region name is Body) as it exists in the content file itself. In the New column, you’ll see the name of the editable region the content will appear within. Click OK. The attachment now made, the contents of your file testone.htm are now displayed in Layer 3 or the ContentSpace editable region of your dynamic web template named mytest2.dwt. This is what has happened in Figure 12.12.

Note that this page, as viewed in FrontPage, still reads with the original content filename of testone.htm. You may save the file again (choose File ➔ Save As). If you later want to open the template from within its content page, select the dynamic web template’s name in the folder list to the left of the screen or by clicking the Web Site tab. You can also take the following steps: 1. Open the content file. 2. Choose Format ➔ Dynamic Web Templates ➔ Open Attached Dynamic Web Template. Finally, what you can attach, you may later want to detach. Let’s see how you can do this.

Detaching a Dynamic Web Template You may find it necessary at some point to detach a dynamic web template from your content. For example, you may want to attach a different template to the content, or you may choose to abandon the use of dynamic web templates altogether in favor of strictly CSS layout. (Yay!)

Figure 12.10

Figure 12.11

Only dynamic web templates are displayed in the Attach Dynamic Web Template dialog box. Select the one you want to attach.

Verify your information in the Choose Editable Regions For Content dialog box.

MODIFYING A DYNAMIC WEB TEMPLATE ■

293

Figure 12.12 The content of the file is fed into the desired editable region of the attached template.

To detach a template from a content file, take the following steps: 1. Open the page or pages containing the template you want to remove. 2. Choose Format ➔ Dynamic Web Templates ➔ Detach Dynamic Web Template. By doing this, you’re removing only the template and the formatting that it offers. The content, stored separately, is untouched save for the fact that the template is no longer attached to it. You are now free to attach a different dynamic web template or use a totally new approach for your layout.

Modifying a Dynamic Web Template You can add more editable regions to your existing dynamic web template, and you can remove editable regions that you’ve already created. Renaming the regions is also an option. For example, you can take the dynamic web template you created with just one editable region and add Layer 1 or the banner area as another region. To add a region to a template, take these steps: 1. Open the desired dynamic web template in Design view. 2. Point to the area in your web template that you want to convert into an editable region, right-click, and select Manage Editable Regions. The Editable Regions dialog box opens. 3. In the Region Name box, type a name for the new region. 4. Click Add and then Close.

294 ■ C H A P T E R 1 2 : W O R K I N G W I T H D Y N A M I C W E B T E M P L A T E S

To remove a region, take the following steps: 1. With the dynamic web template open, point to the region you want to remove, rightclick, and select Manage Editable Regions. The Editable Regions dialog box opens. Figure 12.13 Removing an editable region from your dynamic web template

2. The chosen region is highlighted. If not, select it. Click Remove (see Figure 12.13) and then click Close. Follow these steps to rename an established region: 1. With the template open, point to the region you want to rename. Right-click and choose Manage Editable Regions. The Editable Regions dialog box opens. 2. If not already selected, choose the name of the region to rename. The name appears in the Region Name box. 3. Click in the Region Name box, delete the existing name, and type a new one. Don’t forget to save any changes to your template as you work.

Getting More Dynamic With Your Site You’re at the threshold of Part III, where you begin to see what’s necessary and possible in the realm of generating dynamic content for your website. In Chapter 13, “Adding Animation and Multimedia,” you can use some of the FrontPage’s more interesting features as you add animations and other multimedia content.

PART III

Adding Dynamic Content What is dynamic content? I could tell you that it’s any content that isn’t static—content that does not lie dormant, passive, and unchanging on a web page. That’s a start, although it’s a simplistic one. Much of the content you’ve worked with thus far in this book is considered static. Much of the website you’ve been developing fits the definition of static because it involves creating a page, saving it where you do most of the work offline, and later publishing it, without engaging your visitors with much more than your text and your pictures. While the most obvious example of dynamic web content may be animation and other multimedia elements, dynamic content also includes letting visitors take surveys and offer you feedback, customizing your content delivery based on what you may know about a particular visitor, and connecting to databases. Databases are covered in Part IV, “Developing Web Applications,” but you’ll learn more about the other types of dynamic content on your journey through Part III, which includes the following chapters: CHAPTER 13

■

Adding Animation and Multimedia

CHAPTER 14

■

Inserting ActiveX Controls and Other Advanced Objects

CHAPTER 15

■

Building Forms

CHAPTER 13

Adding Animation and Multimedia KATE J. CHASE

Visual appeal is one of the many goals of any website because what pleases the eye makes an impression. It not only increases the chances that a visitor will return, but it can lure them to the actual content of your site. In this respect, animated graphics and other multimedia elements aren’t just eye candy because they capture the eye momentarily and then keep that eye browsing your site. Audio and video components offer you the ability to make more compelling presentations that reach beyond the text alone and can be relevant to the purpose of your site. Yet before immersing yourself in how you can use multimedia to enrich your site and engage your audience, please remember some of our earlier advisories about being judicious in your use of special features. Use them too often or inappropriately, and rather than catch the visitor’s attention, they may simply distract from it. Some web designers, when faced with whether or not they should include a special element, ask themselves, “Is the page or site enhanced by its use? Does it bring attention to what I want it to, or does it distract from it? What does this element bring to the visitor?” This chapter shows you how to do the following: ■

Creating rollover effects

■

Using interactive buttons

■

Making and use animated web images

■

Adding background sound

■

Adding a media player

■

Adding a map or “breaking news” headlines

298 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Creating Image Rollovers Rollovers, also called mouseovers (FrontPage uses both terms), allow a text link, button, or other graphic media to change appearance when a mouse cursor is positioned over it. A classic example is a button that displays normally until you position the mouse over it, at which time the button changes to look as if it has been depressed. Such an effect is dynamic because it gives the visitor instant feedback in reaction to a mouse cursor placement. Text rollovers are created and styled using Cascading Style Sheets (CSS). (Chapter 10, “Inserting and Maintaining Hyperlinks,” explains how to do this in FrontPage.) Image rollovers are typically created by having two different images: one for a normal button and one for a depressed button. Typically, you use an application such as JavaScript to pre-load both images for the visitor’s browser so that the second image can be exchanged for the first image as quickly as possible. Most folks will see this change instantaneously, except for those with a slow Internet connection. Using FrontPage tools, you can also create mouseovers for images, like those buttons. There are two ways you can change the appearance of a button image. Swapping images is the more common approach in web development, but that’s not how FrontPage by default handles rollovers. Instead, it simply changes the formatting applied to a single image. Although it’s a simpler approach, this method—called interactive buttons—doesn’t allow as much customization as swapping images, and it works only on sites where FrontPage Server Extensions or Windows SharePoint Team Server has been installed. In this section, you’ll learn how to implement both methods. Figure 13.1

On the left side of Figure 13.1 is an image as it would

On the left, an image before you roll the mouse over it. On the right, the same image during the mouseover.

normally appear. On the right side is the image as it appears on mouseovers, changing its color from light to dark. Color change is one of the most frequent effects of mouseovers. Buttons and rollovers can offer either two or three states: • Two states—Before the mouse moves over it and as you click it. • Three states—Before the mouse moves over, during mouseover, and when the mouse button is pressed; this is more common. Figure 13.2 contains an example of a button in all three states: before mouseover, during mouseover (called the hover state), and when pressed.

Figure 13.2 The button in its three states: before, during, and after mouse action

Before

During (hover

After (pressed)

CREATING IMAGE ROLLOVERS ■

299

Swapping Images Fortunately, you can swap pictures and get the customization effort you want without knowing much, if any, scripting. This section walks you through an example of swapping images where you create two states: normal and on mouseover. Later, when you work with interactive buttons, you’ll create three states: before the mouse moves over it, during rollover, and when pressed. Understand that you can customize this. You can make your swapped images have three states by creating three images and adding an Onclick behavior, which would give you the pressed image state. Or you can, if desired, remove the hover change for an interactive button so it reacts only if pressed. Before you get started, remember that the only reason to create a rollover effect is to give the user some feedback about his or her actions. Under normal conditions, you want to reserve such effects for hyperlinks (as discussed in Chapter 10) or images or buttons being used to navigate a visitor to another page that runs a process or applet. In these steps, you’re going to create two images: one as the image will look normally (without the mouse over it) and one for when a mouse rolls across it. Customary differences between the before image and the during image include the following: • Color change • Image reversal, where the during image looks like a photo negative of the before image. • Shape change (For example, the before image is a circle shape while the during image is a star shape.) • Special effects created by the graphics software package used to create the image. For example, the during image appears to be depressed or to shimmer, or the during image is an animated GIF (discussed later in this chapter). For this, you’re only limited by your imagination and the software you use to create the image. Microsoft Paint can be used, for example, but it may be too basic to offer the effects you want to achieve. Prepare to experiment. You’re going to create two images. One will be the image as it will normally appear. The second will be the image to be swapped in when the mouse is positioned over the first image. These two images will be saved with two different filenames. Here are the steps necessary to proceed: 1. Open the page where you want to insert the image effect and position your mouse at the location on the page. 2. Choose Insert ➔ Picture ➔ From File and specify the first of the two images you created. 3. When the image appears on the page, right-click it and choose Picture Properties. The Picture Properties window opens.

Figure 13.3 The Picture Properties window lets you add alternative text and a hyperlink.

300 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

4. Click the box to the right of Text in the Alternate Representations area (see Figure 13.3) and type a message to appear if the visitor’s browser cannot display the selected image. Click OK. 5. If you want to insert a hyperlink to associate with the image if clicked, click the box to the right of Location in the Default Hyperlink area and type the URL for the page you want the image to open. Click OK. 6. Back in your page, click to select the image again and then choose Format ➔ Behaviors, which opens the right-hand Behaviors task pane. 7. Click the Insert button and choose Swap Image, which opens the Swap Images window. 8. Provide the URL or file location of the second image in the box next to Swap Image URL, or click Browse to locate it. 9. At the bottom of the Swap Images window, note that Preload Images (to save time) is checked. If you want the second or mouseover image to swap back to the first or normal image when the mouse is moved away, click to check the Restore On Mouseout Event box (see Figure 13.4). Click OK. 10. Once the Swap Images window closes, you’ll see that this procedure adds two Events (Onload and Onmouseover) listings and two Actions listings (Preload Images and Swap Images), as shown in Figure 13.5. (For those of you with experience using earlier versions of FrontPage, the Behaviors option replaces the Dynamic HTML Scripting option.) But what if you want to take the easy way out and not have to create two images for each effect? If what you want fits into a button format, try using interactive buttons with mouseover effects, as discussed next. Figure 13.4 Specify the location of the second image in the Swap Images dialog box.

CREATING IMAGE ROLLOVERS ■

301

Adding an Interactive Button with a Mouseover Effect An interactive button gives the visitor some feedback when it is pressed or moused over. It may change color or outline, or it may appear to be depressed. While such interactive buttons won’t look wildly different from other types of buttons you may create using other packages, that’s sort of the point: that you’d have to use other software to develop the buttons and the before and after results. As a web designer, it’s smart to have several graphics packages available to you to give you the greatest range of work. This tool won’t replace that need. Buttons also typically require some knowledge about scripting to get them to respond on the page as you wish them to do. But through a few screens, FrontPage lets you build basic buttons from a number of different styles without going elsewhere. For those of you with no experience creating their own graphics, it’s a plus. When you use interactive buttons, it automatically creates the change in the button for you, without you needing to create behaviors as you did when you swapped images in the previous section. However, just as with other FrontPage tools that allow you to perform easily what would otherwise require scripting knowledge, interactive buttons work only if published to a server running FrontPage Server Extensions or Windows SharePoint Services. For those of you familiar with the term hover button (a button that changes appearance when the mouse “hovers” over it) or have experience with an earlier version of FrontPage that used the term, understand that the interactive button talked about here is basically the same as the hover button. To add an interactive button with a mouseover effect, complete these steps: 1. Open FrontPage to the website and page where you want to insert the interactive button. Place your mouse cursor at the desired insertion point. 2. Choose Insert ➔ Interactive Buttons. The Interactive Buttons dialog box opens. 3. In the Interactive Buttons dialog box (see Figure 13.6), click the Button tab and choose the type of button you want to use. As you select a button type, it appears in the Preview window at the top of the dialog box. Roll your mouse across the button to see the change in effect that your visitors will see. 4. Click the box to the right of Text and type the word(s) you want to display on the button. Click the box to the right of Link and type in the URL for the page where you’re linking this button. Click OK. 5. Next, choose the Text tab and choose your font, font style, and size. Click OK.

Figure 13.5 In the Behaviors task pane, you set the behavior to display when an event such as a mouseover occurs.

302 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

6. Still on the Text tab, set the button states by altering the appearance of the font color. By default, all three states have the same font color. As you’ll see when you’re done, because the hover state makes enough difference to the button for the change in state to be apparent, let’s change the font color only for the pressed font color. Click the color bar beneath Pressed Font Color and choose white. 7. To modify your button’s appearance, click the Image tab and make the desired changes. For example, let’s assume you chose Glass Capsule 1 for a button style and want to increase the button’s width to accommodate longer text while maintaining the button’s overall proportions. In the Image tab, click the up arrow next to the Width box until it reads 120, as shown in Figure 13.7. Be sure to check the Maintain Proportions box if it’s not already checked. Similarly, if you want the button to appear transparently rather than with a set background, click Create Buttons With Transparency. Click OK until you exit. Your interactive button should now appear right where you meant to insert it. Look at Figure 13.8, and you’ll see a page in development where I’ve added a series of interactive buttons (and their underlying links) in a melon-colored Glass Capsule style as a navigation tool. And that’s another beauty of interactive buttons: you can line them up in a row without the hassle of assigning specific positions through layout or special scripting.

Figure 13.6

Figure 13.7

Choose a button style. Be consistent with your color scheme and other buttons used on your website.

The Image tab allows you to modify button size and/or turn transparency on or off.

CREATING IMAGE ROLLOVERS ■

303

Figure 13.8 A series of interactive buttons placed together on a web page

But Figure 13.8 raises an interesting situation you should be prepared for. Not all interactive button types (and not all images in general) work well as transparencies or with set backgrounds. Let me give you an example using the page in Figure 13.8. When I created the buttons, my background was white. After adding them, I decided a cream-colored background was a better complement for the button color. In changing the background, however, I noticed that my buttons, created with a solid background of white, now showed tiny white bridges between the right edge of one button and the left edge of another. It was almost imperceptible, but the result looks less polished. Using step 6 of the instructions for modifying the buttons, I tried switching the button style to transparent and discovered this created sharp edges to my rounded top tab edges, which was also undesirable. Again, this was hard to see without an effort, but it’s the kind of problem a careful designer wants to fix. So I went back to the Image tab and selected Create Buttons With Solid Background Color, but I used the Color drop-down list and picked cream. Voilá! Interactive buttons will work only on sites where FrontPage Server Extensions or Windows SharePoint Team Server has been installed.

304 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Creating Animated GIF Files So you’d like a little motion with your web images? It’s easy to download animated GIF files from various web art collection sites. But many web designers never create their own animations, simply because they don’t know how easy these animations are to create using FrontPage and the right supplementary tools. So let’s look at what these moving web images really are. An animated GIF differs in composition from a regular GIF graphic file only in that the animated GIF is actually composed of two or more regular GIF files put together as a series of frames (not unlike cartoon “cels”). Each frame is then displayed a certain way for a certain period of time. The animation is an effect caused by displaying the frames in sequence. Here’s an example that’s popular around Halloween time: As a web page opens, you see a picture of a black cat (one frame), then a witch sitting with the cat (second frame), and then the two of them sitting together on a crescent moon (third frame). You get the impression of motion or animation as each new frame appears. One Artisan’s Heirloom Seed Company’s web page uses an animated GIF file (available from the online Microsoft Design Gallery) in its banner; you see hands planting a seed, which immediately grows to a thriving seedling, as shown in Figure 13.9. This animated GIF was created and designed to be transparent, meaning that any white space not occupied by the graphic takes on the color (or image) of the background used on the page (or table or cell or layer). Refer back to Chapter 10 for questions on working with graphics. Figure 13.9 Judicious use of animated GIF files can be eye-catching.

RULES OF THE ROAD FOR WEB ANIMATION ■

The steps for creating your animated GIF files differ a bit, depending on the software you use to create the file. But this process always involves most if not all of these three basic steps: 1. Create each unit or frame of the animated GIF and save each as an individual GIF file. 2. Use one of the animated GIF compiler tools (listed shortly) to assemble your multiple GIFs into a single animated GIF file. 3. Insert your animated GIF file into a page as you would any other graphics file (Insert ➔ Picture ➔ From File) and choose the location of the GIF file. A number of different graphics programs allow you to create the original GIF files: • Adobe PhotoShop • Alchemy Mindworks • CorelDraw • NewTek LightWave • PaintShop Pro by Jasc Software You can even create simple GIF files using Microsoft Paint (a Windows tool available by choosing Start ➔ Programs ➔ Accessories). Some—but not all—of these tools let you create and compile right within the same software package, as PaintShop Pro does. Alchemy Mindworks allows you to compile and animate your GIFs using a $20 product called GIF Construction Set Professional (www.mindworkshop.com/ alchemy/gifcon.html).

One of the most recommended tools, Ulead GIF Animator, offers a free downloadable trial version. You pay a $44.95 registration fee ($49.95 on disk as opposed to download) if you want to use it past the 15-day preview period. You can find it at www.ulead.com/ga/runme.htm. You’ll use the trial Ulead GIF Animator for this chapter’s Hands On exercise, “Creating an Animated GIF.”

Rules of the Road for Web Animation Before you try the Hands On exercise and create an animated GIF file, and before you fall madly in love with the idea of creating animated GIF files for every page on your site, be aware of the general rules of the road with using animation on your website (unless, of course, you’re running an animation-oriented web business). Discretionary placement Animations can be eye-catching. While some visitors may ignore them, others may reload your page again and again just to watch them or to show them to others. However, in most cases, animation serves as a graphically interesting way to augment other content (although an animated GIF can also supply the appearance for a banner ad), so watch where you place an animation that it doesn’t wrest attention from something else.

305

306 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Also, avoid heavy use of animation; the wow factor they can offer diminishes sharply with frequency of use. Use appropriately Related to what was just said, some people become so enraptured of animations that they tend to use them everywhere. But animations tend to be most effective not just when used sparingly but also when the animation used fits the overall content in the web page. Least number of frames Wherever possible, limit the number of frames you use in creating your animated image. Each additional frame contributes to the size of the file and the amount of time it takes to load in a visitor’s browser. An ideal range is three to five frames per animated image, although you can get by with as few as two frames in some situations. Compress the animation Many, but not all, GIF animation tools allow you to optimize (remove unnecessary graphics data information) and compress the size of your compiled animation. Use this capability, especially when you’re working with three or more frames. In some cases, this compression can make a significant difference in animated GIF file size and the time it takes to load in a browser. Accessibility Remember that not all visitors will be able to view your animated GIF because of either physical or hardware accessibility issues. You need to provide alternative attribute text to describe that GIF.

Hands On: Creating an Animated GIF There are many different ways you can create animated GIF files. This exercise focuses on creating and implementing this kind of image using just one set of tools. In this example, you’re creating an animation of a simple tree (for a children’s holiday page) as it goes from unadorned to decorated in five frames (Figure 13.10 shows all the stages). You can substitute anything else you want to create instead of the tree, but make it something you can evolve within five frames. Let’s use the Ulead GIF Animator trial software (available at the URL mentioned earlier) to create the animation. Follow these steps to create the animation: 1. Open Microsoft Paint and draw an outline of an evergreen tree. Save this file as tree1.GIF. 2. Using tree1.GIF as your foundation, draw a base on the tree and save this now as tree2.GIF. Figure 13.10 A simple Christmas tree animated GIF

HANDS ON: CREATING AN ANIMATED GIF ■

307

3. Using tree2.GIF as your foundation, add colored rounds to the tree to look like either holiday ornaments or lights. Save this as tree3.GIF. 4. Using tree3.GIF as your foundation, draw a garland around the tree and add additional colored rounds. Save this as tree4.GIF. 5. Finally, add some sort of tree-topping design to tree4.GIF and save this final file as tree5.GIF. 6. Download the trial version of Ulead GIF Animator and run the downloaded file according to the instructions on the site. 7. Once the animator is installed, choose Start ➔ Programs ➔ Ulead GIF Animator Trial to run it. Once launched, select File ➔ Animation Wizard. Figure 13.11

8. Select the size in pixels of the animation you want to create (based on the size of the GIF files you created). Click Next.

Select the files to be included in the animated GIF.

9. Click Add Image to see the Select Files window (see Figure 13.11), where you can begin adding the GIF images you created to this animation. Note the onscreen instructions for reordering the sequence of the images. Click Next. 10. Select the time for each frame to be displayed (or delayed). Click Next and then click Finish. 11. The main Ulead GIF Animator workspace loads, and you can see each frame listed below the selected image (see Figure 13.12). Click the Preview tab to see how the animation currently plays. Figure 13.12 In the Ulead GIF Animator workspace, you can resize the canvas and otherwise customize your animation with the tools provided.

308 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

12. Make any desired changes to your work, choose File ➔ Save As, specify the file type GIF (see Figure 13.13), and provide a filename for your newly compiled animated GIF file. Click Save. 13. Launch FrontPage, open the desired page where you want to insert the animated GIF file, and place your cursor at the point of insertion. 14. Choose Insert ➔ Picture ➔ From File and specify the image file you want to use (for example, anitree.gif). The image appears. Right-click and choose Picture Properties so you can edit options such as the size, layout, and text wrapping for the GIF file, as shown in Figure 13.14. 15. Once you’ve made any adjustments, go back to your FrontPage web page and choose File ➔ Preview in the browser to see your image in action. Now here’s a new issue you’ll see if you used anything but a white background for your page: there’s a white canvas around the image itself. Sometimes the presence of this canvas provides a good backdrop, but more commonly, it just looks sloppy. To avoid this Figure 13.13 Save the finished animation with a different filename from your individual frames.

(unless you indeed use a white background for this animated GIF), create the GIF as transparent, a property you learned about in Chapter 9, “Working with Graphics and Galleries.” With Ulead GIF Animator, the easiest way to set transparency is to bypass the wizard screen when you first load the software and go right to File ➔ New to begin a new project. When that happens, you can set transparency as well as specify the canvas size. In the next section of this chapter, you’ll learn about FrontPage add-ins. As you do, note that some site-animation tools are among those available as add-ins for FrontPage. Now let’s show you how to add audio and video to your site. You’ll start with the easiest component—adding a background sound to a web page. Then you’ll learn how to add a media player to your site to play streaming audio and/or video.

ADDING OTHER MEDIA TO YOUR SITE ■

309

Adding Other Media to Your Site From mouseovers and animations, let’s move on to adding sound and video to your site. Either or both can be used to make presentations, present music or testimonials, offer news, or otherwise help you make your point or enhance your site. In the process, you’ll learn about a variety of FrontPage add-ins that can help you insert such media content and fulfill some other important non-media functions for use in other areas.

Adding Background Sound Few things grab someone’s attention when web browsing than when music or sound begins to play automatically through the browser. Someone with a dozen windows open will look carefully to see which one presents the sound. When sound is played like this, it can grab a visitor’s attention or it can set a mood (a travel site once added the lovely sounds from a tropical beach to its opening page in January to get people thinking about vacations) as well as impart some information. The sound can

Figure 13.14 Set options such as the size, layout, and text wrapping for the animated GIF file.

be from many different recorded sources too, including simple WAV files or longer MP3 files. However, browsers other than Internet Explorer will ignore background sound. But like other multimedia bells and whistles, sound should be used in a limited fashion. There are types of audio whose playback the user can control (and you’ll learn how to add those types), background sounds playing over a web page generally can’t be stopped unless the user presses Stop on the browser, moves to a different page, or closes the browser

Figure 13.15

window.

Use the Page Properties General tab to specify a background sound file.

Follow these steps to add a background sound to a page on your site: 1. In Page view, right-click the page where you want to add sound and select Page Properties. The Page Properties window opens. 2. Select the General tab. 3. In the Background Sound area, type in the location and filename of the sound file you want to use (or click Browse and select it), as shown in Figure 13.15. The audio will play through the visitor’s browser—and speakers. 4. Click to uncheck the box marked Forever and type the exact number of times (if any) you want the sound file to loop (play again). Click OK to exit.

310 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Before leaving this topic, let’s just take a second to discuss looping. One of the fastest ways to send someone running from your site, making them rush to close their browsers, is to replay a short sound file again and again. Many web visitors liken this to a form of torture, and most are savvy enough to know to reload the page if they want to hear the sound file again. Even when you’re using a longer sound file, avoid looping the sound file on a page where it may take the visitor a long time to read the page.

Using Multimedia Add-ins Microsoft makes available on its Office support site a number of add-ins, programs that can be installed and added to software such as FrontPage to provide an extra level of functionality. These add-ins are generally free of charge but are not supported directly by Microsoft itself. (Some addins have been developed by Microsoft, while others are provided by third-party developers.) Available FrontPage add-ins include (but aren’t limited to) • Web theme packs • E-commerce shopping carts and tools • Server administration tools • Site management • Multimedia and special effects utilities Because we’re discussing multimedia, take a look at the Microsoft FrontPage add-in page at www.microsoft.akadns.net/frontpage/downloads/addin/default.asp. Under Find Add-ins, select

Multimedia/Special FX and click Go. A page listing available add-ins opens (see Figure 13.16). Click any add-ins that interest you, check the information (most are written for specific versions of FrontPage and all provide instructions for using the add-in), and download and install those you want according to the instructions. Some of your options include animation tools, a tool for inserting popular media players into your site, one for inserting Flash movies, DHTML pop-up menu creators, and a tool for animating text and backgrounds. With that in mind, let’s look at one of the add-ins that lets you add a media player to your site.

Embedding a Media Player in Your Site There are a number of different ways you can add or embed a media player into your website to let your visitors play streaming media (both audio and video) recordings, including • Internet radio • Presentations and tutorials • Commercials • Music or other performances • News feeds

USING MULTIMEDIA ADD-INS ■

311

Figure 13.16 Microsoft provides a download page that offers a number of FrontPage add-ins.

Most of these involve finding an appropriate player and then, using scripting, embedding that player within your site or a specific page on your site. One of the easiest methods you can use to do this—one that does not require you to generate any script—is to download and install the Windows Media Add-In for FrontPage, available at www.microsoft.akadns.net/frontpage/downloads/addin/searchdetail.asp?a=50. This adds the ability to insert a web-based version of Windows Media Player into a page on your site. Well, one disclaimer: Window Media Player is easy to add but it won’t work in all browsers. For example, it does not load for me when using the most recent version of Netscape. It should work on any browser that permits the operation of special controls like this. This means that it works for all recent versions of Internet Explorer, unless visitors have controls turned off under Advanced browser options. Complete the following steps to install and implement the Windows Media Add-In for FrontPage: 1. Run the downloaded wmpfpaddin.exe, which installs the add-in and makes it available to FrontPage. 2. Open the FrontPage website where you want to add the player. 3. Choose Insert ➔ Media Player, which opens the Media Player Add-In wizard. 4. Choose either Audio or Video. 5. Select the media file you want to play.

312 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

6. Choose the type of player controls you want to appear for your visitors (from no controls to full controls for volume, replay, and such). 7. Choose your playback options, including the number of times to play the media clip. 8. Click Finish. There! You’ve just inserted your own media player into your site.

Adding Video Without a Player You’ve learned how to add a media player so your site can offer streaming audio and video. But you can also simply add a recorded video file to a page on your site without adding a player. Rather than playing it on your website through the player mechanism, the browser downloads the video when chosen by a visitor or automatically loaded by your page and plays the video using the visitor’s installed video-playing software. Yet before you do this, consider the implications. You’re assuming that the visitor has what’s required to play the video. If he or she doesn’t have this, the options are to download a player (and you’ll almost always lose some percentage of your audience when you make them take extra steps) or fail to view what you thought was important enough to include on your site. Approach this wisely: If you know (perhaps because you’re developing for an in-house website where you know everyone has Windows Media Player installed) your audience has what’s required, this is the right course to take. But if you’re unsure (and you can make only statistical guesses with a global Internet audience), weigh the importance of the visitor being able to view the video. If it’s really important, provide a tool for playing it or offer them instructions on exactly what they need to do to view it. The latter choice will still lose some of your audience, but a tenacious percentage will try to follow along. This raises a point you may not be aware of: There will always be a percentage of visitors who flatly refuse to download any extra tools or software. They don’t want to spend the time or the disk space, they fear unwittingly contracting a virus, or they simply don’t want to unduly clutter their digital lives. The good news is that these people are balanced by another percentage of visitors who have yet to meet software they won’t download and install, even if the site with that download clearly states that it won’t work on their systems or might negatively impact them. Consider this as part of what makes web design and delivery such an interesting challenge.

USING MULTIMEDIA ADD-INS ■

313

If you’re ready to proceed with adding video without a player, follow these steps: 1. Open the page where you want to insert the video. 2. In Design view, choose Insert ➔ Picture ➔ Video.

3. Supply the location and filename of the video file you want to insert. Click OK. 4. Once the video file has been inserted, right-click it, choose Picture Properties, and then choose the Video tab. 5. On the Video tab (see Figure 13.17), set the properties you want for looping (if any; don’t loop more than once without good reason). Then choose whether to begin playing the file when opened or on mouseover. Click OK to save your changes. Use Preview to see the video played roughly as it will for your visitors under the video properties you’ve designated.

Figure 13.17 Use the Picture Properties Video tab to set the looping and other properties of a video file you’re inserting.

314 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Inserting Other Types of Dynamic Content I’ve already covered several of the elements you can add to your site to enhance or enliven your web pages. Now it’s time for you to learn about a few features offered by FrontPage that can bring external information resources to your visitors: maps and news headlines. In this section, I’ll show you how to add them easily through FrontPage, but I’ll also mention other options available to you if you don’t want to use the specific services offered. Let’s start off by adding a map to your web pages.

Adding a Map There are times when a map can be invaluable. On a website, a specific map can help visitors locate your physical storefront, office, or special event, narrow down the area where a piece of property is being offered for sale, or pinpoint a neighborhood reported on in a news story. FrontPage offers the option of including a map on your site, supplied by the map information available to Expedia, the web travel service. You can also check with other map services such as MapQuest (www.mapquest.com) to see how to include their maps on your site. Follow these steps to include a map on a web page using Expedia: 1. Open your website to the page where you want to include the map and position the mouse cursor where you want it inserted. 2. Choose Insert ➔ Web Component. The Insert Web Component window opens. 3. From the left pane, select Expedia Components. 4. From the right pane, select Static Map, as shown in Figure 13.18. (The Link To option provides a link to the desired map, rather than a picture of the map itself.) Click Finish. 5. Click Next and provide a location. Click Next. 6. Once you see the screen telling you that your map is configured, click Finish. When you return to your page from the Expedia map wizard, you’ll see the map in place. Actually, what you’re seeing is a special page drawn from the Expedia servers that provides the content from your page. Visitors can click links to get driving information from their location to the one specified in the map and to check popular airplane routes (and fares) to the destination. You’ve conquered maps, so let’s try inserting headline news next.

Adding MSNBC News Headlines to Your Site Considering all the changes going on daily around the world right now, many websites are including at least a short section in which top news headlines, sometimes along with a weather report, are offered. Different news and reporting organizations allow—and some even encourage—you to link to their news sites.

INSERTING OTHER TYPES OF DYNAMIC CONTENT ■

315

Whether to include news headlines can amount to something of a debate. After all, if someone is web browsing, they can easily open a separate browser in which they can load one of the constantly updating news sites. Also, the nature of your site may not lend itself easily to adding a news area (typically on the home page). For example, you may be developing an e-commerce site or even an art/performance site where people may come to escape the news of the day. However, for many types of sites, particularly corporate networks where employees may not be aware of what’s happening in the news unless it’s mentioned on the corporate intranet or Windows SharePoint Services site, the headlines can be a nice addition.

Figure 13.18 Set the properties for the inserted map.

FrontPage offers you the option of placing links to MSNBC (the cable news service jointly owned by Microsoft and General Electric, which owns the NBC network) news through a web component. When installed, top headlines update automatically on your page where they’re inserted. When a visitor clicks a headline, he or she isn’t transported out of your site; the news story behind the headline opens in a new browser window so a visitor can multitask. To add MSNBC headlines to your site, perform these steps: 1. Open your FrontPage website to the desired page and place your cursor where you want the headlines to be inserted in your page. 2. Choose Insert ➔ Web Component. The Insert Web Component window opens. 3. In the left pane, select MSNBC Components. 4. In the right-hand pane, choose an MSNBC Component, such as Business Headlines, as shown in Figure 13.19. Click Finish. The component you chose produces a small bulleted menu of headlines on your page; you’ll be able to see this while you’re still editing the web page in Design mode. To add additional components, repeat these steps and choose each additional component that you want to include. Wait! Feel as if you made a colossal mistake in adding the headlines? Just click the component on your page and press the Delete key. You can also cut and paste it to another page instead, if desired.

Figure 13.19 Adding an MSNBC news component

316 ■ C H A P T E R 1 3 : A D D I N G A N I M A T I O N A N D M U L T I M E D I A

Man Those Controls! I’ve offered you a good sampling here of the media-rich ways you can enhance your website. As you become more experienced, you’ll find that there is so much more you’re able to do, especially if you develop your scripting skills so that you can figure out how to plug almost anything into your site. You’ll also find that new options are in development all the time that will offer you a larger range of features in the future. In the next chapter, you’re moving out of HTML, DHTML, and add-ins and into controls that give you added functionality for your web pages such as performing surveys and beyond to Active Server Pages (ASP).

CHAPTER 14

Inserting ActiveX Controls and Other Advanced Objects KATE J. CHASE

In Chapter 13, “Adding Animations and Multimedia,” you learned how to create the simplest forms of dynamic content, including mouseover buttons, GIF animation, and so on. This chapter introduces web controls—ready-made scripts or applets that you attach to buttons and other elements on forms and web pages. These scripts perform tasks such as adding or running special media players to show movies or animations, or adding a chart or working spreadsheet from Microsoft Office. As you already know, HTML has certain limitations. HTML seamlessly renders your text and graphics appropriately. However, it doesn’t have the site-development power of commands and controls to build what you need the way that full-fledged programming and scripting languages allow developers to create software. Controls and scripting offer you a middle path between the simplicity of HTML and the exacting complexity of program development. They blend HTML with commands and controls that allow you to create interactive, dynamic content such as site surveys, user feedback options, and interfaces to databases, to name a few. This chapter will cover the following topics: ■

ActiveX controls

■

What ActiveX controls offer for site development and functionality

■

Concerns raised by the use of ActiveX controls

■

How to implement ActiveX controls

■

How to add Java applets to your site

■

Other types of controls and plug-ins

318 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Consider Your Audience Throughout this chapter, as you plan features to include in your website, consider who your site visitors will be. Can their browser see these features at all? Even if that’s not an issue, will visitors be willing to download files in order to use these features? The cross-browser compatibility issue is straightforward. Some of what FrontPage packs— especially add-ins that provide capability without requiring you to understand the underlying scripting—is designed specifically for the Microsoft Internet Explorer (IE) browser. Microsoft Office components, for example, won’t be visible in Netscape. While it shouldn’t surprise you that Microsoft would take this approach, it represents a challenge for a site developer who’s working with an audience that could be running a wide range of versions of IE, Netscape, Opera, and other browsers. When you’re working with a closed group such as a SharePoint Team site or a companyonly intranet-based website, you can assume—based on real knowledge—that everyone in your group uses Microsoft Internet Explorer. But that’s not true everywhere else, and public websites need to accommodate this fact. Some of the features discussed in this chapter, like ActiveX controls, require your visitors to agree to download a file or files as part of the process. Others, such as Flash animations, may annoy visitors who can’t find a control to stop the presentation. This problem will be familiar to you if you read Chapter 13’s discussion of Windows Media Player. While you can empower and energize a site through the use of such functions and features, be sure to weigh what a feature offers against what your audience is willing or able to accept and use.

ActiveX Controls If you’re an old-time Microsoft Office user, you’ve no doubt heard of OLE (Object Linking and Embedding) and OLE objects. For those of you newer to the process, OLE is a technology that enables you to create objects using one application and then link them to or embed them in another application. For example, you can create an object in Microsoft Excel or Access that you can plug into another Office application while retaining its functionality and formatting. ActiveX is an extension of OLE objects. It is extended specifically to work through the Internet—and intranets—across supporting web browsers. ActiveX controls are programmatic components that allow you to do something or perform some task. Such controls can be small with limited functionality, or large enough to empower entire web applications (programs written specifically to run in a browser). An ActiveX control is usually a graphical component. It could be something as innocuous as a check box, a list box, a command button, or a text box that allows users to add or edit

ACTIVEX CONTROLS ■

text. ActiveX controls are tied to the execution of a predetermined event. For example, if you click an ActiveX check box, a specific event occurs such as a new window opening or a new option becoming available. Such controls can be invaluable in creating custom interactive forms. But what makes these entities controls? They’re referred to as such because programmers refer to code that permits some user interaction (such as a button to turn an event on and off or a slider bar to adjust volume) as a control. When a visitor accesses a page on your site that contains an ActiveX control, that control is downloaded and executed immediately through the web browser, much like your Windows operating system runs programs. In this regard, ActiveX controls are very much like Java applets, the web-based programs that are executed through your browser. (Java applets will be discussed in the second half of this chapter.) In fact, the big difference between ActiveX and Java applets is that ActiveX is designed to work specifically with Microsoft operating systems and browsers, while a Java applet is created to run across all platforms, including Unix. If you’re concerned about cross-platform and cross-browser compatibility, ActiveX controls are less desirable than Java. Have you ever been to a site that uses an online calculator or an interactive spreadsheet? If so, it’s possible those sites are using ActiveX controls to provide these features. We’d need to devote an entire book—and perhaps another two or three—to teach you how to write ActiveX controls. They can be developed using a number of different programming languages, including Visual Basic and C++. Unless your needs are very specialized, however, you don’t need to write your own ActiveX controls. Instead, you can implement already created ActiveX controls, some of which are directly supported with the ActiveX controls included with the FrontPage software. Additional ActiveX controls—there are thousands that fulfill a host of different features and functions—can be downloaded from Microsoft and many other sites (such as the one at www.activexcontrol.com), installed via other software packages, and purchased directly from third-party developers. Office Web Components, such as those that allow you to produce a pivot table on a web page based on information contained in an Excel spreadsheet, are in fact a collection of ActiveX controls.

With Power Comes Security Concerns Remember that ActiveX, unlike a Java applet, allows you to access the power of a Microsoft operating system such as the Windows 2000 or Windows XP that you’re currently using. With that power and ability comes genuine concern about using ActiveX controls.

319

320 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

While an ActiveX control can be developed to perform incredibly useful functions for your site, a badly programmed one or (perish the thought) a purposely malicious one can be crafted that wreaks havoc for anyone who accesses your site and downloads and uses such controls. For example, a bad or malicious ActiveX control could • Delete vital files or a PC’s entire hard drive contents. • Format a drive. • Read and/or change the Windows Registry. • Read and report back on the contents of a visitor’s hard drive or Windows Registry. • Install and run a damaging program such as a computer worm. Mind you, it’s possible to see malicious activity occur with a Java applet or other browserbased application, but an ActiveX control’s relatively intimate access to the operating system can establish a uniquely vulnerable situation for unwitting web visitors. For this reason, Microsoft added in ActiveX the ability to register such controls in an effort to assure the public that the control being downloaded through the browser is one that the visitor can trust and use. However, they warn visitors as part of an ActiveX download screen (which users see when they access a page using an ActiveX control heretofore not present on their systems) to download only ActiveX controls that the users trust from a secure or known source. This verbiage is enough to send some users—particularly novice users or those who possess an almost pathological fear of computer viruses and damage—fleeing from the download. Whether you develop your own ActiveX controls or simply include those written by others in your website, exercise extreme care that your ActiveX controls have been tested, that they don’t display any harmful behavior, and that you feel comfortable in making them available. While criminal law is still in its infancy in terms of software liability, and I know of no recorded case in which a website designer was held criminally liable for including a harmful control, no one wants to be the first. It’s also, plainly speaking, bad for web business.

Adding an ActiveX Control to Your Page As noted before, FrontPage 2003 comes packed with a number of ActiveX controls, including ones that allow you to display information from other Office programs (Access databases, Excel workbooks, PowerPoint presentations, and Word documents) and other software that lets you load Windows Media Player, add a calendar, and more. Use the following instructions to become familiar with the types of controls included with FrontPage and to learn how to include such a control on your website. To add an ActiveX control to a web page, complete the following steps: 1. Choose Insert ➔ Web Components and select Advanced Controls.

ACTIVEX CONTROLS ■

2. In the right-hand pane, select ActiveX Control (Figure 14.1) and click Next. 3. Scan through the list under Choose a Control (Figure 14.2), select the one desired, and click Finish. Alternatively, you can click Customize and select additional controls (see Figure 14.3) that you want to add to the main list. Then return to the Choose a Control list and click to check the control you want to add. Unfortunately, you’re going to find that while some of the controls listed here—a component to open a page in Adobe Acrobat Reader format or Microsoft Web Browser to open a new browser window, for example—are self-explanatory, several components may not make much sense. There is no single resource that lists what all of these components do. However, you can explore Microsoft’s ActiveX technology and capabilities (including some discussion of forms objects) at www.microsoft.akadns.net/com/tech/activex.asp.

Using these steps, if you choose, for example, the Calendar Control from the ActiveX list, a calendar is placed on your open web page at the point of insertion. Now, right-click the calendar (or other control you choose), and point to ActiveX Control Properties. A window appears for managing the properties attached to this control, as shown in Figure 14.4. In this instance, you can modify how the dates are displayed, what fonts and colors are used, whether grids are presented, and the parameters used for the control itself. Different controls offer wildly different property options depending on what the control is supposed to do and how the user can manipulate its behavior. To some degree, you’re going to have to experiment to see what works best for the control you’ve chosen and for the purpose you define.

Figure 14.1

Figure 14.2

ActiveX is just one of several types of advanced controls that you can add from the Insert Web Component window, including Java applets and Flash.

A sampling of the elements you can add after choosing ActiveX controls. The options include Office Chart 11.0 and Office PivotTable 11.0, to name a few.

321

322 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Figure 14.3

Figure 14.4

Additional controls are listed in the ActiveX Control Properties window.

Each control’s property options vary depending on the job the control does.

ActiveX Properties: Adding a Message Let’s look at a specific change to properties that you may want to make whenever you use an ActiveX control: providing a default message to display in a visitor’s browser if their browser does not support ActiveX (as would be the case with non-Microsoft browsers) or if they’ve somehow disabled ActiveX on their systems. Follow these steps to provide such a message: 1. Right-click the ActiveX control on your web page and point to ActiveX Control Properties. 2. Select the Object Tag tab. 3. Click the box immediately to the right of HTML under Alternate Representation. Type the message as you want it to appear, as in the example in Figure 14.5. Click OK when done.

How ActiveX Controls Appear in Code Become familiar with how ActiveX controls look once they are inserted into your FrontPage web page so that you can recognize them in your Code view (and don’t mistake the code for other HTML). To view the code, take the following steps: 1. Open the page containing the ActiveX control. 2. Select Code view, which shows something like the display in Figure 14.6 for the Microsoft Calendar 11.0 control. The first line provides the class ID and name identifier for the control you’re using (each control has a different class ID):

ACTIVEX CONTROLS ■

323

Each line that follows that first line sets the specific parameters for the display or use of that control, as set up under the ActiveX Control Properties menu. For example, for the calendar control, the parameter named YEAR is set for the year 2003. It’s also set to display dates laid out from Sunday to Saturday, because the value under the parameter name of FirstDay is set to 7, or Sunday, the seventh day. Finally, the ActiveX control code ends with the line to close out the information established for the control:

This entire entity—from to —is called the object element. ActiveX controls aren’t the only types of objects that may be described with this element. You could place a Java applet or even a document in here as well, but it must be present for the ActiveX control.

Figure 14.5 Specify the message to be displayed for users who can’t use the ActiveX control.

HTML users should be aware that in the draft recommendation for XHTML 2.0, the element will be ubiquitous, replacing even the element. This simplifies markup and scripting and makes a lot of sense, because even image components are actually objects.

However, note that this example shows a paragraph mark just before (

) and just after (

) the control code. These tags simply set the object off into a paragraph or fixed area away from other elements on the page, if any. Figure 14.6 The tag starts the control code.

324 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Removing an ActiveX Control Do you need to remove an ActiveX control that you’ve positioned on a page in your site? If so, perform these steps: 1. With FrontPage open to the page containing the ActiveX control, click Design mode. 2. On the page, select the control you want to remove, and press the Delete key. Just to be clear, removing an ActiveX control from your web page does not remove the ActiveX control from your ActiveX control list or your PC; the control is still available for you to use again later, if you choose.

Hands On: Using ActiveX Controls/Office Web Components to Add a Web-Based Spreadsheet You now know that Office Web Components are ActiveX controls, and you’ve seen them listed under available ActiveX options. While I’ll cover Office Web Components in more detail in Chapter 19, “Adding Automatic Web Components,” now seems like a good time to use one of your ActiveX controls to embed an Office component into your site. In this case, we’ll use a spreadsheet. Before you do, however, you need to appreciate the fact that Office Web Components are going to work only for visitors using Microsoft Internet Explorer (best from version 5 on). However, you’re more apt to implement an Office component on a site with a select audience, such as on a collaborative website where you know or can identify all the parties involved and make sure they have the required software (Internet Explorer and Office Web Components) installed. There are three principal ways you can present an Excel worksheet (what Excel calls a spreadsheet) in a web page: • You can publish the page as a web page and include it in your website. • You can copy information from an Excel worksheet into your web page. • You can use the ActiveX control labeled Microsoft Office Spreadsheet 11.0. The difference between the first two options and the third option is that the first two are based on an existing Excel worksheet that serves as your source for either a whole or part of a web page. The third option actually places a blank spreadsheet into your web page and creates a dynamic environment in which visitors (with Office Web Components installed on their systems and using Microsoft Internet Explorer) can actually enter Excel data and use a modified set of Excel commands and features. OK, some of you must be thinking, “Wow, why would I want to ruin a website by adding a spreadsheet to it?” But both small and large businesses need that capability. You can have people remote from your office (or your client’s, if you’re designing for someone else) actually enter data into an Excel worksheet on the Web—a medium so universally accessible— and then export that data into Excel itself.

HANDS ON: USING ACTIVEX CONTROLS/OFFICE WEB COMPONENTS TO ADD A WEB-BASED SPREADSHEET ■

Think about it. A mobile sales force could log in to a secure website, enter a page containing a worksheet, and directly enter data that someone in the main office can export into Excel for nearly instant updates. Or they can add a worksheet that is backed up by a database. The mobile team members can enter product information into the worksheet, check that information against the database for the latest pricing and availability, and receive those results in the spreadsheet for the salesperson to relate to his or her customer. It’s enough to make a spreadsheet-phobic take a liking to cell references and formulas. To place an Excel worksheet in your web page, follow these steps: 1. Create a new page for the worksheet or open an existing page where you want the sheet inserted. 2. Choose Insert ➔ Web Component. 3. Choose Advanced Controls and then click ActiveX Control from the right-hand pane. Click Next. 4. This opens the ActiveX Control window. Select Microsoft Office Spreadsheet 11.0 (see Figure 14.7) and click Finish. You’ll see that the worksheet has been added to your page. If you check it in Preview mode or through File ➔ Preview in Browser (Figure 14.8), you’ll see that you can click a cell and enter data and labels, create formulas, or perform other Excel tasks. You can also click the toolbar and use features such as Cut, Paste, and Export to Excel. Go back into Design view and right-click the worksheet. Point to Active X Control Properties. A window appears that contains several tabs (see Figure 14.9). Each tab lets you control some aspect of the control or worksheet. These tabs include Format Use the Format tab to adjust formatting for the worksheet, including alignment, font, and border. Formula The Formula table allows you to create and apply formulas for particular cells. Sheet Use the Sheet tab to change sheet display information. Workbook In the Workbook tab, you can choose automatic vs. manual calculation; choose whether to display various scrollbars; and add, remove, or rearrange sheets within a workbook. Import Use the Import tab to set the data type and URL for importing data into Excel from another source. Protection In the Protection tab, set the protection for spreadsheet cells and whether to allow users with access to this spreadsheet to add or delete columns and rows.

Figure 14.7 Be sure to select the right control for inserting an Excel spreadsheet into your web page.

325

326 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Figure 14.8 A micro web version of the Excel worksheet

Advanced The Advanced tab allows you to choose whether to use AutoFit on the worksheet and to specify what behaviors (where the cursor goes after you press Enter, for example) occur in the worksheet. Data Source Use the Data Source tab to set sheet data source connections and to provide command text or SQL code. Object Tag Use the Object Tag tab for information on the object tag that’s used to embed this ActiveX control on your page. Try setting up your own spreadsheet on a web page. It’s so easy to do that it almost begs you to find a way to utilize this feature productively.

Other Advanced Controls While not all of the subjects discussed in this section are controls in the strict sense of the term, you’re going to learn about some of the other options available to you in FrontPage from the Advanced Controls menu under Insert Web Components. These include • Java applets • Plug-ins • Flash Let’s explain how you insert, remove, and modify the properties for these controls.

OTHER ADVANCED CONTROLS ■

327

Adding Java Applets A Java applet is a program written in the Java programming language. When included in a web page, the applet is downloaded through a browser and executed through the visitor’s browser using the browser’s Java Virtual Machine. If the visitor’s browser does not currently support or offer Java capability, the visitor is prompted to download the Java Virtual Machine (for Microsoft Internet Explorer browsers) from Microsoft so they can run the Java applet and view the page as it was meant to be viewed. FrontPage does not include a utility for writing or building a Java applet, which must be coded and then compiled using a Java compiler before it’s ready for inclusion on a website. However, just as with ActiveX controls, FrontPage makes it possible for you to add an already completed and compiled Java applet to a page through the Web Components window. Before you connect your Java applet to FrontPage, you need to be sure that FrontPage is configured to support the inclusion of Java applets. To do this, take the following steps: 1. Choose Tools ➔ Page Options. 2. In the Page Options window, select the Authoring tab. 3. Be sure the Java Applets check box in the Browsers area is checked (see Figure 14.10). If it’s not, click to check it. Click OK. Conversely, you can uncheck the Java Applets check box to ensure that Java applets are not used on a website. This makes Java applets unavailable under the Insert Web Components ➔ Advanced Controls list.

Once you have enabled support in FrontPage, you can add a Java applet to your web page using these steps: 1. Open to the page where you want to insert the Java applet and position the cursor where you want the code inserted. 2. Choose Insert ➔ Web Components. 3. In the Web Components window, select Advanced Controls in the left-hand pane, and then click Java Applet in the right-hand pane. Click Finish. 4. The Java Applet Properties window opens (see Figure 14.11), where you specify the following. • Applet Source—Type the name of your Java applet file here, such as runslide.class. • Applet Base URL—Type the path to the folder in which the Java applet is stored. This step is vital if you’re storing the Java .class file in a different folder from your FrontPage website.

Figure 14.9 Control properties for the spreadsheet

328 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

• Message For Browsers Without Java Support—Enter the message you want to display to web visitors when their browser or browser settings do not permit the running of a Java applet. • Applet Parameter—Click Add to open a window that allows you to set specific parameters for your Java applet and then click OK. • Layout—Set horizontal and vertical spacing as well as alignment, as desired. • Size—Set the width and height of the desired area in which you want the applet to run. 5. Click OK to finish and insert the Java applet. As you’re adding your Java applet, keep in mind (especially for those of you using someone else’s compiled Java project) that actual Java applet files end in .class, while Java source code files (not what you add to your page) end with the .java extension. When your Java applet is inserted and you look at your page in Code view, you’ll see that a tag such as the following is now present:

This looks similar to what you saw already with the tag for the ActiveX control. The information in the tag tells the browser how to horizontally space the applet when it runs on the browser page and provides details about its width and height. The tag closes out with .

Figure 14.10

Figure 14.11

Be sure to enable Java applet support in FrontPage before connecting your applet to a web page.

All key source and display information is set in the Java Applet Properties window.

OTHER ADVANCED CONTROLS ■

Now, if your Java applet works as it should, it should be available to your web visitors once you publish the page. FrontPage includes the Java applet element and tags as an aid to you, but here’s something worth noting: FrontPage frequently inserts applets and other elements (images, ActiveX controls, and Flash animations) into your page’s code based on older HTML standards. Today, such elements are typically coded as objects and then specified. This presents a bit of a conundrum. The way FrontPage writes the code will be compatible with older browser versions that don’t recognize such controls, applets, and images as objects. But if you learn to change your code to use objects, you may confuse those older browsers. Later, in Chapter 17, “Working Directly with Markup and Scripts,” you’ll see how these juggling acts can cause problems when validating your pages. Did I mention that web design was a challenge?

Adding Plug-ins Plug-ins are a bit like the add-ins discussed in Chapter 11, “Implementing Your Navigation Scheme,” in that they add functionality to a web page not normally available in FrontPage (or in some browsers). Plug-ins and add-ins are also alike in that you can download shareware plug-ins from the Internet. However, unlike FrontPage add-ins, which can provide a range of services, plug-ins are almost exclusively software modules that allow visitors to play some type of multimedia such as movies and complex audio files. Of course, there are exceptions to the multimedia focus: You can find shopping cart plug-ins, special Java plug-ins, and many other plug-in types. You’ll also find some plug-ins that provide utilities—website optimization or e-mail autoresponse, for example—that aren’t visible in any way to visitors. Often but not always, a plug-in is designed to provide a software bridge between a regular computer application and a web browser so that you can run that application in the browser. Such plug-ins may appear on the web page itself, allowing visitors to control the experience through screen-based controls, or they may be relatively invisible to the visitor who just gets the sound and/or video automatically delivered on a page without seeing the “device” playing the media.

Inserting Your Plug-in First, have your plug-in available to you either on your local drive or through the network. Then, to install your plug-in to your site, complete these steps: 1. Open the page where you want to insert the plug-in. If there is existing content on that page, position the cursor where you want the plug-in to appear (if it’s going to be visible). 2. Choose Insert ➔ Web Component.

329

330 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

3. In the Insert Web Component window, select Advanced Controls and then, from the right-hand pane, choose Plug-in. Click Next. 4. Click Browse next to the Data Source box and locate the plug-in you want to insert. 5. Click the box under Message For Browsers Without Plug-In Support and type the custom message you want to appear. The filled-in areas should look something like the window in Figure 14.12. 6. In the Size area, adjust the width and height as desired. Put a check mark in the Hide Plug-in box if you want to hide the plug-in tool from your site’s visitors. 7. Under Layout, adjust any options desired and then click OK to finish. You should now see a placeholder inserted in your page. However, the plug-in may not play in Preview mode unless you have the plug-in already installed to your system (not just inserted into your web page).

Changing the Plug-in Properties Although you normally set the source location, error message, and size and layout properties when you install the plug-in, you can also edit these properties later. To do this, follow these steps: 1. With your page containing the plug-in open, right-click the plug-in and point to Plug-in Properties. 2. Make your adjustments and click OK.

Removing a Plug-in Thankfully, you aren’t joined at the hip to a plug-in once you install it. Removing one takes less than a minute with the following steps: 1. With your page containing the plug-in open, choose Design mode. 2. Click the plug-in once and then press the Delete key. If the page is no longer necessary—say, because the plug-in was the only thing on it— remember to remove the page too.

Adding Flash Flash refers to the SWF format, which can be generated by numerous packages but most popularly by its originators, Macromedia. Macromedia Flash is a widely used package and platform for developing web animations, presentations, movies, and other forms of graphical media. These are vector-based graphics put together in sequential format. While Flash technology extends beyond the Web (such creations can be played offline too, using a Flash player), it’s the Web where it’s most often appreciated.

OTHER ADVANCED CONTROLS ■

331

Part of the beauty with Flash is that it works across platforms, so Flash content can be as easily viewed by users with Apple Macintosh systems. Also, Flash isn’t exclusively like the container controls and plug-ins described so far in this chapter. Flash animations are often used as splashy opening screens for websites and for banner advertising, where they stand out from normal website content. While splashy promotions are what typically come to mind, several sites do very effective presentations using Flash for instructional purposes. For example, they are frequently used for short tutorials and for product and how-to demonstrations. Yet there are several drawbacks to their use. They don’t always run well for users with slower Internet connections. Also, if you don’t offer a mechanism to skip the Flash intro, as many websites do, you’re going to leave lots of unhappy people cooling their heels waiting for the animation to end so they can reach your home page—not everyone is a Flash fan. Flash animations don’t always run well when visitors have other activities going on through their Internet connection or on their desktop (a likely scenario); the animation may run choppily or leave a person waiting endlessly for it to start. As for accessibility, it’s very hard to devise a suitable non-graphical alternative for a medium that’s meant to be so visual. Not all assistive technology readers will handle Flash animations, let alone handle them gracefully. Finally, not every site has a purpose, service, or nature that lends itself to the use of Flash animation. I’m reminded of several people who joked years ago about a West Coast–based funeral home that supposedly (I never saw it) did this incredible Flash movie to demonstrate how comfortable their high-end caskets were. As a designer, it helps to have an imaginative mindset to see outside the box. However, if you find yourself straining to find a reason to create an animation for your site, the chances are high that you don’t need one in the first place. When working with Flash, you’re actually doing two different but related things: You’re supplying a media file and then linking it to a plug-in that can play that media file, as you’ll see in a moment.

Inserting Flash Media Make certain your Flash media file is available to you on your local drive or network. Then complete these steps to add your Flash file to your page: 1. Create or open the page where you want the Flash file to be inserted. 2. Choose Insert ➔ Web Component. 3. In the Insert Web Component window, select Advanced Controls and from the right-hand pane, choose Flash. Click Finish. 4. Next, you are prompted to select the Flash file you want to play through the browser. Choose the file and click Insert.

Figure 14.12 Specify information about your plug-in in the Plug-In Properties window.

332 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Figure 14.13 Inserted placeholder for the Flash media file

Your Shockwave Flash Object file (the file type for Flash media) is then inserted into your web page, as shown in Figure 14.13. You can view the Flash media by choosing Preview mode. However, this works only if you’ve previously downloaded and installed a Flash player on your system. Likewise, users visiting your site once your Flash media is published will be able to see the Flash media only if their browser has the Flash media plug-in installed.

Modify Flash Media Properties Just as with most other types of controls and plug-ins, you can modify the properties (including the width and height of the Flash media display). You can also change information about the file itself (the exact file to be played, for example). To do this, take the following steps: 1. Right-click the Flash media placeholder and point to Flash Properties. 2. In the Flash Properties window, choose the Appearance tab (Figure 14.14) and make changes as desired. 3. Choose the General tab (see Figure 14.15) and check or uncheck options, specify a different Flash media file, and so on. Click OK to finish.

OTHER ADVANCED CONTROLS ■

Finally, if you look at the page where you inserted the Flash media in Code view, you’ll see that your Flash media has been inserted in an tag, much like the ActiveX control was earlier. One difference you may notice, however, is a line that may read something like this, along with the tag:

➥

The Embed Src code gives the location and name of the Flash media file being used for this process. The pluginspage attribute points to Macromedia’s Shockwave download page to direct folks without the Flash plug-in to obtain it. Here’s another situation where you have FrontPage inserting code to aid you, but using code that is meant more to be backward compatible with older browsers than to validate according to current HTML. In this case, the EMBED element has been replaced by the OBJ element in HTML standards but is still used in FrontPage 2003.

Removing a Flash Media Insertion To remove your Flash media from your web page, simply follow these quick steps: 1. Open the page where the media is inserted and choose Design mode. 2. Click the file once and press Delete. Your media file (and plug-in support for it) is now gone from your page. However, the file is still available in its source location (drive or network) from which you inserted it.

Figure 14.14

Figure 14.15

Set the display parameters for your Flash media in the Appearance tab.

Set looping and auto-play parameters in the General tab.

333

334 ■ C H A P T E R 1 4 : I N S E R T I N G A C T I V E X C O N T R O L S A N D O T H E R A D V A N C E D O B J E C T S

Testing and Troubleshooting Controls and Objects When you encounter a problem using an ActiveX control, Java applet, plug-in, or Flash module, the first thing you should do is examine how you’d added it and what modifications you’ve made, if any, since the control worked. If you can’t locate the source of the problem and fix it quickly, you may want to temporarily remove either the object or the entire page until you can fix it. There is no substitute for testing. This becomes critically important once you introduce something like controls, applets, and scripting to your site. In the case of controls, you know that a badly programmed control can cause damage when it’s downloaded to a visitor’s system. Whether you create the control or other object, or you obtain it from another party, be sure to do both of the following: • Verify that it works properly by testing it locally as well as over the Internet/intranet when it’s published. • Make sure you’re aware whether running the control or applet causes any undue problems. Do yourself a favor and don’t test the object once on one system with one browser and one browser version. Use that focus group discussed earlier in this book or recruit friends and colleagues to try the controls on their systems. Don’t just ask them to try to access the page; ask them to give you feedback on anything unusual they may experience during the browsing session such as flickering video or the page drawing itself strangely. Most of you have had the experience of having your browsers—or entire systems—lock up when trying to open a web page. This can happen at any time and can be caused by a myriad of conditions. Some of those conditions might include exhausting your PC’s virtual memory, your video adapter operating on overload, or some other process that has grabbed the CPU’s exclusive attention. What you need to watch are repeated instances of a problem accessing, loading, or continuing to use your browser after trying to use a web page containing any advanced control, plug-in, or applet. Once you have more than one or two people reporting problems back to you, it’s time to consider taking the object offline temporarily until you discover the source of the problem. Unless you wrote the control or applet yourself, be sure to consult with whoever wrote the control to see what needs to be done to get the feature back online. You can help them research the problem by giving them as many details as possible about the difficulties encountered by you, your test group, or your visitors. In extreme cases, a problem control or applet can lock up most if not all browsers that download and run it. In most cases, however, users may never have a problem, while other users may experience consistent lockups or a failure to load the control or applet successfully. In the worst cases, everyone accessing a particular page in the site may be forced to

TAKING UP A

(DATA)

reboot their systems. This reinforces the importance of testing a control or applet across a number of different PC configurations by having a number of people try to open the page and report back the results. The more testing you do, the less likely you are to broadcast a problem to others.

Taking Up a (Data) Collection Many websites don’t just impart information, they collect it too. This is most frequently done through the use of forms. They may not be the most exciting aspect of setting up a web page, but the demand for good web forms never ends, particularly among many types of professional and commercial websites. With this in mind, let’s explore building successful web forms in the next chapter before moving along to web application development and implementation in Chapter 16, “Overview of Database-Backed Sites.”

COLLECTION ■

335

CHAPTER 15

Building Forms KATE J. CHASE

Much of your focus thus far has been on how to get your product or service onto your site and out to your audience. But what are you supposed to do when you need to collect rather than disseminate information? From gathering subscriber e-mail and mailing addresses to getting answers to demographical questions such as “What’s your age range?” or “Which of these products or services have you used recently?” or feedback like “How would you rate this article?” the need for a data collection mechanism on a website is universal. The typical way to handle data collection is through the use of web forms. This chapter explains how to conceive and build effective web forms and includes the following topics: ■

How forms work

■

Steps to create them

■

Enhancing forms through the use of hidden tags

■

Building a jump menu

■

Handling a form at the back end

338 ■ C H A P T E R 1 5 : B U I L D I N G F O R M S

Data Collection vs. Navigation Online forms are most often used for data collection, and most of this chapter is about using them for that purpose. But in addition to information gathering, form controls can serve a second purpose: navigation. That navigation can be site-wide or for a specific collection of articles or other pages within a site. For example, you can create a drop-down list that allows a visitor to check an option for data collection such as “Are you: a) 18–30, b) 31–49, c) 50–64, d) 65 or older.” You can also create a drop-down list that lets the visitor navigate to another page on your site such as Home, Frequently Asked Questions, or Contact Us. The latter use is an example of what is referred to as a jump menu, something you’re going to create later in this chapter. How you employ form controls differs whether you’re using them for data collection or navigation. A drop-down list box as a navigation menu works well when you have 10 or fewer options available from it. But once that list reaches 25, 50, or more items, you’re taxing the patience of your visitors.

How Forms Work To see how forms work, let’s go through an example. Suppose you’re revamping your site, and you create a form that allows you to solicit feedback from your visitors about how they like the redesign. The form might look like the web page in Figure 15.1. Looking at that form in Code view (see Figure 15.2), notice that data is gathered from designated input variables—in