Šķidruma režģa izkārtojumus padara tik jaudīgus tas, ka programmā Dreamweaver varat mainīt elementu novietojumu un izmēru, lai tie tiktu sakārtoti atšķirīgi katram no trim izkārtojumiem, radot dizainu, kas ir optimizēts mobilo ierīču, planšetdatoru un galddatoru ekrāniem. Lai mainītu elementa platumu vai pozīciju, izmantojiet Dreamweaver vizuālos rīkus.
Dreamweaver iestata stilus tā, lai tie iet cauri katram no trim izkārtojumiem. Tas nozīmē, ka jums vispirms ir jāiegūst mobilais dizains tā, kā vēlaties. Pēc tam pārejiet uz planšetdatora izkārtojumu un mainiet tikai tos elementus, kurus vēlaties planšetdatorā parādīt citādi. Visbeidzot, skatiet darbvirsmas izkārtojumu. Atkal mainiet tikai tos elementus, kurus vēlaties attēlot atšķirīgi.
Lai rediģētu mobilā tālruņa izkārtojumu, izpildiet šos norādījumus.
Darbvietas apakšā atlasiet opciju Mobilais izmērs.
Darbvietas apgabals mainās, lai lapa tiktu rādīta mobilajā priekšskatījumā, formatēta ar atbilstošo stilu kopu.
Piezīme . Trīs mazās ikonas darbvietas apakšējā labajā stūrī nodrošina piekļuvi mobilajām ierīcēm, planšetdatoriem un darbvirsmas priekšskatījumiem. Pārslēdzoties no viena uz otru, jūs maināt ne tikai displeja apgabala lielumu, bet arī atbilstošo jūsu lapai lietoto stilu kopu.
Pievienojiet tekstu un attēlus elementiem plūstošā režģa izkārtojumā tāpat, kā pievienotu saturu jebkurai citai lapai pakalpojumā Dreamweaver.
Varat kopēt un ielīmēt tekstu, kā arī lietot HTML tagus un CSS formatējumu.
Dizaina apgabalā atlasiet elementu.
Atbilstošais CSS stils tiek parādīts panelī Selectors, kur to var rediģēt.
Izveidojiet, rediģējiet un lietojiet stilus tekstam un attēliem tāpat kā jebkurā citā Dreamweaver lapas dizainā.
Stili, kurus vēlaties lietot visiem trim izkārtojumiem, ir jāizveido, kad ir atlasīts mobilais izkārtojums, jo šie stili attieksies uz visiem trim dizainiem, ja vien tos neaizstās cits planšetdatora vai darbvirsmas izkārtojumā izveidots stils.
Kad mobilā tālruņa izkārtojums ir tāds, kādu vēlaties, pārejiet uz planšetdatora izmēra izkārtojumu un rediģējiet šim izkārtojumam piemērotos stilus.
Lai rediģētu planšetdatora izkārtojumu, izpildiet šos norādījumus.
Darbvietas apakšējā labajā stūrī atlasiet opciju Planšetdatora izmērs.
Darbvietas apgabals mainās, lai planšetdatora priekšskatījumā tiktu rādīta lapa, kas formatēta ar atbilstošo stilu kopu.
Atlasiet elementu, kuru vēlaties mainīt par kolonnu, un izmantojiet labajā pusē esošos turies, lai velciet kolonnu vajadzīgajā platumā.
Dreamweaver nodrošina vizuālās rediģēšanas rīku kolekciju, kas atvieglo šķidruma režģa elementu izmēra un novietojuma pielāgošanu.
Ja velkat jebkura šķidra režģa elementa turi no kreisās puses uz labo, tiek pievienota piemales vieta, kas liek elementam palikt pa labi no izkārtojuma. Ja velkat rokturi no labās puses uz kreiso, tiek mainīts elementa lielums.
Atlasiet mainītu elementu, kuru vēlaties pārvietot, un pēc tam noklikšķiniet uz bultiņas Pārvietot uz augšu pa rindu.
Elements pārvietojas uz augšu un izlīdzinās blakus elementam virs tā.
Lai pārvietotu elementu uz leju, noklikšķiniet uz bultiņas Sāk jaunu rindu.
Piezīme. Noklikšķiniet uz katras no četrām ikonām, lai paslēptu elementu, pārvietotu to uz augšu vai uz leju, dublētu vai dzēstu to.
Kad esat ieguvis mobilo un planšetdatoru izkārtojumus, kā vēlaties, pārejiet uz darbvirsmas izmēra izkārtojumu un rediģējiet stilus, kas attiecas uz lielāko no trim izkārtojumiem.
Lai rediģētu darbvirsmas izkārtojumu, izpildiet šos norādījumus.
Darbvietas apakšējā labajā stūrī atlasiet opciju Darbvirsmas izmērs.
Darbvietas apgabals mainās, lai lapa tiktu parādīta darbvirsmas priekšskatījumā, formatēta ar atbilstošo stilu kopu.
Atlasiet Apmainīt bultiņu jebkuru divu elementu vidū, lai mainītu abu elementu pozīcijas.
1. un 2. panta elementus var apmainīt, vienkārši noklikšķinot uz bultiņas Apmainīt starp tiem.
Formatējiet tekstu, attēlus un citus elementus atbilstoši darbvirsmas dizainam.
Ir pieejamas visas pārējās planšetdatora izkārtojumā ietvertās vizuālās formatēšanas opcijas.
Izvēlieties Fails → Saglabāt visu, lai saglabātu visus failus šķidrā režģa izkārtojumā.
Rediģējot mainīgu režģa izkārtojumu, jūs veicat izmaiņas HTML failā, kā arī ārējā stila lapā. Izmantojot opciju Saglabāt visu, tiek nodrošināts, ka esat saglabājis visus nepieciešamos failus pirms to priekšskatīšanas vai vietnes publicēšanas tīmekļa serverī.
Laba prakse ir veidot plūstošus režģa izkārtojumus šādā secībā: vispirms mobilā versija, pēc tam planšetdatora versija un visbeidzot darbvirsmas versija. Tomēr, pilnveidojot dizainu, varat pārslēgties starp šiem trim izkārtojumiem.
Ņemiet vērā dažus vispārīgus noteikumus un paraugpraksi:
Plūsmas režģa izkārtojumi tiek izveidoti, izmantojot multivides vaicājumus, kas darbojas kā sadalītāji starp katru stilu kopu, kas formatē mobilo ierīču, planšetdatoru un galddatoru izkārtojumus.
Rediģējot stilus, jums ir jārūpējas, lai rediģētu stilus, kas atbilst izkārtojumam, pie kura vēlaties strādāt.
Ja skatāt atbilstošos stilus, kas tiek automātiski izveidoti koda skatā, jūs redzēsiet, ka platumi un citi izmēri ir norādīti līdz ceturtajai zīmei aiz komata, piemēram, platums: 48,2758%. Ja mainīsit šos skaitļus koda skatā, Dreamweaver tos vairs automātiski nepielāgos jūsu vietā.
Kad veidojat stilus, kurus vēlaties lietot visiem trim izkārtojumiem, vispirms panelī CSS Designer panelī @Media atlasiet Jebkurš multivide,
Photoshop CS6 saglabā visas iepriekšējo versiju funkcijas un pievieno jaunas, nodrošinot labāku lietotāja pieredzi, radošumu un produktivitāti. Iepazīstiet jaunas rīku iespējas un komandas.
Uzziniet, kā efektīvi sapludināt slāņus programmā Photoshop CS6, lai samazinātu faila izmēru un uzlabotu veiktspēju, izmantojot slāņu sapludināšanu un attēla saplacināšanu.
Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.
Kad esat importējis savus attēlus programmā Adobe XD, jums nav lielas rediģēšanas vadības iespējas, taču varat mainīt attēlu izmērus un pagriezt tos tāpat kā jebkuru citu formu. Varat arī viegli noapaļot importēta attēla stūrus, izmantojot stūra logrīkus. Attēlu maskēšana Nosakot slēgtu formu […]
Kad jūsu Adobe XD projektā ir teksts, varat sākt mainīt teksta rekvizītus. Šie rekvizīti ietver fontu saimi, fonta lielumu, fonta svaru, līdzinājumu, rakstzīmju atstarpes (rindstarpas un izsekošanu), rindstarpu (vadošais), aizpildījumu, apmali (pārvilkšanu), ēnu (krītošā ēna) un fona aizmiglojumu. Tātad, apskatīsim, kā šie rekvizīti tiek piemēroti. Par lasāmību un fontu […]
Tāpat kā programmā Adobe Illustrator, Photoshop zīmējumu dēļi nodrošina iespēju vienā dokumentā izveidot atsevišķas lapas vai ekrānus. Tas var būt īpaši noderīgi, ja veidojat ekrānus mobilajai lietojumprogrammai vai nelielai brošūrai. Jūs varat domāt par zīmējumu dēli kā īpašu slāņu grupas veidu, kas izveidots, izmantojot paneli Slāņi. Tā […]
Daudzi rīki, kas atrodami panelī InDesign Tools, tiek izmantoti līniju un formu zīmēšanai lapā, tāpēc jums ir vairāki veidi, kā izveidot interesantus zīmējumus savām publikācijām. Programmā InDesign varat izveidot jebko, sākot no pamata formām līdz sarežģītiem zīmējumiem, tā vietā, lai izmantotu zīmēšanas programmu, piemēram, […]
Teksta iesaiņošana programmā Adobe Illustrator CC nav gluži tas pats, kas dāvanas iesaiņošana — tas ir vienkāršāk! Teksta aplaušana liek tekstam aptīt grafiku, kā parādīts šajā attēlā. Šī funkcija var pievienot mazliet radošuma jebkuram gabalam. Grafika liek tekstam aptīt to. Vispirms izveidojiet […]
Veidojot dizainu programmā Adobe Illustrator CC, bieži vien ir nepieciešams precīzs izmērs (piemēram, 2 x 3 collas). Pēc formas izveides vislabākais veids, kā mainīt tās izmērus precīziem izmēriem, ir izmantot pārveidošanas paneli, kas parādīts šajā attēlā. Atlasiet objektu un pēc tam izvēlieties Logs → Transform to […]
Varat izmantot programmu InDesign, lai izveidotu un modificētu QR koda grafiku. QR kodi ir svītrkoda veids, kurā var saglabāt informāciju, piemēram, vārdus, ciparus, URL vai cita veida datus. Lietotājs skenē QR kodu, izmantojot savu kameru un programmatūru ierīcē, piemēram, viedtālrunī, un programmatūra izmanto […]
