Creating a Web Page Using SeaMonkey Composer

Transcription

1 Name: Main: Because the World Wide Web has become such a central aspect of using computers, making web pages is a skill that is becoming both more important and easier. Only a few years ago, it was necessary to type special HTML (hypertext markup language) codes by hand in order to create a web page. Now word processing programs such as Microsoft Word come with features that allow you to add links and save files in HTML format so that they can be viewed on the Internet. More powerful are web authoring tools which come with many other features that make creating a web page as easy as creating any other sort of document. SeaMonkey Composer is a web authoring tool which has a number of useful features but is relatively easy to work with. Web authoring tools are not quite the same as web browsers. Web browsers such as Internet Explorer, Safari or FireFox are used to look at web pages on the Internet; authoring tools are used to create them. One advantage of Composer is that it is free and it works on Windows and Mac computers, so you should be able to use it at home and at school. By the time you finish this tutorial, you will be able to: organize your web site files so they will work properly create different kinds of links use different text styles insert images add a background use a table to format your text and graphics Creating, Titling and Saving a New Page Saving a file in Composer is easy but you need to remember a few important facts. In order for the different parts of a web page to work properly, everything having to do with the web page has to be saved in the same folder. The title of a web page is not the same as the file name. The title will appear at the top of the web page when someone looks at it on the Internet. The title should be a brief phrase that describes the page. The filename of a web page is the name you use to save the file. Filenames for web pages should never be longer than 8 letters. It is best to name the main page of your web site index. This is because web browsers such as Netscape and Internet Explorer are designed to look for files named index as the first file to open within a folder if possible. IF YOU OPEN A SAVED SEAMONKEY FILE BY DOUBLE-CLICKING IT, it will open in the Browse mode and you wonʼt be able to edit it. Instead, you will need to go to Composer and go to File Open and open your file that way. Start SeaMonkey. A window like this should open up: (If it does not, then go to Window--> Composer to open a new Composer window.) Before you type anything, save your file by going to File-->Save. You will be asked to enter a title for your document. The title should describe (briefly) what the page is about. Type the following title: Welcome to Cheezy Pizza! Then click OK. In the next window ( Save As ), there are several things you need to change, so DO NOT CLICK SAVE YET! First, make sure you are in your own network folder named webpages(yi). DO NOT CLICK SAVE YET! Page 1

2 Then click on New Folder to create a new folder named pizza(yi). Click on the pizza folder so that it appears underneath the Save As area. All of your work for this tutorial will be saved in this new folder. DO NOT CLICK SAVE YET! Finally, name the file index.htm by typing in the file name area. Then click Save. Adding and Formatting Text Adding text to a web page is very easy. You can type directly on the page (which is what you will do for this tutorial), or you can copy text from another file (such as a word processing file) and paste it into the web page. Also, if you type a file in a word processing program and save it as a text or HTML file, you can just open it directly in Composer by going to File Open. Keep in mind that formatting text on a page with paragraph indents, double spacing, etc., works differently on a web page than in a word processing program because the page may be viewed using different browsers, different kinds of screens, different window sizes, etc. Type the following: Welcome to the Home of Cheezy Pizza! Highlight the sentence you just typed. Click on the center alignment button to place the sentence in the center of the screen. Change the text style to Heading 1 by going to the style window near the upper left corner of the page. Continue typing text and formatting it using the text style window until your page looks something like this: The lines on your page may wrap differently depending on how big your window is. Also, notice that the second sentence is Heading 3 and the rest of the sentences are Normal style. Save your work. Page 2

3 Organizing Images by Creating an Images Folder When you add an image to a web page, you arenʼt actually putting a copy of the image into the same file as the web page. What you are doing is creating a path that the web browser (such as FireFox) will later follow to show the original image in that spot on the web page. The best way to organize your image files is to put them inside a folder called images and then put the images folder into the same folder that contains your other web page files. For the pages you are creating in this tutorial, your main web page folder is called pizza, so you will put your images folder inside the pizza folder. An images folder has already been created for you to use in the rest of this tutorial. You need to copy the images folder from the network into your own pizza folder. Hereʼs how: Go to the Finder and then go to Middle-->Phillips Classes-->Tech 6 and open the folder named for web page tutorial. Control-click on the images folder and select Copy "images". Go to your own network folder and open your pizza folder. Control-click inside your pizza folder and select Paste item. The images folder should now be inside your pizza folder. Adding Images to your Web Page Go back to your index page in SeaMonkey. Click at the very top of the page. (If you need to make a blank line above your title, click in front of Welcome and press the Enter key.) Make sure the cursor is in the center of the line. Go to Insert-->Image or click on the Image button. A new window will open. Click on the Choose File button. The Select Image File window will open. Go to the images folder in your pizza folder and select the file named logo.jpg. Then click Open. The window should look like this. Make sure that there is a check mark in the box next to URL is relative to page location. This gives the web browser the information it needs to find your image files properly when they are uploaded to a web file server. Otherwise your images wonʼt show properly when your web pages are viewed on the Finally, in the Alternative Text box you can type logo. That is what will show if someone looks at your web page with the images turned off. Then click OK at the bottom of the window. Internet. Page 3

4 Your page should now look something like what you see below. IF IT DOES NOT, then try saving and then click on the Browse button to see if the logo shows properly. Save your work. Adding a Background You can either change the color of your pageʼs background or you can use an image as a background. For this page, weʼll use an image for the background. Later you will create a second page and you can practice changing the background color on that page. Go to Format-->Page Colors and Background. Click on Choose File. Go to your images file and click on cw 128.gif. Then click OK. Now you should see this at the bottom of your Page Colors and Background window: Click OK. When you click the Browse button, you should see a grey marbled background on your page. Save your work. Page 4

5 Working with Tables Tables are a very useful tool for making columns of text or for putting text and images side-by-side. Tables can be visible or invisible. You can adjust the size of the rows and columns or of individual cells in the table. You can also assign a background to a cell, to a row or to the whole table. Click after the last line on your web page and press Return to move to a blank line. Click on the Table button (or go to Table Insert Table). The Insert Table window will appear. Change the number of rows to 4. Change the number of columns to 3. Click OK. The cursor should now be in the upper left cell of the table. If it isnʼt, click on the cell in the upper left corner of your table so that the cursor appears there. Then go to Table Join with Cell to the Right. The cell should now stretch over two columns. Do this again so that the cell stretches across all three columns of the table. You will now type information and add pictures to your table so that it looks like the picture at the bottom of this page. In order to make it look like the picture, make sure you do the following as you work: Use the center alignment button to center the items in each cell. To save time, you can shift-click to select all the cells and center them at once. To create the bullet lists, either click on the bullet list button or go to Format-->List -->Bulleted. Use the style window to change the text in the first row of the table to Heading 3. Use the clip art in your images folder to add images to the left column of your table. Page 5

6 Repeat these steps to make a second table titled Dessert Menu. You can make up your own three dessert categories and your own desserts for each category. My dessert table looks like this: In the next several steps, we will make the dessert table invisible, so that it doesnʼt have a border around it: Make sure the dessert table is selected so that it has handles around it. Then go to Table-->Table Properties. Change the number of border pixels to 0. Then click OK. The edges of the table should now be made of dotted red lines rather than solid grey lines. This indicates that the table borders will be invisible when you look at the page in a web browser. To preview how your images and tables will look, switch to Preview mode by clicking on the Preview tab at the bottom of the window. Notice that the red table borders on the Dessert Menu table disappear when you are in Preview mode. Go back to Normal mode by clicking the Normal tab at the bottom of the window. This will allow you to continue adding to your page. Save your work. Creating Anchors and Anchor Links Now that you have added quite a bit of information to your page, itʼs time to learn how to make links that will let the reader jump around from one part of your page to another. Links that allow you to jump to a specific place on a web page are called anchor links. Anchor links are easy to make if you remember that there are two steps involved: marking the spot where the link will take you (known as an anchor ), and then making the link itself. For this tutorial, you will make two anchors. One anchor will mark the location of the pizza menu and the other will mark the location of the dessert menu. Hereʼs how to do it: Click next to Pizza Menu: Choice of Toppings in your first table Go to Insert-->Named Anchor in the menu bar. When the Anchor Name window appears, type pizza as the anchor name and then click OK. Page 6

7 A picture of an anchor should now appear next to the title of your first table. Repeat these steps to put an anchor in front of Dessert Menu in your second table. Name the anchor dessert. You have marked the spots where you want to go by putting in the anchors. Now you have to make links to each of those anchors. Hereʼs how: Go to the sentence To see our pizza menu click here and highlight the word here. Click on the Link button or select Insert-->Link in the menu bar. When the link window opens, click on the triangle to get the popup list and select #pizza as shown in the picture. Notice that anchor names always start with #. Now go to the sentence To see our dessert menu click here and highlight the word here. Repeat the steps above to create an anchor link to the dessert anchor. If you want, you can just type #dessert into the Link Location box. NOTE: You must type the anchor name exactly, and it matters whether you use capital letters. For example, #Dessert is not the same as #dessert. In general, you should keep your anchor names as short as possible, choosing a word that makes sense, and use only lower-case letters. Taking advantage of the select a Named Anchor feature is the most reliable way to create your anchor links. When you are finished creating your anchor links, notice that the words that you highlighted as links are now blue and underlined. Save your work. Testing Links in Browse Mode In order to actually test your links, click on the Browse button. This will start up SeaMonkey Navigator (a web browser similar to Safari or Internet Explorer). If you get a message asking if you want to save your work before opening the browser, say yes. Click on each of your links. You should immediately jump down the page to the appropriate table. If not, go back to your Composer file, highlight the link, open the Link Properties window by clicking on the Link button and make sure the name typed in the Link Location window is the same as the anchorʼs name. You can check an anchorʼs name by double-clicking on the anchor. Making a Link to Another File in your Folder Now that you know how to make one kind of link using the Link Properties window, you can make other kinds of links as easily. This section will explain how to make links between files within your web site. First you will need to make another web page. If you are already in Composer, go to File-->New Composer Page. If you arenʼt, start up Composer and work on the untitled page that automatically appears. Next, type the following: Our company doesnʼt really exist, but arenʼt you hungry now? Go to Format-->Page Colors and Background. Click on Use custom colors and then click on the rectangle next to Background. A window with a bunch of colors will open. Page 7

8 Choose a color and then click OK. Then click OK again to close the Page Colors and Background window. Save your new page, using Our Company as the document title and company(yi).html as the name of the file. (See pages 1 and 2 of this tutorial if you need help.) Make sure you are saving the file in your pizza(yi) folder. Leaving company.html open, go to File-->Open File and open index.html (if it isnʼt already open). Make sure you are in Normal mode. Highlight the word here in the sentence To learn more about our company click here. Click on the Link button to open the Link Properties window. This time, click the Choose File button. In the Open HTML File window, switch to your pizza folder and click on company.html. Then click Open. Then click OK. Save your work. Click on Browse to test your new link. Go back to company.html in Composer. Type Back to Main Page and use Link Properties to make a link back to index.html. Save your work and use Browse to test the link. Making a Link to Another Web Site on the Internet So far, you have only made links to move from place to place within your own web site. Now youʼll learn how to make a link from your web page to a real site on the Internet. In this example, you will be linking to a real online supermarket called Peapod, Inc. Make sure you are looking at company.htm and that you are in Normal mode. Type the following: Hereʼs a link to a real food site on the Internet and then highlight real food site. Click the Link button to open the Link Properties window and type in the Link Location line. Then click OK. Note: Anytime you are making a link to an Internet site, you must include at the beginning. This lets the computer know that you are linking to a site located on a different part of the Internet. Save your file and use Browse to open your page in SeaMonkey Navigator. Click on the peapod.com link to make sure it works. Making an Link The last kind of link to learn is an link. This kind of link starts up an program so you can write an and send it automatically to the address in the link. You should still be in company.htm and in Normal mode. Type the following: If you have any questions or comments, please us: feedback@cheezypizza.com If you have a real address of your own, you can type your address instead of the fake address. Highlight feedback@cheezypizza.com (or whatever you typed for the address) and then open the Link Properties. Page 8

9 In the URL window, type (or mailto: and then whatever address you used). Then click OK. Note that all links must begin with mailto: in the URL window (just like Internet links must begin with and anchor links must begin with #). Close the Link Properties window and click Browse to check your page in SeaMonkey Navigator. Notice that the cursor changes to a hand when you move it over the link. However, you canʼt test this link at school because we donʼt have the proper program set up. Spell Check Click on the Spell button or go to Edit-->Check Spelling. (Note: Cheezy is misspelled! Replace it with cheesy when that option comes up in the spellchecker.) When you are finished, click Close and save your work. Important Things to Remember! Before they are added to your web pages, all image files must be saved in a folder called images that is part of your main website folder. Images should be.jpg or.gif format. Keep all the html files that are part of your website together in the main folder. Make sure that all links and image files have the box next to URL is relative to page location checked off. Keep filenames short (8 letters or less), without spaces or dashes (-). Name your opening page index.htm. Page 9