SCHOOLINSITES: The Next Stepimages.pcmac.org/Uploads/DemoDistrictSites/Sherry... · Web viewDoris has been with SchoolinSites since the inception of the company. She developed the

Adding Pizzazz to Your WebsiteKitty Rigdon (Lithia Springs High School)Wendy Douglas (Douglas County Schools)Doris Moody (SchoolinSites)

Kitty Rigdon - Teacher, Lithia Springs High SchoolKitty is a graduate of Florida State University and has been teaching since 2002. She currently teaches Chemistry (including Honors Chemistry) at Lithia Springs High School in the Douglas County School System. Kitty is married to Kent, who also works at the high school, and has one brother. Kitty believes that having the ability to personalize her SchoolinSites website has helped her express her creativity and do something fun and different from anyone else's page. Also, it's really opened up her classroom to anyone who has intrest, and has made communication with parents far more effective.

Wendy Grey - Instructional Tech Coord., Douglas County SchoolsWendy is a graduate of The State University of West Georgia. She began her career at Eastside Elementary as a 1st grade teacher in 1985 and is currently the Instructional Technology Coordinator for Douglas County Schools. Wendy is married to John and has two children. Her oldest is now teaching 1st grade at Eastside Elementary and her youngest is a Junior in high school. Wendy actively supports the efforts of her schools' website efforts through continued training. She herself contributes to the district website in many areas such as updating the Technology portion of the website and supporting other departments through continued training and support as needed.

Doris Moody - Director of Sales Development, SchoolinSitesDoris has been with SchoolinSites since the inception of the company. She developed the training program that is still being used today to roll out school and district websites all across the country. Doris is married to Eddy and has three grown children. As a parent, she realized the value of this program in providing continued involvement into her boys’ academic lives as well as school activities. In her ten years plus of working with users, she has learned so much and is pleased to share that knowledge with each new customer. She

GaETC 2008: Session 148 - Adding Pizzazz to Your Website- 1-

currently is more active in promoting the product through the development of new account managers/sales representatives but admits that she would like to continue to take an active role and interest training and support.


Adding Pizzazz to your Website

There are countless ways to add a little spice and flavor to your website. You can take your website navigation to a whole new level! Kitty’s presentation today will be focused on some of the ways that she has used her text editor to “jazz up” her teacher website.

These are just a few ways to add some pizzazz to your web pages. This handout contains Quick Reference Guides for all of the functionality to be discussed today and more! We will instruct you to the appropriate page as Kitty illustrates how she used some of these methods to create her teacher website.

Topic What Does This Mean? Page(s)Anchors Create an Index on your Page and “Jump” to

Specific Areas2

HTML Embed Media from other Websites (Picasa, Photobucket, etc.) right into your page!

3

Hyperlinks (External)

Sending Visitors to Other Websites 4

Hyperlinks(Internal)

Sending Visitors to Other Pages on Your Website 5

Image Library (Storage)

Storing Images or Graphics on our Server 6

Image Library(Using)

Inserting Images into your Page 7-8

Hyperlinks(from Images)

Using Images to Send Visitors to Other Websites 9-10

Image Library(Inserting within Text)

Wrapping Text around Inserted Images/Graphics 11-12

Insert Media Embed Media Uploaded to Your Website 13The Text Editor Let’s Explore Some Really Great Tools That You

May Not Be Using14

Additional Resources

A few Web resources that may help you to create fun and effective Web pages. 15


Using AnchorsUsing Anchors

Anchors are used to jump to areas or headings/topics on a single page. This function can be used to help divide information when you have a lot to post on a single page. This activity is very similar to hyperlinking but first you must place your anchors in the desired locations and then link to these anchors. It is much like using “bookmarks” in Microsoft Word®.Log in to your siteClick on Teacher Section or any area where a Text Editor is available.Begin by determining the names and locations of your anchors.

Place your cursor where you would like to establish the first Anchor. (In this example we will create an anchor for the top of the page.)

Click the Anchor button from the toolbar.

Enter the name of the first anchor.

Click Insert.

Continue to add Anchors (placing your cursor at select points down the page) until you have established all points of reference throughout your page.

(cursor is blinking here…)

Continue by creating your “index” which will link to the anchors you have placed on your page.Type the desired text. (In this example, we will use a bulleted list of terms which will navigate the visitor to different points of reference on the page.)

Click the pull-down arrow in the Anchors field and choose the appropriate anchor.

Complete the Title field if you would like a “bubble” or “tool tip” to show when the visitor hovers over the linked anchor on your page.

Click Insert.

Continue to link Anchors (highlighting your index words and linking to each anchor) until you have established all points of reference throughout your page.

NOTE: It is best to create an anchor at the top of the page and link to the phrase “Back to Top” periodically throughout your anchored page. This brings the visitor back to the original index for ease of navigation.

Save your work and test on your public web page.

Using HTML with the Text EditorUsing HTML with the Text Editor


Hyperlink Button – button is only available when text is highlighted or image is selected.

Although the text editor is designed for novice computer users, it does accommodate the advanced web author. The HTML button will not only reveal the code contained within your web page, but permit you to modify that code to customize your page. These instructions will guide you through the addition of a popular web photo service provided by Google (Picasa). You may use these instructions with any such similar service for a really snazzy web page.Log in to your siteClick on Teacher Section or any area where a Text Editor is available.Begin by obtaining the code needed to modify your page.

Log in to your Account. Navigate to your photo album.

Locate the area which indicates embedding of code.

Place your cursor where you would like to embed the photo album.

Click the HTML button from the toolbar.

Paste the code into the HTML editor in the desired position (in this example, it will appear at the bottom of the page).

Save your changes and test on your public web page.

Hyperlinking to Other Websites (External Links)Hyperlinking to Other Websites (External Links)


Hyperlinking is the ability to provide links to either other areas of your website or to other websites. This can be used as a great “cross-referencing” tool for related areas of your site. Any URL when fully typed (e.g., http://www.google.com) will automatically hyperlink when typed in the Text Editor.

Log in to your site

Click on Teacher Section

Click on the section where you would like to add the hyperlink. (There must be a Text Editor box available to add the link(s) using the directions below.)

To connect a link to a website (*external) from a particular word or phrase:

Select (click, drag and highlight) the word, phrase (or image) with the mouse. Click on the Insert Link button on the toolbar.

Type the full URL for the desired website in the box next to Link URL (The web address must include the http://).

Anchors are explained in other job aids. . Target - determine how you want the website to

appear; Open in this window/frame, the website

will open within the page you are viewing. Open in new window_blank, the website

will open in a new web page (preferred for external website links).

Open in parent window frame (_parent), this function is deactivated.

Open in top frame (replaces all frames) (top), this function is deactivated.

Title – type the title of the link. This will constitute the “bubble” or “tool tip” that will appear when the visitor places their mouse over the link.

Class – skip this one as it does not apply. Click Insert Save your new link and test on your public web page.



Hyperlinking Inside your Website (Internal Links)Hyperlinking Inside your Website (Internal Links)

Hyperlinking is the ability to provide links to either other areas of your website or to other websites. This can be used as a great “cross-referencing” tool for related areas of your site. You may wish to create a series of “internal” links from your “home page” so as to successfully guide visitors to key areas of your site.

Log in to your site



To connect a link to another section of your website.

Navigate to the public page of your website where you wish to send your visitor.

Right-click and Copy the URL in the address bar.Select (click, drag and highlight) the word, phrase

(or image) with the mouse. Click on the Insert Link button on the toolbar.

Right-click in the Link URL area and paste the full string of characters in this field.

Target - determine how you want the website to appear; Open in this window/frame, the website

will open within the page you are viewing. (preferred for internal website links)

Open in new window_blank, the website will open in a new web page.


Click InsertSave your new link (Update) and test on your public web page.



Storing Images in the Image LibraryStoring Images in the Image LibraryLog in to your site


Click on the section where you would like to add the images. (There must be a Text Editor box available to add the images using the directions below.) Click on the “Image Gallery” button. The image Gallery option is available in the Text Editor box. Use the image library to select the image and place it in the appropriate box.

You will automatically be directed to My Image Library. This is your own storage area in the application and you may upload as many images as you choose.

To create a folder, click on Create Folder. Type the desired name of your storage area.

Click ADD.

Click on the + and open your new folder.

Click Browse… and locate the desired graphic or photo to be uploaded to your new folder.

Click upload.

Your photo or graphic is now ready to be used anywhere or any time from our website program.


“Image Gallery” button

Inserting Images from the Image LibraryInserting Images from the Image Library

Log in to your site


Click on the section where you would like to add the images. (There must be a Text Editor box available to add the images using the directions below.) Click on the “Image Gallery” button. The image Gallery option is available in the Text Editor box. Use the image library to select the image and place it in the appropriate box.

You will automatically be directed to My Image Library. This is your own storage area in the application where you alone may upload and store images. Note that you may use images from the District Image Library or the SiS Image Library as well.

Locate the image you would like to insert.

Right-click the image and choose Copy.



Inserting Images from the Image Library (cont’d.)Inserting Images from the Image Library (cont’d.)

Place your cursor on the area you wish to insert the picture in your page.

Right-click and choose Paste.

Image will appear on the page.

You may be required to allow access with some computers.You may use the right-align, left align or centering buttons to relocate your image.

Always save your work.

Preview your work by viewing your website.


Hyperlinking Using Images or GraphicsHyperlinking Using Images or Graphics

Hyperlinking is the ability to provide links to either other areas of your website or to other websites. You can link images or graphics just like text. Using the “tool tip” or “Title” area of your hyperlink can inform the visitor of the nature of the linked graphic.

Log in to your site



To connect a link to another website:

Insert an image from the image gallery. (See instructions for Inserting Images from the Image Library for complete instructions.)

Select (click) the image.

Click on the Insert Link button on the toolbar.

Hyperlinking Using Images or Graphics (cont’d.)Hyperlinking Using Images or Graphics (cont’d.)



Type the full URL for the desired website in the box next to Link URL (The web address must include the http://).

Target - determine how you want the website to appear; Open in this window/frame, the website

will open in a new web page (preferred for external links)


Click Insert

Save (Update) your new link and test on your public web page.


Adding Multiple Images to the Text Editor andAdding Multiple Images to the Text Editor and Wrapping Text around ImagesWrapping Text around Images

Log in to your site


Click on the section where you would like to add the images. (There must be a Text Editor box available to add the images using the directions below.) Click in the text editor and add text as desired. (Determine if you want the images at the top of the article or the bottom.)

At the point of insertion, click on “Insert a new table” button.

The “Insert/Modify table” window appears.

Define the number of columns and rows you would like.

If you want 2 pictures to appear side by side without any captions select 2 Columns and 0 Rows.

To have two pictures appear side by side and have captions under or above them select 2 Columns and 2 Rows.

Additional Optional Choices:

Cellpadding – defines the distance of the image or object from the side of the cell. Cellspacing – defines the distance of the image or object from the other cells that adjoin it. Alignment – defines the image or object placement within the cell. Center, left, or right align. Border – defines the width of a border on the table. 0 indicates no border.Width – allows you to limit the width of the cell despite the size of the image. Height – allows you to limit the height of the cell despite the size of the image.


“Insert a new table” button

Adding Multiple Images to the Text Editor andAdding Multiple Images to the Text Editor and Wrapping Text around Images (cont’d.)Wrapping Text around Images (cont’d.)

Click on Insert. The table will now appear in the text box on your screen.

Click inside the section of the table where you want the picture appear. Click on the “Image Gallery” button.

Use the image library to select the image and place it in the appropriate box. You may “drag” the images from the text editor into the

appropriate box(es) in your table.Once you have “pasted” the desired images into the table, you may use the second row of the table to place captions under your photos.

You may use the right-align, left align or centering buttons to relocate your images/table.

To force text to wrap either to the left or right, select the entire table containing the image(s) and force it to either the left side or right side of your page with the alignment buttons.

Text will conform to either side of the images for a nice “integrated” look on your page.



Embedding MediaEmbedding MediaAny embedded media that you wish to display on your website must first be uploaded to a File Manager (See Help files within the program). The File Manager (Documents) area can be found in a Teacher’s Section, Sports, Fine Arts, Clubs and Organizations, Community Service, Library and Guidance pages.

Log in to your site Click on Teacher Section

Access the File Properties to get the file name and location.

Click on the File Manager Right click on the File Name of the

media to be inserted. Select Properties Click and drag over the ENTIRE file

address. Note if the ENTIRE file name is not

copied and pasted into the File box under the Embedded Media button tools the media will not work.

Click in the text box where the media is to be placed. Insert the media using the Embedded Media button.

Note Teacher pages with a Text Editor:Bio, Education, Experience, Calendar, Assignments, Projects, Announcements, Class Activities, Other Class Info, Class Schedule, summer Reading List, and Supply List.

Click on the Embedded Media Button.Paste the file name that was copied in the URL and select Real Player from the drop down list.

Click in the File box and press down the CTRL key and hit the “v” key (or right-click) to paste the name of the file.

Click on the drop down menu and select Real Media.

Optional: Define the dimensions. Click on Insert to save the media clip. This will return the user to the Text

Editor screen. Click on Update to save the changes. Test by viewing on public website.


Embedded Media Button

Text Editor ToolsText Editor Tools


Bol

d

Italic

s

Und

erlin

e S

trike

Thr

ough

Left

Alig

nmen

t

Cen

ter A

lignm

ent

Rig

ht A

lignm

ent

Just

ified

Alig

nmen

t

Bul

let L

ist

Num

ber L

ist

Rem

ove

Inde

nt

Add

Inde

nt

Sel

ect F

ont F

amily

Sel

ect F

ont S

ize

Row 1

Sel

ect A

ll

Find

Find

and

Rep

lace

Cut

Cop

y

Pas

te

Pas

te fr

om T

ext

Pas

te fr

om W

ord

(see

not

e)

Und

o

Red

o Hyp

erlin

kB

reak

the

Hyp

erlin

k

Anc

hor (

Boo

kmar

k)

Inse

rt Im

age

Edi

t the

HTM

L C

ode

Inse

rt D

ate

Inse

rt Ti

me

Text

Col

or

Hig

hlig

ht c

olor

Mor

e Te

xt a

nd

Bac

kgro

und

Col

ors

Row 2In

sert

Hor

izon

tal R

uler

Rem

ove

Form

attin

g

Togg

le g

uide

lines

/invi

sibl

e el

emen

ts

Inse

rt cu

stom

cha

ract

er

Inse

rt/E

dit e

mbe

dded

med

ia

Inse

rt Ta

ble

Tabl

e R

ow P

rope

rties

Tabl

e C

ell P

rope

rties

Inse

rt R

ow A

bove

Inse

rt R

ow B

elow

Del

ete

Row

Inse

rt C

olum

n B

efor

e

Inse

rt C

olum

n A

fter

Rem

ove

Col

umn

Spl

it Ta

ble

Cel

ls, M

erge

Tabl

e C

ells

Sub

scrip

t S

uper

scrip

t

Prin

t To

ggle

fulls

cree

n M

ode

Row 3

Additional Resources:

Photostory (www.microsoft.com/photostory)

Create slideshows using your digital photos. With a single click, you can touch-up, crop, or rotate pictures. Add stunning special effects, soundtracks, and your own voice narration to your photo stories. Then, personalize them with titles and captions. Small file sizes make it easy to send your photo stories in an e-mail. Watch them on your TV, a computer, or a Windows Mobile–based portable device.

PicSizer (http://www.photo-freeware.net/picsizer.php)

PicSizer is a utility designed specifically to generate screen-friendly versions of high-resolution images. It offers a quick and intuitive way to resize images individually and in batches. It was created with owners of digital cameras in mind, but it can also be very useful to designers and other people who work with images on a daily basis. PicSizer reads and writes several popular image formats, and outputs to any dimensions between 1 and 1024 pixels.

Audacity (http://audacity.sourceforge.net/)

Audacity is a free, easy-to-use audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. You can use Audacity to:

Record live audio. Convert tapes and records into digital recordings or CDs. Edit Ogg Vorbis, MP3, WAV or AIFF sound files. Cut, copy, splice or mix sounds together. Change the speed or pitch of a recording.

Photoshop Express (www.photoshopexpress.com)

Register to take advantage of 2GB of storage space. Once registered, you can upload photos to both create albums, create special effects, and ultimate embed your presentations (including music) in your web pages. Create interactive photo albums that only your family and friends can see. You choose the viewers, Photoshop.com sends the invites—and they don't have to register to look.

Jing (http://visuallounge.techsmith.com/jing)

Think of Jing as a supplement to all your chat discussions, email threads, forum posts and blog entries. It sits nicely on your desktop, ready to capture and share your stuff at a moment's notice. Simply select an area of your screen, capture it as an image or record it as


http://visuallounge.techsmith.com/jing

http://www.photoshopexpress.com/

http://audacity.sourceforge.net/

http://www.photo-freeware.net/picsizer.php

http://www.microsoft.com/photostory

a video, and then click Share. Jing conveniently places a URL to your content which you can paste into any of your conversations or upload to your website.
