Com col·locar elements a Dreamweaver per crear tres dissenys en una quadrícula fluida

El que fa que els dissenys de quadrícula fluida siguin tan potents és que podeu canviar la posició i la mida dels elements a Dreamweaver perquè s'organitzin de manera diferent per a cadascun dels tres dissenys, creant dissenys optimitzats per a pantalles de mòbil, tauleta i escriptori. Per canviar l'amplada o la posició d'un element, feu servir les eines visuals de Dreamweaver.

Com editar el disseny mòbil a Dreamweaver

Dreamweaver configura els estils de manera que s'escriuen en cascada a través de cadascun dels tres dissenys. Això vol dir que primer hauríeu d'aconseguir el disseny mòbil de la manera que vulgueu. A continuació, aneu a la disposició de la tauleta i canvieu només els elements que voleu que apareguin de manera diferent a la tauleta. Finalment, visualitzeu la disposició de l'escriptori. De nou, canvieu només els elements que voleu que es mostrin de manera diferent.

Per editar el disseny del mòbil, seguiu aquestes instruccions.

Seleccioneu l'opció Mida mòbil a la part inferior de l'espai de treball.

L'àrea de treball canvia per mostrar la pàgina a la vista prèvia del mòbil, amb el format amb el conjunt d'estils corresponent.

Nota: les tres icones petites a la part inferior dreta de l'espai de treball proporcionen accés a les previsualitzacions del mòbil, la tauleta i l'escriptori. Quan canvieu d'un a un altre, no només canvieu la mida de l'àrea de visualització, sinó també el conjunt d'estils corresponent aplicat a la vostra pàgina.

Afegiu text i imatges als elements del vostre disseny de quadrícula fluida de la mateixa manera que afegiríeu contingut a qualsevol altra pàgina de Dreamweaver.

Podeu copiar i enganxar text, així com aplicar etiquetes HTML i format CSS.

Seleccioneu un element a l'àrea de disseny.

L'estil CSS corresponent es mostra al panell Selectors, on podeu editar-lo.

Creeu, editeu i apliqueu estils a text i imatges com ho faríeu en qualsevol altre disseny de pàgina a Dreamweaver.

Els estils que vulgueu aplicar als tres dissenys s'han de crear quan se seleccioneu el disseny mòbil perquè aquests estils s'aplicaran als tres dissenys tret que se substitueixin per un altre estil creat als dissenys de tauleta o d'escriptori.

Com editar el disseny de la tauleta a Dreamweaver

Després d'aconseguir el disseny mòbil de la manera que vulgueu, aneu al disseny de la mida de la tauleta i editeu els estils que s'apliquen a aquest disseny.

Per editar el disseny de la tauleta, seguiu aquestes instruccions.

Seleccioneu l'opció Mida de la tauleta, a la part inferior dreta de l'espai de treball.

L'àrea de treball canvia per mostrar la pàgina a la vista prèvia de la tauleta, formatada amb el conjunt d'estils corresponent.

Seleccioneu un element que voleu canviar en una columna i utilitzeu les nanses del costat dret per arrossegar la columna a l'amplada desitjada.

Dreamweaver ofereix una col·lecció d'eines d'edició visual que faciliten l'ajust de la mida i el posicionament dels elements de la quadrícula fluida.

Si arrossegueu el mànec de qualsevol element de quadrícula fluida d'esquerra a dreta, afegiu un espai de marge que obliga l'element a quedar-se a la dreta del disseny. Si arrossegueu una nansa de dreta a esquerra, canvieu la mida de l'element.

Seleccioneu un element redimensionat que vulgueu reposicionar i, a continuació, feu clic a la fletxa Mou una fila cap amunt.

L'element es mou cap amunt i s'alinea al costat de l'element que hi ha a sobre.

Per moure un element cap avall, feu clic a la fletxa Inicia una fila nova.

Nota: Feu clic a cadascuna de les quatre icones per amagar un element, moure'l cap amunt o cap avall, duplicar-lo o suprimir-lo.

Com editar el disseny de l'escriptori a Dreamweaver

Després d'obtenir els dissenys per a mòbils i tauletes de la manera que vulgueu, aneu al disseny de mida de l'escriptori i editeu els estils que s'apliquen al més gran dels tres dissenys.

Per editar el disseny de l'escriptori, seguiu aquestes instruccions.

Seleccioneu l'opció Mida de l'escriptori a la part inferior dreta de l'espai de treball.

L'àrea de treball canvia per mostrar la pàgina a la vista prèvia de l'escriptori, formatada amb el conjunt d'estils corresponent.

Seleccioneu una fletxa d'intercanvi al mig de dos elements qualsevol per canviar les posicions dels dos elements.

Els elements Article1 i Article2 es poden intercanviar simplement fent clic a la fletxa d'intercanvi entre ells.

Formateu el text, les imatges i altres elements com vulgueu per al disseny de l'escriptori.

Totes les altres opcions de format visual cobertes en el disseny de la tauleta estan disponibles.

Trieu Fitxer → Desa-ho tot per desar tots els fitxers a la disposició de la quadrícula fluida.

Quan editeu un disseny de quadrícula fluida, feu canvis al fitxer HTML així com a un full d'estil extern. L'ús de l'opció Desa-ho garanteix que heu desat tots els fitxers necessaris abans de previsualitzar-los o publicar el vostre lloc en un servidor web.

Com canviar entre dissenys a Dreamweaver

És una bona pràctica dissenyar dissenys de quadrícula fluids en aquest ordre: primer la versió mòbil, després la versió per a tauletes i finalment la versió d'escriptori. Tanmateix, podeu canviar entre aquests tres dissenys mentre perfeccioneu els vostres dissenys.

Tingueu en compte les següents regles generals i pràctiques recomanades:

• Els dissenys de quadrícula fluida es creen mitjançant consultes multimèdia que actuen com a divisors entre cadascun dels conjunts d'estils que formen els dissenys de mòbil, tauleta i escriptori.

• Quan editeu estils, heu de tenir cura d'editar els estils que corresponen a la disposició en què voleu treballar.

• Si visualitzeu els estils corresponents que es creen automàticament a la vista de codi, veureu que les amplades i altres mides s'especifiquen al quart punt decimal, per exemple, amplada: 48,2758%. Si canvieu aquests números a la vista de codi, Dreamweaver ja no els ajustarà automàticament.

• Quan creeu estils que voleu aplicar als tres dissenys, primer seleccioneu Qualsevol mitjà al tauler @Media al tauler CSS Designer,