Nova postavitev mrežice s tekočinami Dreamweaver CS6

• April 26, 2024

Če razvijate preprosta spletna mesta ali zapletene CMS, imate v mislih vedno to hudomušno vprašanje - ali delam vse, kar lahko, da ciljam na vse vrste občinstva in ločljivosti zaslona? No, Dreamweaver^R CS6 ima nove funkcije, zaradi katerih je to lažja naloga.

V preteklosti bi morali ustvariti drugačno datoteko CSS za vsako različno ločljivost zaslona in uporabiti poizvedbo medijev za dodelitev zahtevane datoteke CSS. To je zelo zamudno in prispevalo k skupnim stroškom razvoja spletnega mesta, kar je bila slaba novica tako za razvijalca kot za stranko. Dreamweaver CS6 je vzel večino dela pri ustvarjanju prilagodljivih spletnih strani.

Ta nov potek dela je odvisen od nove postavitve tekočinskih mrež, ki je nekako podobna začetni predlogi s privzetimi postavitvami in tipografijo za vsako ločljivost zaslona vašega spletnega mesta.

1. Preprosto kliknite File (Datoteka) - New Lidout Lidout Layout iz menija Menubar.
   
   
2. V pogovornem oknu Nov dokument boste videli privzete nastavitve za to novo prilagodljivo spletno stran. Širina je določena za vsako od različnih ločljivosti zaslona.
   
   Mobilni 480px
   Tabela 768px
   Namizje 1232px
   
   
3. Za vsako ločljivost zaslona lahko spremenite privzeto število stolpcev in odstotek širine stolpcev. Privzete vrednosti so:
   
   5 stolpcev za mobilne naprave - 91%
   8 stolpcev tabličnega računalnika - 93%
   10 stolpcev - 90%
   
   
4. Privzeti delovni prostor lahko prikazuje kodo in oblikovalske poglede. Kot lahko vidite v oblikovalskem pogledu, ima nova datoteka že eno oznako div. Na plošči Lastnosti lahko spremenite privzeti ID in razred za div.
   
   Seveda bo vaša spletna stran potrebovala več kot en div. Tako lahko dodamo več divjih vrst za glavo, navigacijo, glavno stran, stran in nogo.
   
   
5. Če želite dodati nov div, na plošči Vstavljanje izberite Insert Fluid Grid Layout Div Tag.
   
   
6. V pogovornem oknu lahko poimenujete ID za oznako.
   
   
7. Ko na našo stran dodamo vse glavne divjine, jih lahko kliknemo in povlečemo, da jih postavimo v mrežo.
   
   

Predlagamo, da začnemo graditi mobilno različico našega spletnega mesta in se premakniti na večje velikosti. Vizualne rezultate med delom lahko preprosto primerjate z ločljivostjo ločljivosti za ločljivosti za mobilne, tablične in namizne računalnike.

Ko shranimo svojo postavitev, dobimo eno datoteko HTML5 in CSS3, ki bo delovala za vse tri ločljivosti zaslona. Če si ogledamo te datoteke, lahko najdemo informacije o tem, kako datoteke delujejo, da ustvarijo našo prilagodljivo spletno stran.

* Adobe mi je v pregled dal mojo kopijo te programske opreme.

Avtorske pravice 2018 Adobe Systems Incorporated. Vse pravice pridržane. Posnetki zaslona izdelkov Adobe so bili ponatisnjeni z dovoljenjem 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, Prispevaj, Captivate, Flash Catalyst in Flash Paper so ali so [a] registrirana blagovna znamka (-e) ali blagovna znamka Adobe Systems Incorporated v Združenih državah Amerike in / ali drugih državah.