SeaMonkey Composer: Creating Web Pages v.1101 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 click the Italic button., and then 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. The Save Page As dialog box appears. Use the folders to navigate to CpSc 120 Lab\SeaMonkey. Notice that the file name is alex and the file type is JPEG (*.jpg) so the file will be saved as alex.jpg. (You may need to click the Browse Folders button). Click the Save button. 5.2 On your task bar, make the SeaMonkey Composer window active again. Click on the blank line between the heading and your name. The insertion point will be against the left margin. On the standard toolbar, click on the Image button or on the menu bar click on Insert and then Image. Composer displays the Image Properties dialog box appears as shown in Figure 1B.4. In the Image Location box, enter alex.jpg. Notice as you typed, the URL is relative to page location check box was checked. This means that this image location is relative to where the current page is stored. In the Alternate text box, enter Alex. The alternate text is the text that is to be displayed before the image is displayed or in place of the image if the browser is set not to display the image. If you were not wanting the image text to appear, you would click the Don t use alternate text option button. Figure 1B.4 Click OK. Composer inserts Alex s picture on the page. If the picture of Alex does not appear, Save, close Composer, start Composer from Navigator, click the Open button, and double click the index.html file. SeaMonkey Tutorial Web Page Design 7
5.3 We need to center the picture. Click the image to select it. On the formatting tool bar click the Center button. We would like some space between the image and the name. On the name line, click before the word by and press Enter. Press Ctrl+S or the Save button to save the page. Objective 6 Modifying Image Size 6.1 Click on the image of Alex. You will see sizing handle rectangles on each size and on each corner of the image. The sizing handles on the side borders allow you to change one dimension of the image. The sizing handles on the corners allow you to change both dimensions of the image and keep the dimensional proportions. By clicking on a sizing handle, you can make an image larger or smaller. As you drag a sizing handle, Composer will display the new dimensions as WIDTH x HEIGHT in pixels. Click and hold the sizing handle in the middle of the bottom border of the image. Drag it down until the new height is about 250 pixels and release the mouse button. The image is resized but you can see that the proportion is distorted. Press Ctrl+Z (undo) to restore the image back to the original size. Click Alex. 6.2 Click and hold the sizing handle in the middle of the right border of the image. Drag it to the right until the new width is about 400 pixels and release the mouse button. Again the proportion is not correct. Press Ctrl+Z to restore the image back to the original size. Click Alex. 6.3 Click and hold the sizing handle in the bottom right corner. Drag it down and to the right until the new width is 500 pixels and release the mouse button. Composer resizes the image in the correct proportion but now we have another type of distortion. The image does not have the resolution to display at this magnification. Press Ctrl+Z. Click Alex. 8 Web Page Design SeaMonkey Tutorial
6.4 We can t resize the image to a much larger size because of the resolution, but we can make it a little larger. Using the last method with the corner sizing handle, resize the image until the new width is about 200 pixels. Press Ctrl+S or the Save button to save your page. Objective 7 Backgrounds 7.1 We can use an image or a color as the background for our page. Let s try some images first. On the menu bar, click Format and then Page Colors and Background. Composer will display the Page Colors and Background dialog box as shown in Figure 1B.5. In the Background Image text box, enter amflag.jpg. In the dialog box, Composer displays the image as well as how different types of text will look. Figure 1B.5 Click OK. The image now shows in the background. Notice that it is tiled or repeated until it fills the page. Also notice how our text appears in the foreground. At times it is hardly visible when over the dark blue of the flag. To get contrast, it is better to use dark text on a light background or light text on a dark background. The pattern of the image is also very busy and distracts from the reading of text. This image would not make a good background. SeaMonkey Tutorial Web Page Design 9
7.2 On the menu bar, click Format and then Page Colors and Background. In the Background Image text box, delete the current entry. Click OK. The background has been removed. On the menu bar, click Format and then Page Colors and Background. In the Background Image text box, enter bg58.jpg. Click OK. This image is designed for backgrounds. The edges fit together so that when the image is tiled, you do not notice the edges of the image. The image is designed to give the impression of textured cloth or paper. This image looks OK but is a little dark. Let s just say that we decide that we don t want an image background but would rather just have a color. 7.3 Press Ctrl+Z. The background has been removed. On the menu bar, click Format and then Page Colors and Background. Click the option button for Use Custom Colors. Notice that the custom colors are no longer ghosted. Click the button to the right of Background. Composer displays the Block Background Color dialog box with a palette of colors. Click on the fifth square in the first row, a light yellow. Click OK to select this color. Click OK in the Page Colors and Background dialog box to apply the background. Press Ctrl+S. 10 Web Page Design SeaMonkey Tutorial
Objective 8 Linking To Another Page 8.1 We can make text or an image link to another page on the Web. Click and drag to select the words Clemson University. Click the Link button. Composer displays the Link Properties dialog box as shown in figure 1B.6. In the link Location Text box enter http://www.clemson.edu. Figure 1B.6 Click OK. The text has now been made a link. Press Ctrl+S or the Save button. 8.2 Using Computer or Windows Explorer open the Cp Sc 120 Lab\SeaMonkey folder. Double click the index.html file to open the page in your default browser. Click on the link that you just created. You should be taken to the Clemson University site. If Clemson opened in a new window or tab, close it. Otherwise, click your browsers Back button to redisplay your page. Leave this window open. On the task bar, select your Composer window. 8.3 Double click the word Madagascar. Click the Link button. We want to link this to a page in the current folder that we haven t yet created. In the Link Location text box, enter movie.html. Click OK. Press Ctrl+S or the Save button. SeaMonkey Tutorial Web Page Design 11
8.4 Let s test out this link. On the task bar, select your browser with your page open. Notice that Madagascar is not a link even though it was saved. You need to reload the page in your browser. Click the Refresh or Reload button. Madagascar should now be a link. Click on the link. The page cannot be displayed because it has not been created. Click your browsers Back button to redisplay your page. Leave this window open. On the task bar, select your SeaMonkey Composer task. 8.5 We would like to fix our Clemson University link so that when someone clicks it, it definitely opens in a new window. To modify a link we can click anywhere in the link and click the Link button. Click anywhere in the words Clemson University. Click the Link button. Composer displays the Link Properties dialog box with the previously entered link. Click the Advanced Edit button for the Advanced Property Editor. In the Attribute box, select the target. In the Value box type or select _blank. Click OK. You will now be back at the Link window. Click OK. Press Ctrl+S or the Save button. 8.6 Let s view our change. On the task bar, select your browser with your page open. Click the Refresh or Reload button. Click the Clemson University link. Clemson s site should now open in a new window or tab. Close this new window or tab but do not close the window with your page open. 12 Web Page Design SeaMonkey Tutorial
Objective 9 Opening Another Page 9.1 In Composer on the menu bar, click File, New, and then the Composer Page or on the standard toolbar just click the Create a new Composer page button. Composer will open a new blank untitled page in a new window. On the menu bar, click Format and then Page Title and Properties. Composer will display the Page Properties dialog box as shown in figure 1B.7. You can use this method to give the page a title property before saving the page the first time or to change the title property of a page. In the Title text box, enter Madagascar Movie. Figure 1B.7 Click OK. Composer will display the title property in the window title bar and on the task bar. 9.2 Type Madagascar and then hit Enter. This is the heading line to be displayed on this page. Triple click the word Madagascar to select the entire line. Click the Center button. Click the Bold button. Use the Paragraph Format box and select Heading 1. 9.3 Click the Save button. Composer will display the Save Page As dialog box. If necessary, modify the location to Cp Sc 120 Lab\SeaMonkey. The File Name box will already be filled in with a file name using the title property. Select the file name and change it to the word movie. Click Save. Composer will save the page as movie.html. SeaMonkey Tutorial Web Page Design 13
9.4 We will now insert an image for this page. Press Ctrl+End to position below the heading line of Madagascar. Click the Image button. Composer will display the Image Properties dialog box. Change the Image Location box to poster.jpg. Change the Alternate Text box to Movie Poster. Click OK. If the picture does not display: Click the Save button. Close this Composer window. Make your other Composer window active. Click the Open button. Double click movie.html. 9.5 Let s center and label our image. Click on the movie poster image. Click the Center button. Press Ctrl+End. You should now be centered under the image or at the image bottom. Type The Movie and then hit Enter three times. 9.6 We now want a link to the movie site that will open in a new window. Triple click The Movie line to select the entire line. Click the Link button. Composer will display the Link Properties dialog box. In the Link Location box type http://www.madagascar-themovie.com. Click the Advanced Edit button. Composer will display the Advanced Property Editor dialog box. In the Attribute box, select target. Replace the contents of the Value box with _blank. Click Ok and then in the Link Properties dialog box, click OK. Press Ctrl+S or the Save button. 14 Web Page Design SeaMonkey Tutorial
Objective 10 Inserting a Table 10.1 Tables are used on a page not only to display items in rows and columns but also to help align objects on a page. We would like to insert a table showing the cast of characters. We would like it to be under the poster and be the same width as the poster. Click on the poster and then click the Image button. In the Image Properties dialog box, click on the Dimensions tab. We can see that the image is 350 pixels wide. Click the Cancel button. Press Ctrl-End. You should be at the bottom of the page. 10.2 We would like a caption above our table so type Main Cast of Characters and then hit Enter. Our table needs to list the four main characters and have a heading row so we need 5 rows. We want to list the actor and the character they do the voice for so we need two columns. 10.3 Click the Table button. Composer will display the Insert Table dialog box. Change the Rows box to 5. Change the Columns box to 2. Change the Width box to 350. Change the type from % of window to pixels. For our table we do not want the border to show around the cells which means we want our border to be zero pixels in width. Change the Border box to 0. Click the Advanced Edit button. Notice the different attributes and their values. The attribute cellspacing is the space in pixels between cells in a table. The attribute cellpading is the space in pixels from the border of a cell to the contents of the cell. We will leave these set at 2. Click the down arrow on the Attribute box. This shows you some additional attributes that you can change on a table. Press Esc and then click the Cancel button. In the Insert Table dialog box, click the OK button. SeaMonkey Tutorial Web Page Design 15
10.4 We need to align our table in the center of the page. On the menu bar, click Table and then Table Properties. Composer will display the Table Properties dialog box. Change the Table Alignment box to Center. Click the OK button. 10.5 We are now ready to put our information in the cells. Click in the first cell of the first row. Enter the following information. You can use the Tab key to move from cell to cell but do not hit it after you have entered the last cell as Composer will create a new row. Actor Ben Stiller Chris Rock David Schwimmer Jada Pinkett Character Alex the Lion Marty the Zebra Melman the Giraffe Gloria the Hippo 10.6 Let s do a little formatting on our table. First let s bold the column headings. Click and drag the word Actor through the word Character. Notice that this selects the cells in the first row. Click the Bold button. 10.7 Let s center the information in the columns using different methods. Click the word Actor. On the menu bar, click Table, Select, and then Column. Composer selects all the cells in this column. Click the Center button. Click and drag from the cell containing Character down through the cell containing Gloria the Hippo. Composer selects all the cells in this column. Click the Center button. Press Ctrl+S or the Save button. 16 Web Page Design SeaMonkey Tutorial
10.8 We have an idea of what our page looks like in the Normal view. However, we can see the borders of our table. Objective 11 Finishing Up Click just above the title of the table. Click the Preview tab at the bottom left of the window. We now have a good idea of what our table looks like. Click the Normal tab to go back to the Normal view. 11.1 Just a few more things to format this page and we will be finished. Press Ctrl-End. You should now be centered below the table. Hit the Enter key. Type the word Home. Double click the word Home to select it. Click the Link button. Under Link Location enter index.html. Click the OK button. We now have a link back to our home or main page. 11.2 Let s fix the fonts. Press Ctrl+A to select all. On the menu bar, click Format, Font, and then Helvetica, Arial. Now for the background. On the menu bar, click Format and then Page Colors and Background. Click the option button for Use Custom Colors. Click the button to the right of Background. Composer displays the Block Background Color dialog box with a palette of colors. Click on the fifth square in the first row, a light yellow. Click OK to select this color. Click OK in the Page Colors and Background dialog box to apply the background. Press Ctrl+S or the Save button. SeaMonkey Tutorial Web Page Design 17
11.3 Now to view our completed site. On the task bar, select your browser with your page open. Click on the Madagascar link to open the movie page. Click on The Movie link to open the official movie page. Close the new window or tab. Click on the Home link to return to the home page. Close your browser window. Close the two SeaMonkey Composer windows. End You have completed Project 1B 1/4/2011 18 Web Page Design SeaMonkey Tutorial