Com crear consultes multimèdia personalitzades a Dreamweaver

Quan creeu pàgines amb funcions de disseny de quadrícula fluida, Dreamweaver us crea automàticament les consultes multimèdia corresponents, però podeu crear les vostres pròpies consultes multimèdia personalitzades i utilitzar-les per orientar les vostres pròpies regles CSS.

Les consultes de mitjans s'utilitzen al web durant més d'una dècada per a altres usos, com ara la creació d'un disseny de pàgina alternatiu optimitzat per a la impressió. Una consulta de mitjans es compon d'un tipus de suport, com ara pantalla o impressió (els dos més comuns), i una expressió opcional que comprova característiques particulars, com ara l'alçada o l'amplada. Els tipus de mitjans més utilitzats són

• tots: Apte per a tots els dispositius

• imprimir: Dissenyat per a la previsualització d'impressió i per mostrar-se quan s'imprimeix una pàgina

• pantalla: per al contingut que es mostra a qualsevol pantalla

El tipus de suport de mà gairebé mai no s'utilitza i només s'utilitza millor per a telèfons mòbils i altres dispositius amb pantalles petites, ample de banda limitat i pantalles monocromes que només admeten gràfics de mapa de bits. Els dispositius iOS i la majoria de telèfons intel·ligents es classifiquen com a tipus de mitjans de pantalla.

Com aplicar estils als dissenys de pàgines de Dreamweaver

Podeu aplicar fulls d'estil com a fitxers externs enllaçant-los o important-los, o podeu incloure-los com a estils interns a la regió de capçalera del codi HTML de la vostra pàgina. Fins i tot podeu orientar dispositius amb estils en línia, una opció útil si voleu aplicar una regla específica només a determinats dispositius.

Podeu utilitzar una combinació d'aquestes opcions i podeu importar o enllaçar diversos fulls d'estil externs a la mateixa pàgina web. Després d'haver definit el tipus de suport amb les funcions de suport que voleu orientar, especifiqueu com s'han d'aplicar els estils a la pàgina.

Com utilitzar consultes multimèdia en fulls d'estil externs a Dreamweaver

Podeu utilitzar les consultes multimèdia amb fulls d'estil externs de dues maneres. La primera opció és enllaçar a un full d'estil extern amb diversos conjunts d'estils separats per consultes multimèdia. Així és com Dreamweaver enllaça els estils quan creeu un disseny de quadrícula fluid.

La segona opció és enllaçar dos o més fulls d'estil externs separats a cada pàgina HTML i incloure les consultes multimèdia a cada full d'estil. De qualsevol manera, el codi per al CSS i l'HTML es guarden en fitxers separats i el

etiqueta els connecta.

Tant si deseu totes les consultes multimèdia i els estils relacionats en un fitxer o en fitxers CSS separats, també podeu enllaçar fulls d'estil addicionals a qualsevol pàgina HTML. Per exemple, podeu incloure un conjunt d'estils separat en un full d'estil independent dissenyat per donar format a la pàgina quan s'envia a una impressora.

Com crear consultes multimèdia a Dreamweaver

Podeu crear tantes consultes multimèdia com vulgueu a Dreamweaver i les podeu incloure en un fitxer CSS o en molts. Per crear una consulta multimèdia nova a Dreamweaver, seguiu aquests passos:

Obriu el panell CSS Designer escollint Finestra → Estils CSS.

Seleccioneu un full d'estil existent al tauler Fonts o creeu-ne un de nou fent clic al signe més (+) al tauler Fonts.

Feu clic al signe més (+) al tauler @Media al tauler CSS Designer.

S'obre el quadre de diàleg Definir consultes de mitjans.

Seleccioneu Multimèdia a la primera llista desplegable i Pantalla a la segona llista desplegable.

Moveu el cursor a la dreta de cadascuna de les llistes desplegables per fer que aparegui el signe més i, a continuació, feu clic al signe més per afegir un camp nou.

Apareix un camp nou al quadre de diàleg Consulta de mitjans perquè pugueu especificar l'orientació. Aquest camp és opcional, però s'utilitza habitualment si voleu crear diferents dissenys per a vistes horitzontals i verticals en una tauleta o un telèfon intel·ligent. Si no voleu crear dissenys addicionals basats en l'orientació, podeu eliminar aquest camp fent clic al signe menys.

Nota: els signes més i menys es fan visibles només quan passeu el cursor per sobre del costat dret del quadre de diàleg.

Moveu el cursor a la dreta de les llistes desplegables, feu clic al signe més una segona vegada per afegir un camp i introduïu una condició d'amplada mínima.

El camp Amplada mínima apareix al quadre de diàleg Consulta de mitjans perquè pugueu especificar l'amplada mínima que voleu utilitzar per orientar la consulta. L'amplada mínima és important perquè la consulta multimèdia s'orienta als estils en funció de l'interval d'amplada mínima a màxima que especifiqueu, tractat al pas següent.

Moveu el cursor a la dreta de les llistes desplegables, feu clic al signe més una tercera vegada per afegir un camp i introduïu la condició d'amplada màxima.

El camp Max-Width apareix al quadre de diàleg perquè pugueu especificar l'amplada màxima que voleu utilitzar per orientar la consulta.

Feu clic a D'acord.

El quadre de diàleg Consulta de mitjans es tanca i la consulta de mitjans es genera i s'afegeix al full d'estil que heu seleccionat al tauler Fonts del tauler CSS Designer.

Per afegir consultes multimèdia addicionals a qualsevol full d'estil seleccionat, repetiu els passos 3-8. Per afegir consultes multimèdia a un full d'estil diferent, repetiu els passos 2–8.

Tot i que podeu desar les consultes multimèdia en tants fulls d'estils diferents com vulgueu, desar-los tots en un sol full d'estil extern és més eficient perquè cada full d'estil s'ha de baixar del servidor per separat, la qual cosa requereix més amplada de banda. Descarregar un full d'estil llarg amb diverses consultes multimèdia és una mica més eficient que descarregar diversos fulls d'estil.