Spry Tabs – Dreamweaver CS3
Om 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 een mooie en geordende manier veel informatie onder brengen in verschillende tabs
Bekijk hier een voorbeeld van een Spry tabs gemaakt in Dreamweaver CS3.
We gaan via Insert -> Spry -> Spry Tabbed Panels en zien hetvolgende verschijnen op het scherm :
Voor de zekerheid saven we nu de pagina en Dreamweaver stelt u de volgende vraag :
Dreamweaver vraagt hiermee of hij de map SpryAssets met de bijbehorende files in je directorie mag plaatsen. We drukken ok OK.
Als we de Spry Tabbed Panel aanklikken in Dreamweaver verschijnt onderaan hetvolgende properties paneel in Dreamweaver :
Panels :
+ - : Het plus en min teken zijn om tabs bij te maken of te verwijderen.
Default panel : Hier kan je meegevens welke tab standaard open moet staan bij het openen van de pagina.
Om in Dreamweaver zelf van tab te kunnen veranderen beweeg je met je muis over de tab in zie je een oog verschijnen :
Klik deze aan om de gewenste tab te activeren. Dit om bijvoorbeeld tekst in de juiste tab te kunnen zetten.
:
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
Hoi,
Ik had een vraagje over die SpryTabs. Hoe zit het namelijk met de SEO hiervan? Leest een webcrawler enkel de bovenste, eerste, zichtbare tab of leest ze alle tabs?
Knappe site trouwens…
Bedankt pascalebout!
De SpryTabs zijn SEO vriendelijk. Elke tab is een ander div die in code gewoon onder elkaar staan, net zoals andere divs. De crawlers kunnen de content van alle tabs dus probleemloos lezen.
Groetjes
Cicco
Goede beschrijving maar kan onder alle tabs de content in 1 keer aangepast worden of moet dat per tab?
Hallo Ton E.,
Begrijp je vraag niet goed… Elke tab is een ander vak met andere tekst in. Dus tekst aanpassen is tab per tab.
Was dit een antwoord op je vraag?
Groetjes
Cicco
Dank voor de snelle reactie. Ik zit nog in de leerfase, maar het is me duidelijk dat ik een en ander verkeerd wilde gebruiken.
Halle Allen,
Ik zou graag die Tabs gecentreerd hebben.
Nu kan ik alleen niet vinden waar ik dat kan aanpassen.
Groet Patrick
Hallo Patrick,
Open de pagina waar de Tabs op staan -> Open je CSS panel(links bovenaan) -> Dubbelklik op TabbedPanelsTab -> Kies voor Positioning -> Vul een waarde in bij Left onder Placement.
De waarde die je invult is afhankelijk van het aantals tabs dat je hebt dus het is een beetje uitzoeken.
Als je na het invullen van een waarde bij Left op ‘Apply’ klikt zie je het in Dreamweaver veranderen. Zo kan je wat spelen tot het goed staat.
Groetjes
Cicco
hoi
ik probeerde de spry tab als menu te gebruiken, maar ik krijg het niet voor elkaar om te linken naar het onderste frame (wel in _new/ _self/_parent),maar ‘onder’ weigert hij pertinent.
grtn
spenz
Hallo Spenz,
Frames en Spry gaan niet goed samen… Frames zijn een verouderde techniek.
Waarom gebruik je eigenlijk de Tabs voor een menu? Waarom geen gewoon menu?
Groetjes
Cicco
hallo,
weet iemand of het ook mogelijk is tabs naar boven toe te laten openen?
standaard komt de tekst er onder te staan, ik zou ze graag naar boven willen uitklappen.
groeten
Karen
Hallo Karen,
Begrijp niet goed wat je wil zeggen. Kan je misschien een voorbeeld geven?
De Spry opties zijn zoals je ze ziet… Enkel de opmaak is te veranderen.
Groetjes
Cicco
Relax spry frame work maar hoe krijg ik nu voor elkaar dat ik bv in tab 1 een link heb staan die dan de apdiv van tab 4 weergeeft?
Ik heb t met anchortags geprobeerd, kwam ergens een engels tut tegen die een paar stukken script plaatste 1 in de head ( SpryURLUtils.js) en 1 stuk onder in de body maar dat in de body werkt niet. Dan werkt het hele spry js niet meer..
Help me linking ….
Alvast bedankt!
Hallo allemaal,
Ik heb een probleem, ik gebruik het tab menu van dreamweaver. en die heb ik verwerkt in php. Ik vul mijn HTML menu met:
$standaard_tpl = str_replace(”%menu%”, $menu, $standaard_tpl);
En het zelfde voor de inhoud van mijn pagina:
$standaard_tpl = str_replace(”%paginaInhoud%”, $paginaInhoud, $standaard_tpl);
Maar is het ergens mogelijk om een link naar een andere pagina tehebben. Zodat je text niet in een div staat maar uit php code komt?
Alvast bedankt!
groetjes Mike
Hallo Mike,
Denk dat het enkel mogelijk is om naar een andere pagina te linken als je een iframe plaatst in de div.
Je kan gerust een while lus toevoegen in de gewenste div om met PHP text te laten verschijnen uit een database of text bestand.
Groetjes
Daniel
Ik heb een tabbed pannel op mijn pagina gezet met in de tab een achtergrondafbeelding van 100 x 25 px. Ook de afmeting van de tab zelf is 100 x 25 px. De tekst in de tab komt aan de bovenkant van de tab, maar ik wil het bijna aan de onderkant hebben. In de css kan ik wel horizontaal centreren, maar niet vertikaal. De tekst wordt niet vertikaal verplaatst bij de verschillende instellingen. Een waarde ingeven bij top-marge/padding helpt ook niet, want dan wordt ook de achtergrond verplaatst. Heeft iemand de oplossing?
Class selector toewijzen,(new css rule) aan die tekst en die aparte, nieuwe css rule dan inrichten naar wens in het css dialoogvenster.
Tab 1
In de class “verschuif” heb ik Margin-Top= 10 px gekozen en moest ik nog wel Display=Block selecteren voordat de text naar beneden ging.
Bedankt voor het advies Arie.
Hallo Cicco,
Ik weet niet of mijn vraag hier thuis hoort, zo niet dan hoor ik het wel. Ik heb op mijn site spry menu’s geplaatst.
Mijn vraag is: hoe kan een menutab wat aan de rechterkant van de site zit bij het aktiveren naar links uitklappen i.p.v. naar rechts?
Met vriendelijke groet,
Wim van Oel
Hallo Cicco.
Ik wil graag gebruik maken van spry tabs ter navigatie. Ik ben zover dat ik netjes vier tabs naast elkaar heb. Nu wil ik elke tab gaan vullen met content (beeld en tekst). Vooral de eerste tab (home) moet eruit zien als een soort voorpagina van een krant met div. nieuws items). Als ik nu tekst en beeld invoeg komt dat onder elkaar en ziet er saai uit. Kan ik binnen de content van een tab lagen maken? Of is het dan toch handiger over te stappen naar een ouderwetse navigatiebalk.
Groet Jeroen
Ok iemand anders misschien? Heb inmiddels mijn ontwerp aangepast naar een eenvoudiger te realiseren structuur. Maar ben nog steeds nieuwsgierig of het kan.
Hallo Wim,
Ik ben nog steeds actief maar zit de laatste maanden in tijdsnood door een zeer druk werkschema. Mijn excuses hiervoor…
Het forum kan ook nog steeds gebruikt worden : http://forum.webtutorials.be
Groetjes
Cicco
Hallo Cicco,
Goed weer iets van je te horen Cicco, je hoef je voor mij
niet te excuseren hoor! Ik ben al blij als ik bij tijd en wijle door een deskundige geholpen word.
Met vriendelijk groet,
Wim van Oel
hallo
Ik heb een pagina met diverse tabbladen. Nou wil ik op een andere pagina links plaatsen naar verschillende ankers in verschillende pagina’s.
Weet iemand hoe dit moet?
vriendelijke groet
Inge
(^_^)
[...] Spry tabs [...]