Adobe Dreamweaver on tarkvara programm, mida kasutatakse veebisaitide- ja rakenduste ehitamiseks. Me vaatame üle käesoleva postituse Dreamweaverist ja anname teile mõned põhjused selle kasutamiseks.
Nagu te arvatagi võite, tähendab definitsioon “sait” just veebisaitide loomist. Teil on kõike seda võimalik õppida kas WordPressi, Joomla või isegi Drupali abiga. Meil on olemas isegi juhised pesuehtsast HTML koodist, mis esines internetis just varasematel aegadel (selle all mõeldakse just koodi HTML5). Selles artiklis räägime me veel ühest tuntust veebisaidi ehitamise võimalusest, mis kannab nime Adobe Dreamweaver.
Teadmiseks nendele, kes seda veel ei tea, Dreamweaveri puhul on tegu rakendusega, mis laseb teil teie veebisaiti disainida, kodeerida ja hallata. Dreamweaveri juures on huvitav see, et see pakub teile kodeerimise võimalusi ning luua visuaalseid kasutajaliideseid kasutatavaid veebisaite.
Selles juhendis omandate te teadmised kõigest sellest, mida te peaksite teadma veebisaitide loomiseks Dreamweaveri abiga. Te saate ülevaate programmist ja selle võimalustest, peamistest funktsioonidest ja kuidas seda üles seada. Pärast seda leiate üksikasjaliku juhendi, kuidas luua Dreamweaveriga üks lihtne veebisait, muuta see mobiilisõbralikuks ja seejärel oma serverisse üles laadida.
Tegu on küll pika teekonnaga, kuid see on täiesti hämmastav, kui kiiresti te sellesse äärmiselt intuitiivsesse programmi süvenete.
Mis asi on Dreamweaver ja mida on teil võimalik selle abil saavutada?
Pinnapealselt on Dreamweaveri näol tegu IDE ehk integreeritud arenduskeskkonnaga. See tähendab, et see on osa tarkvarast, mis ühendab omavahel erinevad tööriistad, et hõlbustada veebidisaini ja arendust.
Eriti eriliseks teeb selle asjaolu, et see asub kusagil CMS-i ja puhta koodiredaktori vahel. Siit on teil võimalik lugeda, kuidas need erinevat osad töötavad.
Veebisaitide loomine läbi visuaalse disaini kasutajaliidese.
Dreamweaveri omanduses olev visuaalse kujunduse tööriistakast võimaldab põhimõttelistelt kogu saidi loomist teie hiire abil. See võimaldab teil asetada veebisaidi elemente viisil nagu te loote ka kavandeid programmis Word. Põhimõtteliselt on teil võimalik näha oma veebisaiti nii, nagu te näete seda ka brauseris, kuid teil on ainult võimalus seda samaaegselt ka kohandada.
See on väga kasulik, sest see lubab teil kiiresti ehitada oma veebisaidi luustiku, kirjutamata ainsatki koodirida. Selle asemel teeb Adobe Dreamweaver seda teie eest automaatselt. Teoreetiliselt on teil võimalik käsitsi kokku panna terve veebisait ja seejärel see serverisse üles laadida.
Kui te omate aga mingisuguseid teadmisi kodeerimisest, siis Dreamweaveril on ka kõik selleks vajalikud tööriistad olemas.
Töötab kui täieõiguslik koodiredaktor
Dreamweaveri teiseks osaks on jällegi selle täisfunktsionaalne koodiredaktor. Sellega kaasnevad kõik standartsed funktsioonid, nende hulgas ka:
Süntaksi esiletõstmine
See tähendab, et Adobe Dreamweaver toob esile erinevad elemendid erinevates värvides, et neid oleks kergem lugeda ja fikseerida.
Koodi lõpetamine
Alustage trükkimist ja redaktor toob esile automaatseid soovitusi sellest, mida te proovite või soovite sinna kirjutada. Sellel viisil ei pea te kõike ise täielikult lõpuni välja kirjutama.
Koodi kahandamine
See võimaldab teil oma koodi visuaalselt kahandada, kui te neid juhuslikult ei vaja. Nii ei pea te läbi kerima tervet faili, vaid töötada ainult nende osadega, mille kallal te tööd peaksite tegema.
Lisaks toetab Adobe Dreamweaver peaaegu kõiki veebidisainiks vajaminevaid keeli nagu HTML5, CSS, Javascript ja paljud teised.
Parimaks osaks on see, et kui te muudate midagi oma koodis, kuvatakse need muutused automaatselt ka teie ekraanil. Nii ei pea te muretsema sellepärast, et teie sait laetakse üles viisil, nagu te seda tegelikult ei soovi.
Seal on olemas veel mitmeid teisi funktsioone ja mitmeid neist näete te eesseisvas artiklis.
Dreamweaveri seadistamine ja veebisaidi kujundamise protsess.
Esimese sammuna peate te hankima endale Dreamweaveri ametlikult Adobe veebisaidilt.
Siit on teil võimalik leida prooviversioon või omandada Creative Cloud.
1. Lae alla ja installi
Kui te olete juba oma programmi ametlikult saidilt alla laadinud, alustage lihtsalt installimist ja järgige edasiseid juhiseid.
2. Käivitamine
Kui te alustate Dreamweaveriga, peaksite te nägema oma ekraanil midagi sellist.
Kui te ei ole seda programmi kunagi varasemalt kasutanud, valige “No, I`m New”. Sellel juhul suunab Adobe Dreamweaver teid läbi kogu protsessi. Esimesena tuleks valida, olete te kas huvitatud arendajatele mõeldud tööruumi kasutamisest või siis standartsest töölauast.
Meie otsustame standartse töölaua kasuks, sest arendajate jaoks mõeldud tööruum on mõeldud pigem edasijõudnute jaoks. Seejärel on teil võimalik valida oma tööruumi jaoks värv nelja erineva valiku hulgast.
Viimaseks sammuks on valimine, kas alustada lihtsa näidisfailiga, uue või olemasoleva projektiga või vaadata läbi mõne õppematerjalid.
Valige uue või eksisteeriva kaustaga alustamine ja te oletegi jõudnud oma seadistustega ühelpool.
Nüüd olemegi jõudnud sammuni, kus me alustame oma projektiga ja õpime kuidas luua oma sait Dreamweaveri abil.
3. Uue saidiga alustamine
Esimeseks sammuks on uue saidi loomine. Selle jaoks minge Site >> New Site. See viib teid ekraanile:
Sellel esimesel sammul saate te anda oma saidile nime. Siis peate te valima kuhu te soovite selle salvestada. See sõltub täielikult teist endast, aga tavaliselt on loogiline hoida kõik oma projektid ühes kohas, eelkõige lihtsuse huvides.
Samuti on teil võimalus siduda oma uus projekt Giti hoiuruumiga. See võib olla väga hea idee, sest see annab teile kontrolli versiooni üle, aga praeguseks jätame me selle sammu vahele.
Me tegeleme kõige sellega hiljem, valides vasakult “Servers”. Sama käib ka millegi sellise nagu “CSS Preprocessors”, mis omab tähtsust ainult juhul, kui te kasutate midagi sellist.
Meie jaoks omab aga tähtsust midagi sellist “Local Info” (kohalik teave), mis asub kohas “Advanced Settings” (täpsemad seaded).
Olge kindel, et te klõpsate paremal asuvale kausta ikoonile, mis ütleb “Default Images folder” (vaikepiltide kaust). Seejärel minge oma äsja loodud saidikataloogi, avaga see, looge uus kaust nimega “Images” ja valige see vaikimisi kaustaks ning valige see vaikekataloogiks. Sel moel salvestab Adobe Dreamweaver teie saidiga seotud pildid automaatselt sinna.
Ja ongi praeguseks kõik! Vajutage “Save” (salvesta) ja minge tagasi oma töölauale.
4. Looge oma kodulehe fail
Nüüd, kui te olete projekti saidi loonud, on aeg esimese faili jaoks. Me alustame kodulehega.
Kui Adobe Dreamweaver ei paku teile seda valikut ise automaatselt, siis valige File >> New. Teil on võimalik valida kas täiesti uue faili loomisega või kasutada juba olemasolevat teemat. Programmiga kaasnevad küll mõned nendest, aga meie loome selle asemel hoopis täiesti uue.
HTML on vaikimisi seatud ja võite jätta selle selliseks, nagu see on. Dokumendi pealkirja jaoks sisestage index.html ja valige “Loo”. See viib teid järgneva ekraanini.
See on see, millest me alguses ka rääkisime: reaal-ajas vaade teie saidist ja selle taga asuv kood. Samuti märkate te, et Dreamweaver on automaatselt loonud HTML-i põhitähised, millele te saate tugineda. Selleni me nüüd ka jõuame!!!
5. Päise loomine
Elemendi oma lehele sisestamiseks, peate te esmalt valima selle asukoha. Klõpsake tühjale lehele (sellel juhul Adobe Dreamweaver valib automaatselt elemendi) või asetage kursor ekraani koodiosa samale elemendile.
Pärast seda peate te minema paremas ülanurgas asuvale vahekaardile “Insert” (sisesta). See annab teile nimekirja ka kõige tavalisematest HTML-i ja saidielementidest, mida on teil võimalik oma lehele lisada. Kerige alla, kuni te näete valikus midagi sellist nagu “Header” (päis).
Sellele klõpsates lisatakse see teie lehele. Lisaks on teil seda võimalik näha ka HTML-i dokumendis.
Päris lihtne eksole?
Nüüd muudame me päises asuvat teksti, mis muutub ka selle pealkirjaks. Mõlema jaoks – kõigepealt märkige tekst koodiredaktorisse allosas.
Pärast seda valige “Insert”, klõpsake pealkirja kõrval asuvale noolekesele ja valige H1. See asetab lehe pealkirja H1 siltide vahele. Lisainformatsiooni H1 siltide kohta leiate te sellest artiklist.
Pärast seda on teil võimalik anda ka pealkiri oma lehele. Oma reaalsel veebisaidil peaksite te valima midagi kirjelduslikku koos märksõnadega, ja mitte ainult lihtsat näidet, nagu siin on näidatud.
Olgu nii! Nüüdseks oletegi te loonud oma lehele pealkirja. Praegu tundubki see endiselt nagu lihtsakoeline, mille tõttu tulekski meil seda CSS-i abil muuta.
6. Loo CSS-i fail
Juhul kui te ei ole sellega veel tuttav, siis CSS on osa veebiarendusest, mille abil antakse teie veebisaidile kujundus. See annab teile võimaluse ära määrata selle värvid, elementide mõõdud, fonditüübid, suurused ja kõik muu. Me soovime kasutada märgistusi oma lehele pealkirja andmiseks ja teha endale selgeks, kuidas on võimalik Dreamweaveris CSS-i muuta.
Teoreetiliselt saate te lisada CSS-i otse HTML dokumendi sisse. On olemas palju vähem robustseid võimalusi kui see, kuidas teeme seda meie, mis on ühe pühendunud faili loomine kogu saidi CSS-i stiilide jaoks.
Esimeseks sammuks oma uuele pealkirjale “klassi” või “id” määramine. Selle protsessi ajal palub Adobe Dreamweaver teil luua ka stiililehe faili. Minge ekraani paremas alanurgas olevasse DOM-i menüüsse, kus loetletakse kogu teie saidi struktuur. Tehke kindlaks teie poolt on valitud “header” ehk pealkiri.
Reaalajas näete te seda siniselt tähistatud värviga, millel on väike silt ja plussmärk allosas. Klõpsake plussmärgile ja trükkige avatavale väljale “#header”. Trellid tähendavad seda, et te määrate sellele ID, mitte klassi. Vajutage “enter. Valige avamismenüüs lehe Define asemel käsklusega “Loo uus CSS-fail”. Hüpikaknas valige “Browse” (lehitse) ja navigeeriga oma saidi kausta. Seejärel trükkige style.css faili nime väljale ja klõpsame “Save” (Salvesta).
Nüüd kui te valite OK, siis avaneb ülaosas reaalajas uus fail. Teil on võimalik seda vaadata ja kohandata sealt. Siis see seotakse sektsiooniga, mis on üheks teie saidi HTML-i osaks.
Lahe. Nüüd olete te valmis muutma oma saidi välimust.
7. Looge CSS-i valija ettevõtte tiitli ehk pealkirja jaoks
Esimese sammuna tahate te muuta oma pealkirja fonti ja selle keskosa. Selle jaoks peate te esmalt looma uue CSS-i valija ehk CSS Selectori. Selector ehk valija on meie lehel asuva elemendi nimi, mille abil te saate muuta atribuute, värve, dimensioone ja palju muud.
Märgistage oma H1 pealkiri DOM-i vaates parempoolses alumises servas. Seejäärel valige “CSS Designer”.
CSS-i valija loomiseks klõpsake real, mille peal on märgitud Selectors, ja seejärel klõpsake pluss-sümbolil. See peaks automaatselt soovitama teile valikut nimega “#header h1”.
Vajutage selle loomiseks “Enter”. Ja ongi kõik!
Kõigile neile, kellel jääb CSS-i juures teadmistest vajaka, siis tegemist on “#header” elemendi sisese “H1” elemendi sihtimisega. Nii rakendatakse CSS-is sisestatud andmeid ainult kirjutatud teksti ja mitte päiseelemendi suhtes tervikuna.
8. Muutke pealkirja Fonti
Nüüd kui te omate valijat, saate te sellele andmeid. Kui te olete CSS-iga juba sina peal, siis trükkige lihtsalt style.css ja programm hoolitseb selle eest ise automaatselt.
Adobe Dreamweaver on siinkohal hoolt kandnud ka vähem kogenud kasutajate eest. Selleks jääge CSS Designeri menüüsse ja tühjendage ruut “Kuva komplekt” (show set). Pärast seda toimingut avatakse mitmed lisavalikud.
Uute nuppude abil saate valida paljude CSS-i omaduste hulgast, kujunduse, teksti, joonte ja tausta erinevatest valdkondadest. Suurem nuppude hulk annab teile rohkem valikuid teie enda reeglite järgi tegutsemiseks.
Fondi tüübi muutmiseks klõpsake ülaosas asuvale suvandile “Text” (tekst). Eelseisvates valikutes liikuge hiire kursoriga üle fondi-perekonna ja klõpsake vaikefondile.
See annab teile tavaliste fontide jaoks mitmeid võimalusi, sealhulgas nende erinevad tagasilöögid (kui kasutaja brauser ei suuda primaarset fonti näidata). Sellesse menüüsse pääsemiseks peaksite te klõpsama kasule “Manage Fonts” (halda fonte).
Siin on teil võimalus valida tasuta fontide vahel Adobe-i Edge Web Fonts teenusest. Otsige vasakult fonti nime järgi või kasutage selle jaoks mitmeid filtrite valikuid, et tõmmata koomale teie valikuvõimalusi, kuni te leiate midagi enda jaoks sobivat.
Klõps mõnel kirjatüübil tähistab selle lisamist Dreamweaverisse. Kui te olete jõudnud sellega ühele poole, saate neid otse kasutada või minna oma kohandatud fontide määratlemiseks kohandatud fontide virnadesse.
Praeguseks klõpsake lihtsalt “Done” ja seejärel uuesti “default fonts”. Seekord valige teie poolt valitud font ja ongi kõik – muudatus ongi tehtud koos kõigi vajalike kodeeringutega.
Kui te klõpsate oma ülaosas asuvale failile style.css, näete, et ka kõik märgistused on teie poolt lisatud.
9. Tsentreerige pealkiri ja muutke selle suurust
Tekst võiks ikkagi paista välja natuke parem. Järgmiseks ülesandeks on pealkirja tsentreerimine ja selle suuruse muutmine. Selle jaoks on teil võimalik kasutada järgmist funktsiooni, millele on antud nimi “Quick Edit”.
Selle kasutamiseks minge koodivaatele ja paremklõpsake redigeeritaval osal. Hetkel asub see tagis <h1>.
Siinkohal valige ülaosas “Quick Edit”. See avab all oleva elemendi, mis on seotud CSS koodiga. Nüüd on teil võimalik sisestada täiendavaid atribuute, ilma et te peaksite üle vaatama kogu stiililehe faili. Teksti tsentreerimiseks ja selle suuremaks tegemiseks lisage sellele järgnev koodirida.
Selle lihtsustamiseks teeb Adobe Dreamweaver millegi trükkimisel erinevaid soovitusi, mida te võiksite sinna sisestada. See on koodi lõpetamise funktsioon, millest sai meil ka eelnevalt räägitud.
Kui te olete sellega lõpetanud, peaks see välja nägema sellisena:
Pange tähele, et tekst on otsevaates juba muutunud. Nüüd vajutage kiiresti lahkumiseks “Esc” ja liikuge edasi stiili lehele. Siit näete te, et uus CSS on lisatud täiesti sobivasse kohta.
Täitsa põnev?
Kui te pole aga päris kindel, mida CSS atribuudid tähendada võivad, tehke lihtsalt paremklõps ja valige “Quick Docs” (või siis vajutage CTRL + K). Dreamweaver räägib siinkohal teile kõigest täpsemalt.
10. Lisage rohkem sisu
Seni õpitud abil saate nüüd algelise saidi üles ehitada. Selle Dreamweaveri õpetuse huvides oleme teinud järgmist:
⦁ Määranud kindlaks pealkirjade ja lõikude vaikimisi määratud fondid
⦁ Lisanud navigeerimisriba ja loonud selle kodulehele viiva lingi
⦁ Lisanud sisu jaoks mõeldud lahtrid, milles asuvad veel kaks kastikest
⦁ Liigutanud ühe neist vasakule ja teise paremale koos suunamise atribuutidega
⦁ Piiranud nende mõõte protsentide abil, et neid oleks võimalik horisontaalselt joondada
⦁ Lisanud vasakule näidispealkirja, sealhulgas ka järjestamata nimekirja
⦁ Loonud vormi, kaks tekstivälja ja saatmisnupu
⦁ Lisanud ruumi elementide ümber CSS-i “margins” ja “paddings” atribuutide abil
⦁ Varustanud teid taustavärvidega ja piiridega
⦁ Loonud jaluse ja autoriõigussõnumi
Siit näete te tulemust:
Nagu näiteks koodi:
Kuna see on natuke rohkem arenenud variant ja mitte kõik ei tea, kuidas seda teha, leiate te allpool HTML-i ja CSS-i, et saaksite selle ise rekonstrueerida. Esiteks HTML:
Ja järgmiseks CSS:
Me tahame teile näidata seda näitena ja kuidas näevad välja järgmised sammud. Isegi kui see tundub teile natuke keerulisena, paneme me selle kokku samal viisil nagu eelnevalt sai näidatud.
11. Eelvaade brauseris ja mobiiliseadmes
Kuidas me kõike seda tegime. Esmalt oleme me tõenäoliselt veebsaitide ehitamisel hetkel natuke rohkem kogenud kui teie seda olete. Selle pärast oleme me juba veebisaidi loomiseks vaja minevad sammud oma peas läbi mõelnud.
Teiseks kasutame me väga kasulikku funktsiooni, mis aitab meil protsessi kiirendada: Brauseri eelvaade. Dreamweaver lubab teil oma veebilehti brauseris ja mobiilsetes seadmetes reaalajas vaadata.
Alustamiseks klõpsake reaalajas vaate nupule all paremas nurgas.
See avab eelvaate valikud.
Klõpsate ühele brauseri nimedest avab teie veebisaidi projekti. Lisaks on teil võimalik ka skaneerida QR kood oma telefoni või tahvelarvutiga, või hoopis trükkida kuvatud aadress oma brauserisse, et alustada reaalajas eelvaadet teie seadmes.
Te peate olema teadlik, et te sisestaksite selleks kindlasti Adobe ID ja parooli. Selle saate te endale Dreamweaveriga registreerumisel.
Selle juures parimaks osaks on aga see, et kõik tehtud muudatused ilmuvad teie ette koheselt ja automaatselt teie brauseris.
Kuidas aitab see meil meie saiti kiiremini koostada? Esiteks, olenevalt teie ekraani suurusest, võib kõik see, mis kuvatakse teie brauseris, olla tegelikuses lähemal kui see, mida te näete Dreamweaveris.
Teiseks, brauseris saidi kontrollimine lubab mul kasutada arendaja tööriistu muutuste testimiseks.
Nad on väga sarnased sellele, mida te näete Dreamweaveris. Samas on nad ka meile natuke rohkem ära tuntavad, nii saame me nende abil kiiremini töötada ja kopeerida ning kleepida koodi meie stiililehele.
Telefonis kuvatava versiooni juures on näha, et seal tuleb meil selle kallal veel kõvasti tööd teha.
See toob meid aga järgmise sammuni.
12. Lisa meedia päringud
Oma veebisaitide kõikides seadmete töökorda seadmiseks peate te lisama neile niinimetatud meedia päringud. Tegu on tingimuslike CSS avaldustega, mis käsivad kasutada stiile ainult teatud ekraanisuuruste kohal või all, või siis hoopis teatud seadmetes. Sellel moel saate te väiksematel ekraanidel kavandit muuta.
Siiani olete määratlenud ainult globaalseid stiile. See tähendab stiile, mis on määratud tervele saidile. Nüüd õpime me, kuidas lisada tingimuslikke stiile väiksemate ekraanide jaoks.
Esimesena minge “CSS Designer”. Veenduge, et fail, millele soovite koodile lisada, on valitud jaotises “Sources” (allikad). Vajutage + märki @media alt.
See toob teieni selle valikute paneeli:
Määratleda on teil võimalik meediapäringute tingimused, näiteks seadmed, millele nad kehtivad, orientatsioon, eraldusvõime ja palju muud. Plussmärgi abil saate te lisada samaaegselt ka mitu tingimust.
Meie jaoks omab suuremat tähtsust maksimaalse laiuse säte. Selle abil saate te määratleda ära kohandatud CSS-i, mis kehtib ainult teatud maksimaalsele ekraanisuurusele.
Ütleme näiteks, et te soovite kohandada oma telefonis kuvatavat esimesena, nii et te sisestate selle maksimaalseks laiuseks 375px. Pärast seda toimingut näete te all asuvat CSS koodi.
Klõpsate nuppu OK, juhtub ka see, et ekraani ülaossa ilmub roheline joon. See tähistab visuaalselt meediumipäringut. Seda klõpsates kohandub ekraan automaatselt selle suurusega.
13. Lisa tingimuslik CSS
Mobiili kujunduse korrigeerimiseks peame me esmalt eemaldama koodi, mille tõttu asetuvad kaks saidi elementi üksteise kõrvale, sest seal ei ole täiesti loomulikult selle jaoks piisavalt ruumi.
Täpselt sama saate te teha CSS-i kohandamise abil nagu te tegite seda eelnevalt, ainult hetkel on teil aktiveeritud samaaegselt meediapäring.
Esiteks – liikuge oma DOM vaates oleva elemendi juurde. Sealt valige selle jaoks CSS-i valija. Seejärel seadistega selle atribuut “width” (laius) atribuudiks “auto” (automaatne) ja lisage mõningasel määral sellele lisaruumi, nii et piir ei jookseks mööda ekraani äärt.
Samamoodi on teil võimalik oma lehel muuta CSS-i abil ka kõiki teisi elemente, et nad näeksid välja märksa paremad.
Põhimõtteliset ongi see meediumipäringute kohe pealt kõik. Sama meetodit saate te kasutada paigutuse kohandamiseks tahvelarvutitele ja teiste suurustega seadetele.
Väikene meeldetuletus: Ärge optimeerige ainult teatud seadmete ja suuruste jaoks, vaid looge meediumipäringuid sõltuvalt kavanditest ehk paigutustest. See tähendab ekraani suurusega mängimist ja päringute lisamist alates nendest punktidest, kus paigutus enam hea välja ei näe.
Veel ühe asjana saate te luua meediumipäringuid pisut lihtsamini, kasutades alumisse nurka eelseadistatud seadme suurusi, klõpsates ülaosas asuvale + sümbolile, kui te olete leidnud punkti, kuhu te soovite selle lisada.
14. Oma veebisaidi serverisse majutamine
Seal on olemas mitmeid erinevaid majutamiseks mõeldud servereid. Nende hulka kuuluvad:
⦁ Bluehost
⦁ Hostgator
⦁ Hostinger
⦁ GreenGeeks
⦁ DreamHost
⦁ SiteGround
⦁ A2 Hosting
⦁ WestHost
⦁ Veebimajutus
Meie kasutame Dreamweaveriga sidumiseks aga meie enda kodumaist veebimajutus keskkonda www.veebimajutus.ee.
Sammul, kui te olete lõpetanud disaini poolega, olete te põhimõtteliselt valmis enda veebisaidi serverisse üles laadima.
Esmalt minge “Site >> Manage Site”. Valige menüüst oma eksisteeriv veebisait ja valige vasakult alaosast “Edit”. Järgnevas aknas klõpsake “Servers” (serverid).
Sisestage kõik olulised andmed FTP serveriga sidumiseks. Nime valimine sõltub täielikult teist endast, ülejäänud tuleb majutusteenuse pakkujalt (FTP aadress, kasutajanimi, parool). Ärge unustage täpsustada, millisesse kataloogi failid paigutada, ja oma aktiivse saidi veebiaadressi! Viimane osa on oluline just sellepärast, et Dreamweaver saaks luua saidi suhtelisi linke.
Valiku “Advanced” (täpsemad) alt leiate te veel mõningaid võimalusi. Tavaliselt hoiate te siinkohal sätted puutumata. Klõpsake topelt-klõpsuga “Save” ja oletegi lõpusirgel.
Nüüd minge paneelile “Files” ja ja klõpsake serveriga ühenduse loomiseks kõige vasakpoolsemal sümbolil:
Kui ühendus on loodud, valige üleslaaditavad failid ja klõpsake selleks ülespoole suunatud noolekesele. Kui see on tehtud, peaks teie sait olema saadaval teie veebiaadressi kaudu.
Head töö. Oletegi loonud just oma esimese Dreamweaveri abil loodud ja üles laaditud lihtsa veebisaidi.
Kokkuvõtteks
Adobe Dreamweaver on üks parimaid tarkvarasid oma veebisaitide ehitamiseks. See ühendab endas kasutajaliidese ja täieõigusliku koodiredaktori. Läbi selle koosluse on veebisaite kerge luua nii algajatel, kesktasemel kui ka karastunud ja kogenud veebiarendajatel.
Selles artiklis tutvustasime me teile Dreamweaverit ja tõime teine mitmed selle erinevad võimalused. Me oleme teine toonud informatsiooni sellest, kuidas on teil võimalik seda tarkvara üles seada ja oma esimese saidiga algust teha. Te olete omandanud teadmised HTML-i struktuurist ja kuidas on teil võimalik anda sellele sobiv kujundus CSS-i abil. Rääkisime ka sellest, kuidas teha mobiilne veebisait reageerivaks ja see üles laadida serverisse.
Praeguseks peaksid teil olema juba üsna kindlad teadmised sellest, kuidas Adobe Dreamweaver toimib ja kuidas seda kasutada veebisaidi loomiseks.
Ärge unustage, et Adobe Dreamweaver on ainult üheks viisiks, kuidas on teil võimalik veebisaite ehitada. Seal on olemas mitmeid teisi võimalusi, mille kohta te leiate palju olulist informatsiooni just siit.
