1. Introduction to KompoZer Created 1-9-07 Revised 6/2/2010 1 Office of Information, Technology and Accountability

2. 2 Created 1-9-07 Revised 6/2/2010 While Waiting ~ Create a folder Name it webpage  Inside the webpage folder create:  A folder named images  A folder name assets Search the Internet and look at pages you may like and bookmark them.

3. Nine Elements of Digital Citizenship Student Learning and Academic Performance 1. Digital Access: full electronic participation in society 2. Digital Literacy: the process of teaching and learning about technology and the use of technology 3. Digital Communication: electronic exchange of information School Environment and Student Behavior 4. Digital Security & Safety: electronic precautions to guarantee safety/physical well-being in a digital technology world 5. Digital Etiquette: electronic standards of conduct or procedure 6. Digital Rights and Responsibilities: those freedoms extended to everyone in a digital world Student Life Outside the School Environment 7. Digital Commerce: electronic buying and selling of goods 8. Digital Health and Wellness: physical and psychological well-being 9. Digital Law: rights and restrictions Created 1-9-07 Revised 6/2/2010 3 Office of Information, Technology and Accountability

4. Digital Citizenship Links www.digitalcitizenship.net www.digitalcitizenshiped.com/Curriculum.a spx www.digitalcitizenshiped.com/Curriculum.a spx www.netsmartz.org http://cybersmart.org/ www.bpscybersafety.org/index.html www.staysafeonline.info/ Created 1-9-07 Revised 6/2/2010 4 Office of Information, Technology and Accountability

5. Standards Addressed Standard 2: Demonstrate the responsible use of technology and an understanding of ethics and safety issues in using electronic media at home, in school, and in society. Standard 3 : Demonstrate the ability to use technology for research, critical thinking, problem solving, decision making, communication, collaboration, creativity, and innovation. Created 1-9-07 Revised 6/2/2010 5 Office of Information, Technology and Accountability

6. KOMPOZER By the end of this of this session you will know and be able to: Create at least two pages of your webpage. Understand the way WebPages are created and hosted. Understand how to develop a CSS file and the importance of them. Created 1-9-07 Revised 6/2/2010 6 Office of Information, Technology and Accountability

7. 7 Created 1-9-07 Revised 6/2/2010 You Will Demonstrate This By Creating a 2-3 page website

8. A universal format document shared on the internet which is able to include texts, images, sounds, movies, and other format data. Is written in computer languages such as (X)HTML, CSS, and JavaScript A Web Page is… Created 1-9-07 Revised 6/2/2010 8 Office of Information, Technology and Accountability

9. What is KompoZer? KompoZer is free downloadable, shareware, Web Authoring System which integrates web page development and web file management. It provides a web page editor which has a simple graphical (wysiwyg – what you see is what you get) interface. With KompoZer, newcomers will quickly and easily be able to produce new web pages. Created 1-9-07 Revised 6/2/2010 9 Office of Information, Technology and Accountability

10. In order to download the program. Go to http://www.kompozer.net/http://www.kompozer.net/ and download the program. Created 1-9-07 Revised 6/2/2010 10 Office of Information, Technology and Accountability

11. Why use CSS? Assures all pages look the same Create the code once and have it go to each of your pages To create continuity and allow for visual appealing pages. Created 1-9-07 Revised 6/2/2010 11 Office of Information, Technology and Accountability

12. Example of How CSS Is Used Click on the link below shows non css page http://www.csszengarden.com/zengarden- sample.html http://www.csszengarden.com/zengarden- sample.html http://www.csszengarden.com/?cssfile=/210 /210.css&page=0 is a page with CSS. http://www.csszengarden.com/?cssfile=/210 /210.css&page=0 Created 1-9-07 Revised 6/2/2010 12 Office of Information, Technology and Accountability

13. Start creating CSS Click on CSS Created 1-9-07 Revised 6/2/2010 13 Office of Information, Technology and Accountability

14. General tab Created 1-9-07 Revised 6/2/2010 14 Office of Information, Technology and Accountability

15. KomoZer prompts you to save the page Created 1-9-07 Revised 6/2/2010 15 Office of Information, Technology and Accountability

16. CSS opening page The page will open to this screen, here you will first click on drop down menu and select body Created 1-9-07 Revised 6/2/2010 16 Office of Information, Technology and Accountability

17. Style Rule Created 1-9-07 Revised 6/2/2010 17 Office of Information, Technology and Accountability

18. Body Rule Select body to create a rule for the body of your page. Click on create style rule Created 1-9-07 Revised 6/2/2010 18 Office of Information, Technology and Accountability

19. Text tab Click on the text tab and the follow through and make the selections you want for the body of your page Created 1-9-07 Revised 6/2/2010 19 Office of Information, Technology and Accountability

20. Background Next select the background tab at the top and continue to make your selections for what you would like the background of your pages. Created 1-9-07 Revised 6/2/2010 20 Office of Information, Technology and Accountability

21. Borders Continue to the next tab, borders to select anything you would like for the borders of your pages Created 1-9-07 Revised 6/2/2010 21 Office of Information, Technology and Accountability

22. Boxes This is where you would select the type of boxes if any, you would like Created 1-9-07 Revised 6/2/2010 22 Office of Information, Technology and Accountability

23. Lists The next tab is for List, if you would like to have them, select the type you want at this box. Created 1-9-07 Revised 6/2/2010 23 Office of Information, Technology and Accountability

24. Finished with the CSS Click ok at the end and you are finished with creating your CSS file. You must make sure that this file is saved in the same location as all of your pages to assure that is works correctly. Additional resources are available at http://www.thesitewizard.com/webdesign/a dd-css-menu-buttons-with-kompozer.shtml http://www.thesitewizard.com/webdesign/a dd-css-menu-buttons-with-kompozer.shtml Created 1-9-07 Revised 6/2/2010 24 Office of Information, Technology and Accountability

25. New to create a new page or site. Open to open an existing page or site. Save to save the current changes. Publish to publish the current page to your Web server. Browse to view the current page in a Web browser. Anchor to add a link. Image to add an image. Table to add a table. Form to add an HTML form. KaZcadeS to open a CSS editor. Menu Bar for KompoZer Created 1-9-07 Revised 6/2/2010 25 Office of Information, Technology and Accountability

26. Text type drop-down CSS class Emphasis ( ) Strong emphasis ( ) Ordered and unordered lists Orderedunorderedlists Indent and outdent text - note this uses a tag and styles, not Definition term and descriptions for a definition list.termdescriptionsdefinition list Layers and z-index values (bring-to-front and send-to-back) - again using the tag Layersz-index The last few icons work with layers to position them pushing them to the top, right, bottom, left, and center. This uses absolute positioning.position Further explanation of the tool bars Created 1-9-07 Revised 6/2/2010 26 Office of Information, Technology and Accountability

27. One of the most amazing things about KompoZer is that it has a site manager. This allows you to group files on your hard drive together as Web sites and then publish them. Site Manager Created 1-9-07 Revised 6/2/2010 27 Office of Information, Technology and Accountability

28. Different views The page window is where you do your work in KompoZer. You have 4 views in this pane: Normal the WYSIWYG window where you'll do most of your editing. HTML Tags which is similar to Normal, but it shows the tags that are inserted and where they are. Source which is an HTML editor. Preview provides a view of the page in a Web browser. Created 1-9-07 Revised 6/2/2010 28 Office of Information, Technology and Accountability

29. Normal View Created 1-9-07 Revised 6/2/2010 29 Office of Information, Technology and Accountability

30. HTML View Created 1-9-07 Revised 6/2/2010 30 Office of Information, Technology and Accountability

31. Let’s get started So now you have your layout and you need to add text and images. Remember this is what you see is what you get (wysiwyg) so the page is set up the same way you want it to look. Created 1-9-07 Revised 6/2/2010 31 Office of Information, Technology and Accountability

32. Inserting pictures The most important thing about inserting pictures is that they must be in the same folder as your other web materials or you will upload and get a red X in the place where the photo should be.. Now click on insert image,locate the picture and be sure to add alternate text. ( this is important for people who are using a text reader to be able to view your page ) If you would like to have your picture a certain size,change the appearance or link it, this is where you would do all of these things. Created 1-9-07 Revised 6/2/2010 32 Office of Information, Technology and Accountability

33. Appearance of Image Click the "Appearance" tab in the dialog box. You can now change the alignment of the image. Click the down arrow in the box under the "Align Text to Image" field to display a menu with the options available for that item. Select the item "Wrap to the right" on that drop down menu. This will cause any text that follows your picture to move to the right of the image Created 1-9-07 Revised 6/2/2010 33 Office of Information, Technology and Accountability

34. Inserting Hyperlinks: Hyperlinks take you from one location to another on the Internet. Click on Insert and then go to link or use (clt+l) Where it says link location add the link or browse for a page you want to link to. Then click ok. If it is an email click on the box to link the email. Note: you should link all of your pages, and if a page is incomplete, write something on it that says it is under construction. That way people know your working on it. Created 1-9-07 Revised 6/2/2010 34 Office of Information, Technology and Accountability

35. To create a series of links to other pages within your Website, do the following: Move your cursor to the bottom of the page. Leave a blank line after the paragraph above. We will be creating a navigation bar for this site at the bottom of this page. Select "Insert | Link" from the menu. Enter "Home" (without the quotes) in the box entitled "Enter text to display for the link". This will be the underlined text that visitors will see. For the "Link Location" field, enter "index.html". Click the OK button. Created 1-9-07 Revised 6/2/2010 35 Office of Information, Technology and Accountability

36. Continued: Using the same procedure, add links to the following pages as well:  Home Home  Class Resources Class Resources  Calendar of Events Calendar of Events  Parents Parents  Students Students  Springfield Public Schools Springfield Public Schools Separate the links using a space and a vertical bar. For those who don't know how to get the vertical bar, you can find it on your keyboard. When you've finished this, the bottom of your page should look like the following: Home |Class Resources | Calendar of Events | Parents Students | Springfield Public Schools HomeClass ResourcesCalendar of EventsParentsStudents Springfield Public Schools Created 1-9-07 Revised 6/2/2010 36 Office of Information, Technology and Accountability

37. Creating another page: Create a new page based on the Index page by saving it with a new name. Class.html for example then go to format>page title and properties. Change the name of the page to Class, fill in the information necessary and then click on ok. You now have a new page that is similar to the first page and you can just change the text. Created 1-9-07 Revised 6/2/2010 37 Office of Information, Technology and Accountability

38. Sample: Created 1-9-07 Revised 6/2/2010 38 Office of Information, Technology and Accountability

39. 39 Created 1-9-07 Revised 6/2/2010 Your Turn: Create a 2-3 page webpage

40. Rubric CATEGORY4321 ContentAll information provided on the web site is accurateAlmost all the information provided on the web site is accurate.Several statements are not accurateThere are more than three inaccuracies in the site. GraphicsGraphics are related to the theme/purpose of the site, are thoughtfully cropped, are of high quality and enhance reader interest or understanding. There are no broken images. Graphics are related to the theme/purpose of the site, are of good quality and enhance reader interest or understanding. There are no broken images. Graphics are related to the theme/purpose of the site, and are of good quality. There may be a few broken images. Graphics seem randomly chosen, are of low quality, OR distract the reader. Many images are broken. NavigationLinks for navigation are clearly labeled, consistently placed, allow the reader to easily move from a page to related pages (forward and back), and take the reader where s/he expects to go. A user does not become lost. Links for navigation are clearly labeled, allow the reader to easily move from a page to related pages (forward and back), and internal links take the reader where s/he expects to go. A user rarely becomes lost. Links for navigation take the reader where s/he expects to go, but some needed links seem to be missing. A user sometimes gets lost. Some links do not take the reader to the sites described. A user typically feels lost. FontsThe fonts are consistent, easy to read and point size varies appropriately for headings and text. Use of font styles (italic, bold, underline) is used consistently and improves readability. The fonts are consistent, easy to read and point size varies appropriately for headings and text. The fonts are consistent and point size varies appropriately for headings and text. A wide variety of fonts, styles and point sizes was used. CopyrightFair use guidelines are followed with clear, easy-to-locate and accurate citations for all borrowed material. No material is included from websites that state that permission is required unless permission has been obtained. Fair use guidelines are followed with clear, easy-to-locate and accurate citations for almost all borrowed material. No material is included from websites that state that permission is required unless permission has been obtained. Fair use guidelines are followed with clear, easy-to-locate and accurate citations for most borrowed material. No material is included from websites that state that permission is required unless permission has been obtained. Borrowed materials are not properly documented OR material was borrowed without permission from a site that requires permission Contact InformationEvery web page contains a statement of authorship, school name, and date of publication/date last edited. Almost all web pages contain a statement of authorship, school name, and date of publication/date last edited. Most (75-80%) web pages contain a statement of authorship, school name, and date of publication/date last edited. Several web pages do not contain a statement of authorship, school name, and/or date of publication/date last edited. Spelling and GrammarThere are either no spelling or grammatical errors, but there may be one or two very minor spelling and/or grammatical errors in the entire site. There are a few spelling and/or grammatical errors in the entire site. There are several spelling and/or grammatical errors in the entire site. There are maybe many spelling and/or grammatical errors in the entire site. Created 1-9-07 Revised 6/2/2010 40 Office of Information, Technology and Accountability

41. Resources ISTE Publications, Digital Citizenship in Schools by Mike Ribble and Gerald Bailey, copyright 2007, ISBN No: 978-1-56484-232-9. http://www.kompozer.net/ http://www.thesitewizard.com/gettingstarted/kom pozer-tutorial-2.shtml http://www.thesitewizard.com/gettingstarted/kom pozer-tutorial-2.shtml Created 1-9-07 Revised 6/2/2010 41 Office of Information, Technology and Accountability