1 SeaMonkey for PC Getting Started Adding Links Adding Colors, Images, and Style Loading into D2L Getting Started 1. Click the Start Menu icon in the lower left corner of your screen and search SeaMonkey. Then click the SeaMonkey icon. 2. If you get a window asking if you want to use SeaMonkey for any defaults, click Cancel. You can change this next time if you want. 3. You will now see what should look like any other browser page. To start a new file, click File, then New, then Composer Page.
2 4. To preserve your sanity, click Edit, then Preferences. In the window that comes up, click Composer, then make sure the screen looks like the one in the picture below. By unchecking the box shown, you will be preventing SeaMonkey from creating confusing ghost-files that will mess your webpage up. Click OK when done. 5. The window opened is called a composer page. In SeaMonkey html editor, here is where you will create your index page. An index is like the Home page on any website. It is the first thing they see, and usually where they go for direction. Important: The KSU web server automatically links to your index page, with a small i at the beginning, so if you plan to put your page on the KSU server, it s important to create this index page. It is helpful to note that some web design rules state that viewers should not have to scroll on the index page.
3 6. Web pages are a series of pages connected by hyperlinks. Web pages have unique needs. Let s think about it like this: you have a small child whom you keep in a playpen. In the playpen is a tiny toy box with a ball, a block, and a fire truck. You play a game where you tell her to show you the ball, and she points to the ball. You tell her to show you the block, and she points to the block. You tell her to point to the fire truck, and she points to the fire truck. This game works very well. But then you take her into another room and put her in another playpen, and there s a pillow and a rattle and a dolly. You tell her to point to the fire truck, and she looks around and shrugs her shoulders. Her mind is not advanced enough to understand that you wish her to point through the wall into the other playpen. And she does not have the physical ability to get out of the playpen, walk to the other room, and retrieve your fire truck for you. This game will not work. You then try again. You put her back in the original playpen, but you take the small box of toys and scatter them around the house. You put the ball under the couch. You put the block in the bathtub. And you put the fire truck in the trunk of your car. You return to the playpen and ask the child to show you the fire truck. Again, she shrugs her shoulders. This game will not work. Why does the first game work, but the other two do not? What if you change the game by taking the child, playpen, toy box, and all into the next room and again ask the child for the block? Unless something distracts the child, the game will work! The child knows the block is in the box, and all functions as normal. Your webpage is the child, and its name is index. You are going to create a playpen for it, called web. And you will create a toy box for it, called images.
4 7. Right click on your desktop and click New, then Folder. Click, then click again on the name of the new folder to name it web. Double click on the folder to open it. Right click inside it and choose New, then Folder again. Rename this folder images. 8. Put some toys in the toy box. To add images to your folder, you can right click on the image you wish to save, choose Save Image As and save the image with a title with no spaces that will let you know what it is. Save it in the image folder we just created. You can save any image with this method. 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. Here are some copyright free images to play with:
5 9. In creating web pages for classes, many instructors find it helpful to first create a folder titled web and then create a folder for each class. These folders should be created on your computer where you want to store you 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, images, and pages must be limited to one word or words joined with an underscore (English_1101). If later 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. 10. If you were to map your folders for two classes, the map might look like this:
11. Now that you are organized and ready to create your web pages, return to the composer page. Note that there are several areas in the page: the MENU BAR, the COMPOSITION 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. Back to Top 6
7 Adding Links Hyperlinks Internal Links Named Anchors Email Links How to make a Hyperlink (AKA external link) 12. 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://kennesaw.edu). Click OK. 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.
8 How to link other files (AKA internal links) 13. First, save 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 click OK. Then save it in your web folder as index (no capitals).
9 14. Click New to create a new page. 15. Save this page as your class home page, for example Comp1Home or 1101_Home. Save it in the folder you created for that particular page. You don t have to put anything on the page just yet. Follow step 13 to save the new page. 16. Go back to the index page and type in the name of the course that you want to link to. For example, type in English 1101. Then, highlight English 1101 and choose link at the top. You are creating what is called an internal link. Select Choose File. This will open up a window. Double-click the file you just created.
10 SeaMonkey will show you the link you just created, and ask you to click OK. Now your index page links to your class home page. Creating Named Anchors 17. 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. To do this, click the Table icon, and then set the Rows to 1 and the Columns to 5, then click OK. In these columns you might create links to your index page (call this your home page), Desire2Learn, your syllabus for this course, course policies, and/or the grade breakdown. Click Save. The link to your index page is a link to a file in your folder (see number 20). The link to D2L is an external link (see number 16). 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 the course home page, you will link them to what SeaMonkey html editor calls Named Anchors (Microsoft calls them bookmarks ).
11 18. To create a named anchor, click the mouse to the spot on the page 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 policies. Again, use no spaces in the link or anchor name. Click OK. This action will create a tiny anchor at the point you want to link to.
12 19. Go up to Course Policies in the navigation bar, and highlight it with your mouse. Then click Link. Click the drop-down menu, and then click #policies. Then click OK. Adding an Email Link 20. 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, Insert, and Column After. In the new box, add an option to email you.
13 21. A basic html command is the mailto command. This type of link allows the viewer to send an email. Highlight the Email text with your mouse. Click link, and in the blank space type mailto: and the email address that you want the viewer to send an email to, for example: mailto:treardo2@students.kennesaw.edu. There are no spaces in this command. Click OK. Back to Top
14 Adding Colors, Media, and Style Background Colors Background Images Adding Pictures Centering Pictures Resizing Pictures Adding Video 22. To set a 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.
15 23. To make your tables/navigation bars look more professional, highlight the entire nav bar, right click in it, and choose Table or Cell Background color. 24. You can choose the color for the entire table or individual cells Click on a color and click OK. If you would like a wider range of colors, you can google a hex chart or visit http://websitetoad.com/hexadecimal-colors.htm. Type any of these codes into the empty box above and the okay button (as shown above) to get the color.
16 25. Right click the table again, and choose Table Cell Properties. You will get the menu below. Make sure you are on the table tab, and reset the borders and spacing options as shown below. Click OK. Now your nav bar looks more like buttons rather than a table.
17 Page Background Color 26. 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. You can also choose a hex code, like you did with the table cell colors above. Click OK twice.
18 Page Background Image 27. 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. Here are some images you can download and save: You can also lighten images to make them better backgrounds using the free software at http://aviary.com 28. To apply the background image, again go to format, and choose page colors and background. Again click on use custom colors, and under background image, click on choose file. 29. You may have to look for your web folder and your image files. Click on the image you wish to use as a background, and click on the open button. Choose OK, and you have selected your background.
19 Adding a Picture 30. Choose the Image icon at the top of the page. Under Image Location, click 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 short description of the picture such as Kennesaw State University logo. Alternate text alerts viewers with slower browsers or blind viewers that a picture is there on the page. Do not neglect this step. Click OK. Centering a Picture 31. Click on the picture and choose the center justification icon on the top of the page.
20 Resizing a Picture 32. 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. When you resize the picture with handles, you are not actually changing the size of the picture. If your pictures load too slowly, they are likely too large. For web use, pictures should be less than 300 kb. Also, remember that bitmap (bmp) images will not show up on the web. Only jpgs, pngs, tifs, and gifs will show up on your webpage. To learn how to shrink image sizes and change image formats, view the editing images tutorial at http://ksuweb.kennesaw.edu/%7etpowel25/aviary/editing_with _Aviary.html.
21 Adding a Video 33. Open a new browser window and go to YouTube (www.youtube.com). In the search bar, type a topic. I would be happy to suggest Wikis in Plain English for faculty who might use wikis in their courses and want to introduce the concept to students. If you type in Wikis in Plain English, and hit the search button, your first result will be the Wikis in Plain English video. 34. Click on the title of the video, and the video will start. However, what you are looking for is the URL and embed codes. You can find those by clicking Share under the video and then either clicking Share this video (for a URL) or Embed.
22 35. The easiest way to insert a video is to simply highlight the URL and copy it (ctrl + c), and then return to your webpage and click where you want the link. Then paste the link there (ctrl + v). Highlight the link, and hit the link icon at the top. Your link should link automatically, but if not, you can paste the URL in again. 36. To put your videos directly in your webpage file, you will want to embed it. In YouTube, click Embed, uncheck the box that says Show suggested videos when the video finishes (this is a good idea because you can t control what suggestions come up at the end of the video), then highlight and copy (ctrl + c) the html text in the box.
23 Go back into SeaMonkey, and click the <HTML> Source button at the bottom of the screen. Your page will turn to gobbledygook, better known as html code. Find the spot where you want to paste the video. To switch back to normal view, click Normal at the bottom of the screen. It will not show anything in the composer, but when you open it in a browser it will look like a picture with a play button in the middle. Back to Top
24 Loading your Page into D2L Want to add pictures, links, and pizzazz to your syllabus and course policies on D2L? Want to include a YouTube video? Make your documents into webpages. There is one caveat to make your page look like the one you created, you must load the entire site you ve created into D2L. And to edit your page after you have loaded it, you must remove the entire site from D2L, make your change, and reload the entire site. 37. Save your web page, then on the Desktop right click your web folder, and click Send to, then Compressed (zipped) folder You will now have a zipped web file on your desktop (or wherever you saved your web folder. 38. Go into your course, and click Edit Course. Under Site Resources, click Manage Files.
25 39. Create a folder for your zip file by clicking New Folder. Give it a name, then click save. 40. Click on the folder you just created, then click Upload. From here, you can drag and drop your ZIPPED file into the box or click upload and find it that way. Either way, you should see your zip file inside the box when finished, then click save. 41. In D2L, hover over the file you just uploaded, and click the down arrow that appears. Then click unzip.
26 42. Now that you ve uploaded the webpage, click Content. Choose the module you want your webpage in, then click New, then Add from Manage Files. Find the index file in your D2L files, and then click the check box next to it. Click Add at the bottom of the window. 43. To change the name of the file, click the down arrow next to it, then Edit Properties. Then click the word index and simply type in a new one and press Enter on your keyboard. You should now see a link to the file. If you click on it, you will see your webpage. Then you are done! Instructions Created By: Tiffani Reardon, May 2014 Back to Top