FrontPage 2003

1. FrontPage 2003 taught by: Alan B. Weaver email: info@big-pic.net

2. FrontPage 2003 When you open the program, this is the initial screen. You have a blank page (named new_page_1.htm) where you can work on one page or on a website. 2003 is quite similar to 2002. Web enabled, click on any of these items to begin a task. To start a new web, click on Create a new page or site…

3. Creating a Web Click on the One page web site to create your site. There are “wizards or templates” that can be used - remember these are not original designs. 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 or in My Web). Make sure you select one page Web site. Type in the address for the website in the indicated box. A prompt will appear on the screen showing that the website is being created.

4. The first view of your website 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. Note: default.htm can also be the home page. The folder list is the initial view. FrontPage creates the images and private folders. To open up the index page, double click on the file name, either in the left or right column.

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

6. Folders - Organizing the Site It is very important to stay organized. What starts out as a five page site can easily turn into a site with over 100 files in it. You need to know where things are located. It is a good idea to use folders to organize your web pages. Multiple levels of folders can be used. To create folders, click on the icon shown. To begin creating (or editing a previously created page) your website, double click on the file name (or on page you wish to edit). This function is very similar to Windows Explorer.

7. Folders - Organizing the Site The example at the left shows how the folders are organized, with folders within folders. If you are doing a site which is graphically oriented, it is recommended that you have subfolders for the image files and another one for the text files. Files and folders need to be distinctively named. It is not recommended that spaces be used in folder or file names. Older browsers cannot recognize these web pages and will get errors. Use an underscore (_) to separate two words. Also, do not use capital letters as they may cause problems in some browsers.

8. 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. You may wish to keep all information relevant to this page or topic in one folder. Images that are shared by many web pages should be kept in an “images” folder.

9. Front Page Editor Close out the task pane to give yourself more work area. For editing purposes, this allows you to see the “paragraph” marks and returns. Note: to return to the next line and take up less vertical space, create a “soft return” (hold the SHIFT + ENTER key together. Begin typing as if in a word processing program. There are symbols located in the formatting toolbar which allow you to create fonts, enlarge, change justification, add numbers, bullets, indent. Note: Explorer and Editor are in one window. The toolbars (or windows) on the left can be narrowed down by clicking on the vertical pipes.

10. 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!

11. 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. If the border size is 0, the table structure (lines) will not appear in the browser.

12. 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. It is recommended for professional design appearances that the table be conservatively executed. Otherwise, the website has a cartoon-like or undesirable amateurish effect. Cell padding and spacing give “breathing” room to text in a table so that text in adjacent columns don’t touch.

13. Sample View of Tables Normal ViewAs you can see, there are lines in the table at top. The lower one has no lines but a dotted line appears. Alignment, fonts, colored background to separate cells or backgrounds can be applied to the table. There are four different views in FrontPage – website is created in Design. Split shows the design at top and the HTML code at bottom. Code shows the HTML in the document. Preview shows how it looks in browser

14. Preview Tab PreviewGridlines appear in the table at top, but not in the bottom. The preview tab shows you what site will look like up on the WWW. You can also click on File, Preview to review. Note that each browser views a website differently. Netscape, Mozilla, and IE convert the code in different ways.

15. Code The Code view shows the HTML section of the website. You may need to use this section on occasion to add special coding to the website that cannot be done in FrontPage. New feature in 2003: rows all have line numbers.

16. Split While editing a webpage, you can directly see where you are working in the code section. New feature in 2003: showing the two on one screen. The tabs for design and code have been renamed from the earlier versions but are still the same.

17. Tables inside tables • Tables can be layered inside each other. This method allows you to position text, images, links more accurately. • When putting a table inside a table, insert the table from the menu. Drawing a table inside another table may cause problems. An example of multiple tables is shown at right. Lines remain in this table to show positioning, etc.

18. Toolbars Clicking on View, Toolbars allows you to see different toolbars to work with your website. DHTML allows the user to either swap a picture or to allow the text to change color when mouse is over the text. Pictures works with images so that hyperlinks can be inserted, image cropped/recolored, etc. Drawing and WordArt toolbars are similar to Word/PowerPoint. They may not view correctly in older versions of some browsers.

19. Saving a New Page (or “save as”) A current file may be saved as a new file by using “save as”. This screen also shows up when saving a new page. Make sure you put it in the correct folder Give the page a title and a distinct file name. As this page exists, you can change the title. The title is what appears in the menu bar when on the web. 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. This can be a major time saver. However, make sure you set up the template correctly and carefully test if there are links in it.

20. Links (aka Hyperlinks) • 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. • From an image – see page 22.

21. Creating links (bookmarks) in a web page • Sometimes you may wish to insert links on a lengthy page wherein the reader can go to different sections or chapters on it. • To do this, you need to create a “Bookmark.” There are two methods: • Click before the text or image you wish to put the bookmark. Click on Insert, Bookmark. Type in the name of what you wish to call it. • Select or highlight the text where you wish to put the bookmark. Either click on Insert, Bookmark or use the keyboard shortcut CTRL + G. You will get the name automatically this way. • To insert a link to a bookmarked section, highlight the text (or select the image) the viewer is to click on. Click on Insert, Hyperlink, and click on the “Bookmark” notation in the upper right corner.

22. Creating a link on an image • Once the image is in the document, create the link as follows: • Right click on the image and left click on Hyperlink. This will take you to the hyperlink dialog box (previous page) • Or, click on the image and click on Insert Hyperlink • Or, click on the image and press CTRL + K

23. Creates “hot” spot After shape is drawn, the insert hyperlink dialogue box appears. Click on page that you wish to link to. Creating a link on an image with a hotspot • Once the image is in the document, create the hotspot as follows • Click on the image you should get the picture toolbar. • Click on the rectangle, circle, or polygon shape to draw the “hot spot”. After the hot spot is created, it will prompt you where you want to insert the link. • This allows you have multiple links on an image, this can work with a map or a large image where you wish the viewer to make several choices to link to.

24. Sometimes an open file is also displayed in the lower section…this often is the better choice to place link. Open files are at the top of this section. Links – troubleshooting Sometimes the links may not work properly. You could have any of these below problems: • Website not found: this means you are linking to a non-existent web page. • Make sure you are linking to an existing web page (.htm) and not a folder. • Web pages are found on your computer, but not others. It means you are linking to files on the hard drive and not the world wide web. Redo the hyperlinks. Sometimes when you click on an open file the link may not work; close the file out or click in the lower section so that link works correctly.

25. Inserting an Image As the internet is graphically oriented, you may wish to have images on your website. There are two different ways to insert the image. 1. You can click on the file and drag it into the page you wish to insert it. 2. Or, click on Insert, Picture, From File. Note: it is necessary to “refresh” FrontPage Explorer as it does not always show the images 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.

26. Importing File When you create a website, the files involved, from forms to pages, to graphics need to be within the main folder of the website. However, you don’t need to recreate existing documents. Copies of the files can be inserted by using the Import feature. Before you import, click on the folder you wish to import files to first. Follow the below steps. 1. Click on File, Import. Dialog box at left appears. You have three choices: to add a file (any existing file you have), an entire folder, or from a website. 2. A folder is displayed where you can make selections. Hold down the Control key while selecting to make multiple selections. The two files in blue have been selected. Click on the Open button 1 2

27. 5 Importing File 3. If all your file selections to import are made, click on the OK Button. This will import the files to the appropriate folder you had selected. 4. If you have additional files to import from other folders, click on the Add File button again to make further selections. There is no limit to the number of files you can import. 5. Files will appear in the explorer pane. 4 3 Important Note: When files are imported into a website, they will show up in the Folder List. However, if you are creating files in any other program they may not show up. To see them, click on View, Refresh, or press the F5 key. Files will then appear. Alternate Method: Copy the file(s) from explorer and paste them in the appropriate FrontPage folder.

28. Creating New Pages If the window appearing at right doesn’t appear on your screen, click on File, New Page. (or click on the icon under File.) If you want a new blank page, click on Blank Page Often, we may wish to duplicate a page – we can do that by choosing New from existing page. This way the formatting, information, etc. from that page can be used without having to recreate it. This can be done by utilizing File, Save As. Last, but not least, there are some templates which are very useful to work with, response forms, etc.

29. Creating New Pages from Templates Click on More page templates…to get the window as shown at left. Click on the desired page to open it as a blank page which can be filled in.

30. Forms • They can be created from a template or manually. Either way works well. • A form requires considerable planning – you need to know what information needs to be captured. It is often best to have information in specific fields, such as first and last names, city, state, zip separate fields. • You can make fields required to be filled in (won’t transmit if form is not complete) by going to properties. This is good if you are doing e-commerce or need to capture specific information. Try to make the document user friendly by not making it difficult to fill out. You may wish to boldface or change the color for required fields and have instructions at the top or bottom of the form. • Testing of the form is critical as you want to make sure that the form works correctly and that the data received is understandable. Have someone who is not familiar with the website do the testing. • Information transmitted through these pages is not secure. By using a secure server (website is prefixed by https instead http), private information such as social security numbers, credit cards etc. are encrypted in the transmission process.

31. Feedback Forms Comments are included in here and you can change this form to suit your requirements. (to remove, click on the text and press delete key. After the form is created, right click inside the form section to set properties as to where it will be sent (your email address)

32. Form Page Wizard The template allows you to create a form and shows a very simple form step-by-step. Working with the menus, you can type in the prompt or question that you want to appear as shown in the window at far right.

33. Form Page Wizard There are choices that can be made in the wizard that allow drop-down menu, check boxes, radio buttons, or a list. Drop-down menus allow multiple choices. This would not be a good idea for the credit card list as indicated at far right.

34. Form Page Wizard The final window allows another item to be added to form. Click on finish when complete. Sample form is shown at right.

35. Other Components of Feedback Form Time limitations in this course may prevent discussion of all this information. 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” If there is considerable information being posted, you can put this information into an Access or Excel file. You can have a “confirmation” page if someone responds to site. A good customer service tool. Specify the file name, you can use a template to create one. You can also put in specific fields into the page so that you can merge information such as names, etc. Allows you to specify specific data to be saved. (see first dialog box at left)

36. Types of Fields There are several types of fields you can set up. They are briefly discussed here. You can also create your own custom form by using Insert, Form on the men bar. 1 • Option Button - this allows the user to click on different choices. The selections made will be transmitted in the email to the recipient (demonstrated in class). • Drop Down box – user can make selection by click on list. Multiple selections can be used. This is great for lists such as states, cities, etc. • Text Box (at right) allows data entry of specific information as name, address. • Text area box allows more information to be put in such as comments. (can be resized) • Check box – allows user to check off information. • Push Button – necessary to transmit the information. 2 3 4 3 5 6

37. Confirmation Forms • Confirmation forms allow the viewer to see what they’ve transmitted to the webmaster. This can be on any page with additional commentary, links, images, etc. • First, create a blank page. You may wish to have the names of the fields at the left typed out and the fields displayed at right so the user knows what they filled out. You may wish to use a two-column table to do this. The information will appear as follows: • What appears on the right is the field. It must be named EXACTLY as you named the fields in the previous section. Again, remember, no spaces in these field names. E-mail: [UserEmail] Telephone: [Phone]FAX: [Fax]

38. Confirmation Forms • To merge with the field and display it, click on Insert, Web Component • Click on Advanced Controls and choose confirmation field from the right side. • You will get a prompt (below right) asking for the name of the form field. Make sure it is correctly named. Remember, do not use spaces in these names. • Also, you cannot have two fields with the same name on the form. • Note: to speed up this process, it is best to use the copy and paste technique and to rename each field.

39. Confirmation Forms • Now, the pages need to be linked together. Go to the original form created. Right click in the form section, going to Form Properties and click on the options tab. • Click on Confirmation Page, and browse to find the page that you’ve just created. • When the form is filled out, the user will get a message showing what has been filled out.

40. Publishing the Site 1. Save all documents in front page editor and close out 2. Make sure you are connected to WWW. 3. Click on File, Publish (or icon indicated). For the first time, you will have to indicate the specific website. Type in the ISP # or correct web address. 4. 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.

41. Publishing the Site • You will be prompted to provide ID and password. When updates are done with either revised pages or pages deleted, you will receive prompts asking if you wish to delete the file or not. • If you are a bit forgetful, you may wish to have FrontPage remember your password!

42. Publishing the Site The pane at left shows the current website on your hard drive. The pane at right shows what is on the server. Click on Publish Web site to update the site. Status in lower left shows that the website was successfully published (or updated). You can view the site by clicking on “View your Remote Web site”

43. Photos - JPGs • It is best to keep the photos as small as possible - less than 25K if possible. You can get good results with images of 10K. The goal is to get the page to download in 30 seconds or less. • 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 over $500. Photoshop Elements 4.0 is available in discount stores for less than $100. Not as powerful, it is nonetheless excellent. Some photo editing programs are included with a scanner. • To obtain “digital” images, there are three ways: 1) digital camera (ranging in price from $30 - $1,000+; 2) scanner (good to have, costs are very reasonable now); 3) having photos developed and returned on disk - Kodak, Mystic, Clark, York, your local store (CVS, Walmart, Walgreens)

44. Pictures – creating thumbnails Sometimes a picture can be too large for a website…both in memory (which takes too long to download) as well as in size. FrontPage has this wonderful feature allowing you to create a thumbnail picture (smaller size in memory as well as physically for the website) • Right click in the picture. Left click on the prompt for the Auto Thumbnail. • A smaller image appears on the screen. There is a link on the image which allows the viewer to see a larger image of the page. The link is to the image file, not a web page. • Special notes: • When saving the web page, you will see that a new file for the smaller image is created…it has the word “small” after the original file name. (good idea to stick with this naming convention). See diagram at left. To keep your website files organized, you may wish to change the folder so that it will be stored with the larger sized image. Click on the “Change Folder” to select the correct folder.

45. Pictures – creating thumbnails • Special notes (continued) • Don’t like the size of the thumbnail? You can change the default sizes (width or height) by clicking on Tools, Page Options. Select the tab for Auto Thumbnail and you can have a standard size for all your thumbnails. It will also allow you to remove the bright blue border that may appear on your images. Features such as the beveled edge ARE not recommended.

46. 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.

47. Microsoft Photo Editor This is another basic program that is user friendly. The user can crop, cut, enlarge, and do special effects. It does not have the sophistication of a photo editing program, but is acceptable for simple retouches.

48. Photoshop - Creating a Button • Graphic buttons are a great way to put in some visual pizzazz in a website. These instructions are based on Photoshop 7.0. The instructions herein should work with other versions. If you wish to purchase the program and you are a student, an excellent source is campustech.com. Go to their website and you will find a toll-free # as well as an on-line catalog. • Open Photoshop • Select a background color in the toolbar. • Click on File, New and set defaults as shown at right. As you don’t want the button to betoo large, choose a size that is appropriate (it canbe resized on the web page but it is best toset it up at the proper size when creating it). • If you don’t like the color in it, recolor by changing the foreground color. Click on the paint bucket tool. Click inside the shape and it will be recolored.

49. Photoshop - Creating a Button Note: these screens are from Photoshop 7.0 1. Click in here to choose a new color 2. Click in here to get the paint bucket. If it is not there, click and hold down and make the choice from the drop down menu. 3. Click in the object or layer that you wish to recolor and it will be changed. 4. When creating a text box for the website that you will be using for links, it is best to create the LONGEST one first to make sure they are sized properly. (of course you can put text on several lines such as: Home Page After clicking on the “T”, insert mouse in area and draw a rectangle. Choose font size and style on above menu. Insert the text that you wish in the text box.

50. Photoshop - Adding text to the button Click on the selection that you prefer….it shows different qualities and sizes of files. Give the file a specific file name. Note: the .jpg file will consist of ONLY one layer and cannot be modified. The .psd file CAN be modified. The psd file is 30.5 kb and the .jpg file is 2.05 kb. Try to keep your images as small as possible in memory…if their size is too large, they will take a very long time to download if someone has dial-up. The example shown above consists of two layers, the text and the green background. When a Photoshop document is saved, it has .PSD extension which is useless for a website. You may wish to keep the original files (which are memory hogs) so that you can edit. (click on File, Save to do this) However, to make them work on the website, they need to be saved as .JPG files. To create a .JPG file for the Internet, click on File, Save for Web