Noua structură a fluidelor Grid Dreamweaver CS6

• Mai 11, 2024

Dacă dezvoltați site-uri web simple sau CMS complexe, aveți întotdeauna în minte această întrebare neplăcută - fac tot ce pot pentru a viza toate tipurile de audiențe și rezoluții de ecran? Ei bine, Dreamweaver^R CS6 are noi caracteristici care fac din aceasta o sarcină mai ușoară.

În trecut, ar trebui să se creeze un fișier CSS diferit pentru fiecare rezoluție de ecran diferită și să se utilizeze interogarea media pentru a atribui fișierul CSS necesar. Aceasta a consumat foarte mult timp și s-a adăugat la costul general al dezvoltării site-ului, ceea ce a fost o veste proastă atât pentru dezvoltator, cât și pentru client. Dreamweaver CS6 și-a luat o mare parte din forța de muncă creând site-uri web adaptive.

Acest nou proces de flux de lucru depinde de noua dispunere a grilelor de fluide, care este oarecum ca un șablon de început cu machete și tipografie implicite pentru fiecare rezoluție de ecran pentru site-ul dvs. web.

1. Doar faceți clic pe File - New Layer Grid Layout din Menubar.
   
   
2. În caseta de dialog Document nou, veți vedea valorile implicite pentru această nouă pagină web adaptivă. Lățimea este fixată pentru fiecare dintre diferitele rezoluții ale ecranului.
   
   480px mobil
   Tabelul 768px
   Desktop 1232px
   
   
3. Aveți opțiunea de a modifica numărul implicit de coloane și procentul de lățime a coloanei pentru fiecare rezoluție a ecranului. Valorile implicite sunt:
   
   Mobile 5 coloane - 91%
   Tabletă 8 coloane - 93%
   10 coloane desktop - 90%
   
   
4. Spațiul de lucru implicit poate afișa codul și vizualizările de proiectare. După cum puteți vedea în vizualizarea de proiectare, noul fișier are deja o etichetă div. Puteți modifica ID-ul și clasa implicite pentru div din panoul Proprietăți.
   
   Desigur, pagina dvs. web va avea nevoie de mai multe div. Deci, putem adăuga mai multe div-uri pentru antet, navigare, principal, deoparte și subsol.
   
   
5. Pentru a adăuga o nouă divizare, alegeți Introduceți tag-ul de distribuție a fluidului de grilă în panoul Insert.
   
   
6. În caseta de dialog, puteți denumi ID-ul pentru etichetă.
   
   
7. Când am adăugat toate div-urile principale pentru pagina noastră, putem face clic și trage-le pentru a le repoziționa în grilă.
   
   

Este sugerat să începem să construim versiunea mobilă a site-ului nostru și să trecem la dimensiuni mai mari. Puteți compara cu ușurință rezultatele vizuale pe măsură ce lucrați utilizând Rezoluția Comutator pentru rezoluții pentru mobil, tabletă și desktop.

Când ne salvăm aspectul, obținem un fișier HTML5 și CSS3 care va funcționa pentru toate cele trei rezoluții ale ecranului. Dacă aruncăm o privire în aceste fișiere, putem găsi informații despre modul în care funcționează fișierele pentru a crea pagina noastră web adaptivă.

* Adobe mi-a furnizat o copie a acestui software în scop de revizuire.

Copyright 2018 Adobe Systems Incorporated. Toate drepturile rezervate. Captura (ecranele) de produs Adobe tipărite cu permisiunea Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Elementele Premiere, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst și Flash Paper este / sunt [o] marcă înregistrată [sau] sau o marcă comercială a Adobe Systems Incorporated în Statele Unite și / sau în alte țări.