Izrada prototipova u HTML-u i CSS-u

  • Potrebno znanje : Malo matematike u srednjoj školi
  • Zahtijeva : Uređivač teksta (izborno), moderni preglednik
  • Vrijeme projekta : 1 sat

Ako već znate kako izraditi osnovnu web stranicu, ovdje vjerojatno nećete ništa naučiti. Ali ako to ne učinite ili je vaše znanje još iz doba izgleda na osnovi tablice, ovo će vam dati dobru osnovu za izgradnju prototipova u HTML-u i CSS-u.

Zašto prototip u kodu?

Ako izrađujete prototip za web, ima smisla graditi ga u njegovom prirodnom okruženju jer pruža ono stvarno iskustvo kakvom se možete nadati. Razumijevanje načina izrade vašeg dizajna također vam može dati veći afinitet s programerima; oni će biti otvoreniji za vaše ideje i moći će bolje komunicirati svoje.

Također ima tu prednost što možete u potpunosti iskoristiti sve što web nudi. Vaš se prototip može prilagoditi širini prozora preglednika, ali grafički okvir ne može. Ovo je korisno kada pokazujete kako se vaša web lokacija prilagođava na različitim širinama zaslona.



ElfCartel je primjer interaktivnog prototipa tvrtke Clearleft. S lijeve strane nalazi se stranica na širokom zaslonu, s desne je kako izgleda kad se smanji širina preglednika

najbolji mac za 4k video uređivanje
ElfCartel je primjer interaktivnog prototipa tvrtke Clearleft. S lijeve strane nalazi se stranica na širokom zaslonu, s desne je kako izgleda kad se smanji širina preglednika

Što je s okvirima?

Okviri poput 960 su stvarno korisni za izradu prototipova, ali prije nego što zaronite u jednu od njih, korisno je prvo razumjeti osnove kako to funkcionira. Jednom kada se uhvatite u koštac s tim kako sve to zajedno stoji, bit ćete puno bolje pripremljeni.

Pretpostavke

Postoji nekoliko pretpostavki koje ću iznijeti o vašem prototipu:

  • Pregledat će se samo u modernim preglednicima, uključujući tijekom testiranja korisnika i ako se veza pošalje klijentu.
  • Vaš se kôd neće objaviti uživo. Neću govoriti o tome kako graditi na način koji je optimiziran ili semantički kao što bi trebao biti živi kod.

Testiranje u starijim preglednicima i optimizacija koda ne bi se uklopili u ovaj članak, a bilo bi pretjerano za brzi prototip. Međutim, ako ćete testirati sa stvarnim korisnicima, uzmite u obzir brzinu učitavanja stranice.

Početak rada

Ako imate dizajn, započnite ispisom i označavanjem.

  1. Nacrtajte okvire oko stvari za izgled. Koliko ima stupaca? Izvucite oko njih.
  2. Kolike su širine ovih okvira i stupaca?
  3. Obratite pažnju na glavne elemente teksta poput naslova, odlomaka, popisa, slika i veza.
  4. Koji su uobičajeni stilovi? Koji su zadani stilovi teksta, boje veza i veličine naslova?

U ovom primjeru, I

U ovom sam primjeru nacrtao dizajn na paus-papiru, prepoznao dva stupca, zaglavlje i podnožje. Također sam zabilježio širinu u pikselima i označio neke ključne elemente poput minijatura i krušnih mrvica

Sada smo spremni za početak gradnje. Ako imate uređivač koda, stvorite datoteku nazvanu 'index.html' i zalijepite sljedeći kôd. Ako nemate, možete odmah slijediti u pregledniku pomoću Remy Sharpa jsbin.com . (Nije potrebna zamorna registracija ili preuzimanje.)

Struktura

Ovo je web stranica na najosnovnijoj razini:

  1. < html >
  2. < glava >
  3. < meta charset = 'utf-8' />
  4. < titula > Naziv stranicetitula >
  5. glava >
  6. < tijelo >
  7. < str > Sadržaj stranicestr >
  8. tijelo >
  9. html >

Počnite uređivati ​​ovaj kôd

Sve unutar našeg Oznake su informacije za preglednik i ne prikazuju se na našoj stranici. Bit unutar Oznake je naziv stranice i stavlja se na karticu preglednika. Sav sadržaj naše stranice ide unutar oznake.

Prvo što ćemo učiniti je postaviti svoju osnovnu strukturu na mjesto. Obično započinjem s označavanjem sadržaja i izlazim iz toga, ali ljudima koji su novi u HTML-u često je lakše započeti razmišljanjem o načinu grupiranja sadržaja.

Da bih to učinio, dodat ću u odjeljke glavne stranice pomoću oznake. Te se oznake koriste za grupiranje dijelova sadržaja. Ugniježđeno unutar Oznaka Dodao sam tekst unutra

  1. < html >
  2. < glava >
  3. < meta charset = 'utf-8' />
  4. < titula > Naziv stranicetitula >
  5. glava >
  6. < tijelo >
  7. < div class = 'header'>
  8. < str > Zaglavljestr >
  9. div >
  10. < div class = 'content'>
  11. < str > Sadržajstr >
  12. div >
  13. < div class = 'ads'>
  14. < str > Oglasistr >
  15. div >
  16. < div class = 'footer'>
  17. < str > Podnožjestr >
  18. div >
  19. tijelo >
  20. html >

The 'klasa =' bit je oznaka koju koristimo kao kuku za pomoć u oblikovanju sadržaja. Uskoro ćemo se vratiti na ovo.

Obratite pažnju na udubljenje i način na koji sam poredao oznake za otvaranje i zatvaranje. Pokušajte da vaš kôd bude lako čitljiv jer ćete se upetljati. Također, ne možete izraditi vlastite HTML oznake, ali postoji mnogo izbora. Evo jednog HTML varalica možete ispisati i uputiti na.

Stil

Sad ćemo započeti s oblikovanjem sadržaja pomoću CSS-a (Cascading Style Sheets). HTML govori o tome kakav je sadržaj, a CSS o tome kako taj sadržaj izgleda. Volim započeti dodavanjem neukusnih pozadinskih boja na sve kako bih lakše vidio gdje se stvari nalaze na stranici.

U svojim primjerima dodajem sve svoje CSS stilove prije Oznaka tako da možemo vidjeti sve na jednoj stranici, ali ako gradite više stranica, bolje je stvoriti zasebnu tablicu stilova i povezati je s tim izvana.

Da biste to učinili, stvorite novu datoteku u istom direktoriju kao i index.html pod nazivom styles.css, a u datoteku index.html dodajte ovaj bit koda prije označiti.

kako napraviti šešir krastače
  1. < veza href = 'styles.css' rel = 'tablica stilova' type = 'text / css' />

Ovdje će živjeti svi vaši stilovi.

Ako koristite jsbin, otvorite oznaka prije vašeg oznaku, zalijepite sljedeći kod unutra i zatvorite ga s .

  1. div {
  2. background-color: hotpink;
  3. height: 100px;
  4. }
  5. p {
  6. background-color: orange;
  7. }

Bilo koji komadić sadržaja koji smo umotali u oznaka dobila je svijetlo ružičastu pozadinu. Također sam im dodao visinu kako biste mogli jasnije vidjeti što se događa, ali skinut ćemo to kasnije kad se unutra nađe odgovarajući sadržaj.

Ovdje

Evo kako naša stranica izgleda sada smo svemu dali boju pozadine

Što ako svaki blok sadržaja želimo oblikovati drugačije? Ispod stilova koje smo upravo dodali, ali prije Oznaka, dodat ćemo sljedeće:

  1. .Zaglavlje {
  2. boja pozadine: zelena;
  3. }
  4. .content {
  5. boja pozadine: crvena;
  6. }
  7. .ads {
  8. boja pozadine: plava;
  9. }
  10. .footer {
  11. boja pozadine: žuta;
  12. }

Obratite pažnju na američki pravopis 'boja'.

Sjetite se class = ' bitove koje smo dodali u naše HTML oznake? Ta imena klasa koristimo kao udice za oblikovanje. The . prije nego što riječ 'zaglavlje', 'sadržaj' i 'podnožje' pokaže da je ovo naziv klase, a ne ime elementa. (Nismo dodali . prije div i p jer su oni čisti HTML elementi, a ne nazivi klasa.)

kako poništiti odabir nečega u photoshopu

Odabir imena razreda

Klasi možete dati bilo što, pod uvjetom da ne započinje simbolom ili brojem, a sve to mora biti jedna riječ ili niz. Međutim, vrijedi dobro razmisliti o imenima koja upotrebljavate. Da bi bio učinkovit u agilnom okruženju, naš prototip koda mora biti:

  • Brzo ažuriranje ako odlučimo napraviti nešto poput podešavanja izgleda. Zbog toga je vrlo dobra ideja koristiti nazive klasa koji opisuju kakav je sadržaj, a ne kako izgleda. Ako biste mu dali naziv klase poput 'left-hand-col' ili 'red', a kasnije ga premjestili udesno ili promijenili boju, to će biti vrlo zbunjujuće.
  • Jasno i lako se čita, bez nereda s oznakama. Obavezno lijepo uvucite oznake kako vas ne bi zbunilo. Oznake koje nisu zatvorene i prekidaju stranicu uobičajeni su razlog zašto stvari ne funkcioniraju onako kako očekujete i teško ih je uočiti ako vaše označavanje nije dobro organizirano.
  • Lako je razumjeti ako kod predate nekom drugom. Dobar način za dokumentiranje vašeg rada je dodavanje komentara u HTML i CSS koji objašnjavaju što stvari rade. (Mogu se dodati komentari u HTML i /* kao ovo */ u CSS-u.)

Izgled

Sada znamo kako ciljati blokove sadržaja, počet ćemo postavljati stvari. Dizajn koji sam izradio je u pikselima, ali fleksibilni rasporedi su cool pa ćemo pretvoriti naše piksele u postotke koristeći malo srednjoškolske matematike.

Ovdje

Evo kako izgleda moj komentirani dizajn

Ukupna širina našeg dizajna je 960px. Imamo dva stupca, jedan širine 720px, a drugi širine 220px. (To nam daje 20 piksela između stupaca.) Glavni stupac, koji smo dali klasi 'sadržaja', nalazi se s lijeve strane, manji s klasom 'oglasi' s desne strane. Zaglavlje i podnožje široki su 960px.

  1. 960px je 100% širine cjelokupnog sadržaja. Dakle, da bismo saznali koliko je 1px u postocima, dijelimo 100 s 960.
  2. To nam daje 0,104166667, što ćemo zaokružiti na 0,104%
  3. Prema tome 720 x 0,104 = 74,88% i 220 x 0,104 = 22,88%

Blokove sadržaja možemo pozicionirati u CSS-u govoreći da stvari 'lebde'. Kad nešto kažemo 'plutaju: lijevo' , govorimo mu da gurne u gornji lijevi kut svog sadrži elementa i zaustavi se ako mu se nešto nađe na putu. 'plutaj: desno' govori da pluta u gornji desni kut. To je pomalo poput poravnavanja teksta lijevo i desno, ali za blokove sadržaja. Također moramo dati širinu blokova ili će oni zadati punu širinu svog sadržaja i neće sjediti jedan pored drugog. Na dno stilova dodajte sljedeće:

  1. .content {
  2. širina: 74,88%; / * 720px * /
  3. plutaju: lijevo;
  4. }
  5. .ads {
  6. širina: 22,88%; / * 220 piksela * /
  7. plutati: desno;
  8. }
  9. .footer {
  10. jasno: oboje;
  11. }

Dodao sam CSS komentar pored širina kako bih se lakše sjetio kakvi su izvorno bili u pikselima. Komentari su vrlo korisni za dokumentaciju, koristite ih velikodušno.

Također sam rekao podnožju da 'clear: left', što je poput prisiljavanja na novu liniju. Ispunjavalo je preostali prostor kada smo dodali plutajuća pravila i dizalo se uz oglasni blok tamo gdje to nismo željeli.

Vjerojatno ste primijetili, naš se tekst nalazi uspravno uz rub blokova. Trebali bismo mu dati malo prostora za disanje, pa ćemo sadržaju dodati malo dodataka. To odvlači tekst koji se nalazi u spremniku od rubova. U svom dizajnu primijetio sam ovo popunjavanje kao 20 piksela, što je 2,08%. Također ćemo dodati malo margine na dno kako bismo blokove odgurnuli jedni od drugih kako se ne bi dodirivali. To može ostati kao pikseli jer će samo širine biti fleksibilne.

  1. .content {
  2. širina: 74,88%; / * 720px * /
  3. plutaju: lijevo;
  4. podstava: 2,08%;
  5. }
  6. .Zaglavlje,
  7. .sadržaj,
  8. .ads {
  9. margin-bottom: 20px;
  10. }

Stilove za blokove sadržaja, oglasa i zaglavlja grupirao sam pomoću zareza jer obojica dijele ista svojstva. Izmjene su puno brže kada možete grupirati stilove.

Ups, naši blokovi više ne sjede jedan pored drugog. To je zato što kad dodamo dodavanje, to dodaje ukupnoj širini bloka. Vratit ćemo se natrag i promijeniti širine kako bismo uzeli u obzir dodavanje tako što ćemo oduzeti dodatnih 2,08% koji su dodani lijevo i desno od bloka sadržaja.

  1. .content {
  2. širina: 70,72%; / * 680px * /
  3. plutaju: lijevo;
  4. podstava: 2,08%;
  5. }

Zbunjeni zašto se to događa? Evo još nekih detaljnih čitanja o popunjavanju i marginama . Također sam postavio interaktivni demo u jsbinu o onome što imamo do sada .

Slike

Da bismo uštedjeli vrijeme, poslužimo se uslugom koja se zove placehold.it za dodavanje rezerviranih slika na stranicu. Ovo generira slike u bilo kojoj dimenziji koju odaberemo. Ja ću dodati naš prvi u HTML, unutar > oznake.

  1. < img src = 'http: //placehold.it/220x400' />

Bit 220x400 odnosi se na širinu i visinu. To se automatski učitava rezervirana slika u naš stupac oglasa, ali budući da je slika veća od širine stupca, prelijeva se. To je lijepo i lako popraviti u CSS-u.

  1. img {
  2. maksimalna širina: 100%;
  3. }

To prisiljava slike da nikad ne budu veće od elementa koji sadrže i prilagodit će se širini stranice.

Sličice

Sljedeći je korak dodati neke sličice unutar glavnog stupca sadržaja između oznake i neka se poredaju jedna pored druge. Evo HTML-a za jednu sličicu, pa ga nekoliko puta kopirajte i zalijepite da biste dodali još.

  1. < do class = 'thumbnail' href = '#'>
  2. < img src = 'http: //placehold.it/213x160' />
  3. < str > Cheesecake od jagodastr >
  4. do >

Veza je omotana oko slike i odlomka, tako da je cijelo područje moguće kliknuti. (Upravo sam dodao # u href = bit jer veza još ne ide nikamo, ali možete dodati URL.)

Sada ih trebamo poredati jedan do drugog, tri u nizu, s malo praznine udesno. Evo CSS-a:

kako igrati animaciju u naknadnim efektima
  1. .umbi {
  2. plutaju: lijevo;
  3. širina: 31%; / * To je 31% elementa koji sadrži * /
  4. margina-desno: 3,5%;
  5. margina-dno: 13 piksela;
  6. ukras teksta: nijedan;
  7. }
  8. .manja: n-tipa (3n + 3) {
  9. margina-desno: 0;
  10. }

Svakoj sličici dao sam širinu od 31%, što je otprilike trećina od 100%, i 'plutaju: lijevo' pa se poredaju. Također sam svakom dao desnu marginu od 3,5%, ali ne želim da treća minijatura u svakom retku ima bilo kakvu marginu, jer već postoji razmak od popunjavanja na stupcu sadržaja. Zbog toga sam stavila 'margina-desno: 0;' na '.umanica: n-tipa (3n + 3)' . ': n-tipa (3n + 3)' traži treći element s klasom 'sličica' i svaki treći nakon toga te uklanja marginu.

Sad imamo na raspolaganju neki sadržaj, možemo ukloniti 'height: 100px;' iz stila za 'div' elementi koje smo dodali odmah na početku.

Naša stranica sa svim elementima na mjestu

Naša stranica sa svim elementima na mjestu

S postavljenom osnovnom strukturom dodavanje ostatka sadržaja i stilova puno je jednostavnije. Izgradio sam verziju ovog prototipa u jsbin ako ste htjeli poigrati se s tim. Ako ste stvarno ponosni na ono što ste izgradili, pritisnite Spremi i u komentarima podijelite vezu do svoje verzije.

Puno toga nisam mogao uklopiti ovdje kao što su kaskada, model okvira, različiti načini pozicioniranja sadržaja i dodavanje više stranica, ali ako želite saznati više, naći će se još jedan UX Bootcamp prototipiranje u radionici Code od 27. do 29. listopada .

Daljnje čitanje i izvori

Riječi: Anna Debenham

Anna je razvojni programer koji pokušava svijet učiniti boljim mjestom. Surađuje s Mozillom na projektu nazvanom Hackasaurus , koji pomaže naučiti djecu o otvorenom webu, pokrenuo je internetski magazin pod nazivom Škripanje , za mlade dizajnere i programere, i tehničar je za Podkast Boagworld .