Как скачать css с сайта

Как скопировать html вместе со стилями css?

Иногда есть задача — скопировать html и css код с определенного элемента сайта, вроде бы просто, но css этого элемента может быть размазан по всему файлу css а также у элемента могут быть дочерние элементы их тоже нужно выискивать в файле.

2019-02-08.png

В этом случае нам поможет плагин для Chrome CSS Used

Работа с плагином проста, устанавливаем плагин по ссылке, в правой части там же где инспектор css — в меню появился еще один пункт CSS Used .

Выделяем нужный Html блок и плагин вытянет все стили этого элемента и в том числе дочерние.

Как скопировать дизайн понравившегося сайта?

Для примера я подобрал простенький лендинг какого-то инфобизнесмена, продающего секрет, как стать миллионером ничего не делая. Вот так выглядит первая страница.

Дальше идёт обычная портянка с машинам и особняками, которые вы купите, получив этот метод, пальмами, к которым вы сможете путешествовать и отзывами счастливых посетителей, которые уже всё купили и сидят под пальмой.

Шаг 1. Копируем html код

Для GoogleChrome проще всего получить код, просто нажав Ctrl + U. В браузере откроется новое окошко с html.

Как вариант, можно просто запустить инструменты разработчика в меню браузера и скопировать то, что нужно из окна в правом верхнем углу.

Открываем блокнот, копируем туда код полностью и сохраняем на диск как index.html. Собственно, уже сейчас сайт можно запустить и увидеть вот что.

Структура документа сохранена, нам нужны стили.

Шаг 2. Чистим html

На этом этапе удаляем всё, что нам не понадобится. Это ссылки на ресурсы прежнего хозяина и коды метрик. Ссылки на сторонние ресурсы (в основном на продажу и партнёрскую программу) заменяем на #. Навигацию по документу не трогаем. Она выглядит примерно так.

Шаг 3. Копируем стили CSS и код JavaScript

Заходим на страницу в браузере, где нам показали код и находим ссылки на файлы стилей. Как правило, они все размещены внутри блока <header></header>. Кликаем мышкой на каждую из ссылок и переходим в соответствующий файл. В нашем случае их три плюс

Каждый из них копируем и сохраняем на диск.

Структуру каталогов сохраняем как в исходном проекте. В папке CSS – файлы стилей, в папке JS – код JavaScript.

С ним нужно быть аккуратнее, поскольку современные сайты перегружены огромным количеством JS. Во-первых, мы видим что один файл подключается в шапке сайта.

И ещё три внизу, в конце файла html. Это стандартные библиотеки jQuery, которые мы тоже копируем и кидаем в одну общую папку для JS. Код в строке 1047 подключает бесплатный онлайн генератор таймера обратного отсчета для сайта. С ним ничего не делаем. Код внутри индексного файла, заключённый между тегами <script> </script> пока оставляем как есть.

В итоге выглядит уже посимпатичнее, но без картинок всё равно не слишком весело.

Шаг 4. Вставляем картинки

Картинки придётся разыскивать в двух местах. Во-первых, непосредственно в файле html, во-вторых, в коде css, где они работают фоном для блоков

Картинки из индексного файла проще всего копировать и сохранять опять-таки, со страницы кода в браузере. Там они очень наглядно подсвечены синим шрифтом.

И — упс! — нам попался жадноватый гуру, который попытался закрыть свои файлы от копирования. При попытке вытащить их напрямую мы видим ошибку сети. Поэтому открываем инструмент разработчика, ищем нужную картинку и копируем адрес ссылки.

Нажимаем на фрагмент кода правой кнопкой мыши, выбираем «Copy link address», кликаем. Открываем новое окно, вставляем туда скопированную ссылку и видим фото. Копируем его к себе в папку images. Сохраняем все картинки из html, обновляемся. Частично изображения появились на сайте.

Теперь дело за бэкграундом. Снова идём в инструменты разработчика, в верхнем окошке для html пролистываем блоки, до тех пор, пока не будет подсвечен нужный. В нижнем, где показан код css ищем ссылку на background-image или background. Действуем аналогично.

В итоге первая страница 1 в 1 совпадает с тем, что было у нашего бизнесмена. Успешно работает весь JavaScript, тикают часики до завершения супер-скидки, работает счётчик сверхдоходов.

Заключение

Давайте подводить итоги. Скопировать дизайн чужого лендинга, блога, портала, интернет-магазина не просто, а очень просто. Достаточно взять код html, стили css, скрипты js и картинки. Затем мы меняем ссылки на нужные нам, стилизуем цвет, меняем изображения, видео и текст на свои – и «новый» сайт готов! В целом процедура абсолютно не трудная, хотя и немного нудноватая.

Обратите внимание, насколько наивны и бессмысленны при этом все попытки каким-то образом «защитить» свой сайт от копирования. Да и, действительно, включим логику – как можно защитить от копирования код, который уже пришёл на компьютер клиента и показывается в браузере?

Сначала я планировал выложить итоговый результат в качестве иллюстрации, но по мере подготовки статьи передумал. Всё-таки, мне не хочется плодить в рунете такого рода страницы, пусть даже и в виде учебного материала. Здесь мы просто разобрали технологию, по которой, к сожалению, до сих пор активно работают недобросовестные веб-студии и фрилансеры, копируя понравившиеся ресурсы и продавая результат заказчику. Делать так, конечно, не стоит, а вот знать сам принцип, для того, чтобы посмотреть, как реализуются интересные решения, полезно каждому веб-разработчику.

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Копируем дизайн понравившегося сайта

Порой натыкаешься на сайт с красивым дизайном и хочется узнать, а можно ли сделать что-нибудь наподобие у себя. Так вот здесь и поговорим об этом.
Скачать исходники для статьи можно ниже

1. Узнаем какая тема (шаблон) используется на сайте, так как она в основном и определяет его общий дизайн и функционал.

И следовательно если мы установим данную тему на свой сайт, то достаточно близко приблизимся к нужному дизайну.

Первое что нужно сделать &#8211; это определить на каком движке (CMS) сделан сайт.

Есть очень полезные онлайн сервисы, помогающие нам определить CMS сайта, например:

2ip.ru/cms/

Здесь просто указываем имя сайта и смотрим признаки какой CMS найдет данный сервис.

Нужный нам сайт базируется на WordPress &#8211; отлично! Значит тема подойдет для нашего сайта.

Идем далее и смотрим &#8211; какую тему использует сайт.

Как это сделать, оказывается достаточно просто.

Рассмотрим на примере браузера Firefox.

1. Открываем нужный нам сайт, например mnogoblog.ru.

2. Открываем &#8220;Исходный код страницы&#8221;, для этого нажимаем комбинацию клавиш CTRL + U (одновременное зажатие этих двух клавиш: CTRL и U) или же заходим в меню браузера в пункт &#8220;Инструменты&#8221;, далее подпункт &#8220;Веб-разработка&#8221; и выбираем в нем строчку &#8220;Исходный код страницы&#8221;.

3. Ищем строчку с ссылкой на файл стилей style.css.

Вот так она выглядит на моем сайте:

Как ее легче отыскать?

В появившемся окошке &#8220;Исходный код страницы&#8221; выбираем в верхнем меню пункт &#8220;Правка&#8221; и подпункт &#8220;Найти&#8221;.

И вводим в строку поиска &#8220;css&#8221; (без ковычек) или сразу &#8220;style.css&#8221; (без ковычек).

Что дает нам данная строчка?

Она дает нам название темы, то есть на моем сайте используется wordpress тема &#8220;glossyblue&#8221;, так как ее файл стилей использует на данный момент сайт mnogoblog.ru.

Теперь нам осталось вбить в поисковик запрос: &#8220;wordpress тема glossyblue&#8221; &#8211; и вы без проблем отыщете мою тему (правда я ее немного доработал).

Но данный способ определения темы может и не сработать, например владелец сайта может переименовать папку с темой.

Для решения этой задачки есть небольшая хитрость &#8211; в основном темы включают в себя скриншот (картинку как будет выглядеть тема после установки) &#8211; вот его то и нужно найти.

То есть, например на своем сайте я возьму и переименую папку темы с glossyblue на mytheme, тогда при отыскании файла стилей style.css вы увидите в исходном коде сайта следующую строчку:

Понятно, что реальное название моей темы не mytheme, но как тогда узнать ее название?

Для этого достаточно в браузер вбить путь, заменив окончание style.css на screenshot.jpg или на screenshot.png.

Например если я вобью на своем сайте в браузер следующий url, то увижу скриншот темы glossyblue:

Теперь нам нужно сохранить данный скриншот на свои компьютер.

Далее нужно воспользоваться поиском через картинки, например с помощью поисковика Google:

нажимаем в строке поиска на иконку фотоаппарата и указываем путь до скаченного нами скриншота темы.

И в выдаче результатов Google на 5 позиции у меня оказался сайт разработчика моей темы.

2. Тему скопировали, теперь ищем как создать интересные дизайнерские элементы понравившегося нам сайта.

Для этого можно воспользоваться расширением для браузеров.

Например для браузера Firefox &#8211; это Firebug.

Как его установить?

Для того, чтобы его поставить себе на Firefox нужно зайти в менюшке браузера в пункт &#8220;Инструменты&#8221;, далее выбрать подпункт &#8220;Дополнения&#8221; и в строке поиска ввести Firebug.

Как им пользоваться?

Я пользуюсь в основном следующей функцией (отмечена на скриншоте):

Как пользоваться данной функцией?

После того как вы нажали на эту кнопку плагина Firebug, ведите мышью над нужными участками вебстраницы, и в левой части окна плагина Firebug сможете наблюдать участки Html кода, отвечающие за формирование данных элементов дизайна (они будут выделены синим фоном), а в правой части окна вы сможете увидеть стили, которые описывают данный элемент в файле стилей style.css.

При этом элемент страницы, над которым находится курсор мыши, будет заключен силами плагина Firebug в синюю рамочку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *