Microsoft Expression Web - Immagini

Le immagini sono molto utilizzate nelle pagine web per renderle interessanti e fornire una migliore esperienza utente. In questo capitolo impareremo come aggiungere immagini al sito web. Come al solito, andiamo passo dopo passo e impariamo il processo in dettaglio.

Step 1 - Per iniziare ad aggiungere immagini, creiamo un nuovo sito di una pagina e cambiamo il nome del file default.html in index.html.

Step 2- Ora dobbiamo includere immagini nel sito Web in modo da poterle utilizzare nella pagina Web. Creiamo una nuova cartella. Nell'elenco delle cartelle, fare clic con il pulsante destro del mouse sul nome del sito Web.

Step 3- Al momento, non ci sono immagini in questa cartella. Per aggiungere immagini in questa cartella, è sufficiente selezionare e trascinare le immagini dal disco rigido e rilasciarle sulla cartella delle immagini.

Vedrai che le immagini vengono aggiunte al sito web images cartella, come mostrato nello screenshot seguente.

Step 4- Ora queste immagini sono incluse nel tuo sito web ma nessuna di queste viene utilizzata in una pagina web. Un modo semplice per aggiungere un'immagine nella pagina Web è trascinare l'immagine dalla cartella delle immagini e rilasciarla nella vista codice dove si desidera aggiungere l'immagine nella pagina Web.

Supponiamo di voler aggiungere un'immagine sotto l'intestazione. Quando si rilascia l'immagine e si rilascia il pulsante del mouse, verrà visualizzata la seguente finestra di dialogo.

Qui puoi specificare il testo alternativo e la descrizione lunga. Quindi fare clic su OK e salvare la pagina web. Adesso puoi vederlo<img> il tag viene aggiunto con il nome alternativo e l'origine dell'immagine.

Step 5 - Segui la stessa procedura e aggiungi la seconda immagine insieme al nome e alla fonte alternativi.

Ora il index.html il file apparirà come segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html>

Step 6 - Il Picture Propertiesla finestra di dialogo consente di accedere agli attributi dell'immagine più comunemente utilizzati. Quando si fa doppio clic su un'immagine, verrà visualizzata la finestra Proprietà immagine.

In Expression Web, la finestra di dialogo Proprietà immagine ha due schede, General e Appearance.

Di seguito sono riportate le opzioni disponibili in General tab.

  • Picture - Contiene il nome della cartella / del file dell'immagine grafica.

  • Alternate Text- Digita il testo che desideri venga visualizzato per le immagini durante il download dell'immagine, quando non può essere trovata o quando un visitatore del sito sposta il puntatore su di essa. Questo testo verrà utilizzato anche da uno screen reader se il tuo visualizzatore ne utilizza uno.

  • Long Description- A volte alcune parole potrebbero non essere sufficienti per descrivere la tua immagine. Grafici e grafici sono esempi. Fare clic su Sfoglia per selezionare un file che contiene una descrizione più lunga dell'immagine.

  • Location - Se vuoi collegare la tua immagine a una pagina web o un'immagine più grande, inserisci qui il collegamento ipertestuale.

  • Target Frame - Se la pagina corrente è una pagina con frame, questa opzione indica in quale frame deve essere visualizzato il collegamento OPPURE è possibile scegliere di aprire l'immagine o la pagina in una nuova finestra.

Le seguenti opzioni sono disponibili in Appearance tab.

  • Wrapping Style - Specifica il modo in cui l'immagine galleggia nella pagina, ad esempio Nessuno, Sinistra o Destra.

  • Layout - In questa sezione è possibile impostare l'allineamento, lo spessore del bordo, i margini orizzontali e verticali.

  • Size- Expression Web imposta automaticamente le proprietà di larghezza e altezza per l'immagine in base alle dimensioni effettive dell'immagine. Invece di ridimensionare la tua immagine cambiando queste dimensioni, ridimensiona l'immagine usando il tuo editor grafico.

Step 7- Ora, vediamo l'anteprima della pagina web nel browser; visualizzerà il seguente output.