1. Mozilla Suite 1.7 Web Browser E-mail and newsgroup client, IRC chat client, and HTML editing Download: http://www.mozilla.org/products/mozilla1.x/

2. Create a Folder Called: website1 Save All web pages & graphics inside of your website1 folder first before adding any links or images index.html math.html logo.gif graphic1.jpg

3. Launch Mozilla Web Browser

4. File>New>Composer Page

5. A Blank Page You Can Edit Opens Up in Front of the Browser Window

6. Format>Page Title and Properties

7. Add The Title, Author, Description

8. File>Save As Before adding any graphics or links Your main homepage must be named index.html All lowercase letters, no spaces, and no special characters. Place all web pages and graphic images inside of your website1 folder (.jpg,.gif,.html) before adding any links or images to your web pages.

9. Format>Page Colors & Background

10. Default White Background & Link Colors Recommended

11. Insert>Table or Select the Table Icon Along the Top

12. Header: 1 Row, 2 Columns, 0 Border, OK

13. With a 0 Border The Table Edge Will Not Show When Posted

14. Type Your Initials in Cell 1, and The Title in Cell 2

15. Highlight Text, Format>Font> Select Desired Font Type

16. Highlight The Text, go to Format>Size>XX-Large for Heading

17. Logo & Title With A New Font & Resized

18. Table>Select>Table

19. Format>Table Cell Properties

20. Table Tab Selected to Make Changes to Your Table

21. Cells Tab Selected to Make Changes to Individual Cells

22. Cells Tab Selected, Check Background Color, Select Color It is difficult to get the software to change colors so be sure of your choice before selecting it.

23. Color Choice, OK

24. May Need to Add Color to Each Cell Separately

25. Option: Select the Text Logo, Press Delete Key, to Add an Image

26. File>Save As

27. Name the Page index.html, Location Desktop, HTML, Save

28. Click in the Left Cell, Insert>Image, or Click Image Icon All web pages and graphic images must be placed inside of your website1 folder before adding any links or images to work correctly.

29. Location Tab, Check Relative, Alternative Text Name, Choose File Image must be in the website1 folder before adding to the web page.

30. Navigate to find the.gif or.jpg file placed in website1 folder

31. Only the Filename Should Show, Not The Path to the File

32. Select the Radial Button For Alternate Text, Provide a Description of the Graphic Image Individuals With Disabilities May Use Auditory Readers That Will Read The Text Aloud To Them

33. Your Graphic Image Now Appears

34. Click the Curser Below Heading, Insert>Table, or Table Icon I

35. Row 1, Column 7, Width 100%, Border 0, OK

36. Type The Navigation Links Related to Your Professional Interest Area May Be Different From Example

37. Highlight the Text, Format>Font>Ariel

38. Ariel Font Works on Both PC & Mac Platforms, Good Readability

39. Link Your Navigation: Select the Text in Cell 1, Insert>Link, or Icon

40. Your Homepage is Named index.html, OK Name All Files With Lowercase Letters, No Spaces, No Special Characters, and Add The Correct File Extensions

41. Select the Text in Cell 2, Insert>Link, newname.html, OK curriculum.html

42. Select the Text in Cell 3, Insert>Link, newname.html, OK instructor.html

43. Select the Text in Cell 4, Insert>Link, newname.html, OK resources.html

44. Select the Text in Cell 5, Insert>Link, newname.html, OK evaluation.html

45. Select the Text in Cell 6, Insert>Link, newname.html, OK standards.html

46. Select the Text in Cell 7, Insert>Link, newname.html, OK sitemap.html

47. The Navigation Links Are Now Blue & Underlined

48. Table>Select>Table

49. Format>Table Cell Properties, Background Color

50. Select Desired Color, Remember it is Difficult to Change, OK

51. Can See the New Navigation Background Color

52. Select Text, Format>Font>Helvetica

53. Select Below Navigation, Table Icon, 1 Row, 2 Columns, OK I

54. Can Add A Graphic Image to the Left Cell, & Text to Right

55. Click in the Left Cell, Insert>Image, or Image Icon, Choose File

56. Navigate to Locate the.gif or.jpg Image Saved to website1

57. Be Sure You Only Have the File Name and Not the Path Provide The ALT Tag

58. Click in the Right Cell to Add Your Text I

59. Add The Text For Your index.html Page

60. File>Save As, index.html to Your Desktop

61. File>Browse to Preview Your Page

62. The Preview Window Opens in Front of the Edit Window

63. To Create Your Other Webpages Delete the Bottom Table

64. Change Your Title To Match The Navigation For the Next Page File>Save As Example: curriculum.html

65. Change Your Title To Match The Navigation For the Next Page File>Save As Example: instructor.html

66. Change Your Title To Match The Navigation For the Next Page File>Save As Example: resources.html

67. Change Your Title To Match The Navigation For the Next Page File>Save As Example: evaluation.html

68. Change Your Title To Match The Navigation For the Next Page File>Save As Example: standards.html

69. Change Your Title To Match The Navigation For the Next Page File>Save As Example: sitemap.html

70. Here is an Example of the Files inside of the website1 folder index.html curriculum.html instructor.htm resources.htm evaluation.htm standards.htm sitemap.htm logomouse.gif womangraphic.gif

71. File>Preview in Browser, Test the Links

72. After Saving & Closing Your Files, Open Mozilla

73. Go to File>Open File

74. Select: index.html inside of the website1 folder

75. Your Page Opens in Preview Mode

76. File>Edit Page to Continue Working

77. Page in Edit Mode

78. To Return to Preview go to File>Browse Page

79. To add an External Link: Type desired text & highlight, then select the link icon, add full URL & OK

80. The Active Link is Now Blue in Color and Underlined

81. To Add a E-mail Link, Type Desired Text, Highlight

82. Click Link Icon, Type in mailto:hollandj@emporia.edu Replace hollandj with your e-mail name

83. Blue Underlined E-Mail Link is Active

84. For Long Pages of Text Add Anchors to Avoid Scrolling

85. Highlight Text, Click the Link Icon, #name, Do This For Each One Example: #block1

86. Type in the Names Where You Want to Jump To

87. Click in Front of Block 1, go to Insert>Named Anchor I

88. The Anchor Name Needs to be an Exact Match Without the # Example: block1

89. The Yellow Anchor Only Shows in Preview Mode

90. Duplicate the Steps to Add Anchors to All Jump Areas

91. File>Browse Page

92. In the Preview Window You Can Test The Jump Anchor Links

93. To View the HTML Code Generated Select the Tab Below

94. Normal Tab to Continue Editing

95. Preview Tab To View & Test

96. Example of Files Inside of Your website1 Folder

97. Reminder: All web pages and images placed inside of your website1 folder will be uploaded to your server space.

98. You Are Ready To Upload All Files to Your iDrive/My Files Web Server Space See the iDrive/My Files Presentation Instructions Remember to Test Your Website After Uploading to Be Sure All Graphics Show, and All Links Work Correctly