Jauns šķidruma režģa izkārtojums Dreamweaver CS6

• Aprīlis 29, 2024

Ja jūs izstrādājat vienkāršas vietnes vai sarežģītas CMS, jums vienmēr prātā ir šis nagging jautājums - vai es daru visu iespējamo, lai mērķētu uz visu veidu auditorijām un ekrāna izšķirtspēju? Nu, Dreamweaver^R CS6 ir jaunas funkcijas, kas šo uzdevumu padara vieglāku.

Agrāk par katru atšķirīgo ekrāna izšķirtspēju būtu jāizveido atšķirīgs CSS fails un, lai piešķirtu nepieciešamo CSS failu, jāizmanto multivides vaicājums. Tas bija ļoti laikietilpīgs un pievienoja vietņu izstrādes kopējām izmaksām, kas bija sliktas ziņas gan izstrādātājam, gan klientam. Dreamweaver CS6 ir ieguldījis daudz laika adaptīvu vietņu izveidē.

Šis jaunais darbplūsmas process ir atkarīgs no jaunā šķidruma režģa izkārtojuma, kas nedaudz līdzinās sākuma veidnei ar noklusējuma izkārtojumiem un tipogrāfiju katram jūsu vietnes ekrāna izšķirtspējam.

1. Vienkārši izvēlnes joslā noklikšķiniet uz Fails - Jauns šķidruma režģa izkārtojums.
   
   
2. Dialoglodziņā Jauns dokuments redzēsit šīs jaunās adaptīvās tīmekļa lapas noklusējuma iestatījumus. Katrai no atšķirīgajām ekrāna izšķirtspējām ir noteikts platums.
   
   Mobilais 480 pikseļi
   768px tabula
   Darbvirsma 1232 pikseļi
   
   
3. Katrai ekrāna izšķirtspējai ir iespēja mainīt noklusējuma kolonnu skaitu un kolonnu platuma procentus. Noklusējuma vērtības ir šādas:
   
   5 kolonnas mobilajām ierīcēm - 91%
   Planšetdatora 8 slejas - 93%
   Darbvirsmas 10 slejas - 90%
   
   
4. Noklusējuma darbvieta var parādīt kodu un dizaina skatus. Kā redzat dizaina skatā, jaunajam failam jau ir viens div tags. Jūs varat mainīt noklusējuma ID un klasi rekvizītu panelī.
   
   Protams, jūsu vietnei būs vajadzīgas vairākas sadaļas. Tātad mēs varam pievienot vairāk divs galvenes, navigācijas, galvenās, malas un kājenes.
   
   
5. Lai pievienotu jaunu dalījumu, panelī Ievietot izvēlieties Ievietot šķidruma režģa izkārtojuma dalīšanas tagu.
   
   
6. Dialoglodziņā varat nosaukt tagu ID.
   
   
7. Kad mūsu lapai ir pievienoti visi galvenie dalījumi, mēs varam noklikšķināt un velciet tos, lai tos pārvietotu režģī.
   
   

Tiek ierosināts sākt veidot mūsu vietnes mobilo versiju un pāriet uz lielākiem izmēriem. Jūs varat viegli salīdzināt vizuālos rezultātus, strādājot, izmantojot izšķirtspējas pārslēdzēju mobilajām ierīcēm, planšetdatoriem un darbvirsmām.

Saglabājot izkārtojumu, mēs iegūstam vienu HTML5 un CSS3 failu, kas darbosies visās trīs ekrāna izšķirtspējās. Apskatot šos failus, mēs varam atrast informāciju par to, kā faili darbojas, lai izveidotu mūsu adaptīvo vietni.

* Pārskatīšanas nolūkos Adobe man iesniedza šīs programmatūras kopiju.

Autortiesības 2018 Adobe Systems Incorporated. Visas tiesības aizsargātas. Adobe produkta ekrānuzņēmums (-i) ir pārpublicēts ar Adobe Systems Incorporated atļauju. 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 ir / ir vai nu [a] reģistrēta preču zīme (-es), vai Adobe Systems Incorporated preču zīme (-es) Amerikas Savienotajās Valstīs un / vai citās valstīs.