Design Trainingen

Dreamweaver Basics

HTML-CSS: bouwen van blokken in Dreamweaver

Tot nu toe heb je zelf de HTML en CSS-code getypt in een teksteditor. Hierdoor leer je deze 'talen' sneller. Toch is het handig om af en toe wat hulp te krijgen bij de code en het bouwen. Dreamweaver kan je hierbij helpen. De ervaring leert wel, dat Dreamweaver ook vertragend werkt als je de code redelijk kent.... We zullen ons in deze tutorial dan ook beperken tot de basis-functies van het programma.

Je maakt min of meer hetzelfde als in de vorige HTML- en CSS-oefeningen, maar met behulp van Dreamweaver...

De blokkendoos

We gaan verder met het bouwen van blokken. Een website is eigenlijk een blokkendoos. Net als een InDesign document, waar je steeds met tekst- en illustratiekaders werkt. Een blok zet je op een plek en dan stop je er afbeeldingen of tekst in. Net zoals in InDesign.

De opbouw van een HTML-document vaak een basis van blokken die in elke website voorkomen. Hieronder de opbouw:

<body>

   <header> logo, naam of grote sfeer afbeelding </header>  

   <nav> menu </nav>

   <section>
      <article> teksten en afbeeldingen </article>
   </section>

   <footer> links en disclaimer </footer>

</body>

LET OP: de bovenstaande tag's (header, section, article, footer) werken op de zelfde manier als de class .blokje uit de vorige oefening. Met CSS kun je er tegen praten en de vormgeving van de tag's bepalen.


Bekijk eerst deze video om te zien hoe Dreamweaver werkt:


STAP 1: Aanmaken van de website map (root)

Maak zelf een nieuwe hoofdmap: website_dreamweaver
Daarin een mapje images en css

index.html zet je er straks via Dreamweaver in

  • gebruik ALTIJD kleine letters
  • gebruik GEEN ‘vreemde tekens’ en SPATIES in de bestandsnaam
  • de eerste pagina (homepage) heet ALTIJD: index.html

rootmap


STAP 2: Sitemanager instellen in Dreamweaver

Om je website te overzichtelijk te beheren stel je direct de SITE MANAGER in. Deze helpt je bij correcte links naar afbeeldingen en HTML-pagina's.

Begin met het aanmaken van een nieuwe site via het menu MANAGE SITES.


STAP 3: Aanmaken van een nieuw Responsive HTML-document

  1. Maak in Dreamweaver een nieuwe Dynamische Raster Layout (Fluid Grid Layout) en kies bij DOCTYPE (rechts onder in het dialoogvenster) voor HTML5
  2. Er verschijnt een venster met de vraag waar je het gekoppelde css-bestand witl bewaren.
  3. Bewaar het css-bestand in: website_dreamweaver/css met de naam: layout_tablet_smartphone.css
  4. Bewaar vervolgens het HTML-document direct als index.html in de hoofdmap: website_dreamweaver.
  5. Klik OK bij de vraag over kopieren van bestanden in de hoofdmap.
  6. Vul bovenaan in Dreamweaver bij Title een paginatitel in, bijvoorbeeld: Responsive Webdesign Dreamweaver

Of bekijk deze video van Adobe TV (Fluid Grid layout) :


STAP 4: koppelen van CSS-document

Heel veel css-code in de head-section (zie de css-opdracht hiervoor) vertraagt de zoekmachines en de laadtijd van de pagina. Om te voorkomen dat er een lange lijst aan css in de head-section komt te staan plaatsen we de CSS-code in een apart document. Dit CSS-document wordt weer gekoppeld met het HTML-document.

Een ander belangrijk voordeel van CSS-code in een apart document is dat je 1 CSS-document aan meerdere HTML-documenten kunt koppelen. Zo kun je in 1 document de vormgeving voor meedere pagina's beheren en veranderen. Exact dezelfde werking als de Master-pagina's in een InDesign document.

  1. Maak in Dreamweaver een nieuw CSS bestand. Kies in het dialoogvenster voor: Blank Page / CSS
  2. Bewaar dit document direct als layout.css in de map: website_dreamweaver/css.
  3. Sluit nu het CSS-document. Dat komt later weer tevoorschijn.
     
  4. Zet de cursor ergens in index.html (het HTML-bestand).
  5. Koppel het CSS-bestand aan het HTML-bestand via het ketting-symbooltje in het css-styles venster [of in de CC op het plusje naast Sources/Bronnen --> Link existing stylesheet]
  6. Links bovenaan in Dreamweaver staat in het tabblad index.html nu ook de layout.css. Hier kun je switchen tussen de index en de CSS-code. Alle CSS-code wordt nu automatisch in het CSS-document geschreven

Dreamweaver CS 6 & Dreamweaver Creative Suite


STAP 4: website (body) achtergrond instellen

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Sources/Kiezers]
  3. Kies bij Selector Type: TAG [niet in de CC]
  4. Typ bij Selector Name: body[of in de CC bij: Selectors/Kiezers]
  5. Geef de body een background-color of een background-image (patroon)

 

Dreamweaver Creative Suite & Dreamweaver CS 6


STAP 5: ID #div1 (de container) zichtbaar maken met een achtergrondkleur en hoogte

  1. Kijk nu in het css-styles-venster en zorg dat layout_tablet_smartphone.css blauw geselecteerd is
  2. Selecteer #div1 in de lijst
  3. Geef de #div1 een background-color
  4. Zet bij box de min-height op: 500px

STAP 6a: tag header maken

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Kiezers]
  3. Kies bij Selector Type: Tag [niet in de CC]
  4. Typ bij Selector Name: header [of in de CC bij: Selectors/Kiezers]
  5. Geef de header een background-color
  6. Zet bij box de height op: 150px

STAP 6b: tag header invoegen

  1. Plaats de muiscursor in de HTML-code TUSSEN de open- en sluit code van de ID #div1 via de Code-view.
  2. Verwijder de  ...faketekst... die daar staat
  3. Klik in de menubalk op INSERT / LAYOUT OBJECT / DIV TAG [in de CC: INSERT / STRUCTURE / HEADER (koptekst)]
  4. Kies bij TAG: header [niet in de CC]
  5. In de code staat nu: <header> ...faketekst... </header>
  6. Klik en kijk in de Design-view waar nu de tag verschijnt
  7. Indien nodig kun je de div bewerken via het CSS-Styles Venster. Klik daarvoor op de tag-naam.

Bewaar: index.html
Bewaar: layout_tablet_smartphone.css
Bewaar: layout.css

Bekijk het resultaat via Preview (werelbolletje) in de browser

Sleep het browser-venster smaller/breder. Je ziet dat alle blokken netjes meeschuiven.



----->  UPLOAD NU JE WEBSITE via Sitemanagment in Dreamweaver


STAP 7a: tag nav maken (menubalk)

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Kiezers]
  3. Kies bij Selector Type: Tag [niet in de CC]
  4. Typ bij Selector Name: nav [of in de CC bij: Selectors/Kiezers]
  5. Geef de nav een background-color
  6. Zet bij box de min-height op: 25px

STAP7b: tag nav invoegen (menubalk)

  1. Plaats de muiscursor in de HTML-code ACHTER de sluit code van de tag header via de code-view
  2. Klik in de menubalk op INSERT / LAYOUT OBJECT / DIV TAG [in de CC: INSERT / STRUCTURE / NAV (navigation)]
  3. Kies bij TAG: nav [niet in de CC]
  4. In de code staat nu: <nav> ...faketekst... </nav>
  5. Klik en kijk in de Design-view waar nu de tag verschijnt
  6. Indien nodig kun je de div bewerken via het CSS-Styles Venster. Klik daarvoor op de tag-naam.

STAP 8a: tag article maken (float, margin, padding)

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Kiezers]
  3. Kies bij Selector Type: Tag [niet in de CC]
  4. Typ bij Selector Name: article [of in de CC bij: Selectors/Kiezers]
  5. Geef de article een background-color
  6. Zet bij box de width op: 55%
  7. Zet bij box de min-height op: 300px
  8. Zet bij box alle margin (4x) op: 2% (ruimte buiten om het blok)
  9. Zet bij box alle padding (4x) op: 2% (ruimte binnen in het blok, optellen bij de breedte en hoogte)
  10. Zet bij box de float op: left (zorgt dat volgende blokken er naast komen te staan i.p.v. er onder)

Dreamweaver Creative Suite (vul de getallen in uit punt 6-10)

STAP 8b: tag article invoegen

  1. Plaats de muiscursor in de HTML-code ACHTER de sluit code van de tag nav via de code-view
  2. Klik in de menubalk op INSERT / LAYOUT OBJECT / DIV TAG [in de CC: INSERT / STRUCTURE / ARTICLE (artikelen)]
  3. Kies bij TAG: article [niet in de CC]
  4. In de code staat nu: <article> ...faketekst... </article>
  5. Klik en kijk in de Design-view waar nu de tag verschijnt
  6. Indien nodig kun je de div bewerken via het CSS-Styles Venster. Klik daarvoor op de tag-naam.

STAP 9a: tag figure maken (float, margin, padding)

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Kiezers]
  3. Kies bij Selector Type: Tag [niet in de CC]
  4. Typ bij Selector Name: figure [of in de CC bij: Selectors/Kiezers]
  5. Geef de article een background-color
  6. Zet bij box de width op: 30%
  7. Zet bij box de min-height op: 300px
  8. Zet bij box de margin op: 2%
  9. Zet bij box de float op: right (zorgt dat volgende blokken er naast komen te staan i.p.v. er onder)

LET OP: margin = ruimte om een blok heen  |  padding = ruimte binnen een blok (telt op bij de hoogte/breedte)

STAP 9b: tag figure invoegen (float:right;)

  1. Plaats de muiscursor in de HTML-code ACHTER de sluit code van de tag article via de code-view
  2. Klik in de menubalk op INSERT / LAYOUT OBJECT / DIV TAG [in de CC: INSERT / STRUCTURE / FIGURE (figuur)]
  3. Kies bij TAG: figure [niet in de CC]
  4. In de code staat nu: <figure> ...faketekst... </figure>
  5. Klik en kijk in de Design-view waar nu de tag verschijnt
  6. Indien nodig kun je de div bewerken via het CSS-Styles Venster. Klik daarvoor op de tag-naam.

STAP 10a: tag footer maken (clear:both;)

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Kiezers]
  3. Kies bij Selector Type: Tag [niet in de CC]
  4. Typ bij Selector Name: header [of in de CC bij: Selectors/Kiezers]
  5. Geef de header een background-color
  6. Zet bij box de height op: 25px
  7. Zet bij box de clear op: both (heft de float van de voorgaande blokken op)

STAP 10b: tag footer invoegen

  1. Plaats de muiscursor in de HTML-code ACHTER de sluit code van de tag figure via de code-view
  2. Klik in de menubalk op INSERT / LAYOUT OBJECT / DIV TAG [in de CC: INSERT / STRUCTURE / FOOTER (voettekst)]
  3. Kies bij TAG: footer [niet in de CC]
  4. In de code staat nu: <footer> ...faketekst... </footer>
  5. Klik en kijk in de Design-view waar nu de tag verschijnt
  6. Indien nodig kun je de div bewerken via het CSS-Styles Venster. Klik daarvoor op de tag-naam.

Bewaar: index.html
Bewaar: layout.css

Bekijk het resultaat via Preview (werelbolletje) in de browser

Sleep het browser-venster smaller/breder. Je ziet dat alle blokken netjes meeschuiven.



----->  UPLOAD NU JE WEBSITE via Sitemanagment in Dreamweaver


STAP 11a: tekst en HTML stijlen

  1. Selecteer alle tekst in de tag article
  2. Kopieer neptekst van de site: www.lipsum.com
  3. Plak deze via de Design-View in de tag article
  4. Selecteer de tekst
  5. Kies in het PROPERTIES-venster bij Format voor Paragraph

In de code-view staat nu de <p> tag om de tekst.
Doe het bovenstaande ook met een koptekst (heading 1)

De typografie verandert hierdoor wel een beetje, maar kan pas echt worden gestyled zodra er een css-stijl aan wordt gekoppeld.

  1. Klik vanuit de index.html op het plus-symbooltje (css-styles venster)
  2. Kies bij Selector Type: TAG
  3. Typ bij Selector Name: p en klik ok
  4. Geef de p-tag jouw eigen typografie mee (kleur, font, grootte, regelafstand, etc)

Maak ook een stijl aan voor de onderstaande tag's:

  1. <h1>kop 1</h1>
  2. <h2>kop 2</h2>
  3. <h3> ... etc.
  4. <p>paragraaf / alinea</p>
  5. <strong>bold</strong>
  6. <em>cursief</em>
  7. <br />     witregel (geen sluitteken)
  8. <hr>    horizontale lijn (geen sluitteken)
  9. <a href="index.html">link</a>
  10. <img src="images/afbeelding.jpg"> afbeelding (geen sluitteken)
  11. <li></li> lijsten
  12. <ul> <li></li> </ul> Ongesorteerde lijst (bullits)
  13. <ol> <li></li> </ol> Gesorteerde lijst (numbers)

---> MEER HTML TAGS? www.w3schools.com


STAP 11b: tekst binnen een alinea opmaken (CSS stijlen)

METHODE 1

  1. Klik vanuit de index.html op het plus-symbooltje (css-styles venster)
  2. Kies bij Selector Type: Class
  3. Typ bij Selector Name: .accent
  4. Controleer bij Rule Definition: layout.css. (De opmaak komt op de css-pagina). Klik op OK.
  5. Kies een font, kleur, corpsgrootte ed. Klik op OK.
  6. Selecteer nu een regel tekst in article
  7. Kies in het PROPERTIES-venster bij Format voor Paragraph en bij Class voor .accent

In de code-view staat nu de <span class="accent"> tag om het stukje tekst.</span>
In het CSS-stylen venster staat nu ook .accent in de lijst.

METHODE 2

  1. Selecteer een regel tekst in article
  2. Kies in het PROPERTIES-venster de CSS knop
  3. Kies bij Targeted Rule <New CSS rule>
  4. Kies nu een font. Direct wordt het New CSS Rule venster geopend.
  5. Kies bij Selector Type: Class
  6. Typ bij Selector Name: een geschikte naam met een . ervoor. Bijvoorbeeld .accent
  7. Controleer bij Rule Definition: layout.css. (De opmaak komt op de css-pagina)
  8. Klik op OK
  9. Vervolg nu de opmaak met het kiezen van de corpsgrootte en de kleur.

In de code-view staat nu de <span class="accent"> tag om het stukje tekst.</span>
In het CSS-stylen venster staat nu ook .accent in de lijst.

Maak meerdere tekst-accenten (met behulp van Class) aan:

  1. Een woord of regel vet en in een andere kleur
  2. Een woord of regel cursief en in kleur
  3. Probeer zelf ook mogelijkheden uit.

Typografie met Google Webfonts

Open de Dreamweaver Template en plaats daar de Google webfonts in.

  1. Ga naar Google Webfonts
  2. Kies een font en klik op Add to Collection
  3. Klik rechtsonder op USE
  4. Selecteer de gewenste font-variaties (regular / bold / italic)
  5. Kopieer en plak de code Add this code to your website in de HEAD-section van jouw Dreamweaver template.
  6. Plaats in de CSS layout.css bij body de code: font-family: " jou gekozen font ", sans-serif ;
  7. Update de pagina's die aan de template zijn gekoppeld. De typografie staat nu allemaal in het door jou gekozen font.

LET OP: In Dreamweaver kun je je Google webfont niet zien. Dat kan alleen in een browser en met internetverbinding.


----->  UPLOAD NU JE WEBSITE


STAP 12 invoegen van afbeeldingen

  1. Zoek een jpg of png afbeelding en zet deze in de map: images
  2. Klik in Dreamweaver in de index.html op een blok (bijvoorbeeld: figure) waarin je de afbeelding wilt plaatsen
  3. Check of de cursor op de plek staat waar je de afbeelding wilt invoegen via de code-view
  4. Kies: INSERT / IMAGE

De afbeelding verschijnt nu in het door jou geselecteerde blok.
Als de afbeelding te groot of te klein is, dan pas je het formaat in Photoshop aan.

Bij een afbeelding neem je bij verkleinen in Photoshop rekening de maximale grote die je nodig hebt. Dit om de site ook op mobiele netwerken zo snel mogelijk te laden.

Hoe kleiner de bestandsgrootte van de afbeeldingen, hoe sneller de website wordt geladen.

  • Voor beeldvullende foto's is dat vaak 1200px breed.
  • Voor een foto in een tekst is dat ongeveer 300px breed.
  • Zorg dat je de verhoudingen van de foto behoudt.

STAP 13 invoegen van een achtergrondafbeelding

  1. Dubbelklik op de body-tag in het css-styles venster
  2. Kies bij background nu een eigen background-image

LET OP: achtergond-afbeeldingen repeteren standaard. Het wordt dan een patroon. Via de background-repeat-stijl kun je dit uitzetten. Zo bepaalt de background-position-stijl waar de afbeelding in de achtergrond komt te staan. Bijvoorbeeld: background-position: top, center;  of  background-position:fixed; background-size:100%;

TIP: Maak gebruik van transparantie in Photoshop en bewaar de achtergrond afbeelding als PNG-formaat. De afbeelding wordt nu gekleurd door de achtergrondkleur van de body of div


MENU met CSS

STAP 1 tekst-links plaatsen in nav

  1. Zet de cursor in nav en check of de cursor goed staat via de code-view
  2. Typ in de nav de woorden: home   werk   over mij   contact
  3. Selecteer 1 woord en typ in het veld Links (Properties-venster) de bestandsnaam van de pagina waar naar gelinkt wordt.

    home linkt naar: index.html
    werk linkt naar: werk.html
    over mij linkt naar: over_mij.html
    contact linkt naar: contact.html
    Weet je de bestandsnaam nog niet, dan kun je ook een # invullen (neplink)

De woorden in nav zijn nu blauw met een lijn er onder.

STAP 2 tekst-links stijlen tot knoppen

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Bronnen]
  3. Kies bij Selector Type: Compound[niet in de CC]
  4. Typ bij Selector Name: nav a [of in de CC bij: Selectors/Bronnen]
  5. Geef nav a een achtergrondkleur
  6. Zet bij type de text-decoration op: none (geen onderstreping meer)
  7. Zet bij block de text-align op: center (text centreert in het midden van de knop)
  8. Zet bij block de display op: block (knop-achtergrond wordt hiermee altijd zichtbaar, ook als er niet gefloat wordt)
  9. Zet bij box de height op: 27px
  10. Zet bij box de float op: left (zorgt dat volgende knoppen er naast komen te staan i.p.v. er onder)
  11. Zet bij box de margin-left op:  2px (ruimte links buiten om de div)
  12. Zet bij box de margin-right op:2px (ruimte rechts buiten om de div)
  13. Zet bij box de padding-top op: 3px (ruimte boven in de div, optellen bij de hoogte)
  14. Zet bij box de padding-left op: 5px (ruimte links in de div)
  15. Zet bij box de padding-left op: 5px (ruimte rechts in de div)

De blauwe links in het menu zijn nu veranderd in knoppen.

TIP: Je kunt in de achtergrond van een knop ook nog een repeterende afbeelding zetten. Bijvoorbeeld van een gradient-afbeelding die horizontaal repeteert. De knop krijgt dan meer diepte.

TIP: Je kunt de linker en rechter rand van elke knop een witte en zwarte lijn mee geven en de margin op 0 zetten. De randen van de knoppen komen dan tegen elkaar aan en er lijkt dan een mooi 3D-randje te staan.

STAP 3 knop-rollover stijlen

  1. Kijk nu in het css-styles-venster en zorg dat layout.css blauw geselecteerd is
  2. Klik op het plus-symbooltje in het css-styles venster [in de CC bij: Selectors/Bronnen]
  3. Kies bij Selector Type: Compound[niet in de CC]
  4. Typ bij Selector Name: nav a:hover [of in de CC bij: Selectors/Bronnen]
  5. Geef de hover typografie. Experimenteer hier zelf mee.
  6. Geef bij type een andere tekstkleur (color) dan de standaard kleur
  7. Geef de ook een andere achtergrondkleur
  8. Klik op Preview in Browser (wereldbolletje) en je menu-links werken als echte knoppen!

TIP: in plaats van achtergrond-kleur te gebruiken, kun je ook een afbeelding plaatsen. Je ziet dit veel in knoppen met verloopjes of glim-effecten.

STAP 4 geef de knoppen de juiste pagina links mee via Links in het PROPERTIES-venster


Vul de overige pagina's met aanvullende informatie, zoals contactgegevens, favoriete links en foto's van werk.

-----> UPLOAD NU JE WEBSITE