Personal Design Training
Professionele design trainingen bij op maat of privé les van een ervaren professional en vakdocent?
<<< terugHTML basicsCSS basicsdreamweaver basicsdreamweaver xhtml websiteresponsive html5 websiteinteractive code tricswordpress website hosting & webserverwebsite beheer & cms
Download eerst deze map met modules en plaats deze map in de root (website_html).
Met onderstaande code kun je interactie toevoegen aan je responsive webapp. Denk aan een slideshow, fotoalbum met lightbox, sidebar, pageslider, social media, een map en menu-tabs. Kopieer en plak per module de code in index.html
Plaatst een linker kolom, die dmv een knop getoond of verborgen kan worden.
Plaatst een slideshow die foto's kiest uit de images/zoom map.
Plaatst SocialMedia links en share-knoppen. Om de juiste SocialMedia-logo's maakt dit script gebruik van FontAwesome. Voeg, net als met de Google Webfonts link, deze link toe in de HEAD-section van index.html"
En vervolgens in de BODY deze code op de plek waar de SocialMedia moeten komen:
Plaatst een fotoalbum met Lightbox (fotovergroting) en haalt de foto's automatisch op uit de map: images/thumb en voor uitvergroten uit images/zoom. Zorg wel voor dezelfde fotonaam in de map thumb en zoom. Maak de foto's in de map thumb kleiner (264px breed).
Plaatst op de plek van het HTML-formulier nu een PHP-contactformulier. Dit formulier werkt alleen op een webserver met PHP. Dus eerst uploaden, om te testen!
NB: pas in de php-code je naam en e-mailadres aan om het formulier naar jouw e-mail adres te laten verwijzen.
Plaatst een pageslider waarmee binnen een pagina, geswiped kan worden naar andere pagina's. Werkt ook met Touchscreen.
Plaatst een afbeelding met knoppen, selectform en een rollover-infotekst. De achtergrond kan bijvoorbeeld een plattegrond zijn.
Plaatst een menupanel met tabs binnen een pagina. Hierdoor verschijnt er bij klikken op een tab nieuwe informatie.
Bekijk de website met interactiviteit
CushyCMS is een gratis online Tekstbeheer dat je aan een website kunt koppelen. Hierdoor kunnen de teksten op je website zonder code gewijzigd worden. Door bij elke tekst of titel de class="cushycms" te plaatsen en vervolgens via de CushyCMS-website je site en webpagina's te koppelen, worden de teksten in een teksteditor bewerkbaar.
Kijk op de CushyCMS website voor meer informatie. Alle modules, hierboven zijn al voorzien van deze classes.