FrontPage 98

1. FrontPage 98 Staples High School taught by: Alan B. Weaver email: info@big-pic.net

2. FrontPage 98 To open an existing site, click here To create a new site, click here

3. Creating a Web One page web allows you to keep adding pages. There are “wizards or templates” that can be used - remember these are not “originals” - others use them. If you are creating a new site, you need to specify the name of it, and also indicate the “drive” it is located on (C - hard drive). If drive is not already created, it will create it for you.

4. Initial Set Up Click here to go to “folder” view. This is the most efficient way of viewing your site, it shows it by folder

5. Folder View To create new folders or pages, click here. Choose “New”, then page or folder. You can also click on “New Page” indicate just below File The index.htm page is the “home” page. For example, if someone clicks on www.mynewweb.com, the index page is what will appear. All web pages have unique addresses.

6. Folders - Organizing the Site It is very important to stay organized. What you may think is a simple five page site can easily turn into a site with over 200 files in it and you need to know where things are located! It is a good idea to put each “section” into a separate folder. Note how “subfolders” are utilized, you can have multiple levels of folders To begin creating (or editing a previously created page) your website, double click here (or on page you wish to edit)

7. File Components of Website • Web Pages are .htm or .html extensions. Remember all websites are written in HTML (hypertext mark-up language). FrontPage is a program that allows user to work in a WYSIWYG (what you see is what you get) environment, making it fairly easy for user to work. • Images - they can come in many different types, these are the three basics • JPG - this is the most compressed version, has a couple of million colors • GIF - limited to 252 colors, it is used to create buttons or simple images for site • BMP - bit map - takes up a lot of memory, can create images in Paint (this program is found in accessories). Image can be converted into a GIF file when opened in Image Composer (this is part of FrontPage program) • For example, if you have a page with 3 pictures and 7 GIFs, this means there are 11 files for this one page. Keep all information that is specific for this page in one folder. If you have pictures/GIFs that are “shared” between pages, keep them in an “images” folder.

8. Front Page Editor Begin typing as if in a word processing program. There are symbols located in this bar which allow you to create fonts, enlarge, change justification, add numbers, bullets, indent. For editing purposes, this allows you to see the “paragraph” marks and returns.

9. Design Tips • Use a sans serif font (like what is shown here) to work with, it shows better on monitor. • Keep images small (in memory and size) so that they don’t clutter or overpower the site. It also allows for quicker downloads. • Multiple fonts can be used, etc. However, try not to make site look like a ransom note! Remember, less is more! • Tables can simplify your life. This is just “trial and error” - some information is indicated on next page. • Try not to underline the text on your site, people will think they are links when they aren’t and could become frustrated. • Test (which means all links) your site before publishing. There is nothing worse than having links that go to incorrect pages, worse yet to no place at all, resulting in an “error” message!

10. Tables You can either “draw” or insert a table. Insert table allows you to set up # of rows/columns, alignment, and border size, padding, and spacing. By having zeroes (as shown here), the table will not show up when previewed in browser)

11. Table Properties By right clicking in the table you can see the “table” properties wherein defaults can be changed for column width, colors applied to borders, etc. Below is indicated how “properties” were changed and result is shown on next page (sorry for black & white image!)

12. Sample View of Tables As you can see, there are lines in here now and column width has changed. There are three different views in FrontPage - we usually work in Normal, HTML shows the code, Preview shows how it looks in browser

13. Preview Tab See how no gridlines show in this section. Table gridlines appear here The preview tab shows you what site will look like up on the WWW - in Netscape or Explorer. You can also click on File, Preview to see how it will look.

14. Toolbars Clicking on View allows you to see different toolbars to work with your website.

15. Saving a New Page (or “save as”) A currently existing page can be made into a new page by using “save as”. This screen also shows up when saving a new page. Make sure you put it in the correct folder Again, give the page a title and a distinct name. You can also create a “template” - that is a blank form that can be filled in each time so that you don’t have to recreate or re-input information

16. Creating a Link from Text • You can create links to any location within your site or even to another website. As mentioned, we want to keep the visitors on our site and not have them go shopping at Amazon or looking at the scores for the latest football game! A link can go from text or from an image. • From Text - 1. first select the text and highlight it. 2. Click on Insert, Hyperlink (or press CTRL-K). “Open pages” are indicated at the top, just double click on it to select where the link will go to. If you click once, click the OK button. The result on your page will show text in a default bright blue text with an underscore. This means there is a link.

17. Creating a link - from an image • Once the image is in the document, you can link in two different ways. • You can select the image (when it is selected, there will be little boxes in the corner and follow procedures indicated on previous page). This will result in a blue border showing up. (personally I find it ugly) • You can create a “hot spot”. Click on the box (or oval) on the toolbar and draw it over the entire image. After the hot spot is created, it will prompt you where you want the link to go to. Creates “hot” spot After shape is drawn, the dialogue box appears

18. Image Composer A “gif” - this is a little button on a website that has a “hot” spot applied to it so it will link to another page. Double clicking on one of these in FP editor allows you to create a new image. Only one image can be worked on at a time. This program allows you to create GIFs. By clicking on the shape box here, you can create your own image. Again, a lot of this program is just “trial and error” i.e. experimentation. When saving the file, make sure it goes into the correct folder!

19. Allows you to create “text boxes” - note, you can only do one line at a time and hit the space bar at end (otherwise it “truncates” Creates special effects! To create a new shape, click here Selects the color for your box, click on “create” when done Working with Image Composer Clicking on here will give you this tool so you can create a shape. This image has 4 components - the background box, the box behind home page, the text box, and the oval shape

20. Saving File Make sure you have selected the correct folder! Give it a filename you will remember. When there are “multiple” components (as the previous page shows), you will get this prompt. Click “ok”

21. Insertion of Image “GIF” has now been inserted on site. A hot spot can be created and put in here so that this page can link back to homepage! Note: it is necessary to “refresh” FrontPage Explorer as it will not show the images you have just saved. To refresh, either click on View, Refresh or press F5 key. If there are a lot of images and you wish to remain organized, you may consider a separate folder for separate categories of images, i.e. photos, navigation buttons, etc.

22. Creating New Pages There are many different types of forms you can create. Select from your choice here!

23. Feedback Forms Comments are included in here and you can change this form to suit your requirements. Right click inside the form section to set properties as to where it will be sent (your email address)

24. Other Components of Feedback Form Time limitations in this course prevent discussion of all this information. A very brief summary is indicated below This allows you to save information up on your WWW site in addition to receiving emails. A good way to have “backup” You can have a “confirmation” page if someone responds to site. A good customer service tool. Allows you to only include certain fields or specific data from the responder.

25. Publishing the Site 1. Save all documents in front page editor and close out 2. Make sure you have dialed up to the ISP 3. Click on “primary” folder (otherwise only part of site may publish) 4. Click on File, Publish 5. If you only have one site, it will only show one location, however, if you have multiple sites, make sure you choose correct location. Choose box indicated for publish changed pages only. 6. You will be prompted to provide ID and password. There may be prompts to ask if you want to replace pages, say “yes” or “yes to all”

26. Photos - JPGs • It is best to keep the photos as small files - less than 25K if possible. The goal is to get the page to download in 30 seconds or less. Also, 6 or less photos per page is a good guideline. • If you’re using thumbnails and click through to “larger” photos of higher quality, you can use two versions, a low-resolution, low DPI (low memory) thumbnail and a larger file with higher resolution and DPI. • There are many programs out there to edit and touch up photos. Adobe Photoshop is probably the most powerful program available. It is expensive and complicated. Corel has a very simple package, Adobe also has a simpler, less frills version. There are also some very simple packages available for less than $50. In fact, some programs are included with a scanner. • To obtain “digital” images, there are three ways: 1) digital camera (Sony Mavica has low resolution but uses a floppy disk and is very easy to use; 2) scanner (good to have, costs are very reasonable now); 3) having photos developed and returned on disk - Kodak, Mystic, practically all processors now.

27. Corel Photo House This program is relatively simple to use and quite straightforward. Some quick tips to get photos down to under 25K: 1. Crop picture 2. Reduce DPI to 75 - works in most cases (remember this is for the www, not a fancy brochure 3. Reduce size of photo to a “manageable” size - 2” wide is usually sufficient. 4. When saving, “reduce” quality There are other choices here so that you can change appearance, improve contrast or brightness. Click on tabs going down or on side.

28. Final Notes • A provider that I’ve worked with is pick.net. They’re reasonably small so I’ve gotten some very good customer service from them. However, if you have a problem, don’t blame the messenger! (I don’t get any commissions from them.) Their website is www.pick.net. They will register your domain name as well as provide you with IDs and passwords fairly quickly. Customer service is fairly quick (usually within two hours they will reply with an email). • If you’re working with FrontPage, make sure you choose the right package! Prices are about $20/month for a site, with discounts for one year pre-paid. • Domain name registration is about $79 for two years. • Any further questions - email me! I’ll be happy to answer an occasional question (or two) but please remember that I make my living by creating/designing websites and am not a “help desk.” I can provide one-on-one training as well as consultation if needed (for a fee, of course). With practice, you can learn much of this on your own. Alan Weaver

29. FrontPage 98 vs. 2000 FrontPage 98 is no longer available (you may be able to find it on a shelf at a store or as older stock mail order). It has been replaced by 2000. Any of the skills you use in 98 can be used in 2000. There are some minor differences between the two packages. These differences include: • Only one window – editor and explorer are now combined. It makes things a bit easier in not having to go back and forth between windows but it also means the workspace is now a bit smaller. • Click and drag capabilities – you can now click on a jpg or gif image in the explorer and drag it over into the editor. • Ability to have more than one website open at a time. (if you’re disorganized, it can make life miserable for you but it allows you to look at different sites at the same time) • More features with photos – you can make them transparent, bevel them, make them black and white, as well as “overlap” them. • If a word is misspelled, it will put a red underline underneath typo (as Word does). Other similarities to word include the “paintbrush” wherein formatting (font, color, boldface, etc.) can be applied.