Handboek Annuleren

Informatie over hoe u uw pagina met CSS kunt opmaken

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen
  19. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

 

Verken de basisstructuur van een CSS-lay-out en leer hoe u in Dreamweaver pagina's en inhoud ontwerpt met behulp van CSS.

Over de CSS-paginalay-out

Voor de indeling van een CSS-pagina wordt de indeling Cascading Style Sheet gebruikt in plaats van HTML-tabellen of frames voor het ordenen van de inhoud van een webpagina. Het basiselement van de CSS-lay-out is de div-tag, een HTML-tag die in de meeste gevallen fungeert als een container voor tekst, afbeeldingen en andere pagina-elementen. Wanneer u een CSS-lay-out maakt, plaatst u div-tags op de pagina, voegt u er informatie aan toe en plaatst u ze in bepaalde posities. In tegenstelling tot cellen in een tabel die ergens binnen de rijen of kolommen van een tabel moeten bestaan, kunnen div-tags overal op een webpagina worden aangebracht. U kunt div-tags absoluut plaatsen (door x- en y-coördinaten op te geven) of relatief plaatsen (door de positie ten opzichte van de huidige positie op te geven). U kunt div-tags ook plaatsen door floats, opvullingen en marges op te geven; de voorkeursmethode volgens de moderne webstandaarden.

Over de structuur van de CSS-paginalay-out

Alvorens met deze sectie verder te gaan, dient u bekend te zijn met de basisconcepten van CSS.

Het basiselement van de CSS-lay-out is de div-tag, een HTML-tag die in de meeste gevallen fungeert als een container voor tekst, afbeeldingen en andere pagina-elementen. Het volgende voorbeeld toont een HTML-pagina met drie aparte div-tags: één groot “containerelement” en twee andere elementen, een zijvak-element en een element voor de hoofdinformatie binnen het containerelement.

A. Containerelement B. Sidebar div C. Main Content div 

Hier volgt de codering voor alle drie div-tags in de HTML:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

In het bovenstaande voorbeeld is er geen “stijl” verbonden aan de div-tags. Als er geen CSS-regels zijn opgegeven, worden alle div-tags met hun informatie op de standaard plaats op de pagina aangebracht. Als echter elke div-tag van een unieke id is voorzien (zoals in het bovenstaand voorbeeld), kunt u de id's gebruiken om CSS-regels te maken zodat deze (als ze worden toegepast) de stijl en de positionering van de div-tags kunnen wijzigen.

De volgende CSS-regel, die zich in de kop van een document of in een extern CSS-bestand kan bevinden, geeft de stijlregels voor de eerste div-tag (het “containerelement”) op de pagina:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

De regel #container past een stijl toe op de container-div-tag waardoor het een breedte krijgt van 780 pixels, een witte achtergrond, geen marge (vanaf de linkerkant van de pagina), een doorgetrokken zwarte rand van 1 pixel en tekst die links is uitgelijnd. Het resultaat van toepassing van de regel op de container-div-tag is als volgt:

Container div-tag, 780 pixels, no margin

A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel 

Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-tag:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

Volgens de regel #sidebar krijgt de sidebar div-tag een breedte van 200 pixels, een grijze achtergrond, een opvulling boven en onder van 15 pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. (De standaardvolgorde voor padding is van rechtsboven naar linksonder.) Daarnaast wordt de sidebar div-tag gepositioneerd met float: left, een eigenschap waardoor de sidebar div-tag naar de linkerkant van de container div-tag wordt geduwd. Het toepassen van de regel op de sidebar div-tag heeft het volgende resultaat:

Sidebar div, links zwevend

A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels 

Tot slot voltooid de CSS-regel voor de container div-tag de lay-out:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div. Daarnaast zorgt de regel voor een ruimte van 20 pixels aan de rechter-, onder- en linkerkant van de main content-div. Het toepassen van de regel op de mainContent-div heeft het volgende resultaat:

De volledige code ziet er zo uit:

Main Content div, linkermarge van 250 pixels

A. 20 pixels opvulling links B. 20 pixels opvulling rechts C. 20 pixels opvulling onder 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>
Opmerking:

De voorbeeldcode hierboven is een vereenvoudigde versie van de code waarmee de lay-out met twee kolommen en vaste zijbalk wordt gemaakt als u een nieuw document maakt met de vooraf ontworpen lay-outs die bij Dreamweaver worden geleverd.

Een pagina met een CSS-lay-out maken

Bij het maken van een nieuwe pagina in Dreamweaver kunt u een pagina maken met een CSS-lay-out. Dreamweaver wordt geleverd met zestien verschillende CSS-lay-outs waaruit u kunt kiezen. Bovendien kunt u eigen CSS-lay-outs maken en deze opnemen in de configuratiemap zodat ze verschijnen als lay-outkeuze in het dialoogvenster Nieuw document.

Een pagina met een CSS-lay-out maken

  1. Selecteer Bestand > Nieuw.
  2. In het dialoogvenster Nieuw document selecteert u de categorie Lege pagina. (Dit is de standaardkeuze.)
  3. Als Paginatype selecteert u het soort pagina dat u wilt maken.
    Opmerking:

    U moet een HTML-paginatype kiezen voor de lay-out. U kunt bijvoorbeeld HTML, ColdFusion®, PHP, enzovoort selecteren. U kunt geen ActionScript™-, CSS-, Library Item-, JavaScript-, XML-, XSLT- of ColdFusion Component-pagina met een CSS-indeling maken. De paginatypes in Andere categorie van het dialoogvenster Nieuw document kunnen eveneens geen CSS-paginalay-outs bevatten.

  4. Bij Lay-out kiest u de CSS-lay-out die u wilt gebruiken. U kunt kiezen uit zestien verschillende lay-outs. Het venster Beeld toont de lay-out en geeft een korte omschrijving van de gekozen lay-out.

    De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:

    Vast

    De kolombreedte wordt opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de browser of de tekstinstellingen van de bezoeker van de site.

    Vloeibaar

    De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker van de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt, maar wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.

  5. Selecteer een documenttype in het pop-upmenu DocType.
  6. Selecteer een locatie voor de CSS van de lay-out uit Lay-out CSS in het pop-upmenu.

    Toevoegen aan kop

    Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.

    Nieuw bestand maken

    Voegt CSS voor de lay-out toe aan een nieuwe externe CSS stylesheet en voegt de nieuwe stylesheet bij de pagina die u maakt.

    Koppeling naar bestaand bestand

    Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die nodig zijn voor de indeling. Deze optie is vooral handig wanneer u dezelfde CSS-indeling (de CSS-regels die zich in één bestand bevinden) voor meerdere documenten wilt gebruiken.

  7. Voer een van de volgende handelingen uit:
    • Als u in het pop-upvenster CSS-lay-out hebt gekozen voor Toevoegen aan kopgebied (de standaardoptie), klikt u op Maken.
    • Als u in het pop-upvenster Lay-out CSS hebt gekozen voor Nieuw bestand maken, klikt u op Maken en voert u de naam in van het nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als.
    • Als u in het pop-upvenster CSS-lay-out hebt gekozen voor Koppeling naar bestaand bestand, voegt u het externe bestand toe in het tekstvak CSS-bestand koppelen door op het pictogram Stijlpagina toevoegen te klikken, het dialoogvenster Externe stijlpagina koppelen in te vullen en op OK te klikken. Wanneer u klaar bent, klikt u in het dialoogvenster Nieuw document op Maken.
    Opmerking:

    Wanneer u de optie Koppeling naar bestaand bestand selecteert, moet het bestand dat u opgeeft reeds de regels bevatten voor het CSS-bestand dat erin is opgenomen.

    Wanneer u de CSS-lay-out in een nieuw bestand plaatst of koppelt naar een bestaand bestand, koppelt Dreamweaver het bestand automatisch aan de HTML-pagina die u aan het maken bent.

    Opmerking:

    Voorwaardelijk commentaar voor Internet Explorer (CC's, conditional comments), dat kan helpen om weergaveproblemen in IE op te lossen, blijft ingesloten in het kopgebied van de nieuwe CSS-lay-out, ook als u Nieuw extern bestand of Bestaand extern bestand selecteert als locatie voor uw CSS-lay-out.

  8. (Optioneel) U kunt ook CSS-stijlpagina's aan uw nieuwe pagina koppelen (los van de CSS-indeling) wanneer u de pagina maakt. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand koppelen en selecteer een CSS-stijlpagina.

    Raadpleeg het artikel Automatisch een stijlpagina toevoegen aan nieuwe documenten (Engels) van David Powers voor een gedetailleerd overzicht van dit proces.

Eigen CSS-lay-outs toevoegen aan de keuzelijst

  1. Maak een HTML-pagina die de CSS-lay-out bevat die u wilt toevoegen aan de keuzelijst in het dialoogvenster Nieuw document. De CSS voor de lay-out moet zijn opgenomen in de kopregel van de HTML-pagina.
    Opmerking:

    Om uw eigen CSS-lay-out consistent te houden met de andere lay-outs die worden geleverd bij Dreamweaver, moet u uw HTML-bestand opslaan met een extensie .htm.

  2. Voeg de HTML-pagina toe aan de map CS5\Configuration\BuiltIn\Layouts van Adobe Dreamweaver.
  3. (Optioneel) Voeg een afdrukvoorbeeld van uw lay-out (bijvoorbeeld een .gif- of een .png-bestand) toe aan de map CS5\Configuration\BuiltIn\Layouts van Adobe Dreamweaver. De standaard afbeeldingen die bij Dreamweaver zijn meegeleverd zijn .png-bestanden van 227 pixels breed op 193 pixels hoog.
    Opmerking:

    Geef uw afdrukvoorbeeld dezelfde bestandsnaam als u HTML-bestand zodat u ze gemakkelijk kunt terugvinden. Als u HTML-bestand bijvoorbeeld mijnLayout.htm is genoemd, sla uw afdrukvoorbeeld dan op onder de naam mijnLayout.png.

  4. (Optioneel) Maak een opmerkingenbestand voor uw eigen lay-out door de map CS5\Configuration\BuiltIn\Layouts\_notes van Adobe Dreamweaver te openen. Kopieer en plak een bestaand opmerkingenbestand en dezelfde map en hernoem de kopie voor uw eigen lay-out. Zo kunt u bijvoorbeeld het bestand oneColElsCtr.htm.mno kopiëren en het hernoemen naar mijnLayout.htm.mno.
  5. (Optioneel) Nadat u een opmerkingenbestand hebt gemaakt voor uw eigen lay-out, kunt u het bestand openen en geeft u de lay-outnaam, de omschrijving en het afdrukvoorbeeld aan.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?