Zhvillimi i faqes në internet

Për çdo stilist që u përball me detyrën tjetër të paraqitjes faqosje adaptive, nevojiten rrjeta. Në shumicën e rasteve, merret bootstrap-i i vjetër i mirë dhe div-të me klasa si col-xs-6 col-sm-4 col-md-3 fillojnë të shfaqen në html. Dhe gjithçka duket të jetë e mirë dhe e shpejtë, por në këtë qasje shpesh ka shumë gracka. Në këtë artikull, ne do t'i shikojmë këto gracka dhe do të hedhim domate të kalbura në zanatin tim për rrjeta pa probleme.

Problemet

Rrjete jo standarde

Pra, projektuesi ynë i paraqitjes ka shumë pak kohë, faqosja është në zjarr, gjithçka duhet të bëhet dje. Prandaj, ai merr bootstrap-in popullor të kornizës css si bazë dhe fillon punën e tij. Dhe më pas, në mes të punës, ai papritmas bie në një bllok me pankarta "5 me radhë". Të gjithë ata që kanë punuar me bootstrap e dinë se rrjeti i tij i paracaktuar është 12x, kështu që 5 kolona me radhë me një rrjet standard bootstrap nuk janë aspak të mundshme. Po, sigurisht, mund të ndërtoni një rrjet arbitrar në bootstrap, por kjo është koha për të humbur, shkarkuar varësi, për të ndërtuar më pak-ki (dhe ne, për shembull, shkruajmë në sass).

A mund të lidh disa bibliotekë për rrjete të personalizuara? Në përgjithësi, kjo dalje e mire, i vetmi disavantazh i kësaj qasjeje është se pothuajse të gjitha ato janë të dizajnuara ose për shkrime të gjata dhe të lodhshme @media(min-width:)() , ose gjenerojnë grupin e tyre të klasave, me një sërë col15- ndoshta jo të nevojshme. xs-offset-3, i cili do të futet në css-ku përfundimtar.

Prandaj, me një probabilitet të lartë, projektuesi i paraqitjes thjesht do t'i shkruajë të gjitha stilet me dorë (aty, në parim, nuk ka shumë për të shkruar atje).

Shumë shpesh, rrjetit standard të bootstrap-it i mungojnë pikat shtesë të ndërprerjes, d.m.th. ka xs, sm, md, lg - të gjitha deri në një gjerësi prej 1200 px. Po monitorët e mëdhenj? Një pikë ndërprerjeje xl në 1600px thjesht kërkon set standard. Por përsëri, nuk është aty, dhe lindin të njëjtat zgjidhje si në paragrafi i mëparshëm. Por pikat e kontrollit mund të ketë shumë - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Tepricë dhe folje

Dhe ja ku po afrohemi ngadalë problemi i radhës. Imagjinoni që ju duhet të vendosni madhësitë tuaja të blloqeve për secilën rrjet, atëherë merrni diçka si kjo:

A nuk është shumë? Hidhni tërheqjen/shtyjen e mundshme dhe të dukshme/fshehur dhe më pas mund të filloni të çmendeni me siguri. Por të gjitha këto klasa janë shkruar në css, imagjinoni sa klasa ju duhet të shkruani në css për të gjitha kombinimet e një rrjeti 60x!

Ndarja e stileve nga shënimi

Çdo stilist e di se stilet inline janë të këqija. Pra, pse shkruajmë në klasat e shënjimit atë që ka të bëjë me stilet? col-xs-6 , visual-sm dhe Zoti na ruajt tekstin-djathtas - këto janë të gjitha stile, dhe nëse duhet të bëni ndryshime në paraqitjen tashmë të shtrirë, patjetër që do të ketë një problem që projektuesi i paraqitjes do të duhet të pyesë prapavijën -schik për të ndryshuar col-sm- 6 në col-sm-4.

Mbivendosja e stileve të panevojshme

Shpesh, korniza css lidhet vetëm për hir të rrjeteve dhe disa funksioneve të vogla, gjë që më pas rezulton në një rivendosje të tepërt të stileve dhe një madhësi të dyfishtë të css-së përfundimtare. Për shembull, i gjithë bootstrap.min.css përfshihet dhe më pas hijet dhe qoshet e rrumbullakosura nga .btn, .form-control dhe të ngjashme hiqen në një mënyrë argëtuese dhe provokuese, duke përfshirë :hover, :focus, :first- fëmijë . Si rezultat, në vend që të ndihmojë, korniza fillon të pengojë. Për të mos përmendur shpesh veçori të panevojshme si .glyphicon. Sigurisht, përsëri, ju mund të montoni bootstrap nga ajo që ju nevojitet, por përsëri kjo është koha.

Standardet e huaja dhe stili i kodit

Le të themi se një stilist ka mësuar BEM dhe ka filluar ta përdorë atë. Por nevoja për të përdorur bootstrap dikton përjashtimet e veta - në të të gjitha klasat shkruhen me vizë, duke mos ndjekur parimet e BEM. Dhe këtu lind problemi i zgjedhjes - ose duhet të përballeni me një pengesë në emrat e klasave (btn-block disabled component__btn component__btn_disabled), ose të hidhni përsëri bootstrap.

Metodat e vjetruara

Siç e dini, rrjetet bootstrap 3 bazohen në floats. Ajo që shpesh shkakton probleme, një nga më të shpeshtat është lartësia e ndryshme e blloqeve, si pasojë e së cilës rrjeti i bukur “prihet”. Ndaloni përdorimin e floats për qëllime të tjera, të gjithë shfletuesit që nuk dinë të flexbox janë pothuajse të vdekur!

Suzy! - kjo është rruga për të dalë?

Në kërkim të një zgjidhjeje për të gjitha problemet e mësipërme, unë jam në kornizën e mrekullueshme të rrjetit Susy! , në përgjithësi shumë mirë. Por mua më mungonte shpejtësia, sepse susy! sugjeroi të përshkruani kolonat për secilën pikë ndërprerje veç e veç:

.col ( @media (min. gjerësi: 768 px) ( @përfshi galerinë (4 nga 12); ) @media (gjerësia min.: 1200 px) ( @përfshi galerinë (3 nga 12); ) )

Kjo është e dyshimtë! supozon se do të merreni vetë me pikat e ndërprerjes. Gjithashtu, sussy! ai nuk shkruan ekran: flex për rreshta për ju, ju duhet të mbani mend t'i shkruani ato vetë. Indencat midis kolonave në të vendosen vetëm relative (nuk do të funksionojë për t'i bërë ato të fiksuara në piksel). Gjithashtu, ai së fundi mësoi flex-in, dhe më parë ai ndërtoi rrjete në float dhe :nth-child(). Në përgjithësi, sussy! kjo është e mirë, por unë do të doja shpejtësinë dhe lehtësinë e përshkrimit të rrjeteve për të gjitha pikat e ndërprerjes, siç ishte me bootstrap.

Kërkimi për sisteme të tjera të rrjetit gjithashtu nuk dha shumë rezultate - ata të gjithë ose ndjekin rrugën susy!, duke harruar pikat e ndërprerjes, ose ndjekin rrugën e bootstrap, duke siguruar një grup klasash të krijuara për rrjetet drejtuese në html.

Ndërtesa e biçikletave

Pra, u vendos të shkruanim diçka tonën, si rezultat, lindi fast-grid. Është gjithashtu, si susy, i ndërtuar mbi sass. Cilat janë avantazhet kryesore që ofron në krahasim me zgjidhjet e tjera, në veçanti, susy!? Para së gjithash, shpejtësia për shkak të më pak kodit, le të marrim një shembull standard të bootstrap:

Duke përdorur rrjetin e shpejtë, një rrjet i tillë është shumë i lehtë për t'u përshkruar:

@import "~fast-grid/fast-grid"; .row ( @include grid-row(); ) .col ( @include grid-col(6 4 3 2); )

Tani le të kalojmë nëpër mangësitë tona dhe të shohim se si rrjeti i shpejtë i zgjidh të gjitha këto probleme.

Rrjete jo standarde

@import "~fast-grid/fast-grid"; .cols ( $grid: (boshllëk: 5px); @include grid-row($grid); &__item (@include grid-col(12 6 null (1 nga 5), ​​$grid); ) )

Nevoja për grupin tuaj të pikave të ndërprerjes

@import "~fast-grid/fast-grid"; .cols ( $grid: (pikat e ndërprerjes: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), kolonat: 60); @include grid-row($grid); &__artikull (@include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) )

Tepërsia dhe folja / Ndarja e stileve nga shënimi

fast-grid është një kornizë rrjeti për përdorim në css dhe jo në html bazuar në grupet e klasave të krijuara. Kjo ndan markup-in nga stilet, gjë që është e mirë për mbështetjen e ardhshme. Ai gjithashtu shmang nevojën për të gjeneruar një sërë klasash ndihmëse (.col-xs-push-4 etj.) që kryesisht nuk përdoren.

Mbivendosja e stileve të panevojshme

Meqenëse rrjeti i shpejtë është një grup miksesh, ai nuk gjeneron asnjë rregull css në vetvete. Prandaj, këtu nuk do të hasni në faktin që korniza i stilon elementet në një mënyrë që nuk ju nevojitet. Dhe në përgjithësi, këto janë vetëm rrjete, dhe asgjë më shumë.

Standardet e huaja dhe stili i kodit

fast-grid janë miksat që duhet të përdorni brenda juaja klasa, me emrat që ju preferoni. Të pëlqen BEM? Nuk ka problem!

Metodat e vjetruara

Parazgjedhja është flexbox, e cila hap shumë mundësi dhe zgjidh problemet e notave klasike. Për shembull, lehtë mund të ndryshoni rendin e kolonave.

Në shembullin më poshtë, ne japim një shirit anësor poshtë përmbajtjes kryesore për versioni celular, dhe e bëjnë atë bllokun e parë në ekranet e mëdha.

Sigurisht që do të ishte e mundur të arrihet kjo me ndihmën e tërheqjes / shtytjes për notim, por kjo është shumë patericë.

konkluzioni

Në përgjithësi, detyra e vendosur për mua u përfundua - tani rrjetat nuk më shkaktojnë më asnjë problem, dhe faqosja është e shpejtë dhe e lehtë. Mund të lexoni më shumë rreth aftësive të rrjetit të shpejtë në depo dhe të shihni shembuj:

A po përdorni ende bootstrap? Atëherë shkojmë tek ju!

Etiketa:

• css
• sass
• rrjetë

Shto etiketa

Ne vazhdojmë temën faqosje adaptive. Sot do flasim rreth njërës nga tre balenat e paraqitjes adaptive - faqosje e bazuar në rrjet(planifikim fleksibël i rrjetit). Dy të tjerat janë imazhe fleksibël.

Në mesin e shekullit XX dizajnerët grafikë popullarizoi konceptin tipografike, ose modulare, rrjetë- një sistem racional kolonash dhe rreshtash në të cilat mund të vendosen module me përmbajtje. Dukej e freskët dhe shumë harmonike.

por dizajn grafik dhe dizajni i uebit janë, siç thonë ata në Odessa, dy dallime të mëdha. Moment kyç këtu është madhësia e faqes. Në versionin tipografik, ai është i fiksuar dhe faqja e internetit mund të zgjerohet dhe tkurret në varësi të asaj ku shihet.

Për të aplikuar një rrjet në një faqe interneti, përdorni një formulë e thjeshtë proporcionaliteti:

objektiv/kontekst=rezultat

Mënyra më e lehtë për të kuptuar këtë formulë është që shembull i mirë. Le të themi se kemi një plan urbanistik të vizatuar në dy kolona - pjesa e përmbajtjes dhe shiriti anësor:

Do ta bëjmë “gome”. Por këtu është problemi: si të vendosni gjerësinë e të dy blloqeve? Në fund të fundit, nëse e regjistroni atë në piksel, atëherë ato nuk do të jenë më gome. Pra, duhet të përdorni përqindje, jo pikselë. Por më lejoni, çfarë vlerash duhet të shkruaj? Megjithatë, ju duhet të largoheni nga diçka.

Ju, sigurisht, mund të vlerësoni me sy: përmbajtja zë rreth 70% të gjerësisë totale të faqes dhe shiriti anësor - 30%. Por projektuesi i duhur i paraqitjes nuk vlerëson kurrë asgjë me sy. Ne kemi nevojë për madhësinë e saktë.

Për këtë është formula e proporcionalitetit. Ne thjesht marrim gjerësinë e blloqeve të brendshme dhe e ndajmë atë me gjerësinë totale të faqes. Këtu është e gjithë faqja kontekst, dhe secilin prej blloqeve të brendshme, përkatësisht, objektiv nga formula e mësipërme.

660 / 960 = 0,6875
300 / 960 = 0,3125

Mbetet vetëm për të kthyer këto të dhëna në përqindje. Jo shumë shqetësuese, thjesht lëvizni presjen dy vende dhjetore në të djathtë. Ne marrim:

68,75%
31,25%

Është kaq e thjeshtë. Sidoqoftë, le ta komplikojmë detyrën. Supozoni se kemi pjesën e përmbajtjes të ndarë në dy pjesë më të pabarabarta. Për shembull, në të majtë është një kolonë e ngushtë me datën e artikullit dhe butonat social, të renditur vertikalisht, dhe kolona e djathtë është e gjerë, dhe në të kemi tekstin e artikullit.

Ne e dimë nga faqosja e dizajnit se kjo kolonë e ngushtë është 120 pikselë e gjerë dhe 520 px. Si t'i konvertojmë këta numra në %? Përsëri, aplikoni formulën e proporcionit. Por këtë herë, ne nuk përdorim të gjithë gjerësinë e faqes si kontekst, por gjerësinë e bllokut që përfshin këto dy kolona, ​​domethënë gjerësia e pjesës së përmbajtjes, që kemi është 660 piksele. Ne ndajmë:

120 / 660 = 0,1818
520 / 660 = 0,7878

Në përqindje marrim përkatësisht 18.18% dhe 78.78%.

Nga rruga, në skedarë modernë stilet që përdorin paraqitjen e përgjegjshme, dizajnerët e duhur të paraqitjes shtojnë llogaritje të tilla si komente. Për shikueshmëri më të mirë. Ja si duket zakonisht:

përmbajtja (
gjerësia: 68,75%; /* 660px / 960px */
}

Shpresoj se kjo nuk ka shkaktuar ndonjë problem. Le të shkojmë më tej!

Paraqitja e bazuar në rrjet

Shembujt e diskutuar më sipër, natyrisht, nuk janë ende një rrjet. Epo, çfarë lloj rrjeti prej dy kolonash? Një rrjet i vërtetë modular është projektuar për të ndihmuar si projektuesit ashtu edhe dizajnerët e strukturës të krijojnë faqe komplekse me shumë kolona dhe blloqe individuale.

Prandaj, pati një masë shërbime të përshtatshme dhe mjetet që zbatojnë këtë metodë lehtësisht dhe thjesht. Për shembull, 960.gs . Këtu jo vetëm që mund të studioni vizualisht parimin e shënjimit bazuar në një rrjet modular, por gjithashtu të shkarkoni shabllone dhe t'i përdorni ato.

Në fakt, shërbime të tilla tani janë një qindarkë! Ata quhen gjithashtu korniza. Zgjidhni cila ju pëlqen më shumë. Këtu është një përzgjedhje e madhe e 30 Kornizave CSS për dizajn të përgjegjshëm të uebit.

Për çfarë janë këto rrjeta modulare?

Para së gjithash, nevojiten rrjete modulare për të organizuar vizualisht përmbajtjen në faqen e faqes. Kjo nuk është vetëm e bukur dhe e këndshme për syrin e përdoruesit nga pikëpamja estetike, por edhe e përshtatshme për vetë zhvilluesit. Sidomos nëse faqja është vërtet komplekse në strukturë dhe përmbajtje.

Për më tepër, rrjete të tilla modulare janë shumë më të lehta për t'u përshtatur sesa blloqe të shpërndara rastësisht të madhësive të ndryshme.

Dhe, sigurisht, shpejtësia e zhvillimit të vendeve të tilla është shumë më e lartë. Ju nuk keni nevojë të mashtroni dhe të rishpikni timonin nga e para. Mjafton të zgjidhni një kornizë të përshtatshme dhe të ndërtoni një faqe interneti në të.

Shpresoj se tani e dini se çfarë është një plan urbanistik i përgjegjshëm i bazuar në një rrjet modular.

Herën tjetër do të flasim për imazhe fleksibël në faqosje adaptive. Një temë shumë e rëndësishme dhe e diskutueshme. Ju rekomandoj që edhe ju ta studioni me kujdes që të mos futeni në rrëmujë. Qëndroni në kontakt! Më mirë akoma, abonohuni në buletinin e blogut të Këshillit të Uebit.

Në këtë mësim, ne do të përgatitemi për paraqitjen e faqes sipas PSD faqosje duke përdorur vetëm rrjet (Sistemi i Rrjetit) nga korniza Bootstrap 4. Duke mësuar këtë metodë të paraqitjes, ju shpëtoni veten nga problemet e mundshme me përshtatshmërinë e faqes, është veçanërisht e mirë për fillestarët.

Përshtatshmëria e faqes gjatë paraqitjes Rrjeti i bootstrap ofrojnë flexboxes, i mbështetur nga të gjithë shfletuesit kryesorë dhe madje Internet Explorer, duke filluar me IE9+. Për më shumë versionet e hershme, si IE9, ne lidhim skriptet që ndihmojnë për të shfaqur saktë paraqitjen tonë.

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">

Dhe gjëja më e rëndësishme - PSD faqosja fillimisht duhet të vizatohet duke marrë parasysh më tej Paraqitja e bootstrap. Dhe kështu, nuk ka arsye të tjera pse të mos shtypni sipas rrjetit të bootstrap, si në projektet tuaja ashtu edhe me porosi. Do të përpiqem të jap më pak teori, pa ujë dhe më shumë praktikë.

Përgatitja për paraqitjen

Hapni paraqitjen në Photoshop-e dhe sigurohuni që të ketë një plan urbanistik me 12 kolona në udhëzues dhe që të gjithë elementët e dizajnit të jenë në linjë me ato udhëzues. Distanca midis udhëzuesve ekstremë është zakonisht 1170 piksele.

Shkarkoni në vend https://getbootstrap.com/ të përpiluara css Dhe JS për integrim të lehtë në projektin tuaj.

Kopjo nga seksioni Hyrje / Modeli fillestar- shabllonin e faqes së fillimit dhe futeni në indeks HTML- dosjen e projektit tuaj. Ne kemi krijuar një boshllëk për të ardhmen HTML dokument.

Shkarko bootstrap.min.css apo përdorni një lidhje për të?

Besohet se dosja bootstrap.min.css do të ngarkohet më shpejt sepse ndodhet në disa serverë, dhe jo në një nga serverët tuaj. Kjo do të thotë që faqja do të hapet më shpejt. Nëse ende vendosni ta shkarkoni këtë skedar për veten tuaj, atëherë specifikoni shtegun e duhur për në dosje me Bootstrap dosjet. Krijo bosh css skedari ku do të shkruani stilet tuaja është i nevojshëm në çdo rast.

E rëndësishme! E juaja css skedari në skedarin e indeksit duhet të përfshihet më i ulët se bootstrap.min.css.

Lidhja e shkronjave. Çfarë shkronjash dhe ikona përdor projektuesi në paraqitjen mund të shihen në program photoshop ose zgjerimi i shfletuesit Chrome-WhatFont.

rel="stylesheet" type="text/css">

Pse ju duhen dy css dosje?

css dosje bootstrap.min.cssËshtë një bibliotekë në të cilën as nuk duhet të hysh. Ne punojmë vetëm me një skedar - kryesore.css, ju vetëm duhet të siguroheni që emrat e klasave të reja për tuaj css skedari aksidentalisht nuk përputhej me "bibliotekën".

Në dosje bootstrap.min.css stile të krijuara tashmë për rrjetin në flexbox-ah dhe pyetjet për media janë shkruar, ne vetëm duhet të shkruajmë klasat e duhura blloqet e duhura në HTML faqe. Emrat e klasave mund të gjenden në faqen e kornizës poshtë Rrjeti. Daktilografi me përvojë për Paraqitja e bootstrap lidhni shtojcat ( Bootstrap 4 plotësohet automatikisht, bootstrap 4 fragmente) te redaktori i kodit Tekst sublim.

Po prishet PSD faqosja e bllokut

Shohim që faqja përbëhet nga 8 blloqe: kokë (header) me navigimin e menysë (nav), 6 seksione (seksioni) dhe bodrum (futbolli).

Në seksione (seksioni: #shërbime, #portofol) shfaqen kolona, ​​të cilat do t'i shtrojmë në bazë të komponentit kryesor Bootstrap - rrjetë.

Duke bërë së pari HTML shënimi i strukturës kryesore, detajet do të shtohen gjatë paraqitjes.

Në pjesën tjetër, le të fillojmë paraqitjen, por jo të gjithë paraqitjen, por blloqet e tij individuale. Meqenëse qëllimi i këtyre mësimeve është t'u tregojë fillestarëve se si të kombinojnë me sukses paraqitjen e zakonshme të paraqitjes me faqosja e rrjetit Bootstrap.

Një rrjet modular është një shabllon i veçantë mbi të cilin është ndërtuar dizajni i sitit. Në fakt, ky është një sistem për paraqitjen e informacionit vizual te vizitori bazuar në blloqe të veçanta të quajtura module. Një sit i zhvilluar duke përdorur një shabllon të tillë është shumë më i përshtatshëm për perceptim dhe navigim.

Si aplikohet rrjeti

Rrjeti modular përdoret në dizajnimin e librave, kartave të biznesit, markave tregtare, logove, etj. Është gjithashtu e nevojshme të përdoret gjatë krijimit të faqeve të internetit. Një rrjet i bërë saktë kompozon në mënyrë harmonike mjedisin për të gjithë elementët e burimit - grafikun dhe tekstin. Me përdorimin e tij është shumë më e lehtë t'i vendosni të gjitha në faqe dhe të krijoni kufij të qartë midis tyre. Duke i rregulluar elementët në një mënyrë të caktuar, ju mund t'i bëni secilin prej tyre të dukshëm dhe në të njëjtën kohë të lidhni së bashku të gjithë informacionin rreth vetë sitit.

Llojet e rrjetave modulare

Rrjeti modular më i zakonshëm në hartimin e faqeve është tre kolonat bazë të qelizave. Në këtë rast, header dhe footer kanë një gjerësi të barabartë me madhësinë e tyre. Kjo version standard zakonisht përdoret nga amatorët gjatë krijimit të faqeve të internetit. Ndonjëherë kjo rrit gjerësinë e një qelize në kurriz të gjerësisë së një tjetër.

Krijimi i një versioni të dytë të rrjeteve modulare - jo standarde - është i mundur vetëm për njerëzit që janë të angazhuar profesionalisht në dizajnin e uebit. Në këtë rast, vetëm gjerësia e kolonave dhe distanca ndërmjet elemente të veçanta. Rrjeti modular në dizajn lloj te ndryshme burimet e lajmeve dhe revistat online zakonisht zhvillohen si më poshtë:

1. Foteri është krijuar. Emri i faqes duhet të jetë këtu, menyja e navigimit, materiale të ndryshme video.
2. Faqja është e ndarë në tre kolona. Megjithatë, dy prej tyre kanë të njëjtën madhësi. Kolona e tretë ndahet në dy pjesë me një vijë vertikale. Kështu fitohen katër seksione (lajmet, fotogaleria, hapësira reklamuese, ndryshimet më të fundit të informacionit në faqe).

Një rrjet modular për dyqanet në internet të specializimeve të ndryshme krijohet në një mënyrë paksa të ndryshme. Në këtë rast, është shumë e rëndësishme të sigurohet lehtësia e lundrimit për vizitorët. Në të njëjtën kohë, elementët grupohen në mënyrë standarde dhe uniforme. Për secilin nga objektet në rrjet, a informacion i rendesishem duke e karakterizuar atë.

Sundimtar në Photoshop

Faqet krijohen duke përdorur raster ose vektor Është shumë i përshtatshëm për të krijuar një rrjet në to. Le të shohim se si është bërë në redaktor popullor Photoshop. Krijimi i një rrjeti modular në Photoshop është shumë i thjeshtë.

Në mënyrë që sundimtarët të shfaqen rreth perimetrit të dritares së imazhit të punës, shkoni te artikulli i menusë kryesore "Shiko" (Shiko) dhe klikoni në rreshtin "Sundimtarët" (Sundimtarët). Në këtë redaktues, ju mund të përdorni më së shumti elemente të ndryshme- me ndarje në centimetra, milimetra, inç ose piksel. Për të kryer cilësimet e nevojshme, duhet të shkoni te artikulli kryesor i menusë "Redaktimi" (Redakto). Tjetra, zgjidhni rreshtin "Cilësimet" (Preferencat) - "Njësitë dhe sunduesit" (Njësitë dhe sunduesit). Pas kësaj, do të shfaqet një dritare në të cilën mund të ndryshoni pamjen e sundimtarit. Në menunë rënëse të sipërme, zgjidhni centimetra, milimetra, pikselë, etj.

Sidoqoftë, zakonisht kur punojnë në redaktuesin Photoshop, ata përdorin një metodë paksa të ndryshme, më të thjeshtë. Për të ndryshuar njësitë matëse, thjesht klikoni në vetë vizoren në dritaren e imazhit klikoni me të djathtën minjtë. Pas kësaj, në menunë që shfaqet, do të jetë e mundur të bëhet veprimin e dëshiruar. Në mënyrë tipike, kur krijoni një faqe, përdoret një rrjet pikselësh.

Photoshop Grid

Rrjeti modular i vetë programit Photoshop do të bëhet i dukshëm pasi të shkoni te artikulli kryesor i menusë "Shiko" - "Trego" (Trego) - "Rrjeti" (Rrjeti). Hapësira ndërmjet linjave të rrjetit mund të rregullohet. Për ta bërë këtë, ekzekutoni komandën "Redaktimi" - "Cilësimet" - "Udhëzuesit, rrjetet dhe fragmentet" (Udhëzuesit, Rrjeti, Slices). Këtu mund të ndryshoni jo vetëm hapin midis rreshtave, por edhe ngjyrën e tyre. Duke përdorur këtë rrjet, do të jetë absolutisht e lehtë të vendosni shpejt dhe saktë të gjitha objektet e sitit të ardhshëm në fushën e punës.

Puna me kursorin

Rrjeti modular i faqes është krijuar në këtë mënyrë shumë thjesht. Kursori ngjitet në linja gjatë punës. Kjo mund të jetë e dobishme nëse keni nevojë të bëni blloqe me madhësi të sakta dhe të përcaktuara. Nëse për ndonjë arsye kjo veçori nuk është e nevojshme, mund të çaktivizohet. Si parazgjedhje, origjina e rrjetit në Photoshop ndodhet në këndin e sipërm të majtë të dritares. Nëse dëshironi, mund të zhvendoset në çdo vend tjetër në kanavacë. Për ta bërë këtë, lëvizni kursorin mbi katrorin e origjinës dhe thjesht tërhiqeni duke mbajtur të shtypur butonin e miut. Për ta kthyer pikën e referencës në vendin e saj, klikoni dy herë në të njëjtin shesh në qoshe.

Ndër të tjera, ka shtojca të ndryshme për redaktorin Photoshop që e bëjnë krijimin e një faqeje duke përdorur një rrjet modular edhe më të përshtatshëm. Shkarkoni ato në internet. Duke përdorur këto shtojca, mund të krijoni rrjete me parametra të specifikuar.

Rrjeti në CorelDraw

Tani le të shohim se si të bëjmë një rrjet modular redaktori i vektorit CorelDraw. Këtu është krijuar pothuajse në të njëjtën mënyrë si në Photoshop. Ikona e saj ndodhet në paneli i sipërm(syri në rrjet). Pasi të klikoni mbi të, mund të bëni gjithçka cilësimet e nevojshme. Mund të zgjidhni distancën ndërmjet rreshtave, të ndryshoni njësinë e matjes, etj. Kufizoni fushën e punës në dritaren e imazhit në CorelDraw dhe duke përdorur udhëzues. Ato mund të bëhen të dukshme ose të padukshme sipas nevojës.

Një rrjet modular në hartimin e faqeve të internetit është një element themelor, zhvillimi i të cilit duhet trajtuar me përgjegjësi maksimale. Në fund të fundit, komoditeti i vizitorëve të tij, dhe rrjedhimisht koha që ata kalojnë në faqet e tij, varet nga sa mirë është i strukturuar burimi.

Nga autori: Fatkeqësisht, shumë stilistë në modë dhe spektakolare të internetit shpesh harrojnë se rezultati i punës së tyre duhet të jetë një faqe e tretshme, dhe jo pamje e bukur e ekranit i përshtatshëm vetëm për një portofol. Në këtë artikull, unë formulova kërkesat që duhet të merren parasysh në procesin e projektimit dhe dizajnimit të një ndërfaqeje në internet.

Një rrjet modular në dizajnin e uebit është një zgjidhje themelore që jo vetëm që do të përmirësojë përdorshmërinë e faqes, por gjithashtu do të thjeshtojë shumë jetën e zhvilluesve.

Çfarë është një rrjet modular?

Më lejoni të shpjegoj me një shembull të njohur. Hapni ndonjë libër letre. Shihni tekstin që përfshin gjerësinë e plotë të faqes, duke përjashtuar margjinat? Pra, këtu është një plan urbanistik tipik me një kolonë. Tani shikoni një revistë ose gazetë. Në një revistë, informacioni tradicionalisht ndahet në dy kolona, ​​dhe në një gazetë - në tre ose katër, ose edhe më shumë.

Në përgjithësi, dizajni i uebit trashëgoi mjaft "çipa" të ndryshëm nga dizajni i printimit. Këto janë parimet e punës me fontet, rregullat e përbërjes dhe modulet. Faqet e kartave të biznesit dhe faqet e prezantimit mund të jenë të kënaqur me një strukturë me një kolonë, faqet kryesore - me dy kolona, ​​më komplekse projektet e informacionit duhet, në përputhje me rrethanat, të ketë një plan urbanistik më kompleks dhe të menduar.

Rrjeti modular në dizajnin e uebit është një paraqitje e vetme e të gjithë elementëve dhe blloqeve të faqes. Kjo kornizë teli kalon nëpër të gjitha faqet e internetit dhe ndihmon në krijimin e rendit vizual të faqes.

Rrjetat mund të jenë të thjeshta ose komplekse, fikse ose dinamike, por nuk ka shumë rëndësi. Nëse gjatë procesit të krijimit të një web design keni vendosur një strukturë të caktuar modulare, ju lutemi, qëndroni në të nga e para në Faqja e fundit faqe.

Çfarë duhet të bëni nëse gjatë vizatimit faqet e brendshme Keni blloqe ose elementë që nuk përshtaten me kornizën tuaj? Nuk dua t'ju zhgënjej, por kjo tregon se rrjeta juaj nuk është e mirë dhe nuk keni shpenzuar mjaft kohë për ta dizajnuar atë.

Cilat janë rrjetat?

Le të shohim llojet e rrjetave për dizajnin e uebit.

1. Rrjeti i bllokut - një plan urbanistik i përafërt i zonës në blloqe.

2. Kolona - që ka kolona në strukturën e saj.

3. Modular - i përbërë nga vija të kryqëzuara që formojnë module.

4. Hierarkike - një rrjet me një vendosje intuitive të blloqeve, pa asnjë strukturë logjike.

Ndryshe nga dizajni i printimit, rrjeti në dizajnin e uebit mund të jetë jo vetëm fiks, por edhe dinamik. Për shembull, mund të bëni një ose më shumë kolona të shtrirjes, të rrjedhshme, duke vendosur gjerësinë e tyre si përqindje dhe të rregulloni madhësinë e kolonave të mbetura.

Tendenca moderne dhe qasjet ndaj zhvillimit të uebit

Mësoni algoritmin për rritje të shpejtë nga e para në ndërtimin e faqes në internet

Rrjeti për web dizajn 960 Grid System (http://960.gs) korrespondon me konceptin e një paraqitjeje "statike", dhe për krijimin e një "fluid" mund t'i kushtohet vëmendje rrjetit Bootstrap (http://getbootstrap.com /css/#grid ). Korniza modulare 960 GS e ndan faqen e internetit në 12, 16 dhe 24 kolona.

Kur zhvilloni një strukturë "gome", mos harroni gjerësia maksimale ekran. Zakonisht është i kufizuar në 1280 piksele. Nëse nuk merrni parasysh vlera maksimale në gjerësi, atëherë monitorë të mëdhenj përmbajtja e faqes do të shtrihet shumë, gjë që do të ndikojë negativisht në perceptimin e saj.

Më e popullarizuara dhe më e lehtë për t'u zbatuar është një rrjet modular me dy kolona, ​​proporcionet e së cilës llogariten duke marrë parasysh supozimet e mëposhtme:

rezolucioni më i zakonshëm i ekranit është 1024x768;

gjerësia e paraqitjes nuk duhet të kalojë 770 piksele, në mënyrë që një shirit lëvizës të mos shfaqet në fund në një ekran me rezolucion 800x600;

kolona që kryen funksionet modul informacioni, duhet të ketë një gjerësi më të madhe se kolona që është përcaktuar si modul navigimi (menu).

Bazuar në këtë, proporcioni duket si ky: 200 piksele. + 550 piks. ose 150 piksele. + 620 piks.

NË kolonë më e madhe supozohet të vendosë një menu navigimi, në një më të vogël - një katalog ose përmbajtje.

Konsideroni si shembull rrjetin e dizajnit të uebit të një faqeje interneti të famshme. Të gjitha faqet e BBC-së përdorin një strukturë kolone universale 61 x 16 pikselë për t'u përshtatur me fotot dhe videot standarde të markës.

Siç mund ta shihni në foto, rrjeti i BBC-së është mjaft fleksibël dhe ju lejon të vendosni çdo informacion: nga analitika serioze deri te lajmet argëtuese. Ky rrjet modular është kartë telefonike kompania, pasi është standard për të gjitha faqet e saj. Meqë ra fjala, kjo gjë është një komponent i udhëzuesit të gjuhës së përvojës globale, nëse dikush është i interesuar.

Zhvilluesit e BBC janë të lumtur të japin këshilla se si të dizajnohen rrjete modulare në dizajnin e uebit. Natyrisht, ata nuk e shpikën biçikletën për ne, por mendoj se do të jetë interesante për të sapoardhurit në karrierën e një web-dizenjuesi.

1. Procesi fillon me përcaktimin e vendeve për blloqet e hierarkisë më të lartë. Ne e imagjinojmë veten si të tillë Sherlock Holmes - mjeshtër të deduksionit dhe ndjekim rregullin "Nga e përgjithshmja tek e veçanta, nga më e madhja tek më e vogla".

2. Ne zbresim në nivelin tjetër dhe vendosim blloqet e mëposhtme në hierarki. Në të njëjtën kohë, ne bazohemi në prioritetet e përmbajtjes, për të përcaktuar se cilat i analizojmë pritshmëritë e përdoruesve dhe identifikojmë tonat avantazhet konkurruese.

3. Kështu, së pari përpunojmë përbërjen e përgjithshme dhe elementët më të mëdhenj. Pastaj - ne përsosim, përsosim, detajojmë. Për ta bërë këtë, duhet të vizatojmë një sërë skicash të përafërta. Vetëm pas një studimi të hollësishëm të idesë së faqes me ndihmën e një lapsi dhe letre, më në fund ulemi në kompjuter.

4. Shpërndani informacionin në blloqe, përmbajtje grupi. Për shembull, në faqen e internetit të BBC-së, pothuajse çdo grup përmbajtjesh ka një titull që pasqyrohet në kategoritë e menusë së navigimit. Titujt e blloqeve shërbejnë si spiranca vizuale që ju lejojnë të kaloni nëpër faqen e internetit, si dhe ju ndihmojnë të kuptoni se cilës kategori përmbajtjeje i përket një artikull i caktuar lajmesh.

Kjo qasje përdoret gjerësisht si nga fillestarët ashtu edhe nga mjeshtrat e dizajnit të uebit. Kjo ju lejon jo vetëm të kurseni shumë kohë, por edhe të gjeni zgjidhje origjinale. detyra sfiduese.

Pra, në kursin tonë të sotëm luftëtar i ri projektuesi i uebit, ne shqyrtuam konceptin e një rrjeti modular dhe veçoritë e aplikimit të tij. Në fakt, ky është një lloj abstraksioni vizual, me ndihmën e të cilit ne vendosim të gjithë elementët dhe blloqet e përmbajtjes në një distancë të pranueshme nga njëri-tjetri dhe në një nivel miqësor për përdoruesit. Ju mund të vizualizoni një rrjet modular duke përdorur një shtresë të veçantë me imazhin e udhëzuesve.

Së fundi, dua t'ju kujtoj se dizajni në internet është krijimi jo vetëm i bukur, por edhe praktik, sistem i përshtatshëm. Kjo është arsyeja pse çdo projektues uebi që respekton veten duhet të jetë në gjendje të projektojë një sistem navigimi modular, të strukturojë informacionin dhe ta ndajë atë në blloqe. Falë kësaj, përdoruesi do të jetë i kënaqur të "shfletojë" faqen tuaj dhe të perceptojë lehtësisht përmbajtjen e tij.

Abonohuni në përditësimet e blogut tonë dhe shpërndajeni informacion të vlefshëm me miq. Të gjitha rrjetet modulare të suksesshme dhe shihemi së shpejti!

Tendencat dhe qasjet moderne në zhvillimin e uebit

Mësoni algoritmin për rritje të shpejtë nga e para në ndërtimin e faqes në internet