10 trucuri despre Dreamweaver – Cel mai bun editor de cod pentru dezvoltatorii web

Dreamweaver este mama tuturor activităților bazate pe web de pe internet. Pentru majoritatea oamenilor, Dreamweaver este doar un instrument pentru a crea site-uri web, dar numai profesioniștii știu că Dreamweaver este puterea.

Dreamweaver are multe caracteristici și opțiuni care îl fac cel mai preferat instrument al dezvoltatorilor web. Fără îndoială, acest software are cel mai cunoscut IDE (Integrated Development Environment) pe care niciun alt software de dezvoltare web nu îl are pe piața actuală. Fie instrumentele de dezvoltare, colaborare și codare, Dreamweaver oferă dezvoltatorilor web o gamă decentă cu care să se joace. De aceea, pentru dezvoltatorii web începători, este important să știe cum pot maximiza utilizarea Dreamweaver.

Toate aspectele care diferențiază dezvoltatorii web experți și dezvoltatorii web obișnuiți sunt ascunse sub straturi de meniuri intuitive regretabile, motiv pentru care noii dezvoltatori web le este greu să-și îmbunătățească abilitățile. Cu toate acestea, în acest articol, vă voi arăta acele funcții ascunse și puternice ale Dreamweaver, care trebuie să fie foarte important de știut pentru a satisface cerințele pieței de astăzi. Acest articol vă va ajuta să accesați rapid acele funcții și vă va oferi primele zece hack-uri utile care vă vor îmbunătăți calitatea muncii și codarea în mod semnificativ.

1. Vizualizare dinamică și vizualizare live:

Toată lumea știe că Dreamweaver oferă vizualizarea statică sau fișierele noastre deschise. Cu toate acestea, întrebarea rămâne fără răspuns cu privire la vizualizările dinamice ale unei aplicații precum WordPress. Pentru a seta vizualizarea dinamică, trebuie să îi spunem Dreamweaver-ului despre setările de utilizat pentru vizualizările dinamice. Pentru a seta acest lucru, accesați Setările de solicitare HTTP făcând clic pe vizualizare > Vizualizare live > meniul de opțiuni și apoi introduceți GET sau POST care este necesar pentru a vizualiza aplicația dvs. corect.

După aceea, comutați Live View în Dreamweaver, care va înlocui panoul Design View în WebKit-ul live, redat perfect în pixeli al paginii dvs. Apoi completați-l cu Javascript live, manipulări DOM, interogări de baze de date, cod de server și CSS redat, în loc de pictograma substituent din interfața Design View.

2. Bootstrap pentru a intensifica navigarea:

Navigarea este componenta unei pagini din site-ul web responsive care ar trebui să aibă capacitatea de adaptare pentru a satisface nevoile ecranelor mai mici pentru care Bootstrap poate ajuta foarte mult. Bootstrap vă permite să configurați cu ușurință bara de navigare și să comutați de la banda orizontală la panoul vertical. Motivul din spate este că Dreamweaver acceptă toată flexibilitatea de navigare a Bootstrap și este o funcție ușor de utilizat atunci când vine vorba de dezvoltarea unui site web eficient și receptiv.

Pentru a vă oferi o privire rapidă, urmează o demonstrație rapidă despre cum să utilizați Bootstrap în dezvoltarea dvs.

Îmbunătățirea navigării cu Bootstrap începe cu noul dialog de document al Dreamweaver. Pur și simplu faceți clic pe butonul Bootstrap Framework din dialogul noului document și, de asemenea, bifați caseta de selectare a opțiunii de layout pre-build pentru a utiliza opțiunile de navigare complet, cum ar fi;

• Lista de link-uri standard, neordonată și corectă din punct de vedere semantic.
• O zonă pentru plasarea logo-ului pentru a plasa imaginea mărcii.
• Gata să activeze butonul de trimitere și câmpul de căutare.
• Presetări pentru meniurile drop-down pentru elementele de sub-navigare și completați-le cu separatoarele.
• Secțiuni din stânga și din dreapta care pot fi aliniate atunci când este necesar.
• Reactivitate încorporată.

Dacă ți se pare greu, există o altă opțiune. Dreamweaver vă permite să creați bara de navigare personalizată. Dacă preferați paleta întunecată, adăugați doar clasa .navbar-inverse la eticheta <nav>. Te poți juca chiar și cu ea. Dacă doriți să afișați navigarea întotdeauna deasupra paginii, introduceți .navbar-fixe-top. Dacă doriți să îl afișați mai jos, tastați .navbar-fixed-bottom. Toate aceste clase Bootstrap sunt standard, iar indicația de cod Dreamweaver acceptă și aceste coduri, așa că nu trebuie să țineți cont de întreaga codificare. Trebuie doar să tastați .navbar în afișajul elementului și veți obține lista pop-up în care puteți alege opțiunea dorită.

3. Înghețarea JavaScript:

Ajax-ul are o natură foarte dinamică. Acesta este motivul pentru care de multe ori trebuie să interacționăm cu pagina cu elemente indisponibile sau neredate la încărcarea primei pagini. Aceste articole ar putea fi injectate în pagină după un timp de încărcare, motiv pentru care nu se afișează la prima încărcare. De exemplu, când s-ar putea să doriți să schimbați stilul sfatului instrument care a fost implementat în întregime pe JavaScript, obișnuiați să căutați metodic prin scripturi pentru a găsi ce element a fost creat unde. În loc să căutați prin scripturi, încercați următoarele.

Puneți Dreamweaver în Live View și redați pagina. Apoi apăsați F6 pentru a îngheța JavaScript-ul oricând, ceea ce vă va permite să disecați și să vizați orice cod al oricărui element dinamic din pagină. Acest lucru nu numai că vă va ajuta să vizați codul exact al elementului dinamic, dar vă va face și dezvoltarea rapidă prin reducerea timpului de căutare a oricărui cod pe site-ul dinamic.

4. Evidențierea codului:

Un script de codificare ar putea fi foarte confuz dacă nu sunteți obișnuit să vedeți codări complexe în fiecare zi și noapte. Aici evidențierea codurilor vă ajută să creați separări în întregul script. În loc să-ți miște ochii cu marginea de sângerare, Dreamweaver are o caracteristică care evidențiază codarea care te ajută să o citești. Pentru aceasta, deschideți preferințele Dreamweaver și activați secțiunea de previzualizări ale tehnologiei. Apoi faceți clic pe opțiunea de activare a evidențierii codului și lăsați Dreamweaver să-și facă treaba. Cu toate acestea, poate fi necesar să vă actualizați versiunea Dreamweaver, deoarece această caracteristică este disponibilă numai în cea mai recentă versiune.

După ce activați opțiunea de evidențiere, faceți dublu clic pe orice etichetă și va evidenția toate aparițiile etichetei pe pagina curentă. Cu toate acestea, parametrii ar trebui definiți. Acest instrument este excelent pentru identificarea rapidă și accesarea elementelor similare. După ce ați evidențiat orice element, utilizați comenzile rapide de la tastatură f3 pe PC, CMD-G pe Mac) pentru a trece de la un element evidențiat la următorul element. De asemenea, modificatorul de schimbare poate merge înapoi la secțiunea anterioară. Mai mult, evidențierea codului funcționează și cu atributele și valorile etichetelor HTML, astfel încât să puteți identifica cu ușurință clasele specifice.

5. Completare automată JavaScript:

Dreamweaver este o platformă grozavă unde coduri HTML și CSS inteligente și complete. Cu toate acestea, unii oameni cred că JavaScript nu este complet. În cazul jQuery sau Prototype, în Dreamweaver, trebuie să știți că există extensii API care oferă coduri de completare Javascript. Aceste coduri accelerează procesul de dezvoltare, deoarece prin utilizarea acestor coduri nu este nevoie să tastați scripturi întregi și sunt destul de utile pentru programatorii rapidi.

Dreamweaver este singurul software de dezvoltare web care vă permite să utilizați astfel de coduri de completare jQuery și Prototype care ajută fiecare dezvoltator web să-și accelereze sarcina și să producă cel mai bun produs posibil cu eforturi minime.

6. Accesați cu ușurință fișierele înrudite:

CSS și JavaScript sunt numele fișierelor independente pe care le vedeți când deschideți fișierele HTML și PHP. În timp ce deschideți fișierul PHP, îl puteți vedea în partea de sus a ferestrei. Deoarece toate aceste opțiuni sunt plasate în față, puteți comuta cu ușurință la aceste fișiere și puteți face modificări care pot fi salvate fără să le deschideți. Când faceți clic pe orice fișier din bara de fișiere aferentă, care vă va afișa sursa în Vizualizare cod și pagina părinte în Vizualizare proiect.

Mai mult, puteți folosi orice instrument de navigare de cod pentru a accesa rapid codul sursă CSS care vă va afecta soluția curentă. Acest acces rapid la codul sursă CSS reduce timpul de codare și permite dezvoltatorului web să se concentreze asupra diferitelor aspecte ale procesului lor de dezvoltare.

7. Înfrumusețați codurile din mers:

Liniile de coduri neorganizate și dezordonate arată că dezvoltatorul acestei codări nu a fost suficient de profesionist și priceput pentru a scrie codurile în ordine. Acesta este, de asemenea, ceva care contează foarte mult în timp ce optimizarea site-ului pentru motoarele de căutare. Cu toate acestea, organizarea codurilor și înfrumusețarea lor nu este atât de dificilă pe cât cred oamenii. Cu cunoștințele corecte ale opțiunilor Dreamweaver și vă puteți organiza codurile din mers. Folosiți doar opțiunea „Aplicați formatarea sursă” și reformați-o exact după preferințele dvs. Pentru a vă face codarea curată și ordonată, faceți clic pe „Format codul sursă” din partea de jos a barei de instrumente de codare, apoi accesați „editare > bare de instrumente > codare” și apoi selectați „setările formatului codului” pentru a seta setarea preferată.

O altă modalitate de a vă organiza scriptul este să accesați opțiunea de formatare din Comenzi > Aplicare formatare sursă sau să o aplicați numai pe un bloc de codare selectând opțiunea Aplicare formatare sursă la selecție.

8. Codare fără scame:

Indiferent cât de mult echipa Adobe Dreamweaver cu instrumente și funcții puternice, cu cât lucrați mai mult pe site-uri web, cu atât mai mult trebuie să lucrați în ceea ce privește codificarea. Acest lucru vă poate crește abilitățile, dar vă va deschide și ușile erorilor nesfârșite, deoarece prea multă scriere de codare nu este o treabă ușor de făcut. Dreamweaver știe asta și de aceea în cea mai recentă versiune a Dreamweaver, care este Creative Cloud (CC), există o caracteristică numită suport Linting. Linting este un instrument de bază de verificare a sintaxei de programare, care este disponibil pentru CSS, HTML și JavaScript. Prin aceasta, ori de câte ori Dreamweaver identifică vreo problemă sau eroare, trimite o serie de semnale atât generale, cât și specifice.

Pentru a rula testul, deschideți o pagină plină de coduri în Dreamweaver și veți vedea o mică bifă verde într-un cerc în partea dreaptă a barei de stare. Dacă există doar o mică bifă verde înconjurată, atunci totul este în regulă cu codul tău. Dacă există un semn de cruce roșie înconjurat cu roșu, atunci există unele probleme cu codarea dvs. și trebuie să îl revizuiți pentru a rula site-ul dvs. în mod corespunzător. Mai mult, făcând clic pe semnul erorii, vă poate duce la coloana și rândul în care ați făcut greșeala cu descrierea erorii. Cel mai bun lucru este că nu există nicio limită a acestei funcții și o puteți folosi până când nu obțineți marcajul verde.

9. Verificarea compatibilității browserelor:

Capacitatea de navigare este unul dintre cele mai de bază lucruri ale fiecărui proces de dezvoltare web. Acesta este motivul pentru care Dreamweaver ți-a făcut totul mai ușor, astfel încât să nu poți rata niciodată aceste lucruri de bază înainte de a începe dezvoltarea web. Deschideți documentul în Dreamweaver pentru care doriți să verificați compatibilitatea. Din bara de meniu în care sunt plasate pictogramele opțiunilor de vizualizare cod, split și design, există o altă opțiune care se numește butonul „Verifică pagina”.

Făcând clic, se va deschide un meniu derulant, selectați verificați compatibilitatea browserului în el și vedeți rezultatul compatibilității dvs. într-o fereastră separată.

10. Minimizarea codului:

În timp ce codificați pentru site-ul mare, se întâmplă adesea ca o bucată de cod să înceapă să vă irită pe ecran. Foarte puțini oameni știu că pot minimiza această bucată de codare doar prin apăsarea unui buton de la tastatură. Când sunteți sigur că nu este nevoie să faceți nicio modificare în partea de codare, selectați blocul respectiv și faceți clic pe „-“ lângă numărul liniei de cod. Acea bucată se va minimiza și nu vă va deranja până când nu o extindeți.