10 häkki Dreamweaveri kohta – parim veebiarendajate koodiredaktor
Dreamweaver on kõigi Interneti-põhiste tegevuste ema. Enamiku inimeste jaoks on Dreamweaver vaid tööriist veebisaitide loomiseks, kuid ainult professionaalid teavad, et Dreamweaver on jõuallikas.
Dreamweaveril on palju funktsioone ja valikuid, mis muudavad selle veebiarendajate kõige lemmikumaks tööriistaks. Sellel tarkvaral on kahtlemata kõige tuntum IDE (integreeritud arenduskeskkond), mida praegusel turul pole ühelgi teisel veebiarendustarkvaral. Kas arendus-, koostöö- ja kodeerimistööriistad pakuvad Dreamweaver veebiarendajatele mängimiseks korralikku valikut. Seetõttu on algajate veebiarendajate jaoks oluline teada, kuidas nad saavad Dreamweaverit maksimaalselt kasutada.
Kõik asjatundlikke veebiarendajaid ja tavalisi veebiarendajaid eristavad aspektid on peidetud kahetsusväärsete intuitiivsete menüüde alla, mistõttu on uutel veebiarendajatel raske oma oskusi täiendada. Kuid selles artiklis näitan teile neid Dreamweaveri peidetud ja võimsaid funktsioone, mida on tänapäeva turu nõudmiste täitmiseks väga oluline teada. See artikkel aitab teil nendele funktsioonidele kiiresti juurde pääseda ja pakub teile kümmet kõige kasulikumat häkkimist, mis parandavad teie töö kvaliteeti ja parandavad oluliselt teie kodeerimist.
1 dünaamiline vaade ja otsevaade:
Kõik teavad, et Dreamweaver pakub staatilist vaadet või meie avatud faile. Küsimus jääb aga vastuseta sellise rakenduse nagu WordPressi dünaamiliste vaadete kohta. Dünaamilise vaate seadistamiseks peame Dreamweaverile teatama dünaamiliste vaadete jaoks kasutatavatest sätetest. Selle määramiseks avage HTTP-päringu sätted, klõpsates vaade > Otsevaade > suvandite menüü ja seejärel sisestage GET või POST, mis on teie rakenduse õigeks vaatamiseks vajalik.
Pärast seda lülitage Dreamweaveris otsevaade, mis asendab kujundusvaate paneeli teie lehe reaalajas, pikslitega täiuslikult renderdatud WebKiti vastu. Seejärel täiendage seda reaalajas Javascripti, DOM-i manipulatsioonide, andmebaasipäringute, serveripoolse koodi ja renderdatud CSS-iga, mitte kujundusvaate liidese kohatäiteikooniga.
Navigeerimine on tundliku veebisaidi ühe lehe komponent, millel peaks olema kohanemisvõime, et rahuldada väiksemate ekraanide vajadusi, mille puhul Bootstrap võib palju aidata. Bootstrap võimaldab hõlpsasti seadistada navigeerimisriba ja lülituda horisontaalselt ribalt vertikaalsele paneelile. Põhjus on selles, et Dreamweaver toetab kogu Bootstrapi navigeerimispaindlikkust ja seda funktsiooni on lihtne kasutada tõhusa ja tundliku veebisaidi väljatöötamiseks.
Selle kiire ülevaate saamiseks on järgmine kiire demo selle kohta, kuidas Bootstrapi oma arenduses kasutada.
Bootstrapiga navigeerimise kiirendamine algab Dreamweaveri uue dokumendidialoogiga. Lihtsalt klõpsake uues dokumendidialoogis nuppu Bootstrap Framework ja märkige ka eelehituse paigutuse valiku märkeruut, et kasutada täisfunktsionaalseid navigeerimisvalikuid, nagu;
- Standardne, järjestamata ja semantiliselt korrektne linkide loend.
- Logo paigutuse ala, et asetada brändi kujutis.
- Valmis saatmisnupu ja otsinguvälja aktiveerimiseks.
- Alamnavigatsiooniüksuste rippmenüüde eelseadistused ja lisage see eraldajatega.
- Vasak ja parem sektsioon, mida saab vajadusel joondada.
- Sisseehitatud reageerimisvõime.
Kui see on raske, on veel üks võimalus. Dreamweaver võimaldab teil luua kohandatud navigeerimisriba. Kui eelistate tumedat paletti, lisage lihtsalt klass .navbar-inverse
tag. Saate isegi sellega mängida. Kui soovite navigeerimist alati lehe kohal kuvada, tippige .navbar-fixe-top. Kui soovite seda allpool kuvada, tippige .navbar-fixed-bottom. Kõik need Bootstrapi klassid on standardsed ja Dreamweaveri koodivihjendus toetab ka neid kodeerimist, nii et te ei pea kogu kodeerimist silmas pidama. Peate lihtsalt elementide kuvale tippima .navbar ja kuvatakse hüpikloend, kus saate valida soovitud valiku.
3 JavaScripti külmutamine:
Ajax on väga dünaamilise iseloomuga. Seetõttu peame sageli suhtlema lehega, mille üksused ei ole esimese lehe laadimisel saadaval või renderdamata. Need üksused võivad pärast mõnda laadimisaega lehele sisestada, mistõttu neid esimesel laadimisel ei kuvata. Näiteks kui soovite võib-olla muuta täielikult JavaScriptis juurutatud tööriistaspikri stiili, otsisite metoodiliselt skriptide kaudu teed, et leida, milline üksus kus loodi. Skriptide otsimise asemel proovige järgmist.
Pange oma Dreamweaver otsevaatesse ja renderdage oma leht. Seejärel vajutage JavaScripti igal ajal külmutamiseks klahvi F6, mis võimaldab teil lehe dünaamilise üksuse mis tahes koodi lahata ja sihtida. See mitte ainult ei aita teil sihtida dünaamilise üksuse täpset koodi, vaid muudab teie arenduse kiireks, vähendades dünaamilisel veebisaidil mis tahes koodi otsimiseks kuluvat aega.
4 Koodi esiletõstmine:
Kodeerimisskript võib olla väga segane, kui te pole harjunud nägema keerulist kodeerimist iga päev ja öösel. Siin aitab koodide esiletõstmine kogu skriptis eraldada. Selle asemel, et silmi veritseva servaga liigutada, on Dreamweaveril funktsioon, mis tõstab esile kodeeringu, mis aitab teil seda lugeda. Selleks avage Dreamweaveri eelistused ja lülitage sisse tehnoloogia eelvaadete jaotis. Seejärel klõpsake koodi esiletõstmise lubamise suvandil ja laske Dreamweaveril oma ülesanne ära teha. Siiski peate võib-olla värskendama oma Dreamweaveri versiooni, kuna see funktsioon on saadaval ainult uusimas versioonis.
Kui olete esiletõstmise valiku lubanud, topeltklõpsake mis tahes sildil ja see tõstab esile kõik sildi eksemplarid praegusel lehel. Parameetrid tuleks siiski määratleda. See tööriist on suurepärane sarnaste elementide kiireks tuvastamiseks ja nende juurde minemiseks. Kui olete mõne elemendi esile tõstnud, kasutage kiirklahve f3 arvutis ja CMD-G Macis), et liikuda ühelt esiletõstetud elemendilt järgmisele elemendile. Samuti saab nihkemuutja minna tagasi eelmisele jaotisele. Lisaks töötab koodi esiletõstmine ka HTML-i siltide atribuutide ja väärtustega, et saaksite konkreetseid klasse hõlpsasti tuvastada.
5 Automaatne JavaScripti lõpetamine:
Dreamweaver on suurepärane platvorm, kus on intelligentsed ja täielikud HTML- ja CSS-koodid. Kuid mõned inimesed usuvad, et JavaScript pole täielik. JQuery või prototüübi puhul peaksite Dreamweaveris teadma, et on olemas API laiendused, mis pakuvad Javascripti lõpukoode. Need koodid kiirendavad arendusprotsessi, kuna nende koodide kasutamisel pole vaja tippida terveid skripte ja need on kiirete kodeerijate jaoks üsna mugavad.
Dreamweaver on ainus veebiarendustarkvara, mis võimaldab kasutada sellist tüüpi jQuery ja Prototype lõpukoode, mis aitavad igal veebiarendajal oma ülesannet kiirendada ja toota parima võimaliku toote minimaalse pingutusega.
6 Juurdepääs seotud failidele hõlpsalt:
CSS ja JavaScript on sõltumatute failide nimed, mida näete HTML- ja PHP-failide avamisel. PHP-faili avades näete seda akna ülaosas. Kuna need kõik suvandid asuvad ees, saate hõlpsalt nendele failidele lülituda ja teha muudatusi, mida saab salvestada isegi neid avamata. Kui klõpsate seotud failiribal mis tahes faili, mis näitab selle allikat koodivaates ja emalehte kujundusvaates.
Lisaks saate kasutada mis tahes koodinavigaatori tööriista, et kiiresti pääseda juurde CSS-i lähtekoodile, mis mõjutab teie praegust lahendust. See kiire juurdepääs CSS-i lähtekoodile vähendab kodeerimise aega ja võimaldab veebiarendajal keskenduda oma arendusprotsessi erinevatele aspektidele.
7 Kaunistage koode käigu pealt:
Korraldamata ja sassis koodiread näitavad, et selle kodeerimise arendaja ei olnud piisavalt professionaal ja osav, et koode järjekorda kirjutada. See on ka midagi, mis loeb veebisaidi otsingumootori optimeerimisel palju. Kuid oma koodide korrastamine ja kaunistamine pole nii keeruline, kui inimesed usuvad. Kui tunnete Dreamweaveri valikuid õigesti ja saate oma koode lennult korraldada. Kasutage lihtsalt valikut „Rakenda lähtekoodi vorming" ja muutke see täpselt oma eelistuste järgi. Kodeerimise puhtaks ja korrastamiseks klõpsake kodeerimise tööriistariba allosas valikul „Vorminda lähtekood” ja seejärel valige „redigeeri > tööriistaribad > kodeerimine”. ja seejärel valige "koodivormingu sätted", et määrata oma eelistatud seade.
Teine viis skripti korraldamiseks on avada vormingusuvand käsud Käsud > Rakenda allika vorming või rakendada seda ainult kodeerimisplokile, valides valiku Rakenda valikule allika vormindamine.
8 ebemevaba kodeerimine:
Pole tähtis, kui palju Adobe Dreamweaveri võimsate tööriistade ja funktsioonidega varustab, mida rohkem veebisaitidel töötate, seda rohkem peate tegema tööd kodeerimise poolel. See võib teie oskusi suurendada, kuid avab ka lõputute vigade uksed, sest liiga palju kodeerimist pole lihtne teha. Dreamweaver teab seda ja seepärast on Dreamweaveri uusimas versioonis, milleks on Creative Cloud (CC), funktsioon nimega Linting tugi. Linting on põhiline programmeerimise süntaksi kontrollimise tööriist, mis on saadaval CSS-i, HTML-i ja JavaScripti jaoks. Selle kaudu saadab Dreamweaver iga kord, kui mis tahes probleemi või vea tuvastab, mitmeid nii üldisi kui ka spetsiifilisi signaale.
Testi käivitamiseks avage Dreamweaveris koodidega leht ja näete olekuriba paremal küljel ringis väikest rohelist linnukest. Kui ümbritsetud on ainult väike roheline linnuke, on teie koodiga kõik korras. Kui seal on punasega ümbritsetud punane rist, siis on teie kodeerimisel probleeme ja veebisaidi nõuetekohaseks käitamiseks peate selle üle vaatama. Veelgi enam, klõpsates vea märgil, võib see viia teid veergu ja reale, kus te veakirjeldusega vea tegite. Parim asi selle juures on see, et sellel funktsioonil pole piiranguid ja saate seda kasutada seni, kuni te ei saa rohelist märki.
9 Kontrollige brauserite ühilduvust:
Sirvimisvõimalus on iga veebiarendusprotsessi üks elementaarsemaid asju. Seetõttu tegi Dreamweaver selle teie jaoks lihtsamaks, nii et te ei saa kunagi enne veebiarenduse alustamist neid põhilisi asju kahe silma vahele jätta. Avage Dreamweaveris dokument, mille ühilduvust soovite kontrollida. Menüüribal, kuhu on paigutatud koodi-, poolitus- ja kujundusvaadete valikute ikoonid, on veel üks valik, mida nimetatakse nupuks "Kontrolli lehte".
Klõpsamisel avaneb rippmenüü, valige kontrollige brauseri ühilduvust ja näete oma ühilduvuse tulemust eraldi aknas.
10 Koodi minimeerimine:
Suurt veebisaiti kodeerides juhtub sageli, et mõni koodijupp hakkab teid ekraanil ärritama. Väga vähesed inimesed teavad, et nad saavad selle kodeerimise osa minimeerida, vajutades klaviatuuril ühte nuppu. Kui olete kindel, et kodeerimise osa pole vaja muuta, valige lihtsalt see plokk ja klõpsake koodirea numbri kõrval "-". See tükk väheneb ja ei häiri teid enne, kui seda laiendate.