How to Make a Web Page Using Seamonkey HTML Editor

How to Make a Web Page Using SeaMonkey HTML Editor

for more handy reference tools visit http://ksuweb.kennesaw.edu/~tpowel25/FacultyEResources/elearningindex.html

SeaMonkey is an Internet browser that also includes an html editor. It can be used much like a word processor to create web pages without learning html. SeaMonkey is not perfect, and some knowledge of html will help make it work better. Compared to Netscape Composer, FrontPage, and MS Word, it seems to have fewer bugs and be more accessible for viewers. Dreamweaver seems to be a better html editor, but it is not free. After creating the web pages, you can load them onto Blackboard or load them onto your server and publish them. It may be necessary to contact tech support for assistance if you choose to load them onto the server.

1. You will need to go to www.mozilla.org and download the free software. After downloading the SeaMonkey Program, install it by following the instructions provided (you may need to double click on the .exe file).

2. Open the SeaMonkey Internet browser by double clicking on the SeaMonkey icon which should now be located on your desktop. The SeaMonkey Internet browser should now be open. (If you are not connected to the Internet, you will see a message that tells you that www.seamonkey-project.org could not be found. Click “okay” and move on to the next step.)

3. Across the top of the page you see a list of words, much like in any other Internet browser program. Click on FILE and then NEW and then COMPOSER PAGE. This action will open another window which will look similar to a word processing screen; this is the SeaMonkey html editor.

4. Here in the SeaMonkey html editor is where you will create your INDEX page. The index page is the page viewers will see when they first visit your web site. It is helpful to note that some web design rules state that viewers should not have to scroll on the index page. Web pages are a series of pages connected by hyperlinks. In creating web pages for classes, many instructors find it helpful to first create a folder titled “Web Pages” and then create a folder for each class. These folders should be created on your computer where you want to store your website information such as in My Documents or on the Desktop. Label each folder with a one-word title that lets you know which class it is for. It is important to remember that all titles of folders and pages must be limited to one word—or words joined with an underscore (English_101). If later you find your links do not work or do not work consistently, it may be because anchors, files, and folders contain spaces in the titles. Inside each folder create a separate folder and title it IMAGES. You will keep pictures and backgrounds here.

5.Note there are several areas in the page: the MENU BAR, the COMPSITION TOOLBAR, the FORMAT TOOLBAR, the EDITING AREA, the EDIT MODE TOOLBAR, and the STATUS BAR. On the index page add your name, title, institution, and contact information. The SeaMonkey html editor works just like a word processor for this function. Use the controls across the top. On the FORMAT TOOLBAR, the A with the arrow pointing up is “enlarge text,” and the A with the arrow pointing down is “reduce text”; the small squares of lines are justification controls that you can use to center, left justify, or right justify text. You will usually need to highlight the text first and then choose the changes you wish to make to the highlighted text. The color blocks let you change the color of the text. The scroll-down menu on the left hand top allows you to choose body text, paragraph, and heading sizes that are standardized. Body text is single-spaced and paragraph is double-spaced. Beside the color blocks is a highlighter that lets you permanently highlight the color of text. There is also a layer function that resembles a thumb tack. This function allows you to layer images or text over other images or text. The two icons beside that control what item is the top of the layer and what item is the bottom of the layer.

1. How to make a HYPERLINK (also known as an External Link). HYPERLINKS link to existing web pages. Highlight the institution name with your mouse button (not the highlighter function). Choose the LINK icon in the COMPOSITION TOOLBAR across the top (this icon has the image of chain links on it). In the box that appears, type the web address of your institution (http://www.latech.edu). Click “okay.” The linked text should be underlined to show it is a link. You can also link images to web pages by selecting the image and clicking LINK and following the same steps. A linked image will not be underlined.

2. How to link to other files. First, choose your index page as INDEX. To do this, click on FILE in the MENU BAR and then SAVE AS. It will ask you to name the page, name it INDEX then save it in your Web Pages folder as INDEX. Then, go to NEW and create a new page. Save this page as your class home page, for example “Comp1Home” or “101_Home.” Save it in the folder you created for that particular page. You don’t have to put anything on the page just yet. Go up to “Window” and move down to select the index page again. On the index page, type in the name of the course that you want to link to. For example, type in “English 101.” Then, highlight “English 101” and choose LINK at the top. Select CHOOSE FILE. This will open up a window. Select the 101 file, and then the Home file you just created. SeaMonkey will show you the link you just created, and ask you to click “okay.” Now your index page links to your class home page.

3. Some webmasters choose to put named anchors inside pages so viewers can quickly and easily find information within a page. For example, on your classroom home page, you might create a table, referred to as a navigation bar, across the top consisting of one row and five columns. In these columns you might create links to your index page (call this your home page), Blackboard, your syllabus for this course, course policies, and/or the grade breakdown.

The link to your index page is a link to a file in your folder (see number 7). The link to Blackboard is an external link (see number 6). You probably want to create a separate page for the syllabus so that students can print it out without printing all your other course information. That would make this a link to a file, as well. However, if you put your course policies (required textbooks, attendance policies, plagiarism penalties, required formats, etc.) and grade breakdown on this course home page, you will link to them with what SeaMonkey html editor calls NAMED

ANCHORS. (Microsoft calls these internal links “bookmarks.”) To create a named anchor, click the mouse where you want the link to jump to. For example, if you want your item Course Policies in the navigation bar to jump to the “Course Policies” section of your document, click the mouse by the “Course Policies” section of your document and then under INSERT choose NAMED ANCHOR. Type in course_policies. Again, use no spaces in the link or anchor name. Go up to Course Policies in your navigation bar. Highlight it with your mouse, and choose LINK. You will see a scroll down tab on the right side of the blank. Click on it, and you should see “#course_policies” as a choice. Click on “#course_policies,” and you have created a named anchor or internal link. Most webmasters make a named anchor at the top of every page called “top” and provide link to it at the bottom of every page.

9. You want students to be able to contact you. You can add a column to your navigation bar by placing the mouse in the last column of your navigation bar. Choose “Table” and “Insert” and “Columns After.” In the new box, add an option to email you.

A basic html command is the “mailto” command. This type of link allows a viewer to send an email. Highlight the “Email Dr. Powell” text with your mouse. Choose LINK. In the blank space type mailto: and the email address that you want the viewer to send an email to, for example, mailto:[email protected]. There are no spaces in this command.

Dr. Blackboard Syllabus Course Grade Email 1. To set a Powell’s Policies Breakdown Dr. Home Powell professional tone to all of your pages, go to FORMAT and PAGE TITLE AND PROPERTIES. Fill in the title and author boxes. You can use spaces in these items. Viewers will see this information when they pull your page up. 2. Now that you have the basic organization and navigation of your course pages set up, it’s time to add color and images.

PAGE BACKGROUND COLOR: You want your page background to set an appropriate tone and be light enough to read through easily. You can set the background color by going to FORMAT and PAGE COLORS AND BACKGROUND. Under PAGE COLORS click the radio button by USE CUSTOM COLORS. Click the box to the right of BACKGROUND. A color palette will come up. Choose a color to serve as the background of your web page. Remember, you want it to be light enough to read text through. TIP: If you are changing the background or the background image, choose FORMAT and PAGE COLORS AND BACKGROUND. Choose USE DEFAULT COLORS and click “okay.” This clears your selection. Then, choose FORMAT and PAGE COLORS AND BACKGROUND and choose your new colors. PAGE BACKGROUND IMAGE: A background image is any color or image that you use that is not included in the SeaMonkey html editor color palette. First, you need to put some images in your image folder. There are many free background images available to webmasters. Download a few of these backgrounds and images into your images folder. To do this, go to a search engine page (such as www.webcrawler.com) and type in “Backgrounds.” Choose one of the graphics pages offered. When at the graphics page, look through the backgrounds offered. If you find one you like, and the backgrounds are copyright free (the page will tell you whether they are or are not), simply right click your mouse on the background you want to “take.” Choose “Save Image As” and save the image with a title that lets you remember what it is. Save it in the appropriate image folder. You can save any image with this method. Again, make sure any images or backgrounds are copyright free. Some request that you link back to the source of the graphic in order to use it. If that request is made, you should honor it. However, do not assume that always linking back gives you permission to take a graphic—it does not and may land you with a fine for copyright violation. COLOR AND IMAGE: You can choose a color and then layer an image over it. This color will show through in table boundaries and in h-bars. H-BARS (horizontal bars): Horizontal bars are often used to divide sections of web pages. To add an h-bar, first click on the area of the page that you want to add a horizontal line to, then choose INSERT and HORIZONTAL LINE. ADDING A PICTURE: Choose the IMAGE icon across the top of the page. Under “Image Location” choose “Choose File.” Find your image file and the image you want to insert (as a picture, not as a background). Under “Alternate Text” you will want to type in a description of the picture, such as “Grambling Logo.” Alternate text alerts viewers with slower browsers or blind viewers that a picture is there on the page. CENTERING A PICTURE: Click on the picture and choose the center justification icon across the top of the page. RESIZING A PICTURE: Click on the picture. You will see small squares around the sides of the picture. These are called “handles.” Put your mouse over one of the handles. You will see it change to an arrow. Handles on the sides adjust the width of an image. Handles on the top and bottom adjust the height. Handles on the corners will shrink or enlarge an image proportionally. A PROFESSIONAL LOOK: After you get comfortable with the html editor, you can use tables and layers to imitate frames. You can collapse table cells and split cells to customize tables. You can control the color and background in each cell of the table. Remember the rule of 3: 3 fonts, 3 colors, 3 images is the limit for a tasteful, professional page. TESTING YOUR PROJECT: After your page is set up and published, go to an Internet connection and make sure it loads and looks the way you want it to. It’s always a good idea to use a different server than the one your page is stored on. Also, use a different browser than the one you created it with (use Explorer for SeaMonkey html editor created pages and SeaMonkey html editor for FrontPage created pages). You may find an anomaly—this is normal, and you can correct it before students access your page. Check all your links to make sure they all work.