Casa Social media Come creare una barra di navigazione da una lista non ordinata di collegamenti in Dreamweaver - dummies

Come creare una barra di navigazione da una lista non ordinata di collegamenti in Dreamweaver - dummies

Video: [Tutorial HTML] - Lezione 6 (tag: div, liste ordinate e non) 2025

Video: [Tutorial HTML] - Lezione 6 (tag: div, liste ordinate e non) 2025
Anonim

Ecco un grande trucco CSS per trasformare un elenco puntato in una barra di navigazione in Dreamweaver con un semplice effetto rollover. L'utilizzo di un elenco puntato per barre di navigazione è una convenzione ben accettata per i siti Web che soddisfano gli attuali standard di accessibilità.

Credito: foto di istockphoto. com

Gli stessi collegamenti sono ancora contenuti nell'elenco non ordinato, ma l'applicazione degli stili cambia radicalmente il loro aspetto.

Credito: foto di istockphoto. com

Per creare una barra di navigazione utilizzando i CSS per ridefinire l'elenco non ordinato e i tag di collegamento, segui questi passaggi:

  1. Fai clic per posizionare il cursore nel punto in cui desideri creare la barra di navigazione nella pagina.

  2. Inserisci il testo che vuoi servire come link, separandoli premendo il tasto Invio o Invio per creare un ritorno a capo.

    Per formattare i collegamenti come un elenco non ordinato, separare ogni riga di testo che si desidera collegare a un tag

  3. Creare collegamenti selezionando a turno ciascuna parte di testo, facendo clic sull'icona Collegamento ipertestuale nel pannello Inserimento comune, quindi selezionando la pagina a cui si desidera collegare o inserire un URL.

  4. Trascinare per selezionare l'intera serie di collegamenti, quindi fare clic sull'icona Elenco non ordinati nella finestra di ispezione Proprietà.

    Un punto elenco appare all'inizio di ogni collegamento. Se un collegamento non viene impostato con un punto elenco separato, fare clic per eliminare lo spazio tra esso e il collegamento precedente, quindi premere Invio o Invio per separare i collegamenti con un ritorno di paragrafo.

  5. Per aggiungere un tag a un elenco di collegamenti (o qualsiasi altro contenuto già presente in una pagina), selezionare il contenuto e quindi fare clic sull'icona Div nel pannello Inserimento comune.

    Si apre la finestra di dialogo Inserisci Div.

    L'aggiunta di un tag attorno all'elenco non ordinato di collegamenti è utile se si desidera aggiungere la formattazione.

  6. Scegli Wrap Around Selection dall'elenco a discesa Inserisci.

    Per un controllo più preciso su dove aggiungere un nuovo tag, è possibile scegliere le opzioni dall'elenco a discesa Inserisci nella parte superiore della finestra di dialogo Inserisci Div.

  7. Inserire un nome nel campo Classe o nel campo ID.

    Un tag con il nome della classe o dell'ID che hai inserito viene aggiunto automaticamente alla pagina che circonda l'elenco dei link.

  8. Nella parte inferiore della finestra di dialogo Inserisci Div, fare clic sul pulsante Nuova regola CSS.

    Il nuovo nome della regola CSS viene aggiunto all'elenco dei nomi di stile nel pannello Selettori CSS Designer.

  9. Nel pannello Proprietà, specificare le impostazioni desiderate per colore, sfondo, dimensioni, margini e riempimento.

    La formattazione dello stile viene applicata automaticamente al contenuto del tag perché hai applicato lo stile mentre lo hai creato nei passaggi 5-7.

  10. Per creare uno stile composto che formatta l'elenco non ordinato solo quando viene utilizzato nella barra di navigazione, creare uno stile composto che includa il nome della classe. barra di navigazione:

    1. Posiziona il cursore ovunque nell'elenco puntato.

    2. Fare clic sul segno più (+) nella parte superiore del pannello dei selettori.

    3. Nel campo Nome selettore, assicurarsi che Dreamweaver sia stato inserito automaticamente. navbar ul come nome di un nuovo stile nel pannello Selettori.

    4. Nel pannello Proprietà, imposta i margini e il riempimento su 0.

  11. Crea uno stile composto per ridefinire i tag delle voci dell'elenco:

    1. Posiziona il cursore ovunque nell'elenco puntato.

    2. Fare clic sul segno più nella parte superiore del pannello dei selettori.

    3. Nel campo Nome selettore, assicurarsi che Dreamweaver sia stato inserito automaticamente. navbar ul li come nome di un nuovo stile nel pannello Selettori.

    4. Nel pannello Proprietà, impostare Schermo su In linea.

    5. Cambia il tipo di stile elenco su Nessuno per rimuovere il punto elenco.

    6. Imposta i margini sinistro e destro su 20 pixel.

      Questo passaggio separa gli elementi dell'elenco l'uno dall'altro nell'elenco orizzontale. Puoi modificare l'impostazione per creare la quantità di spazio tra i collegamenti che meglio si adatta al tuo design.

  12. Crea uno stile per ridefinire il tag link:

    1. Fai clic per posizionare il cursore all'interno di un link nella barra di navigazione.

    2. Fare clic sul segno più nella parte superiore del pannello dei selettori.

    3. Se si desidera modificare il nome dello stile, fare doppio clic sul nome nel pannello Selettori e immettere il nome che si desidera utilizzare.

    4. Nella sezione Testo del pannello Proprietà, imposta Testo-Decorazione su Nessuno.

    5. Ancora nella sezione Testo, scegli un colore dal riquadro dei colori per specificare il colore dei collegamenti quando vengono caricati su una pagina.

  13. Crea un nuovo stile per ridefinire il tag hover-link in modo che il colore del link cambi quando un utente fa scorrere un cursore sul collegamento:

    1. Fai clic sul segno più nella parte superiore del pannello Selettori.

    2. Nel campo Nome selettore, immettere. barra di navigazione a: hover.

    3. Nella sezione Testo del pannello Proprietà, imposta Testo-Decorazione su Nessuno.

    4. Sempre nella sezione Testo, scegli un colore dal riquadro del colore per specificare il colore del collegamento quando gli utenti passano il cursore sul collegamento.

  14. Crea un nuovo stile per ridefinire il tag di collegamento visitato in modo che il colore del link cambi dopo che un utente fa clic su un link:

    1. Fai clic sul segno più nella parte superiore del pannello Selettori.

    2. Nel campo Nome selettore, immettere. barra di navigazione a: visitato.

    3. Nella sezione Testo del pannello Proprietà, imposta Testo-Decorazione su Nessuno.

    4. Sempre nella sezione Testo, scegli un colore dal riquadro dei colori per specificare il colore del collegamento dopo che è stato visitato.

  15. Fare clic sul pulsante Live nella parte superiore dell'area di lavoro o fare clic sul pulsante Anteprima per visualizzare la pagina in un browser per vedere l'effetto degli stili di collegamento.

Come creare una barra di navigazione da una lista non ordinata di collegamenti in Dreamweaver - dummies

Scelta dell'editore

Vantaggi di base della rete - manichini

Vantaggi di base della rete - manichini

Se la verità viene detta, le reti di computer sono un problema da impostare. Perché i vantaggi di avere una rete rendono la pena di crearne uno utile. Non è necessario essere un dottorato di ricerca per comprendere i vantaggi del networking. Le reti riguardano esclusivamente la condivisione. Nello specifico, le reti riguardano la condivisione di tre elementi: informazioni, risorse, ...

Biometria L'accettazione, la privacy e la legge - manichini

Biometria L'accettazione, la privacy e la legge - manichini

La tecnologia biometrica non è affatto universalmente accettata da tutti gli utenti. Ci sono una serie di considerazioni sociali e legali che danno ad ogni organizzazione una pausa prima di fare il salto a capofitto nell'implementazione di un sistema biometrico. Le persone sono più a loro agio con i sistemi di raccolta biometrici che sono i meno intrusivi. Scanner per retina e nasi elettronici sono ...

Biometria Nozioni di base - manichini

Biometria Nozioni di base - manichini

La biometria non è roba da fantascienza. Puoi trovare una dozzina di modi più o meno efficaci per utilizzare la biometria per identificare qualcuno, ognuno dei quali si divide in due classi: la biometria fisiologica misura una parte specifica della struttura o della forma di una porzione del corpo di un soggetto. La biometria comportamentale è più interessata a come ...

Scelta dell'editore

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

In Excel 2007, è possibile creare dizionari personalizzati da utilizzare quando si esegue il controllo ortografico dei fogli di lavoro. Utilizzare il pulsante Aggiungi al dizionario nella finestra di dialogo Controllo ortografico per aggiungere parole sconosciute a un dizionario personalizzato. Per impostazione predefinita, Excel aggiunge queste parole a un file dizionario personalizzato denominato CUSTOM. DIC, ma è possibile creare una nuova personalizzazione ...

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Sebbene sia possibile convertire qualsiasi cartella di lavoro di Excel in un componente aggiuntivo, non tutte le cartelle di lavoro traggono vantaggio da questa conversione. Una cartella di lavoro senza macro rende un componente aggiuntivo inutile. In effetti, gli unici tipi di cartelle di lavoro che traggono vantaggio dall'essere convertiti in un componente aggiuntivo sono quelli con macro. Ad esempio, una cartella di lavoro costituita da macro generiche (Sub ...

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Se si lavora in Microsoft Excel 2010 e vuoi iniziare a lavorare in un nuovo file di cartella di lavoro di Excel, puoi facilmente creare una nuova cartella di lavoro. Per fare ciò, puoi usare un comando nella scheda File o una scorciatoia da tastiera. Fare clic sulla scheda File. Excel visualizza la visualizzazione Backstage, in cui è possibile accedere ai comandi relativi ai file. ...

Scelta dell'editore

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Adobe Illustrator Creative Suite 5 (Adobe CS5) Illustrator è utilizzato per rimuovere rapidamente aree di grafica con la stessa facilità con cui si cancellano i pixel in Photoshop, accarezzando con il mouse su qualsiasi forma o gruppo di forme. Facendo doppio clic sullo strumento Gomma, è possibile definire il diametro, l'angolo e la rotondità della gomma. Se stai usando un ...

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

I più popolari strumenti di trasformazione in Adobe Creative Suite 5 (Adobe CS5) Illustrator - Rifletti, scala, inclina, rimodella e Trasformazione libera: sono facili da usare e modificano rapidamente la tua illustrazione. Lo strumento Rifletti Niente è simmetrico, giusto? Forse no, ma gli oggetti non creati simmetricamente in Illustrator possono sembrare off-kilter. Utilizzando lo strumento Rifletti, si ...

Quando utilizzare Adobe CS5 Illustrator - dummies

Quando utilizzare Adobe CS5 Illustrator - dummies

Utilizzando Adobe Creative Suite 5 (Adobe CS5) Illustrator anziché Photoshop , ottieni diversi benefici. Potresti aver sentito che Illustrator è migliore per la grafica vettoriale, ma perché e che altro porta? Illustrator può salvare ed esportare immagini nella maggior parte dei formati di file. Scegliendo di salvare o esportare, è possibile creare un ...