Heb je tijdens het maken van een website er al eens opgelet hoeveel code je elke keer opnieuw type die bijna bij elke website opnieuw en opnieuw terug komt. Ik wel en ik kan je verzekeren dat je veel tijd verliest door elke keer opnieuw en opnieuw diezelfde code in te typen.

Dankzij dit artikel ga ik je verlossen van dit probleem. In Dreamweaver kan je blokken code die je heel vaak gebruikt opslaan in snippets, als je die bepaalde code dan nog eens nodig hebt kan je deze met een dubbeleklik op het scherm toveren.
Deze snippets kan je dan nog eens gaan verdelen in verschillende mappen zodat je verschillende snippets voor CSS, Html, PHP … mooi geordend zijn.

Een snippet aanmaken

Om het snippets menu te vinden ga je aan de rechterkant van je Dreamweaver scherm naar Files > Snippets. Als je het onderdeel Files niet vind druk dan op Shift+F9 of ga naar Windows > Snippets. Nu zie je al een lijst met standaard categorieën. Als je zo’n categorie opent kan je alle snippets zien die er standaard al aanwezig zijn in Dreamweaver.

Om maar meteen onze handen vuil te maken ga je eerst een categorie aanmaken. Dat doeje  door  in het snippets-tab rechtermuisknop te klikken en vervolgens kies je voor New Folder. Noem deze folder bijvoorbeeld Lorem Ipsum.

Iets wat je tijdens het maken van een website vaak nodig hebt is dummie tekst. Dus gaan we een snippet aanmaken die een paragraaf invoegt met wat dummie tekst.
Klik met je rechtermuisknop op de categorie die je juist hebt aangemaakt en kies voor New Snippet. Vul bij name Paragraph in en kies bij Snippet type voor Insert block.

Bij het andere type, Wrap selection kan je code ingeven bij Insert before en Insert after en als je dan tekst selecteerd en je druk op de snippet zal de code respectievelijk voor en achter de geselecteerde tekst gezet worden.

Bij Insert code zet je het volgende:

0

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</p>

Bij Preview type kies je of je de preview van de snippet als Design view of als Code view wilt bekijken.  Meestal is de Design view het handigste.

Druk vervolgens op OK en dan zal je nieuwe snippet in de Lorem Ipsum map staan.

Om deze nu uit te testen kan je een nieuw html document aanmaken. Vervolgens dubbelklik je op de Paragraph snippet en zal er een paragraaf met dummie tekst toegevoegd worden aan je pagina.

Sneltoetsen gebruiken

Als je bepaalde snippets hebt die je heel vaak gebruikt kan je deze ook nog een sneltoetsen combinatie meegeven. Om dit te doen klik je rechtermuisknop op een willekeurige snippet en kies je voor Edit Keyboard shortcuts.
Kies bij Commands voor Snippets en selecteer de snippet waar je een toetsencombinatie aan wilt vasthangen. Ga vervolgens met je cursor in het Press key veld staan en druk de toetsencombinatie in die je wilt koppelen. Nu krijg je normaal een melding als deze:

Druk op OK en geef een naam in die je wilt koppelen aan je sneltoetsen. Bekijk dit maar als een soort groep waaronder je je sneltoetsen gaat onderbrengen. Zo kan je bijvoorbeeld verschillende sneltoets profielen aanmaken.
Druk nogmaals op OK.
Als je nu onder de snippets-tab gaat zien kan je meteen zien welke sneltoets je aan welke snippet hebt gekoppeld.

Welke snippets gebruik ik

Hier enkele voorbeelden van snippets die ik gebruik.

• Lorem ipsum list menu
• Lorem ipsum headers
• CSS Reset
• CSS voor een 3 kolommen layout
• HTML voor een 3 kolommen layout
• Tabel met contactgegevens van mijn bedrijf

Video voorbeeldje

In deze korte video laat ik je zien hoe snel ik een CSS basis 3 kolommen layout opzet dit met behulp van snippets.

Conslusie

Als je de snippets op een goede manier gebruik kan je hier heel wat tijd mee besparen en op professioneel vlak zelfs heel wat geld. Dankzij het gebruik van snippets doe ik bijvoorbeeld over het bouwen van een basis 3 kolommen website 5 minuten terwijl ik er zonder snippets gemakkelijk een halfuur tot een uur mee bezig was.

Dit artikel delen: