10 hack om Dreamweaver – den bästa kodredigeraren för webbutvecklare

Dreamweaver är moder till alla webbaserade aktiviteter på internet. För de flesta människor är Dreamweaver bara ett verktyg för att skapa webbplatser, men bara proffsen vet att Dreamweaver är kraftpaketet.

Dreamweaver har många funktioner och alternativ som gör det till webbutvecklarnas favoritverktyg. Utan tvekan har denna programvara den mest välkända IDE (Integrated Development Environment) som ingen annan webbutvecklingsprogramvara har på den nuvarande marknaden. Antingen utvecklings-, samarbets- och kodningsverktygen ger Dreamweaver ett anständigt utbud för webbutvecklarna att leka med. Det är därför för nybörjare webbutvecklare är det viktigt att veta hur de kan maximera användningen av Dreamweaver.

Alla aspekter som skiljer expert webbutvecklare och vanliga webbutvecklare är gömda under lager av beklagliga intuitiva menyer vilket är anledningen till att nya webbutvecklare har svårt att förbättra sina färdigheter. Men i den här artikeln kommer jag att visa dig de dolda och kraftfulla funktionerna i Dreamweaver som är mycket viktiga att känna till för att möta kraven på dagens marknad. Den här artikeln hjälper dig att snabbt komma åt dessa funktioner och ger dig de tio bästa hackarna som kommer att förbättra kvaliteten på ditt arbete och förbättra din kodning avsevärt.

1 Dynamisk vy och Live View:

Alla vet att Dreamweaver erbjuder den statiska vyn eller våra öppna filer. Frågan är dock fortfarande obesvarad om de dynamiska vyerna av en applikation som WordPress. För att ställa in den dynamiska vyn måste vi berätta för Dreamweaver om inställningarna som ska användas för de dynamiska vyn. För att ställa in detta, gå till HTTP-begäraninställningarna genom att klicka på Visa > Livevy > alternativmenyn och ange sedan GET eller POST som krävs för att visa din applikation korrekt.

Efter det byter du Live View i Dreamweaver som kommer att ersätta Design View-panelen till den live, pixelperfekt renderade WebKit på din sida. Komplettera det sedan med live Javascript, DOM-manipulationer, databasfrågor, kod på serversidan och renderad CSS, istället för platshållarikonen från Design View-gränssnittet.

2 Bootstrap för att öka navigeringen:

Navigation är den ensidiga komponenten i den responsiva webbplatsen som bör ha den adaptiva förmågan att möta behoven hos mindre skärmar som Bootstrap kan hjälpa till mycket med. Bootstrap låter dig enkelt ställa in din navigeringsfält och växla från den horisontella remsan till den vertikala panelen. Anledningen bakom är att Dreamweaver stöder alla Bootstraps navigeringsflexibilitet och det är en lättanvänd funktion när det gäller att utveckla en effektiv, responsiv webbplats.

För att ge dig en snabb titt på det, följande är en snabb demonstration av hur du använder Bootstrap i din utveckling.

Att öka navigeringen med Bootstrap börjar med Dreamweavers nya dokumentdialog. Klicka helt enkelt på Bootstrap Framework-knappen i den nya dokumentdialogrutan och markera även kryssrutan för pre-build layoutalternativ för att använda de fullt utrustade navigeringsalternativen som;

• Standard, oordnad och semantiskt korrekt länklista.
• Ett område för placering av logotypen för att placera varumärkesbilden.
• Redo att aktivera skicka-knappen och sökfältet.
• Förinställningar för rullgardinsmenyer för undernavigeringsobjekt och komplettera det med avdelare.
• Vänster och höger sektioner som kan justeras vid behov.
• Inbyggd lyhördhet.

Om du tycker att det är svårt finns det ett annat alternativ. Dreamweaver låter dig skapa det anpassade navigeringsfältet. Om du föredrar den mörka paletten, lägg bara till klassen .navbar-inverse till din

märka. Du kan till och med leka med den också. Om du vill visa din navigering alltid ovanför sidan, skriv .navbar-fixe-top. Om du vill visa det nedan, skriv .navbar-fixed-bottom. Alla dessa Bootstrap-klasser är standard, och Dreamweaver-kodtipset stöder även denna kodning, så du behöver inte ha hela kodningen i åtanke. Du behöver bara skriva .navbar i elementdisplayen så får du en popup-lista där du kan välja önskat alternativ.

3 Frysa JavaScript:

Ajax har en mycket dynamisk karaktär. Det är därför vi många gånger behöver interagera med sidan med otillgängliga eller inte renderade objekt vid första sidans inläsning. Dessa föremål kan injiceras på sidan efter en tids laddning, vilket är anledningen till att det inte visas vid den första laddningen. Till exempel, när du kanske vill ändra stilen på verktygstipset som implementeras helt på JavaScript, brukade du söka dig metodiskt igenom dina skript för att hitta vilket objekt som skapades var. Istället för att söka igenom skripten, prova följande.

Placera din Dreamweaver i Live View och rendera din sida. Tryck sedan på F6 för att frysa JavaScript när som helst vilket gör att du kan dissekera och rikta in dig på valfri kod för alla dynamiska objekt på sidan. Detta kommer inte bara att hjälpa dig att inrikta dig på den exakta koden för det dynamiska objektet utan kommer också att göra din utveckling snabb genom att minska tiden för att söka efter valfri kod på den dynamiska webbplatsen.

4 Markera koden:

Ett kodningsskript kan vara mycket förvirrande om du inte är van vid att se komplex kodning varje dag och natt. Det är här som markeringen av koderna hjälper dig att skapa separationer i hela skriptet. Istället för att flytta ögonen med den blödande kanten har Dreamweaver en funktion som framhäver kodningen som hjälper dig att läsa den. För detta öppnar du Dreamweaver-inställningarna och aktiverar avsnittet för förhandsgranskningar av teknik. Klicka sedan på alternativet aktivera kodmarkering och låt Dreamweaver göra sitt. Du kan dock behöva uppdatera din Dreamweaver-version eftersom den här funktionen endast är tillgänglig i den senaste versionen.

När du har aktiverat markeringsalternativet dubbelklickar du bara på valfri tagg, så kommer den att markera alla instanser av taggen på den aktuella sidan. Men parametrarna bör definieras. Det här verktyget är utmärkt för att snabbt identifiera och gå till liknande element. När du har markerat ett element, använd kortkommandona f3 på PC, CMD-G på Mac) för att hoppa från ett markerat element till nästa element. Skiftmodifieraren kan också gå bakåt till föregående avsnitt. Dessutom fungerar kodmarkering också med HTML-taggarnas attribut och värden så att du enkelt kan se de specifika klasserna.

5 Automatisk JavaScript-komplettering:

Dreamweaver är en fantastisk plattform där intelligenta och kompletta HTML- och CSS-koder. Vissa människor tror dock att JavaScript inte är komplett. När det gäller jQuery eller Prototype, i Dreamweaver, bör du veta att det finns API-tillägg som tillhandahåller Javascript-kompletteringskoder. Dessa koder påskyndar utvecklingsprocessen eftersom genom att använda dessa koder finns det inget behov av att skriva hela skript och är ganska praktiskt för snabba kodare.

Dreamweaver är den enda webbutvecklingsmjukvaran som låter dig använda en sådan typ av jQuery- och prototypkompletteringskoder som hjälper varje webbutvecklare att påskynda sin uppgift och producera bästa möjliga produkt med minimala ansträngningar.

6 Få åtkomst till relaterade filer enkelt:

CSS och JavaScript är namnen på oberoende filer som du ser när du öppnar HTML- och PHP-filerna. När du öppnar PHP-filen kan du se den överst i fönstret. Eftersom alla dessa alternativ är placerade i fronten kan du enkelt växla till dessa filer och kan göra ändringar som kan sparas utan att ens öppna dem. När du klickar på valfri fil i den relaterade filfältet, som visar dig dess källa i kodvyn och den överordnade sidan i designvyn.

Dessutom kan du också använda valfritt kodnavigatorverktyg för att snabbt komma åt CSS-källkoden som kommer att påverka din nuvarande lösning. Denna snabba åtkomst till CSS-källkoden minskar tiden för kodning och gör att webbutvecklaren kan fokusera på de olika aspekterna av sin utvecklingsprocess.

7 Försköna koderna i farten:

Oorganiserade och röriga rader med koder visar att utvecklaren av denna kodning inte var den professionella och skickliga nog att skriva koderna i ordning. Detta är också något som räknas mycket under sökmotoroptimeringen av webbplatsen. Men att organisera dina koder och försköna dem är inte så svårt som folk tror. Med rätt kunskap om Dreamweaver-alternativen och du kan organisera dina koder i farten. Använd bara alternativet ”Använd källformatering” och ändra det exakt efter dina preferenser. För att göra din kodning ren och snygg, klicka på ”Formatera källkod” längst ned i kodningsverktygsfältet och gå sedan till ”redigera > verktygsfält > kodning” och välj sedan ”kodformatinställningar” för att ställa in önskad inställning.

Ett annat sätt att organisera ditt skript är att komma åt formateringsalternativet från Kommandon > Använd källformatering eller tillämpa det bara på ett kodningsblock genom att välja alternativet Använd källformatering på urval.

8 luddfri kodning:

Oavsett hur mycket Adobe utrustar Dreamweaver med kraftfulla verktyg och funktioner, ju mer du arbetar på webbplatserna, desto mer arbete måste du göra på kodningssidan. Denna sak kan öka dina färdigheter, men det kommer också att öppna upp dörrarna för oändliga fel eftersom för mycket skrivning av kodning inte är ett lätt jobb att göra. Dreamweaver vet det, och det är därför i den senaste versionen av Dreamweaver som är Creative Cloud (CC) finns en funktion som heter Linting-stöd. Linting är ett grundläggande, programmeringsverktyg för syntaxkontroll som är tillgängligt för CSS, HTML och JavaScript. Genom detta, närhelst Dreamweaver identifierar något problem eller fel, skickar det upp ett antal signaler både generella och specifika.

För att köra testet, öppna en sida full med koder i Dreamweaver, så ser du en liten grön bock i en cirkel på höger sida av statusfältet. Om det bara finns en liten grön bock inringad så är allt okej med din kod. Om det finns ett rött korsmärke omringat i rött, så finns det några problem med din kodning, och du måste revidera det för att köra din webbplats korrekt. Genom att klicka på markeringen för felet kan du dessutom komma till kolumnen och raden där du gjorde felet med felbeskrivningen. Det bästa med det är att det inte finns någon gräns för den här funktionen och du kan använda den tills du inte får det gröna märket.

9 Kontrollera webbläsarens kompatibilitet:

Surfförmåga är en av de mest grundläggande sakerna i varje webbutvecklingsprocess. Det är därför Dreamweaver gjorde det enklare för dig så att du aldrig kan missa dessa grundläggande saker innan du påbörjar din webbutveckling. Öppna dokumentet i Dreamweaver som du vill kontrollera kompatibiliteten för. Från menyraden där ikonerna för kod, delade och designvyalternativ är placerade, finns det ett annat alternativ som kallas ”Kontrollera sida”-knappen.

När du klickar öppnas en rullgardinsmeny, välj kontrollera webbläsarkompatibilitet i den och se resultatet av din kompatibilitet i ett separat fönster.

10 Kodminimering:

När du kodar för den stora webbplatsen händer det ofta att en bit kod börjar irritera dig på skärmen. Väldigt få människor vet att de kan minimera denna bit av kodning bara genom att trycka på en knapp från tangentbordet. När du är säker på att det inte finns något behov av att göra några ändringar i kodningsbiten, välj bara det blocket och klicka på ”-” bredvid kodradsnumret. Den biten kommer att minimera och kommer inte att störa dig förrän du expanderar den.