Come posizionare i bordi su un’immagine in Dreamweaver?

A volte, dovrai impostare un’immagine separata dello sfondo o del contenuto circostante per farlo risaltare con Dreamweaver. Un modo per creare questo effetto è posizionare un bordo attorno all’immagine.

Un bordo può attirare l’attenzione su un’immagine e può far parte di un aspetto stilistico in tutto il sito. A volte, un bordo può anche indicare un collegamento.

Esistono due modi per definire un bordo in questo esercizio: utilizzerai CSS per creare il bordo, ma imparerai anche il secondo metodo per applicare l’attributo border al tag image.

Metodo aggregato Quick Edge

Il pannello Dreamweaver Edge definisce l’aspetto dei bordi attorno a immagini, tabelle, tag <div> e altri elementi. È possibile specificare l’impostazione del bordo su uno, due, tre o quattro lati di un elemento.

  1. Seleziona la regola di studioPhoto dall’elenco Tutte le regole nel pannello Stile CSS.
  2. Fai clic sul pulsante Modifica stile nella parte inferiore del pannello.
  3. Le regole vengono visualizzate nell’ordine in cui sono state create.
  4. Con il più vecchio in cima all’elenco e il più recente in fondo.
  5. Nella finestra di dialogo Definizione regola CSS, selezionare la categoria Bordo.
  6. Scegli solido dalle opzioni di stile.
  7. Immettere 1 nel campo di testo superiore per la sezione Larghezza e selezionare # 747E3F.
  8. Fare clic su OK per chiudere la finestra di dialogo e applicare la modifica.
  9. Dreamweaver aggiunge un bordo pixel attorno all’immagine.
  10. La configurazione Edge utilizza una misurazione basata su pixel.
  11. L’impostazione predefinita nella finestra di dialogo Definizione regola.
  12. È possibile impostare la larghezza del bordo su qualsiasi numero desiderato.

Come posizionare i bordi su un'immagine in Dreamweaver? 1

Opzioni del pannello laterale Presentazione di Dreamweaver

È possibile utilizzare le impostazioni del bordo per creare linee di divisione tra tag <div> che creano colonne o aggiungere linee di separazione sopra o sotto gli elementi.

  • Comprimi bordo : specifica se i bordi della tabella vengono uniti in un bordo singolo o separati come appaiono in HTML standard quando si utilizza il tag <table>. Le opzioni sono Comprimi, Separa (impostazione predefinita) ed Eredita.
  • Spazio tra bordi : imposta lo spazio tra i bordi delle celle nella tabella adiacente quando l’opzione Comprimi bordo è impostata su Separato.
  • Colore bordo : specificare il colore del bordo per tutti e quattro i lati di un elemento inserendo un colore esadecimale o facendo clic sul colore e usando il selettore colore.
  • Colore bordo superiore, destro, sinistro e inferiore : specificare colori diversi per uno o tutti i bordi di un elemento.
  • Larghezza bordo : specificare la larghezza o lo spessore del bordo. Puoi scegliere sottile, medio o spesso oppure puoi specificare la dimensione in pixel, em o una qualsiasi delle altre opzioni di dimensione.
  • Larghezza superiore, destra, sinistra e inferiore : specificare larghezze diverse per uno o tutti i bordi di un elemento.
  • Stile bordo : scegliere una delle opzioni di stile del bordo, tra cui Solido, Punteggiato o Doppio.
    Stile bordo superiore, destro, sinistro e inferiore: specificare stili di bordo diversi per uno o tutti i bordi di un elemento.
  • Raggio del bordo : crea angoli arrotondati ai bordi. Fare clic per posizionare il cursore su uno dei quattro campi situati vicino agli angoli della casella di anteprima del bordo e immettere un numero per specificare la quantità del raggio. Puoi scegliere una qualsiasi delle opzioni di dimensione CSS usando l’elenco a discesa.

raccomandazioni

Puoi anche applicare un bordo a un’immagine usando l’attributo border del tag <img>. Per fare ciò, selezionare l’immagine e immettere un valore per lo spessore desiderato nel campo di testo Bordo nella finestra di ispezione Proprietà.

Se si assegna un collegamento a un’immagine , il colore del bordo sarà uguale al colore del collegamento predefinito specificato in Proprietà pagina a meno che non venga applicato uno stile CSS, nel qual caso un collegamento non provocherà alcuna modifica nel colore del bordo .

Il colore del bordo sarà lo stesso del colore del testo predefinito specificato nella finestra di dialogo Proprietà pagina. L’esempio seguente mostra un’immagine a cui è stato applicato un attributo edge tramite la finestra di ispezione Proprietà.

Evitare l’attributo border a favore dell’uso dei CSS per definire i bordi dell’immagine, come è stato fatto in questo esercizio, è un processo di codifica migliore.

 

Potrebbe interessarti

Lascia un commento