Simple Steps for Making a Homepage using Seamonkey Composer


Seamonkey Tutorial from U of I

Your index file URL is assigned to you by EIU. You will create a link to the list of course projects on your index page. The Seamonkey Composer pages you create for each class project will be linked to the course projects template page.  You will link the titles of your projects ( Project 1, Project 2, Project 3 etc.) into links so that all your coursework will be available to anyone who visits your projects page.  Look at the model pages which precious students have created. 
These examples are available at the end of the course calendar. 
This tutorial is written as if you were starting your pages from scratch.  

This tutorial includes basic page set up, inserting a table, importing images, using Win-SCP.
Be aware of the several workshops on Web page design with Composer offered this semester.

1. Plan to save your page to your flash drive.

2. Open the Seamonkey browser (not Explorer).

3. In the drop-down menu under Window, open  Composer.

4. You will see a blank white page as you would on a word processor.  Create a background for this page.  From the drop-down Format menu, select “page colors and properties.”  Choose a color for your background by clicking on the blank rectangle.  Changes are always possible.  You can always re-do.  Later you may decide to use another color, a pattern, or an image for your background. You must completely return to the default setting before selecting your new background color or image.

5. Apply text to your page.  Use toolbar drop-down menus to select font style, size, and color.  Select a text color that contrasts nicely with your background.  Avoid complicated fonts that may not be readily available on other computers.  Do not copy-paste from an MSWord document.  The Microsoft programs are not compatible with Seamonkey.  You will have a mess. 

6. Write what you wish.  The visitor appreciates a page title and immediate indication of what the site is about.  For personal pages, common openings are “Hello,” “Welcome,” “Serena Williams’ Homepage,” etc.  Identify yourself.   The file name for this first page which you are creating must be index.  The page title (different from the file name) will be your name.  Look at the models.  You can make additions and changes on a continuing basis.

7. Insert a table by clicking the grid icon.  In the table set up window, select pixel width for cell/table frames.  Zero means that the cell frames will be dotted in Composer but invisible on the Web. Invisible tables help to keep information neatly organized and framed out on a page.  Reserve a cell for a link to the EIU homepage and another for a link to your own email, and another for EDU2022, which will link to your projects page.  You will add more links and graphics and learn how to link from your mainpage to other pages such as your resume and a model curriculum theme which you will develop later in the semester.  Directions for making links follow below.

8. Save your work.  Under File, select ‘save as’.  Scroll to your flash drive and the EDU2022 folder where you will save all of your work for this class. --  probably 'J' for your flash drive.

9.  Name your mainpage file with this name:  index.  You will see that Seamonkey will recognize that this is an html page and will apply the .html extension for you. The type-of-save bar is located below the file name bar.  This will say:  HTML files.  You do not need to type .html after your file name.  Hit  ‘SAVE.’A window will come up asking you for a page title (not the same as your file name).  Here, spell out exactly what your page is preferably using your name.  Example: Serena Williams’ Homepage.  Say OK after the page title is created.  Save to your disk.  Your page, created in Netscape Composer, is on your disk.  Save back to the disk after every change or addition.  Always begin your saves with ‘Save As,’ as a security measure.  Check to be sure the file name remains the same every time you make a revision.  To return to your saved files, use the open-file icon in Seamonkey Composer. Do not open from your flash by clicking on the file name.  If you do, the computer will open your file in Explorer. You will not be able to edit and revise in that browser.

10. Selecting and importing images and graphics.  After saving (above), minimize (park) your Composer page to the bottom of your screen.   Open a new page in any browser.  You will be back on the World Wide Web.

Visit a clip art or a graphics site.  When you arrive at an image you want for your page, place the cursor arrow right in the middle of the image.  Then, RIGHT click on the mouse button, select ‘save image as’ and select the drive where you have your storage disk.
***IMMEDIATELY**before saving the picture file***
BE VERY CAREFUL to RENAME*** the image with  4 to 8 single spaced lower case letters which you will remember, and save.  Do NOT use any upper case, dashes, underlines, SPACES, or numbers in your file name. Do not retype the .jpg or the .gif.  Every page you create and link to your mainpage will need to be named according to these directions.

Images from the Web, digital camera photos, scanned images should all be stored on your flash with your own specially assigned file names.

11. To put the image which you have renamed and saved onto your Composer page, return to the Composer page.  An image cannot stand alone.  Your image must be on a created page.   Place the cursor where you want the image to appear.  Click the image icon in the menu bar.  In the window, click ‘choose file’.   Select image file from your designated drive.  Select the image file by the name which you have assigned to it according to the directions in #9.   Hit ‘Apply’  and ‘Close’.   If you have saved this image from a Google search, be sure the image is in .jpg or .gif format.  If it appears on your disk as an html file, it will not transfer to your page as an image. (For Google image searches -- to be sure, always click on the image as it appears on the first viewing page and save from that result.)

12. Creating hotlinks to the WWW.  Select a spot on your page.  For example: type EIU homepage in one of the cells of your mainpage table. Select (highlight) the letters: EIU homepage.  Hit the link icon in the menu bar.  Type this address into the link window:   http://www.eiu.edu    Apply.  Close.   Anytime you use the link icon to turn text or an image into a link to a URL.,  the entire URL will need to be typed into the link window.  Composer doesn't tolerate any short cuts.  All links must begin with http://www.......

13. Creating a link to enable the visitor to email you:   In another, type Email indicating that the visitor may email you. Select (highlight) Email, as you have typed it into your table cell or elsewhere.  Once highlighted, hit the link icon in the menu bar.  Type this into the address bar of the link window: mailto:myeiulogin@pen.eiu.edu   (use your own email address in full – web-based email addresses are fine – just prefix with mailto: and use NO SPACES.  Apply.  Close.

14. 'Save as' (repeat step 8 above).   Save after every change.

15. Creating links to new pages within your site.  Before a page can be linked to another, it must exist.  Either that page is out there on the web, or you have created the page and it will be in your own directory on the pen.eiu.edu server. Here is an example:   Click the “New” blank page icon in your Composer menu bar.  Create your new page.   When finished,  under File, return to “save as.”  Give your new page a file name.  In the next window, spell out all words using capital letters and spaces and give it a title.  For example, a file name may be techinschools.html, but the title, the formal name of the page, which visitor’s will see across the top blue frame of your page on the Web may be “Technology in Schools” (review #9 above)

Save the new file to your disk.  Return to your index.html  page or any other on which you want to place a link to your new page.  Create the text or image which will provide the link to the new page.  Select or highlight the text or image.   Click the link icon.  Type in the exact name of the new file.  You may type in the file name (in which case, you do need to type .html) or you may choose the file to be linked from the storage disk.  Apply and close.  Save.  Do not expect your links to work in Composer.  The links will not be live until your page is posted to the server.

16. Repeat the above steps until you are finished.  Use invisible table cells to place text beside images or to align pages with several margins to monitor.  Unless you use invisible table cells, Composer will not allow any text to be beside (in the same row as) images.

Posting your page on the World Wide Web.  This is it!!  (You have 5mb EIU pen server space that is allotted to you due to your technology fee.  This is a reasonable storage space.  Remember it and use it. If any of your files from any classes are too big for your disk or if you forgot your flash drive, you can save them to your server space for storage, or you can email the files to yourself, or you can use the google cloud.  Back to the EDU2022 webpage -- remember that only ONE file on your server space can be named index.html.   You must have your pen address and password operational before you can post to your Web site. 

18.  Select   Programs  -- Win_SCP ( File Transfer Protocol)

19.  Under General
a) Profile Name: leave this blank unless you are on your own computer.
b) Host Name: pen.eiu.edu
c) Host Type: Automatic Detect
d) User ID:  your eiu login
e) Password:  your pen email password  (be sure the anonymous box is NOT checked)
f) Account:  leave blank
g) Comments:  blank, unless you save under the profile name.  Then you write what you wish.

20. The other options can be omitted.

21. Click OK.  A box appears.  Click "yes"  This connects you to what is necessary to upload file to your website.

22. On the left side of the screen, scroll to 'J'\  your flash, as needed.  Your flash must be in the drive for you to post your newly created Composer files and saved image(s).  Click the down arrow in the white box above the left window until your flash drive appears in the white box.  You should see your file names that you have saved on your flash appear in the left panel.

23. ****ABSOLUTELY IMPORTANT: In the right panel, click on the folder marked  ‘www’    You should see home/youreiulogin/www  the blue bar above the right panel.

24.  In the left window, left click on the names of  each of the files you wish to send to the web and simply drag them into the right window.
(Remember that each time you change your index.html page or any page in anyway you will need to re-save it to your flash and re-post it to your http folder.   See the Making Changes Tutorial on your course calendar)

25. Drag your image files to the server (right window) as well. These will not automatically transfer with the .html files where you have inserted them.

26. When you have finished sending files to the web, click ‘Close’ or X out of Win_SCP.

27. Return to Explorer or Seamonkey browser and search yourself from the EIU mainpage.

If all goes well, your page and/or the changes you have made are on the web!!   They can be read from the Space Station, in Australia, etc. at light speed!!
 

If you are leaving Win_SCP open during your work, each time you save some changes you have made to your flash drive, you will need to hit the REFRESH  button  (little greem arrows in a circle - in the Win-SCP panel.  Use green arrows only to refresh and send Win_SCP back to your flash drive to pick up those changes. Never use the blue arrows.  Once you drag changed files to the right panel, you can go back to the browser to see them.  Once in the browser  use the RELOAD command in Seamonkey or Explorer to see any changes you have sent to the Web during the same work session on the Web.

J.Barford, revised, Fall, 2012