I en värld av dra-och-släpp-webbplatsbyggare har Adobe Dreamweaver gjort bra för att hålla sig relevant i konkurrensen. Fullpackad med fantastiska funktioner och massor av verktyg för att göra ditt liv enkelt, den här programvaran är ett utmärkt val för webbdesigners och utvecklare.

Men hur bygger du din första webbplats med Dreamweaver?

Komma igång med Dreamweaver

Du måste skaffa en kopia av Adobe Dreamweaver innan du kan börja arbeta med den, men en gratis provperiod är tillgänglig.

Gå till Adobe webbplats, logga in eller registrera ett konto och ladda ner Adobe Creative Cloud-verktyget för att komma igång. Härifrån kan du ladda ner Adobe Dreamweaver och komma igång med hela guiden.

Den här guiden visar hur du skapar en grundläggande webbplats med Dreamweavers mallfiler som bas. Du kan hitta de fullständiga projektfilerna på detta GitHub-förråd.

Steg 1: Skapa en Dreamweaver-webbplats

Öppna Adobe Dreamweaver och gå till Webbplats menyn högst upp på sidan. Välj Ny webbplats, välj sedan ett namn för din webbplats och välj en filplats för den.

instagram viewer

Steg 2: Skapa en mallfil

Därefter är det dags att skapa en mallfil för din nya webbplats. Mallfiler fungerar på samma sätt som de teman som används av CMS-system som WordPress och Shopify, bara du gör dem själv.

Klicka på Skapa ny eller gå till Fil > Ny och välj HTML-mall från Dokumenttyp lista.

Detta kommer att skapa en grundläggande mall med lite HTML redan på plats. Du kommer att använda denna HTML för ditt projekt, så det är värt att hålla den på plats för nästa steg.

​​​​​​

Steg 3: Bygg en rubrik i mallen

Nu är det dags att bygga meny-/huvudsektionen på webbplatsen i mallen du just skapade. Gå till Föra in högst upp på skärmen och välj Rubrik från listan.

En dialogruta öppnas vid denna tidpunkt. Lägg till ett namn för din nya rubriks klass och klicka OK för att lägga till koden i din HTML. Den bör automatiskt placera den nya koden i taggar, men du kan flytta den om du behöver.

Efter detta bör du också lägga till ett div-element för webbplatsens logotyp och ett nav-element för webbplatsens meny. Gå till Föra in menyn och välj Div, gå sedan tillbaka till Föra in menyn och välj Nav. Båda dessa element behöver ett eget klassnamn.

Som det sista steget i denna process har vi lagt till några menyalternativ till vårt navigeringselement. För att göra detta, gå till Föra in och välj Hyperlänk. Vi har lagt till fem hyperlänkar till vår sidas rubrik: Home, Lion, Tiger, Jaguar och House Cat.

Sidorna som kommer att ha länkar i rubriken finns inte ännu, så lämna href egenskapen tom tills du skapar dem.

Steg 4: Lägg till en stilmall för CSS

Som du kan se ser den här webbplatsen inte så bra ut som den ser ut. Lite CSS kommer att lösa detta problem, och du kan enkelt lägga till en stilmall i Dreamweaver. Gå till CSS-designer på höger sida av skärmen och klicka på Plus ikonen bredvid Källor. Du behöver bara välja ett namn för din stilmall och kan lämna resten av inställningarna som de är.

Det första du ska göra är att förvandla headern till en flexbox. Flexbox är bara ett sätt att lägga upp en webbsida med hjälp av CSS. Parallellt med detta är webbplatsens teckensnitt inställt, en svart bakgrund ställts in och flera andra förändringar är på plats för att webbplatsen ska se bättre ut. Du kan se hela CSS-koden i slutet av artikeln.

Steg 5: Lägg till redigerbara regioner till mallen

Redigerbara regioner skapar delar av HTML som är redigerbara när du använder mallen för att bygga andra sidor. Vårt innehåll på huvudsidan passar perfekt in i en region som denna. Gå till Föra in > Mall > Redigerbar region för att lägga till en redigerbar region på din sida.

Steg 6: Lägg till bild-/textinnehåll till mallen

Den redigerbara regionen du just lade till är användbar utan ytterligare HTML, men du kan fortfarande lägga till några för att redigera när du skapar enskilda sidor. För att börja, gå till Föra in och välj Div för att lägga till ett nytt div-element på din webbplats.

Detta kommer att fungera både som behållare för textinnehållet på sidan, såväl som en plats för att lägga till en bakgrundsbild. Detta element har en klass och ett ID så att olika sidor har olika CSS-egenskaper. Dessa unika CSS-bakgrundsmönster är bra om du vill ta din Dreamweaver-webbplats till nästa nivå.

Gå sedan till Föra in > Rubriker > H1 för att lägga till en rubrik inuti div-elementet du just lade till. Båda dessa element behöver lite CSS för att fungera korrekt. div har värden för bakgrundsbild, bakgrundsstorlek och höjd. Gå till Fil > Rädda alla för att se till att din mall uppdateras.

​​​​​​

Du kan lägga till bilder var som helst på ditt lokala nätverk eller internet, men det är bäst att spara bilderna i webbplatsens egna filer för enkel åtkomst.

Steg 7: Lägg till sidor med mallen

Nu när du har en mall på plats kan du börja lägga till några sidor. Gå till Fil > Ny och välj HTML under Dokumenttyp. Lägg till en Titel för varje sida som du lägger till innan du trycker Skapa.

Den nya sidan är vit och har inte vår mall ännu. När din nya sida är öppen i Dreamweaver, gå till Verktyg > Mallar och klicka på Använd mallen på sidan. Välj din mall från listan och klicka Välj för att ladda din mall. Slutligen, gå till Fil > Spara som och välj ett namn för din nya sida innan du sparar den.

Upprepa denna process tills du har tillräckligt med sidor för att möta dina behov. Du behöver inte hålla dig till en enda mall för detta; du kan lägga till nya för olika sidlayouter.

Steg 8: Lägg till sidlänkar till mallen

Med dina sidor tillagda kan du ändra navigeringslänkarna i din mall så att de länkar till rätt sidor. Gå tillbaka till din mall och hitta A-taggarna du lade till tidigare. Ta bort platshållarlänken och klicka på citattecken att öppna Bläddra meny. Härifrån kan du välja rätt sida för var och en av dina länkar.

Steg 9: Fixa CSS/HTML på nya sidor

Var och en av sidorna kommer att se likadana ut för tillfället. Det finns några steg att ta för att säkerställa att de har sitt eget innehåll; följ stegen nedan för att avsluta din nya webbplats.

  • Ändra innehålls-div-elementets ID på varje sida för att återspegla sidtiteln
  • Lägg till CSS-kod för det nya element-ID: t med en annan bakgrundsbild
  • Ändra titeln på varje sida

Steg 10: Testa webbplatsen i din webbläsare

Du kan testa din nya webbplats i din webbläsare direkt från Adobe Dreamweaver. Gå till Fil > Förhandsvisning i realtid och välj den webbläsare du väljer för att se din webbplats. Detta är bra för att testa CSS eller annan kod som inte är kompatibel med alla webbläsare.

Nu behöver du bara någonstans att vara värd för din webbplats. Hosta en statisk webbplats med AWS S3 är ett bra ställe att börja.

HTML- och CSS-koden

<!doctype html>
<html>
<huvud>
<meta teckenuppsättning="utf-8">
<!-- TemplateBeginEditable name="doktitel" -->
<titel>Namnlöst dokument</title>
<!-- TemplateEndEditable -->
<länk href="../page-css.css" rel="stilmall" typ="text/css">
</head>
<kropp>
<header class="huvudhuvud">
<div klass="webbplats-logotyp">MakeUseOf Exempelwebbplats</div>
<nav klass="huvudmeny">
<a href="../Hem.html">Hem</a><a href="../Lion.html">Lejon</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguar</a><a href="../Huskatt.html">Hus katt</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div klass="huvudinnehåll" id="lejon">
<h1>Det här är ett lejon!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

Denna HTML bygger den färdiga webbplatsen för vårt projekt. Du kan ta isär den för att se hur den fungerar, men vi uppmuntrar dig att skapa din egen HTML för din webbplats.

@charset "utf-8";
kropp {
 marginal: 0;
 bakgrund: svart;
 teckensnittsfamilj: Gotham, "Helvetica Neue", Helvetica, Arial, "sans serif";
}
.main-header {
 display: flex;
 bakgrund: svart;
 stoppning: 20px;
}
.site-logotyp {
 bredd: 30%;
 färg vit;
 font-weight: fet;
 text-transform: versaler;
}
.huvudmeny {
 bredd: 70%;
 text-align: höger;
}
.huvudmenya {
 stoppning: 10px;
 text-dekoration: ingen;
 färg vit;
}
.huvudinnehåll {
 höjd: 100vh;
 stoppning: 20px;
 bakgrundsstorlek: omslag;
}
.huvudinnehållh1 {
 färg vit;
 teckenstorlek: 10rem;
 text-transform: versaler; 
}
#lejon {
 bakgrundsbild: url("Images/largelion.png");
}
#tiger {
 bakgrundsbild: url("Images/tiger.png");
}
#jaguar {
 bakgrundsbild: url("Images/jaguar.png");
}
#hus katt {
 bakgrundsbild: url("Images/housecat.png");
}
#allcats {
 bakgrundsbild: url("Images/loadsofcats.png");
}

Denna CSS är också en del av det färdiga projektet. Precis som HTML-koden vi har täckt kan du leka med den här koden för att göra den här webbplatsen till din egen.

Bygga webbplatser med Adobe Dreamweaver

Dreamweaver kanske inte verkar lika lätt att använda som verktyg som WordPress eller Squarespace, men det ger dig mycket mer kraft. Den här guiden är en bra utgångspunkt, men det finns mycket mer att lära sig och det är väl värt att utforska Dreamweaver själv.