Копирайте дизайн Подобно на сайт, mnogoblog
Понякога попаднете на сайт с красив дизайн и искам да знам дали е възможно да се направи нещо като у дома си. Така че тук ние ще говорим за това.
Изтеглете изходния код на тази статия може да бъде по-долу
И стигнем до точката, ...)
1. Научете какво тема (по образец) се използва на сайта, тъй като то най-вече определя цялостния проект и функционален.
И затова, ако зададете тази тема в сайта си, след това затворете достатъчно, за да се доближи до желания дизайн.
Първото нещо, което да се направи - е да се определи в кой двигател (CMS), за да се направи сайт.
Има един много полезен онлайн услуги, които да ни помогнат да се идентифицират CMS сайт, например:
Там просто укажете името на сайта и вижте признаците на CMS ще намерите на тази услуга.
Необходимата сайта на базата на WordPress - перфектно! Така че темата е подходяща за нашия сайт.
Ние отиде по-далеч и да изглежда - какво предмет ползване на сайта.
Как да направите това е съвсем проста.
Вземем примера на браузъра Firefox.
1. Отворете ни желания към сайта, като mnogoblog.ru.
2. Отворете "Page Source", за да направите това, натиснете клавишната комбинация CTRL + U (едновременно затягане на двата бутона: CTRL и U), или отидете в менюто на браузъра, щракнете върху "Инструменти", а след това под-точка "Уеб развитие" и да избере да своята линия на "страницата".
3. Ние търсим за една линия с връзка към стила на файла style.css.
Ето как изглежда на моя уебсайт:
Тъй като е по-лесно да се търси?
В показалия се прозорец "Page Source" изберете "Edit" от менюто на върха и елементът "Намери".
И влиза търсене низ «CSS» на (без кавичките), или просто «style.css» (без кавичките).
Какво ни дава тази линия?
Това ни дава името на темата, която се използва в моя сайт WordPress тема «glossyblue», тъй като тя използва файл стил на сайта в момента mnogoblog.ru.
Сега ние трябва да се забие в заявка за търсене на двигателя: «WordPress Тема glossyblue» - и вие ще откриете моята тема без проблеми (въпреки че аз го направих малко модифициран).
Въпреки това, този метод за определяне на темите може да не работи, като собственик на сайт да преименувате папката с темата.
За да решаване на пъзели, има малък трик - главно теми включват скрийншот (снимка ще изглежда темата след инсталацията) - това е и трябва да бъде намерен.
Ето, например, на сайта им и ще преименувате нишките на glossyblue mytheme, а след това в намирането на файла с style.css стил вие ще видите в изходния код на сайта на следния ред:
Ясно е, че истинското име на моите въпроси, които не са mytheme, но след това намери името й?
Това е достатъчно, за да карам по пътя на браузъра, заменяйки края на style.css на screenshot.jpg или screenshot.png.
Например, ако поставите на сайта в браузъра на следния адрес, а след това аз виждам снимки glossyblue теми:
Сега ние трябва да спаси екрана на вашия компютър.
След това трябва да използвате опцията за търсене по снимките, като например използването на търсачката Google:
кликнете в лентата за търсене на иконата на фотоапарат и укажете пътя до изтеглената тема ни екранна снимка.
А по въпроса за резултатите на Google в 5-та позиция се обърнах моя сайт теми разработчик.
2. При спазване копирани, сега се търси как да създадете интересни елементи от дизайна ние харесаха сайт.
Можете да използвате разширение на браузъра.
Например, за браузъра Firefox - е Firebug.
Как да го инсталирате?
Да го кажем, за да си Firefox трябва да отидете на елемент от менюто в "Инструменти" на браузъра, след това изберете елемента "Добавки" и в лентата за търсене, за да влезете Firebug.
Как да го използвам?
Аз използвам следната функция (маркирани в снимката):
Как да използвате тази функция?
След като сте кликнали върху бутона Firebug плъгин, дръжте на мишката върху желаните области на дадена уеб страница, а от лявата страна на Firebug плъгин ще можете да наблюдавате области HTML код. отговорна за образуването на тези елементи от дизайна (те ще бъдат подчертани с син фон), а дясната част на прозореца можете да видите стиловете, които описват елемента в стилове style.css файлове.
В тази страница елемент, върху което курсора на мишката ще бъде сключен подпалвач щепселни сили в синя рамка.
На екранната по-горе, аз подчерта картина с къщи и видя, че тя е затворник в Разделение на име сгради, както и следните параметри са регистрирани във файла style.css стил лист:
фон: URL ( «изображения / черта-buildings.png») не-повторение превъртане 0 0 прозрачен;