Tutorial Amaya

6/7/13
Amaya browser / editor tutorial1
WelcometotheAmaya
GettingStartedTutorial
Thefilecalledstyle.cssmustbeinthe
samedirectoryastut1.htmlthroughto
tut5.html.Soshouldthepictures.See
gettingthispagebelow.
Amayaisunderconstantdevelopment.
Runyourpageonanotherbrowserasyou
testit.Seetheleftnavigationcolumnfor
instructionstoaccessthestyle.css.
Thispageis
introduction1
LastUpdated:2010
0623
Pagestructure2
htmland
escaping3
Help&lists4
Help&lists5
Thiscolumnisa
dividentifiedas
id="nav"
WelcomeThispageassumesyouare
usingAmayaBrowser/Editor
Clickon
somethinginthis
column.Goto
thebottomlefton
thestatusbar
Beginningasitefromnothingishard.Youneedalayoutplan
andsomeknowedgeofAmaya,CSSandHTMLbeforeyoucan
begin.
Thebestwaytolearnistouseotherpeople'spagesandmodify
them
Modifythispagetosuityourself,andlearnAmayawhileyoudo.
Lookatthesourcecodeoccasionallytolearnfromwhatyouhave
lastdivintheline justdone.
ofdivsandthis
Gettingthispage:
columnwillturn
Openthispage(tut1.html)anditsCSSinAmaya.Togetstyle.css
justchangetut1.htmltostyle.cssinAmaya'snavigationlineatthetop
blue.Gotothe
andpressEnterOrclickFormat>Stylesheets>Open,andchoose
andclickonthe
dnwfriends.nzl.org/amayaproject/tut1.html
1/4
6/7/13
topmenubar
andclickFormat
>ShowApplied
Styleand
doubleclickon
oneofthelines.
Youwillopena
newtabshowing
thestylesheet
whichwillshow
thestyleforthis
column.
Trytochange
somethingand
clickonFile>
Saveandcheck
toseethegreen
buttonatthe
bottomrightis
stillgreen
meaningthe
codeisvalid.
Hasyourchange
madeany
differencetothis
page?
it.DoaFile>Save_Asintoadirectoryonyourcomputer.Towork
correctlyyouneedallthepagesincludingstyle.cssandthepictures
withtheiroriginalnamesinthesamedirectoryonyourcomputer.
YoucangetthepictureswithFirefoxorInternetExplorer(butnot
Amaya)byrightclickingonthemandselectingSaveImageAs.
Makeabackupofthewholesiteandthenyoucanchangethings
whileyoulearnAmaya,CSS,andHTML.Youcanusethisasa
modelforyourownsiteortakeanyofthethousandsofpagesoffthe
internet.Respectcopyright.Veryfewinternetpagesarevalidcode.
Thestylesheetisattachedbythestatement<linkhref="style.css"
rel="stylesheet"type="text/css">intheinvisible<head>sectionof
thethehtml.Callyourstylesheetsomething_imaginative.css.Iuse
style.cssasanexample.
ExaminingtheSource:
AtanytimeyoucanexaminethecodebypressingCTRLUO.That
isholddownthecontrolbuttonandpushuthenoonthekeyboard
andthesourcecodewillopen.CtrlUHwillclosethewindowagain.
Doubleclickingonthe(pink?)lineatthebottomopensandcloses
thesourcecodealsoandyoucanusetheViewmenu.Lookatthe
bottomleft(html>body>div>div>p)totellyoustructure.Youcanclick
onthestructureitems.
Getstartedbytyping:
Clickhereandaddsometexttothisparagraphasifyouareusinga
wordprocessor.EntergivesanewparagraphandCtrlEntergivesa
newline.Edit>UndoorCTRLZwillremovemistakes.
Selectapieceofyourtext.GotoInsert>InformationTypeand
chooseone.Experiment.
Selectapieceofyourtext.GotoInsert>CharacterElementand
chooseone.Experiment.
Getstartedwithaheading:
Selectsometextbydraggingacrossit.GotoInsert>Headingand
chooseone.Youshouldgetaheading.Workonimprovedformatting
later.
Getstartedwithanimage:
WiththecursorsomewhereonthepagegototheMenuBar.Click
Insert>Image.Clickthepictureofthefolderandselectanimageas
usualforothersoftware.TypesomethingintotheAlternateText.
2/4
6/7/13
ClickConfirm.
Youshouldnow
haveanimage.Dragthemouseacrosstheimagetoselectitand
resizeasifyouareinawordprocessor.Worryaboutlayoutlater.
Makealink
Typesomethinganddragacrossittoselectit.Alink.GototheMenu
Bar.Links>CreateorChangeaLink.Typeinthenameofapage.
eghttp://www.gmail.comortut3.htmlandclickonConfirm.
TheViewMenu
TakeaminutetotryeachoftheoptionsintheViewMenu.Theyare
fairlyselfevident.Usetheonesthatyouarecomfortablewith,but
theyallhavevalue.
TheInsertMenu
TakesometimetofindwhatisintheInsertMenu.Someyouwill
neveruse,andsomeyouwillwantoften.Giveyourselfsomeblank
spacetoexperiment(EnterEnterEnter)anduseCtrlZ(Edit>Undo)
toreversemistakes.
Thisisa<divclass="caption">withacoloredborder.Click
insideitandpressF2.Youshouldhavethewholediv
selected.GotoFormat>ShowAppliedStyleandyouwillbe
abletoclicktoopenthestylesheettoseewhyitiscentered
withcoloredbordersandspacearoundit.
Thisisthesameasthedivabove
This<divclass="caption">containstheheadingaboveand
anotherdivcalled<divclass="pictureright">whichallowstext
likethistofloatpastitontheleft.Notethatwhenadivfloatsit
isotherthingsthatmove.Thefloatingdivstaysput.
Confusing.
3/4
6/7/13
Selectthe
pictureby
draggingonit
andpressF2to
selectthediv
thengoto
Format>Show
AppliedStyle
andclickona
linetothe
stylesheetto
findoutwhyit
floatsonthe
rightside.
Replacetheimagebydraggingonitandpressdelete.Then
withoutmovingtheinsertiionpointgotothemenuitemInsert
>Image.Clickontheyellowfolderandinsertanimageof
yourown.Dragtosize.Imagesontheinternetdonotneedto
belargerthan100kandoften30kwilldo.
Nextpage>
ThispageiswrittenonAmaya11.3runningonUbuntu10.04.
PicturesaretakeninWellington,NewZealand.
IhavechangedmyNZlocalEnglishtoAmericanwhereitis
alsousedascode(color&center).
Anycomments,Amayaexperiencesandextramaterialvery
welcome.
jeffhunt90@gmail.com
4/4

Tutorial Amaya

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial Amaya

Încărcat de

Drepturi de autor:

Formate disponibile

6/7/13

Amaya browser / editor tutorial1

Amaya browser / editor tutorial1

Amaya browser / editor tutorial1

Amaya browser / editor tutorial1

S-ar putea să vă placă și