Hoe de stijlen in een CSS-lay-out in Dreamweaver - dummies

Nadat je een nieuwe pagina hebt gemaakt met een CSS-lay-out in Dreamweaver, heb je een schijnbaar oneindig aantal opties om deze te bewerken, maar eerst u moet bepalen welke stijlen in de stijlpagina overeenkomen met de elementen die u wilt bewerken.

Zoals u zich waarschijnlijk kunt voorstellen, kunt u de stijlen in een CSS-lay-out op verschillende manieren bewerken om uw eigen ontwerpen te maken.

Nadat u de bestaande stijlen hebt aangepast om het basisontwerp van de pagina naar wens te krijgen, kunt u zoveel aanvullende stijlen maken als u wilt.

De beschikbare stijlen bekijken en basisbewerkingen uitvoeren

U kunt dezelfde basisinstructies gebruiken met elke CSS-lay-out die is opgenomen in Dreamweaver. Ga als volgt te werk om stijlen in een CSS-lay-out te bewerken:

1. Open een paginabestand dat is gebaseerd op een CSS-lay-out van Dreamweaver en kies Venster → CSS-stijlen (of klik op het tabblad CSS-ontwerp om het deelvenster uit te vouwen).

   Het CSS Designer-paneel wordt geopend of vergroot.

2. Klik om de naam van de stijlpagina te selecteren in het paneel Bronnen bovenaan CSS Designer.

   Alle stijlen die aan de nieuwe pagina zijn gekoppeld, worden weergegeven in het deelvenster Selectors.

   

3. Selecteer de naam van elke stijl die wordt vermeld in het paneel CSS Designer Selectors.

   De bijbehorende CSS-regels die voor de stijl zijn gedefinieerd, worden weergegeven in het deelvenster Eigenschappen onder aan het deelvenster CSS-ontwerp. Door de lijst met stijlen te klikken en de bijbehorende regels te bekijken, is een goede manier om snel een overzicht te krijgen van het ontwerp en om te zien waar de verschillende opmaakopties voor pagina's zijn opgeslagen.

De HTML5-header,. nav- en footer-tags besturen de hoofdgedeelten van de pagina. De kopstijl bevat bijvoorbeeld een regel die de achtergrondkleur groen maakt. Als u de kleur van het koptekstgedeelte boven aan de pagina wilt wijzigen, wijzigt u de achtergrondkleur in de kopregel.

Paginabredinstellingen bewerken

Ga als volgt te werk om pagina-brede instellingen te bewerken, zoals de achtergrondkleur van de pagina of het hoofdlettertype, de grootte en de kleur van de tekst die op de hele pagina wordt gebruikt:

1. Selecteer in het deelvenster CSS-ontwerpselectoren de stijl met de naam body.

   De eigenschappen die zijn gedefinieerd in de geselecteerde stijlregel worden weergegeven in het paneel Eigenschappen.

   

2. Klik op het pictogram T boven in het venster Eigenschappen en wijzig of voeg het gewenste lettertype en andere tekstinstellingen toe.

   U kunt het lettertype, de tekengrootte, de stijl en het gewicht van het lettertype wijzigen. Wijzig de lijnhoogte om de afstand tussen tekstregels te wijzigen.

3. Ga naar het gedeelte Achtergrond van het paneel Eigenschappen en gebruik de kleurenbron in het veld Achtergrondkleur om een ​​kleur voor de volledige achtergrond van de pagina op te geven.

   U kunt ook een hexadecimale kleurcode invoeren in het veld Achtergrondkleur of de pipet gebruiken om elke kleur te samplen. Om een ​​achtergrondafbeelding toe te voegen, klikt u in het veld URL in het gedeelte Achtergrond en vervolgens op de knop Bladeren die verschijnt en selecteert u de afbeelding die u als achtergrond wilt gebruiken. Gebruik de pictogrammen Achtergrond herhalen om op te geven hoe de achtergrondafbeelding op de pagina moet worden herhaald.

4. Breng andere wijzigingen of toevoegingen aan de stijlregel aan.

Wijzigingen in stijlregels in het venster Eigenschappen worden automatisch opgeslagen en toegepast op inhoud die met de regel is opgemaakt.

Inhoudsgebieden aanpassen

Ga als volgt te werk om de breedte of andere instellingen van de hoofdinhoudsgebieden, die de algehele grootte van de pagina en de koptekst, voettekst en zijbalk regelen, te wijzigen:

1. de breedte van het hele hoofdontwerpgebied:

   1. Klik op de. containerstijl in het deelvenster Selectors van het deelvenster CSS-ontwerper.

      De eigenschappen van de. containerstijl wordt weergegeven in het venster Eigenschappen, waar u ook de stijl kunt bewerken.

   2. Wijzig het formaat in het veld Breedte of typ een nieuw nummer voor de gewenste paginabreedte.

      De breedte van het paginaontwerp wordt automatisch gewijzigd op basis van het formaat dat u hebt ingevoerd. Wanneer u de breedte van de. In de containerstijl wijzigt u de breedte van het hele ontwerp, omdat alle tags en andere elementen zijn opgenomen in de indeling met de. containerstijl - en ze zijn allemaal klaar om uit te breiden om het te vullen. container.

2. Als u de grootte van het inhoudsgebied van de pagina wilt wijzigen, selecteert u de gewenste stijl. inhoud en specificeer de grootte en andere opties die u wenst in het paneel Eigenschappen.

   Als u de breedte van het inhoudsgebied in een lay-out met een zijbalk wijzigt, moet u ook de breedte van de zijbalk wijzigen.

3. Als u de achtergrondkleur van een stijl op de pagina wilt wijzigen, klikt u op de naam van de overeenkomende stijl en wijzigt u de instellingen in het gedeelte Achtergrond van het venster Eigenschappen.

   In de CSS-lay-outs in Dreamweaver is de zijbalk bijvoorbeeld gedefinieerd in een stijl. sidebar1. Dus, om de achtergrondkleur te veranderen, zou je klikken. sidebar1 in het deelvenster Selectors, selecteer de categorie Background in het paneel Properties en selecteer de gewenste kleur. Evenzo, om de achtergrondkleur van de kop te wijzigen, selecteert u de stijl met de naam van de kop in het paneel Selectors en gebruikt u de kleurenbron.

   

4. Een afbeelding toevoegen aan de koptekst:

   1. Selecteer de plaatsaanduiding met het label Logo invoegen en druk op de toets Delete of Backspace.

   2. Kies Invoegen → Afbeelding → Afbeelding en selecteer een afbeelding met het dialoogvenster Afbeelding selecteren.

5. Tekst vervangen en afbeeldingen invoegen in de zijbalk en in de hoofdinhoudsgebieden.

   U kunt tekst toevoegen en vervangen en afbeeldingen invoegen op elke pagina die is gemaakt met een CSS-lay-out, net zoals u op een andere webpagina zou doen.

6. Kies Bestand → Alles opslaan om de pagina en stijlen op te slaan.