Šiandien aktualu, kad lankytojai patogiai skaitytų jūsų interneto svetainės turinį skirtinguose įrenginiuose. Šioje pamokoje parodysime, kaip greitai ir lengvai padaryti prisitaikantį interneto svetainės dizainą.

Kas yra prisitaikantis dizainas? Prisitaikantis dizainas yra tai, kaip jūsų interneto svetainė atrodo įvairiuose įrenginiuose, mobiliųjų telefonų ar planšetinių kompiuterių ekranuose.

Galimos problemos. Jei nesilaikoma prisitaikančio interneto dizaino taisyklių, internetinės svetainės turinį bus sunku perskaityti dėl labai mažų šriftų, mažų atvaizdų ir kai kurie elementai gali užlįsti vienas ant kito.

Blokų judėjimas. Kad suprastumėte, kaip sukurti prisitaikančią interneto svetainę, svarbu suprasti, kas nutinka su jūsų turiniu mobiliųjų įrenginių ekranuose. Nuolat jūsų svetainės plotis mažėja, o turinio blokai perkeliami vienas po kito.

Perjungimo įrankiai. Nicepage programoje viršutinėje įrankių juostoje yra įrenginių piktogramos mobiliesiems vaizdams perjungti. Tai leidžia peržiūrėti ir modifikuoti kiekvieno konkretaus rodinio dizainą. Štai taip jūsų internetinė svetainė atrodys įvairiuose mobiliuosiuose įrenginiuose ir kompiuterio monitoriaus ekrane.

Pažiūrėkime, kokie populiariausi mobilieji įrenginiai („Responsive Modes“) palaikomi Nicepage programoje.

Palaikomos peržiūros galimybės. Pirmasis rodinys yra kompiuterio ekranas, tai yra plačiausia peržiūros sritis. Kitas yra nešiojamojo kompiuterio ekranas, toliau - planšetinio kompiuterio ekranas, tada horizontalus telefono ekranas ir, pagaliau, siauriausias bet vienas iš populiariausių šiuolaikinių ekranų - vertikalus telefono ekranas.

Problemų įvairiuose prietaisuose sprendimas. Dažniausias klausimas yra, kaip sukurti interneto svetaines, kurios gražiai reaguotų į prisitaikančius režimus? Jei duomenys netinka mobiliesiems įrenginiams, turite naudoti tinklelio maketus ar stulpelius. Ir mes paaiškinsime, kodėl.

Turinio pritaikymas. Taigi, kaip tinklelis (stulpeliai) padeda tinkamai rodyti turinį mobiliuosiuose įrenginiuose? Paprastai yra daug turinio duomenų, kurie, pavyzdžiui, netelpa telefono ekrane. Nicepage tinklelio maketai yra sukurti taip, kad jei ekrano plotis nėra pakankamas, tinklelio langeliai automatiškai perkeliami vienas po kito. Mes rekomenduojame naudoti tinklelio maketus, kad jie iškart pritaikytų jūsų turinį mobiliesiems įrenginiams.

Vaizdo blokai (Sections). Nicepage programoje, Naujo bloko (New Section) sąraše, dauguma iš anksto suprojektuotų skyrių jau naudoja tinklelį. Pridėjus tas skiltis, jums nekyls problemų, nes visi nustatymai mobiliesiems jau padaryti teisingai ir jums nieko nereikės daryti.

Blokų (section) pridėjimas. Pridėkite naują bloką ("Add section"). Pasirinkite "Vaizdai" ("Images"). Pasirinkite temos kategoriją „Verslas“ ("Business"). Pasirinkite stilių kairėje. Pridėkime galerijos (Gallery) bloką su 3 vaizdais. Spustelėkite "Atlikta" ("Done"). Šiek tiek pakoreguokite sekcijų kraštus. Šiame skyriuje naudojamas tinklelis su trimis langeliais. Perjungdami mobiliuosius ekranus matome langų judėjimą.

Pridedamas įvadinis blokas. Tačiau yra blokų, kuriuose yra mažiau turinio, pvz., Blokas „Įvadas“ (Introduction) (arba herojaus atvaizdas (Hero Image)). Pridėkite naują bloką. Pasirinkite „Įvadas“ ("Introduction"). Naujo bloko sąrašo viršuje pasirinkite temos kategoriją „Verslas“ ("Business"). Pasirinkite šį bloką. Spustelėkite Atlikta ("Done").

Konteineriai vietoj tinklelių. Tokiose blokuose vietoj tinklelių naudojami konteineriai. Pridėkime demonstracinį skyrių „Įvadas“ ("Introduction"). Jei reikia, sumažinkite bloko aukštį. Norėdami pamatyti rezultatą, perjunkite ekranus.

Tuščio bloko pridėjimas. Dabar sukurkime paprastą bloką su dviem langeliais, kad parodytume, jog greitai ir lengvai galima sukurti prisitaikantį interneto svetainės dizainą naudojant Nicepage programą. Čia yra blokas, kurį naudosime kaip pavyzdį. Pridėkite naują bloką (Add Section). Pasirinkite tuščią bloką ("Blank"). Padidinkite bloko aukštį. Pridėkite tinklelį ("Gird"). Pasirinkite Pridėti ("Add") -> Tinklelis ("Grid"). Sąraše pasirinkite tinklelį su dviem langeliais. Spustelėkite "Atlikta" ("Done").

Bloko modifikavimas. Pagal numatytuosius nustatymus tinkleliai pridedami su numatytuoju fonu, todėl yra lengva atpažinti langelius. Sumažinkite tinklelio aukštį. Sulygiuokite tinklelį bloke. Judant matote raudonus magnetinius kreipiklius ir skaičius, kurie padeda suderinti turinį.

Darbas su vaizdais. Pakeiskite vaizdą kairiajame langelyje, vilkdami ir numesdami atvaizdą iš vietinio aplanko. Pasirinkite tinkamą langelį. Išjunkite šio langelio užpildymą ("Fill").

Tekstų pridėjimas. Pridėkite antraštę. Spustelėkite Pridėti ("Add")-> Tekstas ("Text") -> Antraštė 2 ("Heading 2"). Pakeiskite teksto bloko plotį. Vėlgi labai praverčia magnetiniai kreiptuvai ir rodomi dydžiai. Įveskite antraštės tekstą. Pridėkite tekstą. Spustelėkite Pridėti ("Add")-> Tekstas ("Text") -> Tekstas ("Text"). Sulygiuokite tekstą. Pakeiskite tekstą.

Mygtuko pridėjimas. Pridėkite mygtuką kaip alternatyvą. Viršutiniame langelio kampe spustelėkite mažą pliusą. Pasirinkite mygtuką ("Button"). Sulygiuokite mygtuką. Įveskite mygtuko tekstą. Sulygiuokite langelio turinį.

Vaizdo patikrinimas mobiliuosiuose. Norėdami pamatyti rezultatą, perjunkite mobiliųjų  įrenginių ekranus „Mobile Views“. Matote, kad būtini prisitaikančių režimų (Responsive Modes) išdėstymo pakeitimai atliekami automatiškai.

Visiškas prisitaikymas. Turime paminėti, kad visos prisitaikymo funkcijos palaikomos visuose mobiliųjų įrenginių ekranuose. Pereikime prie telefono horizontalaus ekrano. Pakeiskite paveikslėlio apkarpymą. Dabar pakeiskite antraštės dydį.

Paslėpti / Rodyti. Galite paslėpti bet kuriuos turinio elementus, pavyzdžiui, vaizdo elementą, tam tikrame ekrane, pavyzdžiui, telefono horizontaliame ekrane. Taip pat labai lengva įjungti šį elementą atgal. Jei reikia, keiskite tos pačios eilės langelių vietas.

Kurti be konteinerių. Dabar apžvelgsime dažniausias pasitaikymo klaidas, kurias žmonės daro kurdami maketus. Galite nenaudoti tinklelį. Nicepage programoje tai įmanoma be jokių apribojimų, tačiau tada kiekviename mobiliajame įrenginio ekrane prireiks atlikti labai daug darbo ir išdėstymo modifikacijų.

Blokų (Section) pridėjimas. Pažiūrėkime į tai. Pridėkite tuščią (Blank) bloką. Padidinkite bloko aukštį. Pridėkite paveikslėlį. Spustelėkite Pridėti (Add)-> Paveikslėlis (Picture). Sulygiuokite vaizdą ir sumažinkite jo dydį. Pasirinkite vaizdą (Image).

Turinio pridėjimas ir modifikavimas. Pridėti antraštę 2 (Heading 2). Spustelėkite Pridėti (Add) -> Tekstas (Text) -> Antraštė 2 (Heading 2). Pakeiskite antraštės teksto bloko dydį ir vietą. Matote, kitaip nei tinklelio makete, tai yra sunkiau. Pakeiskite antraštės tekstą. Pridėkit tekstą. Spustelėkite Pridėti (Add) -> Tekstas (Text) -> Tekstas (Text). Pakeiskite tekstą. Pridėti mygtuką (button). Spustelėkite Pridėti (Add)-> Mygtukas (Button). Sulygiuokite mygtuką. Pakeiskite mygtuko tekstą.

Vaizdų prisitaikymas mobiliesiems. Perjunkite mobiliųjų įrenginių ekranus. Nešiojamojo kompiuterio (Laptop) režime paspauskite mygtuką iš dešinę. Planšetinio kompiuterio režime mygtukas vėl yra ne savo vietoje. Dar blogesnė padėtis yra telefonų ekranuose. Telefono horizontaliame ekrane teksto blokas perdengia vaizdą, nes nepakanka pločio. Rankiniu būdu perkelkite, pakeiskite dydį ir sulygiuokite teksto blokus ir mygtuką. Pakartokite visus judesius vertikalaus telefono ekrane. Primename, kad palaikomos visos redagavimo funkcijos. Paslėpkime ir šio bloko vaizdą telefono horizontaliame ekrane.

Mes baigėme. Taigi ištrinkime šį bloką. Atidarykite meniu skyrių , esantį programos įrankių skydelyje esančiame iš kairės, ir pasirinkite Trinti (Delete).

Perdengimo stilius . Yra modernių blokų su sudėtingais išdėstymais, kurie ne visai dera prie tinklelio išdėstymo. Taip pat šiais laikais labai populiarus yra internetinių svetainių dizainas su sudėtingą struktūra. Nicepage interneto svetainių kūrimo programoje tinkleliai paprastai nenaudojami blokuose su sudėtinga struktūra. Todėl tokie blokai mobiliems ekranams taip pat yra iš anksto sukurti.

Blokų su perdengimais (overlapping) pridėjimas. Pridėkime bloką, kuriame yra perdengimas. Pridėkite naują bloką (section). Pasirinkite Vaizdai (Images). Viršuje pasirinkite temų kategoriją „Verslas“ ("Business"). Kairėje pasirinkite stilių „Perdengimas“ ("Overlapping"). Pasirinkite bloką. Spustelėkite Atlikta (Done). Matote, kad šio bloko išdėstymas yra sukurtas naudojant konteinerius. Norėdami pamatyti, kaip juda blokai, perjunkite mobiliųjų įrenginių ekranus.

Pagaliau peržiūrėkite puslapį ("Preview").

Tikimės, kad jums patiko ši pamoka apie tai, kaip Nicepage programoje sukurti prisitaikantį interneto svetainės dizainą.