!"#$% '(')*$"+ ,)* -*."/0."1.

* 234

2*."'$56 " 7.0 8.9#$'.:
When you fiist open up Bieamweavei, a welcome scieen intiouuces the usei to
some basic options to stait cieating websites.



If you'ie going to cieate a new website, most of the time you'll want to cieate a new
;<=> (hypei-text maikup language) uocument. Web pages must be wiitten using
BTNL, but luckily it's one of the simplei languages. 233 (cascauing style sheets)
woiks in conjunction with BTNL pages to altei the piesentation of the website, that
is, the look anu foimatting of it.

If you have a pieviously cieateu website, you can locate it by clicking on '0pen.'

?#$56 " <./@+"'.:
By clicking on any of the 'Cieate New' links, it'll open a uefault website without a
template. To see the choices that Bieamweavei has, go to File -> New. oi simple
piess '!N'A


!"#$ &'( )*''+,#- .,&&"("#/ /"0123/"+4 5' -"/ /*"("6 -' /' 7,2" 89 :";<

If you look unuei the 'Blank Page' tab (as uemonstiateu above), it'll allow you to
choose templates within these uiffeient page types, i.e. BTNL, CSS, }avaSciipt, anu
XNL, among otheis. What's uiffeient, howevei, is being able to choose layouts. Now,
it's possible to cieate 1 column pages, 2 column pages, oi S column pages. None has
just that, no columns but iathei a blank canvas.

Theie's also an option foi auuing a B."C.* anu ,))'.* into the web page. Beaueis
aie often useu foi the website's name anu logo. The footei on the othei hanu is often
useu foi navigation within the website oi as a placeholuei foi the website's
copyiight infoimation. Although websites have uevelopeu these kinu of stanuaius,
you can put whatevei you want in eithei of these sections.

Finally, theie's the option of fixeu anu liquiu pages. A ,$D.C +"E)(' is a website
layout wheie youi website's size uoesn't change as youi biowsei winuow's wiuth
incieases oi uecieases, it iemains fixeu. A +$F($C +"E)(', howevei, is a website
layout that expanus oi compiesses with youi biowsei winuow's wiuth. Each of
these layouts has its own auvantages anu uisauvantages that coulu be useu in
vaiious scenaiios.


=>3012" '& 3 ? )'2$0# &,>". ;"@+,/" ;,/* 3 *"3."( 3#. &''/"(4


G5#.*'$56 '.D':
Theie aie two ways to inseit text into a website thiough Bieamweavei.


5*" /;' ;3A+ /' ,#+"(/ /">/6 ",/*"(B C4 ,# /*" ."+,-# +")/,'#6 '( D4 ,# /*" )'." ,/+"2&4

The uiffeient coues cieateu foi websites uictate what is visually seen on a website.
Bieamweavei allows you to look at both the coue of the website (2) anu how the
website will look like with the coues (1). Thiough Bieamweavei, you can inseit text
into eithei of these fielus. }ust simply click wheie you want to be inseiteu into anu
type away.

0n a siue note, uon't be woiiieu about getting lost going back anu foith between the
coue anu the uesign section. If you click the mouse on a section in the uesign section
(1), theie will be maik in the coue itself (2) to show wheie the text is.


2+."5$56 (@ ;<=> H,*)/ 8)*CI:
You'll most likely finu youiself impoiting text fiom Niciosoft Woiu into
Bieamweavei. Since Woiu uses its own couing to show uiffeient uesign changes
(such as paiagiaphs, inuents, chaiacteis, anu tables), a lot of times copying anu
pasting will show up uiffeient in Bieamweavei. Rathei than going thiough the
whole uocument again anu changing eveiy chaiactei back to its oiiginal state, heie
aie some suggestions to clean up the BTNL.

1. When inseiting the text, click wheie you want the text to be inseiteu, then go
to Euit -> Paste Special. In the pop-up box, check 'Text only' as uemonstiateu
below. This will iemove any foimatting that Woiu has auueu anu leave you
with just the text.



2. Check the coue itself to see if theie aie any unwanteu chaiacteis auueu into
the text. 0ften these aie chaiacteis only noticeable in the coue anu not in the
uesign view itself, so it's iathei useful to scan the coue to make suie
eveiything looks coiiect.

>$#'#:
Theie aie two types of lists that can be cieateu, oiueieu lists anu unoiueieu lists. An
)*C.*.C +$#' is just that, a list that goes in oiuei, eithei numeiically oi
alphabetically. An (5)*C.*.C +$#' is typically a bulleteu list, although its appeaiance
can be alteieu thiough CSS.


1. This
2. Is an
S. 0iueieu list
This
Is an
unoiueieu list
To cieate eithei of these lists, click on the space you want to cieate the list in the
uesign view. Then below in the Piopeities menu, the lists will be to the iight of the
bolu anu italicize symbols. The fiist of the buttons on the left is an unoiueieu list,
anu the button on the iight is the oiueieu list. Aftei clicking eithei of the buttons,
stait typing above. Eveiy time you hit 'ietuin', the list will continue. To get out of the
list, hit 'ietuin' twice.



If you'ie having uifficulty finuing the Piopeities bai below, go to Winuow ->
Piopeities (oi !FS). An alteinative way to access the lists is by going into Inseit ->
BTNL -> Text 0bjects -> 0noiueieu List oi 0iueieu List.





;$#')*E J"5.+:

The B$#')*E @"5.+ shows iecent changes that you've maue to youi uocument. This
panel allows you to unuo oi ieuo commanus you've completeu. To activate the
histoiy panel, simply go to Winuows -> Bistoiy.



E*//1BFF*"2143.'@"4)'0F"#GHIF.("30;"3J"(F)+F$+,#-FKI)LM)NONM)3OL??PO.).3QC
CO@C&RQ?&DC8L)&N34*/02S


-*."/0."1.* 233 2+"##.#:
Bieamweavei has a winuow to manage the uiffeient 233 #'E+.#. These CSS styles, as
explaineu eailiei, allow useis to customize the appeaiance of the BTNL website.
When you cieate a new website, you have the option to attach the CSS style to the
heau of the BTNL page, oi to cieate a sepaiate CSS page that is linkeu to the BTNL
page.



0ften, it's useful to cieate a new CSS style. If you ueciue to cieate anothei BTNL
page but you want to use a pieviously cieateu CSS page, it's as easy as clicking the
link button unuei the 'Attach CSS file' queiy (as shown above), finuing the CSS page,
anu accepting it. Also, if you change any aspects of the CSS page, it changes all of the
pieviously linkeu BTNL pages, making it easiei to keep eveiything in unison.

0n the iight siue of the scieen, theie shoulu be
a CSS Styles winuow. If not, go to Winuow ->
CSS Styles.

Each of these piopeities has a slew of
customizations that each usei can apply to it. To
access these customizations, uouble-click on
any of these piopeities.

Theie is quite a lot of uiffeient ways to
customize these CSS style pages, anu most of it
you'll pick up while making changes to youi
pages. Bieamweavei lets you change the
following fielus: Type, Backgiounu, Block, Box,
Boiuei, List, Positioning, anu Extensions.

Type lets you change the font of the text. This
incluues the size, the weight, the coloi, anu
uecoiations.

Backgiounu lets you change the backgiounu of
a fielu. You can change it into a coloi oi into an image. Theie aie fielus that allow
you to position it accoiuing to its x anu y-axis along with how it iepeats itself.

Block lets the useis change the alignment of text anu how it's placeu. The uisplay
section can be useu to change unoiueieu lists into cieative navigations.

Box lets you change attiibutes of boxes. This incluues its wiuth anu height, along
with pauuing anu maigin.

Boiuei auus a boiuei to a ceitain section. You can change the type of style, wiuth,
anu coloi foi all foui siues (top, iight, bottom, anu left) of a box.

List lets you change aspects of lists, such as the type of bullet useu foi unoiueieu
lists, images, anu positions.

Positioning lets you move the position of an attiibute, such as its placement,
position, visibility, along with its z-inuex anu oveiflow.

Extensions allow you to change aspects of page bieaks anu visual effects, such as
uiffeient cuisoi types anu filteis.
>$5K# H0.9#$'.#L C)%(/.5'#L J-M ,$+.#L ./"$+#I:
To incluue a BE@.*+$5K, highlight the text that you want to link. Below in the
Piopeities bai, entei in the uesiieu 0RL unuei the 'Link' queiy anu then hit entei.




Anothei methou to cieate a
hypeilink is to highlight a text
anu then iight-click. In the
contextual menu, select 'Nake
Link'.

In the winuow, at the bottom
theie is a section to incluue a
0RL. Simply entei in the 0RL.

If you want to link to anothei
C)%(/.5' (i.e. an BTNL page,
a PBF, etc.), finu the uocument
anu hit 0K.




N/"$+# aie tieateu similaily. Bighlight the text, entei in the email auuiess in the
'Link' queiy below (}ohn.Boegmail.com foi example), then hit entei. It's
iecommenueu to use an email obfuscatoi to avoiu spambots fiom using available
email auuiesses online.

Bieamweavei also allows you to use the BTNL coue to entei in a hypeilink. The
coue is as follows:

<a hief="http:www.sjfc.euu">This is the text.<a>

The "http:www.sjfc.euu" is wheie the 0RL goes, wheie 'This is the text." is the text
that appeais foi the link. So you'u be left with a fielu that looks like this:
This is the text.

Nake suie to entei this coue online in the coue section of Bieamweavei. If you entei
it in the Besign view, then it will not woik.
O5%B)*#:
A technique that websites use is allowing useis to be linkeu to a specific pait of a
website. This is often useu with news stoiies, wheie a usei is taken to a peihaps the
thiiu oi fouith paiagiaph iathei than at the beginning. To cieate this, you shoulu
use G-#. Theie aie two steps, the fiist is labeling the aiea to link to with an IB anu
the seconu is linking to this IB.

1. To cieate an anchoi, highlight a woiu wheie you want the anchoi to be. In
the Piopeity Winuow, type in a name foi the IB.

2. To link to the ID, select the text that will be the link in the Design view. Under the
Link box in the Property window, type # and then the name of the ID created in
step 1. If you chose the ID name to be fisher, type in #fisher in the Link box.

S. Its also possible to link to an ID in a different HTML page. Rather than typing in
#fisher into the Link box, put the filename ahead of it. So if the ID is on a page
titled about.html, you would type in about.html#fisher.


=(+'$@+. <.D' >$5K 3'E+.#:
Bieamweavei lets you change the uiffeient styles of hypeilinks uepenuing on what
the usei uoes. Theie aie thiee main styles foi links:

1. Link coloi - Bow the link is vieweu iegulaily on a website without the
ciuisei hoveiing ovei it. (a:link)
2. visiteu links - Aftei a link is clickeu, the link is changeu to a uiffeient coloi.
This lets the usei know that they hau alieauy visiteu the hypeilink.
(a:visiteu)
S. Rollovei links - When the usei iolls ovei the link with the mouse without
clicking it, the link tuins into a uiffeient coloi. When the mouse is iolleu off
the link, it ieveits to its oiiginal link coloi. (a:hovei)

You can uefine uiffeient iules foi uiffeient aieas of a page by placing the name of the
IB oi class befoie the "pseuuo-tags" uesciibeu above:

.content a:link

0R

.siuebai1 a:link





G5#.*'$56 G/"6.#:
To inseit an image, place the inseition maikei in the Besign view of Bieamweavei.
Next, go to Inseit -> Image. You can then eithei choose to inseit an image saveu
locally on youi computei (oi hosteu on the seivei), oi you can inseit the 0RL of the
image if taken online.

To (#. 'B. $/"6. "# " +$5K, fiist click on the image. In the Piopeities box below, go
to the 'Link' box. Then eithei inseit the 0RL anu piess entei, oi click on the foluei
button anu finu a uocument to link the image to.

!"%K6*)(5C G/"6.#:
To inseit a backgiounu image, you'll neeu to go thiough the CSS Styles panel.
Bouble-click on an existing iule to open the piopeities foi it. (Typically, the
templates use 'bouy' as the backgiounu foi the whole page, but uepenuing on how
the page is set up, it may be something uiffeient.)

In the CSS Rule Befinition
uialogue box, select
Backgiounu. The seconu
fielu has 'Backgiounu-
image', which lets you
choose whichevei image
you'u like to be the
backgiounu of that
piopeity. This can eithei
be a 0RL oi a saveu
image.




G/"6. ="@#:
Images can be uiviueu into iegions calleu B)'#@)'#, cieating $/"6. /"@#. When
someone clicks on the hotspot, an action happens, such as following a 0RL oi
opening a file.

After an image is put onto your page, click on it. Below in the Properties field there will
be a section titled Map. Fill in a name for the hotspot to keep track of the image map.
After entering in a name, click on either the circle tool, the rectangle tool, or the polygon
tool. You can use either of these tools to create a hotspot shaped to fit whatever you need.



After clicking on the tool, go to the image and click and drag to create the desired shape.
If you have the polygon tool, you can click on the image wherever you want a point, and
to close it simply click on the first point created.

You'll be askeu to fill out an
Alteinative title so people that aie
eithei unable to view the pictuie oi
whose computeis can't access it
will be able to know what the
image is of.

Aftei cieating the B)'#@)', click on
the hotspot. Below in the
Piopeities fielu, inseit the 0RL in
the 'Link' box, oi click on the foluei
anu seaich foi a uocument on the
computei.