10 hacks om Dreamweaver – Den beste koderedigereren for webutviklere
Dreamweaver er mor til alle nettbaserte aktiviteter på internett. For de fleste er Dreamweaver bare et verktøy for å lage nettsider, men bare de profesjonelle vet at Dreamweaver er kraftsenteret.
Dreamweaver har mange funksjoner og alternativer som gjør det til det mest favorittverktøyet blant nettutviklere. Utvilsomt har denne programvaren den mest kjente IDE (Integrated Development Environment) som ingen annen webutviklingsprogramvare har i det nåværende markedet. Enten utviklings-, samarbeids- og kodingsverktøyene gir Dreamweaver et anstendig utvalg for webutviklere å leke med. Det er derfor for nybegynnere webutviklere er det viktig å vite hvordan de kan maksimere bruken av Dreamweaver.
Alle aspektene som skiller ekspertwebutviklere og vanlige webutviklere er skjult under lag med beklagelige intuitive menyer, og det er grunnen til at nye webutviklere har vanskelig for å forbedre ferdighetene sine. I denne artikkelen skal jeg imidlertid vise deg de skjulte og kraftige funksjonene til Dreamweaver som er svært viktige å vite for å møte kravene til dagens marked. Denne artikkelen vil hjelpe deg med å få tilgang til disse funksjonene raskt og vil gi deg de ti beste nyttige hackene som vil forbedre kvaliteten på arbeidet ditt og forbedre kodingen din betraktelig.
1 Dynamic View og Live View:
Alle vet at Dreamweaver tilbyr den statiske visningen eller våre åpne filer. Spørsmålet forblir imidlertid ubesvart om de dynamiske visningene til en applikasjon som WordPress. For å angi den dynamiske visningen, må vi fortelle Dreamweaver om innstillingene som skal brukes for de dynamiske visningene. For å angi dette, gå til HTTP-forespørselsinnstillingene ved å klikke på Vis > Live View > alternativmenyen og skriv deretter inn GET eller POST som kreves for å se applikasjonen din på riktig måte.
Deretter bytter du Live View i Dreamweaver som vil erstatte Design View-panelet til det live, pikselperfekte gjengitte WebKit på siden din. Fullfør den deretter med live Javascript, DOM-manipulasjoner, databasespørringer, serversidekode og gjengitt CSS, i stedet for plassholderikonet fra Design View-grensesnittet.
Navigasjon er én side-komponenten i den responsive nettsiden som skal ha tilpasningsevnen til å møte behovene til mindre skjermer som Bootstrap kan hjelpe mye med. Bootstrap lar deg enkelt sette opp navigasjonslinjen og bytte fra den horisontale stripen til det vertikale panelet. Årsaken bak er at Dreamweaver støtter all Bootstraps navigasjonsfleksibilitet, og det er en enkel å bruke funksjonen når det gjelder å utvikle et effektivt, responsivt nettsted.
For å gi deg et raskt overblikk, følger en rask demo av hvordan du bruker Bootstrap i utviklingen din.
Å øke navigasjonen med Bootstrap starter med Dreamweavers nye dokumentdialog. Bare klikk på Bootstrap Framework-knappen i den nye dokumentdialogen, og merk også av for forhåndsbyggede layoutalternativer for å bruke de fullt utstyrte navigasjonsalternativene som;
- Standard, uordnet og semantisk korrekt liste over lenker.
- Et område for logoplassering for å plassere merkevarebildet.
- Klar til å aktivere send-knappen og søkefeltet.
- Forhåndsinnstillinger for rullegardinmenyer for undernavigasjonselementer og fullfør det med skillelinjene.
- Venstre og høyre seksjoner som kan justeres ved behov.
- Innebygd respons.
Hvis du synes det er vanskelig, er det et annet alternativ. Dreamweaver lar deg lage den tilpassede navigasjonslinjen. Hvis du foretrekker den mørke paletten, legger du bare til .navbar-inverse-klassen til din
stikkord. Du kan til og med leke med den også. Hvis du vil vise navigasjonen alltid over siden, skriver du inn .navbar-fixe-top. Hvis du vil vise det nedenfor, skriv inn .navbar-fixed-bottom. Alle disse Bootstrap-klassene er standard, og Dreamweaver-kodehinten støtter også denne kodingen, slik at du ikke trenger å ha hele kodingen i tankene. Du trenger bare å skrive .navbar i elementdisplayet, så får du opp popup-listen der du kan velge ønsket alternativ.
3 Frysing av JavaScript:
Ajax har en veldig dynamisk natur. Dette er grunnen til mange ganger når vi trenger å samhandle med siden med utilgjengelige eller ikke gjengitte elementer på første sideinnlasting. Disse elementene kan bli injisert på siden etter en tid med innlasting, og det er grunnen til at det ikke vises ved første innlasting. For eksempel, når du kanskje vil endre stilen til verktøytipset som implementeres helt på JavaScript, pleide du å søke deg metodisk gjennom skriptene dine for å finne hvilket element som ble opprettet hvor. I stedet for å søke gjennom skriptene, prøv følgende.
Sett Dreamweaver i Live View og gjengi siden din. Deretter trykker du på F6 for å fryse JavaScript når som helst, slik at du kan dissekere og målrette hvilken som helst kode for ethvert dynamisk element på siden. Dette vil ikke bare hjelpe deg med å målrette den nøyaktige koden til det dynamiske elementet, men vil også gjøre utviklingen din rask ved å redusere tiden du trenger for å søke etter hvilken som helst kode på den dynamiske nettsiden.
4 Utheve koden:
Et skript med koding kan være veldig forvirrende hvis du ikke er vant til å se kompleks koding hver dag og natt. Det er her uthevingen av kodene hjelper deg med å lage separasjoner i hele skriptet. I stedet for å bevege øynene med den blødende kanten, har Dreamweaver en funksjon som fremhever kodingen som hjelper deg å lese den. For dette åpner du Dreamweaver-innstillingene og slår på delen for forhåndsvisning av teknologi. Klikk deretter på alternativet for aktivering av kodeutheving og la Dreamweaver gjøre sitt. Det kan imidlertid hende du må oppdatere Dreamweaver-versjonen din fordi denne funksjonen kun er tilgjengelig i den nyeste versjonen.
Når du har aktivert uthevingsalternativet, dobbeltklikker du bare på en hvilken som helst tag, og den vil fremheve alle forekomstene av taggen på gjeldende side. Parametrene bør imidlertid defineres. Dette verktøyet er flott for raskt å identifisere og gå til lignende elementer. Når du har markert et element, bruker du hurtigtastene f3 på PC-en, CMD-G på Mac) for å hoppe fra ett uthevet element til det neste elementet. Skiftmodifikatoren kan også gå bakover til forrige seksjon. Dessuten fungerer kodeutheving også med HTML-taggenes attributter og verdier, slik at du enkelt kan se de spesifikke klassene.
5 Automatisk JavaScript-fullføring:
Dreamweaver er en flott plattform hvor intelligente og komplette HTML- og CSS-koder. Noen tror imidlertid at JavaScript ikke er komplett. Når det gjelder jQuery eller Prototype, i Dreamweaver, bør du vite at det finnes API-utvidelser som gir Javascript-fullføringskoder. Disse kodene setter fart på utviklingsprosessen fordi ved å bruke disse kodene er det ikke nødvendig å skrive inn hele skript og er ganske praktiske for raske kodere.
Dreamweaver er den eneste webutviklingsprogramvaren som lar deg bruke en slik type jQuery- og Prototype-fullføringskoder som hjelper enhver webutvikler med å fremskynde oppgaven sin og produsere det best mulige produktet med minimal innsats.
6 Få enkelt tilgang til relaterte filer:
CSS og JavaScript er navnene på uavhengige filer som du ser når du åpner HTML- og PHP-filene. Mens du åpner PHP-filen, kan du se den øverst i vinduet. Fordi alle disse alternativene er plassert foran, kan du enkelt bytte til disse filene og kan gjøre endringer som kan lagres uten å åpne dem. Ved å klikke på en hvilken som helst fil i den relaterte fillinjen, som vil vise deg kilden i kodevisning og overordnet side i designvisning.
Dessuten kan du også bruke et hvilket som helst kodenavigatorverktøy for å raskt få tilgang til CSS-kildekoden som vil påvirke din nåværende løsning. Denne raske tilgangen til CSS-kildekoden reduserer tiden for koding og lar webutvikleren fokusere på de forskjellige aspektene ved utviklingsprosessen.
7 Forskjønn kodene i farten:
Uorganiserte og rotete linjer med koder viser at utvikleren av denne kodingen ikke var den profesjonelle og dyktige nok til å skrive kodene i rekkefølge. Dette er også noe som teller mye ved søkemotoroptimalisering av nettsiden. Å organisere kodene dine og forskjønne dem er imidlertid ikke så vanskelig som folk tror. Med riktig kunnskap om Dreamweaver-alternativene, og du kan organisere kodene dine på flukt. Bare bruk alternativet "Bruk kildeformatering" og reformer det nøyaktig til dine preferanser. For å gjøre kodingen din ren og ryddig, klikk på "Formater kildekode" nederst på kodingsverktøylinjen og gå deretter til "rediger > verktøylinjer > koding" og velg deretter "kodeformatinnstillinger" for å angi din foretrukne innstilling.
En annen måte å organisere skriptet ditt på er å få tilgang til formateringsalternativet fra Kommandoer > Bruk kildeformatering eller bruke det bare på en blokk med koding ved å velge alternativet Bruk kildeformatering på utvalg.
8 lofri koding:
Uansett hvor mye Adobe utstyrer Dreamweaver med kraftige verktøy og funksjoner, jo mer du jobber med nettsidene, desto mer arbeid må du gjøre på kodingssiden. Denne tingen kan øke ferdighetene dine, men det vil også åpne dørene for endeløse feil fordi for mye skriving av koding ikke er en enkel jobb å gjøre. Dreamweaver vet det, og det er derfor i den nyeste versjonen av Dreamweaver som er Creative Cloud (CC) er det en funksjon som heter Linting-støtte. Linting er et grunnleggende programmeringssyntakskontrollverktøy som er tilgjengelig for CSS, HTML og JavaScript. Gjennom dette, når Dreamweaver identifiserer et problem eller feil, sender den opp en rekke fakler både generelle og spesifikke.
For å kjøre testen åpner du en side full av koder i Dreamweaver, og du vil se en liten grønn hake i en sirkel på høyre side av statuslinjen. Hvis det bare er en liten grønn hake omringet, er alt i orden med koden din. Hvis det er et rødt kryss omkranset i rødt, er det noen problemer med kodingen din, og du må revidere den for å kjøre nettstedet ditt på riktig måte. Dessuten, ved å klikke på merket for feilen, kan den ta deg til kolonnen og raden der du gjorde feilen med feilbeskrivelsen. Det beste med det er at det ikke er noen grense for denne funksjonen, og du kan bruke den til du ikke får det grønne merket.
9 Sjekke nettleserens kompatibilitet:
Nettlesingsevne er en av de mest grunnleggende tingene i enhver nettutviklingsprosess. Dette er grunnen til at Dreamweaver gjorde det enklere for deg, slik at du aldri kan gå glipp av disse grunnleggende tingene før du starter din webutvikling. Åpne dokumentet i Dreamweaveren som du vil kontrollere kompatibiliteten for. Fra menylinjen der ikonene for kode-, delt- og designvisningsalternativer er plassert, er det et annet alternativ som kalles "Sjekk side"-knappen.
Når du klikker, åpnes en rullegardinmeny, velg sjekk nettleserkompatibilitet i den og se resultatet av kompatibiliteten din i et eget vindu.
10 Kodeminimering:
Mens du koder for den store nettsiden, hender det ofte at en kodebit begynner å irritere deg på skjermen. Svært få mennesker vet at de kan minimere denne biten av koding bare ved å trykke på én knapp fra tastaturet. Når du er sikker på at det ikke er nødvendig å gjøre noen endring i kodebiten, velg bare den blokken og klikk "-" ved siden av kodelinjenummeret. Den delen vil minimere og vil ikke plage deg før du utvider den.