U pregledniku će stranica i dalje biti prazna, ali struktura dokumenta već se može razumjeti, spreman je.

Postavljanje osnovnog oblikovanja

Sada prijeđimo na CSS stil kako bismo dokumentu dali početni izgled.

Otvoren stil.css i dodajte retke koda koje vidite u nastavku.

Uklanjanje ispuna i margina na stranici prema zadanim postavkama:

* ( margina: 0px; ispuna: 0px; )

Postavljamo boje linkova ovisno o ponašanju korisnika (prelazio, nije lebdio, posjećivao) i uklanjamo podcrtavanje s linkova preko kojih se nalazi pokazivač miša:

A:link (boja: #D72020;) a:hover (tekst-ukras: nema; boja: #FF0000;) a:visited (boja: #D72020;)

Postavljamo osnovni dizajn stranice: postavljamo boju pozadine i pozadinsku sliku (postavljamo vodoravnu ispunu slike), postavljamo boju, stil i veličinu fonta:

Tijelo (pozadina: #FFD723 url(images/back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; boja: #333333; )

Definicija bloka sadržaja:

#sadržaj ( margina: 0 automatski; pozadina: #ffffff; širina: 786px; poravnanje teksta: lijevo; )

Sada možete osvježiti stranicu. Ispunjen je pozadinskim uzorkom. Do sada je jedina vidljiva promjena za koju je odgovorno imanje pozadina razreda tijelo.

Dizajn horizontalnog izbornika

Postoji početak, a sada možete početi postavljati same glavne blokove.

Počnimo, naravno, s zaglavljem. Koji se pak sastoji od blokova horizontalnog izbornika i logotipa.

Prvo postavimo opći dizajn oba elementa zaglavlja: tekst poravnat ulijevo, bijela pozadina i visina od 306 piksela:

#zaglavlje (pozadina: #ffffff; visina: 306px; poravnanje teksta: lijevo; )

Tako smo dobili neku vrstu prostora zaglavlja: bijeli pravokutnik na kojem će se nalaziti njegovi elementi.

Bilo bi logično to učiniti upravo sada horizontalni izbornik. To je ono što ćemo učiniti, ali samo prije umetanja u HTML, moramo se pripremiti CSS pravila, inače će izgledati užasno u pregledniku.

Napravimo prve prilagodbe: postavimo lijevu granicu na 2 piksela debljine, širinu i visinu našeg izbornika, a također i ponavljajuću granicu duž X osi pozadinska slika:

#menu ( border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url(images/header_top.gif) repeat-x; )

Stranica u pregledniku će se odmah transformirati i izgledati ovako.

Sada možete dodati sam izbornik u datoteku index.html:

Osvježavanjem stranice možete vidjeti da se stvarno pojavio.

Samo vrsta veza ostavlja mnogo za poželjeti. Postavimo vlastita pravila za njih (poravnanje, širina, boja, podebljanje, itd.) i postavimo veze da mijenjaju boju kada lebde iznad njih i vrate podcrtavanje koje je uklonjeno u cijelom predlošku:

#menu a ( float: lijevo; širina: 99px; visina: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding -top: 35px; ) #menu a:hover ( boja: #D72020; text-decoration: underline; )

Sada se oblikovanje izbornika može preslikati na PSD predložak.

Obratite pozornost na to kako se dizajn stavke mijenja ako pomaknete pokazivač na nju (za to su odgovorna pravila #izbornik a: lebdite).

Prilagodba logotipa

Logo već imamo i nalazi se u folderu, preostaje ga samo dodati na stranicu i formatirati prema pravilima. I jedno i drugo se može koristeći CSS, što nećemo propustiti učiniti.

#logo (pozadina: #ffffff url(images/big_pic.jpg) bez ponavljanja; širina: 738px; visina: 146px; poravnanje teksta: lijevo; dopuna-gore: 80px; dopuna-lijevo: 40px; rub-lijevo: 4px solidno #ffffff; )

Logo je umetnut točno u veličini.

Jedino što mu nedostaje je tekst. Ubacimo ono što nedostaje u blok logo datoteka index.html dobiti:

Tekst se pojavio, ali ga treba i formatirati.

Na temelju činjenice da je logo gotovo uvijek poveznica, postavimo dizajn za odgovarajuće klase.

#logo a (ukras teksta: ništa; transformacija teksta: mala slova; stil fonta: kurziv; veličina fonta: 36px; boja: #FFFFFF; ) #logo h2 a (veličina fonta: 24px;)

Ovdje nema potrebe ništa objašnjavati, upoznati ste sa svim svojstvima iz CSS lekcije. Međutim izgled Tekst je promijenjen, a općenito zaglavlje sada izgleda još bolje nego na PSD izgledu.

Izgled glavnog dijela stranice

Zatim postavljamo najveći blok na koji će se smjestiti sav jedinstveni sadržaj. Zauzimat će 500px i nalazit će se na desnoj strani stranice. Uspostavimo pravila za pozicioniranje, dizajn naslova, paragrafa i veza (već smo govorili o svim svojstvima u člancima o CSS-u).

#right ( float: right; width: 500px; padding-right: 10px; ) #right h4 (margina: 0; padding: 0px; font-size: 12px; color: #D72020; ) #right a (color: #D72020 ; text-decoration: none; ) #desno p (margina: 0; padding: 0; padding-bottom: 10px; ) #desno h2 (margina: 0; padding: 0; padding-top: 10px; boja: #D72020; )

Budući da smo fiksirali samo širinu bloka, vidljive promjene neće se promatrati dok je ne ispunimo sadržajem - visina stranice će se mijenjati ovisno o sadržaju.

Napunimo posudu pravo. Slike ćemo smjestiti u jednostavnu tablicu.

Galerija

kuhinje

Sadržaj je dobio oznake, ali mu očito nedostaje bijela pozadina, koja se neće uskoro pojaviti u potpunosti.

Stvaranje lijevog panela

Tijekom izgleda, ali nakon crtanja izgleda, pokazalo se da će bočni izbornik i dalje imati podstavke, a one bi se trebale pojaviti kada prijeđete pokazivačem iznad glavne stavke i nestati kada na njoj nema pokazivača.

Situacije kada morate modificirati dizajn "u hodu" događaju se vrlo često. Udaljenost između izbornika i glavnog sadržaja omogućuje nam umetanje podstavki, no zanimljiv je trik s nestankom i pojavom podizbornika.

U CSS datoteku dodajte sljedeći kod.

#left ( padding: 10px; width: 237px; padding-right: 1em; ) #left h3 ( width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding- top: 15px; text-transform: uppercase; color: #ffffff; background: url(images/title.gif) no-repeat ) #left ul ( margina: 0; padding: 10px; list-style: none; width: 100px ; veličina fonta: 18px; ) #lijevo li ul ( pozicija: apsolutna; lijevo: 90 piksela; gore: 0; prikaz: ništa; ) #lijevo ul li ( pozicija: relativna; margina-dno:20px; ) #lijevo ul li a ( display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; ) #left li:hover ul ( display: block; ) #left li li (margin-bottom:0px; width: 150px; ) #left p (padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-desno: 1px solid # D72020; )

Obratite pozornost na pravila razreda ul I li- Tajna jelovnika koji nestaje je tu, otkrijte je sami.

Najprije dodajmo informacijski blok bez izbornika u lijevi spremnik HTML dokumenta.

Informacija

Nudimo vam blagdanske popuste. Unaprijediti...

Jelovnik

Bijela se pozadina širila niz stranicu.

Sada je vrijeme da zalijepite kod izbornika lijeve ploče u HTML datoteku. Ona je, za razliku od gornje navigacije, implementirana s listama, što je vidljivo iz CSS pravila.

• Galerija
  • kuhinje
  • Kreveti
  • Zidovi
  • Hodnici
  • Ormari
  • Računalni stolovi
• Sporazum
• Cijena
  • kuhinje
  • Kreveti
  • Zidovi
  • Hodnici
  • Ormari
  • Računalni stolovi
• Uzorci
  • Staklo
  • Iverica
  • Pribor
  • itd.
• Kontakti
• Važno

Kada razvijate web stranicu, najbolje je sve pojednostaviti što je više moguće tako da imate mogućnost instalacije gotov predložak u nekoliko klikova i počnite. To posebno vrijedi za one koji ili nisu dobri u programiranju ili su ograničeni vremenom. Ali ako je vaš cilj učiniti vašu web stranicu jedinstvenijom, imate određene vještine u izgledu, ali ipak želite uštedjeti vrijeme, postoji izvrsno rješenje - gotovi izgledi web stranica za izgled.

Takve rasporede stvaraju dizajneri u Photoshopu i zapravo su obični grafičke datoteke stranice. Nisu izrezani, već dolaze u pojedinačnim datotekama. Njihova prednost je što će dizajner dizajna moći samostalno prilagoditi dizajn individualnim potrebama klijenta. A PSD predlošci su prilično jeftini. Na jednoj od vodećih platformi za predloške, Themeforest, cijene izgleda kreću se od 3$.

Za obične korisnike izgledi web stranica neće biti osobito korisni, stoga preporučujem da ne gubite dodatno vrijeme i živce i odmah odaberete gotov predložak web stranice. Da, oni su skuplji od PSD predložaka, ali ta će razlika biti više nego nadoknađena uštedom vremena i nepostojanjem potrebe za daljnjim izgledom i angažiranjem stručnjaka za prilagodbu određenom sustavu. Na našoj web stranici imamo cijeli odjeljak posvećen tisućama za bilo koju svrhu. Imamo i predloške za druge CMS-ove. S njima ćete moći shvatiti da je izrada web stranica zapravo vrlo jednostavna!

Za profesionalne korisnike predstavljamo dvadeset najboljih PSD izgleda za različite svrhe: posao, kreativnost, blog i e-trgovinu. Gotovo svi PSD izgledi imaju WordPress verziju, stoga savjetujem početnicima da pročitaju ovu recenziju.

Izgledi web stranica za izgled za početnike i iskusne korisnike

TheFox – izgled web stranice za višenamjensku upotrebu

Ovaj najpopularniji izgled sadrži komponente za blog, trgovinu, odredišnu stranicu, portfelj i korporativnu web stranicu. Svi su napravljeni s osjećajem za ukus i stil. Set uključuje 280 PSD datoteka. Ljubitelji WordPressa imaju pristup gotovoj verziji za ovaj CMS.

Avada – univerzalni PSD izgled

Ovaj izgled sadrži 59 PSD datoteka s jedinstvenim dizajnom za različite vrste web stranica, uključujući internetske trgovine, portfelje i blogove. Dostupna verzija u kutiji i široka verzija. Postoji i potpuna WordPress verzija predloška Avada, koji je najpopularnije WordPress rješenje na svijetu (360 tisuća zadovoljnih korisnika).

AdelFox – višenamjenski PSD predložak

150 Photoshop datoteka koje sadrže desetke varijacija početne stranice, online trgovine, portfelja, bloga i drugih stranica. Svi oni podržavaju rad s kratkim kodovima, što znači da će dodavanje sadržaja biti vrlo jednostavno. Mogućnosti prijave: kreativni blog, stranica s vijestima, osobni portfelj i web stranica tvrtke.

Crno + bijelo – jednostavan izgled s minimalističkim dizajnom

Čista, elegantna opcija za one koji žele svoju web stranicu učiniti jedinstvenijom. Idealno za stranice sa prekrasne fotografije. Ništa suvišno - samo najnužnije.

HUGE – univerzalni PSD izgled za idealnu web stranicu

Izgled je vrlo moderan i pružit će vam širok izbor opcija za svaki zadatak. Koristeći Photoshop vještine, svoj dizajn možete učiniti jedinstvenim. Podržava odjeljke pune širine, harmonike i padajuće izbornike.

Ovaj izgled ima WordPress i Joomla verzije za lakši razvoj.

Enfold – popularni izgledi web stranica za izgled u PSD formatu

Ovo je univerzalni izgled za bilo koju tvrtku koja djeluje u bilo kojem području djelatnosti. 31 dobro organizirana Photoshop datoteka omogućit će vam da malo prilagodite postavke, što će rezultirati jedinstven dizajn. Sve ikone i fontovi u izgledu su besplatni. Tu je i WordPress tema Enfold za one koji se ne žele znojiti.

Waxom – Clean Universal Photoshop Mockup

238 datoteka, čist dizajn, Google fontovi i Bootstrap grid. Područja primjene: portfelj, hosting, medicina, putovanja, crkva, nekretnine, automobili, internetska trgovina i poslovanje. Tu su i mobilni izgledi i WordPress tema za samo 59 USD.

Krugovi – cool izgledi web stranica sa savršenim dizajnom

Ovaj izgled kombinira zadivljujući dizajn s snažnom funkcionalnošću i jednostavnošću korištenja. Podržava rad s Bootstrap mrežom. Svih 14 PSD datoteka otvara se u bilo kojoj verziji Photoshopa. Vrlo dobro organiziraju slojeve kako bi s njima bilo lako raditi.

Travelo – set layout-a za turističke agencije

Ovaj izgled sadrži elegantan dizajn za turoperatore i putničke agencije. 21 opcija klizača s podrškom za Revolution i Layer Slider. 12 izgleda početne stranice. Postoji i verzija za WordPress.

Delimondo – responzivni izgled web stranice restorana

Ovaj izgled ima 5 stilova dizajna sa po 10 stranica. Samo 50 PSD datoteka za detaljnu prilagodbu dizajna. Podrška za klizače, obrasce za rezervacije i besplatni fontovi Google.

Ovo je poseban dizajn izgleda za koji su posebno popularni među Ruski korisnici. Izgled podržava varijacije početna stranica, kao i stranice kategorija, usporedba proizvoda, košarica, plaćanje, prijava/registracija, račun, blog i drugi.

Rezervirajte svoje putovanje – izgledi web stranica za izgled turoperatora

Ovaj PSD predložak već je poznat našim čitateljima zahvaljujući WordPress predlošku za usluge rezerviranja karata, putničke agencije, hotele i putničke blogove. Dizajnirane datoteke imaju početnu stranicu s trakom za pretraživanje, stranicu s rezultatima pretraživanja i hotelske stranice sa svim informacijama. Ukupno ima 16 PSD datoteka.

Turistička agencija – PSD izgled web stranice za putovanja s više zadataka

Čist dizajn sa značajkama rezervacija za putničke agencije i agencije za nekretnine. Dolazi u tri boje: plavoj, zelenoj i narančastoj. Ukupno ima nevjerojatnih 59 PSD datoteka!

Za recenzije gotovih WordPress stranica za turističku industriju pogledajte i.

Super Duper – moderan raspored za svaki posao

U ovom rasporedu u 150 Photoshop datoteka pronaći ćete 21 izgled početne stranice, 50+ izgleda internetske trgovine, 10 stranica bloga i čak 2 izgleda web stranice od jedne stranice. Dostupni su mobilni izgledi.

Carry Hill – PSD model školske web stranice

Jedinstveni dizajn ovog izgleda izvrstan je i za školske i za kreativne web stranice. 8 jednostavnih PSD datoteka s dizajnom početne stranice, bloga, galerije, kontakt podataka i drugih stranica. Postoji podrška za Doodles.

Edukativni WordPress teme pogledali smo u nekoliko recenzija:, i.

U ovom ćemo članku govoriti o stranicama koje programeri izrađuju ručno, tj. utipkanim tekstom.

Članak je namijenjen korisnicima koji su upoznati s HTML I CSS . Također je poželjno poznavati barem osnove Adobe Photoshop

Jedna od faza izrade prave web stranice je izrada PSD predloška. Također možete naići na nazive kao što su izgled, dizajn ili izvor.

Predložak se naručuje dizajneru. Dizajner crta izgled u Adobe Photoshopu i sprema ga u PSD formatu.

Što je PSD format?

Za bolje razumijevanje možete dati jednostavan životni primjer. U djetinjstvu su svi lijepili aplikacije. Od papira smo izrezali kućicu i zalijepili je. Izrezali smo božićno drvce i zalijepili ga. I tako dalje dok rad nije spreman.

Sada možete zamisliti situaciju u kojoj su figure izrezane, postavljene na listu na pravim mjestima, ali još nisu zalijepljene. Dakle, PSD format datoteke može se usporediti s aplikacijom na kojoj figure još nisu zalijepljene, ali su posložene željenim redoslijedom.

Zahvaljujući tome, svaka takva "figura", odnosno svaki pojedinačni fragment predloška, ​​može se spremiti kao zasebna slika, koja se zatim može koristiti na web mjestu.

Ovdje je izgled stranice koja će se stvoriti.

Nakon što imamo gotov predložak u PSD formatu, možemo ići izravno na izgled

1. Napravite mapu u kojoj će biti pohranjen izgled, na primjer "Site".
2. U mapi “Site” napravite mapu za slike, na primjer img.
3. U mapi "Site" stvorite mapu za stilove, na primjer css.
4. Sada morate trčati Adobe program Photoshop i otvorite ga u njemu psd datoteka. Odavde morate "izvući" sve slike koje će se koristiti na stranici.

Ovdje morate obratiti pozornost na gumb "Slojevi". Na slici je istaknut crvenim ovalom.

Ovaj gumb uključuje i isključuje prozor sloja. Slojevi su upravo oni dijelovi aplikacije koji nisu zalijepljeni. Radi praktičnosti, slojevi su podijeljeni u mape koje se mogu sažimati i proširivati. Princip rada je gotovo isti kao u Windows Exploreru.

Prvi korak je sažimanje svih mapa. Proširite prema potrebi.

Sada možete početi "izvlačiti" slike

Prvo što trebate učiniti je odabrati alat za okvir. Zatim odaberite samo dio koji ograničava logotip stranice

Nakon toga pritisnite tipku Enter. Bit će odsječeno sve osim odabranog područja.

Sada možete ukloniti pozadinu. Da biste to učinili, morate isključiti pozadinski sloj.

S ciljem brza pretragaželjenih slojeva, možete izvesti sljedeće korake:

Ovdje je sloj nazvan "Oblik 2". Klikom na sliku oka sloj postaje nevidljiv.

Međutim, postoje još dva sloja koja također treba onemogućiti. Radnje su slične.

Sada možete uštedjeti. Da biste to učinili, trebate učiniti sljedeće:

Odaberite između 4 predložene opcije, a od predložene drugu. Ekstenzija odaberite gif.

Naziv datoteke logo.gif . Spremite datoteku u mapu img . Ostale slike također treba spremiti tamo.

Možete slijediti ova načela:

• kvalitet fotografije – jpg
• fotografska kvaliteta s prozirnom pozadinom– png-8 , nisam zadovoljan kvalitetom - png-24
• nekoliko boja na slici – gif

Kako biste vratili izvornu verziju prije izrezivanja, morate otvoriti prozor povijesti

Kliknite na naziv datoteke i postavite odgovarajuće mjerilo.

Ostale slike spremaju se na isti način.

Isto vrijedi i za sliku šape koja se pojavljuje kada prijeđete pokazivačem iznad stavke izbornika.

Ostale slike nisu obavezne. Može na bijelom, može na prozirnom.

Ovdje biste trebali vrlo pažljivo odabrati opciju spremanja, jer u PSD izvorima često postoje slike s slabo obrađenim rubovima. Evo primjera:

Slika je spremljena u prozirna pozadina. Međutim, kada ga gledate u crnoj boji, vidljivi su loše obrađeni rubovi. Ali kada koristite svijetlu pozadinu, ovaj nedostatak možda neće biti vidljiv.

Za pozadinu ćete morati izrezati malu sliku koja će ispuniti stranicu poput pločice. Međutim, u ovom primjeru pozadina se ne ponavlja. Stoga je bolje pronaći sličnu sliku. Ili ga možete pokušati odabrati izrezivanjem različitih fragmenata iz pozadine.

Početak izgleda. Omot. Zaglavlje stranice.

Izgled će se smatrati korištenjem HTML5 i CSS3.

U mapi vašeg web mjesta morate stvoriti HTML datoteka. Na primjer index.html.

U mapi css stvoriti datoteku stil.css .

Osim toga, u mapi css morate postaviti datoteku reset.css sa sljedećim kodom

/* v2.0 | 20110126 Licenca: ništa (javna domena) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, adresa, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, obrazac, label, legenda, table, caption, tbody, tfoot, thead, tr, th, td, article, side, canvas, details, embed, figure, figcaption, footer, header, hgroup, izbornik, navigacija, izlaz, rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; granica: 0; veličina fonta: 100%; font: naslijediti; okomito poravnanje: osnovna linija ; ) /* HTML5 poništavanje uloge prikaza za starije preglednike */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, izbornik, nav, odjeljak ( prikaz: blok; ) tijelo ( visina retka: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: kolaps; border-spacing: 0; )

Činjenica je da različitim preglednicima za istu oznaku mogu imati različite postavke. Kako bi se osigurala kompatibilnost s više preglednika, moraju se resetirati. Gornji kod je razvio Eric Mayer.

Prvi u index.html trebali biste napisati glavne oznake.

Za oznaku u stilovima morate postaviti pozadinu.

Kao što je već spomenuto, pozadina se ovdje ne ponavlja. Stoga bi bilo racionalnije odabrati bilo koji sličan.

Tijelo (pozadinska slika: url(../img/bg.gif); )

Sada morate izraditi omotač stranice - blok u koji će biti smješten sav sadržaj.

Pored završne