Molti Web designer utilizzare tabulazioni o pannelli a schede, come una caratteristica di design nei loro siti Web. Pannelli a schede funzionano in modo simile alle schede nelle finestre di dialogo dell'applicazione. Quando l'utente fa clic su una scheda, vengono visualizzate informazioni corrispondente con l'etichetta della scheda. Pannelli a schede consentono di includere un sacco di informazioni su una singola pagina Web, senza costringere l'utente a scorrere lunghe pagine di contenuti. In Adobe Dreamweaver, un layout di pagina Web leader e programma di sviluppo Web, è possibile creare pannelli a schede con possibilità di "Pannelli a schede Spry" incasso del programma.
Istruzioni
Creazione di pannelli a schede in Dreamweaver
1
Aprire un documento di Dreamweaver esistente in cui si desidera inserire pannelli a schede o avviare un nuovo documento: fare clic sul menu "File" e scegliere "Nuovo" per aprire la finestra di dialogo "Nuovo documento". Scegliere "HTML" dal "Tipo di pagina" colonna e il layout desiderato dalla colonna "Layout" e quindi fare clic su "Crea".
2
Clicca con il mouse nell'area della pagina dove si desidera posizionare i pannelli a schede per inserire il cursore.
3
Fare clic sul menu "Inserisci", scegliere "Spry" e poi selezionare "Pannelli a schede Spry." Se si tratta di un nuovo documento, Dreamweaver vi chiederà di salvarlo. Nome e salvare il file come si farebbe con qualsiasi altro documento di computer. Dreamweaver inserisce due pannelli a schede nella pagina, "Tab 1" e "Scheda 2". È possibile modificare le etichette della scheda selezionando il testo dell'etichetta e digitando il nuovo testo. È possibile aggiungere contenuto al riquadro contenuto del pannello a schede selezionando il testo corrente - "Contenuto 1" o "Contenuto 2" - e digitando il nuovo contenuto. È inoltre possibile aggiungere immagini e qualsiasi altro tipo di supporto per il pannello proprio come si farebbe con qualsiasi altra pagina di Dreamweaver.
Inserimento di ulteriori pannelli a schede
4
Posto Dreamweaver in modalità di modifica del codice facendo clic sulla scheda "Split", che si trova direttamente sotto la barra dei menu.
5
Trovare il codice per i pannelli a schede. Si inizia con la seguente riga di codice:
< div id = "TabbedPanels1" class = "TabbedPanels" >
Aggiungere un nuovo elemento di elenco per l'elenco non ordinato (< ul >) per creare un nuovo tab. attualmente, l'elenco non ordinato ha due elementi e assomiglia a questo:
< ul classe = "TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</UL >
Per aggiungere un nuovo elemento di elenco, è necessario inserire una nuova voce "classe li", come questo:
< ul classe = "TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</UL >
Inserire una nuova voce "classe li" per ogni scheda aggiuntiva che si desidera.
6
È possibile inserire ulteriori pannelli aggiungendo righe di "TabbedPanelsContent". Ad esempio, per aggiungere un terzo pannello, il codice dovrebbe risultare come questo:
< div class = "TabbedPanelsContentGroup" >
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
< / div >
Inserire una nuova riga di "TabbedPanelsContent" per ogni scheda che è stato creato nel passaggio precedente.
Consigli & Avvertenze
- È possibile modificare l'aspetto delle schede, scheda etichette e testo contenuto modificando le regole e i selettori di (CSS) del foglio di stile CSS. Basta selezionare l'oggetto che si desidera modificare e fare clic su "modifica" nel pannello "Proprietà di Dreamweaver". Verrà visualizzata la finestra di dialogo "Definizione regola CSS", dove è cambiare font, colori e la forma e lo stile delle schede.