Dreamweaver CS6 voor Dummy's Cheat Sheet - dummies

door Janine Warner

Als u nog niet bekend bent met webontwerp of al jaren HTML-pagina's maakt, is Adobe Dreamweaver CS6 het ideale hulpmiddel voor het bouwen van uw website. In versie CS6 vindt u een nieuw welkomstscherm en ondersteuning voor het nieuwste in Cascading Style Sheets (CSS3) en HTML5. Dreamweaver is een populair programma bij professionele webontwerpers, evenals mensen die sites willen bouwen voor hun hobby's, clubs, gezinnen en kleine bedrijven.

Het welkomstscherm van Adobe Dreamweaver CS6

De gebruiksvriendelijke grafische interface en krachtige lijst met functies van Dreamweaver maakt het een populaire keuze bij professionele webontwerpers, evenals hobbyisten. Bij elke nieuwe versie biedt Dreamweaver CS6 nieuwe functies, maar u zult nog steeds het vertrouwde welkomstscherm vinden om u op weg te helpen.

Dreamweaver CS6: tekstschaduwen toevoegen met CSS3

In Dreamweaver CS6 kunt u uw ontwerpen verbeteren en uw pagina's meer diepte geven door tekstschaduwen toe te voegen met CSS3-regels, de nieuwste webtechnologie. Als u tekstschaduwen toevoegt, zijn uw woorden gemakkelijker leesbaar, vooral als uw ontwerp een complexe achtergrond heeft of als uw achtergrond- en tekstkleuren geen contrast vertonen.

tegoed: Paul Gual, istockphoto. com

Dreamweaver CS6 biedt ondersteuning voor CSS3-tekstschaduwen wanneer u het deelvenster Eigenschappen in het deelvenster CSS-stijlen gebruikt. U kunt klasse- of ID-stijlen maken met tekstschaduwen en u kunt tekstschaduwen toevoegen aan bestaande HTML-elementen door een labelstijl te definiëren, zoals de stijl van kop 1 die in de afbeelding wordt gebruikt.

De CSS3-code die die tekstschaduw maakt, is

h1 {text-shadow: 2px 2px 3px # 000;}

De getallen in de code geven aan dat de tekstschaduw 2 pixels naar rechts moet uitbreiden en 2 pixels onder de tekst met een vervaging van 3 pixels. Bovendien wordt de schaduw gemaakt met de kleur zwart, opgegeven door de afgekorte hexadecimale kleurcode # 000.

Wanneer u regels voor tekstschaduwen maakt, kunt u maximaal vier waarden opgeven:

• Horizontaal en verticaal: De eerste twee getalswaarden zijn vereist en geven de horizontale en verticale verschuivingen aan: de afstand die de slagschaduw zich onder de afstand uitstrekt tekst (horizontaal) en rechts van de tekst (verticaal).

• Vervagingsradius: De derde waarde geeft de mate van onscherpte in de schaduw aan. Als u de blur-straal niet opneemt, is de standaardwaarde 0, waardoor de schaduw als een effen kleur wordt weergegeven.

• Kleur: De vierde waarde geeft de kleur van de schaduw aan en kan worden gedefinieerd met een hexadecimale kleurcode of een RGBa-kleurcode.

U kunt een tekstschaduw toevoegen met behulp van het eigenschappenvenster onderaan in het deelvenster CSS-stijlen, zoals in de afbeelding wordt weergegeven.Hiertoe gaat u als volgt te werk:

1. Klik op de koppeling Eigenschap toevoegen aan de linkerkant van het deelvenster CSS-stijlen.

2. Voer de CSS3-stijlregelnaam, tekstschaduw in of selecteer de stijlregel in de vervolgkeuzelijst.

   Nadat de naam links wordt weergegeven, verschijnt rechts een klein pijltje.

3. Klik om de pijl rechts van de tekstschaduw te selecteren.

   Er verschijnt een venster.

4. Voer de X- en Y-verschuivingen in, vervaag de straal en kleur.

Websites en bronnen voor webontwerpers

Ervaren webontwerpers - ongeacht of ze Adobe Dreamweaver of andere webontwerpsoftware gebruiken - verwijzen vaak naar online bronnen om hun vaardigheden bij te houden en speciale functies aan hun websites toe te voegen. Deze lijst maakt het voor u gemakkelijk om enkele websites en online bronnen te vinden die u kunnen helpen met uw webontwerpprojecten.

• Audio- en videohostingservices:

  • YouTube

  • Vimeo

  • SoundCloud

• Bloggen en CMS-programma's

  • Blogger

  • Joomla

  • MovableType

  • TypePad

  • Tumblr > WordPress

  • Services voor delen van sociale media

• Voeg dit toe

  • Lockerz Share

  • Verkeersrapportageservices:

• Google Analytics

  • Yahoo! Webanalyse

  • HubSpot

  • Populaire webbrowsers:

• Apple Safari

  • Google Chrome

  • Microsoft Internet Explorer

  • Mozilla Firefox

  • Opera

  • Webbrowsertestservices:

• Adobe Browser Lab

  • BrowserShots

  • Cross Browser Testing

  • Browser Sandbox from Spoon (voorheen Xenocode)

  • Dreamweaver-, CSS- en webontwerpresources:

• Dreamweaver Developer Center

  • Web Design Training bij DigitalFamily. com

  • W3-conversies HTML5- en CSS3-bronnen

  • Een lijst uit elkaar