În browser, pagina va fi în continuare goală, dar structura documentului poate fi deja înțeleasă, este gata.

Configurarea formatării de bază

Acum să trecem la stilul CSS pentru a da documentului aspectul inițial.

Deschis stil.cssși adăugați liniile de cod pe care le vedeți mai jos.

Eliminarea umpluturilor și a marginilor din pagină în mod implicit:

* ( marjă: 0px; umplutură: 0px; )

Setăm culorile link-urilor în funcție de comportamentul utilizatorului (pasat, nu hoverat, vizitat) și eliminăm sublinierea din link-urile peste care se află indicatorul mouse-ului:

A:link (culoare: #D72020; ) a:hover (text-decor: niciunul; culoare: #FF0000; ) a:vizitat (culoare: #D72020; )

Am configurat designul de bază al paginii: setăm culoarea de fundal și imaginea de fundal (setăm umplerea orizontală pentru imagine), setăm culoarea, stilul și dimensiunea fontului:

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

Definiția blocului de conținut:

#conținut (marja: 0 automat; fundal: #ffffff; lățime: 786px; text-align: stânga; )

Acum puteți reîmprospăta pagina. Este umplut cu un model de fundal. Până acum singura modificare vizibilă pentru care este responsabilă proprietatea este fundal clasă corp.

Proiectarea unui meniu orizontal

Există un început și acum puteți începe să așezați singuri blocurile principale.

Să începem, desigur, cu antetul. Care, la rândul său, constă din blocuri dintr-un meniu orizontal și un logo.

Mai întâi să ne setăm design general ambele elemente de antet: text aliniat la stânga, fundal alb și înălțime de 306 px:

#header ( fundal: #ffffff; înălțime: 306px; text-align: stânga; )

Așa am obținut un fel de spațiu antet: un dreptunghi alb pe care vor fi amplasate elementele sale.

Ar fi logic să o facem chiar acum meniu orizontal. Aceasta este ceea ce vom face, dar numai înainte de a-l introduce în HTML, trebuie să ne pregătim Reguli CSS, altfel va arăta groaznic în browser.

Să facem primele ajustări: setați chenarul din stânga să aibă o grosime de 2 pixeli, lățimea și înălțimea meniului nostru și, de asemenea, una care se repetă de-a lungul axei X imagine de fundal:

#meniu ( chenar-stânga: 2px solid #ffffff; lățime: 779px; înălțime: 80px; fundal: url(images/header_top.gif) repeat-x; )

Pagina din browser se va transforma imediat și va arăta astfel.

Acum puteți adăuga meniul în sine la fișier index.html:

Reîmprospătând pagina, puteți vedea că a apărut de fapt.

Doar tipul de linkuri lasa de dorit. Să ne setăm propriile reguli pentru ele (aliniere, lățime, culoare, îndrăzneală etc.) și să setăm linkurile să își schimbe culoarea atunci când trecem cu mouse-ul și să returnăm sublinierea care a fost eliminată în șablon:

#meniu a ( float: stânga; lățime: 99 px; înălțime: 46 px; afișare: bloc; text-align: center; text-decoration: niciunul; culoare: #ffffff; font-weight: bold; font-size: 14px; umplutură -sus: 35px; ) #menu a:hover (culoare: #D72020; text-decor: subliniat; )

Acum formatarea meniului poate fi mapată la șablonul PSD.

Acordați atenție modului în care se modifică designul articolului dacă mutați indicatorul la acesta (regulile sunt responsabile pentru aceasta #meniu a:hover).

Personalizarea logo-ului

Avem deja logo-ul și este în dosar, tot ce rămâne este să îl adăugați în pagină și să îl formatați conform regulilor. Ambele se pot face folosind CSS, ceea ce nu vom renunta sa facem.

#logo ( fundal: #ffffff url(images/big_pic.jpg) fără repetare; lățime: 738px; înălțime: 146px; text-align: left; padding-top: 80px; padding-left: 40px; chenar-stânga: 4px solid #ffffff; )

Logo-ul este inserat exact ca dimensiune.

Singurul lucru care îi lipsește este textul. Să introducem ceea ce lipsește în bloc siglă fişier index.html a obține:

Textul a apărut, dar trebuie și formatat.

Pe baza faptului că un logo este aproape întotdeauna un link, să setăm designul pentru clasele corespunzătoare.

#logo a ( text-decor: niciunul; text-transform: minuscule; font-style: italic; font-size: 36px; culoare: #FFFFFF; ) #logo h2 a ( font-size: 24px; )

Nu este nevoie să explicați nimic aici; sunteți familiarizat cu toate proprietățile de la Lecții de CSS. in orice caz aspect Textul s-a schimbat și, în general, antetul arată acum chiar mai bine decât pe aspectul PSD.

Aranjați partea principală a paginii

Apoi, am configurat cel mai mare bloc pe care va fi plasat tot conținutul unic. Acesta va ocupa 500px și va fi situat în partea dreaptă a site-ului. Să stabilim reguli de poziționare, design de titluri, paragrafe și link-uri (am vorbit deja despre toate proprietățile din articolele despre CSS).

#right ( float: dreapta; lățime: 500px; padding-right: 10px; ) #right h4 (marja: 0; padding: 0px; font-size: 12px; culoare: #D72020; ) #right a (culoare: #D72020 ; text-decor: niciunul; ) #right p (marja: 0; umplutură: 0; padding-bottom: 10px; ) #right h2 (margine: 0; padding: 0; padding-top: 10px; culoare: #D72020; )

Deoarece am fixat doar lățimea blocului, modificări vizibile nu va fi respectată până când nu o umplem cu conținut - înălțimea paginii se va modifica în funcție de conținut.

Să umplem recipientul dreapta. Vom plasa imaginile într-un tabel simplu.

Galerie

Bucătării

Conținutul a primit markup, dar îi lipsește în mod clar un fundal alb, care nu va apărea complet în curând.

Crearea unui panou din stânga

În timpul aspectului, dar după desenarea aspectului, s-a dovedit că meniul lateral va avea în continuare sub-articole și ar trebui să apară atunci când treceți cu mouse-ul peste elementul principal și să dispară când nu există niciun indicator pe acesta.

Situațiile în care trebuie să modificați designul „din zbor” apar destul de des. Distanța dintre meniu și conținutul principal ne permite să inserăm sub-articole, dar trucul cu dispariția și apariția submeniurilor este interesant.

În fișierul CSS, adăugați următorul cod.

#stânga (padding: 10px; lățime: 237px; padding-right: 1em; ) #left h3 (lățime: 225px; înălțime: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding- sus: 15px; text-transform: majuscule; culoare: #ffffff; fundal: url(images/title.gif) no-repeat ) #left ul (marja: 0; padding: 10px; list-style: none; lățime: 100px ; dimensiunea fontului: 18px; ) #left li ul (poziția: absolut; stânga: 90px; sus: 0; afișare: niciunul; ) #left ul li (poziția: relativă; margin-bottom:20px; ) #left ul li a ( afișaj: bloc; text-decor: niciunul; culoare: #ffffcc; fundal: #ff9900; umplutură: 5px; chenar: 1px auriu solid; chenar-jos: 0; ) #left li:hover ul ( afișare: bloc; ) #left li li ( margin-bottom:0px; lățime: 150px; ) #left p ( umplutură: 10px; chenar-jos: 1px solid #D72020; chenar-left: 1px solid #D72020; chenar-dreapta: 1px solid # D72020; )

Acordați atenție regulilor de clasă ulȘi li- Secretul meniului care dispare este acolo, descoperiți-l singur.

Să adăugăm mai întâi un bloc de informații fără meniu în containerul din stânga documentului HTML.

informație

Vă oferim reduceri de vacanță. Mai departe...

Meniul

Fundalul alb s-a extins mai jos pe pagină.

Acum este momentul să lipiți codul meniului din panoul din stânga în fișierul HTML. Spre deosebire de navigarea de sus, este implementat cu liste, care pot fi văzute din regulile CSS.

• Galerie
  • Bucătării
  • Paturi
  • Pereți
  • Holuri
  • Dulapuri
  • Mese de calculator
• Acord
• Preț
  • Bucătării
  • Paturi
  • Pereți
  • Holuri
  • Dulapuri
  • Mese de calculator
• Mostre
  • Sticlă
  • PAL
  • Accesorii
  • etc.
• Contacte
• Important

Când dezvoltați un site web, cel mai bine este să simplificați totul cât mai mult posibil, având posibilitatea de a instala șablon gata făcutîn câteva clicuri și începe. Acest lucru este valabil mai ales pentru cei care fie nu sunt buni la programare, fie sunt limitati în timp. Dar dacă scopul tău este să-ți faci site-ul web mai unic, ai anumite abilități în aspect, dar vrei totuși să economisești timp, există o soluție excelentă - layout-uri de site gata făcute pentru aspect.

Astfel de machete sunt create de designeri în Photoshop și, de fapt, sunt obișnuite fisiere grafice pagini. Ele nu sunt tăiate, dar vin în fișiere individuale. Avantajul lor este că designerul de layout va putea personaliza în mod independent designul pentru a se potrivi nevoilor individuale ale clientului. Și șabloanele PSD sunt destul de ieftine. Pe una dintre cele mai importante platforme de șabloane, Themeforest, prețurile pentru machete încep de la 3 USD.

Pentru utilizatorii obișnuiți, layout-urile site-ului web nu vor fi deosebit de utile, așa că recomand să nu pierdeți timp și nervi în plus și să alegeți imediat un șablon de site gata făcut. Da, sunt mai scumpe decât șabloanele PSD, dar această diferență va fi mai mult decât compensată de timpul economisit și de absența necesității unei amenajări ulterioare și a angajării unui specialist care să se adapteze la un anumit sistem. Avem o întreagă secțiune pe site-ul nostru dedicată miilor pentru orice scop. Avem și șabloane pentru alte CMS. Cu ei vei putea înțelege că dezvoltarea site-ului web este, de fapt, foarte simplă!

Pentru utilizatorii profesioniști, prezentăm cele mai bune douăzeci de machete PSD pentru diverse scopuri: afaceri, creativitate, blog și comerț electronic. Aproape toate layout-urile PSD au o versiune WordPress, așa că sfătuiesc și utilizatorii începători să citească această recenzie.

Aspecte de site-uri pentru layout pentru începători și utilizatori experimentați

TheFox – aspectul site-ului web pentru utilizare multifuncțională

Acest aspect cel mai popular are componente pentru un blog, magazin, pagină de destinație, portofoliu și site web corporativ. Toate sunt făcute cu simțul gustului și stilului. Setul include 280 de fișiere PSD. Iubitorii de WordPress au acces la o versiune gata făcută pentru acest CMS.

Avada – aspect universal PSD

Acest aspect conține 59 de fișiere PSD cu design unic pentru site-uri web de diferite tipuri, inclusiv magazine online, portofolii și bloguri. Versiune lată și cutie disponibilă. Există, de asemenea, o versiune WordPress cu drepturi depline a șablonului Avada, care este cea mai populară soluție WordPress din lume (360 de mii de clienți mulțumiți).

AdelFox – șablon PSD multifuncțional

150 de fișiere Photoshop care conțin zeci de variante ale unei pagini de pornire, magazin online, portofoliu, blog și alte pagini. Toate acceptă lucrul cu coduri scurte, ceea ce înseamnă că adăugarea de conținut va fi foarte simplă. Opțiuni de aplicare: blog creativ, site de știri, portofoliu personal și site-ul companiei.

Negru + Alb – aspect simplu cu design minimalist

O opțiune curată, elegantă pentru cei care doresc să-și facă site-ul mai unic. Ideal pentru site-uri cu fotografii frumoase. Nimic de prisos - doar esențialul.

HUGE – aspect universal PSD pentru un site web ideal

Aspectul este foarte elegant și vă va oferi o selecție largă de opțiuni pentru orice sarcină. Folosind abilitățile Photoshop, vă puteți face designul unic. Acceptă secțiuni cu lățime completă, acordeoane și meniuri drop-down.

Acest aspect are versiuni WordPress și Joomla pentru a facilita dezvoltarea.

Enfold – machete populare de site-uri web pentru aspect în format PSD

Acesta este un layout universal pentru orice companie care operează în orice domeniu de activitate. 31 de fișiere Photoshop bine organizate vă vor permite să modificați puțin setările, rezultând în design unic. Toate pictogramele și fonturile din aspect sunt gratuite. Există, de asemenea, o temă WordPress Enfold pentru cei care nu vor să o transpire.

Waxom – Clean Universal Photoshop Mockup

238 de fișiere, design curat, fonturi Google și grilă Bootstrap. Domenii de aplicare: portofoliu, hosting, medicină, călătorii, biserică, imobiliare, mașini, comerț online și afaceri. Există, de asemenea, machete mobile și o temă WordPress pentru doar 59 USD.

Cercuri – layout-uri interesante de site-uri web cu design perfect

Acest aspect combină designul uimitor cu funcționalitatea puternică și ușurința în utilizare. Acceptă lucrul cu grila Bootstrap. Toate cele 14 fișiere PSD se deschid în orice versiune de Photoshop. Ele organizează foarte bine straturile pentru a le face ușor de lucrat.

Travelo – un set de machete pentru agențiile de turism

Acest aspect conține modele elegante pentru operatori de turism și agenții de turism. 21 de opțiuni de glisare cu suport pentru Revolution și Layer Slider. 12 layout-uri de pagină de pornire. Există și o versiune pentru WordPress.

Delimondo – aspect receptiv al site-ului web al restaurantului

Acest aspect are 5 stiluri de design cu câte 10 pagini fiecare. Doar 50 de fișiere PSD pentru personalizarea detaliată a designului. Suport pentru glisoare, formulare de rezervare și fonturi gratuite Google.

Acesta este un aspect de design special pentru care sunt deosebit de populari printre utilizatori ruși. Aspectul acceptă variații pagina principala, precum și pagini de categorii, comparație de produse, coș de cumpărături, plată, autentificare/înregistrare, cont, blog și altele.

Rezervați-vă călătoria – aspectul site-ului pentru aspectul operatorului de turism

Acest șablon PSD este deja familiar cititorilor noștri datorită șablonului WordPress pentru serviciile de rezervare de bilete, agenții de turism, hoteluri și bloguri de călătorie. Fișierele proiectate au o pagină de pornire cu o bară de căutare, o pagină cu rezultate de căutare și pagini de hotel cu toate informațiile. Sunt 16 fișiere PSD în total.

Agenție de turism – aspectul site-ului web PSD de călătorii multitasking

Design curat cu funcții de rezervare pentru agenții de turism și imobiliare. Vine în trei stiluri de culoare: albastru, verde și portocaliu. Sunt 59 de fișiere PSD în total!

Pentru recenzii ale site-urilor WordPress gata făcute pentru industria turismului, consultați și.

Super Duper – aspect elegant pentru orice afacere

În acest aspect în 150 de fișiere Photoshop, veți găsi 21 de aspecte de pagină de pornire, peste 50 de aspecte de magazin online, 10 pagini de blog și chiar 2 machete de site de o singură pagină. Sunt furnizate machete mobile.

Carry Hill – Macheta site-ului școlii PSD

Designul unic al acestui aspect este excelent atât pentru site-urile web școlare, cât și pentru cele creative. 8 fișiere PSD simple cu designul paginii de start, blog, galerie, detalii de contact și alte pagini. Există suport pentru Doodles.

Educational Teme WordPress ne-am uitat în mai multe recenzii:, și.

În acest articol vom vorbi despre site-urile pe care dezvoltatorii le creează manual, adică tastați.

Articolul este destinat utilizatorilor familiarizați HTML Și CSS . De asemenea, este indicat să cunoașteți cel puțin elementele de bază Adobe Photoshop

Una dintre etapele creării unui site web real este crearea unui șablon PSD. De asemenea, puteți întâlni nume precum aspect, design sau sursă.

Șablonul este comandat designerului. Designerul desenează aspectul în Adobe Photoshop și îl salvează în format PSD.

Ce este formatul PSD?

Pentru o mai bună înțelegere, puteți da un exemplu simplu de viață. În copilărie, toată lumea a lipit aplicații. Am decupat o casă din hârtie și am lipit-o. Am decupat bradul și l-am lipit. Și tot așa până când lucrarea este gata.

Acum vă puteți imagina o situație în care figurile au fost decupate, așezate pe foaie în locurile potrivite, dar încă nelipite. Așadar, formatul de fișier PSD poate fi comparat cu o aplicație pe care figurile nu au fost încă lipite, dar au fost aranjate în ordinea dorită.

Datorită acestui fapt, fiecare astfel de „figură”, sau mai degrabă fiecare fragment individual al șablonului, poate fi salvată ca o imagine separată, care poate fi apoi utilizată pe site.

Iată aspectul paginii care va fi creată.

Odată ce avem un șablon gata făcut în format PSD, putem merge direct la aspect

1. Creați un folder în care va fi stocat aspectul, de exemplu „Site”.
2. În folderul „Site”, creați un folder pentru imagini, de exemplu img.
3. În folderul „Site”, creați un folder pentru stiluri, de exemplu css.
4. Acum trebuie să fugi programul Adobe Photoshop și deschideți-l în el fisier PSD. De aici trebuie să „trageți” toate imaginile care vor fi folosite pe site.

Aici trebuie să acordați atenție butonului „Straturi”. În figură este evidențiată cu un oval roșu.

Acest buton activează și dezactivează fereastra stratului. Straturile sunt chiar părțile aplicației care nu sunt lipite între ele. Pentru comoditate, straturile sunt împărțite în foldere care pot fi restrânse și extinse. Principiul de funcționare este aproape același ca în Windows Explorer.

Primul pas este să restrângeți toate folderele. Extindeți după cum este necesar.

Acum puteți începe să „trageți” imagini

Primul lucru pe care trebuie să-l faceți este să selectați instrumentul cadru. Apoi selectați doar partea care limitează sigla site-ului

După aceasta, apăsați tasta Enter. Totul, cu excepția zonei selectate, va fi tăiat.

Acum puteți elimina fundalul. Pentru a face acest lucru, trebuie să dezactivați stratul de fundal.

Cu scopul de a cautare rapida straturile dorite, puteți efectua următorii pași:

Aici stratul este numit „Forma 2”. Făcând clic pe imaginea ochiului, stratul este invizibil.

Cu toate acestea, mai există două straturi care trebuie dezactivate. Acțiunile sunt similare.

Acum poți salva. Pentru a face acest lucru, trebuie să faceți următoarele:

Alegeți dintre 4 opțiuni propuse și din cea de-a doua propusă. Extensie selectează gif.

Nume de fișier logo.gif . Salvați fișierul într-un folder img . Și alte imagini ar trebui salvate acolo.

Puteți urma aceste principii:

• calitatea fotografiei - jpg
• calitate fotografică cu fundal transparent – png-8 , nemulțumit de calitate - png-24
• putine culori in imagine - gif

Pentru a returna versiunea originală înainte de tăiere, trebuie să deschideți fereastra istoric

Faceți clic pe numele fișierului și setați scala corespunzătoare.

Alte imagini sunt salvate în același mod.

Același lucru este valabil și pentru imaginea labei care apare atunci când treceți cu mouse-ul peste un element de meniu.

Alte imagini sunt optionale. Poate fi pe alb, poate fi pe transparent.

Aici ar trebui să alegeți cu mare atenție opțiunea de salvare, deoarece în sursele PSD sunt adesea imagini cu margini procesate prost. Iată un exemplu:

Imaginea a fost salvată în fundal transparent. Cu toate acestea, când îl vizualizați în negru, sunt vizibile marginile procesate prost. Dar atunci când utilizați un fundal deschis, acest defect poate să nu fie vizibil.

Pentru fundal, va trebui să decupați o imagine mică care va umple pagina ca o dală. Cu toate acestea, în acest exemplu, fundalul nu se repetă. Prin urmare, este mai bine să găsiți imagine similară. Sau puteți încerca să-l selectați decupând diverse fragmente din fundal.

Începutul aspectului. Înveliș. Antetul site-ului.

Aspectul va fi luat în considerare folosind HTML5 și CSS3.

În folderul site-ului dvs. trebuie să creați fișier HTML. De exemplu index.html.

În dosar css creați fișierul stil.css .

În plus, în folder css trebuie să plasați fișierul resetare.css cu următorul cod

/* v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps;bread-spacing: 0; )

Adevărul este că browsere diferite pentru aceeași etichetă poate avea setări diferite. Pentru a asigura compatibilitatea între browsere, acestea trebuie resetate. Codul de mai sus a fost dezvoltat de Eric Mayer.

Primul in index.html ar trebui să scrieți etichetele principale.

Pentru o etichetă în stiluri trebuie să setați fundalul.

După cum am menționat deja, fundalul nu se repetă aici. Prin urmare, ar fi mai rațional să alegeți unul similar.

Corp (imagine de fundal: url(../img/bg.gif); )

Acum trebuie să creați un site wrapper - un bloc în care va fi plasat tot conținutul.

Lângă cel de închidere