I en verden af træk-og-slip webstedsbyggere har Adobe Dreamweaver gjort det godt i at forblive relevant i konkurrencen. Spækket med fantastiske funktioner og masser af værktøjer til at gøre dit liv nemt, denne software er et godt valg for webdesignere og udviklere.
Men hvordan bygger du din første hjemmeside ved hjælp af Dreamweaver?
Kom godt i gang med Dreamweaver
Du skal have en kopi af Adobe Dreamweaver, før du kan begynde at arbejde med det, men en gratis prøveversion er tilgængelig.
Gå til Adobe websted, log ind eller registrer en konto, og download Adobe Creative Cloud-værktøjet for at komme i gang. Herfra kan du downloade Adobe Dreamweaver og komme i gang med den fulde guide.
Denne vejledning viser dig, hvordan du laver et grundlæggende websted med Dreamweaver skabelonfiler som base. Du kan finde de fulde projektfiler på dette GitHub-lager.
Trin 1: Opret et Dreamweaver-websted
Åbn Adobe Dreamweaver og gå til websted menuen øverst på siden. Vælg Nyt websted, vælg derefter et navn til dit websted og vælg en filplacering for det.
Trin 2: Opret en skabelonfil
Dernæst er det tid til at oprette en skabelonfil til din nye hjemmeside. Skabelonfiler fungerer på samme måde som de temaer, der bruges af CMS-systemer som WordPress og Shopify, kun du selv laver dem.
Klik på Lav ny eller gå til Fil > Ny og vælg HTML skabelon fra dokument type liste.
Dette vil skabe en grundlæggende skabelon med noget HTML allerede på plads. Du vil bruge denne HTML til dit projekt, så det er værd at holde det på plads til de næste trin.
Trin 3: Byg en header i skabelonen
Nu er det tid til at bygge menuen/header-sektionen på hjemmesiden i den skabelon, du lige har oprettet. Gå til Indsæt øverst på skærmen og vælg Header fra listen.
En dialog åbnes på dette tidspunkt. Tilføj et navn til din nye overskrifts klasse, og klik Okay for at tilføje koden til din HTML. Den skal automatisk placere den nye kode i tags, men du kan flytte den, hvis du har brug for det.
Efter dette bør du også tilføje et div-element til webstedets logo og et nav-element til webstedets menu. Gå til Indsæt menu og vælg Div, gå derefter tilbage til Indsæt menu og vælg Nav. Begge disse elementer har brug for deres eget klassenavn.
Som sidste trin i denne proces har vi tilføjet nogle menumuligheder til vores navigationselement. For at gøre dette, gå til Indsæt og vælg Hyperlink. Vi tilføjede fem hyperlinks til vores sidehoved: Home, Lion, Tiger, Jaguar og House Cat.
De sider, der vil have links i overskriften, eksisterer ikke endnu, så lad være href egenskaben tom, indtil du opretter dem.
Trin 4: Tilføj et stylesheet til CSS
Som du kan se, ser denne hjemmeside ikke særlig god ud, som den står. En lille smule CSS vil løse dette problem, og du kan nemt tilføje et stylesheet i Dreamweaver. Gå til CSS designer i højre side af skærmen, og klik på Plus ikonet ud for Kilder. Du skal blot vælge et navn til dit stylesheet og kan lade resten af indstillingerne være som de er.
Den første ting at gøre er at forvandle headeren til en flexbox. Flexbox er blot én måde at udforme en webside ved hjælp af CSS. Sideløbende med dette er webstedets skrifttype indstillet, en sort baggrund er indstillet, og flere andre ændringer er på plads for at få webstedet til at se bedre ud. Du kan se den fulde CSS-kode i slutningen af artiklen.
Trin 5: Tilføj redigerbare regioner til skabelonen
Redigerbare områder opretter sektioner af HTML, der kan redigeres, når du bruger skabelonen til at bygge andre sider. Vores hovedsideindhold passer perfekt ind i en region som denne. Gå til Indsæt > Skabelon > Redigerbar region for at tilføje et redigerbart område til din side.
Trin 6: Tilføj billede/tekstindhold til skabelonen
Det redigerbare område, du lige har tilføjet, kan bruges uden yderligere HTML, men du kan stadig tilføje nogle til redigering, når du laver individuelle sider. For at starte, gå til Indsæt og vælg Div for at tilføje et nyt div-element til din hjemmeside.
Dette fungerer både som beholder for tekstindholdet på siden, såvel som et sted at tilføje et baggrundsbillede. Dette element har en klasse og et ID, så forskellige sider har forskellige CSS-egenskaber. Disse unikke CSS-baggrundsmønstre er gode, hvis du vil tage dit Dreamweaver-websted til næste niveau.
Gå derefter til Indsæt > Overskrifter > H1 for at tilføje en overskrift inde i det div-element, du lige har tilføjet. Begge disse elementer har brug for noget CSS for at fungere korrekt. div'en har værdier for baggrundsbillede, baggrundsstørrelse og højde. Gå til Fil > Gem alle for at sikre, at din skabelon opdateres.
Du kan tilføje billeder fra hvor som helst på dit lokale netværk eller internettet, men det er bedst at gemme billederne i webstedets egne filer for nem adgang.
Trin 7: Tilføj sider med skabelonen
Nu hvor du har en skabelon på plads, kan du begynde at tilføje nogle sider. Gå til Fil > Ny og vælg HTML under dokument type. Tilføj en Titel for hver side, du tilføjer, før du trykker skab.
Den nye side er hvid og har endnu ikke vores skabelon. Når din nye side er åben i Dreamweaver, skal du gå til Værktøjer > Skabeloner og klik på Anvend skabelon på siden. Vælg din skabelon fra listen, og klik Vælg for at indlæse din skabelon. Gå endelig til Fil > Gem som og vælg et navn til din nye side, før du gemmer den.
Gentag denne proces, indtil du har nok sider til at opfylde dine behov. Du behøver ikke holde dig til en enkelt skabelon for dette; du kan tilføje nye til forskellige sidelayouts.
Trin 8: Tilføj sidelinks til skabelonen
Med dine sider tilføjet, kan du ændre navigationslinkene i din skabelon, så de linker til de rigtige sider. Gå tilbage til din skabelon og find de A-tags, du tilføjede tidligere. Slet pladsholderlinket, og klik på anførselstegn at åbne Gennemse menu. Herfra kan du vælge den korrekte side for hvert af dine links.
Trin 9: Ret CSS/HTML på nye sider
Hver af siderne vil se ens ud i øjeblikket. Der er et par skridt at tage for at sikre, at de har deres eget indhold; følg nedenstående trin for at færdiggøre din nye hjemmeside.
- Skift indholds-div-element-id'et på hver side, så det afspejler sidetitlen
- Tilføj CSS-kode til det nye element-id med et andet baggrundsbillede
- Skift titlen på hver side
Trin 10: Test webstedet i din browser
Du kan teste dit nye websted i din foretrukne webbrowser direkte fra Adobe Dreamweaver. Gå til Fil > Real-Time Preview og vælg den browser efter eget valg for at se dit websted. Dette er fantastisk til at teste CSS eller anden kode, der ikke er kompatibel med alle browsere.
Nu mangler du bare et sted at hoste din hjemmeside. Vært for et statisk websted med AWS S3 er et godt sted at starte.
HTML- og CSS-koden
<!doctype html>
<html>
<hoved>
<meta tegnsæt="utf-8">
<!-- TemplateBeginRedigerbart navn="doktitel" -->
<titel>Unavngivet dokument</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stilark" type="tekst/css">
</head>
<legeme>
<header klasse="hovedhoved">
<div klasse="site-logo">MakeUseOf Eksempel-websted</div>
<nav klasse="hovedmenu">
<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="../Huskat.html">Hus kat</en>
</nav>
</header>
<!-- TemplateBeginRedigerbart navn="MainContentRegion" -->
<div klasse="hovedindhold" id="løve">
<h1>Dette er en løve!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Denne HTML bygger den færdige hjemmeside til vores projekt. Du kan skille det ad for at se, hvordan det virker, men vi opfordrer dig til at oprette din egen HTML til dit websted.
@charset "utf-8";
krop {
margin: 0;
baggrund: sort;
font-familie: Gotham, "Helvetica Neue", Helvetica, Arial, "sans serif";
}
.main-header {
display: flex;
baggrund: sort;
polstring: 20px;
}
.site-logo {
bredde: 30%;
farve: hvid;
font-weight: fed;
tekst-transform: store bogstaver;
}
.hovedmenu {
bredde: 70%;
tekst-align: højre;
}
.hovedmenu-en {
polstring: 10px;
tekst-dekoration: ingen;
farve: hvid;
}
.main-indhold {
højde: 100vh;
polstring: 20px;
baggrundsstørrelse: cover;
}
.main-indholdh1 {
farve: hvid;
skriftstørrelse: 10rem;
tekst-transform: store bogstaver;
}
#løve {
baggrundsbillede: url("Images/largelion.png");
}
#tiger {
baggrundsbillede: url("Images/tiger.png");
}
#jaguar {
baggrundsbillede: url("Images/jaguar.png");
}
#huskat {
baggrundsbillede: url("Images/housecat.png");
}
#alle katte {
baggrundsbillede: url("Images/loadsofcats.png");
}Denne CSS er også en del af det færdige projekt. Ligesom den HTML, vi har dækket, kan du lege med denne kode for at gøre denne hjemmeside til din egen.
Opbygning af websteder med Adobe Dreamweaver
Dreamweaver virker måske ikke så let at bruge som værktøjer som WordPress eller Squarespace, men det giver dig langt mere kraft. Denne guide er et godt udgangspunkt, men der er meget mere at lære, og det er værd at udforske Dreamweaver selv.