In een wereld van websitebouwers met slepen en neerzetten, heeft Adobe Dreamweaver er goed aan gedaan om relevant te blijven te midden van de concurrentie. Deze software zit boordevol geweldige functies en tal van hulpmiddelen om uw leven gemakkelijk te maken en is een geweldige keuze voor webontwerpers en -ontwikkelaars.
Maar hoe bouw je je eerste website met Dreamweaver?
Aan de slag met Dreamweaver
U moet een exemplaar van Adobe Dreamweaver hebben voordat u ermee kunt werken, maar er is een gratis proefversie beschikbaar.
Ga naar de Adobe website, log in of registreer een account en download de Adobe Creative Cloud-tool om aan de slag te gaan. Vanaf hier kunt u Adobe Dreamweaver downloaden en aan de slag gaan met de volledige handleiding.
Deze handleiding laat u zien hoe u een basiswebsite maakt met Dreamweaver-sjabloonbestanden als basis. U vindt de volledige projectbestanden op deze GitHub-repository.
Stap 1: Maak een Dreamweaver-site
Open Adobe Dreamweaver en ga naar de website menu bovenaan de pagina. Selecteer
Nieuwe site, kies vervolgens een naam voor uw website en kies een bestandslocatie ervoor.Stap 2: Maak een sjabloonbestand
Vervolgens is het tijd om een sjabloonbestand voor uw nieuwe website te maken. Sjabloonbestanden werken op dezelfde manier als de thema's die worden gebruikt door CMS-systemen zoals WordPress en Shopify, alleen maakt u ze zelf.
Klik op Maak nieuw of ga naar Bestand > Nieuw en kies HTML-sjabloon van de type document lijst.
Hiermee wordt een basissjabloon gemaakt met al wat HTML. U zult deze HTML voor uw project gebruiken, dus het is de moeite waard om deze op zijn plaats te houden voor de volgende stappen.
Stap 3: Bouw een koptekst in de sjabloon
Nu is het tijd om het menu/header-gedeelte op de website te bouwen in de sjabloon die u zojuist hebt gemaakt. Ga naar Invoegen bovenaan het scherm en selecteer kop van de lijst.
Op dit punt wordt een dialoogvenster geopend. Voeg een naam toe voor de klasse van je nieuwe koptekst en klik op Oké om de code aan uw HTML toe te voegen. Het zou de nieuwe code automatisch in de. moeten plaatsen tags, maar u kunt deze indien nodig verplaatsen.
Hierna moet u ook een div-element toevoegen voor het logo van de site en een nav-element voor het menu van de site. Ga naar de Invoegen menu en selecteer div, ga dan terug naar de Invoegen menu en selecteer navigatie. Beide elementen hebben hun eigen klassenaam nodig.
Als laatste stap in dit proces hebben we enkele menu-opties toegevoegd aan ons navigatie-element. Ga hiervoor naar Invoegen en selecteer hyperlink. We hebben vijf hyperlinks toegevoegd aan de koptekst van onze site: Home, Lion, Tiger, Jaguar en House Cat.
De pagina's met links in de koptekst bestaan nog niet, dus laat de href eigenschap leeg totdat u ze maakt.
Stap 4: Een stylesheet voor CSS toevoegen
Zoals je kunt zien, ziet deze website er niet erg goed uit zoals hij is. Een klein beetje CSS lost dit probleem op en u kunt eenvoudig een stylesheet toevoegen in Dreamweaver. Ga naar de CSS-ontwerper aan de rechterkant van het scherm en klik op de Plus pictogram naast Bronnen. U hoeft alleen maar een naam voor uw stylesheet te kiezen en de rest van de instellingen kunt u laten zoals ze zijn.
Het eerste dat u moet doen, is de header in een flexbox veranderen. Flexbox is slechts één manier om een webpagina op te maken met CSS. Daarnaast is het lettertype van de site ingesteld, is een zwarte achtergrond ingesteld en zijn er verschillende andere wijzigingen aangebracht om de site er beter uit te laten zien. U kunt de volledige CSS-code aan het einde van het artikel zien.
Stap 5: Bewerkbare regio's toevoegen aan de sjabloon
Bewerkbare regio's maken secties van HTML die bewerkbaar zijn wanneer u de sjabloon gebruikt om andere pagina's te bouwen. De inhoud van onze hoofdpagina past perfect in een regio als deze. Ga naar Invoegen > Sjabloon > Bewerkbare regio om een bewerkbaar gebied aan uw pagina toe te voegen.
Stap 6: Voeg afbeelding/tekstinhoud toe aan de sjabloon
Het bewerkbare gebied dat u zojuist hebt toegevoegd, is bruikbaar zonder extra HTML, maar u kunt er nog steeds een aantal toevoegen om te bewerken wanneer u afzonderlijke pagina's maakt. Ga om te beginnen naar Invoegen en selecteer div om een nieuw div-element aan uw website toe te voegen.
Dit werkt als zowel de container voor de tekstinhoud op de pagina als een plaats om een achtergrondafbeelding toe te voegen. Dit element heeft een klasse en een ID zodat verschillende pagina's verschillende CSS-eigenschappen hebben. Deze unieke CSS-achtergrondpatronen zijn geweldig als u uw Dreamweaver-website naar een hoger niveau wilt tillen.
Ga vervolgens naar Invoegen > Koppen > H1 om een kop toe te voegen binnen het div-element dat u zojuist hebt toegevoegd. Beide elementen hebben wat CSS nodig om goed te werken. De div heeft waarden voor achtergrondafbeelding, achtergrondgrootte en hoogte. Ga naar Bestand > Bewaar alles om ervoor te zorgen dat uw sjabloon wordt bijgewerkt.
U kunt overal op uw lokale netwerk of internet afbeeldingen toevoegen, maar het is het beste om de afbeeldingen op te slaan in de eigen bestanden van de website voor gemakkelijke toegang.
Stap 7: Pagina's toevoegen met de sjabloon
Nu u een sjabloon heeft, kunt u beginnen met het toevoegen van enkele pagina's. Ga naar Bestand > Nieuw en selecteer HTML onder type document. Voeg een... toe Titel voor elke pagina die u toevoegt voordat u klikt Creëren.
De nieuwe pagina is wit en heeft onze sjabloon nog niet. Zodra uw nieuwe pagina is geopend in Dreamweaver, gaat u naar Hulpmiddelen > Sjablonen en klik op Sjabloon toepassen op pagina. Kies uw sjabloon uit de lijst en klik op Selecteer om uw sjabloon te laden. Ga ten slotte naar Bestand > Opslaan als en kies een naam voor uw nieuwe pagina voordat u deze opslaat.
Herhaal dit proces totdat u genoeg pagina's hebt om aan uw behoeften te voldoen. U hoeft zich hiervoor niet aan één sjabloon te houden; u kunt nieuwe toevoegen voor verschillende paginalay-outs.
Stap 8: Paginalinks toevoegen aan de sjabloon
Als uw pagina's zijn toegevoegd, kunt u de navigatielinks in uw sjabloon wijzigen zodat ze naar de juiste pagina's verwijzen. Ga terug naar je sjabloon en zoek de A-tags die je eerder hebt toegevoegd. Verwijder de tijdelijke aanduiding-link en klik op de aanhalingstekens om de te openen Bladeren menu. Vanaf hier kunt u de juiste pagina selecteren voor elk van uw links.
Stap 9: CSS/HTML op nieuwe pagina's repareren
Elk van de pagina's ziet er op dit moment hetzelfde uit. Er zijn een paar stappen die u moet nemen om ervoor te zorgen dat ze hun eigen inhoud hebben; volg de onderstaande stappen om je nieuwe website af te werken.
- Wijzig de inhoud div-element-ID op elke pagina om de paginatitel weer te geven
- CSS-code toevoegen voor de nieuwe element-ID met een andere achtergrondafbeelding
- Verander de titel op elke pagina
Stap 10: Test de website in uw browser
U kunt uw nieuwe website rechtstreeks vanuit Adobe Dreamweaver testen in uw webbrowser naar keuze. Ga naar Bestand > Realtime voorbeeld en selecteer de browser van uw keuze om uw website te bekijken. Dit is geweldig voor het testen van CSS of andere code die niet compatibel is met elke browser.
Nu heb je alleen nog een plek nodig om je website te hosten. Een statische site hosten met AWS S3 is een geweldige plek om te beginnen.
De HTML- en CSS-code
<!doctype html>
<html>
<hoofd>
<meta-tekenset="utf-8">
<!-- TemplateBeginBewerkbare naam="doctitle" -->
<titel>Document zonder titel</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stylesheet" type="tekst/css">
</head>
<lichaam>
<header class="hoofd-header">
<div klasse="site-logo">MakeUseOf-voorbeeldsite</div>
<nav class="hoofdmenu">
<een href="../Home.html">Huis</a><een href="../Leeuw.html">Leeuw</a><een href="../Tijger.html">Tijger</a><een href="../Jaguar.html">Jaguar</a><een href="../Huiskat.html">Huiskat</a>
</nav>
</header>
<!-- TemplateBeginBewerkbare naam="HoofdInhoudRegio" -->
<div klasse="belangrijkste inhoud" id="leeuw">
<h1>Dit is een leeuw!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Deze HTML bouwt de afgewerkte website voor ons project. Je kunt het uit elkaar halen om te zien hoe het werkt, maar we raden je aan om je eigen HTML voor je website te maken.
@charset "utf-8";
lichaam {
marge: 0;
achtergrond: zwart;
font-familie: Gotham, "Helvetica Neue", Helvetica, Arial, "schreefloos";
}
.main-header {
weergave: flexibel;
achtergrond: zwart;
opvulling: 20px;
}
.site-logo {
breedte: 30%;
kleur wit;
lettergewicht: vet;
teksttransformatie: hoofdletters;
}
.hoofdmenu {
breedte: 70%;
tekst uitlijnen: rechts;
}
.hoofdmenua {
opvulling: 10px;
tekstdecoratie: geen;
kleur wit;
}
.belangrijkste inhoud {
hoogte: 100vh;
opvulling: 20px;
achtergrondformaat: omslag;
}
.belangrijkste inhoudh1 {
kleur wit;
lettergrootte: 10rem;
teksttransformatie: hoofdletters;
}
#leeuw {
achtergrondafbeelding: url("Afbeeldingen/largelion.png");
}
#tijger {
achtergrondafbeelding: url("Afbeeldingen/tijger.png");
}
#jaguar {
achtergrondafbeelding: url("Afbeeldingen/jaguar.png");
}
#huiskat {
achtergrondafbeelding: url("Afbeeldingen/huiskat.png");
}
#allcats {
achtergrondafbeelding: url("Images/loadsofcats.png");
}Deze CSS maakt ook deel uit van het voltooide project. Net als de HTML die we hebben behandeld, kunt u met deze code spelen om deze website uw eigen te maken.
Websites bouwen met Adobe Dreamweaver
Dreamweaver lijkt misschien niet zo eenvoudig te gebruiken als tools zoals WordPress of Squarespace, maar het geeft je veel meer kracht. Deze gids is een goed startpunt, maar er valt nog veel meer te leren en het is de moeite waard om Dreamweaver zelf te verkennen.
