I en verden av dra-og-slipp-nettstedbyggere har Adobe Dreamweaver klart å holde seg relevant i konkurransen. Fullpakket med flotte funksjoner og massevis av verktøy for å gjøre livet ditt enkelt, er denne programvaren et godt valg for webdesignere og utviklere.

Men hvordan bygger du din første nettside ved hjelp av Dreamweaver?

Komme i gang med Dreamweaver

Du må få en kopi av Adobe Dreamweaver før du kan begynne å jobbe med den, men en gratis prøveversjon er tilgjengelig.

Gå til Adobe nettsted, logg på eller registrer en konto, og last ned Adobe Creative Cloud-verktøyet for å komme i gang. Herfra kan du laste ned Adobe Dreamweaver og komme i gang med hele veiledningen.

Denne veiledningen viser deg hvordan du lager et grunnleggende nettsted ved å bruke Dreamweaver-malfiler som base. Du finner hele prosjektfilene på dette GitHub-depotet.

Trinn 1: Opprett et Dreamweaver-nettsted

Åpne Adobe Dreamweaver og gå til Nettstedet menyen øverst på siden. Å velge Ny side, velg deretter et navn for nettstedet ditt og velg en filplassering for det.

Trinn 2: Lag en malfil

Deretter er det på tide å lage en malfil for ditt nye nettsted. Malfiler fungerer på samme måte som temaene som brukes av CMS-systemer som WordPress og Shopify, bare du lager dem selv.

Klikk på Lag ny eller gå til Fil > Ny og velg HTML-mal fra dokumenttype liste.

Dette vil lage en grunnleggende mal med litt HTML allerede på plass. Du vil bruke denne HTML-en for prosjektet ditt, så det er verdt å holde det på plass for de neste trinnene.

​​​​​​

Trinn 3: Bygg en overskrift i malen

Nå er det på tide å bygge meny-/overskriftsdelen på nettstedet i malen du nettopp opprettet. Gå til Sett inn øverst på skjermen og velg Overskrift fra listen.

En dialog åpnes på dette tidspunktet. Legg til et navn for den nye overskriftens klasse og klikk OK for å legge til koden i HTML-koden din. Den skal automatisk plassere den nye koden i tagger, men du kan flytte den hvis du trenger det.

Etter dette bør du også legge til et div-element for nettstedets logo og et nav-element for nettstedets meny. Gå til Sett inn menyen og velg Div, og gå deretter tilbake til Sett inn menyen og velg Nav. Begge disse elementene trenger sitt eget klassenavn.

Som siste trinn i denne prosessen la vi til noen menyalternativer i navigasjonselementet vårt. For å gjøre dette, gå til Sett inn og velg Hyperkobling. Vi la til fem hyperkoblinger til sideoverskriften vår: Home, Lion, Tiger, Jaguar og House Cat.

Sidene som vil ha lenker i overskriften eksisterer ikke ennå, så la den være href eiendom tom til du oppretter dem.

Trinn 4: Legg til et stilark for CSS

Som du kan se, ser ikke denne nettsiden veldig bra ut som den står. Litt CSS vil løse dette problemet, og du kan enkelt legge til et stilark i Dreamweaver. Gå til CSS-designer på høyre side av skjermen og klikk på I tillegg til ikonet ved siden av Kilder. Du trenger bare å velge et navn for stilarket ditt og kan la resten av innstillingene være som de er.

Det første du må gjøre er å gjøre headeren om til en flexbox. Flexbox er bare én måte å legge ut en nettside ved hjelp av CSS. Ved siden av dette er nettstedets font satt, en svart bakgrunn er satt, og flere andre endringer er på plass for å få nettstedet til å se bedre ut. Du kan se hele CSS-koden på slutten av artikkelen.

Trinn 5: Legg til redigerbare regioner i malen

Redigerbare områder oppretter deler av HTML som kan redigeres når du bruker malen til å bygge andre sider. Innholdet på hovedsiden vår passer perfekt inn i en region som dette. Gå til Sett inn > Mal > Redigerbar region for å legge til et redigerbart område på siden din.

Trinn 6: Legg til bilde/tekstinnhold i malen

Den redigerbare regionen du nettopp la til kan brukes uten ekstra HTML, men du kan fortsatt legge til noen for å redigere når du lager individuelle sider. For å starte, gå til Sett inn og velg Div for å legge til et nytt div-element på nettstedet ditt.

Dette vil fungere både som beholder for tekstinnholdet på siden, så vel som et sted å legge til et bakgrunnsbilde. Dette elementet har en klasse og en ID slik at forskjellige sider har forskjellige CSS-egenskaper. Disse unike CSS-bakgrunnsmønstre er flotte hvis du vil ta Dreamweaver-nettstedet ditt til neste nivå.

Gå deretter til Sett inn > Overskrifter > H1 for å legge til en overskrift i div-elementet du nettopp la til. Begge disse elementene trenger litt CSS for å fungere ordentlig. Div-en har verdier for bakgrunnsbilde, bakgrunnsstørrelse og høyde. Gå til Fil > Lagre alt for å sørge for at malen din oppdateres.

​​​​​​

Du kan legge til bilder fra hvor som helst på ditt lokale nettverk eller internett, men det er best å lagre bildene i nettstedets egne filer for enkel tilgang.

Trinn 7: Legg til sider med malen

Nå som du har en mal på plass, kan du begynne å legge til noen sider. Gå til Fil > Ny og velg HTML under dokumenttype. Legg til en Tittel for hver side du legger til før du trykker Skape.

Den nye siden er hvit og har ikke malen vår ennå. Når den nye siden din er åpen i Dreamweaver, går du til Verktøy > Maler og klikk på Bruk mal på siden. Velg malen fra listen og klikk Å velge for å laste inn malen din. Til slutt, gå til Fil > Lagre som og velg et navn for den nye siden før du lagrer den.

Gjenta denne prosessen til du har nok sider til å dekke dine behov. Du trenger ikke holde deg til en enkelt mal for dette; du kan legge til nye for forskjellige sideoppsett.

Trinn 8: Legg til sidekoblinger til malen

Når sidene dine er lagt til, kan du endre navigasjonslenkene i malen din slik at de lenker til de riktige sidene. Gå tilbake til malen og finn A-taggene du la til tidligere. Slett plassholderlenken og klikk på anførselstegn å åpne Bla gjennom Meny. Herfra kan du velge riktig side for hver av lenkene dine.

Trinn 9: Fiks CSS/HTML på nye sider

Hver av sidene vil se like ut for øyeblikket. Det er noen få skritt å ta for å sikre at de har sitt eget innhold; følg trinnene nedenfor for å fullføre det nye nettstedet ditt.

  • Endre innholds-div-element-ID-en på hver side for å gjenspeile sidetittelen
  • Legg til CSS-kode for den nye element-ID-en med et annet bakgrunnsbilde
  • Endre tittelen på hver side

Trinn 10: Test nettstedet i nettleseren din

Du kan teste det nye nettstedet ditt i nettleseren du ønsker direkte fra Adobe Dreamweaver. Gå til Fil > Forhåndsvisning i sanntid og velg nettleseren du ønsker for å se nettstedet ditt. Dette er flott for å teste CSS eller annen kode som ikke er kompatibel med alle nettlesere.

Nå trenger du bare et sted å være vert for nettstedet ditt. Å være vert for et statisk nettsted med AWS S3 er et flott sted å starte.

HTML- og CSS-koden

<!doctype html>
<html>
<hode>
<metategnsett="utf-8">
<!-- TemplateBeginEditable name="doktittel" -->
<tittel>Navnløst dokument</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stilark" type="tekst/css">
</head>
<kropp>
<header class="hovedoverskrift">
<div klasse="nettsted-logo">MakeUseOf-eksempelnettsted</div>
<nav klasse="hovedmeny">
<a href="../Hjem.html">Hjem</en><a href="../Lion.html">Løve</en><a href="../Tiger.html">Tiger</en><a href="../Jaguar.html">Jaguar</en><a href="../Huskatt.html">Hus Katt</en>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div klasse="hovedinnhold" id="løve">
<h1>Dette er en løve!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>

Denne HTML-en bygger det ferdige nettstedet for prosjektet vårt. Du kan ta den fra hverandre for å se hvordan den fungerer, men vi oppfordrer deg til å lage din egen HTML for nettstedet ditt.

@charset "utf-8";
kropp {
 margin: 0;
 bakgrunn: svart;
 font-familie: Gotham, "Helvetica Neue", Helvetica, Arial, "sans serif";
}
.main-header {
 display: flex;
 bakgrunn: svart;
 polstring: 20px;
}
.site-logo {
 bredde: 30 %;
 farge: hvit;
 font-weight: fet;
 tekst-transform: store bokstaver;
}
.hovedmeny {
 bredde: 70 %;
 tekst-justering: høyre;
}
.hovedmenyen {
 polstring: 10px;
 tekst-dekorasjon: ingen;
 farge: hvit;
}
.hovedinnhold {
 høyde: 100vh;
 polstring: 20px;
 bakgrunnsstørrelse: cover;
}
.hovedinnholdh1 {
 farge: hvit;
 skriftstørrelse: 10rem;
 tekst-transform: store bokstaver; 
}
#løve {
 bakgrunnsbilde: url("Images/largelion.png");
}
#tiger {
 bakgrunnsbilde: url("Bilder/tiger.png");
}
#jaguar {
 bakgrunnsbilde: url("Images/jaguar.png");
}
#huskatt {
 bakgrunnsbilde: url("Bilder/housecat.png");
}
#allcats {
 bakgrunnsbilde: url("Images/loadsofcats.png");
}

Denne CSS er også en del av det ferdige prosjektet. I likhet med HTML-koden vi har dekket, kan du leke med denne koden for å gjøre denne nettsiden til din egen.

Bygge nettsteder med Adobe Dreamweaver

Dreamweaver virker kanskje ikke like lett å bruke som verktøy som WordPress eller Squarespace, men det gir deg langt mer kraft. Denne guiden er et flott utgangspunkt, men det er mye mer å lære, og det er vel verdt å utforske Dreamweaver selv.