Come creare query multimediali personalizzate in Dreamweaver - dummies

Quando si creano pagine utilizzando le funzioni di layout della griglia fluida, Dreamweaver crea automaticamente le query multimediali corrispondenti per te, ma puoi creare le tue query multimediali personalizzate e usarle per scegliere come target le tue regole CSS.

Le query multimediali sono in uso sul Web da oltre un decennio per altri usi, come la creazione di un design di pagina alternativo ottimizzato per la stampa. Una query multimediale è costituita da un tipo di supporto, ad esempio schermo o stampa (i due più comuni) e un'espressione facoltativa che verifica la presenza di caratteristiche particolari, come l'altezza o la larghezza. I tipi di media più usati sono

• tutti: adatto per tutti i dispositivi

• stampa: progettato per l'anteprima di stampa e per la visualizzazione quando una pagina viene stampata

• schermo: per il contenuto visualizzato su qualsiasi schermo

il tipo di supporto portatile non è quasi mai più utilizzato ed è stato utilizzato al meglio solo per telefoni cellulari e altri dispositivi con schermi piccoli, larghezza di banda limitata e schermi monocromatici che supportano solo la grafica bitmap. I dispositivi iOS e la maggior parte degli smartphone sono classificati come tipi di media dello schermo.

Come applicare gli stili ai disegni di pagina di Dreamweaver

Puoi applicare i fogli di stile come file esterni collegandoli o importandoli oppure puoi includerli come stili interni nell'area della testa del tuo codice HTML della pagina. Puoi persino indirizzare i dispositivi utilizzando gli stili in linea: un'opzione utile se desideri applicare una regola specifica solo a determinati dispositivi.

È possibile utilizzare una combinazione di queste opzioni ed è possibile importare o collegare più fogli di stile esterni alla stessa pagina Web. Dopo aver definito il tipo di supporto con le funzioni multimediali che desideri utilizzare come destinazione, devi specificare come applicare gli stili alla pagina.

Come utilizzare le query multimediali in fogli di stile esterni in Dreamweaver

È possibile utilizzare le query multimediali con fogli di stile esterni in due modi. La prima opzione è quella di collegare un foglio di stile esterno con più set di stili separati da query multimediali. Ecco come Dreamweaver collega gli stili quando si crea un layout a griglia fluida.

La seconda opzione consiste nel collegare due o più fogli di stile esterni separati a ciascuna pagina HTML e includere le query multimediali in ciascun foglio di stile. In entrambi i casi, il codice per CSS e HTML viene salvato in file separati e il tag li collega.

Se si salvano tutte le query multimediali e gli stili correlati in un unico file o in file CSS separati, è possibile collegare anche fogli di stile aggiuntivi a qualsiasi pagina HTML. Ad esempio, è possibile includere un set separato di stili in un foglio di stile separato progettato per formattare la pagina quando viene inviata a una stampante.

Come creare query multimediali in Dreamweaver

È possibile creare il numero di query multimediali desiderato in Dreamweaver e includerle in un unico file CSS o in molti. Per creare una nuova query multimediale in Dreamweaver, attenersi alla seguente procedura:

1. Aprire il pannello Designer CSS scegliendo Finestra → Stili CSS.

2. Seleziona un foglio di stile esistente nel pannello Fonti o creane uno nuovo facendo clic sul segno più (+) nel pannello Fonti.

   

3. Fai clic sul segno più (+) nel pannello @Media nel pannello Designer CSS.

   Si apre la finestra di dialogo Definisci query multimediali.

4. Seleziona Media dal primo elenco a discesa e Schermo dal secondo elenco a discesa.

   

5. Spostare il cursore a destra di ciascun elenco a discesa per visualizzare il segno più, quindi fare clic sul segno più per aggiungere un nuovo campo.

   Un nuovo campo viene visualizzato nella finestra di dialogo Query media in modo da poter specificare l'orientamento. Questo campo è facoltativo ma viene comunemente utilizzato se si desidera creare diversi progetti per le viste orizzontale e verticale su un tablet o uno smartphone. Se non si desidera creare layout aggiuntivi in ​​base all'orientamento, è possibile rimuovere questo campo facendo clic sul segno meno.

   Nota: I segni più e meno diventano visibili solo quando si sposta il cursore sul lato destro della finestra di dialogo.

6. Spostare il cursore a destra degli elenchi a discesa, fare clic sul segno più una seconda volta per aggiungere un campo e immettere una condizione di larghezza minima.

   Il campo Min-Width viene visualizzato nella finestra di dialogo Media Queries in modo che sia possibile specificare la larghezza minima che si desidera utilizzare per il targeting della query. La larghezza minima è importante perché la query sul supporto è rivolta agli stili in base all'intervallo di larghezza minimo o massimo specificato, trattato nel passaggio successivo.

7. Spostare il cursore a destra degli elenchi a discesa, fare clic sul segno più una terza volta per aggiungere un campo e immettere la condizione di larghezza massima.

   Il campo Max-Width viene visualizzato nella finestra di dialogo in modo da poter specificare la larghezza massima che si desidera utilizzare per indirizzare la query.

8. Fare clic su OK.

   La finestra di dialogo Media Query si chiude e la query multimediale viene generata e aggiunta al foglio di stile selezionato nel pannello Sorgenti nel pannello Designer CSS.

9. Per aggiungere ulteriori query multimediali a qualsiasi foglio di stile selezionato, ripetere i passaggi 3-8. Per aggiungere query multimediali a un foglio di stile diverso, ripetere i passaggi 2-8.

Sebbene sia possibile salvare le query multimediali in tutti i fogli di stile che si desidera, salvarli tutti in un foglio di stile esterno è più efficiente perché ogni foglio di stile deve essere scaricato dal server separatamente, richiedendo più larghezza di banda. Il download di un foglio di stile lungo con più query multimediali è un po 'più efficiente del download di più fogli di stile.