Naujas skysčių tinklelio išdėstymas „Dreamweaver CS6“

• Balandis 18, 2024

Jei kuriate paprastas svetaines ar sudėtingas CMS, visada galvoje kyla šis nerimastingas klausimas - ar aš darau viską, ką galiu, kad nukreipčiau į visų tipų auditorijas ir ekrano skiriamąją gebą? Na, „Dreamweaver“^R CS6 turi naujų funkcijų, kurios palengvina šią užduotį.

Anksčiau kiekvienam skirtingam ekrano skyriui reikėjo sukurti skirtingą CSS failą ir naudoti reikiamą CSS failą naudojant daugialypės terpės užklausą. Tai užtruko daug laiko ir pridėjo prie bendrų svetainių kūrimo išlaidų, o tai buvo bloga žinia tiek kūrėjui, tiek klientui. „Dreamweaver CS6“ atėmė daug darbo kuriant adaptyvias svetaines.

Šis naujas darbo eigos procesas priklauso nuo naujojo skysčių tinklelio išdėstymo, kuris yra panašus į pradinį šabloną su numatytaisiais išdėstymais ir tipografija kiekvienai jūsų svetainės ekrano raiškai.

1. Tiesiog meniu spustelėkite juostą Failas - Naujas skysčio tinklelio išdėstymas.
   
   
2. Dialogo lange Naujas dokumentas matysite numatytuosius šio naujo adaptuoto tinklalapio parametrus. Plotis nustatomas atsižvelgiant į kiekvieną skirtingą ekrano skiriamąją gebą.
   
   Mobilus 480 pikselių
   Lentelė 768px
   Stalinis 1232 pikselių
   
   
3. Jūs turite galimybę pakeisti numatytąjį stulpelių skaičių ir stulpelio pločio procentą kiekvienai ekrano skiriamąja gebai. Numatytosios yra:
   
   5 stulpeliai mobiliesiems - 91%
   8 tablečių stulpeliai - 93 proc.
   Stulpeliai 10 stulpelių - 90%
   
   
4. Numatytoji darbo vieta gali rodyti kodą ir dizaino rodinius. Kaip matote dizaino rodinyje, naujas failas jau turi vieną „div“ žymą. „Divies“ numatytąjį ID ir klasę galite pakeisti „Properties“ skyde.
   
   Žinoma, jūsų tinklalapiui reikės daugiau nei vieno skyriaus. Taigi galime pridėti daugiau antraščių, naršymo, pagrindinės, nuošalės ir poraštės dalių.
   
   
5. Norėdami pridėti naują skyrių, skydelyje „Įterpti“ pasirinkite Įterpti skysčio tinklelio išdėstymo „Div Tag“.
   
   
6. Dialogo lange galite pavadinti žymos ID.
   
   
7. Pridėję visus pagrindinius puslapio puslapius, galime juos spustelėti ir vilkti, kad galėtumėte juos pakeisti tinklelyje.
   
   

Siūloma pradėti kurti mobiliąją mūsų svetainės versiją ir pereiti prie didesnių dydžių. Dirbdami galite lengvai palyginti vaizdinius rezultatus naudodami „Resolution Switcher“, skirtą mobiliesiems, planšetiniams kompiuteriams ir darbalaukiui.

Kai išsaugome savo išdėstymą, gauname vieną HTML5 ir CSS3 failą, kuris veiks visoms trims ekrano skiriamosioms dalims. Pažvelgę ​​į šiuos failus, galime rasti informacijos apie tai, kaip failai veikia kuriant mūsų adaptyvųjį tinklalapį.

* „Adobe“ man pateikė šios programinės įrangos kopiją peržiūros tikslais.

Autorių teisės 2018 m. „Adobe Systems Incorporated“. Visos teisės saugomos. „Adobe“ produkto ekrano kopija (-os) perspausdinta gavus „Adobe Systems Incorporated“ leidimą. „Adobe“, „Photoshop“, „Photoshop Album“, „Photoshop Elements“, „Illustrator“, „InDesign“, „GoLive“, „Acrobat“, „Cue“, „Premiere Pro“, „Premiere Elements“, „Bridge“, „After Effects“, „InCopy“, „Dreamweaver“, „Flash“, „ActionScript“, „Fejerverkai“, „Prisidėkite“, „Captivate“, „Flash Catalyst“ ir „Flash“ popierius yra (yra) registruotas (-i) prekės ženklas (-ai) arba „Adobe Systems Incorporated“ prekės ženklas (-ai) JAV ir (arba) kitose šalyse.