Copyright Fair use guidelines are followed with clear

Shared by: 3tSEp2

Tags

Stats

views:: 0
posted:: 6/6/2012
language:
pages:: 41

Public Domain

Document Sample

Introduction to
KompoZer

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 1
Accountability
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.

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 2 Accountability
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 Office of Information, Technology and
Revised 6/2/2010 3 Accountability
Digital Citizenship Links
 www.digitalcitizenship.net
 www.digitalcitizenshiped.com/Curriculum.a
spx
 www.netsmartz.org
 http://cybersmart.org/
 www.bpscybersafety.org/index.html
 www.staysafeonline.info/

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 4 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 5 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 6 Accountability
You Will Demonstrate This By

 Creating a 2-3 page website

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 7 Accountability
A Web Page is…
 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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 8 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 9 Accountability
In order to download the program.

 Go to http://www.kompozer.net/
and download the program.
Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 10 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 11 Accountability
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/?cssfile=/210
/210.css&page=0 is a page with CSS.

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

Click on CSS

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

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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 15 Accountability
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 Office of Information, Technology and
Revised 6/2/2010 16 Accountability
Style Rule

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

 Click on create
style rule

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 18 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 19 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 20 Accountability
Borders
 Continue to the
next tab, borders
to select anything
you would like for
the borders of
your pages

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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 22 Accountability
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 Office of Information, Technology and
Revised 6/2/2010 23 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
http://www.thesitewizard.com/webdesign/a
dd-css-menu-buttons-with-kompozer.shtml
Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 24 Accountability
Menu Bar for KompoZer

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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 27 Accountability
Different views
The page window is where you do your work in KompoZer. You have
4 views in this pane:
Normal
the WYSIWYG Source
window where which is an
you'll do most of HTML editor.
your editing.

Preview
provides a
HTML Tags view of the
which is similar page in a
to Normal, but it Web browser.
shows the tags
that are
inserted and
where they are.
Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 28 Accountability
Normal View

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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 30 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 31 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 32 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 33 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
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 Office of Information, Technology and
Revised 6/2/2010 34 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 35 Accountability
Continued:
 Using the same procedure, add
links to the following pages as well:
 Home
 Class Resources
 Calendar of Events
 Parents
 Students
 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
Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 36 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 1-9-07 Office of Information, Technology and
Revised 6/2/2010 37 Accountability
Sample:

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

 Create a 2-3 page webpage

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 39 Accountability
CATEGORY 4 3
Rubric 2 1

Content All information provided on the web site is accurate Almost all the information provided on the web site is accurate. Several statements are not accurate There are more than three inaccuracies
in the site.

Graphics Graphics are related to the theme/purpose of the site, are Graphics are related to the theme/purpose of the site, are of good Graphics are related to the theme/purpose of the site, and are Graphics seem randomly chosen, are
thoughtfully cropped, are of high quality and enhance reader quality and enhance reader interest or understanding. There are of good quality. There may be a few broken images. of low quality, OR distract the reader.
interest or understanding. There are no broken images. no broken images. Many images are broken.

Navigation Links for navigation are clearly labeled, consistently placed, allow Links for navigation are clearly labeled, allow the reader to easily Links for navigation take the reader where s/he expects to go, Some links do not take the reader to
the reader to easily move from a page to related pages (forward move from a page to related pages (forward and back), and but some needed links seem to be missing. A user sometimes the sites described. A user typically
and back), and take the reader where s/he expects to go. A user internal links take the reader where s/he expects to go. A user gets lost. feels lost.
does not become lost. rarely becomes lost.

Fonts The fonts are consistent, easy to read and point size varies The fonts are consistent, easy to read and point size varies The fonts are consistent and point size varies appropriately A wide variety of fonts, styles and
appropriately for headings and text. Use of font styles (italic, bold, appropriately for headings and text. for headings and text. point sizes was used.
underline) is used consistently and improves readability.

Copyright Fair use guidelines are followed with clear, easy-to-locate and Fair use guidelines are followed with clear, easy-to-locate and Fair use guidelines are followed with clear, easy-to-locate Borrowed materials are not properly
accurate citations for all borrowed material. No material is accurate citations for almost all borrowed material. No material is and accurate citations for most borrowed material. No documented OR material was
included from websites that state that permission is required unless included from websites that state that permission is required material is included from websites that state that permission borrowed without permission from a
permission has been obtained. unless permission has been obtained. is required unless permission has been obtained. site that requires permission

Contact Information Every web page contains a statement of authorship, school name, Almost all web pages contain a statement of authorship, school Most (75-80%) web pages contain a statement of authorship, Several web pages do not contain a
and date of publication/date last edited. name, and date of publication/date last edited. school name, and date of publication/date last edited. statement of authorship, school name,
and/or date of publication/date last
edited.

Spelling and Grammar There are either no spelling or grammatical errors, but there may There are a few spelling and/or grammatical errors in the entire There are several spelling and/or grammatical errors in the There are maybe many spelling and/or
be one or two very minor spelling and/or grammatical errors in the site. entire site. grammatical errors in the entire site.
entire site.

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 40 Accountability
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

Created 1-9-07 Office of Information, Technology and
Revised 6/2/2010 41 Accountability