Seamonkey Composer: Creating Web Pages
Total Page：16
File Type：pdf, Size：1020Kb
v.1101 SeaMonkey Composer: Creating Web Pages There are many ways to create and modify Web pages to be published on the Web. You can use any text editor such as Notepad to directly enter or modify the language of Web pages which is HTML, hypertext markup language. The disadvantage of this approach is that you must learn HTML and it is easy to make mistakes. With a Web page editor program like SeaMonkey Composer, you can create and modify Web pages in a manner similar to a word processor like Microsoft Word. You can actually use Word to create Web pages but the HTML that it creates is complicated and you can’t do as many things as you can do with many Web page editors. SeaMonkey Composer is easy to use, creates fairly good HTML, and is free, unlike some more professional products like Microsoft FrontPage or Macromedia Dreamweaver. If you wish a copy of SeaMonkey for your own computer, you can download it from http://www.seamonkey-project.org/. Objective 1 Explore the SeaMonkey Composer Window 1.1 Start SeaMonkey. If the SeaMonkey icon is on your desk top you can start SeaMonkey by opening an icon similar to the one shown to the left. You can also start it from the Start button. On the lab computers it is located under Networking Applications or Development Tools. This will start the SeaMonkey Navigator browser and the Navigator window will appear as shown in Figure 1B.1. Click the Composer Icon located on the lower left of the window. The Composer window will open. Composer: Figure 1B.1 SeaMonkey Tutorial | Web Page Design 1 1.2 Take a moment to study the main parts of the SeaMonkey Composer window as shown in Figure 1B.2. Menu Bar Composition Toolbar Format Toolbar Page Area Edit mode Toolbar Figure 1B.2 Objective 2 Entering Text 2.1 We are ready to build our first page. Type the following into the page area where is the Enter key, substituting your name for FirstName and LastName. Alex’s Home Page by Firstname Lastname Welcome to my home page. My name is Alex. As you can see from my picture above, I am a handsome lion. You may not know it by looking at me but I am a movie star. You have been typing into Composer’s Normal edit mode. You can see which mode you are using by looking at the tabs at the bottom of the window. The current mode tab will appear to be in the foreground and will not be darkened. 2 Web Page Design | SeaMonkey Tutorial 2.2 Typed text will word wrap when it gets to the right border of the window. By hitting the Enter key, you insert a break in the text forcing a new line. Click on the Source tab at the bottom of the window. You can now see the HTML, Hyper-Text Markup Language that is actually used to build the page. HTML consists of tags which appear in angle brackets (or less-than and greater-than symbols). Some tags need an end tag so you will see a slash (/) to indicate an end tag. Notice that the HTML starts with <html> and ends with </html>. There is a <head> and a </head> and in between is HTML file header information. There is also a <body> and a </body> and in between you will see most of what makes up the pages you will be creating. You can see the text you typed and the <br> tag where you inserted a break in the text. 2.3 Click on the Normal mode tab. Click the Save button . A Page Title dialog box will appear. Enter Alex’s Home Page as shown in Figure 1B.3. Figure 1B.3 Click OK. Composer displays the Save Page As dialog box. Use the displayed folders to navigate to CpSc120L\MyDoc. On the toolbar click New folder, enter SeaMonkey, and press Enter. Click Open to open the SeaMonkey folder. Click in the File name box. If necessary, select or delete the existing text and then type index. Click Save. Your page has been saved in the file index.html. Most Web servers will use index.html or index.htm if you do not specify an actual file when you specify a Web address. SeaMonkey Tutorial | Web Page Design 3 Objective 3 Formatting and Aligning Text 3.1 We have not yet specified the font face that our Web page is to use which means that it will appear in the default font of the browser, whichever one a visitor to the page might be using. If the visitor is using Window’s Internet Explorer that means the Times New Roman font face will be used unless the visitor has changed the browser defaults. Online text looks better in a sans-serif font of which Times New Roman is not. Serif fonts have extra indicators at the end of some of the strokes in the font such as the one at the bottom of this T. Compare that to an Arial T. Press Ctrl+A to select all. On the menu bar, click Format, Font, and then Helvetica, Arial. This means that if the browser finds a font named Helvetica it will use it, otherwise it will use Arial. If it doesn’t find either, it will try to use some other sans-serif font, but this set should cover most browsers. 3.2 Click in the first line of text. This line is the header for the page. The header normally appears larger then the rest of the text and is centered. We could change the actual font size but the header is normally done in a different manner. On the left of the formatting tool bar, click on the arrow in the Paragraph Format box . Click on the Heading 1 entry. The first line now appears larger. 3.3 Toward the end of the formatting tool bar are some alignment buttons: Left Center Right Justify (Newspaper paragraph) Click Right, Left, and finally Center to see how they align the heading. Leave the heading centered. 3.4 We need to leave some space for Alex’s picture. Click after the word Page at the end of the heading and press Enter twice. 4 Web Page Design | SeaMonkey Tutorial 3.5 We would like the line with our name to be centered, bold, italicized, and a little larger then normal font size. Triple click in the line with your name. This will select the entire line. On the formatting toolbar, click the Center button , click the Larger Font button , click the Bold button , and then click the Italic button . Click after your last name and then hit Enter. This offsets the name line from the rest of the text. 3.6 Another way to separate text is by making it a paragraph. Click and drag from the word Welcome through the period at the end of the text after the word star. On the left of the formatting tool bar, click on the arrow in the Paragraph Format box . Click on the Paragraph entry. 3.7 Sometimes we wish our text to be indented from the left edge of the window. On the formatting toolbar, click on the Indent text button . The text is now moved to the right. Click the Indent text button again. The text is now further to the right. Click the Outdent text button . The text is moved back one indention. Press Ctrl+S or the Save button to save your page. SeaMonkey Tutorial | Web Page Design 5 Objective 4 Bulleted and Numbered Lists 4.1 Sometimes we wish lists of items either with bullets or numbers preceding each item. Press Ctrl+End so that the insertion point is after the last paragraph. On the formatting toolbar, click the Bulleted List button . Enter the following. I graduated from Clemson University. Not long ago, I stared in the movie Madagascar. After entering the text, click the Bulleted List button again to end the list. You should have a bulleted list with two items. You may notice that the font changed back to the default because we added to the end of the page. We will fix that later. 4.2 This time we will create a numbered list but we will do it by entering the text first. Press Ctrl+End so that the insertion point is after the last paragraph. Enter the following. My favorite pastimes are Acting Partying with my friends Eating Sleeping Click and drag from the word Acting through the word Sleeping to select the text in our list. Click the Numbered List button . You should now have a numbered list with four items. 4.3 We need to clean up a little now. The line starting with “My favorite” is not indented. Click in the line starting with “My favorite”. On the formatting toolbar, click on the Indent text button. We need to fix our fonts. Press Ctrl+A to select all. On the menu bar, click Format, Font, and then Helvetica, Arial. Press Ctrl+S or the Save button to save the page. 6 Web Page Design | SeaMonkey Tutorial Objective 5 Inserting Images 5.1 We now wish to insert that picture of Alex which we wish to take from our sample page. We must first save the image. On your task bar, make the window containing the sample page active. Right click on the picture of Alex to get the context menu. On the menu, click on Save Picture As or Save Image As.