Dreamweaver-zelfstudie


Dreamweaver-zelfstudie een website makenZoals je weet, gaat deze site helemaal over het maken van een website. Je kunt verschillende manieren leren met WordPress, Joomla of Drupal. We hebben zelfs een handleiding voor het gebruik van pure HTML zoals vroeger (uiteraard met HTML5, de nieuwste versie). In deze Dreamweaver-zelfstudie voor beginners leert u er nog een.


Voor degenen die het niet weten, Dreamweaver is een applicatie waarmee u websites kunt ontwerpen, coderen en beheren. Interessant aan Dreamweaver is dat het zowel de mogelijkheid biedt om code te schrijven als een website te maken met een visuele interface.

In deze Dreamweaver-zelfstudie leert u alles wat u moet weten om te beginnen met het maken van websites met Dreamweaver. U leert het programma kennen en wat het kan doen, hoogtepunten en hoe u het kunt instellen. Daarna vindt u een stapsgewijze handleiding voor het maken van een eenvoudige website met Dreamweaver, maakt u deze mobielvriendelijk en uploadt u deze vervolgens naar uw server.

Dit wordt een lange rit. U zult er echter versteld van staan ​​hoe snel u in dit zeer intuïtieve programma komt.

Contents

Wat is Dreamweaver en wat kan het doen??

Op het eerste gezicht is Dreamweaver een IDE (Integrated Development Environment). Dat betekent dat het een stuk software is dat verschillende tools combineert om webdesign en ontwikkeling gemakkelijker te maken.

Wat het bijzonder maakt, is dat het ergens tussen een CMS (waar je alles over je website beheert via een visuele interface) en een pure code-editor. Hier is hoe de verschillende onderdelen werken.

Maak websites via een visuele ontwerpinterface

Met de toolbox voor visueel ontwerp kunt u in feite websites bouwen met uw muis. Hiermee kunt u website-elementen plaatsen zoals u een lay-out in Word maakt. Kortom, u ziet uw website zoals u in een browser zou zien, maar u kunt deze ook manipuleren.

Dit is erg handig omdat u hiermee het skelet van een website snel kunt bouwen zonder dat u een enkele regel code hoeft te schrijven. In plaats daarvan maakt Dreamweaver automatisch de benodigde code voor u aan. Op die manier kunt u in theorie met de hand een hele website samenstellen en uploaden naar uw server.

Aan de andere kant, als u in staat bent om te coderen, heeft Dreamweaver ook daarvoor alle benodigde tools.

Werkt als een volwaardige code-editor

Het tweede deel van Dreamweaver is een volledig functionele code-editor. Het wordt geleverd met alle standaardfuncties, waaronder:

  • Syntaxisaccentuering – Dat betekent dat Dreamweaver verschillende elementen (zoals operatoren, variabelen, enz.) In verschillende kleuren markeert om de code gemakkelijker te lezen en te corrigeren.
  • Code aanvulling – Code aanvullen werkt op dezelfde manier als automatisch aanvullen op je telefoon. Begin met typen en de editor zal suggesties doen voor wat je probeert te schrijven. Zo hoef je niet alles helemaal uit te typen.
  • Code stort in – Code inklappen is een andere functie om code gemakkelijker leesbaar te maken. Hiermee kunt u delen van uw code visueel verkleinen wanneer u ze niet nodig heeft. Op die manier hoef je niet door het hele bestand te scrollen, maar kun je alleen aan de onderdelen werken waar je aan moet werken.

Dreamweaver ondersteunt de belangrijkste talen voor webdesign (HTML5, CSS, JavaScript, PHP) en nog veel meer.

Het beste gedeelte: als u iets in uw code verandert, zal Dreamweaver het ook automatisch aan de visuele kant weergeven. Op die manier kunt u het zien zonder dat u uw bestanden naar een server hoeft te uploaden of de browser hoeft op te starten.

Er zijn veel meer functies en u zult er veel van in actie zien in de komende Dreamweaver-zelfstudie voor beginners.

Dreamweaver-installatie en website-ontwerpproces (stap voor stap)

Als eerste stap moet u Dreamweaver aanschaffen via de officiële Adobe-website.

U kunt hier of bij uw Creative Cloud-client een gratis proefperiode krijgen.

Dreamweaver-zelfstudie voor prijzen voor beginners

Stap 1. Download en installeer

Wanneer u het programma van de officiële website haalt, downloadt u gewoon het installatiebestand, voert u het uit en volgt u de instructies.

Als u Creative Cloud al gebruikt (zoals wij), kunt u eenvoudig klikken Proberen binnen de klant. Klik vervolgens op als het programma klaar is met installeren Start proefperiode.

Stap 2. Eerste keer opstarten

Wanneer u Dreamweaver voor het eerst start, ziet u dit scherm.

dreamweaver eerste keer opstarten

Als je het programma nog nooit eerder hebt gebruikt, kies dan Nee, ik ben nieuw. Wanneer u dit doet, leidt Dreamweaver u door een installatiewizard. De eerste stap is om te kiezen of u de werkruimte voor ontwikkelaars of een standaardwerkruimte wilt gebruiken.

dreamweaver onboarding guide kies werkruimte

Aangezien dit een beginnershandleiding voor Dreamweaver is, kiest u de standaardversie. Daarna kunt u uit vier verschillende opties een kleurthema voor uw werkruimte kiezen.

dreamweaver onboarding guide kies een kleurenschema

De laatste stap is kiezen of je wilt beginnen met een voorbeeldbestand, een nieuw of bestaand project of een tutorial wilt bekijken.

Dreamweaver onboarding guide laatste stap

Kies ervoor om te beginnen met een nieuwe of bestaande map en je bent klaar met het installatieproces. Goed gedaan!

Laten we nu een project starten en leren hoe u een website kunt maken met Dreamweaver.

Stap 3. Start een nieuwe site

De eerste stap is het creëren van een nieuwe site. Ga daarvoor naar Site> Nieuwe site. Het brengt je naar dit scherm:

maak een nieuwe site in dreamweaver

De eerste stap is om je site een naam te geven. Vervolgens moet u kiezen waar u het wilt opslaan. Dit is aan jou, maar het is meestal logisch om alle projecten voor de eenvoud op één plek te bewaren.

Je hebt ook de mogelijkheid om je nieuwe project te koppelen aan een Git-repository. Dit kan een goed idee zijn, omdat het je geeft versiebeheer maar je kunt het voorlopig overslaan.

We zullen alles onderhandelen Servers aan de linkerkant later. Hetzelfde met CSS Preprocessors, wat alleen belangrijk is als je gebruikt dat soort dingen.

Wat voor ons belangrijk is, is Lokale info onder Geavanceerde instellingen.

schakel de standaardafbeeldingsmap in dreamweaver in

Zorg ervoor dat u op het mappictogram aan de rechterkant klikt waar het zegt Standaard afbeeldingenmap. Ga vervolgens naar uw zojuist gemaakte sitemap, open deze en maak een nieuwe map met de naam afbeeldingen en selecteer dat als uw standaardmap. Op die manier slaat Dreamweaver afbeeldingen die aan uw site zijn gekoppeld daar automatisch op.

Dat is het voor nu, klik Opslaan om terug te gaan naar uw werkruimte.

Stap 4. Maak uw startpagina-bestand

Nu je een projectsite hebt gemaakt, is het tijd voor het eerste bestand. We beginnen met de homepage.

Als Dreamweaver u de optie zelf niet biedt, ga dan naar Bestand> Nieuw. U kunt een volledig nieuw bestand maken of een bestaande sjabloon gebruiken. Het programma wordt geleverd met een paar daarvan (zie Startersjablonen). Op dit moment zullen we in plaats daarvan een nieuwe maken.

maak een nieuw bestand in dreamweaver

HTML is standaard ingesteld en u kunt dat laten zoals het is. Voor documenttitel, invoer index.html en kies ervoor Creëer. Dit brengt je op het volgende scherm.

nieuw project in dreamweaver

Dit is de hoed die we in het begin noemden: een live weergave van hoe uw site eruit ziet (leeg, op dit moment) en de code erachter. U zult ook merken dat Dreamweaver automatisch een aantal eenvoudige HTML-markeringen heeft gemaakt waarop u kunt voortbouwen. Laten we dat nu doen, zullen we?

Stap 5. Maak een koptekst

Om een ​​element in de pagina in te voegen, moet je eerst de locatie kiezen. Klik op de lege pagina (Dreamweaver kiest automatisch de element als je dat doet) of plaats de cursor in hetzelfde element in het codegedeelte van het scherm.

Daarna moet je naar de Invoegen tabblad in de rechterbovenhoek. Dit geeft u een lijst met veelvoorkomende HTML- en site-elementen die u aan uw pagina kunt toevoegen. Scroll naar beneden totdat je het kunt zien Koptekst als een optie.

header-element invoegen in dreamweaver

Een simpele klik voegt het in de pagina. Je ziet het ook in het HTML-document verschijnen.

koptekst zichtbaar in visuele interface en code-editor

Eenvoudig, juist?

Nu verandert u de tekst in de koptekst en verandert u deze ook in een kop. Voor beide: markeer eerst de tekst in de code-editor onderaan.

koptekst markeren in dreamweaver

Ga daarna terug naar Invoegen, klik op de pijl naast Rubriek en kies H1. Dit verpakt de paginatitel in een H1 HTML-tag. Lees voor meer informatie over koptags Dit artikel.

Daarna kunt u ook een titel voor uw pagina typen. Op uw echte website zou u iets beschrijvends kiezen met zoekwoorden en niet alleen Welkom op mijn testwebsite zoals in het voorbeeld.

veranderde koptekst in dreamweaver

Oké, je hebt zojuist een paginakoptekst gemaakt! Op dit moment ziet het er nog steeds een beetje grof uit, dus laten we dat veranderen via CSS.

Stap 6. Maak een CSS-bestand

Als u er niet bekend mee bent, is CSS het onderdeel dat alle styling op een webpagina biedt. Hiermee kunt u kleuren, afmetingen van elementen, lettertypes en -groottes definiëren en nog veel meer. We willen de opmaak gebruiken om onze paginatitel op te fleuren en ook leren hoe u CSS in Dreamweaver kunt wijzigen.

Theoretisch kunt u CSS rechtstreeks in het HTML-document toevoegen. Er is een veel minder elegante optie dan wat we zullen doen, namelijk het creëren van een speciaal bestand voor alle CSS-styling van de hele site.

De eerste stap is om uw nieuwe koptekst een CSS-klasse of -id te geven. Tijdens dat proces vraagt ​​Dreamweaver u ook om een ​​stijlbladbestand te maken. Ga naar het DOM-menu in de rechterbenedenhoek van het scherm met uw volledige sitestructuur. Zorg ervoor dat uw koptekst is geselecteerd.

In de liveweergave ziet u het nu blauw gemarkeerd met een klein label en een plusteken onderaan.

css-bestand toevoegen in dreamweaver

Klik op het plusteken en typ in #header in het veld dat wordt geopend. De hashtag betekent dat u een id in tegenstelling tot een klasse. Druk op Enter. In het openingsmenu, in plaats van Definieer in pagina selecteer Maak een nieuw CSS-bestand. Kies in de pop-up Bladeren en navigeer naar uw sitemap. Typ dan style.css (wat de standaardnaam is voor stylesheets) in de Bestandsnaam veld en raak Opslaan.

maak een stijlblad in dreamweaver

Als je nu selecteert OK, er verschijnt een nieuw bestand bovenaan uw live-weergave. U kunt het van daaruit bekijken en bewerken. Het zal ook worden gekoppeld aan de sectie van het HTML-gedeelte van uw pagina.

style sheet toegevoegd aan website

Geweldig buidelrat! Nu ben je klaar om de stijl van je pagina te veranderen.

Stap 7. Maak een CSS-kiezer voor de paginatitel

Het eerste dat u wilt doen, is het lettertype van uw kop wijzigen en deze ook centreren. Daarvoor moet je eerst een nieuwe CSS-selector maken. Een selector is de naam van een element op onze pagina waaraan u eigenschappen kunt toewijzen, bijvoorbeeld kleur, grootte en meer.

Markeer uw H1-kop in de DOM-weergave rechtsonder (zoals u deed met de koptekst eerder). Kies vervolgens daarboven CSS-ontwerper.

styling voorbereiden voor kopelement

Om een ​​CSS-kiezer te maken, klikt u op de regel waar S staatkiezers en klik vervolgens op het plusteken. Dit zou automatisch een selector aan u moeten voorstellen met de naam #header h1.

maak css-kiezer in dreamweaver

Druk op Enter om het te maken. Gedaan!

Snelle notitie: voor al degenen die nieuw zijn in CSS, betekent deze selector dat u het genoemde element target h1 binnen het element genaamd #header. Op die manier wordt alles wat u invoert als CSS alleen toegepast op de geschreven tekst en niet op het header-element in het algemeen.

Stap 8. Wijzig het lettertype van de kop

Nu u een selector heeft, kunt u er eigenschappen aan toewijzen. Als u uw weg kent in CSS, kunt u eenvoudig markeringen typen style.css en het programma zorgt er automatisch voor.

Voor de minder ervaren gebruikers maakt Dreamweaver het ook heel gemakkelijk. Blijf in de CSS-ontwerper menu en verwijder het vinkje uit het vakje waar het staat Show Set. Wanneer u dit doet, worden er veel extra opties ontgrendeld.

css-opties inschakelen in dreamweaver

Met de nieuwe knoppen kunt u veel CSS-eigenschappen kiezen uit de gebieden lay-out, tekst, rand en achtergrond. De Meer knop geeft je opties om je eigen regels in te voeren.

Klik op om het lettertype te wijzigen Tekst optie bovenaan (of scroll naar beneden). Beweeg in de aankomende opties font-familie en klik op standaardlettertype.

verander de lettertypefamilie in dreamweaver

Dit geeft u een aantal opties voor veelvoorkomende lettertypen, inclusief hun fallbacks (voor het geval de gebruikersbrowser het primaire lettertype niet kan tonen). Misschien wilt u op klikken Beheer lettertypen onderaan om naar dit menu te gaan:

adobe edge weblettertypen

Hier kunt u gratis lettertypen van Adobe kiezen Edge Web Fonts-service. Zoek naar een lettertype op naam of gebruik de vele filteropties aan de linkerkant om uw keuzes te beperken totdat u iets vindt.

Een klik op een van de lettertypen markeert het voor opname in Dreamweaver. Zodra u dit hebt gedaan, kunt u ze rechtstreeks gebruiken of naar gaan Aangepaste lettertypestapels om uw eigen reservefonts te definiëren.

maak aangepaste lettertypestapels in dreamweaver

Voor nu, gewoon raken Gedaan en klik vervolgens op standaardlettertypen opnieuw. Kies deze keer het door u gekozen aangepaste lettertype en voila – de wijziging is gedaan inclusief alle noodzakelijke codering.

veranderd lettertype in dreamweaver

Als u op uw style.css bestand bovenaan, zult u zien dat alle markeringen ook zijn toegevoegd.

bijgewerkte stylesheet in dreamweaver

Stap 9. Centreer de kop en wijzig de grootte

De tekst kan er nog steeds beter uitzien. De volgende taak is om het te centreren en de lettergrootte te vergroten. Daarvoor kunt u ook een andere functie gebruiken, genaamd Snelle aanpassing.

Om het te gebruiken, gaat u naar de codeweergave en klikt u met de rechtermuisknop op het onderdeel dat u wilt bewerken. In dit geval staat het op de

haakje.

open snelmenu in dreamweaver

Kies hier Snelle aanpassing op de top. Dit opent de CSS die aan dit element eronder is gekoppeld. Nu kunt u extra eigenschappen invoeren zonder dat u het hele stijlbladbestand hoeft te doorzoeken (wat erg lang kan zijn). Voeg de volgende code toe om de tekst te centreren en groter te maken.

lettergrootte: 42px;
text-align: center;

Tijdens het typen doet Dreamweaver ook voorstellen voor wat u probeert in te voeren, waardoor het nog eenvoudiger wordt. Dat is de eerder genoemde functie voor het voltooien van code.

Als je klaar bent, ziet het er als volgt uit:

verander css via snelle bewerking in dreamweaver

Merk op dat de tekst al is gewijzigd in de liveweergave. Druk nu op Esc om snel te vertrekken, te bewerken en naar het stijlblad te gaan. U zult merken dat de nieuwe CSS op de juiste plaats is toegevoegd.

Best cool, toch?

Trouwens, als je ooit niet zeker weet wat een CSS-eigenschap betekent, klik er dan met de rechtermuisknop op en kies Snelle documenten (of druk op Ctrl + K). Dreamweaver geeft u dan een uitleg.

dreamweaver snelle documenten

Stap 10. Voeg meer inhoud toe

Met wat je tot nu toe hebt geleerd, kun je nu een rudimentaire site bouwen. In het belang van deze Dreamweaver-zelfstudie hebben we het volgende gedaan:

  • Gedefinieerde standaardlettertypen voor koppen en alinea’s
  • Een navigatiebalk toegevoegd en daarin een link naar de startpagina gemaakt
  • Een div-box toegevoegd voor inhoud met nog twee boxen erin
  • Verplaatst een van hen naar links en een naar rechts met de vlotter eigendom
  • Beperkt hun breedte tot percentages zodat ze horizontaal kunnen uitlijnen
  • Een voorbeeldkop en dummy-tekst aan de linkerkant toegevoegd, inclusief een ongeordende lijst
  • Een formulier gemaakt (gebruik het vervolgkeuzemenu onder Invoegen), twee tekstvelden en een verzendknop
  • Afstand tussen de elementen toegevoegd via CSS-marges en opvulling
  • Mits achtergrondkleuren en randen
  • Een voettekst en een copyrightbericht gemaakt

Dit is het resultaat:

website met geavanceerd ontwerp

Code voor het voorbeeld:

Omdat dit een beetje geavanceerd is en niet iedereen zal weten hoe het moet, kun je de HTML en CSS hieronder vinden, zodat je het zelf kunt reconstrueren. Eerst de HTML:





index.html

 



Huis

Voorbeeldkop voor hoofdinhoud

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, neg porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Voorbeeld van een oproep tot actie!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 My Imaginary Website

En dan de CSS:

@charset "utf-8";

lichaam {
achtergrondkleur: # F5F5F5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

p,
een,
ul,
ol,
li,
etiket,
invoer{
font-family: muli, sans-serif;
lettertype: normaal;
font-weight: 300;
lettergrootte: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
lettertype: normaal;
font-weight: 400;
text-transform: hoofdletters;
}

#header {
padding-top: 25px;
vulling onderkant: 25px;
achtergrondkleur: #FFFFFF;
border-bottom: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
lettertype: normaal;
font-weight: 400;
lettergrootte: 42px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
tekst-transformatie: geen;
}

#navigatie {
margin-right: auto;
margin-left: auto;
max-width: 1140px;
margin-top: 10px;
marge-onderkant: 10px;
}

#navigation a {
kleur: # EB232F;
}

.hoofd {
display: blok;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
marge-onderkant: 15px;
beiden opschonen;
overloop: auto;
max-width: 1140px;
}

.main # main-right {
zweven: rechts;
breedte: 37,5%;
display: blok;
}

.main # main-left {
drijven: links;
breedte: 57%;
display: blok;
padding-right: 20px;
}

.main # main-right .cta {
text-align: center;
}

.main # main-right .form {
breedte: 92%;
margin-right: auto;
margin-left: auto;
}

# main-right .form div {
marge-onderkant: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
breedte: 100%;

}

.main # main-right #button {
text-align: center;
padding-top: 7px;
opvulling-onderkant: 7px;
margin-left: auto;
margin-right: auto;
positie: relatief;
display: blok;
padding-right: 36px;
padding-left: 36px;
border: geen;
achtergrondkleur: # EB232F;
kleur: #FFFFFF;
cursor: aanwijzer;
}

.voettekst {
display: blok;
padding-top: 25px;
vulling onderkant: 25px;
text-align: center;
}

We willen dit als voorbeeld gebruiken om u de volgende stappen te laten zien. Zelfs als het ingewikkeld lijkt, hebben we dit op dezelfde manier samengesteld als we je eerder hebben laten zien.

Stap 11. Voorbeeld in browser en op mobiel apparaat

Hoe hebben we dit allemaal gedaan? Allereerst zijn we wat meer ervaren in het bouwen van websites dan u waarschijnlijk bent. Daarom hebben we al de stappen in mijn hoofd om een ​​goede webpagina te maken.

Ten tweede gebruiken we een zeer nuttige functie die me helpt het proces te versnellen: browservoorbeeld. Met Dreamweaver kunt u uw webpagina’s in realtime bekijken in een browser en zelfs op mobiele apparaten.

Klik om te beginnen op de realtime voorbeeldknop in de rechter benedenhoek.

schakel het voorbeeldmenu in dreamweaver in

Dit opent de voorbeeldopties.

realtime preview-opties in dreamweaver

Een klik op een van de browsernamen opent uw websiteproject erin. U kunt de QR-code ook scannen met uw telefoon of tablet (bijvoorbeeld met Firefox Quantum) of typ het weergegeven adres in uw browser om de live preview op uw apparaat te starten.

Houd er rekening mee dat u daarvoor uw Adobe ID en wachtwoord moet invoeren. Dat zou je moeten hebben als je je aanmeldt voor Dreamweaver.

Het beste gedeelte: Alle wijzigingen die u in Dreamweaver aanbrengt, worden automatisch in de browser weergegeven op het moment dat u ze aanbrengt.

Hoe heeft dit me geholpen de site sneller samen te stellen? Allereerst, afhankelijk van de grootte van uw scherm, is de weergave in de browser mogelijk dichter bij het origineel dan wat u in Dreamweaver ziet.

Ten tweede kan ik door de site in de browser te controleren de ontwikkelaarstools gebruiken om wijzigingen te testen.

ontwikkelaarstools in browser

Ze lijken erg op wat je in Dreamweaver ziet. Ze zijn ons meer bekend, zodat we sneller met ze kunnen werken en de code gewoon kunnen kopiëren en in ons stijlblad plakken.

Een blik op de telefoonversie laat zien dat er nog veel werk aan de winkel is.

mobiele realtime preview in dreamweaver

Dit brengt ons meteen bij ons volgende punt.

Stap 12. Mediaquery’s toevoegen

Om uw website op alle apparaten te laten werken, moet u zogenaamde mediaquery’s toevoegen. Dit zijn voorwaardelijke CSS-instructies die browsers vertellen om alleen boven of onder bepaalde schermgroottes of op bepaalde apparaten op stijl toe te passen. Zo verander je de layout op kleinere schermen.

Tot dusver heb je alleen globale stijlen gedefinieerd. Dat betekent de stijlen die op de hele site worden toegepast. Nu leert u hoe u voorwaardelijke stijlen voor kleinere schermen kunt toevoegen.

Ga eerst naar CSS-ontwerper. Zorg ervoor dat het bestand waaraan u code wilt toevoegen onder is geselecteerd Bronnen. Druk op het plusteken onder @media.

Het geeft je dit optiepaneel:

menu voor mediaquery's in Dreamweaver

U kunt voorwaarden definiëren voor mediaquery’s, bijvoorbeeld de apparaten waarop ze van toepassing zijn, oriëntatie, resolutie en nog veel meer. U kunt ook meerdere voorwaarden toevoegen met het plusteken.

Wat belangrijker is voor ons voorbeeld is de Maximale wijdte instelling. Daarmee kunt u aangepaste CSS definiëren die alleen van toepassing is op een bepaalde maximale schermgrootte.

Stel dat u eerst dingen op de telefoon wilt oplossen, dus typt u een Maximale wijdte van 375 pixels. Wanneer u dat doet, ziet u onderaan de CSS-code.

maak een mediaquery in dreamweaver

Wat gaat er ook gebeuren als je klikt OK is dat er een groene lijn bovenaan het scherm verschijnt. Dit vertegenwoordigt visueel de mediaquery. Klik erop en het scherm springt automatisch naar dat formaat.

maak mediaquery's in dreamweaver

Stap 13. Voeg voorwaardelijke CSS toe

Om het ontwerp voor mobiel te corrigeren, moeten we eerst de code elimineren waardoor de twee elementen op de site naast elkaar komen te staan. Daar is duidelijk niet genoeg ruimte voor.

Je kunt dit op dezelfde manier doen als je eerder met CSS hebt gedaan, maar deze keer heb je een mediaquery geactiveerd terwijl je dit doet.

Allereerst: navigeer naar het element in uw DOM-weergave. Maak van daaruit een nieuwe CSS-selector. Stel vervolgens zijn breedte naar auto, vlotter naar geen (om te voorkomen dat het naar links gaat) en voeg wat opvulling toe aan de zijkanten zodat de inhoud niet aan de rand van het scherm grenst.

gecorrigeerd mobiel ontwerp

Ziet er veel beter uit, nietwaar? Op dezelfde manier kunt u de CSS van alle andere elementen op de pagina wijzigen zodat ze er allemaal goed uitzien.

Dat is het eigenlijk voor mediaquery’s. U kunt dezelfde methode gebruiken om de lay-out aan te passen aan tablets en andere formaten.

Pro tip: Optimaliseer niet voor bepaalde apparaten en hun afmetingen, maar maak in plaats daarvan mediaquery’s, afhankelijk van de lay-out. Dat betekent spelen met de schermgrootte en vragen toevoegen op die punten wanneer de lay-out er niet meer goed uitziet.

Nog één ding: u kunt mediaquery’s ook iets eenvoudiger maken door de vooraf ingestelde apparaatgroottes in de benedenhoek te gebruiken en op het plusteken bovenaan te klikken wanneer u een punt hebt gevonden waar u er een wilt toevoegen.

maak mediaquery's via snelkoppelingen in dreamweaver

Stap 14. Upload uw site naar de server

We raden aan om te gebruiken Bluehost (affiliate link) om uw Dreamweaver-site te hosten.

Als u klaar bent met het ontwerpgedeelte, bent u vrijwel klaar om de site naar uw server te uploaden. Zoals aan het begin al vermeld, maakt Dreamweaver dit ook heel gemakkelijk.

Ga eerst naar Site> Sites beheren. Selecteer uw huidige website in het menu en kies Bewerk linksonder. Klik in het volgende venster op Servers.

externe serverconfiguratie in dreamweaver

Voer alle belangrijke gegevens in om verbinding te maken met uw FTP-server. De naam is aan jou, de rest (FTP-adres, gebruikersnaam, wachtwoord) komt van je hostingprovider. Vergeet niet te specificeren in welke directory de bestanden moeten worden geplaatst en het webadres van je live site! Het laatste deel is belangrijk zodat Dreamweaver sitegerelateerde interne links kan maken.

Onder Geavanceerd je hebt nog meer opties (of bestanden automatisch moeten worden geüpload bij het opslaan). Je kunt de dingen meestal houden zoals ze zijn. Raken Opslaan tweemaal en je bent klaar.

Ga nu naar de Bestanden paneel (rechts bovenaan of via Venster> Bestanden) en klik op het meest linkse symbool om verbinding te maken met uw server:

upload site naar externe server in dreamweaver

Zodra de verbinding tot stand is gebracht, selecteert u de bestanden die u wilt uploaden en klikt u hiervoor op de naar boven wijzende pijl. Zodra dit is gebeurd, moet uw site beschikbaar zijn vanaf uw webadres.

Goed gedaan! U heeft zojuist een eenvoudige site gebouwd en geüpload met Dreamweaver!

Dreamweaver-zelfstudie – laatste woorden

Dreamweaver is een fantastisch programma om websites te bouwen. Het combineert een intuïtieve gebruikersinterface met een volwaardige code-editor. Door deze mix is ​​het voor beginners, gevorderden en gevorderde gebruikers gemakkelijk om websites van hoge kwaliteit te bouwen.

In deze Dreamweaver-zelfstudie voor beginners hebben we u kennis laten maken met Dreamweaver en de mogelijkheden ervan. We hebben u laten zien hoe u het programma instelt en aan de slag gaat met uw eerste site. Je hebt geleerd hoe je een eenvoudige HTML-structuur maakt en deze opmaakt met CSS. We hebben ook besproken hoe u een website mobiel responsief kunt maken en deze naar uw server kunt uploaden.

Je hebt inmiddels een goed begrip van hoe Dreamweaver werkt en hoe je het kunt gebruiken om een ​​website te maken. Nu is het aan jou om dieper te duiken en de volgende stappen te bedenken.

Vergeet niet: Dreamweaver is slechts één manier om een ​​website te maken. Er zijn er nog veel meer en je kunt hier veel informatie over vinden. Succes!

Heb je ervaring met Dreamweaver? Wat is jouw mening? Iets toe te voegen aan het bovenstaande? Laat het ons weten in de comments hieronder!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map