\n Dreamweaver on kaikkien verkkopohjaisten toimintojen \u00e4iti Internetiss\u00e4. Useimmille ihmisille Dreamweaver on vain ty\u00f6kalu verkkosivustojen luomiseen, mutta vain ammattilaiset tiet\u00e4v\u00e4t, ett\u00e4 Dreamweaver on voimanpes\u00e4.\n<\/p>\n
\n Dreamweaverilla on monia ominaisuuksia ja vaihtoehtoja, jotka tekev\u00e4t siit\u00e4 web-kehitt\u00e4jien suosikkity\u00f6kalun. T\u00e4ll\u00e4 ohjelmistolla on ep\u00e4ilem\u00e4tt\u00e4 tunnetuin IDE (Integrated Development Environment), jota mill\u00e4\u00e4n muulla web-kehitysohjelmistolla ei ole nykyisill\u00e4 markkinoilla. Joko kehitys-, yhteisty\u00f6- ja koodausty\u00f6kalut, Dreamweaver tarjoaa web-kehitt\u00e4jille kunnollisen pelivalikoiman. T\u00e4st\u00e4 syyst\u00e4 aloitteleville web-kehitt\u00e4jille on t\u00e4rke\u00e4\u00e4 tiet\u00e4\u00e4, kuinka he voivat maksimoida Dreamweaverin k\u00e4yt\u00f6n.\n<\/p>\n
\n Kaikki tekij\u00e4t, jotka erottavat asiantuntevat web-kehitt\u00e4j\u00e4t ja tavalliset web-kehitt\u00e4j\u00e4t, ovat piilossa valitettavan intuitiivisten valikkojen alla, mink\u00e4 vuoksi uusien web-kehitt\u00e4jien on vaikea parantaa taitojaan. T\u00e4ss\u00e4 artikkelissa aion kuitenkin n\u00e4ytt\u00e4\u00e4 sinulle ne Dreamweaverin piilotetut ja tehokkaat toiminnot, jotka on eritt\u00e4in t\u00e4rke\u00e4\u00e4 tiet\u00e4\u00e4 t\u00e4m\u00e4n p\u00e4iv\u00e4n markkinoiden vaatimusten t\u00e4ytt\u00e4miseksi. T\u00e4m\u00e4 artikkeli auttaa sinua p\u00e4\u00e4sem\u00e4\u00e4n n\u00e4ihin toimintoihin nopeasti ja tarjoaa sinulle kymmenen parasta hy\u00f6dyllist\u00e4 hakkeria, jotka parantavat ty\u00f6si laatua ja parantavat koodaustasi merkitt\u00e4v\u00e4sti.\n<\/p>\n
\n Kaikki tiet\u00e4v\u00e4t, ett\u00e4 Dreamweaver tarjoaa staattisen n\u00e4kym\u00e4n tai avoimet tiedostomme. Kysymys j\u00e4\u00e4 kuitenkin vastaamatta WordPressin kaltaisen sovelluksen dynaamisiin n\u00e4kymiin. Dynaamisen n\u00e4kym\u00e4n m\u00e4\u00e4ritt\u00e4miseksi meid\u00e4n on kerrottava Dreamweaverille dynaamisten n\u00e4kymien asetuksista. Voit m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4m\u00e4n siirtym\u00e4ll\u00e4 HTTP-pyynt\u00f6asetuksiin napsauttamalla N\u00e4yt\u00e4 > Suora n\u00e4kym\u00e4 > Asetukset-valikko ja antamalla sitten GET tai POST, joka tarvitaan sovelluksesi tarkastelemiseen oikein.\n<\/p>\n
\n T\u00e4m\u00e4n j\u00e4lkeen vaihda Dreamweaverin Live View -n\u00e4kym\u00e4, joka korvaa Design View -paneelin sivusi reaaliaikaiseksi, pikselin t\u00e4ydellisesti renderoiduksi WebKitiksi. T\u00e4ydenn\u00e4 se sitten live Javascriptill\u00e4, DOM-manipulaatioilla, tietokantakyselyill\u00e4, palvelinpuolen koodilla ja renderoidulla CSS:ll\u00e4 suunnittelun\u00e4kym\u00e4n k\u00e4ytt\u00f6liittym\u00e4n paikkamerkkikuvakkeen sijaan.\n<\/p>\n
\n Navigointi on responsiivisen verkkosivuston yksisivuinen komponentti, jolla pit\u00e4isi olla mukautuva kyky vastata pienempien n\u00e4ytt\u00f6jen tarpeisiin, joihin Bootstrap voi auttaa paljon. Bootstrapin avulla voit helposti m\u00e4\u00e4ritt\u00e4\u00e4 navigointipalkin ja vaihtaa vaakakaistalta pystypaneeliin. Syyn\u00e4 on se, ett\u00e4 Dreamweaver tukee kaikkea Bootstrapin navigoinnin joustavuutta ja se on helppok\u00e4ytt\u00f6inen ominaisuus tehokkaan ja reagoivan verkkosivuston kehitt\u00e4misess\u00e4.\n<\/p>\n
\n Antaaksesi sinulle nopean yleiskuvan siit\u00e4, seuraava on nopea esittely Bootstrapin k\u00e4ytt\u00e4misest\u00e4 kehityksess\u00e4si.\n<\/p>\n
\n Navigoinnin tehostaminen Bootstrapilla alkaa Dreamweaverin uudesta asiakirjadialogista. Napsauta vain Bootstrap Framework -painiketta uuden asiakirjan valintaikkunassa ja valitse my\u00f6s pre-build layout -valintaruutu, jos haluat k\u00e4ytt\u00e4\u00e4 kaikkia navigointivaihtoehtoja, kuten;\n<\/p>\n
\n Jos se tuntuu vaikealta, on toinen vaihtoehto. Dreamweaverilla voit luoda mukautetun navigointipalkin. Jos pid\u00e4t tummasta paletista, lis\u00e4\u00e4 luokkaasi .navbar-inverse\n<\/p>\n
\n tag. Voit jopa leikki\u00e4 sill\u00e4. Jos haluat n\u00e4ytt\u00e4\u00e4 navigointisi aina sivun yl\u00e4puolella, kirjoita .navbar-fixe-top. Jos haluat n\u00e4ytt\u00e4\u00e4 sen alla, kirjoita .navbar-fixed-bottom. Kaikki n\u00e4m\u00e4 Bootstrap-luokat ovat vakioita, ja Dreamweaver-koodivihjeet tukevat my\u00f6s n\u00e4it\u00e4 koodauksia, joten sinun ei tarvitse pit\u00e4\u00e4 koko koodausta mieless\u00e4. Sinun tarvitsee vain kirjoittaa .navbar elementin n\u00e4ytt\u00f6\u00f6n, ja saat ponnahdusikkunan, josta voit valita haluamasi vaihtoehdon.\n<\/p>\n
\n Ajaxilla on eritt\u00e4in dynaaminen luonne. T\u00e4st\u00e4 syyst\u00e4 usein, kun joudumme olemaan vuorovaikutuksessa sivun kanssa, jonka kohteet eiv\u00e4t ole k\u00e4ytett\u00e4viss\u00e4 tai joita ei ole hahmonnettu ensimm\u00e4isen sivun latauksen yhteydess\u00e4. N\u00e4m\u00e4 kohteet voivat joutua sivulle jonkin latausajan j\u00e4lkeen, mink\u00e4 vuoksi ne eiv\u00e4t n\u00e4y ensimm\u00e4isell\u00e4 latauksella. Esimerkiksi, kun saatat haluta muuttaa ty\u00f6kaluvihjeen tyyli\u00e4, joka toteutettiin kokonaan JavaScriptill\u00e4, etsit j\u00e4rjestelm\u00e4llisesti komentosarjoistasi l\u00f6yt\u00e4\u00e4ksesi, mik\u00e4 kohde luotiin miss\u00e4. Sen sijaan, ett\u00e4 etsit skriptej\u00e4, kokeile seuraavaa.\n<\/p>\n
\n Aseta Dreamweaverisi Live View -n\u00e4kym\u00e4\u00e4n ja render\u00f6i sivusi. Paina sitten F6-n\u00e4pp\u00e4int\u00e4 pys\u00e4ytt\u00e4\u00e4ksesi JavaScriptin milloin tahansa, jolloin voit eritell\u00e4 ja kohdistaa mink\u00e4 tahansa sivun dynaamisen kohteen koodin. T\u00e4m\u00e4 ei ainoastaan \u200b\u200bauta sinua kohdistamaan dynaamisen kohteen tarkkaan koodiin, vaan my\u00f6s nopeuttaa kehityst\u00e4si v\u00e4hent\u00e4m\u00e4ll\u00e4 aikaa mink\u00e4 tahansa koodin etsimiseen dynaamisella verkkosivustolla.\n<\/p>\n
\n Koodausk\u00e4sikirjoitus voi olla hyvin h\u00e4mment\u00e4v\u00e4, jos et ole tottunut n\u00e4kem\u00e4\u00e4n monimutkaista koodausta joka p\u00e4iv\u00e4 ja y\u00f6. T\u00e4ss\u00e4 koodien korostaminen auttaa sinua luomaan erotteluja koko skriptiss\u00e4. Sen sijaan, ett\u00e4 liikutat silmi\u00e4si verenvuotoreunalla, Dreamweaverissa on ominaisuus, joka korostaa koodausta, joka auttaa sinua lukemaan sen. Avaa t\u00e4t\u00e4 varten Dreamweaver-asetukset ja ota k\u00e4ytt\u00f6\u00f6n tekniikan esikatseluosio. Napsauta sitten Ota koodin korostus -vaihtoehtoa ja anna Dreamweaverin tehd\u00e4 teht\u00e4v\u00e4ns\u00e4. Sinun on kuitenkin ehk\u00e4 p\u00e4ivitett\u00e4v\u00e4 Dreamweaver-versiosi, koska t\u00e4m\u00e4 ominaisuus on saatavilla vain uusimmassa versiossa.\n<\/p>\n
\n Kun olet ottanut korostusvaihtoehdon k\u00e4ytt\u00f6\u00f6n, kaksoisnapsauta mit\u00e4 tahansa tunnistetta, niin se korostaa kaikki tunnisteen esiintym\u00e4t nykyisell\u00e4 sivulla. Parametrit on kuitenkin m\u00e4\u00e4ritelt\u00e4v\u00e4. T\u00e4m\u00e4 ty\u00f6kalu on erinomainen samankaltaisten elementtien nopeaan tunnistamiseen ja niihin siirtymiseen. Kun olet korostanut mink\u00e4 tahansa elementin, k\u00e4yt\u00e4 pikan\u00e4pp\u00e4imi\u00e4 f3 PC:ss\u00e4 ja CMD-G Macissa) siirty\u00e4ksesi korostetusta elementist\u00e4 seuraavaan. Vaihtomuutos voi my\u00f6s siirty\u00e4 taaksep\u00e4in edelliseen osaan. Lis\u00e4ksi koodin korostus toimii my\u00f6s HTML-tunnisteiden attribuuttien ja arvojen kanssa, joten voit helposti havaita tietyt luokat.\n<\/p>\n
\n Dreamweaver on loistava alusta \u00e4lykk\u00e4ille ja t\u00e4ydellisille HTML- ja CSS-koodeille. Jotkut ihmiset kuitenkin uskovat, ett\u00e4 JavaScript ei ole t\u00e4ydellinen. Jos kyseess\u00e4 on jQuery tai Prototype, Dreamweaverissa sinun pit\u00e4isi tiet\u00e4\u00e4, ett\u00e4 on API-laajennuksia, jotka tarjoavat Javascriptin t\u00e4ydennyskoodit. N\u00e4m\u00e4 koodit vauhdittavat kehitysprosessia, koska n\u00e4it\u00e4 koodeja k\u00e4ytt\u00e4m\u00e4ll\u00e4 ei tarvitse kirjoittaa kokonaisia \u200b\u200bskriptej\u00e4 ja ne ovat melko k\u00e4tevi\u00e4 nopeille koodaajille.\n<\/p>\n
\n Dreamweaver on ainoa web-kehitysohjelmisto, jonka avulla voit k\u00e4ytt\u00e4\u00e4 sellaisia \u200b\u200bjQuery- ja Prototype-t\u00e4ytt\u00f6koodeja, jotka auttavat jokaista web-kehitt\u00e4j\u00e4\u00e4 nopeuttamaan teht\u00e4v\u00e4\u00e4ns\u00e4 ja tuottamaan parhaan mahdollisen tuotteen v\u00e4h\u00e4isin ponnistuksin.\n<\/p>\n
\n CSS ja JavaScript ovat itsen\u00e4isten tiedostojen nimi\u00e4, jotka n\u00e4et, kun avaat HTML- ja PHP-tiedostoja. Kun avaat PHP-tiedoston, n\u00e4et sen ikkunan yl\u00e4osassa. Koska n\u00e4m\u00e4 kaikki vaihtoehdot on sijoitettu etupuolelle, voit helposti vaihtaa n\u00e4ihin tiedostoihin ja tehd\u00e4 muutoksia, jotka voidaan tallentaa edes avaamatta niit\u00e4. Napsauta mit\u00e4 tahansa tiedostoa aiheeseen liittyv\u00e4ss\u00e4 tiedostopalkissa, joka n\u00e4ytt\u00e4\u00e4 sen l\u00e4hteen koodin\u00e4kym\u00e4ss\u00e4 ja p\u00e4\u00e4sivun suunnittelun\u00e4kym\u00e4ss\u00e4.\n<\/p>\n
\n Lis\u00e4ksi voit my\u00f6s k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa koodinavigointity\u00f6kalua p\u00e4\u00e4st\u00e4ksesi nopeasti k\u00e4siksi CSS-l\u00e4hdekoodiin, joka vaikuttaa nykyiseen ratkaisuusi. T\u00e4m\u00e4 nopea p\u00e4\u00e4sy CSS-l\u00e4hdekoodiin v\u00e4hent\u00e4\u00e4 koodausaikaa ja antaa verkkokehitt\u00e4j\u00e4lle mahdollisuuden keskitty\u00e4 kehitysprosessinsa eri puoliin.\n<\/p>\n
\n J\u00e4rjest\u00e4m\u00e4tt\u00f6m\u00e4t ja sotkuiset koodirivit osoittavat, ett\u00e4 t\u00e4m\u00e4n koodauksen kehitt\u00e4j\u00e4 ei ollut tarpeeksi ammattilainen ja taitava kirjoittamaan koodit j\u00e4rjestyksess\u00e4. T\u00e4m\u00e4 on my\u00f6s asia, jolla on paljon merkityst\u00e4 verkkosivuston hakukoneoptimoinnissa. Koodien j\u00e4rjest\u00e4minen ja kaunistaminen ei kuitenkaan ole niin vaikeaa kuin ihmiset uskovat. Kun tied\u00e4t Dreamweaverin vaihtoehdot oikein ja voit j\u00e4rjest\u00e4\u00e4 koodisi lennossa. K\u00e4yt\u00e4 vain ”K\u00e4yt\u00e4 l\u00e4hdekoodia” -vaihtoehtoa ja muokkaa se juuri mieltymystesi mukaan. Tee koodauksestasi puhdas ja siisti napsauttamalla koodausty\u00f6kalupalkin alareunassa olevaa ”Muotoile l\u00e4hdekoodia” ja mene sitten kohtaan ”muokkaa > ty\u00f6kalurivit > koodaus”. ja valitse sitten ”koodimuotoasetukset” m\u00e4\u00e4ritt\u00e4\u00e4ksesi haluamasi asetuksen.\n<\/p>\n
\n Toinen tapa j\u00e4rjest\u00e4\u00e4 komentosarja on k\u00e4ytt\u00e4\u00e4 muotoiluvaihtoehtoa kohdasta Komennot > K\u00e4yt\u00e4 l\u00e4hdemuotoilua tai k\u00e4ytt\u00e4\u00e4 sit\u00e4 vain koodauslohkossa valitsemalla K\u00e4yt\u00e4 l\u00e4hdemuotoilua valinnassa -vaihtoehto.\n<\/p>\n
\n Riippumatta siit\u00e4, kuinka paljon Adobe on varustanut Dreamweaveria tehokkailla ty\u00f6kaluilla ja ominaisuuksilla, mit\u00e4 enemm\u00e4n ty\u00f6skentelet verkkosivustojen parissa, sit\u00e4 enemm\u00e4n sinun on teht\u00e4v\u00e4 koodauspuolella. T\u00e4m\u00e4 asia voi lis\u00e4t\u00e4 taitojasi, mutta se my\u00f6s avaa ovia loputtomille virheille, koska liiallinen koodauksen kirjoittaminen ei ole helppoa. Dreamweaver tiet\u00e4\u00e4 sen, ja siksi Dreamweaverin uusimmassa versiossa, joka on Creative Cloud (CC), on ominaisuus nimelt\u00e4 Linting-tuki. Linting on perus-ohjelmointisyntaksin tarkistusty\u00f6kalu, joka on saatavana CSS:lle, HTML:lle ja JavaScriptille. T\u00e4m\u00e4n kautta aina, kun Dreamweaver tunnistaa ongelman tai virheen, se l\u00e4hett\u00e4\u00e4 useita yleisi\u00e4 ja erityisi\u00e4 h\u00e4lytyksi\u00e4.\n<\/p>\n
\n Suorita testi avaamalla sivu t\u00e4ynn\u00e4 koodeja Dreamweaverissa, ja n\u00e4et pienen vihre\u00e4n valintamerkin ympyr\u00e4ss\u00e4 tilapalkin oikealla puolella. Jos ymp\u00e4rill\u00e4 on vain pieni vihre\u00e4 valintamerkki, koodisi kanssa on kaikki kunnossa. Jos punaisella ymp\u00e4rill\u00e4 on punainen ristimerkki, koodauksessasi on joitain ongelmia, ja sinun on tarkistettava se, jotta verkkosivustosi toimisi oikein. Lis\u00e4ksi napsauttamalla virheen merkki\u00e4, se voi vied\u00e4 sinut sarakkeeseen ja riviin, jossa teit virheen virheen kuvauksella. Parasta siin\u00e4 on, ett\u00e4 t\u00e4ll\u00e4 ominaisuudella ei ole rajoituksia ja voit k\u00e4ytt\u00e4\u00e4 sit\u00e4, kunnes et saa vihre\u00e4\u00e4 merkki\u00e4.\n<\/p>\n
\n Selauskyky on yksi jokaisen verkkokehitysprosessin perusasioista. T\u00e4st\u00e4 syyst\u00e4 Dreamweaver helpotti sinua, joten et voi koskaan missata n\u00e4it\u00e4 perusasioita ennen verkkokehityksen aloittamista. Avaa Dreamweaverissa asiakirja, jonka yhteensopivuuden haluat tarkistaa. Valikkopalkista, johon koodi-, jako- ja suunnittelun\u00e4kym\u00e4vaihtoehtojen kuvakkeet on sijoitettu, on toinen vaihtoehto, jota kutsutaan ”Tarkista sivu” -painike.\n<\/p>\n
\n Napsauttamalla se avaa pudotusvalikon, valitse siit\u00e4 Tarkista selaimen yhteensopivuus ja n\u00e4et yhteensopivuuden tuloksen erillisess\u00e4 ikkunassa.\n<\/p>\n
\n Koodattaessa suurta verkkosivustoa tapahtuu usein niin, ett\u00e4 koodipala alkaa \u00e4rsytt\u00e4\u00e4 sinua n\u00e4yt\u00f6ll\u00e4. Hyvin harvat tiet\u00e4v\u00e4t, ett\u00e4 he voivat minimoida t\u00e4m\u00e4n koodauksen vain painamalla yht\u00e4 n\u00e4pp\u00e4imist\u00f6n painiketta. Kun olet varma, ett\u00e4 koodausosaan ei tarvitse tehd\u00e4 muutoksia, valitse vain kyseinen lohko ja napsauta ”-” koodirivin numeron vieress\u00e4. T\u00e4m\u00e4 pala pienenee eik\u00e4 h\u00e4iritse sinua ennen kuin laajennat sit\u00e4.\n<\/p>\n<\/p>\n