Nova postavka mrežice s tekućinom Dreamweaver CS6

• Travanj 30, 2024

Ako razvijate jednostavne web stranice ili složene CMS, uvijek imate na umu ovo gadno pitanje - činim li sve što mogu kako bih ciljao na sve vrste publike i razlučivosti zaslona? Pa, Dreamweaver^R CS6 ima nove značajke koje čine ovaj lakši zadatak.

U prošlosti bi trebalo kreirati različitu CSS datoteku za svaku različitu razlučivost zaslona i koristiti medijski upit za dodjelu potrebne CSS datoteke. Ovo je zahtijevalo mnogo vremena i dodalo ukupne troškove razvoja web mjesta, što je bila loša vijest i za programera i za klijenta. Dreamweaver CS6 uzeo je mnogo truda izradom prilagodljivih web stranica.

Ovaj novi tijek rada ovisi o novom rasporedu rešetke tekućine koji je pomalo kao predložak pokretača sa zadanim izgledima i tipografijom za svaku rezoluciju zaslona za vaše web mjesto.

1. Samo kliknite Datoteka - Novi raspored mrežnog fluida iz izbornika Menubar.
   
   
2. U dijaloškom okviru Novi dokument vidjet ćete zadane postavke za ovu novu prilagodljivu web stranicu. Širina je fiksna za svaku od različitih rezolucija zaslona.
   
   Mobilni 480px
   Tablica 768px
   Desktop 1232px
   
   
3. Imate mogućnost promijeniti zadani broj stupaca i postotak širine stupca za svaku razlučivost zaslona. Zadani su iznosi:
   
   5 stupaca za mobilne uređaje - 91%
   8 stupaca tableta - 93%
   10 stupaca radne površine - 90%
   
   
4. Zadani radni prostor može prikazati kod i prikaze dizajna. Kao što možete vidjeti u dizajnu, nova datoteka već ima jednu div oznaku. Možete promijeniti zadani ID i klasu za div na ploči Svojstva.
   
   Naravno, vašoj će web stranici trebati više div. Tako možemo dodati još div-ova za zaglavlje, navigaciju, glavnu stranu, u stranu i podnožje.
   
   
5. Da biste dodali novi div, na ploči Umetanje odaberite Umetni Fvid Grid Layout Div oznaku.
   
   
6. U dijaloškom okviru možete imenovati ID oznake.
   
   
7. Kad smo dodali sve glavne div-ove za našu stranicu, možemo ih kliknuti i povući kako bismo ih promijenili unutar mreže.
   
   

Predlaže se da započnemo s izgradnjom mobilne verzije našeg web mjesta i premjestimo na veće veličine. Lako možete usporediti vizualne rezultate dok radite pomoću rezolucijske preklopnice za mobilne, tabletne i radne površine.

Kada spremimo svoj izgled, dobit ćemo jednu HTML5 i CSS3 datoteku koja će raditi za sve tri rezolucije zaslona. Ako pogledamo unutar tih datoteka, možemo pronaći informacije o funkcioniranju datoteka za stvaranje naše prilagodljive web stranice.

* Adobe mi je pružio kopiju ovog softvera radi pregleda.

Autorska prava 2018. Adobe Systems Incorporated. Sva prava pridržana. Snimke zaslona Adobe proizvoda preispisane su uz dozvolu tvrtke Adobe Systems Incorporated. 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 i Flash Paper je ili su [a] registrirani zaštitni znak (i) ili zaštitni znak (Adobe) tvrtke Adobe Systems Incorporated u Sjedinjenim Državama i / ili drugim zemljama.

Upute Video: Putz Tamás - Csak a kék - újabb fogós változatokban! (Travanj 2024).