Using Mozilla Sea Monkey

4,134 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,134
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
68
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Using Mozilla Sea Monkey

  1. 1. Using Mozilla SeaMonkey… to Build Web Pages Created by Desire é Caskey View this presentation at http://www.slideshare.net Search for Caskey
  2. 2. Before you Build… <ul><li>Web Page Design Worksheet </li></ul><ul><li>Project Folder </li></ul><ul><li>Downloading Images </li></ul><ul><li>Citing Sources </li></ul><ul><li>Installing Software </li></ul>
  3. 3. Using Web Design Worksheet <ul><li>Pre-Planning worksheet – before technology </li></ul><ul><li>Saves time </li></ul><ul><li>Helps you visualize your web page </li></ul><ul><li>Helps you plan for elements </li></ul><ul><ul><li>Pictures </li></ul></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Layout </li></ul></ul>
  4. 4. Creating a Project Folder <ul><li>Start page is named index.htm(l) </li></ul><ul><li>Download all images/sounds into this folder </li></ul><ul><li>Use Relative Linking </li></ul><ul><ul><li>Allows you to move your website without losing links </li></ul></ul><ul><li>Name all files with lowercase and no spaces </li></ul>
  5. 5. Downloading Images Citing Sources <ul><li>Instructions for downloading images – Mac </li></ul><ul><li>Instructions for downloading images – PC </li></ul><ul><li>Copy and paste an Internet address into your document. </li></ul>
  6. 6. Installing the necessary software <ul><li>Visit Mozilla.org [http://www.mozilla.org] </li></ul><ul><ul><li>Other Mozilla Software </li></ul></ul><ul><ul><li>SeaMonkey </li></ul></ul><ul><ul><ul><li>Select your platform (Mac, Windows) </li></ul></ul></ul><ul><ul><ul><li>Follow on screen instructions </li></ul></ul></ul>
  7. 7. Using SeaMonkey <ul><li>Launch SeaMonkey </li></ul><ul><li>From the File Menu choose New > Composer Page </li></ul><ul><li>HINT: </li></ul><ul><li>Composer = Editor </li></ul><ul><li>Build web pages in Composer Mode </li></ul><ul><li>Navigator = Browser </li></ul><ul><li>Surf the Internet in Navigator Mode </li></ul>
  8. 8. Use the Window menu to move between Navigator & Composer Use this menu to change the appearance of your text Use this button to test your web page Don’t forget to save first Start your web page by inserting a table Don’t forget to spell check before you publish Insert Hyperlinks & Images
  9. 9. Let’s Start with a Table… Click on the Table button and fill out the necessary information
  10. 10. Save Your Document Click the Save button to bring up the Save Dialog Box Put a title on your page. This is not the file name Name your first file index.html and save it into your web page project folder
  11. 11. Add your content… <ul><li>Decide where your navigation bar will be </li></ul><ul><li>Join Cells to create more space and insert graphics </li></ul><ul><li>Resize graphics before inserting </li></ul>
  12. 12. Tips & Tricks…working with images <ul><li>Download the image into your project folder first </li></ul><ul><li>Resize your image before adding it to your page </li></ul><ul><li>Make the image relative to your file </li></ul>
  13. 13. <ul><li>Choose File </li></ul><ul><li>Select Don’t use alternate text </li></ul><ul><li>Make sure you can see the image in the preview </li></ul><ul><li>Click OK </li></ul>
  14. 14. Managing Tables… <ul><li>It is easier to take away rows and columns than it is to add them. </li></ul><ul><li>Don’t let the shifting columns bother you. </li></ul><ul><li>Join Selected cells to customize the look. </li></ul><ul><li>Learn pixels. </li></ul>
  15. 15. Tables of different pixel width 100 pixels 300 pixels 500 pixels
  16. 16. Join selected cells <ul><li>Highlight across the cells you want to join </li></ul><ul><li>From the Table menu, choose Join Selected Cells </li></ul>Individual cells Joined cells
  17. 17. Table Properties <ul><li>Adjust table size </li></ul><ul><li>Designate number of rows and columns </li></ul><ul><li>Create borders and spacing </li></ul><ul><li>Align table in document </li></ul><ul><li>Create a background color </li></ul>
  18. 18. Cell Properties <ul><li>Adjust height and width of each cell </li></ul><ul><li>Adjust alignment of text in a cell </li></ul><ul><li>Wrap text option </li></ul><ul><li>Add a background color to a cell </li></ul><ul><li>Click Next or Previous to work on another cell </li></ul>
  19. 19. Inserting Hyperlinks <ul><li>Hyperlinks can be text or images </li></ul><ul><li>There are five basic types of hyperlinks: </li></ul><ul><ul><li>Link to a website </li></ul></ul><ul><ul><li>Link to another web page on your web site </li></ul></ul><ul><ul><li>Link to another document on your web site </li></ul></ul><ul><ul><li>Link to a location in the same web document </li></ul></ul><ul><ul><li>Link to an email address </li></ul></ul>
  20. 20. Link to a Web Site <ul><li>Select text or image you want to make a link </li></ul><ul><li>Click on the Link button </li></ul><ul><li>Type in the web address </li></ul><ul><ul><ul><li>example: http://www.billings.k12.mt.us/tilt </li></ul></ul></ul>
  21. 21. Link to another web page on your web site <ul><li>Select text or image you want to make a link </li></ul><ul><li>Click on the Link button </li></ul><ul><li>Click Choose File </li></ul><ul><li>Locate web page in your project folder </li></ul><ul><li>Click OK </li></ul>
  22. 22. Link to another document on your web site <ul><li>Select text or image you want to make a link </li></ul><ul><li>Click on the Link button </li></ul><ul><li>Click Choose File </li></ul><ul><li>Locate the file in your web project folder </li></ul><ul><ul><li>examples: powerpoint, pdf, word, image </li></ul></ul>
  23. 23. Link to a location in the same web document <ul><li>Step 1: click in the document where you want the link to go </li></ul><ul><li>Step 2: Click on the Anchor button </li></ul><ul><li>Step 3: Give your Anchor a name </li></ul><ul><li>Select text or image you want to make a link </li></ul><ul><li>Click on the Link button </li></ul><ul><li>Click on the drop-down menu to select the anchor to link to </li></ul>
  24. 24. Link to an email address <ul><li>Select text or image you want to make a link </li></ul><ul><li>Click on the Link button </li></ul><ul><li>Type “mailto:” and the email address you want to link to </li></ul><ul><ul><ul><li>example: mailto:caskeyd@billings.k12.mt.us </li></ul></ul></ul>

×