1

Internet
Internet
Resources
Resources
Aligned with ABE
Aligned with ABE
Curriculum
Curriculum








This course covers the following topics:

! ! Desi gni ng an i nt eract i ve web si t e Desi gni ng an i nt eract i ve web si t e
al i gned wi t h ABE Cont ent al i gned wi t h ABE Cont ent
St andards (draf t ) St andards (draf t )
! ! Creat i ng a websi t e Creat i ng a websi t e
! ! Sel ect i ng Language Art s web si t es Sel ect i ng Language Art s web si t es
and act i vi t i es and act i vi t i es
! ! Sel ect i ng M Sel ect i ng Mat h web si t es and at h web si t es and
act i vi t i es act i vi t i es

2
3
1ab|e of Contents

"#"# $%& '% ()) *+) ,*+*-. /0.1.+'2######################################################################################### 3
"#4# 5.0.6' * 78.1. ############################################################################################################################## 9
"#:# ;8*+-. <%+'2################################################################################################################################## =
5>'. 7>'0. ? @*A*-A*B8 7>'0.######################################################################################################################### =
@*A*-A*B8 7.C' ############################################################################################################################################## "D
E>+F2 ################################################################################################################################################################## "D
"#3# GB0%*)>+- * $.*).A H1*-.######################################################################################################""
"#I# G2>+- '8. 7.C' /)>'%A ################################################################################################################":
"#J# ;A.*'>+- E>+F2 #############################################################################################################################"3
1o create a text ||nk########################################################################################################################################## "3
1o ||nk to a photo ############################################################################################################################################# "I
1o ||nk to a f||e################################################################################################################################################### "J
"#9# ,*+*->+- @*-.2 ##########################################################################################################################"9
"#K# ;A.*'>+- 5LMN@*-.2####################################################################################################################"=
"#=# ;A.*'>+- $>)).+ @*-.2 #############################################################################################################4"
"#"D# @*22&%A) @A%'.6' @*-.2 ########################################################################################################4:
"#""# ;A.*'>+- * O0%-##########################################################################################################################4I
"#"4# ,*+*->+- O0%- ? ;%11.+' 5.''>+-2 #################################################################################4K
"#":# 5>'. 5.''>+-2 ###############################################################################################################################:D
4

IN1kCDUC1ICN 1C WLL8L
1.1. now to Add and Manage L|ements
LlemenLs funcLlon as Lhe bulldlng blocks of your pages. aragraphs, vldeos, and Maps are
examples of elemenL Lypes. 1hese are locaLed aL Lhe Lop of your screen under Lhe "LlemenLs"
Lab. All of Lhe conLenL wlLhln Lhe lndlvldual pages of your slLe are added vla elemenLs.
Add an L|ement
1o add e|ements to your page, drag them from the top bar |nto the content area of your Web
s|te:



3
Move an L|ement
1o reorder e|ements, drag them by the b|ue bar and p|ace them |nto a new pos|t|on on top,
be|ow or between other e|ements:

1o move an e|ement from one page to another, s|mp|y c||ck on the e|ement and then c||ck on
the green arrow |n the upper |eft corner. Choose the page dest|nat|on from the page ||st that
appears. our e|ement w||| then re|oad |n your dest|nat|on page.
keep |n m|nd that e|ements may on|y be moved
between ages, not to or between 8|ogs.

8y defau|t, e|ements can on|y be stacked one on
top of the other. If you w|sh to p|ace e|ements
s|de by s|de, p|ease see the 2-Co|umn L|ement
page for ass|stance.
6

De|ete an L|ement
1o de|ete an e|ement, [ust c||ck on the k |n |ts top r|ght corner:

ou'|| see a conf|rmat|on screen. C||ck De|ete to conf|rm or cance| |f you've changed your
m|nd.


Note that de|et|ng an
e|ement |n the ed|tor w||| not
de|ete |t on your ||ve s|te
unt|| you c||ck ub||sh.
7
1.2. Se|ect a 1heme
1he A|| 1hemes area of Lhe Des|gn Lab conLalns a varleLy of Lheme / LemplaLe cholces, sorLed
lnLo a number of caLegorles.


1o prev|ew how a Lheme looks wlLh your slLe conLenL, hover your mouse over a deslgn
Lhumbnall and cllck Lhe prevlew buLLon.
lrom Lhe prevlew area, selecL:


1. Use 1heme lf you llke whaL you see (you can always come back and change lL laLer)
2. Iavor|te lf you wanL Lo save lL Lo Lhe lavorlLes area of Lhe ueslgn Lab
3. Cance| Lo leave Lhls prevlew and look aL more Lhemes.


8
noLe LhaL by savlng several Lhemes as Iavor|tes, you can fllp Lhrough Lhem laLer Lo more easlly
compare dlfferenL Lhemes agalnsL one anoLher. ?ou can remove a slLe from your lavorlLes by
cllcklng Lhe sLar ln Lhe rlghL-hand corner.

















9
1.3. Change Ionts
Lach Weebly Lheme has defaulL fonLs for Lhe SlLe 1lLle, aragraph 1lLles, aragraph 1exL and
Llnks. ?ou can change Lhese fonLs uslng Lhe ueslgn CpLlons area found under Lhe ueslgn Lab.


Lach secLlon has lLs own opLlons:

5>'. 7>'0. ? @*A*-A*B8 7>'0.

1. SelecL a dlfferenL lonL lace from Lhe drop-down menu.
2. Change Lhe lonL Color by cllcklng Lhe color box. ?ou can selecL anoLher color or even enLer a
speclflc P1ML color code.
3. SelecL a dlfferenL lonL Slze.





10
@*A*-A*B8 7.C'

1. SelecL a dlfferenL lonL lace from Lhe drop-down menu.
2. Change Lhe lonL Color by cllcklng Lhe color box. ?ou can selecL anoLher color or even enLer a
speclflc P1ML color code.
3. SelecL a dlfferenL lonL Slze.
4. SelecL a dlfferenL Llne PelghL. 1hls ad[usLs Lhe amounL of whlLe space beLween Lhe senLences
ln a paragraph.

E>+F2

1. Change Lhe Llnks' sLandard color.
2. Change Lhe vlslLed color (Lhls color lndlcaLes Lo Lhe slLe vlslLor LhaL Lhey've already looked aL
LhaL llnk).
3. Change Lhe Pover color. 1hls ls Lhe color glven Lo Lhe llnk when you hover Lhe mouse over lL.

And lf you ever wanL Lo swlLch back Lo Lhe defaulL fonLs for a secLlon, [usL use Lhe 8eseL
uefaulLs llnk found wlLhln each secLlon.


11
1.4. Up|oad|ng a neader Image
MosL deslgns allow you Lo upload a cusLom header lmage ln place of Lhe defaulL.
1. C||ck on the ex|st|ng |mage to expose the "header opt|ons" too|bar above your s|te:


2. Note the s|ze of the des|gn's header |mage so you can up|oad a new |mage of the same
d|mens|ons:





3. If you a|ready have an |mage of the correct s|ze, c||ck the up|oad ||nk and se|ect the |mage
f||e from your computer.


12

4. If you need to res|ze]crop your |mage to f|t |nto the proper d|mens|ons, up|oad |t to
www.p|cn|k.com, mod|fy |t, and then save |t back to your computer before up|oad|ng |t |nto
Weeb|y:

AL Lhls Llme, all pages ln your slLe wlll have Lhe same header lmage. lL ls noL posslble Lo have
dlfferenL header lmages on dlfferenL pages.








13

1.S. Us|ng the 1ext Ld|tor
Ld|t the text w|th|n your Web s|te by c||ck|ng on |t to br|ng up the text ed|t|ng opt|ons above.







Ad[ust the text co|or or a||gn your text |eft]center]r|ght][ust|f|ed:

8o|d, Ita||c|ze, or Under||ne the text:

Increase or Decrease the font s|ze:

Undo or kedo your changes:
14

1.6. Creat|ng L|nks
1o create a text ||nk
1. n|gh||ght the des|red text and c||ck on the ||nk |con |n the L|ement Cpt|ons too|bar

2. Next, you w||| need to choose wh|ch type of ||nk to create. If you w|sh to ||nk to an
externa| s|te, you can do so from the "Web s|te" tab p|ctured be|ow.
NC1L: Llnks wlll become acLlve once your slLe ls publlshed.

13

1o ||nk to a photo
1. Drag the |cture e|ement to your page and c||ck on |t


2. An L|ement
Cpt|ons too|bar
w||| drop down.
C||ck on "Up|oad
new Image" and
choose a p|cture.

3. C||ck on the "Set L|nk"
button. A box w||| pop up
that a||ows you to choose
wh|ch type of ||nk to
create.
NC1L: Llnks wlll become
acLlve once your slLe ls
publlshed.
16
1o ||nk to a f||e
1. Create a h|dden page |n your s|te under the "ages" tab







2. Next, use the I||e e|ement to up|oad a f||e onto th|s h|dden page

3. In your ma|n page, se|ect the text you want to ||nk and c||ck on the ||nk |con. Go the I||e
tab, and se|ect the up|oaded f||e from the drop down ||st.

17
1.7. Manag|ng ages
Manage your pages under the "pages" tab |n your ed|tor:







Irom w|th|n th|s tab you can do the fo||ow|ng:













18
8r|ng up the page propert|es by c||ck|ng a page t|t|e |n the |eft co|umn.
Add a New age (1) by cllcklng Lhe "new age" buLLon.

Add a 8|og (2) by cllcklng Lhe "new 8log" buLLon. Learn more abouL creaLlng a blog here.

keorder a age and Create Subpages (3) by dragglng Lhe page lcon Lo Lhe lefL of Lhe page name
lnLo a new order. Learn more abouL creaLlng subpages here.

kename a age (4) by edlLlng Lhe LexL ln Lhe "page name" box.

n|de ages (S) from appearlng ln Lhe navlgaLlon menu by selecLlng "no" Lo "show ln
navlgaLlon". ?ou can llnk Lo Lhe hldden pages from vlslble pages uslng Lhe LexL edlLlng/llnklng
Lool. Learn more abouL creaLlng hldden pages here.
Ld|t your age Content (6) by cllcklng on Lhe 'LdlL 1hls age' buLLon.
assword rotect your age (7) by checklng Lhe 'assword roLecL?' checkbox. 1hls opLlon wlll
work once you've asslgned a slLe-wlde password under Lhe SeLLlngs Lab ln your edlLor. ?ou can
learn more abouL password proLecLed pages here.
De|ete a age (8) by hlghllghLlng Lhe page you wlsh Lo deleLe on Lhe lefL and Lhen cllcklng Lhe
"deleLe page" llnk and conflrmlng.

Save your Changes by cllcklng Lhe 'Save' buLLon on Lhe boLLom rlghL.











19
1.8. Creat|ng Sub-ages
1he sub-page feaLure leLs you organlze your pages wlLhln drop-down menus on your Weebly
slLe.
1. In the Weeb|y ed|tor, c||ck on the ages tab:



2. n|gh||ght the page you w|sh to become the subpage:















20
3. Drag th|s page to the
r|ght unt|| |t c||cks |nto
p|ace.











4. ou can a|so create
sub-pages of sub-pages
by dragg|ng to the r|ght
of subpages, as |n th|s
|mage:






S. When you are f|n|shed dragg|ng your pages |nto a new h|erarchy, c||ck save and check out
your Web s|te menu.
noLe: ages can be dragged back Lo Lhe lefL lf you wanL Lhem Lo appear as prlmary pages agaln.
noLe: lease make sure LhaL your subpages are noL marked "(Pldden)". 1o un-hlde a page,
change Lhe "Show ln slLe navlgaLlon" opLlon Lo "?es".
21
1.9. Creat|ng n|dden ages
Cccas|ona||y you may want to create pages that do not appear |n your nav|gat|on bar. ou
m|ght want to ||nk these pages to text or |mages w|th|n your s|te. ou can create h|dden
pages to accomp||sh th|s!

1. Set the pages you want as
h|dden to not show |n the
s|te's nav|gat|on menu,
under the "ages" tab of the
ed|tor:



2. ou can ||nk to these h|dden pages us|ng text |n your pr|mary pages. Se|ect the text you
want to ||nk to your h|dden page and c||ck on the ||nk |con:


22
3. Choose the page you want th|s text to ||nk to:


1hese llnks wlll be acLlve once your slLe ls publlshed.









23
1.10. assword rotect ages
WlLh password proLecLlon enabled on your Weebly slLe, you can choose Lo proLecL Lhe enLlre
slLe wlLh a password, or [usL lndlvldual pages.

1. 1o get started, enter a password |n the "S|te assword" box under the "Sett|ngs" tab of the
ed|tor.

ln Lhls example, "password123" ls Lhe password applled Lo all pages on Lhe slLe.

24
2. 1o enab|e passwords on|y on |nd|v|dua| pages, uncheck the appropr|ate password check
boxes under the "ages" tab of the ed|tor.


3. When v|ew|ng a password protected page, your Web s|te v|s|tors w||| be presented w|th a
|og|n prompt before they are ab|e to see the content.
Note that once the password |s entered, the v|s|tor can free|y browse the password protected
area. nowever, once the|r browser w|ndow |s c|osed, the password w||| aga|n be requ|red.






23
1.11. Creat|ng a 8|og
Create a b|og page under the "ages" tab of the ed|tor:


If you want to make
your b|og page your
s|te's homepage, drag |t
to the top of the ||st:





26
1h|s |s how your b|og w||| |ook |n|t|a||y:










New ost:
ress Lhls buLLon Lo sLarL creaLlng a new blog posL.


Ld|t ] De|ete a 8|og ost:
ln Lhe upper rlghL hand area of
exlsLlng blog posLs are llnks Lo
edlL or deleLe Lhe posL.




AfLer you cllck Lhe new osL buLLon or edlL an exlsLlng blog enLry, you wlll enLer Lhe blog edlLlng
lnLerface, whlch works [usL llke a normal Weebly page.
27
Arch|ves 8ox:
1he archlves sldebar box auLomaLlcally groups your prevlous blog posLs accordlng Lo Lhe monLh
Lhey were wrlLLen. ?our maln blog page wlll dlsplay your Len mosL recenL posLs and older posLs
wlll auLomaLlcally be moved Lo Lhe archlves.
Categor|es 8ox:
1he words enLered lnLo Lhe CaLegorles fleld wlll be auLomaLlcally added Lo Lhe CaLegorles
sldebar box afLer Lhe posL ls made. 1hls allows you Lo group your blog posLs by common Lerms.
kSS Ieed:
1he 8SS llnk ln your sldebar allows your vlslLors Lo subscrlbe Lo your blog. eople wlll ofLen
subscrlbe Lo a blog so Lhey can vlew Lhe posLs wlLh a news aggregaLor, such as neLvlbes or
Coogle 8eader.
1rackback UkL:
lf you are wrlLlng a blog posL on a slmllar Loplc Lo anoLher blog, and LhaL blog provldes a
1rackback u8L, you can copy LhaL u8L lnLo Lhe 1rackback u8L fleld on Weebly. resslng Lhe
send buLLon wlll Lhen alerL Lhe oLher blog LhaL your blog enLry ls referenclng Lhelr blog enLry,
creaLlng a Lrackback llnk from Lhe oLher blog Lo yours. lor more lnformaLlon on 1rackback
u8Ls, see here.
De|ete 8|og Comments:
ueleLe unwanLed commenLs on your blog uslng Lhe approprlaLe "ueleLe CommenL" llnk. See
Lhe lmage above for clarlflcaLlon.










28
1.12. Manag|ng 8|og & Comment Sett|ngs
Cnce you've created a b|og, you may w|sh to custom|ze certa|n features of your b|og such as
comment moderat|on, the t|me zone and format, comment not|f|cat|on and more.
1o manage your b|og, open the b|og page w|th|n your ed|tor and c||ck on the 'Manage 8|og'
button.

Irom here you can:
Manage comments: ln Lhe blog managemenL area, under Lhe 'CommenLs' Lab, slmply check Lhe
box nexL Lo Lhe commenLs you wlsh Lo deleLe or approve and Lhen cllck on 'ueleLe' or 'Approve'
Lo make Lhls updaLe.



29
1urn comments off or moderate comments: Cllck on Lhe 'SeLLlngs' Lab and Lhen choose from
Lhe drop down menu Lo elLher deny all commenLs, allow commenLs auLomaLlcally or requlre
approval flrsL.
lf you choose Lo requlre approval, no commenLs wlll appear on your slLe unLll you approve
Lhem ln Lhe edlLor. ?ou wlll recelve an emall Lo Lhe emall address assoclaLed wlLh your Weebly
accounL alerLlng you LhaL you have recelved a commenL awalLlng approval.
Not|fy of new comments: Choose Lo recelve noLlflcaLlon of new posLed commenLs Lo Lhe emall
address assoclaLed wlLh your user accounL aL Weebly.
Automat|ca||y c|ose comments: We offer Lhe opLlon Lo close commenLs on older posLs. ?ou can
choose Lo close commenLs afLer 30, 60 or 90 days.
Set your date and t|me format and t|me zone: 8y defaulL, Lhe daLe and Llme posLed on your
blog wlll reflecL Lhe Llme zone of our servers here aL Weebly. lf you wlsh Lo cusLomlze Lhls, cllck
on Lhe 'SeLLlngs' Lab and Lhen choose your Llme zone and Lhe approprlaLe daLe and Llme formaL
and save.



30
1.13. S|te Sett|ngs













Address:
1hls area dlsplays your currenL Web slLe address. Cllck on "change slLe address" ln order Lo
change your Web slLe address Lo a dlfferenL sub-domaln of weebly.com, upgrade Lo your own
domaln name, or conflgure and exlsLlng domaln name wlLh Weebly. lor more lnformaLlon, see
publlshlng.
S|te 1|t|e:
1hls ls Lhe name of your Web slLe. 1hls wlll appear ln Lhe browser's LlLle bar and on browser
Labs when a user vlews your slLe. 1he LlLle wlll also appear ln Lhe bookmarks llsL lf a vlslLor
bookmarks your slLe and ln search resulLs when a search englne llnks Lo your slLe. lf you don'L
wanL Lhe slLe LlLle Lo dlsplay aL Lhe Lop of each of your pages, uncheck Lhe box Lo "show slLe
LlLle on Lhe Lop of your pages." lf you leave Lhe slLe LlLle blank, Lhen Lhe LlLle bar, Labs,
bookmarks, and search resulLs wlll dlsplay your page LlLle as "Weebly SlLe".
31
S|te assword (a feaLure of Weebly ro)
Pere you can seL a password for your slLe Lo proLecL unauLhorlzed vlewers from seelng Lhe
conLenL. lor more lnformaLlon on Lhls feaLure, check ouL uslng password proLecLlon.
Iooter Message (a feaLure of Weebly ro)
Pere you can remove Lhe defaulL "CreaLe a free Web slLe wlLh Weebly" message and replace lL
wlLh a message of your chooslng.


32
S|te Descr|pt|on:
LnLer a brlef descrlpLlon of your Web slLe here. 1hls LexL wlll appear below your slLe LlLle ln
search englne llsLlngs.
Meta keywords:
LnLer keywords (separaLed by commas) whlch descrlbe your Web slLe conLenL. lL ls quesLloned
wheLher search englnes sLlll place welghL on meLa keywords (due Lo abuse), buL lL doesn'L hurL
Lo add Lhem.
Iooter Code:
Code enLered ln Lhe looLer Code fleld wlll be enLered rlghL before Lhe closlng </body> Lag on
your Web slLe. 1hls ls mosL commonly used Lo add Coogle AnalyLlcs Lo your slLe for more
deLalled sLaLlsLlcs.
neader Code:
Code enLered ln Lhe Peader Code fleld wlll be enLered beLween Lhe <head> and </head> Lags
on your Web pages. 1hls ls mosL commonly used Lo verlfy your slLe wlLh Coogle or 8lng.









Arch|ve:
1o download a .zlp archlve/backup of your slLe, slmply cllck on Lhe llnk and save lL Lo your
compuLer.
(lease noLe: lf you have a blog on your slLe, lL wlll noL work when exporLed Lo Lhe .zlp flle
because lL relles on Weebly's daLabase)
Un-ub||sh:
1o un-publlsh your slLe, cllck on Lhe un-publlsh llnk and conflrm. ?our slLe wlll sLlll be avallable
for edlLlng, buL wlll noL be vlslble Lo Web slLe vlslLors.
33
1.14. ub||sh|ng our S|te
1o publlsh your Web slLe, you have Lhree opLlons:
A sub domaln of weebly.com (free)
8eglsLer a new domaln Lhrough Weebly

SeL up a domaln you already own (no charge from Weebly)
Chooslng a sub domaln of weebly.com (for example: yours|te.weebly.com) ls a compleLely free
and qulck way Lo geL onllne. As you Lype, Weebly wlll Lell you lf your deslred sub domaln ls
avallable.
8eglsLerlng your own domaln name Lhrough Weebly (for example: www.yours|te.com) ls also
very easy. ?our Web slLe wlll be vlslble aL Lhe new domaln name ln mlnuLes wlLhouL any seLup
requlred. lf you are upgradlng from a sub domaln of weebly.com Lo your own domaln, Lrafflc Lo
your old address wlll auLomaLlcally be forwarded Lo Lhe new one.
ln addlLlon, we offer you Lhe ablllLy Lo publlsh your slLe Lo a domaln you already own.

34
nLLING WI1n LLLMLN1S
2.1. Add|ng a |cture
1o add a p|cture to your page:
1. Drag e|ther the 'aragraph w|th |cture' e|ement or the '|cture' e|ement to the content
area of your page.









2. After c||ck|ng on the defau|t p|cture, you shou|d see the "e|ement opt|ons" too|bar appear
above your Web s|te. C||ck the ||nk to up|oad a new p|cture.
33
3. 8rowse to f|nd the |mage on your computer and c||ck "open". ou w||| see the |mage
up|oad status on the |ower r|ght corner of your screen.
4. Cnce up|oaded, you w||| see your |mage |n the ed|tor. ou can res|ze the p|cture by
dragg|ng the red box |n the |ower r|ght hand corner of the p|cture.











S. Lnter a capt|on for your p|cture |n the Capt|on f|e|d on the |mage too|bar. 1he capt|on w|||
be d|sp|ayed underneath the p|cture on your Web s|te.


6. 8y defau|t, your |mage w||| be ||nked to the fu||-s|ze
vers|on of the f||e. ou can change th|s by c||ck|ng on the Set
L|nk button |n the Image too|bar.
lf you'd llke Lo add a phoLo gallery lnsLead of lndlvldual plcLures, check ouL Lhls LuLorlal.
noLe LhaL Lhe plcLure and flle upload Lool uses Lhe "flash" plug-ln. ?our compuLer may noL have
flash lnsLalled. ?ou can check by vlslLlng Lhls llnk:
hLLp://www.macromedla.com/sofLware/flash/abouL/ and lf noL, lL's a free download and
lnsLall.
36
2.10. Us|ng the ou1ube V|deo L|ement
1. Under Mu|t|med|a L|ements, drag a ou1ube e|ement to your page.



2. C||ck on the wh|te space surround|ng the v|deo to expose the "ou1ube V|deo UkL" box.

37

3. Locate the v|deo on ou1ube that you'd ||ke to add to your s|te and copy the v|deo UkL.

In the examp|e be|ow, you'd copy http:]]www.youtube.com]watch?v=8cImLI4dLV


4. aste the ou1ube V|deo UkL |nto the opt|ons box on Weeb|y and c||ck on another part of
the page to see your new v|deo appear.

38
2.12. now to Up|oad I||es
1. Drag the I||e e|ement (under the "Mu|t|med|a" category) to prov|de your v|s|tors w|th a
down|oad ||nk to f||es you up|oad:











2. ress the "c||ck here to up|oad f||e" ||nk and se|ect the des|red f||e from your computer.
Note: 1o upload flles, you musL have flash lnsLalled.
lf you wanL Lo llnk Lo flles dlrecLly from a LexL llnk, flrsL upload your flles Lo a hldden page (seL
"show ln navlgaLlon" Lo no) uslng Lhe flle elemenL as descrlbed above. 1hen, use Lhe LexL
llnklng Lool Lo llnk LexL dlrecLly Lo Lhe flle download.