Uus vedelikuvõrgu paigutus Dreamweaver CS6

• Mai 16, 2024

Kui arendate välja lihtsaid veebisaite või keerulist CMS-i, on teil alati meeles see näriv küsimus - kas ma teen kõik endast oleneva, et sihtida igat tüüpi vaatajaskondi ja ekraani eraldusvõimet? Noh, Dreamweaver^R CS6-l on uued funktsioonid, mis muudavad selle ülesande lihtsamaks.

Varem oleks vaja iga ekraani eraldusvõime jaoks luua erinev CSS-fail ja vajaliku CSS-faili määramiseks kasutada meediumipäringut. See oli väga aeganõudev ja lisas saidi arenduse üldkuludele, mis oli halb uudis nii arendajale kui ka kliendile. Dreamweaver CS6 on kohandatud veebisaitide loomisel palju ära kulutanud.

See uus töövooprotsess sõltub uuest vedelikuvõrgu paigutusest, mis on mõnevõrra sarnane teie veebisaidi iga ekraani eraldusvõime vaikimisi paigutuse ja tüpograafiaga käivitusmallile.

1. Klõpsake lihtsalt menüüribal Fail - uus vedeliku ruudustiku paigutus.
   
   
2. Dialoogiboksis Uus dokument näete selle uue adaptiivse veebilehe vaikeseadeid. Laius on fikseeritud iga erineva ekraani eraldusvõime jaoks.
   
   Mobiil 480 pikslit
   Tabel 768px
   Töölaua 1232 pikslit
   
   
3. Teil on võimalus muuta vaikimisi veergude arvu ja veerulaiuse protsenti protsenti iga ekraani eraldusvõime korral. Vaikimisi on:
   
   Mobiilne 5 veergu - 91%
   Tahvelarvuti 8 veergu - 93%
   Desktop 10 veergu - 90%
   
   
4. Vaikimisi tööala võib näidata koodi ja kujundusvaateid. Nagu näete kujundusvaates, on uuel failil juba üks div-silt. Div-i vaikenumbrit ja klassi saate muuta paneelil Atribuudid.
   
   Muidugi vajab teie veebisait rohkem kui ühte jaotist. Seega saame päise, navigeerimise, põhi-, kõrvale- ja jaluse jaoks lisada veel divs.
   
   
5. Uue jaotise lisamiseks valige paneelil Sisesta käsk Vedeliku ruudustiku paigutuse jagamise silt.
   
   
6. Dialoogiboksis saate sildi ID-le nime panna.
   
   
7. Kui oleme oma lehe kõik olulisemad jaotised lisanud, võime neid klõpsata ja lohistada, et ruudustikku ümber paigutada.
   
   

On soovitatav, et hakkaksime oma saidi mobiiliversiooni üles ehitama ja liikuma suuremate mõõtmete juurde. Töötades visuaalseid tulemusi saate hõlpsalt võrrelda, kasutades eraldusvõime lülitit mobiili, tahvelarvuti ja töölaua jaoks.

Paigutuse salvestamisel saame ühe HTML5- ja CSS3-faili, mis töötab kõigi kolme ekraani eraldusvõime korral. Kui vaatame nende failide sisemust, leiame teavet selle kohta, kuidas failid meie adaptiivset veebilehte loovad.

* Adobe edastas mulle selle tarkvara koopia ülevaatamiseks.

Autoriõigus 2018 Adobe Systems Incorporated. Kõik õigused kaitstud. Adobe toote ekraanipilt (ed) kordustrükis Adobe Systems Incorporated loal. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper on / on kas [a] registreeritud kaubamärk (id) või Adobe Systems Incorporated'i kaubamärk (id) Ameerika Ühendriikides ja / või teistes riikides.

Video Juhiseid: BOSS BEEBI - uus trailer! (Mai 2024).