introduction to microsoft frontpage

Lutz F. Krebs

Introduction to Microsoft FrontPage

© 2001 – 2002 Universiteit Maastricht. All rights reserved. No part of this publication may be reproduced, in any form or by any means, without prior, written permission from the publisher.

PICTURE CREDITS Section cover background: size-isnt-everything.co.uk

TYPEFACES Headlines are set in TheSansCorrespondence © TheTypes b.v., Lucas de Groot. Input strings are set in Arial Narrow © The Monotype Corporation plc. Image components are labeled in Arial © The Monotype Corporation plc. Body text and side notes are set in Times New Roman © The Monotype Corporation plc. Keys are set in RatCaps 3D PC and RatKeys 3D PC © Quadrat Communications, David Vereschagin.

TRADEMARKS Product names, logos, designs, titles, words or phrases mentioned in this publication may be trademarks, service marks, or trade names of companies or other entities and may be registered in certain jurisdictions or internationally.

DISCLAIMER WE HAVE USED EXCEPTIONAL CARE IN PREPARING THIS BOOK. NONETHELESS, PUBLISHER AND AUTHOR MAKE NO CLAIMS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE BOOK AND SPECIFICALLY DISCLAIM ANY WARRANTIES REGARDING THE USEFULNESS FOR A PARTICULAR PURPOSE. THERE ARE NO WARRANTIES EXCEPT THOSE GRANTED HERE. THE ADVICE GIVEN IN THIS PUBLICATION IS NOT GUARANTEED TO PRODUCE ANY PARTICULAR RESULTS AND MAY NOT BE SUITABLE FOR EVERY INDIVIDUAL OR UNDER PARTICULAR CIRCUMSTANCES. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL OR OTHER DAMAGES.

ACKNOWLEDGEMENTS I would like to thank the following for their continued support: Dirk Tempelaar. The computer whiz kids at ACO and ICTS. Andreas van Rienen and Carsten Sturmann. Christiane Arndt.

FEEDBACK We are happy to hear from you. You can contact the author directly at [email protected]. Version 1.1 – 28/07/02 Maastricht University P.O. Box 616 6200 MD Maastricht Netherlands

mailto:[email protected]

CCOONNTTEENNTTSS

A. GENERAL TOPICS ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

1. Introduction 3

2. Getting Acquainted 7

B. CREATING A WEBSITE ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

3. Setting Up a Website 19

4. Formatting Text & Pages 25

5. Publishing Your Site 39

APPENDIX ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

A. Design & Development Resources on the Web 45

B. Free Web-Hosting 47

Imag

e: si

ze-is

nt-e

very

thin

g.co

.uk

GGEENNEERRAALL TTOOPPIICCSS

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

11.. IINNTTRROODDUUCCTTIIOONN

WYSIWYG What You See Is What You Get.

Microsoft FrontPage 2000 is one of the leading applications for creating websites. Its functions serve first-time home users as well as corporations of any size, and it is by now one of the most popular WYSIWYG editors for web pages. Its main advantage: it allows you to easily create navigation tools for your website and keeps track of all the files and links on your site.

An overview This book is meant as an introduction to the most important issues in designing web pages and sites. In the present chapter, we talk about the assumptions underlying this book and what you can do if you get stuck. In the second chapter, we get acquainted with Microsoft FrontPage. The following three chapters discuss the three steps of creating a website: creating the structure, entering and formatting content, and publishing the site. This book focuses on visually designing web pages instead of writing HTML code. If you are interesting in learning about HTML, there are a number of good resources listed in appendix A. Finally, appendix B lists a number of providers of free web space.

SMR (Studenten Micro Ruimte) Synonym for computer lab at our university.

What you need to get started Strictly speaking, you do not need anything. Microsoft FrontPage is installed in our faculty’s computer labs (or SMRs as they are called at our university). There are two SMRs at the Faculty of Economics and Business Studies, and both are located in the main building at Tongersestraat 53. To use a PC there, you need your student ID number and a password that has been mailed to you together with your student ID card.

T H E C O M P U T E R R O O M S

SMR 1 SMR 2 LOCATION Rooms 3.047 – 3.061 Rooms 0.012 – 0.014 NUMBER OF PCS 120 60 OPENING HOURS Mon – Thu 9 a.m. – 10 p.m. 9 a.m. – 5 p.m. Fridays 9 a.m. – 5 p.m. 9 a.m. – 5 p.m. Weekends closed closed MORE INFO www.fdewb.unimaas.nl/smr/

In general, the SMRs should only be used for study related activities. If

you want to work on your private website or perform other non-educational activities, you are asked to restrict yourself to the early

http://www.fdewb.unimaas.nl/smr/

4 Introduction to Microsoft FrontPage ●●●●●●●●●●●●

morning (9 – 10 a.m.) or the evening (after 5 p.m.). Even with these rules in place, the SMRs tend to get crowded often.

When the SMRs are closed, you can walk over to the library, which

offers a small computer room of its own. Be aware that other faculties also use this computer room – you may have to wait (possibly a long time) for a PC to become available. If you know in advance that you need a PC for a study related reason, you can make a reservation for up to two hours per day.

T H E L I B R A R Y

ADDRESS Bonnefantenstraat 2 PHONE (043) 388 34 27 WEBSITE www.ub.unimaas.nl OPENING HOURS Mon – Thu 8.30 a.m. – 10 p.m. Fridays 8.30 a.m. – 9 p.m. Saturdays 10 a.m. – 5 p.m. Sundays 12 a.m. – 5 p.m.

Our computer labs can get very crowded during peak times, and it may

be a good idea to buy a used or new PC to work at home. In that case, you will also need to buy a copy of Microsoft FrontPage, as it is a commercial program. You can purchase FrontPage for 25 €1 from the ICT Service Center.

T H E I C T S E R V I C E C E N T E R

ADDRESS Looiersgracht 14, Room 0.011 PHONE (043) 388 35 64 EMAIL [email protected] WEBSITE www.icts.unimaas.nl OFFICE HOURS Phone/Email Walk in

Weekdays 8 a.m. – 10 p.m. 8.30 a.m. – 5 p.m. Saturdays 10 a.m. – 4 p.m. closed

On the use of this book In this book, we assume that you have access to a PC with the appropriate software. More importantly, we also assume that you have a working knowledge of the Internet, i.e. that you know what websites, links and related concepts are. If you feel that your knowledge might be lacking in these areas, we encourage you to visit www.learnthenet.com. If you want to learn what goes on behind the scenes when you surf the

1 These prices are sharply reduced in comparison to normal retail prices, because Maastricht University (in cooperation with other Dutch universities) buys large quantities of educational licenses.

http://www.ub.unimaas.nl

mailto:[email protected]

http://www.icts.unimaas.nl

http://www.learnthenet.com

General Topics: Introduction 5 ●●●●●●●●●●●●

web, watch the 12 minute-movie at www.warriorsofthe.net. Finally, as FrontPage is in some ways similar to Word, we assume that you have some experience in using Word.

This manual is not meant to be all-encompassing. It is meant as an

introduction and as a guide. We will focus on getting you started, and in doing so will ignore a number of useful advanced features.2 You are encouraged to go beyond the contents of this book and explore the tools that you are working with. If you feel that you need further guidance, there are a number of excellent printed resources. Personally, we find the jargon-free language and useful hints of the ‘For Dummies’ series to be particularly appealing, but there are certainly many other useful and well-written computer books out there. There is also a lot of helpful information on the web. We have assembled a number of useful websites aimed at both beginning and advanced web designers in the appendix.

This book focuses on showing you how to accomplish certain tasks in

Microsoft FrontPage. Be aware that there are usually several ways to get things done. We will endeavor to show you as many of them as possible. In doing so, we will use the following conventions:

A toolbar.

• Toolbar buttons that initiate a certain function are usually displayed in the margin together with a brief description of what the button does.

• If you need to press a key on the keyboard, we will indicate this

by printing the key, e.g. / implies that you need to push the ‘enter’ key. Frequently, key combinations are used to accomplish tasks. An example of such a key combination would be c + P, which means that you should press and hold the ‘ctrl’ key while pressing ‘p’.

• When you need to enter more than a few characters, we will not

print the individual keys, because that would be space consuming and hard to read. Instead, we will indicate the text using a special font, as demonstrated here: ‘enter this’.

A menu bar.

• Some of the options cannot be initiated by using a keyboard shortcut or an on-screen button. Such options can usually be found in the menu bar. If we want you to select an option from the menu bar, we will list the names of the options in chronological order. E.g. ‘File’ � ‘Print’ would imply that you click on ‘File’ in the menu bar, and then select ‘Print’ from the menu that appears. Instead of clicking on the items, you can also use your keyboard: press a and the underlined letter, in our example a + F. Once the menu is open, simply pressing the underlined letter is sufficient. E.g. after pressing a + F,

2 In particular, any discussion of HTML, the language in which web pages are written, has been avoided for the sake of brevity. However, you will find several good introductory sources on HTML listed in appendix A. Especially GlassDog’s Design-O-Rama guide to HTML is a good resource for beginners.

http://www.warriorsofthe.net


pressing P will be enough to take you to the print menu.

• Finally, we will use a similar notation when you need to select options from the Start menu, e.g. ‘Start’ � ‘Programs’ � ‘Microsoft Word’ will launch Word. Once again, you can use keyboard shortcuts: press the Windows key (ÿ), followed by the underlined letters.

The Start menu.

If you are stuck… If you cannot find the answer here, there are still a number of ways to get help.

If you are stuck using a certain program, the first thing you can try is

pressing the 1 key. Pressing 1 is like asking the computer for help. In most cases, the appropriate program will then give you additional information on whatever you are currently doing. The intricacies of the help system are discussed in more detail in the second chapter.

There are, however, cases when your computer does not understand your

problem (because the persons that built the software did not foresee it) or when your PC is not able to help you (because it is malfunctioning). In such cases, you may want to check out a helpful website, Tech24 SelfHelp at www.tech24inc.com/help.html. Tech 24 offers self-help links that are sorted by category (e.g. ‘Internet’, ‘Email’, ‘Outlook’). They also offer live support from certified technicians.

You can also try contacting the producer directly. If you have trouble

with FrontPage, you might want to visit www.microsoft.com to see if they know the answer to your question. However, some producers do not offer a lot of support or charge money for it.

Another option is to call or email the computer whiz kids at the ICT

service center of our university. They offer support for the software used throughout the university, which includes among others Windows, Microsoft Office, Internet Explorer, and the McAfee virus scanner. (See the info box on p. 4 for their contact information.)

Finally, befriending a geek may be the best solution. Geeks are by nature

friendly, helpful and extremely well versed in all things computer. If you can count one of them as your friend, he (or in rare cases she) probably won’t mind dropping by and helping you out when you are having trouble with your PC. An invitation to dinner or to the movies in return won’t hurt either.

We hope you enjoy designing web pages and wish you success in

working with Microsoft FrontPage! ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

http://www.tech24inc.com/help.html

http://www.microsoft.com

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

C O M I N G U P� 22.. GGEETTTTIINNGG AACCQQUUAAIINNTTEEDD This chapter introduces you to the different tools and views that you will use when working with FrontPage.

In this chapter we give you the tour of all the different elements that you will work with in FrontPage. But first, let’s start FrontPage. You can start Microsoft FrontPage by clicking on its icon on the desktop, or alternatively by selecting it from the ‘Programs’ category of the Start menu. You will then see the main screen:

‘Start’ � ‘Programs’ � ‘Microsoft FrontPage’

The FrontPage Screen

As all Microsoft Office programs, FrontPage features the usual

assortment of a menu bar, several toolbars and a status bar. Beyond that, there are three prominent elements: the view selector, the folder list and the editing area. We will now discuss these elements one by one.

The menu bar

The menu bar offers you access to all services of the application you are

using. You can call up any item on the menu bar either by clicking on it


directly or by pressing and holding the a key while pressing the underlined letter of the entry. (E.g. to open the ‘File’ menu, press a + F.)

Click the ‘expand menu’ button

to see the entire range of options.

Clicking on any of the headings will bring up the appropriate menu, which contains a broad range of functions. Be aware that FrontPage does not display all of the available functions right away. Many computer users experienced the vast range of available options as confusing. This is why all Microsoft Office applications initially display only the most frequently used items. Only if you do not do anything for a moment after opening a menu will they display the remaining options. To speed up the process, you can also press the ‘expand menu’ button at the bottom of the menu.

If the option you are

looking for is not in the list, you can wait a few

moments for the menu to expand to its full length…

… or you can click on the ‘expand menu’ button to

enlarge it to full size immediately.

All available options are grouped into one of the menus: • The ‘File’ menu offers options to create and open web pages or

entire websites, to save, preview and print your work and to publish it on the Internet.

• The ‘Edit’ menu allows you easy access to the most fundamental

editing options, such as cutting, copying and pasting, undoing and redoing changes, as well as finding and replacing text.

• The ‘View’ menu allows you to switch between the different

views of your website and allows you to display or hide toolbars. • The ‘Insert’ menu lives up to its name: it enables you to insert all

sorts of objects into your web pages, such as symbols, hyperlinks, navigation tools and interactive components.

• Under the ‘Format’ heading, you find all of the formatting

options for text, paragraphs, pages, pictures and so forth. • The ‘Tools’ menu contains an assortment of helpful functions,

such as the spell checker. • The ‘Table’ menu allows you to easily create and manipulate

tables, one of the most important design elements of web pages.

The World Wide Web: Security on the Internet 9 ●●●●●●●●●●●●

• The ‘Frames’ menu is designed to help you work with frames, a technology which allows you to break a web page into different subpages that can be updated separately from each other.3

• The ‘Window’ menu comes in handy when you are working on

several documents simultaneously, as it allows you to switch between different pages.

• Finally, the ‘Help’ menu is your first stop whenever you are

stuck.

The toolbars While the menu bar is highly useful, it would be frustrating if you had to use it all the time. Imagine you want to cut a line of text and place it somewhere else – it would take quite long if you had to select ‘Edit’, ‘Cut’ and then ‘Edit’, ‘Paste’ for every simple adjustment. For that reason, there are a number of toolbars that contain shortcuts to the most frequently used functions.

Generally, FrontPage will display only the two most important toolbars

at startup: the standard toolbar and the formatting toolbar.

The standard toolbar gives access to the most common functions:

creating, opening, saving, and printing documents, cutting, copying and pasting text, undoing and redoing changes, etc.

The formatting toolbar simplifies access to the most common formatting

options. Using this toolbar, you can change e.g. the typeface, size, alignment, and indentation of your text.

The function of the most important buttons will be discussed in the appropriate sections of the next chapters. If you are looking for a particular shortcut or are not certain what a specific button does, there is a quick way to get help: let your mouse pointer hover above the button for a few moments, and a yellow sign will appear with a brief explanation.

Use this button to get access to

infrequently used shortcut buttons.

Toolbars are similar to menus in one aspect: unless there is an abundance of space, they only show the most commonly used functions. If you do not use a particular shortcut button for a while, it will drop off the toolbar. To get it back, click on the ‘more buttons’ button at the right end of the appropriate toolbar.

‘View’ � ‘Toolbars’ FrontPage also offers seven additional specialty toolbars for specific

3 Frames are a controversial topic in the community of web developers, and it is usually advised to use them only for very particular purposes. Therefore, we will not discuss them any further.


problems. You can make them visible by clicking on ‘View’, ‘Toolbars’ on the menu bar, and then selecting the appropriate toolbar.

The status bar

FrontPage’s status bar does not have a lot to tell, but it yields one vital

bit of information: the time it takes to download your current page at 28.8 kbps, the slowest modem speed still in use. You should endeavor to keep this time as short as possible – if you use a modem yourself, you are probably know how annoying it is to wait for a page to appear.

The view selector

‘View’

FrontPage does not only allow you to create web pages, it also enables you to maintain entire websites. Administering your site involves a number of different functions, and FrontPage includes a view for each of them. You can switch between views using the view bar on the left side of the screen, or by using the ‘View’ menu. In the following, we give a brief explanation of the purpose of each view.

‘View’ � ‘Page’

– Page view This view is where you create your actual web pages. You can do so in the ‘normal’ mode, which closely resembles the way that documents look in Word, the ‘HTML’ mode were you can work on the actual code of your page, or in the ‘preview’ mode, which gives you an impression of what your page will look like in the end. You can switch between these three page views using the tabs below the actual page.

‘View’ � ‘Folders’

– Folders view The folders view allows you to organize the files and folders that make up your website. It is important that you use the folders view instead of Windows Explorer, because most, if not all files in a website are linked to each other and moving them outside FrontPage may break these links.

‘View’ � ‘Reports’

– Reports view This view allows you to check the status of your website in several categories. You can e.g. search your site for broken links, check for pages that are slow to download or find out which files have not been updated in a while.


‘View’ � ‘Navigation’

– Navigation view The navigation view allows you to work on the structure of your website. You can move around existing pages, create new pages, make them visible or invisible for the visitors of your web page etc.

‘View’ � ‘Hyperlinks’

– Hyperlinks view The hyperlinks view allows you to analyze the interrelations of your web pages. You can see which pages link to any individual page, and in turn which pages are referred to in that page.

‘View’ � ‘Tasks’

– Tasks view The task view helps you in organizing the process of building a website. It is extremely useful if you are a) working on a complex task, b) working in a team with shared responsibilities, or c) simply forgetful.

The folder list

‘View’ � ‘Folder List’

The folder list is a miniature folder view, and fulfills the same purpose. It allows you to move, copy and delete files with the least possible damage to the links in your website. Its advantage: you can do so while working on your page, you do not have to switch to the folder view. If you are working on a website and the folder list is not visible, you can make it visible by clicking on the folder list button or selecting ‘View’, ‘Folder List’.

Common functions We will now turn to some of the most commonly used functions. There are usually several ways to activate each function, such as a button on a toolbar, a keyboard shortcut or an entry in the menu bar. All possible ways to launch a feature are detailed in the margin.

Please note that buttons on the toolbar work slightly differently than the

other two options: they immediately execute the feature, without giving you an opportunity to change any settings. If you press e.g. the ‘print’ button on the toolbar, your document will be printed immediately using the settings from the last print job. This could be dangerous if you are working in the SMR and your last print process used the expensive color printer! If you want to check or change any of the settings before activating a feature, you should use the keyboard shortcut or the entry in the menu bar.


c + N

‘File’ � ‘New’ � ‘Page…’ Create a new web page.

‘File’ � ‘New’ � ‘Web…’

Create a new website.

Creating new pages and sites Pressing the ‘new page’ button or using the keyboard shortcut will get you a blank page. Using the ‘File’, ‘New’, ‘Page’ entry will allow you to choose between a blank document and some prefabricated templates, such as feedback forms or search pages. Alternatively, you can click on the right part of the ‘new page’ button and select ‘web’ or select ‘File’, ‘New’, ‘Web’ from the menu bar to start an entirely new website. The difference: a page is just like an individual document in Word. A web, however, can contain infinitely many pages that are linked to each other. In creating a new web, you can also choose from a number of templates. All pages that belong to a web will be placed in a new directory which will be saved in the ‘My documents\My webs’ folder by default.

Opening existing documents If you want to access an existing document, you can press the ‘open’ button on the standard toolbar, select ‘File’, ‘Open’ in the menu bar or press c + O. All of them work in the same way; they lead to a window in which you can select the file to be opened. Alternatively, you can open an entire web by pressing the right part of the ‘open’ button and selecting ‘web’ or by choosing ‘File’, ‘Open web’ from the menu bar. The pages and webs that you edited most recently can be found under the ‘Recent Files’ and ‘Recent Webs’ headings.

c + o

‘File’ � ‘Open…’ Open a page.

‘File’ � ‘Open Web…’

Open a website.

‘File’ � ‘Recent Files’ ‘File’ � ‘Recent Webs’

Open a recently edited file or web.

c + S

‘File’ � ‘Save…’ Save the current page.

Saving documents If you have worked on a web page and wish to save your progress so that you can continue editing or using it later, use the ‘save’ button, select ‘File’, ‘Save’ from the menu or press c + S. If the page was created as part of a web, or if you created it in the navigation view, you will not need to enter a name – the page has already been assigned one.

‘File’ � ‘Save as…’ Save the current document under

a new name.

– Saving under a new name In some cases, you may want to save a file without overwriting the old version, e.g. because you have made significant changes and you want to preserve the original together with the revised edition. In that case, you can select ‘File’, ‘Save as’ from the menu bar and enter a new filename. Links pointing to the original page will continue to do so.

c + P

‘File’ � ‘Print…’ Print the current document.

Printing documents Pressing the ‘print’ button will immediately print the entire document on the standard printer, or on the printer that was used for the last printout. Pressing c + P or choosing ‘File’, ‘Print’ from the menu bar will allow you to make a number of choices before printing, such as:


• which parts of the document you want to print • which printer you would like to use • how many copies you would like to print

‘File’ � ‘Print preview…’

Print preview.

– Print preview Pressing the ‘print preview’ button or selecting the appropriate item from the menu bar will get you a miniature preview of the printed document.

c + 4

‘File’ � ‘Close’ Close the current page.

‘File’ � ‘Close Web’

Close the current website.

Closing pages and sites If you are done with a particular web page, but want to continue working in FrontPage, you can close the page. Press c + 4 or select ‘File’, ‘Close’ from the menu bar. Alternatively, you could click on the ever-present ‘close’ button that can be found in the name bar of the page. Alternatively, selecting ‘File’, ‘Close Web’ will close all pages in the entire web.

Cutting, copying, pasting The most comfortable way to move text or other items around on a page or to transfer them between pages is to cut or copy the desired item and to paste it wherever it is needed.

s + x or c + x

‘Edit’ � ‘Cut’ Cut

c + i or c + C

‘Edit’ � ‘Copy’ Copy

– Cutting or copying? First, you will need to select the desired text or picture. Then, you will have to choose between cutting and copying it. Both methods will allow you to insert the object in some other spot, but there is a crucial difference between them: cut text disappears from its original location while copied text remains where it is. E.g. if you want to move a passage from the middle of your page to the end, you would usually cut it. If, on the other hand, you want to re-use a passage on some other page, you would copy it. Before you can insert the text, you need to move the cursor to its new location, e.g. to the end of your essay. You can then push the ‘paste’ button, press s + i or select ‘Edit’, ‘Paste’ from the menu bar. You can paste the same element as many times as you like.

s + i or c + V

‘Edit’ � ‘Paste’ Paste

c + Z

‘Edit’ � ‘Undo’ Undo

Undoing changes When you have done something really disastrous, e.g. deleted all the text on a page, you can undo the changes one at a time by clicking on the ‘undo’ button. If you click on the right part of the ‘undo’ button , you will see a list of your last changes and you can undo as many of them as you like.


c + Y

‘Edit’ � ‘Redo’ Redo

If it turns out that the changes were indeed justified, you can re-do them by clicking the ‘redo’ button. If you use the ‘redo’ button immediately after pressing the ‘undo’ button, then your changes will be restored. If your last action however was not to ‘undo’ something, then the ‘redo’ button will be deactivated. Unlike other Office applications, FrontPage does not offer a ‘Repeat’ option.

1

‘Help’ � ‘Microsoft FrontPage Help’

Launch the help system.

The help system If you get stuck working in Microsoft FrontPage, simply hit 1 or push the ‘help’ button. What happens next depends on the settings of your computer. If the Office Assistant is installed, it will spring to action and offer help. If the Office Assistant is not installed, pressing 1 will bring up the help system, which is a combination of a user manual and a list of anticipated questions.

– The regular help system The help system will appear in the form of another window that will push your current window to the side so that both windows are visible at the same time. Its window is split into two main areas: a navigation area, which helps you find the topics you want, and a text area, where the actual help will be displayed.

There are three different ways to get information:

The contents and index work just like you would expect them to: the ‘contents’ area offers a list of all the chapters and sections contained in the user manual, while the index is an alphabetical list of all the words used in the manual. The answer wizard is probably the most useful tool: it lets you search a list of topics for your particular problem. Let’s


assume you want to italicize text, but you do not know how. Simply call up the help system, click on ‘answer wizard’ and type in a couple of keywords:

When you push the ‘search’ button, the help system will return with a

list of topics that may be of relevance for you:

In our case, the answer to our problem is right at the top of the list. If

you have trickier problems, you may have to go through a number of topics. To read any of the listed topics, click on its title. The topic will then be displayed in the adjacent area:

Clippy, the best-known (and most hated) office assistant.

– The office assistant The office assistant is a cartoon character that is meant to help you do your daily chores using Microsoft Office programs. It will take the form of a paperclip unless you actively ‘hire’ another character as your assistant. When you press 1 and the office assistant is installed on your computer, you can ask questions in the same way as when you are dealing with the answer wizard (see above).

‘Help’ � ‘Hide the Office Assistant’

Furthermore, as long as the office assistant is visible on the screen, it will monitor what you are doing and will offer suggestions when it thinks that you could accomplish a task more efficiently. This behavior may be quite useful while you are still learning the ropes, but after a while, many users get irritated with the office assistant. If you want to get rid of it, right-click on it and select ‘hide’ from the menu that pops up. Alternatively, you can select ‘Help’, ‘Hide the Office Assistant’ from the menu bar.


Dialogue box A window that requires your decision on some topic. E.g. when you save a document, your PC needs to know under what name it should save the document and will open a window where you can enter the filename. This window would be a dialogue box.

– Help in working with dialogue boxes During some particular activities, there is a quicker way to get help. Let’s assume that you want to print something. You have clicked on ‘File’, ‘Print’ and a window has popped up where you can adjust some of the print settings before printing. However, you are unfamiliar with some of the advanced settings. In almost all of these dialogue boxes, you will find a button with a question mark in the upper right corner. Pushing this button will put you into ‘quick help’ mode. To indicate you are in this mode, a question mark will be added to your mouse pointer

. When you now click on any element of the dialogue box, a brief description of its function will be displayed.

For example, clicking on the ‘ok’ button in quick help mode…

will yield the following explanation:

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Imag

e: si

ze-is

nt-e

very

thin

g.co

.uk

CCRREEAATTIINNGG AA WWEEBBSSIITTEE

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

C O M I N G U P� 33.. SSEETTTTIINNGG UUPP AA WWEEBBSSIITTEE In this chapter, we create a new website and structure it.

As an experienced user of the Internet, you are probably aware that information alone does not make a website useful. The information needs to be accessible, and the best way to make information accessible is by structuring it. This is the reason why it almost never pays off to create one single web page. Instead, we start off by creating a site consisting of several pages that contain parts of the information. We dedicate some time to the choice of a theme. Finally, we discuss how you can build the structure for your web page using the navigation and folders views.

‘File’ � ‘New’ � ‘Web…’

Create a new website.

Creating a new website Websites are simply called webs in FrontPage. You can create a new web by selecting ‘File’, ‘New’, ‘Web’ from the menu bar or by clicking on the right part of the ‘new page’ button and selecting web. FrontPage will then offer you a list of templates, such as ‘customer support web’ or ‘personal web’. However, these templates serve only as very broad suggestions and even if you want to create a personal website, the ‘personal web’ template may restrict your ideas more than it helps you to develop them. Furthermore, some of the templates rely on technology that is not available everywhere.4 Therefore, it almost always pays off to opt for the ‘one page web’. ‘One page’ does not imply that there is a restriction on the amount of pages, but that initially there is only one page in the web. This page is empty and has been labeled ‘index.htm’.

The significance of ‘index.htm’ By default, every web needs to have a page that is called ‘index.htm’ or ‘index.html’5, which fulfills an important function. Imagine you want to visit a site for the first time, e.g. the renowned Internet magazine Salon.com. As a first time visitor, you have no idea what their pages are called. Do they have a politics section? And if they do, can you find it at www.salon.com/politics.htm or at www.salon.com/pol.html?6 There is no way you could know this before your first visit. And even if you frequently read Salon, would you remember the exact addresses of the pages? Probably not. That’s why every website has a page called ‘index.htm’ or ‘index.html’. This page is the page that is called when someone visits your website and does not specifically request a different page. E.g. when you direct your browser to www.salon.com, it actually takes you to www.salon.com/index.html.

4 As we will learn in ch. 5, your web page will need to be transferred to a server on the web before anyone can see it on the WWW. Some templates rely on a set of tools called FrontPage server extensions, but these tools are not available on the majority of servers. In that case, some of your pages would not work as they should. 5 There is no difference between ‘index.htm’ and ‘index.html’. The former stems from a time when it was not possible to place more than three letters after the dot. 6 Neither is correct, it is located at www.salon.com/politics/.

http://www.salon.com/politics.htm

http://www.salon.com/pol.html

http://www.salon.com

http://www.salon.com/index.html

http://www.salon.com/politics/


Homepage The front door of your website, which welcomes visitors and directs them to the different sections of your site.

Because almost everyone automatically uses this page, it can be seen as the front door of your website. It is also frequently called the homepage, because it is the point of departure from which your visitors start to explore your site. And because first impressions count, this page is the most important page of your site.

Choosing a folder for your web After you have selected the template, you can also specify where your web should be saved on the hard drive. By default, FrontPage lovingly suggests names as ‘myweb3’ and places them in your ‘My Documents’ folder under ‘My Webs’. However, you are free to choose more meaningful names for your webs and it certainly is advantageous to do so.

What do I do with the ‘My Webs’ folder? It is of outmost importance that you leave the ‘My Webs’ folder alone as much as possible. FrontPage will automatically create the folder and all your original and subsequent web pages. It will also create a number of files that are normally hidden from view and that are used in the administration of your site. If you were to use the Windows Explorer to manually rename, move or delete files, you may unintentionally ‘break’ pictures on your pages or hyperlinks between your pages, and fixing such problems is a pain in the lower back.

Instead, if you feel the urge to rearrange parts of your website, use the

folders view in FrontPage. If you rename, move or delete files there, FrontPage will keep track of all hyperlinks and will automatically repair any broken links.

By the way, it is entirely save to create or copy new files into the ‘My

Webs’ folder.

Applying a standardized look It is a good idea to think about the layout of your pages before you fill them with content, so that your pages have a standardized look. Unfortunately, developing an appealing design for your website is a complicated process that usually requires additional software such as image editing applications. Creating your own design is beyond the scope of this manuals on FrontPage.

‘Format’ � ‘Theme…’

However, there is an alternative that is far less work intensive: themes. Themes are preconfigured designs that you can adopt for you website. To apply a theme, select ‘Format’, ‘Theme’ from the menu bar. FrontPage will then present you with a selection of themes, which you can preview immediately.

Creating a Website: Setting Up a Website 21 ●●●●●●●●●●●●

Simply browse through the available themes and select the theme that

you like best. There are a number of options that influence the final result:

• All pages vs. selected pages. A coherent look is always beneficial, so it is recommended that you select ‘all pages’. You can still modify the look of individual pages at a later stage.

• Vivid colors. Uses stronger colors when creating your web page. You can see the difference between both settings in the preview pane.

• Active graphics. With this setting, your buttons will become interactive: they change color or shape when your mouse pointer moves across them, e.g.

changes

to • Background picture. Adds a background picture to your pages.

You can preview the difference between both settings in the preview pane.

• Apply using CSS. This does not influence the look but the implementation of the theme of your choice. Cascading Style Sheets are a relatively recent technology, so older browsers may not understand them.

You can also modify the look of any theme to suit your taste. Be sure to

save your creation under a different name. Once you are done, you can apply your changes by clicking ‘ok’ and confirming with ‘yes’.

Structure your site

Helping the user There is nothing more frustrating than browsing through a badly structured website on the hunt for a tiny, elusive bit of information.


Especially in this information-rich age, information is only useful if it can be easily found and retrieved. If your website is too hard to navigate, your visitors will simply move on to a different site. That’s why you should think about the structure of your site before you do anything else. Think about two issues:

• What is the purpose of your website? • Who is your main audience?

The answers to these questions will affect a) which information you are

going to include and b) how you are going structure it. Write down the answer to both questions, e.g. using a mind map.


Once you have an idea about the structure, it is time to implement it in your website. To do so, we switch to the navigation view by clicking on the ‘navigation view’ button or selecting ‘View’, ‘Navigation’ from the menu bar. You will then see an organization chart of your website, which will be rather simple at this point:

The homepage will always be at the top of your website. It fulfills the

function of a greeting and directory to your website, but is not supposed to contain significant bits of information. You can create new pages ‘below’ the homepage by pressing c + N or by right-clicking on the homepage and selecting ‘new page’. You can add as many pages as you want, and they are not required to be linked to the homepage directly. To create pages below another page, click on that page once and then press c + N.

You can then proceed to label your pages: click on a page, then press

2 or click on its name. Be sure to give your pages meaningful names. At this point, you may e.g. have a structure like this:

Creating a Website: Setting Up a Website 23 ●●●●●●●●●●●●

If you are not happy with the arrangement you can move the individual

pages around by clicking on a page and holding the mouse button down while you drag the page to its new position.

‘Format’ � ‘Shared Borders…’

Automatically add navigation elements From this organization chart, Microsoft FrontPage can create title bars and navigation elements for you automatically. If you want navigation elements only on a few pages, then you need to select them by holding the c button and clicking on them. Then, call up the shared borders dialogue by selecting ‘Format’, ‘Shared Borders’ from the menu bar.

Here, you can determine a unified look for all you pages by adding top,

bottom, left and right borders. The top and left border can include optional navigation elements.

As the name suggests, these borders are shared by all (or at least by all

selected) pages. If you change the border on one page, it will be adjusted on all pages. This allows you to quickly make changes to the navigation elements on all pages.

If you do not want such borders, but you would like to use title bars and

navigation elements on your pages, you still need to visit the shared borders menu once to enable these elements. To do so, select ‘apply to all’ and unselect all borders.

You are now ready to begin editing your web pages. To start out with

any particular page, double-click on it and FrontPage will open it for you


in the page view.

Helping yourself Making a site easy to navigate for users is one issue. You should however also take precautions to make the site easy to maintain for yourself. Websites have a habit of growing pretty fast: every picture and every page is a separate file and it won’t be long until you have dozens or hundreds of files in your website folder. Plan ahead and create a number of subdirectories. Such subdirectories can be arranged by topic, e.g. following our site structure above, you may want to create a separate folder for your interests, your photos and your family. Subdirectories can also be arranged by file type, e.g. one subdirectory for pictures, one subdirectory for Word documents etc.

‘View’ � ‘Folder view’

To create and manage these folders, do not use the Windows Explorer. Doing so can destroy the navigation elements of your site. Instead, switch to the ‘folder’ view in FrontPage. It works exactly like the Windows Explorer, so we will not discuss its functions here.

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

C O M I N G U P� 44.. FFOORRMMAATTTTIINNGG TTEEXXTT && PPAAGGEESS In this chapter, we learn how to set up individual web pages.

Now, we are ready to work on the pages themselves. In this chapter, we learn how to design pages. We start by entering and formatting text, then go on to add pictures as well as navigation elements and finally format entire pages. But before we start, we need to discuss some of the properties of web pages.

Peculiarities of web pages Web pages are not like normal printed-paper documents, but you already knew that. However, the differences are not only limited to the fact that web pages can be interactive and that they can contain multimedia content. For web designers, there is a bigger issue: the fact that nothing is truly fixed. If you write a document in Word, you can determine what everything looks like and where your design elements are positioned. If you place a letter 2.5 cm below the top margin and 2 cm to the right of the left margin, it will be exactly in that position when you print your document. And if you color it a light shade of blue, it will be exactly the same shade of blue (presuming a good printer is used). Not so with Internet documents.

Internet documents are flexible, and there is a good reason for that. You

have certainly heard about the analogy of the information highway. And just like an ordinary highway, the Internet is used in a number of different vehicles. While you will see Ladas, Fiats, Citroëns and Mercs on a highway, you can use the Internet with PCs, Apple Macintoshs and iMacs, fast Solaris Workstations, or even with a Sega Dreamcast console and a TV. And the differences do not stop there: there is a myriad of different possible combinations of computer types, operating systems, graphics equipment, screens sizes and web browsers, and all of them affect the way your site looks. Possibly the most frustrating fact for beginning web designers is that they do not have entire control about the look and feel of their product.

This fact is especially noticeable in the following four areas: • Type fonts are not transmitted together with your web page, so

you need make sure that you use a font that is present on the user’s computer. This limits you to a small set of six type fonts that are commonly used on all sorts of computers.

Web-safe colors Colors that look the same no matter what computer and which software you are using to access the Internet.

• Some operating systems assemble colors in a different way than others, and some colors cannot easily be translated. To overcome this problem, a ‘web-safe’ palette of 256 colors has been created, which can be displayed without significant differences on most devices. You should stick to that palette.

• There is no such thing as a fixed page size. While some people


may be using a 14” monitor with a 640 × 480 resolution, others may be using a 21” monitor with a 1024 × 768 or even higher resolution. This leads to two problems: on the one hand there is a need for formatting, as line lengths may become to long, but on the other hand many of the tools that you would find in a word processor become meaningless.

• Some of your visitors have the benefit of a very fast Internet

connection while others are using an ordinary modem and a telephone connection. Since the latter is still a very common mode of access, you need to make sure that people with a slow connection are not forced to wait for ages while accessing your website. Therefore, you should use small images that are optimized for the net and keep an eye out for the required download time displayed in FrontPage’s status bar.

Now that you are aware of the main problem areas, we can start working

on your web pages.

Entering text Entering text works almost exactly like in Word. However, many useful functions such as tabulators are not available for compatibility reasons. Besides that, there are two significant differences.

Paragraph break A line break that leaves some space between the previous and the next line.

You will notice the first one very soon: if you press /, FrontPage inserts a paragraph break, not a line break. The difference between the two: a paragraph break automatically leaves some space between the two lines. To get a normal line-break, you need to press s + /.

Pressing / results in a

paragraph break with space between the lines…

… while pressing s + / results in an old-fashioned line break.

‘Insert’ � ‘Symbol’

The second difference is sneakier: you cannot just use any symbols you like. In Word, you could use almost all letters from all alphabets on the planet, and you could also use fonts full of useful symbols (such as WingDings) to illustrate your document. Because web pages need to be encoded in a certain way, your choice of symbols is restricted. To enter a symbol that cannot be found on the keyboard, select ‘Insert’, ‘Symbol’ from the menu bar, then make your selection from the window that appears.

Creating a Website: Formatting Text & Pages 27 ●●●●●●●●●●●●

To ensure that your text is translated into proper code, you should

always enter text in the ‘normal’ view, not in HTML view.

Insert and overtype mode? You may remember that Word (and most other applications) have two modes for typing, insert and overtype. FrontPage, however, does not: it always uses insert mode, where new characters push any characters to the right of the cursor further in that direction.

c + K

‘Insert’ � ‘Hyperlink’

Creating links Links are probably the most important element in web pages. To convert text into a link, highlight the text, then click on the hyperlink button. A new window will open where you can specify the target of your link.

Generate a link that sends email.

If you want to link to a page or file on your own website, you can immediately select it from the file list. If you want to link to a document in another part of the Internet, simply enter the complete URL (do not forget to include the ‘http://’ part). If you want to create a link that refers to an email address, click on the email link button and enter the target email address.


Ordered list.

Unordered

list.

‘Format’ � ‘Bullets and Numbering…’

Creating ordered and unordered lists FrontPage also helps you in the creation of lists, however, it does not automatically recognize when you are working on a list. Before you start typing, you should therefore click on the ordered or unordered list button to indicate you want to set up a list. Alternatively, you can also select ‘Format’, ‘Bullets and Numbering’ from the menu bar, which allows you to specify the type of numbering or bulleting used for your list.

Once that is taken care of, you can enter your list without having to

worry about numbering your items. To indicate that you are done with your list, press / twice.

Formatting text Formatting text generally works like in Word, but there are a number of peculiarities that you need to consider. In the following, we will discuss all the different text attributes that you can format.

Selecting text If you want to move, format or delete text, you need to select the part of your document to which the changes should be applied. To select text using the mouse, follow these three steps:

1) Move your mouse pointer to the beginning of the text that you want to highlight.

2) Press the left mouse button and keep it pressed while…

3) you move the mouse pointer to the end of the text.

Instead of using the mouse, you can also use the keyboard:

1) Move the cursor to the beginning of the text. 2) Press and hold the s key while… 3) moving the cursor around with the arrow keys u, d, l and

r. This allows you to highlight one character at a time. You can speed up

the process by holding s and c while using the arrow keys. This will highlight one word at a time.

Some additional timesavers:

• Pressing s + h or s + e highlights everything from your current position to the beginning or end of the current line.

• Pressing s + M or s + W selects larger portions of text.


• Pressing c + s + h or c + s + e highlights everything from your current position to the top or bottom of the document.

• Pressing c + s + u or c + s + d selects everything from your current position to the top or bottom of the paragraph.

Once you selected all desired elements, you can cut or copy them

normally (see ch. 2), delete them by pressing x, or format them as described below.

c + s + F

Font This changes the typeface of your text. Remember that Internet documents need to rely on fonts that are installed on the user’s computer, so you cannot simply use any font that you like. While FrontPage allows you to use any of the typefaces on your computer, you should restrict yourself to the following fonts:

With the possible exception of Geneva, all of these fonts should be

available on your PC.

c + s + P

Font size This changes the size of your text. Font sizes for Internet documents are measured in steps from 1 to 6. These steps are supposed to correspond to certain font sizes:

Step Font Size 1 8 pt. 2 10 pt. 3 12 pt. 4 14 pt. 5 18 pt. 6 24 pt.

However, most browsers allow users to specify whether they want to use

small or large fonts, so it is hard to make any claims regarding the exact font size. The default font size in FrontPage is 3.


Bold c + B

Italics c + I

Underline c + U

Font style These options influence the appearance of your text. You can set your text in boldface and italics, and you can underline it. However, you should refrain from underlining words, as underlining is associated with links on the Internet.

Font color To change the color of the text, click on the ‘font color’ button. This will change the color of your text to whatever color is indicated on the button. (It is indicated in the bar below the ‘A’; in our case, it is black.) If you do not want your text to appear in that particular color, you can click on the right part of the button to expand the color menu.

Clicking on the left part of the button will change the color of your text to the color indicated

on the button. If you wish to use another color,

click on the right part of the button.

The color menu contains a small subset of colors. Clicking on ‘more

colors’ will take you to the web-safe color palette, which offers a broader range of colors.

While you can also define additional colors, you should refrain from

doing so. The colors on this palette can safely be used on the web, meaning that they will look more or less the same regardless of where they are displayed. If you opt for colors that are not contained in this palette, your site may not look as you intended on some computers.

Highlights your text.

Highlighting text Clicking on the ‘highlight’ button will allow you to mark important sentences or words by highlighting them. Clicking on the left side of the


button will add the corresponding background color to your text. If you do not like the default color, click on the right side of the button and choose another color.

‘Format’ � ‘Font…’

Further options… The options described above are clearly the most important options. However, there are a number of other choices for your text that can be accessed by clicking on ‘Format’, ‘Font’ on the menu bar. Under the ‘font’ category, you find most of the previously discussed options, as well as a range of typesetting effects. In the ‘character spacing’ section, you can increase the space between characters and raise or lower the text.

Formatting entire paragraphs Paragraph formatting is formatting that cannot be applied to single words but only to entire paragraphs. FrontPage allows for three different types of paragraph formatting.

Left c + L Center c + E Right c + R

Paragraph alignment Here, you can choose the alignment for the current paragraph. You can align it to the left or right margin, or you can center each row so that the distance to both margins is equally big.

Increase indent

Decrease indent

Indentation The ‘decrease indent’ and ‘increase indent’ buttons allow you to adjust the indentation of text.

‘Format’ � ‘Paragraph…’

Word, line & paragraph spacing This feature is located in the paragraph options – you can access it by clicking on ‘Format’, ‘Paragraph’ on the menu bar. It determines how large the gap between individual words and lines as well as before and after paragraphs should be.

‘Format’ � ‘Style…’

Preformatted styles To speed up the web-design process, a number of predefined styles are available, including styles for headings, definitions, etc. You can access them from the style box on the formatting toolbar or by selecting ‘Format’, ‘Style’ from the menu bar.

Recycling your work You can also create your own styles. However, this is not as convenient as in Word, where you simply selected a paragraph that was formatted to


‘Format’ � ‘Style…’ your liking and typed a name into the style box. In FrontPage, you need to select ‘Format’, ‘Style’ from the menu bar. You can then define a new style by clicking on ‘new’, entering a name and selecting the appropriate font and paragraph formatting. The new style will then be available in the style box on the formatting toolbar. You will find it below the predefined styles with a full stop in front of its name.

Inserting tables You can insert a table by clicking on the ‘add table’ button on the standard toolbar and selecting the dimensions of your table from the grid that pops up:

By default, the table will cover the full width of the page and all

columns will be equally wide. Furthermore, all borders will be invisible, allowing you to use tables to undetectably format your document.

‘Table’ � ‘Insert’ � ‘Table…’ Alternatively, you can select ‘Table’, ‘Insert’, ‘Table’ from the menu

bar. A dialogue will then allow you to specify: • the number of rows and columns

• the alignment of the table (not of the text in the table) • the thickness of the border • the distance between the text in a cell and the cell border • the distance between cells • the width of the table

‘Table’ � ‘Properties’ �

‘Table…’ You can also adjust any of these attributes at a later stage by selecting ‘Table’, ‘Properties’, ‘Table’ from the menu bar. (Your cursor needs to be inside the table or this option will be unavailable.)

Formatting tables You can now format the table to your liking. You can resize cells by placing your mouse pointer on top of any of the borders, so that it turns into a double line that is pulled by two opposing arrows . Press and hold the left mouse button and resize the column or row.

‘View’ � ‘Toolbars’ � ‘Tables’ Most of the other formatting options are best accessed through the

‘tables’ toolbar, which you can make visible by selecting ‘View’, ‘Toolbars’, ‘Tables’. In the following, we provide a brief overview of its functions:


Press this button to draw a table.

When drawing tables, your

mouse pointer looks like a pen.

– Drawing tools Instead of creating a table as described above, you can also use the drawing tools. Click on the ‘draw table’ button and your mouse point will turn into a pen . Now you can conveniently draw cells and entire tables. When you are done, you need to turn the drawing feature off by clicking on the ‘draw table’ button a second time.

If you made mistakes when drawing or if your table has a few superfluous cells, you can take care of them by using the eraser. Click on the ‘eraser’ button to switch the feature on or off. When the tool is activated, your mouse pointer will look like an eraser and will perform the same function: it will remove unnecessary lines and cells from your tables.

Erase cells and borders using this

tool.

When erasing, your mouse pointer will look like this.

Insert rows. Insert columns.

Delete rows or columns.

– Insert and delete rows and columns It is possible to effortlessly insert new rows or columns by clicking on the ‘insert rows’ and ‘insert columns’ buttons. New rows will be placed below the current row; new columns will be placed to the right of the current column. You can also delete rows and columns using the ‘delete cells’ button. The button only becomes available once you have selected an entire column or row. To do so, place your mouse pointer slightly to the left of the desired row or slightly above the appropriate column and click once.

Merge as many cells as you like

using this button.

This button lets you split a cell into a number of rows and/or

columns.

– Merge & split cells In some cases, you may want to combine a number of cells into one larger cell. You can do so by highlighting these cells and then clicking the ‘merge cells’ button. Obviously, this button will only work if you have selected more than one cell. The opposite is also possible: you can split a cell into as many rows and columns as you want, simply by clicking on the ‘split cell’ button. This button is not available when you have selected more than one cell.

Top

Center

Bottom

– Vertical alignment The vertical alignment determines whether your text is located at the top, the center or the bottom of each cell.

– Row and column sizes You can ensure that all columns and rows are the same size by using the ‘distribute rows evenly’ and ‘distribute columns evenly’ buttons. Alternatively, you can design the entire table to auto-fit its content. If you click on the ‘auto-fit’ button, all cells will be just big enough to display their content.

Distribute rows and columns

evenly.

Make a table fit its content

automatically.


This button allows you to pick a background color for your cells.

– Background color You can set the background color of any cell using the ‘background color’ button. As always, you can take your pick from the standardized color scheme or you can opt for a color from the web-safe palette.

Inserting pictures You can easily insert pictures into your web pages either from a file or by pasting them into your page. Microsoft FrontPage also contains a library of clip art that can be used to decorate your page.

‘Insert’ � ‘Picture’ � ‘From

File’ Insert a picture from a file.

Inserting pictures from files This is by far the best solution. To insert a picture from a file, click on the ‘insert picture’ button or select ‘Insert’, ‘Picture’, ‘From File’ from the menu bar. While FrontPage will allow you to insert any type of picture, most browsers only understand three different types of pictures: .gif, .jpg/.jpeg and .png pictures.7 To ensure that no other types of pictures accidentally make their way into your site, you can switch the file type from ‘all pictures’ to ‘GIF, JPEG, and PNG’ before making a selecting.

If you want to use a picture that is in a different format, the best solution

is to paste it into your web page.

s + i or c + V

‘Edit’ � ‘Paste’ Paste

Pasting pictures You should use this method only when your picture is not available as a file or when it is not in the .gif, .jpg/.jpeg or .png format. Copy the object from another application and paste it into your web page by clicking on the ‘paste’ button, pressing s + i or selecting ‘Edit’, ‘Paste’ from the menu bar. FrontPage will automatically determine the optimal file type for your picture and offer to save it for you as a .gif, .jpg/.jpeg or .png file.

‘Insert’ � ‘Picture’ � ‘Clip Art…’

Using clip arts You can also insert pictures from Microsoft’s ClipArt library, which comes with Microsoft Office. To do so, select ‘Insert’, ‘Picture’, ‘Clip Art’. You will then be able to select illustrations from a broad range of categories.

7 These file endings are acronyms for the Graphics Interchange Format, the JPEG File Interchange Format and the Portable Network Graphics file type. The former two are ubiquitous, while the latter is only slowly being adopted. You should stick to .gif and .jpg/.jpeg files as much as possible.


Creating a hyperlink from your picture Like text, you can use pictures to link to other documents. The procedure works just as described above (p. 27), except for the fact that you need to select a picture instead of text before adding the link. To do so, click once on the desired picture.

a + / ‘Format’ � ‘Properties…’

Picture options Once you have inserted a picture into your page, you may want to adjust some of its attributes. To do so, select the picture by clicking on it once, then press a + / or select ‘Format’, ‘Properties’ from the menu bar. You will then be able to fine-tune several aspects of the picture, such as its file type. However, two attributes are of particular interest.

– Alternative text Some of the visitors of your site may have chosen to deactivate pictures to be able to surf faster. Others are not able to see pictures at all for technical reasons. You have the option to leave a description of the picture’s content for these people in the ‘alternative representations’, ‘text’ field on the ‘general’ tab. However, the number of netizens that ignore pictures is small by now, so you may safely ignore this attribute.

– Layout On the ‘appearance’ tab, you can adjust a number of layout attributes. Most important is the alignment of the picture, as it controls how the picture is arranged in relation to the surrounding text. There are 11 different settings:

• Default. Usually either ‘bottom’ or ‘baseline’, but the actual setting depends on the browser.

• Left. Aligns the picture to the left margin of the page and lets the text flow around it.

• Right. Aligns the picture to the right margin of the page and lets the text flow around it.

• Top. Aligns the top of the image with the tallest item in the current line of text. (This could be another image.) The remaining text continues below the image.

• Texttop. Aligns the top of the image with the tallest letter in the current line of text. The remaining text continues below the image.

• Middle. Aligns the baseline of the current line of text with the vertical middle of the image. The remaining text continues below the image.

• Absmiddle. Aligns the image to the vertical middle of the text. • Baseline, bottom. (Usually the default.) Aligns the baseline of the

current line of text with the bottom of the image. The remaining


text continues below the image. (There are slight differences between the two settings depending on browser interpretation.)

• Absbottom. Aligns the absolute bottom of the current line of text with the bottom of the image.

• Center. Aligns the text horizontally to the center of the image. All text will be placed below the picture.

Pixel One individual point on a computer monitor.

Besides that, you can also set the thickness of the image border as well as the horizontal and vertical distance between the image and the surrounding text. All values are in pixels.


‘Format’ � ‘Shared Borders…’

Inserting navigation and orientation elements Even if you decided not to include shared borders on your page, you can easily add navigation and orientation elements to your page. All of these elements require that you visit the navigation view once and to enable them. To do so, switch to the navigation view, select ‘Format’, ‘Shared Borders’ from the menu bar, choose ‘all pages’ and unselect all borders.

‘Insert’ � ‘Page Banner…’

Page banners Page banners indicate the page title. You can insert a page banner simply by selecting ‘Insert’, ‘Page Banner’ from the menu bar. You can then choose whether you want a text or picture banner and what it should say. You will only be able to get picture banners if you are using a theme (see ch. 3).

‘Insert’ � ‘Navigation Bar…’

Navigation bars Navigation bars help your visitors move through the website. You can insert a bar by selecting ‘Insert’, ‘Navigation Bar’ from the menu bar. Once again, you can opt for a text or picture version of the bar. If you are not using a theme, only the text version will be available. You can also select which pages should be listed on the bar.

Formatting pages There is very little about pages that requires formatting. There are, however, two issues: the page title and the line length.

The page title Every page has a title, which is not visible on the page itself. Instead, it gets displayed in the title bar of your browser. This title is also suggested as the name of the bookmark when someone bookmarks your page.

By default, your pages have such endearing names as ‘new page 17’ that do not look particularly professional. The most convenient way to assign


‘View’ � ‘Navigation’ names to your pages is to switch to the navigation view, where you can easily label many pages in one go. To change the name of a page, click on it once, then click on its name or press 2.

If you want to change the name of a single page, it is probably more

convenient to stay in the page view. If you right-click on any part of the page, you will be able to select ‘page properties’ from the pop-up menu, allowing you to specify the name for this particular page.

The line length A more pressing problem is the line length used for your text. By default, your text will run all the way from the left to the right border of the browser window. If your visitors use a high screen resolution, the average line could contain as many as 30 words. In comparison, the average line of a novel contains approximately 12 – 16 words, or half as much. Long lines are problematic because the reader will tend to lose orientation as he switches from the end of one line to the beginning of the next: because of the length of the line, the eyes cannot conveniently glide along the previous line to its beginning. Your visitor also is less likely to remember the exact words at the beginning of the last line, so she may have to read a couple of words to recognize how the last line started and which line is the next one. For many, this is not a conscious process, but it continually interrupts the reading experience; as a result, the reader is more likely to lose interest.

Unless you use a table, your text will look like this for some people.

Unfortunately, there is no setting for the line length. Instead, you will

have to use a trick to work around the problem: insert a one column by one row table (i.e. a table consisting of only one cell). Place your cursor inside the cell, select ‘Table’, ‘Properties’, ‘Table’, adjust the table width to some 450 – 600 pixels and place your text inside the table. At a normal font size, this will result in a reasonable line length.

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

C O M I N G U P� 55.. PPUUBBLLIISSHHIINNGG YYOOUURR SSIITTEE In this chapter, we prepare your site for publishing and transfer it to a server on the Internet. In the next pages, we do some final checks on your site and then publish

it on the Internet.

Preparing for publishing Before your site ‘goes live’ as web designers say, you may want to make sure that everything is watertight by checking the spelling and the hyperlinks in your site.

7

‘Tools’ � ‘Spelling…’ Initiate a complete spelling

check.

Doing a complete spell check You can launch a page-wide spell check by selecting ‘Tools’, ‘Spelling’ from the menu bar or by pressing 7. FrontPage will then take you past all the mistakes it found, giving you the opportunity to correct or ignore every single one. You will have to do such a check manually for every page; there is no possibility to do a site-wide check.

‘View’ � ‘Reports’ � ‘Broken Hyperlinks’

Verify all hyperlinks.

Checking the hyperlinks Hyperlinks are the lifeblood of the Internet and there is nothing more annoying than a hyperlink that sounds interesting but does not work. Fortunately, you can easily check whether the hyperlinks on your site work by selecting ‘View’, ‘Reports’, ‘Broken Hyperlinks’ from the menu bar.

To successfully test your links, you need to connect to the Internet

before pressing the ‘verify hyperlinks’ button. FrontPage will then check both internal hyperlinks, i.e. hyperlinks between pages of your own site, and external hyperlinks, i.e. links to other websites. You will receive a final report that indicates each link together with its status and location.

If FrontPage finds any broken hyperlinks, you can fix them without

going to the appropriate page. Instead, double-click on the damaged link and enter the correct address:


You have the option of adjusting the link in all pages, which is usually

the way to go.

Other reports Especially if you created a state-of-the-art website, you may want to consult some of the other reports too. The slow pages report is particularly useful: it indicates pages that force a user to wait for more than half a minute when using a 28.8 kbps modem.

Web space Space on someone else’s web server. Required to publish information on the web as long as you do not own your own server.

Publishing your website Once you are sufficiently satisfied with your site, it is time to publish it on the Internet. To make information available on the Internet, you need access to a web server, a computer that contains information and distributes it over the web. Operating your own server is prohibitively expensive, but there is the option to use the server of another organization. To get you started, Maastricht University allocates 5 MB of web space8 to any student who wants to have his or her own website.

You need to sign up for your Unimaas web space on this website:

� http://www.unimaas.nl/iis/aanvraag/aanvraag_stud.htm Once your request has been processed by our ICT service center, you

will be assigned a URL like www.student.unimaas.nl/j.smeets, using the same name that is used for your student.unimaas.nl email address. You will also be given a login name and password, which will generally be the same as the username/password combination for your email account.

8 5 MB of space will be more than enough for your initial projects. You may however find at a later stage that 5 MB are no longer sufficient. Fortunately, there are a number of companies and institutions that provide ‘web space’ for free. This usually implies that these organizations will place advertisements on your pages – a necessary evil if you want to avoid paying for your web space. We have listed a number of providers of free web space in appendix B.

http://www.unimaas.nl/iis/aanvraag/aanvraag_stud.htm

http://www.student.unimaas.nl/j.smeets


‘File’ � ‘Publish web…’

Publish your site on the Internet.

Once ICTS has confirmed that your web space is ready, you can transfer your documents. Select ‘File’, ‘Publish web’ from the menu bar. The location you will be publishing to is the URL of your web page, e.g. http://www.student.unimaas.nl/j.smeets. If you are publishing this particular web site for the very first time, select ‘publish all pages’ and confirm by clicking ‘publish’.

At a later point, you will be required to enter your username and

password to authenticate that you are the rightful owner of that web space.

By the way, if you are using a web provider other than the University of

Maastricht, you will most likely not use your URL as the location for publishing your web. Instead, most providers will give you an ftp-address, which is used for publishing, and a URL, which is used for viewing your website.

If you make any changes to your website at a later stage, you will only

need to publish the changed pages. This cuts down on the time it takes to transfer your files.

We hope you have fun and success creating web sites!

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

http://www.student.unimaas.nl/j.smeets

Imag

e: si

ze-is

nt-e

very

thin

g.co

.uk

AAPPPPEENNDDIIXX

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

AA.. DDEESSIIGGNN && DDEEVVEELLOOPPMMEENNTT RREESSOOUURRCCEESS

OONN TTHHEE WWEEBB

Art and the Zen of Websites Hints and directions regarding the design of websites. � www.tlc-systems.com/webtips.shtml

CNet Builder.Com How-Tos, references and resources for web designers. � www.builder.com

DevShed A site for advanced open-source web development. � www.devshed.com

DreamInk A guide to design basics. � www.dreamink.com

GlassDog Design-O-Rama A good resource on HTML, plus some resources on JavaScript and CSS. � www.glassdog.com/design-o-rama/

HTML Goodies Good resources for the beginning web developer. � htmlgoodies.earthweb.com

Lynda Weinman Lynda Weinman is at the forefront of graphic and web design and offers useful tips on her website. � www.lynda.com

Project Cool A portal for web developers, featuring guides and tutorials for both basic and advanced development techniques. � www.devx.com/projectcool/

WebMonkey A portal for web developers, featuring guides and tutorials for both basic and advanced development techniques. � hotwired.lycos.com/webmonkey/

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

http://www.tlc-systems.com/webtips.shtml

http://www.builder.com

http://www.devshed.com

http://www.dreamink.com

http://www.glassdog.com/design-o-rama/

http://www.lynda.com

http://www.devx.com/projectcool/

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

BB.. FFRREEEE WWEEBB--HHOOSSTTIINNGG

The ‘complete’ list Google’s WebDirectory lists several hundred free web-hosting services. � directory.google.com � Computers � Internet � Web Design and Development � Hosting � Free � Personal

Tripod 20 MB of web space, URL: members.tripod.com/yourname/, banner ads. � www.tripod.lycos.com

Yahoo! GeoCities 15 MB of web space, URL www.geocities.com/userid/, banner ads. � www.geocities.com

FreeServers 12 MB of web space, URL: yourname.freeservers.com, banner ads. � www.freeservers.com

PageSpin (recommended) Only for students: 60 MB of web space, URL: yourname.pagespin.net, no banner ads, but only available from September – May. � www.pagespin.net

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

http://www.tripod.lycos.com

http://www.geocities.com/userid/

http://www.geocities.com

http://www.freeservers.com

http://www.pagespin.net