Operation Manual

455
DREAMWEAVER GEBRUIKEN
Spry-pagina's visueel opbouwen
Laatst bijgewerkt 2/5/2011
De achtergrondkleur wijzigen van een widget deelvensters met tabs
❖ Als u de achtergrondkleuren van verschillende delen van een widget deelvensters met tabs wilt wijzigen, gebruikt
u de volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor
de gewenste achtergrondkleur toe of wijzigt u deze:
De breedte van deelvensters met tabs beperken
Standaard wordt de widget deelvensters met tabs opengeklapt zodat de beschikbare ruimte geheel in beslag wordt
genomen. U kunt de breedte van een widget deelvensters met tabs echter beperken door een breedte-eigenschap voor
de container in te stellen.
1 Zoek de CSS-regel .TabbedPanels door het bestand SpryTabbedPanels.css te openen. Deze regel definieert
eigenschappen voor het hoofdcontainerelement van de widget Deelvensters met tabs.
U vindt de regel ook door de widget deelvensters met tabs te selecteren en het deelvenster CSS-stijlen te bekijken
(Venster > CSS-stijlen). Zorg ervoor dat het paneel is ingesteld op de modus Huidig.
2 Voeg een breedte-eigenschap en -waarde aan de regel toe, bijvoorbeeld width:. 300px;.
Werken met de knopinfo-widget
Over de knopinfo-widget
Met de Spry-knopinfo-widget wordt aanvullende informatie weergegeven wanneer een gebruiker met de muis over
een bepaald element op een webpagina beweegt. De aanvullende inhoud verdwijnt wanneer de gebruiker niet meer
boven het element beweegt. U kunt ook knopinfo instellen om langer geopend te blijven zodat gebruikers iets met de
inhoud van de knopinfo kunnen doen.
Een knopinfo-widget bestaat uit de volgende drie elementen:
• De knopinfo-container. Dit is het element dat het bericht of de inhoud bevat die u wilt weergeven wanneer de
gebruiker de knopinfo activeert.
• De pagina-elementen die de knopinfo activeren.
• Het constructor-script. Dit is JavaScript dat Spry opdraagt de knopinfo-functionaliteit te maken.
Wanneer u een knopinfo-widget invoegt, maakt Dreamweaver een knopinfo-container met behulp van
div-tags en
omhult het “trigger”-element (het pagina-element dat de knopinfo activeert) met
span-tags. Deze tags worden
standaard door Dreamweaver gebruikt, maar de tags voor het knopinfo- en het trigger-element kunnen alle tags zijn,
mits deze zich in het hoofdtekstgedeelte van de pagina bevinden.
Te wijzigen kleur Relevante CSS-regel Voorbeeld van toe te voegen of te
wijzigen eigenschap en waarde
Achtergrondkleur van paneeltabs .TabbedPanelsTabGroup of .TabbedPanelsTab background-color: #DDD; (Dit is de
standaardwaarde)
Achtergrondkleur van inhoudspanelen .Tabbed PanelsContentGroup of
.TabbedPanelsContent
background-color: #EEE; (Dit is de
standaardwaarde)
Achtergrondkleur van geselecteerde tab .TabbedPanelsTabSelected background-color: #EEE; (Dit is de
standaardwaarde)
Achtergrondkleur van paneeltabs wanneer
de muisaanwijzer eroverheen beweegt
.TabbedPanelsTabHover background-color: #CCC; (Dit is de
standaardwaarde)