Introduction to KompoZer Created Revised 6/2/ Office of Information, Technology and Accountability

2 Created 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.

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 Revised 6/2/ Office of Information, Technology and Accountability

Digital Citizenship Links spx spx Created Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

In order to download the program. Go to and download the program. Created Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

Example of How CSS Is Used Click on the link below shows non css page sample.html sample.html /210.css&page=0 is a page with CSS. /210.css&page=0 Created Revised 6/2/ Office of Information, Technology and Accountability

Start creating CSS Click on CSS Created Revised 6/2/ Office of Information, Technology and Accountability

General tab Created Revised 6/2/ Office of Information, Technology and Accountability

KomoZer prompts you to save the page Created Revised 6/2/ Office of Information, Technology and Accountability

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

Style Rule Created Revised 6/2/ Office of Information, Technology and Accountability

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

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

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 Revised 6/2/ Office of Information, Technology and Accountability

Borders Continue to the next tab, borders to select anything you would like for the borders of your pages Created Revised 6/2/ Office of Information, Technology and Accountability

Boxes This is where you would select the type of boxes if any, you would like Created Revised 6/2/ Office of Information, Technology and Accountability

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

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 dd-css-menu-buttons-with-kompozer.shtml dd-css-menu-buttons-with-kompozer.shtml Created Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

Normal View Created Revised 6/2/ Office of Information, Technology and Accountability

HTML View Created Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 click on the box to link the . 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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

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 Revised 6/2/ Office of Information, Technology and Accountability

Sample: Created Revised 6/2/ Office of Information, Technology and Accountability

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

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 Revised 6/2/ Office of Information, Technology and Accountability

Resources ISTE Publications, Digital Citizenship in Schools by Mike Ribble and Gerald Bailey, copyright 2007, ISBN No: pozer-tutorial-2.shtml pozer-tutorial-2.shtml Created Revised 6/2/ Office of Information, Technology and Accountability