Site-uri pentru ecrane diferite

WYSIWYG Web Builder are un designer încorporat pentru paginile web mobile.

Paginile web pentru ecrane mari sunt create prin plasarea obiectelor în pagină prin tragere. Fiecare obiect ocupă poziția sa specifică și are o dimensiune strict fixă.

Obiectele mobile trebuie ajustate în funcție de lățimea ecranului. În mod implicit, toate obiectele sunt plasate unul lângă celălalt (plutesc în document), dar există și un aspect de bandă atunci când obiectele sunt localizate în tabel (în rânduri și coloane).

Spre deosebire de pagina standard, toate obiectele mobile jQuery sunt decorate cu teme și mostre.

Crearea unei pagini Web mobile

Rețineți că spațiul de lucru va fi inițial mai mic, iar setul de instrumente utilizate se va schimba.

Puteți, ca de obicei, să trageți și să plasați obiecte în pagină (în fereastra de editare), dar nu puteți controla poziția exactă a obiectului, deoarece aceasta va fi adăugată în fluxul "flux" al paginii.
Ie Poziția obiectului de pe pagină nu este configurată manual.

Puteți controla alinierea (stânga, centrul, dreapta) a obiectelor în proprietățile paginii.
Containerele cum ar fi Pliant, Grilă de dispunere și Tab-uri au propria lor opțiune de aliniere.
Pentru a obține o idee despre cum va arăta o pagină mobilă, glisați și fixați Header, Footer și Listview pe pagină.

Veți observa că titlul va fi adăugat automat în partea de sus și că subsolul va fi în jos.
ListView (și toate celelalte obiecte) vor fi adăugate între antet și subsol.
Mai multe layout-uri avansate pot fi create cu o Grid Layout.
Tema paginii și a obiectelor poate fi setată în Proprietăți pagină.
Cele mai multe obiecte au, de asemenea, opțiunea de a schimba eșantionul de temă pentru a da un stil diferit față de restul paginii.

Dacă contactați alte pagini ale paginilor jQuery Mobile, puteți vedea, de asemenea, tranziții către pagini diferite.

Notă:
WYSIWYG Web Builder suportă, de asemenea, Responsive Web Design - Design Web Sensibil, unde puteți crea diferite layouts în aceeași pagină.

Design Web Sensibil (Responsabil Web Design)

Când creați site-uri pentru ecrane diferite, se utilizează mai multe metode.
Una dintre ele este de a crea mai multe variante ale site-ului, concepute pentru diferite dimensiuni ale ecranului.

Rețineți, totuși, că utilizarea acestor opțiuni este asociată cu probleme suplimentare.

WYSIWYG Web Builder 9 și 10 au câteva opțiuni noi pentru proiectarea site-urilor "sensibile".

WYSIWYG Web Builder 10 introduce "Responsive Web Design", care vă permite să creați o singură pagină HTML care să conțină diferite opțiuni de aspect. Fiecare versiune este optimizată pentru anumite dimensiuni ale dispozitivelor. Site-ul dvs. va răspunde dinamic la dimensiunea ecranului vizitatorului și va afișa aspectul cel mai potrivit pentru dispozitiv.
Aceste opțiuni diferite sunt numite puncte de control "puncte de întrerupere" și utilizează cerințele CSS3.

Punctul de control este o "vizualizare" separată a paginii în modul WYSIWYG Web Builder. O pagină poate avea multe puncte de control, fiecare dintre acestea fiind optimizate pentru o anumită lățime a ecranului.

Pentru a adăuga sau modifica puncte de întrerupere, dați clic pe "Gestionați puncte de întrerupere" din meniul Pagină. Pentru a comuta între punctele de control, faceți clic pe meniul derulant Breakpoints și selectați punctul de control dorit. Pentru a reveni la aspectul implicit al aspectului, selectați "Implicit".

Opțiuni diferite de aspect au același set de elemente pe pagină (text, imagini etc.) și puteți modifica poziția și dimensiunea obiectului pentru fiecare punct de control.

De asemenea, puteți adăuga conținut unic pentru anumite dimensiuni ale ecranului, ceea ce permite, de exemplu, ascunderea unor obiecte pe un ecran mai mic.

• stindard
  
• Curba este o curbă
• Text curbat - text curbil
  
• Line-line
• Bara de navigare - Bara de navigare
• Obiect OLE
• Polygon -Multifon
• Formă - Formă grafică
• Tabel - tabel
• Text Art - Text artistic
  
• Textul de ambalaje - Textul de înfășurare

Note despre designul web sensibil

Obiectele pot avea diferite dimensiuni, poziții și vizibilitate la punctele de control. Totuși, toate celelalte proprietăți vor fi exact la fel! De exemplu, dacă schimbați culoarea unui obiect, atunci acesta va fi modificat la toate punctele de control (deoarece obiectul este utilizat între toate vizualizările).

Dacă partajați un text între mai multe puncte de control, setați "format de ieșire" în opțiunea de compatibilitate la "Default", deoarece alte opțiuni optimizează textul pentru o anumită lățime.
Dacă într-adevăr trebuie să utilizați una dintre opțiunile de compatibilitate, luați în considerare utilizarea unui obiect text separat pentru fiecare punct de control. Astfel, textul poate fi optimizat pentru o anumită lățime.

Obiectele pot face parte dintr-un nivel (formular, carusel, file, acordeon, dialog). Deci, dacă mutați un obiect într-un nivel la un punct de control, atunci acesta va fi automat o parte a aceluiași nivel în celelalte puncte de control!

Dacă adăugați un nou obiect la punctul de control, acesta va fi inițial ascuns în toate celelalte puncte de control. Puteți utiliza Managerul de obiecte pentru a afișa rânduri sau coloane ascunse dacă doriți să le vedeți și pe alte puncte de control.

Dacă ștergeți un obiect din punctul de control, acesta va fi eliminat și din toate celelalte vizualizări. Dacă doriți să ascundeți un obiect, puteți utiliza Object Manager.

Puteți verifica punctele de control din browserul de desktop. Redimensionați fereastra browserului pentru a activa punctele de control.

Unele browsere au, de asemenea, instrumente pentru testarea site-urilor sensibile. De exemplu, FireFox are o viziune de design receptivă - "Modul Designer Sensibil", care poate verifica punctele de control. Consultați documentația browserului pentru mai multe detalii.

Browserele care nu acceptă interogări media CSS3 vor afișa aspectul implicit.

Pentru a deschide managerul temelor mobile, utilizați meniul Instrumente - Manager tematic mobil.

Tema jQuery mobilă este un set de mostre de culori: culorile textului, culoarea și fontul de fundal și gradient.
Puteți defini până la 26 de mostre de culori de la A la Z. Multe proprietăți CSS3 sunt acceptate, cum ar fi colțurile rotunjite, umbrele și gradienții.

Stilurile responsive sunt o nouă caracteristică în WYSIWYG Web Builder 11. Suportul adăugat pentru stiluri receptive în Managerul de stil. Puteți utiliza un font diferit, dimensiunea sau culoarea textului în punctele de control. De exemplu, utilizați un font mai mare pentru ecrane mai mici. Cu stiluri Responsive, puteți defini diferite valori pentru punctele de control.

În Managerul de stil, selectați Styl personalizat - Editați.

Cele mai multe obiecte pot avea acum diferite fonturi la punctele de control. Cele mai multe obiecte pot avea și fundaluri diferite și culori text. Unele obiecte (galerie foto, text și blog) pot avea coloane diferite în punctele de control.

Stilurile de fundal responsabile (color, imagine) au apărut în WYSIWYG Web Builder 11 și au fost aplicate paginilor. Puteți defini diferite proprietăți de fundal pentru punctele de control. Astfel, locația mobilă poate avea o culoare sau o imagine de fundal diferită.
Vedeți exemplul (modificați lățimea ferestrei browserului)

Nou în WYSIWYG Web Builder 11.
Layout Grid poate fi folosit pentru a crea coloane care ajustează automat dimensiunea ecranului. Grilă poate avea până la 12 coloane, cu dimensiunile în procente. Obiectele care sunt inserate în celulele rețelei vor deveni automat plutitoare. Acesta este un nou mod de a crea machete flexibile și receptive!

De asemenea, puteți plasa anteturi / subsoluri, utilizați straturi și carusel în grilă.

1. Nu utilizați Centrul în fereastra browserului (în centru în fereastra browserului) în combinație cu grila de localizare. Această alegere ar trebui utilizată numai pentru conținutul "fix".

2. Nu puteți schimba dimensiunea sau poziția grila de dispunere. Dimensiunea grilei depinde de conținutul acesteia.

Pentru a introduce o coloană suplimentară, faceți clic pe butonul "Adăugați". Lățimea coloanelor poate fi ajustată prin deplasarea marcatorilor între coloane.
Pentru a elimina o coloană, mai întâi selectați-o și apoi faceți clic pe Eliminare.

Fiecare coloană poate avea o aliniere proprie. Pentru a modifica alinierea, faceți clic pe coloană și apoi selectați alinierea.

Locație (Aspect)
Grila poate fi creată ca o constanță sau cu un aranjament "lichid".
Grilă lichid utilizează lățimea totală a ferestrei browserului, iar toate coloanele se vor schimba în consecință.

Adăugare (umplere)
Adăugarea determină lățimea muchiilor de pe fiecare parte a coloanei.

Punctul de întrerupere determină momentul în care locația este schimbată într-o locație mobilă / îndoită.

Adăugarea de obiecte - trageți și plasați obiectul în coloană. Rețineți că cursorul mouse-ului trebuie să fie în coloană.

Obiectele care fac parte din grila de localizare nu vor avea o poziție fixă. Ei vor "înota" în coloană.

Adăugarea de text
Când textul este adăugat la grila de dispunere, acesta va folosi automat lățimea completă a coloanei. Deci, dacă schimbați lățimea paginii, textul se va ajusta dinamic.

Adăugarea de imagini
Imaginile care fac parte din rețea pot fi fie receptive (se adaptează dimensiunii coloanei), fie pot fi de dimensiuni fixe. Acest lucru este setat în proprietățile imaginii - "Lățimea totală". "Această opțiune este disponibilă dacă imaginea face parte din grila de aspect!

Lățimea maximă determină dimensiunea maximă a imaginii când este setată la lățime maximă. Acest lucru împiedică imaginea să devină prea mare în aspectele receptive.

Notă: opțiunea Full width (Lățime întreagă) este de asemenea disponibilă pentru Rollover Image și slide (SlideShow).

Adăugați alte obiecte
Obiectele diferite au un comportament diferit în grilă. Unele obiecte sunt flexibile, deci folosesc lățimea completă a coloanei, în timp ce altele au o dimensiune fixă ​​(independent de lățimea coloanei).
Exemple de obiecte "flexibile":
• Text
• Galerie foto
• Linia orizontală
• Frame Inline
• Blog
• Elemente formular web - formularul de introducere, editbox, combobox, zona de text.
• Forme Logina
• News Feed Ticker

Exemple de obiecte "fixe":
• Forme grafice și alte instrumente de desen
• Butoane
• Obiecte de navigare

Unele obiecte nu pot face parte din grila de aspect, deoarece nu pot fi prelungite automat. De exemplu:
• Straturi
• Formulare Web
• Filele
• Acordeon.
Acest comportament se poate schimba în viitoarele actualizări.

Deși nu puteți aranja formularul web în grila aspectului, plasa însăși poate fi o formă! Pentru a facilita crearea unei forme într-o rețea, puteți forma grila direct ca formă.

Nou în WYSIWYG Web Builder 12

Dimensiunea avansată a ochiului de plasă
Suport adăugat pentru specificația flexbox.
Este posibil să creați diferite lățimi de coloane în puncte de întrerupere, să ascundeți coloanele în punctele de control și multe altele!

Pentru a seta lățimea coloanei, pur și simplu treceți la punctul de control, deschideți aspectul proprietății rețelei și schimbați lățimea coloanelor.

Utilizați un număr diferit de coloane în punctele de control.
De asemenea, puteți ascunde coloanele în punctele de control.

revărsare
Când aveți un număr diferit de coloane în punctele de control, va trebui să spuneți programului ce să facă cu coloanele care nu se încadrează într-un singur rând.
Citește mai mult (Română)

Modelul flexbox este un nou mod de aspect CSS care reprezintă o modalitate puternică de a introduce, alinia și distribui obiecte. Unitatea adaptabilă constă din recipiente Flex și Flex.
Elementele flexibile din interiorul containerului Flex pot fi stivuite orizontal sau vertical, aliniate și poziționate în diferite moduri. De asemenea, puteți întinde sau micșora obiecte pentru a umple spațiile goale.
În plus față de configurația din container, fiecare obiect are și parametrii proprii, folosind meniul -> Aranjare -> Flexbox (meniu -> comandă -> blocuri adaptabile).

Materiale de referință suplimentare

Notă: WYSIWYG Web Builder nu poate funcționa în mod credibil în modul de creare a paginilor mobile.

Articole similare

• Testați stimulatori de creștere diferiți pentru plante, legume ()

• O selecție de idei diferite pentru casă

• Țevi pentru podea cu apă caldă - informații despre diferite produse video

Trimiteți-le prietenilor: