Spry Framework Dreamweaver CS3
Met de komst van Dreamweaver CS3 is er een mooie feature in het al zeer uitgebreide pakket bijgekomen, namelijk het Spry Framework. Het Spry Framework is een collectie van toepassingen samengesteld met Ajax, CSS en Javascript. Nu is het zeer makkelijk om bijvoorbeeld een horizontaal of verticaal uitklapbaar menu te maken. Je bent er op enkele muisklikken vanaf. Het is ook mogelijk om alle standaardinstellingen aan te passen zoals kleur, achtergrond, hover effecten, enz.
Het Spry Framework voldoet aan de web standaarden en is compatibel in alles browsers. De ingevoegde toepassingen zullen in zowel in Internet Explorer, Firefox, Opera,… op dezelfde manier werken.
Het Spry Framework is een zeer uitgebreid pakket. Hier zullen enkele voorbeelden besproken en getoond worden aan de hand van een voorbeeld. Zo is het mogelijk om met enkele muisklikken een menu, accordeon, tabs en nog veel meer in te voegen in je website. Voor de gevorderde gebruiker gaat het Spry Framework veel verder dan deze voorbeelden. Zo is het mogelijk om met XML te werken, je formulier te valideren en nog veel meer.
Hier enkele standaardvoorbeelden die gemaakt zijn in Dreamweaver CS3 met het Spry Framework. Deze voorbeelden zijn gemaakt zonder ook maar enige eigenschap in Dreamweaver te veranderen. Later volgen de tutorials over het aanmaken van deze voorbeelden. Telkens er een tutorial klaar is zal onderstaand voorbeeld er naartoe gelinkt worden.
Spry menu
Een horizontaal of verticaal uitklapbaar menu maken is nu nog maar enkele muisklikken verwijderd. Dit menu werkt in alle browsers en is uitbreidbaar naar nog meerdere submenu’s. Allemaal aan te passen in je ‘eigenschappen’ werkbalk. Dit menu is ook gemaakt aan de hand van CSS.
Bekijk hier een voorbeeld van een Spry menu gemaakt in Dreamweaver CS3.
Spry collapsible panel
De Spry collapsible panel doet me denken aan de Flash animatie die je regelmatig op het web ziet verschijnen. De bezoeker kan op een link klikken waardoor een paneel opent met content in. Het open en dicht klikken van dit paneel kan gekoppeld worden aan een animatie. Het paneel zal dan ofwel in een vloeiende beweging of in één keer open of dicht gaan.
Bekijk hier een voorbeeld van een Spry collapsible panel gemaakt in Dreamweaver CS3.
Spry accordion
Met Spry accordion heb je een mooie mogelijkheid om veel content op een professionele manier te verwerken in je pagina. Spry accordeon is gemaakt aan de hand van panelen die de bezoeker kan open of dicht klikken. Telkens er één geopend wordt zal het voorgaande terug sluiten. er zal dus altijd maar één paneel geopend zijn.
Bekijk hier een voorbeeld van een Spry accordion gemaakt in Dreamweaver CS3.
Spry tabs
Spry tabs kan je vergelijken met Spry accordeon maar dan in de horizontale richting. De gebruiker kan navigeren tussen de verschillende tabs met telkens andere content in verwerkt.
Bekijk hier een voorbeeld van een Spry tabs gemaakt in Dreamweaver CS3.
Zo, dat was een zeer kleine greep uit het Spry Framework van Dreamweaver CS3. In de loop van de volgende weken zullen bovenstaande voorbeelden aan de hand van een tutorial uitgewerkt worden.
Nog vragen? Bezoek het forum...
:
Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.
Comments
Geweldige site heb je/jullie hier!! Ik heb er al veel in gelezen en zal er vast nog meer in “neuzen”.
Groet,
[...] of niet. Meerdere submenu’s, je hebt er nog maar enkele muiklikken voor nodig. In de topic Spry Framework Dreamweaver CS3 werd de functie van deze toepassing eerder al aangehaald en met enkele voorbeelden getoond. Bekijk [...]
Bedankt punt! Hoop dat je er veel nuttige dingen kan uithalen en veel mee zal leren… Dan is de opzet van deze website geslaagd.
Groetjes
Cicco
[...] gaan we verder met het Spry Framework hoofdstuk en is de Spry Accordion aan de beurt. Een Spry accordion is een ideale manier om veel content op [...]
[...] verschillende malen is het Spry Framework van CS3 en zijn functies hier aangehaald. Ditmaal gaan we het hebben over de visuele aanpassingen van [...]
[...] het hoofdstuk Spry Framework Dreamweaver CS3 helemaal af te ronden blijft er nog 1 tutorial over, namelijk de Spry tabs. Met Spry tabs kan je op [...]
ey ik heb effe een vragje ben nieuw met dit programa maar vroeg me af hoe je een form maakt zo als hier te zien is.
kan imand mij daar bij helpen. groet
hallo cicco
ik bedoel zoon forum waar we nu mee praten.
het is voor een sort gasenboek op een website van me die ik aan het maken ben. (ben net begonnen met dreamweaver cs3). en dat gaat al aardig maar niet perfect
Hallo,
Ik heb het spry menu gebruikt voor de website die ik aan het maken ben maar zie dat het niet goed werkt in i.e. De tabs nemen het formaat aan van de tekst en het staat niet meer alleen onder elkaar maar ook naast elkaar. Bovendien klapt hij niet uit. In Firefox heb ik geen probleem. Klik ik in Dreamweaver op de wereld bol om te kijken hoe het eruit ziet dan staat hij in bijde browsers goed. Zet ik hem op het web dan gaat het mis.
Kan iemand mij hier verder mee helpen?
gr. Annette
Hallo Annette,
Om je verder te helpen hebben we de link nodig naar het het menu.
Heb je werkelijk alle bestanden online gezet? Mapje SpryAssets?
Groetjes
Cicco
Voor ik naar het menu kijk zie ik al vanalles mislopen… apDiv7 zit in apDiv4 en 7 is breder dan 4. Daarbinnen zit dan ook nog eens je menu dat breder is dan de div. Kan niet goed lopen hé.
Zorg eerst eens dat je divs in orde zijn voor we aan het menu beginnen. Een geneste div kan onmogelijk breder zijn dan zijn parent div.
Groetjes
Cicco
Is het mogelijk om een spry menu te kopieëren en in een andere pagina te plakken zodanig dat het sprymenu ook goed fuctioneert?
Hallo
Ik heb een horizontaal tabmenu met spry gemaakt.
Als ik hem in voorvertonen zie, staat alles onder elkaar.
Ik moet eerst de blokkade opheffen van de activeX besturingselementen. Hierna functioneert alles goed.
Echter op de externe website geplaatst, zie ik later in internet explorer alles weer onderelkaarstaan.
Wat te doen?
Bedankt, groet, hans
goede site dit!
maar een vraagje, ik wil graag mijn horizontale menu gecentreerd hebben. weet iemand hoe ik dat kan doen?
ik ben al aardig aan het zoeken geweest maar ik kan het niet vinden:(
Gr. Gijs
[...] we in de post over het Spry Framework Dreamweaver CS3 beloofd komt hier de uitleg van één van deze handige functies. Vandaag beginnen we met de Spry [...]