Nwlapcug.com


Come inserire le schede in Dreamweaver

Come inserire le schede in Dreamweaver


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" >

&lt;li class="TabbedPanelsTab" tabindex="0">Tab 1&lt;/li>

&lt;li class="TabbedPanelsTab" tabindex="0">Tab 2&lt;/li>

</UL >

Per aggiungere un nuovo elemento di elenco, è necessario inserire una nuova voce "classe li", come questo:

< ul classe = "TabbedPanelsTabGroup" >

&lt;li class="TabbedPanelsTab" tabindex="0">Tab 1&lt;/li>

&lt;li class="TabbedPanelsTab" tabindex="0">Tab 2&lt;/li>

&lt;li class="TabbedPanelsTab" tabindex="0">Tab 3&lt;/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" >

&lt;div class="TabbedPanelsContent">Content 1&lt;/div>

&lt;div class="TabbedPanelsContent">Content 2&lt;/div>

&lt;div class="TabbedPanelsContent">Content 3&lt;/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.