Copiați design Ca și site-ul, mnogoblog

Uneori întâlniți un site cu un design frumos și doresc să știe dacă este posibil de a face ceva ca acasă. Deci, aici vom vorbi despre asta.
Descărcați codul sursă pentru acest articol poate fi de mai jos

Și ajunge la punctul ...)

1. Aflați ce temă (șablon) este utilizat pe site-ul, deoarece determină în principal proiectarea globală și funcționalitate.

Și, prin urmare, dacă am stabilit această temă pe site-ul dvs., apoi suficient de aproape pentru a ajunge mai aproape de designul dorit.

Primul lucru de făcut - este de a determina la ce motor (CMS) pentru a face un site web.

Există un serviciu de online, foarte util care ne ajuta pentru a identifica site-ul CMS, de exemplu:

Nu trebuie decât să precizeze numele site-ului și a vedea semnele unui CMS va găsi acest serviciu.

Site-ul necesar bazat pe WordPress - perfect! Deci, tema este potrivit pentru site-ul nostru.

Noi mergem mai departe și uite - ceea ce subiect utilizarea site-ului.

Cum de a face acest lucru este destul de simplu.

Luați în considerare exemplul browser-ului Firefox.

1. Deschideți ne dorit pe site-ul, astfel mnogoblog.ru.

2. Deschideți „pagina sursă“ pentru a face acest lucru, faceți clic pe comanda rapidă de la tastatură Ctrl + U (prindere simultană a celor două taste: CTRL și U), sau mergeți la meniul browserului, faceți clic pe „Tools“, apoi sub-element „Dezvoltare web“ și alege să linia sa de „pagina sursă“.

3. Cautam o linie cu un link la stilul style.css fișier.

Așa cum arată pe site-ul meu:

Așa cum este mai ușor de găsit?

În fereastra rezultată, „Page Source“ selectați „Edit“ elementul de meniu din partea de sus și elementul „Find“.

Și introduceți șirul de căutare «css» (fără ghilimele) sau pur și simplu «style.css» (fără ghilimele).

Ce ne dă această linie?

Ea ne dă numele temei, care este utilizat pe site-ul meu WordPress temă «glossyblue», deoarece el folosește un fișier de stil pe un site în prezent mnogoblog.ru.

Acum trebuie să ciocan într-o interogare de motor de căutare: «WordPress temă glossyblue» - si vei descoperi tema mea fara probleme (desi am facut un pic modificat).

Cu toate acestea, această metodă de determinare a subiectelor ar putea să nu funcționeze, cum ar fi un proprietar de site poate redenumi dosarul cu tema.

În scopul de a rezolva puzzle-uri există un mic truc - în principal subiecte includ o captură de ecran (imagine ar arata ca tema după instalare) - care este și trebuie să fie găsit.

Aceasta este, de exemplu, pe site-ul lor și voi redenumi firele de pe mytheme glossyblue, apoi în găsirea fișierul style.css stil veți vedea în codul sursă al site-ului următoarea linie:

Este clar că numele real al temelor mele nu sunt mytheme, dar apoi a găsit numele ei?

Este suficient pentru a conduce o cale de browser, înlocuind sfârșitul style.css pe screenshot.jpg sau screenshot.png.

De exemplu, dacă am pus pe site-ul în browser următoarea adresă URL, atunci am vedea captura de ecran subiecte glossyblue:

Acum, avem nevoie pentru a salva captura de ecran pe computer.

Apoi, trebuie să utilizați căutarea prin imagini, cum ar fi motorul de căutare Google:

click în bara de căutare pe pictograma camerei, și specificați calea către tema descărcat ne captură de ecran.

Iar în problema rezultatelor Google în poziția 5 am întors site-ul meu teme de dezvoltator.

2. Subiect copiat, sunt acum în căutarea pentru modul de a crea elemente interesante de design ne-a placut site-ul.

Puteți utiliza extensia de browser.

De exemplu, pentru browser-ul Firefox - este Firebug.

Cum să-l instalați?

Pentru a pune-l la Firefox nevoie pentru a merge la un element de meniu în „Tools“ browser-ului, apoi selectați elementul „Add-ons“ și în bara de căutare pentru a introduce Firebug.

Cum să-l folosească?

Eu folosesc următoarea funcție (marcate în captura de ecran):

Cum de a utiliza această funcție?

După ce ați făcut clic pe butonul plugin Firebug, păstrați mouse-ul peste zonele dorite ale unei pagini web, iar în partea stângă a Firebug plugin-ul va fi capabil de a observa zone de cod HTML. responsabil pentru formarea acestor elemente de design (acestea vor fi evidențiate cu fundal albastru), în timp ce partea din dreapta a ferestrei, puteți vedea stilurile care descriu elementul în fișierul style.css foaie de stil.

In acest element de pagină peste care cursorul mouse-ului se va încheia Firebug forțe plug-in într-un cadru albastru.

În captura de ecran de mai sus, am subliniat poza cu case și a văzut că ea era prizonier în clădiri numit div, iar următorii parametri sunt înregistrate în fișierul style.css foaie de stil:

fundal: url ( «imagini / recomandate-buildings.png») fără repetare parcurgere 0 0 transparente;