Arbetsflöde för design och utveckling av webbplatser med Dreamweaver

I den här artikeln beskrivs hur du kan slutföra olika steg eller faser inom webbutveckling med Dreamweaver.

Obs!

I den här artikeln förutsätts att du är nybörjare eller har begränsade kunskaper om webbdomäner och HTML, CSS och JavaScript.

  1. Det första steget i webbutveckling är planeringsfasen, där du analyserar målgruppens behov, tekniska krav och marknadsföringskrav. Du samlar också in information som krävs för att designa och publicera din webbplats och svarar på frågor som följande:

    • Vilken tjänsteleverantör väljer jag som värd för webbplatsen? Har jag den åtkomst jag behöver för att överföra filer till publiceringsservern?
    • Vilket domännamn ska användas för webbplatsen?
    • Om du migrerar befintliga webbplatser till Dreamweaver: var finns filerna och resurserna nu? Har jag åtkomst till den server där informationen lagras?
    • Vilken server kan jag använda för att testa om data visas dynamiskt (om du vill ha en dynamisk webbplats)? Har jag information om webbappservern som jag vill använda för att läsa in dynamiska data?
    • Vilken typ av resurser krävs för webbplatsen?
    • Ska dessa resurser designas från grunden? Har jag åtkomst till resurserna om de redan finns?
    • Vilka appar vill jag använda för att designa resurserna?
    • Ska jag skapa en responsiv webbplats? 

    När du har en tydlig förståelse för den webbplats du vill utveckla, hur och var du vill placera den och har valt Dreamweaver och Creative Cloud för webbutvecklingsprocessen, fortsätter du till nästa steg.

  2. Kontrollera om du har alla resurser du behöver till din webbplats. Samla och ordna dem i dina lokala mappar eller i Adobes Creative Cloud Libraries.

  3. Skapa ett nytt dokument i Dreamweaver med:

    • ett nytt tomt dokument
    • startmallar som ingår i Dreamweaver eller 
    • mallfiler (*.dwt) som skapats av någon annan.

    Obs!

    Om du inte är bekant med Dreamweaver eller precis har börjat lära dig webbutveckling är startmallar ett bra sätt att komma igång med att utforma webbsidor.

    Även om du vill börja från grunden är det bra att titta lite på dessa sidor för att förstå vilka element som ingår i en välutformad webbsida.

  4. Ägna några minuter åt att bekanta dig med arbetsytan i Dreamweaver. Hitta en arbetsyta som du känner dig trygg med och ange ett färgtema. Omorganisera de olika panelerna på ett sätt som passar dig.

  5. Konfigurera din plats i Dreamweaver. Börja skapa en mappstruktur med filer och resurser. När du har ordnat informationen och bestämt en struktur kan du börja skapa platsen. (Se Om Dreamweaver-platser.)

    Vid det här laget är det bra att även konfigurera anslutningar till fjärrservrar och konfigurera testservrar (om du har dynamiskt innehåll). 

  6. Börja koda dina webbsidor i kodvyn eller skapa dem i designvyn eller Live-vyn.

    Om du tänker använda Photoshop-kompositioner kan du extrahera dem i Dreamweaver och arbeta med dem också. Mer information om att arbeta med Photoshop-kompositioner hittar du i Extract i Dreamweaver CC.

    Lägg till designelement som text, bilder, överrullningsbilder, bildscheman, färger, filmer, ljud, HTML-länkar, tabeller med mera.

  7. Formatera webbsidans utseende med CSS. 

    Du kan arbeta med CSS på olika sätt i Dreamweaver:

    • Du kan skriva CSS-koden för hand. Information om Dreamweaver-funktioner som hjälper dig att koda CSS för hand finns i Kodningsmiljö i Dreamweaver.
    • Om du inte är van vid att skapa CSS-sidor kan du använda CSS Designer-panelen för att skapa din CSS. Mer information finns i Utforma sidor med hjälp av CSS Designer.
    • Om du föredrar att arbeta med Sass- och Less-filer har Dreamweaver stöd för det också så att du kan använda Sass- och Less-filer på din Dreamweaver-plats och arbeta med dem. Dreamweaver autokompilerar dem (eller du kan välja att kompilera dem manuellt) sedan och resultaten av dina CSS-ändringar visas i realtid. Information om hur du använder Sass- och Less-filer med Dreamweaver finns i CSS-preprocessorer.
  8. Konfigurera en webbapp för att skapa dynamiskt innehåll.

    Många webbplatser innehåller dynamiska sidor som gör att besökarna kan visa information som lagrats i databaser och vanligtvis låta vissa användare lägga till ny information och redigera information i databaserna. Om du vill skapa sådana sidor måste du först konfigurera en webbserver och en programserver, skapa eller ändra en Dreamweaver-plats och ansluta till en databas. Mer information hittar du i Dynamiska webbplatser, sidor och webbformulär.

  9. Skapa dynamiska sidor.

    I Dreamweaver kan du ange flera olika källor med dynamiskt innehåll, inklusive postmängder som hämtats från databaser, formulärparametrar och JavaBeans-komponenter. Om du vill lägga till det dynamiska innehållet på en sida drar du det bara till sidan.

    Du kan ställa in sidan på att visa en post eller flera poster samtidigt, visa mer än en sida med poster, lägga till särskilda länkar för att flytta från en sida med poster till nästa (och tillbaka) och skapa posträknare för att hjälpa användare hålla reda på posterna. Mer information hittar du i Dynamiska webbplatser, sidor och webbformulär.

  10. Testa, förhandsgranska och publicera din webbplats. 

    När du skapar sidor måste du förhandsgranska dem för att se att din webbplats blir som du har tänkt dig. Du kan koda i den delade vyn så att kodvyn och Live-vyn visas sida vid sida.

    Du kan även förhandsgranska webbsidor i realtid på en enhet (om du skapar responsiva webbsidor) eller i en webbläsare.

    Om du inte behöver någon förhandsgranskning i realtid kan du förhandsgranska i en vanlig webbläsare.

    Om du har redan definierat anslutningar till fjärrservrar måste du överföra dina filer till fjärrservern för att publicera din webbplats.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy