10 hakkerointia Dreamweaverista – paras koodieditori verkkokehittäjille
Dreamweaver on kaikkien verkkopohjaisten toimintojen äiti Internetissä. Useimmille ihmisille Dreamweaver on vain työkalu verkkosivustojen luomiseen, mutta vain ammattilaiset tietävät, että Dreamweaver on voimanpesä.
Dreamweaverilla on monia ominaisuuksia ja vaihtoehtoja, jotka tekevät siitä web-kehittäjien suosikkityökalun. Tällä ohjelmistolla on epäilemättä tunnetuin IDE (Integrated Development Environment), jota millään muulla web-kehitysohjelmistolla ei ole nykyisillä markkinoilla. Joko kehitys-, yhteistyö- ja koodaustyökalut, Dreamweaver tarjoaa web-kehittäjille kunnollisen pelivalikoiman. Tästä syystä aloitteleville web-kehittäjille on tärkeää tietää, kuinka he voivat maksimoida Dreamweaverin käytön.
Kaikki tekijät, jotka erottavat asiantuntevat web-kehittäjät ja tavalliset web-kehittäjät, ovat piilossa valitettavan intuitiivisten valikkojen alla, minkä vuoksi uusien web-kehittäjien on vaikea parantaa taitojaan. Tässä artikkelissa aion kuitenkin näyttää sinulle ne Dreamweaverin piilotetut ja tehokkaat toiminnot, jotka on erittäin tärkeää tietää tämän päivän markkinoiden vaatimusten täyttämiseksi. Tämä artikkeli auttaa sinua pääsemään näihin toimintoihin nopeasti ja tarjoaa sinulle kymmenen parasta hyödyllistä hakkeria, jotka parantavat työsi laatua ja parantavat koodaustasi merkittävästi.
1 Dynaaminen näkymä ja Live View:
Kaikki tietävät, että Dreamweaver tarjoaa staattisen näkymän tai avoimet tiedostomme. Kysymys jää kuitenkin vastaamatta WordPressin kaltaisen sovelluksen dynaamisiin näkymiin. Dynaamisen näkymän määrittämiseksi meidän on kerrottava Dreamweaverille dynaamisten näkymien asetuksista. Voit määrittää tämän siirtymällä HTTP-pyyntöasetuksiin napsauttamalla Näytä > Suora näkymä > Asetukset-valikko ja antamalla sitten GET tai POST, joka tarvitaan sovelluksesi tarkastelemiseen oikein.
Tämän jälkeen vaihda Dreamweaverin Live View -näkymä, joka korvaa Design View -paneelin sivusi reaaliaikaiseksi, pikselin täydellisesti renderoiduksi WebKitiksi. Täydennä se sitten live Javascriptillä, DOM-manipulaatioilla, tietokantakyselyillä, palvelinpuolen koodilla ja renderoidulla CSS:llä suunnittelunäkymän käyttöliittymän paikkamerkkikuvakkeen sijaan.
Navigointi on responsiivisen verkkosivuston yksisivuinen komponentti, jolla pitäisi olla mukautuva kyky vastata pienempien näyttöjen tarpeisiin, joihin Bootstrap voi auttaa paljon. Bootstrapin avulla voit helposti määrittää navigointipalkin ja vaihtaa vaakakaistalta pystypaneeliin. Syynä on se, että Dreamweaver tukee kaikkea Bootstrapin navigoinnin joustavuutta ja se on helppokäyttöinen ominaisuus tehokkaan ja reagoivan verkkosivuston kehittämisessä.
Antaaksesi sinulle nopean yleiskuvan siitä, seuraava on nopea esittely Bootstrapin käyttämisestä kehityksessäsi.
Navigoinnin tehostaminen Bootstrapilla alkaa Dreamweaverin uudesta asiakirjadialogista. Napsauta vain Bootstrap Framework -painiketta uuden asiakirjan valintaikkunassa ja valitse myös pre-build layout -valintaruutu, jos haluat käyttää kaikkia navigointivaihtoehtoja, kuten;
- Normaali, järjestämätön ja semanttisesti oikea linkkiluettelo.
- Logon sijoittelualue brändikuvan sijoittamiseksi.
- Valmis aktivoimaan lähetyspainikkeen ja hakukentän.
- Esiasetukset alanavigointikohteiden avattaville valikoille ja täydennä se erottimilla.
- Vasen ja oikea osa, jotka voidaan kohdistaa tarvittaessa.
- Sisäänrakennettu reagointikyky.
Jos se tuntuu vaikealta, on toinen vaihtoehto. Dreamweaverilla voit luoda mukautetun navigointipalkin. Jos pidät tummasta paletista, lisää luokkaasi .navbar-inverse
tag. Voit jopa leikkiä sillä. Jos haluat näyttää navigointisi aina sivun yläpuolella, kirjoita .navbar-fixe-top. Jos haluat näyttää sen alla, kirjoita .navbar-fixed-bottom. Kaikki nämä Bootstrap-luokat ovat vakioita, ja Dreamweaver-koodivihjeet tukevat myös näitä koodauksia, joten sinun ei tarvitse pitää koko koodausta mielessä. Sinun tarvitsee vain kirjoittaa .navbar elementin näyttöön, ja saat ponnahdusikkunan, josta voit valita haluamasi vaihtoehdon.
3 JavaScriptin jäädyttäminen:
Ajaxilla on erittäin dynaaminen luonne. Tästä syystä usein, kun joudumme olemaan vuorovaikutuksessa sivun kanssa, jonka kohteet eivät ole käytettävissä tai joita ei ole hahmonnettu ensimmäisen sivun latauksen yhteydessä. Nämä kohteet voivat joutua sivulle jonkin latausajan jälkeen, minkä vuoksi ne eivät näy ensimmäisellä latauksella. Esimerkiksi, kun saatat haluta muuttaa työkaluvihjeen tyyliä, joka toteutettiin kokonaan JavaScriptillä, etsit järjestelmällisesti komentosarjoistasi löytääksesi, mikä kohde luotiin missä. Sen sijaan, että etsit skriptejä, kokeile seuraavaa.
Aseta Dreamweaverisi Live View -näkymään ja renderöi sivusi. Paina sitten F6-näppäintä pysäyttääksesi JavaScriptin milloin tahansa, jolloin voit eritellä ja kohdistaa minkä tahansa sivun dynaamisen kohteen koodin. Tämä ei ainoastaan auta sinua kohdistamaan dynaamisen kohteen tarkkaan koodiin, vaan myös nopeuttaa kehitystäsi vähentämällä aikaa minkä tahansa koodin etsimiseen dynaamisella verkkosivustolla.
4 Korosta koodi:
Koodauskäsikirjoitus voi olla hyvin hämmentävä, jos et ole tottunut näkemään monimutkaista koodausta joka päivä ja yö. Tässä koodien korostaminen auttaa sinua luomaan erotteluja koko skriptissä. Sen sijaan, että liikutat silmiäsi verenvuotoreunalla, Dreamweaverissa on ominaisuus, joka korostaa koodausta, joka auttaa sinua lukemaan sen. Avaa tätä varten Dreamweaver-asetukset ja ota käyttöön tekniikan esikatseluosio. Napsauta sitten Ota koodin korostus -vaihtoehtoa ja anna Dreamweaverin tehdä tehtävänsä. Sinun on kuitenkin ehkä päivitettävä Dreamweaver-versiosi, koska tämä ominaisuus on saatavilla vain uusimmassa versiossa.
Kun olet ottanut korostusvaihtoehdon käyttöön, kaksoisnapsauta mitä tahansa tunnistetta, niin se korostaa kaikki tunnisteen esiintymät nykyisellä sivulla. Parametrit on kuitenkin määriteltävä. Tämä työkalu on erinomainen samankaltaisten elementtien nopeaan tunnistamiseen ja niihin siirtymiseen. Kun olet korostanut minkä tahansa elementin, käytä pikanäppäimiä f3 PC:ssä ja CMD-G Macissa) siirtyäksesi korostetusta elementistä seuraavaan. Vaihtomuutos voi myös siirtyä taaksepäin edelliseen osaan. Lisäksi koodin korostus toimii myös HTML-tunnisteiden attribuuttien ja arvojen kanssa, joten voit helposti havaita tietyt luokat.
5 Automaattinen JavaScript-täyttö:
Dreamweaver on loistava alusta älykkäille ja täydellisille HTML- ja CSS-koodeille. Jotkut ihmiset kuitenkin uskovat, että JavaScript ei ole täydellinen. Jos kyseessä on jQuery tai Prototype, Dreamweaverissa sinun pitäisi tietää, että on API-laajennuksia, jotka tarjoavat Javascriptin täydennyskoodit. Nämä koodit vauhdittavat kehitysprosessia, koska näitä koodeja käyttämällä ei tarvitse kirjoittaa kokonaisia skriptejä ja ne ovat melko käteviä nopeille koodaajille.
Dreamweaver on ainoa web-kehitysohjelmisto, jonka avulla voit käyttää sellaisia jQuery- ja Prototype-täyttökoodeja, jotka auttavat jokaista web-kehittäjää nopeuttamaan tehtäväänsä ja tuottamaan parhaan mahdollisen tuotteen vähäisin ponnistuksin.
6 Käytä aiheeseen liittyviä tiedostoja helposti:
CSS ja JavaScript ovat itsenäisten tiedostojen nimiä, jotka näet, kun avaat HTML- ja PHP-tiedostoja. Kun avaat PHP-tiedoston, näet sen ikkunan yläosassa. Koska nämä kaikki vaihtoehdot on sijoitettu etupuolelle, voit helposti vaihtaa näihin tiedostoihin ja tehdä muutoksia, jotka voidaan tallentaa edes avaamatta niitä. Napsauta mitä tahansa tiedostoa aiheeseen liittyvässä tiedostopalkissa, joka näyttää sen lähteen koodinäkymässä ja pääsivun suunnittelunäkymässä.
Lisäksi voit myös käyttää mitä tahansa koodinavigointityökalua päästäksesi nopeasti käsiksi CSS-lähdekoodiin, joka vaikuttaa nykyiseen ratkaisuusi. Tämä nopea pääsy CSS-lähdekoodiin vähentää koodausaikaa ja antaa verkkokehittäjälle mahdollisuuden keskittyä kehitysprosessinsa eri puoliin.
7 Kaunista koodeja lennossa:
Järjestämättömät ja sotkuiset koodirivit osoittavat, että tämän koodauksen kehittäjä ei ollut tarpeeksi ammattilainen ja taitava kirjoittamaan koodit järjestyksessä. Tämä on myös asia, jolla on paljon merkitystä verkkosivuston hakukoneoptimoinnissa. Koodien järjestäminen ja kaunistaminen ei kuitenkaan ole niin vaikeaa kuin ihmiset uskovat. Kun tiedät Dreamweaverin vaihtoehdot oikein ja voit järjestää koodisi lennossa. Käytä vain ”Käytä lähdekoodia” -vaihtoehtoa ja muokkaa se juuri mieltymystesi mukaan. Tee koodauksestasi puhdas ja siisti napsauttamalla koodaustyökalupalkin alareunassa olevaa ”Muotoile lähdekoodia” ja mene sitten kohtaan ”muokkaa > työkalurivit > koodaus”. ja valitse sitten ”koodimuotoasetukset” määrittääksesi haluamasi asetuksen.
Toinen tapa järjestää komentosarja on käyttää muotoiluvaihtoehtoa kohdasta Komennot > Käytä lähdemuotoilua tai käyttää sitä vain koodauslohkossa valitsemalla Käytä lähdemuotoilua valinnassa -vaihtoehto.
8 Nukkaamaton koodaus:
Riippumatta siitä, kuinka paljon Adobe on varustanut Dreamweaveria tehokkailla työkaluilla ja ominaisuuksilla, mitä enemmän työskentelet verkkosivustojen parissa, sitä enemmän sinun on tehtävä koodauspuolella. Tämä asia voi lisätä taitojasi, mutta se myös avaa ovia loputtomille virheille, koska liiallinen koodauksen kirjoittaminen ei ole helppoa. Dreamweaver tietää sen, ja siksi Dreamweaverin uusimmassa versiossa, joka on Creative Cloud (CC), on ominaisuus nimeltä Linting-tuki. Linting on perus-ohjelmointisyntaksin tarkistustyökalu, joka on saatavana CSS:lle, HTML:lle ja JavaScriptille. Tämän kautta aina, kun Dreamweaver tunnistaa ongelman tai virheen, se lähettää useita yleisiä ja erityisiä hälytyksiä.
Suorita testi avaamalla sivu täynnä koodeja Dreamweaverissa, ja näet pienen vihreän valintamerkin ympyrässä tilapalkin oikealla puolella. Jos ympärillä on vain pieni vihreä valintamerkki, koodisi kanssa on kaikki kunnossa. Jos punaisella ympärillä on punainen ristimerkki, koodauksessasi on joitain ongelmia, ja sinun on tarkistettava se, jotta verkkosivustosi toimisi oikein. Lisäksi napsauttamalla virheen merkkiä, se voi viedä sinut sarakkeeseen ja riviin, jossa teit virheen virheen kuvauksella. Parasta siinä on, että tällä ominaisuudella ei ole rajoituksia ja voit käyttää sitä, kunnes et saa vihreää merkkiä.
9 Selainten yhteensopivuuden tarkistaminen:
Selauskyky on yksi jokaisen verkkokehitysprosessin perusasioista. Tästä syystä Dreamweaver helpotti sinua, joten et voi koskaan missata näitä perusasioita ennen verkkokehityksen aloittamista. Avaa Dreamweaverissa asiakirja, jonka yhteensopivuuden haluat tarkistaa. Valikkopalkista, johon koodi-, jako- ja suunnittelunäkymävaihtoehtojen kuvakkeet on sijoitettu, on toinen vaihtoehto, jota kutsutaan ”Tarkista sivu” -painike.
Napsauttamalla se avaa pudotusvalikon, valitse siitä Tarkista selaimen yhteensopivuus ja näet yhteensopivuuden tuloksen erillisessä ikkunassa.
10 Koodin minimointi:
Koodattaessa suurta verkkosivustoa tapahtuu usein niin, että koodipala alkaa ärsyttää sinua näytöllä. Hyvin harvat tietävät, että he voivat minimoida tämän koodauksen vain painamalla yhtä näppäimistön painiketta. Kun olet varma, että koodausosaan ei tarvitse tehdä muutoksia, valitse vain kyseinen lohko ja napsauta ”-” koodirivin numeron vieressä. Tämä pala pienenee eikä häiritse sinua ennen kuin laajennat sitä.