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.