Creating a Web Page with Microsoft Front Page Express Exercise 1

Transcription

1 Creating a Web Page with Microsoft Front Page Express Exercise 1 Today you are going to build your first Web page. Normally, Web pages are written in a language called Hypertext Markup Language (HTML). Writing a Web page in HTML is not the easiest process. Fortunately, Microsoft FrontPage Express is a program will produce a decent Web page without you having to know HTML. Front Page Express is a part of Internet Explorer (which is part of Windows 98). If you have Internet Explorer, but don t have Front Page Express, you can download it from or install it from your Windows 98 CD. The great thing about Front Page Express is that it is a WYSIWYG (pronounced wizzy-wig) type of program. This acronym stands for What You See Is What You Get. Making a Web page is like using Microsoft Word. The Web page in a Web browser will look similar to the Front Page Express window. There are many other WYSIWYG programs the best known is Microsoft Front Page, the full version of Front Page Express. As you compose the page, the program writes the HTML for you. Later, if you wish, you can tinker with the HTML code directly. The Web is a great place to inform. You have knowledge that you may want to share with your friends, family, teachers, community, or the world. Many pages on the Web are designed to inform and educate. NASA, The White House, the LA Zoo, and CNN, all have Web pages to keep us informed and educated. Information and knowledge is the basis of today s world. The Web is a fantastic place to learn and share your knowledge, or even just to have fun. You just need to know how to build the page. Follow these directions, to make a practice Web page with FrontPage Express: Create a Folder Unlike most other documents, Web pages are composed of separate files that are linked together. Each picture, sound, video, or text you see on a Web page is a separately made file. Therefore, all the pieces that make up a Web page should be stored in their own folder. It helps keep things organized. Create a folder in which you will save all of the files related to this Web page (text, pictures, and music). 1. From the Desktop, double-click the Period _ folder to open it. 2. Click File on the Menu bar, point to New, and select Folder. 3. A new unnamed folder will appear in your period folder. 4. The folder s name is highlighted. 5. Type Web Pages. 6. Click a blank spot in the folder. 7. Always save everything going on the Web page to this folder. Starting FrontPage Express 8. Click the FrontPage Express shortcut on the Desktop. 9. The Front Page Express window opens. Creating Web Pages With Front Page Express Page 1

2 Setting-up the Document Color makes a Web page inviting to read. Front Page Express allows you to select Web page colors easily. The colors you choose should have good contrast and make the page more readable. Some colors you can select include: Background color or image Text color Hyperlink colors 10. Click Format on the Menu bar, and select Background. 11. Select Black for the Background Color. 12. This page is about space, so black is appropriate. 13. Select White for the Text Color. 14. White contrasts with black, so the text will be very readable. 15. Select Yellow for the Hyperlink color. 16. The hyperlinks will jump to other Web files around the world. 17. Select Silver for the Visited Hyperlink color. 18. The hyperlink changes color to tell you that the link has been visited. 19. Keep the Active Hyperlink Red. 20. The hyperlink turns red when you press the mouse button on it. Giving the Web Page a Title 21. Click the General tab. 22. In the Title text box, type Apollo The title will appear in the Title Bar of your Web page. 24. Later, you can add a Background Sound. 25. Click OK. Creating Web Pages With Front Page Express Page 2

3 Saving the Web Page Before you save your document, you should know the rules. HTML documents cannot have spaces between words, and should not have upper case filenames. If you want to separate a file name, use an underscore. For example: my_web_page.html. 26. Click on the Save button on the toolbar. 27. The Save As dialog box opens. 28. Click the As File button. 29. Click the drop-down arrow to the right of the Save in text box and select Desktop. 30. Double-click the Period _ folder to open it. 31. Double-click the Web Pages folder to open it. 32. In the File name text box type apollo11.html. 33. Notice that Front Page Express is saving this document in as an HTML document. 34. Click Save or press Enter. Creating a Table for Your Heading Most Web pages contain tables. Tables are a neat way to organize your information. A table is a grid of columns and rows. The intersection of a column and a row creates a cell. Borders separate row and columns. Cell spacing separates cells from each other. The text in a cell is separated from the borders by cell padding. All measurements are in pixels or percents. 35. Click Table on the Standard toolbar and select Insert Table. 36. The Insert Table dialog box opens. 37. For Rows, select For Columns, select For Alignment, select Center. 40. Border Size is the thickness of the border. 41. For Border Size, select Cell Padding is the space between the cell wall and the cell contents. 43. For Cell Padding, select Cell Spacing is the space between cells. 45. For Cell Spacing, select Do not check Specify Width. 47. Click OK. Creating Web Pages With Front Page Express Page 3

4 Typing the Body of the Web Page 48. Press Ctrl+End to move the insertion point to the end of the document. 49. Press Enter to move the insertion point down one more line. 50. Type the text in Figure Press Enter once at the end of the first paragraph. 52. This program uses Wordwrap. 53. Do not press Enter at the end of each sentence. Figure 1 On July 15, 1969, America's spacecraft Apollo 11, landed on the moon. Astronaut Neil A. Armstrong was the first person to step on the moon's surface. Until this time, only unmanned spacecraft had journeyed to the moon. Photographs from these unmanned flights helped scientists plan the exact spot where Apollo 11 should land. There were several later Apollo missions to the moon. Apollo 15 astronauts even rode on the moon in a special car called a lunar rover! All lunar astronauts gathered samples and information for future study of the moon. Inserting a Horizontal Rule A rule is a line that separates the parts of a Web page. It helps to organize your Web page and helps make your page more readable. 54. Press Ctrl+End to move the insertion point to the end of the document. 55. Press Enter once. 56. Click Insert on the Menu bar and select Horizontal Line. 57. Press Enter. Adding Your Personal Information The bottom of a Web page contains important information about the page 58. Type Last revised and press the Spacebar Inserting a Timestamp and Copyright A timestamp will automatically insert the date every time you revise the Web page. The revision date tells the reader how recently was the Web page changed. 59. Click Insert on the Menu bar and select WebBot Component. 60. Select Timestamp. 61. Click OK twice. Creating Web Pages With Front Page Express Page 4

5 62. Press Shift+Enter. 63. This will make the line spacing smaller. 64. Type Copyright 200_, Your Name and Your Name. All rights reserved. 65. Press Shift+Enter. 66. Type us at your address or your address. 67. Press the Spacebar. 68. You just made two hyperlinks. Inserting a Symbol Many special symbols can be inserted into a Web page. 69. Place the insertion point to the left of the number Click Insert on the Menu bar and select Symbol. 71. The Symbol dialog box opens. 72. Click the copyright symbol ª to select it. 73. Click Insert. 74. Press Close. 75. Press Ctrl+S to save your work. Formatting Characters 76. Click inside the center cell of the table. 77. Type the Apollo Click and drag to select the text. 79. Click Format on the Menu bar and select Font. Creating Web Pages With Front Page Express Page 5

6 80. The Font dialog box opens. 81. For Font, select Impact. 82. For Color select Red. 83. For Size, select HTML only allows 7 different font sizes. 85., For Font Style, select Bold. 86. Click OK. Formatting the Body Text 87. Select the two body text paragraphs about Apollo Click Format on the Menu bar and select Font. 89. The Font dialog box opens. 90. For Size, select This will make your text more readable. 92. Click OK. Reviewing the Document Front Page Express does not come with the Show/Hide button or a Spell and Grammar check. That s why it s free! Therefore, look at Figure 2 and check your document carefully. Figure 2: The Web page looks good, but needs a picture. Creating Web Pages With Front Page Express Page 6

7 Viewing the New Web Page in Internet Explorer 93. Click Start, point to Programs, and select Internet Explorer. 94. Click File on the Menu bar and select Open. 95. Click the Browse. 96. Click the drop-down arrow to the right of the Look in box. 97. Double-click your period folder. 98. Double-click the Web Pages folder. 99. Double-click the apollo11 file to open it Another Open dialog box appears Click OK again You are now viewing your document as it will appear on the Web. The Save-Refresh Cycle When you make a change to your document in Front Page Express you must go through the Save- Refresh Cycle to see them in Internet Explorer. First, make any changes to your Web page in Front Page Express. Save your changes. Second, click Internet Explorer on the Taskbar. Click the Refresh button on the Toolbar to reload the Web page and see your new changes. Finding and Saving a Photo on the Web There are many photos on the Web that you can use in your own pages; however, they may not be copyrighted. To find them you need to use a search engine line Yahoo! In the Address bar text box, type Press Enter. The Yahoo Web page opens In the Search text box type the keywords Apollo Click Search You should see that the Yahoo! search engine has found many matches to your keywords Click the link that reads, 109. The photos at this site are not copyrighted, so you can use them on your Web page Scroll down the page and find the photo of the footprint on the moon s surface. Creating Web Pages With Front Page Express Page 7

8 111. This is a thumbnail of a larger photo A thumbnail is small picture that links to a larger version of a picture Click the thumbnail photo The large photo opens Right-click the photo and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type foot Click Save or press Enter Click the Back button on the Toolbar. Bookmarking a Favorite Web Page You will need to come back to this search results page several times to finish your Web page. To save time, you are going to create a link directly to this page Right-click a blank spot on the Results page and select Add to Favorites The Add Favorite dialog box will open with the name of the page your bookmark Click OK A link to the page is now saved in your Favorites folder. Inserting a Photo into a Document 125. Click the Taskbar and return to Front Page Express Move the insertion point to the beginning of the first paragraph of text Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the foot file you saved. Creating Web Pages With Front Page Express Page 8

9 133. The picture is inserted into the document. Formatting a Picture Like Microsoft Word, pictures can be formatted in Front Page Express. The picture of the astronaut s footprint should be on the right side of the text, and there should be some space between the picture and the text Double-click the image of the foot The Image Properties dialog box opens Carefully copy the settings in the picture to the right Click OK You don t see the picture you see a placeholder for the picture Press Ctrl+S to save your work Click the Taskbar and return to Internet Explorer Click the Back button on the Toolbar to return to your Apollo 11 Web page Click the Refresh button on the Toolbar to see the results of your formatting Look at Figure 3. Figure 3: The text wraps around the picture of the footprint. Creating Web Pages With Front Page Express Page 9

10 Downloading an Animated Clipart Image for the Table To place a graphic into your table you need to download one from the Internet, scan an image, or insert an image from a digital camera. There are tons of free clip art on the Internet. Two great locations are and Barry s has a search engine button to help you find things. Remember animated GIF files will move on a Web page Click Internet Explorer on the Taskbar to open the program In the Address bar text box, type You will want to come to this Web page often Right-click a blank spot on the barrysclipart.com page and select Add to Favorites The Add Favorite dialog box will open with the name of the page your bookmark Click OK A link to the page is now saved in your Favorites folder Click the Animations hyperlink Under Categories, click the Astronomy hyperlink Scroll down until you see the moon animation to the right Click the Download hyperlink You will see the image animate Right-click the image of the moon and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type moon Click Save Click the Back button on the Toolbar to return to your Apollo 11 Web page. Inserting an Image into a Table 162. Click the Taskbar and return to Front Page Express Click into the left cell of the table at the top of the page Click Insert on the Menu bar and select Image The Image dialog box opens. Creating Web Pages With Front Page Express Page 10

11 166. Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the moon file you saved The picture is inserted into the table Double-click the image of the moon The Image Properties dialog box opens Copy the settings in the picture to the right Click OK Press Ctrl+C to copy the image Click into the right cell of the table at the top of the page Press Ctrl+V to paste the image Press Ctrl+S to save your work Close Front Page Express. Viewing the HTML Web pages are written in a code called HTML Hypertext Markup Language. FrontPage Express does the coding for you. To see the code, follow these steps: 180. Click View on the Menu bar and select HTML You should see the HTML in the picture to the right Click the OK button You are returned back to the Web page. Printing the Web Page 184. Click the Taskbar and return to Internet Explorer Click the Back button on the Toolbar to return to your Apollo 11 Web page Click the Refresh button on the Toolbar to see the results of your formatting Print 1 copy for each partner to Ireland Ask your teacher to view your Web page. Creating Web Pages With Front Page Express Page 11

12 Exercise 2 Adding Hyperlinks to Your Web Page A hyperlink connects Web pages together. A hyperlink can be text or a graphic image that you select to represent the information you want linked. Browsers usually underline text hyperlinks (hypertext) and display them in a specific color. You chose the hyperlink colors at the beginning of Exercise 1. You made the decision to make a hyperlink yellow, a visited hyperlink silver, and an active hyperlink red. These colors were chosen because the background is black. A regular hyperlink is a Web page has not been downloaded; a visited hyperlink means that the Web page has been downloaded; and an active hyperlink means you are pressing the mouse button on the hyperlink and about to download the Web page it represents. Hyperlinks in graphic images are invisible. However, you can tell when the mouse pointer is over a hyperlink because it changes to a pointing hand. By a simple click of a mouse button, you can move from Web page to Web page through cyberspace. Creating Hyperlinks for the Apollo 11 Web Page Rather than you writing everything there is to know about Apollo 11, you can point your readers to other Web pages they may find interesting to view. First, you need to find all the other Web pages about Apollo 11. Your teacher has already done the research for you. He found pictures and text to link to your Web page by going to Yahoo! and using Apollo 11 as the key words. - Collecting and offering stories from people who witnessed a famous day in the history of Earth: the first moon landing. - A picture of Neil Armstrong. - Photographs of the Apollo 11 mission. - a map of the Apollo landing sites. Your teacher went to Yahoo! and typed moon rocks in the keyword text box to find this site. The quotation marks make Yahoo! look for those exact words. - A Web page about moon rocks collected by the Apollo 11 astronauts. Opening an Existing Web Page 189. Click the FrontPage Express shortcut on the Desktop Click the Open button The Open dialog box opens. Creating Web Pages With Front Page Express Page 12

13 192. Click Browse Click the drop-down arrow next to Look in to select your period folder Double-click the Web Pages folder Double-click apollo11 file to open it The Web page opens in Front Page Express. Creating a Hyperlink to a Web Page 197. Click and drag to select the text July 15, 1969 in the first paragraph Click the Create Hyperlink button toolbar. on the Standard 199. The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select Next to URL, click to move the insertion point after the If anything besides is in the URL text box, press the Clear button Carefully type Click OK. Creating a Second Hyperlink to a Web Page 206. Click and drag to select the text Neil A. Armstrong in the first paragraph Click the Create Hyperlink button toolbar. on the Standard 208. The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select If anything besides is in the URL text box, press the Clear button Next to URL, click to move the insertion point after the Carefully type Remember, you must use uppercase letters sometimes in Web addresses Click OK. Creating Web Pages With Front Page Express Page 13

14 Creating a Third Hyperlink to a Web Page 216. Click and drag to select the text Photographs in the first paragraph Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select If anything besides is in the URL text box, press the Clear button Next to URL, click to move the insertion point after the Carefully type nssdc.gsfc.nasa.gov/planetary/lunar/apollo11.html Click OK Click and drag to select the text exact spot in the first paragraph Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select If anything besides is in the URL text box, press the Clear button Next to URL, click to move the insertion point after the Carefully type Click OK. Creating a Fourth Hyperlink to a Web Page 234. Click and drag to select the text samples in the second paragraph Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select If anything besides is in the URL text box, press the Clear button Next to URL, click to move the insertion point after the Carefully type Creating Web Pages With Front Page Express Page 14

15 242. Click OK. A Challenge: Finding a Photograph Yourself Your challenge is to use Yahoo! or any other search engine to find a photograph of the Apollo 15 lunar rover on the Web and link it to the words lunar rover. Use different key words to conduct your search. Use quotation marks to find exact matches. When you find the Web page that has a picture of the lunar rover do this: 243. Click in the Address bar text box and select the Web page address Click the Front Page Express button on the Taskbar to switch to that program Click and drag to select the text lunar rover in the second paragraph Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select Next to URL, click to move the insertion point after the If anything besides is in the URL text box, press the Clear button Press Ctrl+V to paste the Web address you just copied Be sure that you don t have twice. Checking the Web Page 254. Press the Save button on the Standard toolbar Click the Internet Explorer button on the Taskbar Click File on the Menu bar and select Open Click Browse Click the drop-down arrow to the right of the Look in box Double-click your period folder Double-click the Web Pages folder Double-click the apollo11 file to open it Another Open dialog box appears Click OK again. You are now viewing your document as it will appear on the Web Click every hyperlink to make sure that it links to the correct Web page. This is very important!! Fix any links that do not work properly. You will lose points for links that do not work. Creating Web Pages With Front Page Express Page 15

16 Figure 4: Doesn t this Web page look more interesting with a background picture and heading? Adding Interest to the Web Page Creating a Flashy Heading Your heading is must be flashy to get the attention of people. Here is an easy way to create a flashy heading for your Web page. Flaming Text is a fantastic Web site for people that want to make great looking headings, but do not know how to use a program like Paint Shop Pro Start Internet Explorer In the Address bar text box type Choosing a Heading 267. At the top of the Flaming Text Web page, click the link On the right side of the new Web page are the Heading choices Click Sota Chrome to give your heading a modern, industrial look In the Text String box type Apollo You can change the Font if you wish If you do change the Font, wait a second, and the sample will automatically change Check the box next to Border if you want a chrome border around the text. You can always change your mind if you don t like it Definitely, check the box next to Transparent Making the heading transparent means that you can see the background through the heading text. Creating Web Pages With Front Page Express Page 16

17 276. When you are ready, click the Create Logo button. Downloading and Saving a Heading 277. Click the link that says A new Web page will appear Right-click the heading and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type apollo11_heading Click Save. Adding a Flashy Horizontal Rule Rules keep your Web page organized and easier to read. They divide your information. Instead of using the boring Horizontal Line in Front Page Express, you can download rules from the Web. The rules at Flaming Text are GIF files In Internet Explorer, click the Back button several times to return to the Flaming Text home page Click the link Click the link Six hundred-forty pixels are about the width of most monitors There are six pages of rules Click the page 3 link Click the top rule. You will be taken to another Web page Click the link A new Web page will appear Right-click the rule and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type apollo11_rule Click Save. Inserting Your Heading into Your Web Page 298. Click the Taskbar and return to Front Page Express Click in the middle cell of the table at the top of the page and select the words Apollo 11. Creating Web Pages With Front Page Express Page 17

18 300. Press the Delete key to delete the words Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the apollo11_heading you saved The new heading is inserted into the middle cell of the table. Reformatting Your Table 308. Click in the table at the top of the page Click Table on the Menu bar and select Table Properties Change the Border Size to 0 to turn off the border Click OK. Inserting the Rule into the Web Page 312. Click once to select the Horizontal Rule Press the Delete key to delete the rule Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the apollo11_rule you saved The new rule is inserted into the document. Formatting the Rule 321. Double-click the Horizontal Rule The Image Properties dialog box opens Click the Appearance tab. Creating Web Pages With Front Page Express Page 18

19 324. Under Size, check the box next to Specify Size Under Width, type Select in Percent Click OK This will make the rule stretch 100% across any screen Click the Horizontal Rule once to select it Press the Center button on the Formatting toolbar. Giving Credit to Flaming Text by Creating a Link As a nice way of saying thanks for the service, most Web sites would really appreciate a link back to their site, so that others may enjoy their free service. Most Web sites even provide you with a picture or logo to use as an advertising link In Internet Explorer, go back to Flaming Text s home page About half way down the page click Scroll down the page and right-click one of the animated Gif files Select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type flamingtext Click Save. Inserting Another Animated GIF Image into the Web Page 339. Move the insertion point to the left of the first sentence under the rule Press Enter to move the sentence Last revised down one line Type Heading and rule images provided by Press the Spacebar Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the flaming text image you saved The image is inserted into the document. Creating Web Pages With Front Page Express Page 19

20 350. Select the image your just inserted The eight resizing handles should be showing Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type select Next to URL, click to move the insertion point after the If anything besides is in the URL text box, press the Clear button Carefully type Click OK Press Ctrl+S to save your document Look at Figure 5. Finding and Saving a Background on the Web There are millions of photos on the Web that you can use in your own pages as long as they are not copyrighted. To find them you need to use a search engine line Yahoo!. Your teacher already searched for a certain picture to use as a background Start Internet Explorer In the Address bar text box, type Click the link Scroll down the page until you see the Sky and Stars section There are 10 pages of background images Find a space background you like Click the picture to preview it A new Web page opens Right-click the background photo and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type spacebg Click Save or press Enter. Creating Web Pages With Front Page Express Page 20

21 Changing the Background 376. Click the Front Page Express button on the Taskbar to open the program Click Format on the Menu bar and select Background The Page Properties dialog box opens on the Background tab Check the box next to Background Image Click Browse Look in your Web Pages folder Double-click the spacebg file to make it your background Click OK Press Ctrl+S to save your document Close Front Page Express. Checking the Web Page 386. Click the Internet Explorer button on the Taskbar Click File on the Menu bar and select Open Click Browse Click the drop-down arrow to the right of the Look in box Double-click your period folder Double-click the Web Pages folder Double-click the apollo11 file to open it Another Open dialog box appears Click OK again. You are now viewing your document as it will appear on the Web. Figure 5: Be polite. Always give credit to Web site that supply free stuff for Web pages. Creating Web Pages With Front Page Express Page 21

22 Uploading Your Documents Before you do this section, you must have a Geocities account. Talk to your teacher for details In Internet Explorer, type in the Address bar text box and press Enter Under Advanced Toolbox, click. Upload spacebg.gif Upload apollo11.html Upload flamingtext.gif Upload apollo11_heading.gif Upload apollo11_rule.gif Click the button to copy the files to the Geocities server A new page will open telling you that you have successfully uploaded the files Click the hyperlink Click next to apollo11.html Your Web page will open in another window Click the button to your Web page on the Taskbar. Printing the Web Page 402. Click the Taskbar and return to Internet Explorer Click the Back button on the Toolbar to return to your Apollo 11 Web page Click the Refresh button on the Toolbar to see the results of your formatting Print 1 copy for each partner to Ireland Ask your teacher to view your Web page. Creating Web Pages With Front Page Express Page 22

23 Exercise 3 Creating A Gallery Of Photos If you have a number of pictures to place on a Web page, you should place them in a table. A table acts like a cage keeping the pictures evenly spaced. You can add text to the cell that contains the picture or have the text in a cell next to the picture. The borders can be visible or invisible. It is usually best to put thumbnail hyperlinks of the pictures into the table, and if the reader is interested in having a better look, they can click the hyperlink and see the full size version. Creating the Web Page 407. Click the FrontPage Express shortcut on the Desktop The Front Page Express window opens. Setting-up the Document 409. Click Format on the Menu bar, and select Background Click the General tab In the Title text box, type Our Photo Gallery The title will appear in the Title Bar of your Web page Later, you can add a Background Sound Click OK. Saving the Web Page 415. Click on the Save button on the toolbar The Save As dialog box opens Click the As File button Click the drop-down arrow to the right of the Save in text box and select Desktop Double-click the Period _ folder to open it Double-click the Web Pages folder to open it In the File name text box type gallery.html Notice that Front Page Express is saving this document in as an HTML document Click Save or press Enter. Adding the Text 424. Type Our Photo Gallery Press Enter twice. Creating Web Pages With Front Page Express Page 23

24 426. Type These pictures were edited using Paint Shop Pro 6.02 during 200_. Click on a link to see the full-size image Press Enter twice. Formatting the Text 428. Click and drag to select the title Click Format on the Menu bar and select Font The Font dialog box opens Copy the settings in the picture to the right Click OK Click the Center button on the Formatting toolbar Click and drag to select the line of text under the title Click Format on the Menu bar and select Font The Font dialog box opens Change the Size to 14 pts Click OK Click the Center button on the Formatting toolbar Look at Figure 6. Figure 6 Creating a Table for Your Gallery 441. Press Ctrl+End Click Table on the Standard toolbar and select Insert Table The Insert Table dialog box opens For Rows, select For Columns, select 2. Creating Web Pages With Front Page Express Page 24

25 446. For Alignment, select Center For Border Size, select Cell Padding is the space between the cell wall and the cell contents For Cell Padding, select Cell Spacing is the space between cells For Cell Spacing, select Do not check Specify Width Click OK The insertion point is in the table. Inserting a Horizontal Rule A rule is a line that separates the parts of a Web page. It helps to organize your Web page and helps make your page more readable Press Ctrl+End Press Enter Click Insert on the Menu bar and select Horizontal Line Press Enter. Adding Your Personal Information The bottom of a Web page contains important information about the page 459. Type Heading and rule images provided by and press the Spacebar Press Shift+Enter Type Last revised and press the Spacebar. Inserting a Timestamp and Copyright A timestamp will automatically insert the date every time you revise the Web page. The revision date tells the reader how recently was the Web page changed Click Insert on the Menu bar and select WebBot Component Select Timestamp Click OK twice Press Shift+Enter. This will make the line spacing smaller Type Copyright 200_, Your Name and Your Name. All rights reserved. Creating Web Pages With Front Page Express Page 25

26 467. Press Shift+Enter Type us at your e- mail address or your address Press the Spacebar You just made two hyperlinks. Inserting a Symbol Many special symbols can be inserted into a Web page Place the insertion point to the left of the number 200_ Click Insert on the Menu bar and select Symbol The Symbol dialog box opens Click the copyright symbol ª to select it Click Insert Press Close Press Ctrl+S to save your work. Reviewing Your Document Front Page Express does not come with the Show/Hide button or a Spell and Grammar check. That s why it s free! Therefore, look at Figure 6 and check your document carefully. Creating Web Pages With Front Page Express Page 26

27 Figure 6 Finding Pictures with a Search Engine This photo gallery can be about anything cars, heroes, flowers, classmates, etc You can even use pictures that you made yourself with Paint Shop Pro. You need to find four large pictures that you like and paste them into Paint Shop Pro. Saving a Picture in the Web Page Folder Only two kinds of pictures can be seen on the World Wide Web JPEGs which are usually photos, and GIFs, which are usually drawings Start Paint Shop Pro Paste your first picture from the Web into Paint Shop Pro (You can also open a photo from the Class Photos folder in Students 200_, or open a picture that you have created Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type photo For Save as type click the dropdown arrow and select JPEG Click Save or press Enter. Creating Web Pages With Front Page Express Page 27

28 Creating Thumbnails Thumbnails are small versions of larger pictures. Large pictures sometimes download slowly. Therefore, it is more polite to your readers if you create thumbnails and let the reader decide if they want to download the larger picture Press Shift+S The Resize image dialog box opens Under Pixel Size, change the Width to The Height will automatically change Click OK Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type phototmb1 (for thumbnail) For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Close photo1tmb, but do not close Paint Shop Pro. Creating Photo Paste or open another photo into Paint Shop Pro Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type photo For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Press Shift+S The Resize image dialog box opens Under Pixel Size, change the Width to The Height will automatically change Click OK Click F12. Creating Web Pages With Front Page Express Page 28

29 512. The Save As dialog box opens Save in your Web Pages folder In the File name text box type phototmb2(for thumbnail) For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Close photo2tmb, but do not close Paint Shop Pro. Creating Photo Paste or open another photo into Paint Shop Pro Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type photo For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Press Shift+S The Resize image dialog box opens Under Pixel Size, change the Width to The Height will automatically change Click OK Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type phototmb3(for thumbnail) For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Close photo3tmb, but do not close Paint Shop Pro. Creating Photo Paste or open another photo into Paint Shop Pro Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type photo For Save as type click the drop-down arrow and select JPEG. Creating Web Pages With Front Page Express Page 29

30 543. Click Save or press Enter Press Shift+S The Resize image dialog box opens Under Pixel Size, change the Width to The Height will automatically change Click OK Click F The Save As dialog box opens Save in your Web Pages folder In the File name text box type phototmb4(for thumbnail) For Save as type click the drop-down arrow and select JPEG Click Save or press Enter Close Paint Shop Pro. Inserting the Thumbnail Images into the Web Gallery Table 556. The Front Page Express window should be open Click in the top left cell of the table Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the phototmb1.jpg image you saved The image is inserted into the document Double-click the picture in the cell The Image Properties dialog box opens Click the General tab Carefully copy the settings in the picture to the right The Image Source is the thumbnail. Creating Web Pages With Front Page Express Page 30

31 570. The Text is the screen tip that will appear when you put your mouse pointer over the picture The Default Hyperlink is the file that the thumbnail will open when it is clicked Click OK Click in the top right cell of t he table Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the phototmb2.jpg image you saved The image is inserted into the document Double-click the image placeholder in the cell The Image Properties dialog box opens Click the General tab Carefully copy the settings in the picture to the right The Image Source is the thumbnail The Text is the screen tip that will appear when you put your mouse pointer over the picture The Default Hyperlink is the file that the thumbnail will open when it is clicked Click OK Click in the bottom left cell of the table Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the phototmb3.jpg image you saved The image is inserted into the document. Creating Web Pages With Front Page Express Page 31

32 597. Double-click the image in the cell The Image Properties dialog box opens Click the General tab Carefully copy the settings in the picture to the right Click OK Click in the bottom right cell of the table Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the phototmb4.jpgimage you saved The image is inserted into the document Double-click the image in the cell. The Image Properties dialog box opens Click the General tab Carefully copy the settings in the picture to the right Click OK Press Ctrl+S to save your document. Viewing the New Web Page in Internet Explorer 615. Click Start, point to Programs, and select Internet Explorer Click File on the Menu bar and select Open Click Browse Click the drop-down arrow to the right of the Look in box Double-click your period folder Double-click the Web Pages folder Double-click the gallery file to open it Another Open dialog box appears Click OK again You are now viewing the document as it will appear on the Web. Creating Web Pages With Front Page Express Page 32

33 Figure Click the thumbnail hyperlinks Your full-size pictures should open up Click the Back button on the Toolbar to return to the gallery Web page. Changing the Background Color and Setting Text Colors 628. Click the Front Page Express button on the Taskbar to open the program Click Format on the Menu bar and select Background The Page Properties dialog box opens on the Background tab For Background, click the drop-down arrow and select Custom The Color dialog box opens. Creating Web Pages With Front Page Express Page 33

34 633. Move the crosshair and slider around until you get the exact color that you like Look at the Red, Green, and Blue numbers Write them down on a piece of scratch paper Click OK Select Text, Hyperlink, Visited Hyperlink, and Active Hyperlink colors These colors must contrast well with the background color so that you can see them Press Ctrl+S to save your document. Move this crosshair Move this slider Choosing a Heading 640. Click on the Menu bar and select the Flaming Text shortcut The Flaming Text Web page will open At the top of the Flaming Text Web page, click the link On the right side of the new Web page are the Heading choices Select any heading you would like In the Text String box type Our Photo Gallery You can change the Font if you wish If you do change the Font, wait a second, and the sample will automatically change Check the box next to Border if you want a border around the text. You can always change your mind if you don t like it Change the Background Color to the Red, Green, and Blue colors you wrote down Now the background of the heading will match the background of the Web page When you are ready, click the Create Logo button Look at the heading above Notice your teacher chose a light gray background to match the Web page. Creating Web Pages With Front Page Express Page 34

35 Downloading and Saving a Heading 654. Click the link that says A new Web page will appear Right-click the heading and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type gallery_heading Click Save or press Enter. Adding a Flashy Horizontal Rule Rules keep your Web page organized and easier to read. They divide your information. Instead of using the boring Horizontal Line in Front Page Express, you can download rules from the Web. The rules at Flaming Text are GIF files In Internet Explorer, click the Back button several times to return to the Flaming Text home page Click the link Click the link Six hundred-forty pixels are about the width of most monitors There are six pages of rules Click any of the page links Click any rule that goes well with your heading. You will be taken to another Web page Click the link A new Web page will appear Right-click the rule and select Save Picture As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type gallery_rule Click Save or press Enter. Inserting Your Heading into the Web Page 675. Click the Taskbar and return to Front Page Express Click and drag to select the title text Our Photo Gallery Press the Delete key to delete the words. Creating Web Pages With Front Page Express Page 35

36 678. Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the gallery_heading you saved The new heading is inserted at the top of the page. Inserting Your Rule into the Web Page 685. Click once to select the Horizontal Rule Press the Delete key to delete the rule Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the gallery_rule you saved The new rule is inserted into the document. Formatting Your Rule 694. Double-click the Horizontal Rule The Image Properties dialog box opens Click the Appearance tab Under Size, check the box next to Specify Size Under Width, type Select in Percent This will make the rule stretch 100% across any screen Click the Horizontal Rule once to select it Press the Center button on the Formatting toolbar Press Ctrl+S to save your document. Inserting Another Animated GIF Image into the Web Page 704. Move the insertion point to the right of the first sentence under the rule. Creating Web Pages With Front Page Express Page 36

37 705. Press the Spacebar Click Insert on the Menu bar and select Image The Image dialog box opens Click the Other Location tab Click Browse Look in your Web Pages folder Double-click the flaming text image you saved The image is inserted into the document Select the image your just inserted The eight resizing handles should be showing Click the Create Hyperlink button on the Standard toolbar The Hyperlink dialog box opens Click the World Wide Web tab Next to Hyperlink Type, select Next to URL, click to move the insertion point after the If anything besides is in the URL text box, press the Clear button 721. Carefully type Click OK Press Ctrl+S to save your document.. Figure 8 Creating Web Pages With Front Page Express Page 37

38 Adding Music to the Web Page It is possible to have music playing in the background of a Web page. However, the music file cannot be large or it will take a long time to download. Here s how to search for a midi file a small music file that s perfect for Web pages Click the Internet Explorer button on the Taskbar Type The search engine will open In the Search text box type Rock (or the type of music you like) Press the Spacebar Type +midi Press Enter The search engine will find different Web sites that have free midi files that you can play in the background Enter a Website and find a midi file that you will to hear Click the song hyperlink to hear the music Right-click the music hyperlink and select Save Target As Click the drop-down arrow to the right of the Save in text box and select Period _ Double-click the Web Pages folder to open it In the File name text box type the name of the song Remember, no spaces or capital letters Click Save or press Enter. Inserting a Sound File into a Web Page 739. Click the Front Page Express button on the Taskbar to open the program Click Format on the Menu bar and select Background The Page Properties dialog box opens on the Background tab Click the General tab Look under Background Sound Click Browse Look in your Web Pages folder Double-click the music file to make it your background. Left-click to hear the song. Rightclick to save the song. Creating Web Pages With Front Page Express Page 38

39 747. Check Forever, if you want the song to repeat indefinitely Click OK Press Ctrl+S to save your document Close Front Page Express. Testing the Web Page 751. Click the Internet Explorer button on the Taskbar Click File on the Menu bar and select Open Click Browse Click the drop-down arrow to the right of the Look in box Double-click your period folder Double-click the Web Pages folder Double-click the gallery file to open it Another Open dialog box appears Click OK again. You are now viewing your document as it will appear on the Web Your Web page should be playing music and your hyperlinks should work. If everything looks good and works it s time to upload. Uploading Your Documents 761. In Internet Explorer, type in the Address bar text box and press Enter Under Advanced Toolbox, click. Upload photo1.jpg Upload photo2.jpg Upload photo3.jpg Upload photo4.jpg Upload phototmb1.jpg Upload phototmb2.jpg Upload phototmb3.jpg Upload phototmb4.jpg Upload gallery_heading.gif or jpg Creating Web Pages With Front Page Express Page 39